q2-tecton-elements 1.51.0 → 1.52.0

package/dist/q2-tecton-elements/{p-8d07cf91.entry.js.map → q2-month-picker.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2MonthPickerCss","Q2MonthPickerStyle0","Q2MonthPicker","this","monthGrid","months","map","mon","label","loc","abbr","scheduledAfterRender","focusMonth","index","nextMonth","hostElement","shadowRoot","querySelector","focusedIndex","focus","moveMonth","grid","event","rows","length","cols","row","Math","floor","col","current","key","stopPropagation","preventDefault","max","min","onMonthKeydown","toggleChange","emit","close","monthIndex","target","dataset","selectMonth","Number","nextMonthIndex","onMonthSelection","targetElement","closest","_a","_b","selectedIndex","querySelectorAll","forEach","el","classList","remove","add","value","view","selectedYear","year","_c","onchange","call","CustomEvent","bubbles","detail","viewChange","selectYear","Date","toLocaleString","componentDidLoad","overrideFocus","componentDidRender","fn","render","h","class","onKeyDown","onClick","type","month","role","tabindex","today"],"sources":["src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    // #region Own Properties\n\n    monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusedIndex: number = 0;\n\n    @State()\n    selectedIndex: number = 0;\n\n    @State()\n    showYearLayer: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    disabledMonths: string[];\n\n    @Prop()\n    today: string;\n\n    @Prop({ reflect: true, mutable: true })\n    year: number = Number(new Date().toLocaleString('en-US', { year: 'numeric' }));\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    toggleChange: EventEmitter;\n\n    @Event()\n    viewChange: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2MonthPickerCss","Q2MonthPickerStyle0","Q2MonthPicker","this","monthGrid","months","map","mon","label","loc","abbr","scheduledAfterRender","focusMonth","index","nextMonth","hostElement","shadowRoot","querySelector","focusedIndex","focus","moveMonth","grid","event","rows","length","cols","row","Math","floor","col","current","key","stopPropagation","preventDefault","max","min","onMonthKeydown","toggleChange","emit","close","monthIndex","target","dataset","selectMonth","Number","nextMonthIndex","onMonthSelection","targetElement","closest","_a","_b","selectedIndex","querySelectorAll","forEach","el","classList","remove","add","value","view","selectedYear","year","_c","onchange","call","CustomEvent","bubbles","detail","viewChange","selectYear","Date","toLocaleString","componentDidLoad","overrideFocus","componentDidRender","fn","render","h","class","onKeyDown","onClick","type","month","role","tabindex","today"],"sources":["src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    // #region Own Properties\n\n    monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusedIndex: number = 0;\n\n    @State()\n    selectedIndex: number = 0;\n\n    @State()\n    showYearLayer: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    disabledMonths: string[];\n\n    @Prop()\n    today: string;\n\n    @Prop({ reflect: true, mutable: true })\n    year: number = Number(new Date().toLocaleString('en-US', { year: 'numeric' }));\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    toggleChange: EventEmitter;\n\n    @Event()\n    viewChange: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-optgroup.entry.js

@@ -0,0 +1,88 @@
+import { r as t, h as e, g as r } from "./index-7a5365e2.js";
+
+import { c as o, l as a } from "./index-d18e2a20.js";
+
+const i = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
+
+const s = i;
+
+const d = class {
+  constructor(e) {
+    t(this, e);
+    // #region Own Properties
+        this.guid = o();
+    this.setHidden = () => {
+      this.hidden = this.options.every((t => t.hidden || t._multiSelectHidden));
+    };
+    this.hidden = false;
+    this.disabled = false;
+    this.label = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t;
+    (t = this.mutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    this.mutationObserver = null;
+  }
+  componentWillLoad() {
+    const t = new MutationObserver(this.setHidden);
+    t.observe(this.hostElement, {
+      childList: true,
+      attributes: true,
+      subtree: true
+    });
+    this.mutationObserver = t;
+    // set initially
+        this.setHidden();
+    this.disabledWatcher(this.disabled);
+  }
+  // #endregion
+  // #region Watchers
+  disabledWatcher(t) {
+    this.options.forEach((e => {
+      e.disabledGroup = !!t;
+    }));
+  }
+  // #endregion
+  // #region Local Methods
+  get headerId() {
+    return `q2-optgroup-header-${this.guid}`;
+  }
+  get options() {
+    return Array.from(this.hostElement.querySelectorAll("q2-option"));
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return e("div", {
+      key: "306cf0d06e8664a616974421d45a3083235bc03b",
+      class: "q2-optgroup-container",
+      hidden: this.hidden,
+      "aria-labelledby": this.headerId,
+      role: "group"
+    }, e("div", {
+      key: "738affcd788d0f9e2fdf548f4f14d6d98b8a1c7e",
+      class: "q2-optgroup-header",
+      id: this.headerId
+    }, this.label && a(this.label) || ""), e("div", {
+      key: "cff8fad7e158854df77ad3d9cb85ea578aa0edc5",
+      class: "q2-optgroup-options"
+    }, e("slot", {
+      key: "d5daf0a105b29ace1c1f0daf5b99ec6bc8fc684c"
+    })));
+  }
+  get hostElement() {
+    return r(this);
+  }
+  static get watchers() {
+    return {
+      disabled: [ "disabledWatcher" ]
+    };
+  }
+};
+
+d.style = s;
+
+export { d as q2_optgroup };
+//# sourceMappingURL=q2-optgroup.entry.js.map

package/dist/q2-tecton-elements/q2-optgroup.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2OptgroupCss","Q2OptgroupStyle0","Q2Optgroup","this","guid","createGuid","setHidden","hidden","options","every","opt","_multiSelectHidden","disconnectedCallback","_a","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","hostElement","childList","attributes","subtree","disabledWatcher","disabled","forEach","disabledGroup","headerId","Array","from","querySelectorAll","render","h","key","class","role","id","label","loc"],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --tct-gray-13,\n        --t-gray-13,\n        --tct-gray-l2,\n        --app-gray-l2,\n        #e6e6e6\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n    position: sticky;\n    top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAgB;;AACtB,MAAAC,IAAeD;;MCGFE,IAAU;;;;QAGnBC,KAAAC,OAAeC;IAiEfF,KAAAG,YAAY;MACRH,KAAKI,SAASJ,KAAKK,QAAQC,OAAMC,KAAOA,EAAIH,UAAUG,EAAIC;AAAmB;kBArD/D;oBAOE;;;;;EASpB,oBAAAC;;KACIC,IAAAV,KAAKW,sBAAgB,QAAAD,WAAA,aAAAA,EAAEE;IACvBZ,KAAKW,mBAAmB;;EAG5B,iBAAAE;IACI,MAAMC,IAAW,IAAIC,iBAAiBf,KAAKG;IAC3CW,EAASE,QAAQhB,KAAKiB,aAAa;MAAEC,WAAW;MAAMC,YAAY;MAAMC,SAAS;;IACjFpB,KAAKW,mBAAmBG;;QAGxBd,KAAKG;IACLH,KAAKqB,gBAAgBrB,KAAKsB;;;;EAO9B,eAAAD,CAAgBC;IACZtB,KAAKK,QAAQkB,SAAQhB;MACjBA,EAAIiB,kBAAkBF;AAAQ;;;;EAOtC,YAAIG;IACA,OAAO,sBAAsBzB,KAAKC;;EAGtC,WAAII;IACA,OAAOqB,MAAMC,KAAK3B,KAAKiB,YAAYW,iBAAiB;;;;EAUxD,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MACIC,OAAM;MACN5B,QAAQJ,KAAKI;MAAM,mBACFJ,KAAKyB;MACtBQ,MAAK;OAELH,EAAA;MAAAC,KAAA;MACIC,OAAM;MACNE,IAAIlC,KAAKyB;OAEPzB,KAAKmC,SAASC,EAAIpC,KAAKmC,UAAW,KAExCL,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAA;MAAAC,KAAA"}