{
  "version": 3,
  "sources": ["angular:jit:template:file:src/app/style-guide/style-guide.component.html", "angular:jit:style:file:src/app/style-guide/style-guide.component.scss", "src/app/style-guide/style-guide.component.ts"],
  "sourcesContent": ["<p-panel header=\"Headings\" styleClass=\"mb-4\"\n    ><h1>Heading 1</h1>\n    <h2>Heading 2</h2>\n    <h3>Heading 3</h3>\n    <h4>Heading 4</h4>\n    <h5>Heading 5</h5>\n    <h6>Heading 6</h6>\n</p-panel>\n<p-card header=\"Paragraphs\" styleClass=\"mb-4\">\n    <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel rhoncus massa.\n        <strong>Pellentesque habitant morbi</strong> tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur diam ante,\n        blandit a orci non, pretium maximus arcu. <a href=\"#\">Maecenas volutpat justo</a> sed consectetur pulvinar. Nam ut tortor eros.\n        Donec volutpat eros eget felis porta commodo. Cras porttitor lorem est, nec accumsan justo eleifend vitae.\n    </p>\n    <p>\n        <small>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel rhoncus massa.\n            <strong>Pellentesque habitant morbi</strong> tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur diam\n            ante, blandit a orci non, pretium maximus arcu. <a href=\"#\">Maecenas volutpat justo</a> sed consectetur pulvinar. Nam ut tortor\n            eros. Donec volutpat eros eget felis porta commodo. Cras porttitor lorem est, nec accumsan justo eleifend vitae.\n        </small>\n    </p>\n</p-card>\n<p-card header=\"Inputs\" styleClass=\"mb-4\">\n    <div class=\"p-fluid formgrid grid\">\n        <div class=\"field col\">\n            <label for=\"firstname1\">First Name</label>\n            <input id=\"firstname1\" type=\"text\" pInputText />\n        </div>\n        <div class=\"field col\">\n            <label for=\"search\">Icon</label>\n            <span class=\"p-input-icon-left\">\n                <i class=\"far fa-search\"></i>\n                <input id=\"search\" type=\"text\" pInputText placeholder=\"Search\" />\n            </span>\n        </div>\n        <div class=\"field col\">\n            <label for=\"firstname1\">Small</label>\n            <input id=\"firstname1\" class=\"p-inputtext-sm\" type=\"text\" pInputText />\n        </div>\n    </div>\n</p-card>\n<p-card header=\"Buttons\" styleClass=\"mb-4\">\n    <button\n        pButton\n        pRipple\n        type=\"button\"\n        label=\"View Alert Playback\"\n        icon=\"fas fa-play-circle\"\n        class=\"p-button-rounded p-button-sm\"\n    ></button>\n    &nbsp;\n    <button pButton pRipple type=\"button\" label=\"View Alert Playback\" icon=\"fas fa-play-circle\" class=\"p-button-rounded\"></button>\n    &nbsp;\n    <button pButton pRipple type=\"button\" icon=\"fas fa-times\" class=\"p-button-rounded p-button-outlined\"></button>\n    &nbsp;\n    <small>\n        <button pButton pRipple type=\"button\" icon=\"far fa-times\" class=\"p-button-rounded p-button-outlined color-light-grey\"></button>\n    </small>\n    &nbsp;\n    <button pButton pRipple icon=\"fas fa-times\" class=\"p-button-outlined\"></button>\n    &nbsp;\n    <small> <button pButton pRipple icon=\"fas fa-download\" class=\"p-button-outlined color-light-grey\"></button></small>\n</p-card>\n<p-card header=\"Checkboxes\" styleClass=\"mb-4\">\n    <p-checkbox name=\"groupname\" [(ngModel)]=\"checked\" [binary]=\"true\" checkboxIcon=\"fas fa-check\" label=\"Checked checkbox\"></p-checkbox>\n    <br /><br />\n    <p-checkbox name=\"groupname\" label=\"Unchecked checkbox\" checkboxIcon=\"fas fa-check\"></p-checkbox>\n    <br /><br />\n    <small>\n        <p-checkbox name=\"groupname\" [(ngModel)]=\"checked\" [binary]=\"true\" label=\"Small checkbox\" checkboxIcon=\"fas fa-check\"></p-checkbox\n    ></small>\n</p-card>\n<p-card header=\"Dropdowns\" styleClass=\"mb-4\">\n    <p-dropdown [options]=\"cities\" optionLabel=\"name\" dropdownIcon=\"fas fa-chevron-down\"></p-dropdown>\n</p-card>\n<p-card header=\"Toggles\" styleClass=\"mb-4\">\n    <p-inputSwitch [(ngModel)]=\"checked\"></p-inputSwitch>\n</p-card>\n<p-panel header=\"Cards\" styleClass=\"mb-4\">\n    <div class=\"grid\">\n        <div class=\"col\">\n            <p-card> Contenta sfdsa fas fsdf as fsa </p-card>\n        </div>\n        <div class=\"col\">\n            <p-card header=\"Title\"> Content </p-card>\n        </div>\n    </div>\n</p-panel>\n<p-panel header=\"Panel\" styleClass=\"mb-4\"> Content </p-panel>\n<p-panel header=\"Accordion\" styleClass=\"mb-4\">\n    <p-accordion>\n        <p-accordionTab>\n            <ng-template pTemplate=\"header\">\n                <div class=\"font-size-1-rem\"><i class=\"icon fas fa-play-circle mr-2\"></i> Playback</div>\n            </ng-template>\n            <ng-template pTemplate=\"content\"\n                >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. Nam\n                libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis\n                auctor elit sed vulputate. Consequat ac felis donec et.</ng-template\n            >\n        </p-accordionTab>\n        <p-accordionTab>\n            <ng-template pTemplate=\"header\">\n                <div class=\"font-size-1-rem\"><i class=\"icon fas fa-eye mr-2\"></i> Map View</div>\n            </ng-template>\n            <ng-template pTemplate=\"content\"\n                >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. Nam\n                libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis\n                auctor elit sed vulputate. Consequat ac felis donec et.</ng-template\n            >\n        </p-accordionTab>\n    </p-accordion>\n</p-panel>\n<p-panel header=\"Scroll Panel\">\n    <p-scrollPanel [style]=\"{ 'max-width': '400px', width: '100%', height: '300px' }\">\n        <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n            Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. Nam\n            libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor\n            elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin\n            gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin\n            aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et\n            malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.\n            Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus\n            purus in massa tempor nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n            et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur\n            adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est\n            ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper\n            feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi\n            in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique\n            senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas\n            ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.\n            Mattis aliquam faucibus purus in massa tempor nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n            tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est\n            lorem. Amet consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit\n            dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue\n            mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus\n            aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet dictum\n            sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras\n            sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est\n            ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor\n            magna eget est lorem. Amet consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi\n            quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac\n            auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque\n            sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus\n            sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh\n            venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi. Suscipit\n            adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. Lorem ipsum dolor sit amet,\n            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam.\n            Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. Nam libero justo laoreet sit amet.\n            Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac\n            felis donec et. Tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt\n            arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit\n            amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor\n            consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl\n            nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.\n        </p>\n    </p-scrollPanel></p-panel\n>\n<section>\n    <h3>Graphs</h3>\n    <div class=\"grid\">\n        <div class=\"col\">\n            <p-panel header=\"Building Occupancy\">\n                <p>Average building capacity over the past 4 weeks, between 10 PM and 8 AM</p>\n                <p-chart type=\"line\" [data]=\"basicData\" [options]=\"basicOptions\"></p-chart>\n            </p-panel>\n        </div>\n        <div class=\"col\">\n            <p-panel header=\"Building Occupancy\">\n                <p>Average building capacity over the past 4 weeks, between 10 PM and 8 AM</p>\n                <p-chart type=\"bar\" [data]=\"stackedData\" [options]=\"stackedOptions\"></p-chart>\n            </p-panel>\n        </div>\n    </div>\n</section>\n", "/* src/app/style-guide/style-guide.component.scss */\nsection {\n  margin: 3rem 0;\n}\n/*# sourceMappingURL=style-guide.component-HCOL22NE.css.map */\n", "import { Component, OnInit } from '@angular/core';\n\n@Component({\n    selector: 'app-style-guide',\n    templateUrl: './style-guide.component.html',\n    styleUrls: ['./style-guide.component.scss'],\n})\nexport class StyleGuideComponent implements OnInit {\n    checked = true;\n    cities = [\n        { name: 'New York', code: 'NY' },\n        { name: 'Rome', code: 'RM' },\n        { name: 'London', code: 'LDN' },\n        { name: 'Istanbul', code: 'IST' },\n        { name: 'Paris', code: 'PRS' },\n    ];\n    basicData: any;\n    basicOptions = {\n        legend: {\n            labels: {\n                fontFamily: '\"Roboto\", \"Helvetica Neue\", sans-serif',\n                fontColor: '#ffffff',\n            },\n        },\n        scales: {\n            xAxes: [\n                {\n                    gridLines: {\n                        display: true,\n                        color: '#43384b',\n                    },\n                    ticks: {\n                        fontFamily: '\"Roboto\", \"Helvetica Neue\", sans-serif',\n                        fontColor: '#766881',\n                    },\n                },\n            ],\n            yAxes: [\n                {\n                    gridLines: {\n                        display: true,\n                        color: '#43384b',\n                    },\n                    ticks: {\n                        fontFamily: '\"Roboto\", \"Helvetica Neue\", sans-serif',\n                        fontColor: '#766881',\n                    },\n                },\n            ],\n        },\n    };\n    stackedData: any;\n\n    stackedOptions: any;\n\n    constructor() {}\n\n    ngOnInit(): void {\n        this.basicData = {\n            labels: ['4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM'],\n            datasets: [\n                {\n                    label: 'Capacity Levels',\n                    data: [90, 75, 160, 295, 280, 290, 295],\n                    fill: false,\n                    borderColor: '#9f64d1',\n                },\n            ],\n        };\n\n        this.stackedData = {\n            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],\n            datasets: [\n                {\n                    type: 'bar',\n                    label: 'Actual Occupancy',\n                    backgroundColor: '#D9C1ED',\n                    barPercentage: 0.75,\n                    data: [100, 600, 680, 660, 520, 670, 600, 680, 800, 620],\n                },\n                {\n                    type: 'bar',\n                    label: 'Max Occupancy',\n                    backgroundColor: '#9f64d1',\n                    barPercentage: 0.75,\n                    data: [850, 200, 300, 320, 400, 150, 320, 180, 200, 300],\n                },\n            ],\n        };\n        this.stackedOptions = {\n            fontFamily: '\"Roboto\", \"Helvetica Neue\", sans-serif',\n            legend: {\n                labels: {\n                    fontFamily: '\"Roboto\", \"Helvetica Neue\", sans-serif',\n                    fontColor: '#ffffff',\n                },\n            },\n            tooltips: {\n                mode: 'index',\n                intersect: false,\n            },\n            responsive: true,\n            scales: {\n                xAxes: [\n                    {\n                        stacked: true,\n                    },\n                ],\n                yAxes: [\n                    {\n                        stacked: true,\n                        gridLines: {\n                            display: true,\n                            color: '#43384b',\n                        },\n                        ticks: {\n                            fontFamily: '\"Roboto\", \"Helvetica Neue\", sans-serif',\n                            fontColor: '#766881',\n                        },\n                    },\n                ],\n            },\n        };\n    }\n}\n"],
  "mappings": "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",
  "names": ["style_guide_component_default", "StyleGuideComponent"]
}