q2-tecton-elements 1.45.3 → 1.46.1

package/dist/types/components/q2-carousel/q2-carousel.d.ts

@@ -46,6 +46,7 @@ export declare class Q2Carousel implements ComponentInterface {
     get realIndex(): number;
     get paginationBtns(): NodeListOf<HTMLButtonElement>;
     get activeCarouselOptions(): SwiperOptions;
+    get activePane(): HTMLElement;
     get dynamicPaginationDots(): boolean;
     get paneCollection(): NodeListOf<Element>;
     get paneArray(): Element[];
@@ -60,6 +61,7 @@ export declare class Q2Carousel implements ComponentInterface {
     change: EventEmitter<{
         index: number;
     }>;
+    handlePopovers: (event: CustomEvent) => void;
     onMutationObserved: () => void;
     setCarouselWrapperWidth: () => void;
     handleSlideChange: (newIndex: number) => void;

package/dist/types/components/q2-carousel-pane/q2-carousel-pane.d.ts

@@ -26,9 +26,16 @@ export declare class Q2CarouselPane implements ComponentInterface {
      */
     slotFrameless: boolean;
     hostElement: HTMLElement;
+    disabledElements?: HTMLElement[];
+    mutationObserver?: MutationObserver;
     get currentPaneIndex(): any;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     generatePaneClass: (currentIndex: number) => string;
+    onMutationObserved: () => void;
+    addPointerMoveListeners(): void;
+    removePointerMoveListeners(): void;
+    pointerMoveHandler: (event: PointerEvent) => void;
     /**
      * Emitted when the pane is clicked.
      */

package/dist/types/components/q2-chart-donut/q2-chart-donut.d.ts

@@ -45,6 +45,13 @@ export declare class Q2ChartDonut implements ComponentInterface {
     selectedId: string;
     /** The amount which the slice will separate from the chart when selected. */
     selectedOffset: number;
+    /**
+     * Determines whether the legend is displayed.
+     *
+     * @info
+     * The legend is a list of the data points in the chart and their colors.
+     */
+    showLegend: boolean;
     /** The icon that displays by default when no slices are selected. */
     summaryIcon: string;
     /**
@@ -67,6 +74,7 @@ export declare class Q2ChartDonut implements ComponentInterface {
         name: any;
     };
     hoveredId: string;
+    legendData: IDonutChartData[];
     hostElement: HTMLElement;
     /**
      * Emitted when a slice is selected.
@@ -93,6 +101,7 @@ export declare class Q2ChartDonut implements ComponentInterface {
         color: any;
     };
     get isMobile(): boolean;
+    get legendHoveredId(): string;
     cacheComputedStyles(): void;
     displayValue(value: string | number): string;
     getCSSProperty(name: string): any;
@@ -101,6 +110,8 @@ export declare class Q2ChartDonut implements ComponentInterface {
     getDataById(id: string): IDonutChartData;
     getColors(): any[];
     getMinSliceSizeAsAngle(): number;
+    getDataIndexForId(id: string): number;
+    setLegendData(): void;
     setupChartEvents(chart: echarts.ECharts): void;
     updateChart(chart: echarts.ECharts): void;
     resizeChart(): void;
@@ -132,6 +143,9 @@ export declare class Q2ChartDonut implements ComponentInterface {
     onButtonKeyDown: (event: KeyboardEvent) => void;
     onButtonClick: (event: MouseEvent) => void;
     onContainerClick: (event: Event) => void;
+    onLegendClick: (event: any) => void;
+    onLegendMouseleave: (event: any) => void;
+    onLegendMouseenter: (event: any) => void;
     renderCenterBlock(): any;
     render(): any;
 }

package/dist/types/components/q2-checkbox/q2-checkbox.d.ts

@@ -37,6 +37,8 @@ export declare class Q2Checkbox implements ComponentInterface {
     name: string;
     /** The field is not interactive, but remains focusable. */
     readonly: boolean;
+    /** The field is not interactive, but remains focusable. */
+    slotReadonly: boolean;
     /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */
     type: 'favorite' | 'toggle';
     /** A static reference value for the checkbox. */

package/dist/types/components/q2-input/q2-input.d.ts

@@ -158,6 +158,13 @@ export declare class Q2Input {
     textHidden: boolean;
     /** Specifies the field's expeted [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices. */
     type: InputType;
+    /**
+     * Allows for correct semantics of q2-input element when aria-expanded.
+     * @private
+     * Defaults to undefined
+     * Will assign role to combobox when used inside q2-select and q2-calendar.
+     */
+    _role: 'combobox' | undefined;
     /**
      * The value of the input field.
      * @info
@@ -171,8 +178,8 @@ export declare class Q2Input {
      *
      */
     value: string;
-    ariaControls: string;
     ariaOwns: string;
+    ariaControls: string;
     ariaHaspopup: string;
     ariaExpanded: string;
     ariaActivedescendant: string;
@@ -196,14 +203,13 @@ export declare class Q2Input {
     onMutationObserved: () => void;
     getFormattedValue(value: string, valueChangedFromProperty: boolean): IFormatterValueObject;
     get ariaAttributes(): {
-        ariaControls: string;
         ariaOwns: string;
         ariaHaspopup: string;
         ariaExpanded: string;
         ariaActivedescendant: string;
     };
     get hasCustomDisplaySlot(): boolean;
-    get canClear(): boolean;
+    get clearClasses(): string[];
     get shouldCursorStartAtEnd(): boolean;
     get shouldCursorStayAtEnd(): boolean;
     get hasError(): boolean;
@@ -225,6 +231,7 @@ export declare class Q2Input {
     get stringValue(): string;
     get canSetSelection(): boolean;
     get visibilityToggleText(): string;
+    get visibilityToggleAriaLabel(): string;
     formatAndUpdateValueFromProp(): void;
     get inputMode(): any;
     manageClearableResizeObserver(clearable?: boolean): void;

package/dist/types/components/q2-item/q2-item.d.ts

@@ -6,6 +6,7 @@ export declare class Q2Item {
     /** Makes the item clickable. */
     clickable: boolean;
     componentDidLoad(): void;
+    delegateFocus(event: FocusEvent): void;
     get actionClasses(): string;
     get bulletClasses(): string;
     get footerClasses(): string;
@@ -16,6 +17,5 @@ export declare class Q2Item {
     get hasFooterSlotContent(): boolean;
     get itemClasses(): string;
     get mainClasses(): string;
-    setClickable(): void;
     render(): any;
 }

package/dist/types/components/q2-legend/q2-legend.d.ts

@@ -0,0 +1,41 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
+export declare class Q2Legend implements ComponentInterface {
+    selectedItemIndex: number;
+    hoveredItemIndex: number;
+    /** An array of objects that contain the data to be displayed. */
+    data: IDonutChartData[];
+    /** The id of the item to set as hovered. */
+    hoveredItemId: string;
+    watchHoveredItemId(newItemId: string): void;
+    /** The format of the value displayed in the legend. */
+    format: 'default' | 'currency';
+    /** The id of the item to set as selected. */
+    selectedItemId: string;
+    watchSelectedItemId(newItemId: string): void;
+    click: EventEmitter<IDonutChartData>;
+    mouseleave: EventEmitter<IDonutChartData>;
+    mouseenter: EventEmitter<IDonutChartData>;
+    componentWillLoad(): void;
+    get dataWithClasses(): {
+        classes: {
+            'item-button': boolean;
+            'item-button-faded': boolean;
+            'item-button-selected': boolean;
+        };
+        icon?: string;
+        id: string;
+        value: number;
+        name: string;
+        color?: string;
+    }[];
+    formatValue(value: string | number): string;
+    getDataIndexForId(id: string): number;
+    isItemButtonFaded(index: number): boolean;
+    isItemButtonSelected(index: number): boolean;
+    onClick(event: MouseEvent, itemData: IDonutChartData): void;
+    onClickElsewhere(obj: any): void;
+    onMouseLeave(event: Event, itemData: IDonutChartData): void;
+    onMouseEnter(event: Event, itemData: IDonutChartData): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -81,9 +81,14 @@ export namespace Components {
         "value": number;
     }
     interface Q2Btn {
+        /**
+          * @private Role attribute for better semantic accessibility support
+         */
+        "_role": string;
         /**
           * Displays the component in an active state.
           * @info Only intended for use with the `badge` property.
+          * @deprecated
          */
         "active": boolean;
         "ariaControls": string;
@@ -97,6 +102,7 @@ export namespace Components {
         "ariaSelected": string;
         /**
           * Displays the component in a smaller, badge style.
+          * @deprecated
          */
         "badge": boolean;
         /**
@@ -139,9 +145,9 @@ export namespace Components {
          */
         "loading": boolean;
         /**
-          * @deprecated
+          * Defines the size of q2-btn, it renders as default size if not provided.
          */
-        "size": string;
+        "size": 'small' | 'medium' | 'large';
         "tabIndex": number;
         /**
           * The default behavior of the button.
@@ -646,6 +652,11 @@ export namespace Components {
           * The amount which the slice will separate from the chart when selected.
          */
         "selectedOffset": number;
+        /**
+          * Determines whether the legend is displayed.
+          * @info The legend is a list of the data points in the chart and their colors.
+         */
+        "showLegend": boolean;
         /**
           * The icon that displays by default when no slices are selected.
          */
@@ -709,6 +720,10 @@ export namespace Components {
           * The field is not interactive, but remains focusable.
          */
         "readonly": boolean;
+        /**
+          * The field is not interactive, but remains focusable.
+         */
+        "slotReadonly": boolean;
         /**
           * The visual style of the checkbox. This does not need to be defined for a standard checkbox.
          */
@@ -1074,6 +1089,11 @@ export namespace Components {
         "type": string;
     }
     interface Q2Input {
+        /**
+          * Allows for correct semantics of q2-input element when aria-expanded.
+          * @private Defaults to undefined Will assign role to combobox when used inside q2-select and q2-calendar.
+         */
+        "_role": 'combobox' | undefined;
         "ariaActivedescendant": string;
         "ariaControls": string;
         "ariaExpanded": string;
@@ -1239,6 +1259,24 @@ export namespace Components {
          */
         "clickable": boolean;
     }
+    interface Q2Legend {
+        /**
+          * An array of objects that contain the data to be displayed.
+         */
+        "data": IDonutChartData[];
+        /**
+          * The format of the value displayed in the legend.
+         */
+        "format": 'default' | 'currency';
+        /**
+          * The id of the item to set as hovered.
+         */
+        "hoveredItemId": string;
+        /**
+          * The id of the item to set as selected.
+         */
+        "selectedItemId": string;
+    }
     interface Q2List {
         /**
           * Adds a border between each items
@@ -1413,6 +1451,10 @@ export namespace Components {
         "type": 'menu' | 'listbox';
     }
     interface Q2Pagination {
+        /**
+          * Indicates the horizontal alignment of children elements
+         */
+        "alignment": string;
         /**
           * Determines whether the component uses the dynamic resizing behavior.
          */
@@ -1434,6 +1476,10 @@ export namespace Components {
           * The total number of records displayed on each page.
          */
         "perPage": number;
+        /**
+          * The list of perPage to operate pagination. e.g.) [10, 25, 50]
+         */
+        "perPageIncrements": number[];
         /**
           * Description of the record type to be displayed alongside the record count.
          */
@@ -1711,6 +1757,10 @@ export namespace Components {
           * @deprecated
          */
         "ariaLabel": string;
+        /**
+          * Renders an icon button when the field is non-empty. Pressing the button clears all input from the field.
+         */
+        "clearable": boolean;
         /**
           * Emulates clicking the `<input>` to hide the popover if it is visible.
           * @testOnly
@@ -2146,6 +2196,10 @@ export interface Q2InputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2InputElement;
 }
+export interface Q2LegendCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2LegendElement;
+}
 export interface Q2MonthPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2MonthPickerElement;
@@ -2530,6 +2584,25 @@ declare global {
         prototype: HTMLQ2ItemElement;
         new (): HTMLQ2ItemElement;
     };
+    interface HTMLQ2LegendElementEventMap {
+        "click": IDonutChartData;
+        "mouseleave": IDonutChartData;
+        "mouseenter": IDonutChartData;
+    }
+    interface HTMLQ2LegendElement extends Components.Q2Legend, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLQ2LegendElementEventMap>(type: K, listener: (this: HTMLQ2LegendElement, ev: Q2LegendCustomEvent<HTMLQ2LegendElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLQ2LegendElementEventMap>(type: K, listener: (this: HTMLQ2LegendElement, ev: Q2LegendCustomEvent<HTMLQ2LegendElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLQ2LegendElement: {
+        prototype: HTMLQ2LegendElement;
+        new (): HTMLQ2LegendElement;
+    };
     interface HTMLQ2ListElement extends Components.Q2List, HTMLStencilElement {
     }
     var HTMLQ2ListElement: {
@@ -2926,6 +2999,7 @@ declare global {
         "q2-icon": HTMLQ2IconElement;
         "q2-input": HTMLQ2InputElement;
         "q2-item": HTMLQ2ItemElement;
+        "q2-legend": HTMLQ2LegendElement;
         "q2-list": HTMLQ2ListElement;
         "q2-loading": HTMLQ2LoadingElement;
         "q2-loading-element": HTMLQ2LoadingElementElement;
@@ -3018,9 +3092,14 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     interface Q2Btn {
+        /**
+          * @private Role attribute for better semantic accessibility support
+         */
+        "_role"?: string;
         /**
           * Displays the component in an active state.
           * @info Only intended for use with the `badge` property.
+          * @deprecated
          */
         "active"?: boolean;
         "ariaControls"?: string;
@@ -3034,6 +3113,7 @@ declare namespace LocalJSX {
         "ariaSelected"?: string;
         /**
           * Displays the component in a smaller, badge style.
+          * @deprecated
          */
         "badge"?: boolean;
         /**
@@ -3076,9 +3156,9 @@ declare namespace LocalJSX {
          */
         "loading"?: boolean;
         /**
-          * @deprecated
+          * Defines the size of q2-btn, it renders as default size if not provided.
          */
-        "size"?: string;
+        "size"?: 'small' | 'medium' | 'large';
         "tabIndex"?: number;
         /**
           * The default behavior of the button.
@@ -3591,6 +3671,11 @@ declare namespace LocalJSX {
           * The amount which the slice will separate from the chart when selected.
          */
         "selectedOffset"?: number;
+        /**
+          * Determines whether the legend is displayed.
+          * @info The legend is a list of the data points in the chart and their colors.
+         */
+        "showLegend"?: boolean;
         /**
           * The icon that displays by default when no slices are selected.
          */
@@ -3659,6 +3744,10 @@ declare namespace LocalJSX {
           * The field is not interactive, but remains focusable.
          */
         "readonly"?: boolean;
+        /**
+          * The field is not interactive, but remains focusable.
+         */
+        "slotReadonly"?: boolean;
         /**
           * The visual style of the checkbox. This does not need to be defined for a standard checkbox.
          */
@@ -4037,6 +4126,11 @@ declare namespace LocalJSX {
         "type"?: string;
     }
     interface Q2Input {
+        /**
+          * Allows for correct semantics of q2-input element when aria-expanded.
+          * @private Defaults to undefined Will assign role to combobox when used inside q2-select and q2-calendar.
+         */
+        "_role"?: 'combobox' | undefined;
         "ariaActivedescendant"?: string;
         "ariaControls"?: string;
         "ariaExpanded"?: string;
@@ -4209,6 +4303,27 @@ declare namespace LocalJSX {
          */
         "clickable"?: boolean;
     }
+    interface Q2Legend {
+        /**
+          * An array of objects that contain the data to be displayed.
+         */
+        "data"?: IDonutChartData[];
+        /**
+          * The format of the value displayed in the legend.
+         */
+        "format"?: 'default' | 'currency';
+        /**
+          * The id of the item to set as hovered.
+         */
+        "hoveredItemId"?: string;
+        "onClick"?: (event: Q2LegendCustomEvent<IDonutChartData>) => void;
+        "onMouseenter"?: (event: Q2LegendCustomEvent<IDonutChartData>) => void;
+        "onMouseleave"?: (event: Q2LegendCustomEvent<IDonutChartData>) => void;
+        /**
+          * The id of the item to set as selected.
+         */
+        "selectedItemId"?: string;
+    }
     interface Q2List {
         /**
           * Adds a border between each items
@@ -4395,6 +4510,10 @@ declare namespace LocalJSX {
         "type"?: 'menu' | 'listbox';
     }
     interface Q2Pagination {
+        /**
+          * Indicates the horizontal alignment of children elements
+         */
+        "alignment"?: string;
         /**
           * Determines whether the component uses the dynamic resizing behavior.
          */
@@ -4421,6 +4540,10 @@ declare namespace LocalJSX {
           * The total number of records displayed on each page.
          */
         "perPage"?: number;
+        /**
+          * The list of perPage to operate pagination. e.g.) [10, 25, 50]
+         */
+        "perPageIncrements"?: number[];
         /**
           * Description of the record type to be displayed alongside the record count.
          */
@@ -4710,6 +4833,10 @@ declare namespace LocalJSX {
           * @deprecated
          */
         "ariaLabel"?: string;
+        /**
+          * Renders an icon button when the field is non-empty. Pressing the button clears all input from the field.
+         */
+        "clearable"?: boolean;
         /**
           * Disables all interaction with the field and leverages the disabled visual style of `q2-input`.
          */
@@ -5160,6 +5287,7 @@ declare namespace LocalJSX {
         "q2-icon": Q2Icon;
         "q2-input": Q2Input;
         "q2-item": Q2Item;
+        "q2-legend": Q2Legend;
         "q2-list": Q2List;
         "q2-loading": Q2Loading;
         "q2-loading-element": Q2LoadingElement;
@@ -5216,6 +5344,7 @@ declare module "@stencil/core" {
             "q2-icon": LocalJSX.Q2Icon & JSXBase.HTMLAttributes<HTMLQ2IconElement>;
             "q2-input": LocalJSX.Q2Input & JSXBase.HTMLAttributes<HTMLQ2InputElement>;
             "q2-item": LocalJSX.Q2Item & JSXBase.HTMLAttributes<HTMLQ2ItemElement>;
+            "q2-legend": LocalJSX.Q2Legend & JSXBase.HTMLAttributes<HTMLQ2LegendElement>;
             "q2-list": LocalJSX.Q2List & JSXBase.HTMLAttributes<HTMLQ2ListElement>;
             "q2-loading": LocalJSX.Q2Loading & JSXBase.HTMLAttributes<HTMLQ2LoadingElement>;
             "q2-loading-element": LocalJSX.Q2LoadingElement & JSXBase.HTMLAttributes<HTMLQ2LoadingElementElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.45.3",
+    "version": "1.46.1",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.45.3",
+        "q2-tecton-common": "1.46.1",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -54,5 +54,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "321dc27427d9dd6fe9a699591671c729027c2bd1"
+    "gitHead": "fae4646a29eeae535d7d5c0e9cd050872dab0101"
 }

package/dist/cjs/q2-optgroup_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"q2-optgroup.q2-option.entry.cjs.js","mappings":"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","names":["createGuid","h","loc","Host"],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx","src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.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    /** Serves as the group header text. */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true }) label: string;\n\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\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    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\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    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\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","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n\n    /** Disables the option. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ mutable: true }) display: string;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/q2-optgroup_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"q2-optgroup.q2-option.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,k+CAAk+C,CAAC;AACz/C,yBAAe,aAAa;;MCGf,UAAU;;;QASnB,SAAI,GAAW,UAAU,EAAE,CAAC;QAoB5B,cAAS,GAAG;YACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;SACjF,CAAC;wBA7B2C,KAAK;;sBAMvB,KAAK;;;IAMhC,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;;QAGjC,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAMD,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;KAC5C;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;KACrE;;IAKD,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG;YACpB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;SAClC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,IAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC5B,8DAAQ,CACN,CACJ,EACR;KACL;;;;;;;;ACzEL,MAAM,WAAW,GAAG,+3EAA+3E,CAAC;AACp5E,uBAAe,WAAW;;MCEb,QAAQ;;;;QAoEjB,oBAAe,GAAG,CAAC,SAA2B;;YAC1C,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YAC5C,MAAM,WAAW,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,KAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YACjE,IAAI,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YACtD,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE;gBACzB,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,IAAI,GAAG,CAAC,IAAI,KAAK,eAAe,EAAE;oBAC1D,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;iBAC9B;qBAAM,IAAI,GAAG,CAAC,IAAI,KAAK,YAAY,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS,EAAE;oBACrE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC1C;aACJ;YACD,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY;gBAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAC7G,CAAC;oBA1EsC,QAAQ;;;;;;;;kCA+BwC,KAAK;;IAY7F,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,gBAAgB;QACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9G,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;KACpC;IAED,WAAW;;QACP,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,EAAC,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAE;YACxD,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SAC/C;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;YAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACtD;KACJ;IAgBD,MAAM;QACF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;QAE7C,QACI,EAAC,IAAI,qDACD,QAAQ,EAAC,IAAI,mBACE,UAAU,GAAG,MAAM,GAAG,SAAS,mBAC/B,GAAG,CAAC,CAAC,QAAQ,EAAE,iBACjB,kBAAkB,GAAG,MAAM,GAAG,SAAS,EACpD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,QAAQ,IAAI,gEAAS,IAAI,EAAC,WAAW,GAAG,EAC9C,4DAAK,KAAK,EAAC,SAAS,IAChB,8DAAQ,CACN,CACH,EACT;KACL;;;;;;;","names":[],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx","src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.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    /** Serves as the group header text. */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true }) label: string;\n\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\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    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\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    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\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","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n\n    /** Disables the option. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ mutable: true }) display: string;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/q2-tecton-elements/p-1c17d118.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as i,c as o,H as a}from"./p-a5f18e27.js";import{c as s,l as r}from"./p-42302f6f.js";const n="*{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 d=n;const c=class{constructor(e){t(this,e);this.guid=s();this.setHidden=()=>{this.hidden=this.options.every((t=>t.hidden||t._multiSelectHidden))};this.disabled=false;this.label=undefined;this.hidden=false}componentWillLoad(){const t=new MutationObserver(this.setHidden);t.observe(this.hostElement,{childList:true,attributes:true,subtree:true});this.mutationObserver=t;this.setHidden();this.disabledWatcher(this.disabled)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get headerId(){return`q2-optgroup-header-${this.guid}`}get options(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}disabledWatcher(t){this.options.forEach((e=>{e.disabledGroup=!!t}))}render(){return e("div",{key:"f90275607d9a96d441d38a0580ce1b93e662634e",class:"q2-optgroup-container",hidden:this.hidden,"aria-labelledby":this.headerId,role:"group"},e("div",{key:"d7ebce6b9dca35f1a41c500942f6b21b6277d7b8",class:"q2-optgroup-header",id:this.headerId},this.label&&r(this.label)||""),e("div",{key:"1f617b24906eb0ebe0e14520a45ae5de2e6757b5",class:"q2-optgroup-options"},e("slot",{key:"b90f24f7d8c10e3289041cb948587436c75a19f2"})))}get hostElement(){return i(this)}static get watchers(){return{disabled:["disabledWatcher"]}}};c.style=d;const p='*{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{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:"content"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){box-shadow:var(--tct-option-focus-box-shadow, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}';const h=p;const l=class{constructor(e){t(this,e);this.displayChanged=o(this,"displayChanged",7);this.mutationHandler=t=>{var e;const i=(this.display||"").trim();const o=(((e=this.hostElement)===null||e===void 0?void 0:e.textContent)||"").trim();if(i===o||this.multiline)return;for(const e of t){if(e.type==="childList"||e.type==="characterData"){this.display=o}else if(e.type==="attributes"&&e.attributeName==="display"){this.hostElement.textContent=i}}if(this.hostElement.ariaSelected)this.displayChanged.emit({display:this.display,value:this.value})};this.role="option";this.disabled=undefined;this.display=undefined;this.value=undefined;this.disabledGroup=undefined;this.selected=undefined;this.multiline=undefined;this.active=undefined;this._multiSelectHidden=false}componentWillLoad(){this.initDisplay()}componentDidLoad(){const t=new MutationObserver(this.mutationHandler);t.observe(this.hostElement,{childList:true,subtree:true,attributes:true,characterData:true});this.mutationObserver=t}initDisplay(){var t,e;if(this.multiline)return;if(this.display&&!((e=(t=this.hostElement)===null||t===void 0?void 0:t.textContent)===null||e===void 0?void 0:e.trim())){this.hostElement.textContent=this.display}else if(!this.display&&this.hostElement.textContent.trim()){this.display=this.hostElement.textContent.trim()}}render(){const{disabled:t,disabledGroup:i,selected:o,_multiSelectHidden:s}=this;const r=t||i;return e(a,{key:"b6ca0e5f1a15c594a6577769c7549369573541bd",tabindex:"-1","aria-disabled":r?"true":undefined,"aria-selected":`${!!o}`,"aria-hidden":s?"true":undefined,display:this.display},this.selected&&e("q2-icon",{key:"d4ddab403a45207e8f7e1c2b3611fd9ad5eafa52",type:"checkmark"}),e("div",{key:"4d10f04c3cc686a21f7e6e5d19106b61af89f6f2",class:"content"},e("slot",{key:"2290b5fe8bbce6a3cb64c70d31df2376d51dd129"})))}get hostElement(){return i(this)}};l.style=h;export{c as q2_optgroup,l as q2_option};
-//# sourceMappingURL=p-1c17d118.entry.js.map

package/dist/q2-tecton-elements/p-1c17d118.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2OptgroupCss","Q2OptgroupStyle0","Q2Optgroup","this","guid","createGuid","setHidden","hidden","options","every","opt","_multiSelectHidden","componentWillLoad","observer","MutationObserver","observe","hostElement","childList","attributes","subtree","mutationObserver","disabledWatcher","disabled","disconnectedCallback","disconnect","headerId","Array","from","querySelectorAll","forEach","disabledGroup","render","h","key","class","role","id","label","loc","q2OptionCss","Q2OptionStyle0","Q2Option","mutationHandler","mutations","display","trim","textContent","_a","multiline","mut","type","attributeName","ariaSelected","displayChanged","emit","value","initDisplay","componentDidLoad","characterData","_b","selected","isDisabled","Host","tabindex","undefined"],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx","src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.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    /** Serves as the group header text. */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true }) label: string;\n\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\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    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\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    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\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","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n\n    /** Disables the option. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ mutable: true }) display: string;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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"}