q2-tecton-elements 1.45.2 → 1.46.0

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-icon/q2-icon.d.ts

@@ -9,6 +9,7 @@ export declare class Q2Icon implements ComponentInterface {
     hostElement: HTMLElement;
     iconClone: SVGSymbolElement;
     spriteGroup: SVGElement;
+    spriteUse: SVGElement;
     componentWillLoad(): void;
     componentDidRender(): void;
     handleIcon(): void;

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-popover/q2-popover.d.ts

@@ -13,6 +13,7 @@ export declare class Q2Popover implements ComponentInterface {
     block: boolean;
     /** The element that controls the popover's behavior. */
     controlElement: HTMLElement;
+    mode: 'legacy';
     /** @deprecated */
     minHeight: number;
     hostElement: HTMLElement;
@@ -48,7 +49,8 @@ export declare class Q2Popover implements ComponentInterface {
     viewPortOrientationChanged: () => void;
     addViewportListeners(): void;
     removeViewportListeners(): void;
-    setCSSProperties: () => Promise<void>;
+    setFixedCSSProperties: () => Promise<void>;
+    setAbsoluteCSSProperties: () => Promise<void>;
     clearCSSProperties(): void;
     setDirectionAndShow(direction: 'up' | 'down'): void;
     determinePopDirection(): Promise<void>;

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.
@@ -271,6 +277,11 @@ export namespace Components {
           * @deprecated
          */
         "popoverMinHeight": number;
+        /**
+          * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+          * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
+         */
+        "popoverMode": 'legacy';
         /**
           * The field's content is not editable, but the field remains focusable.  Appends "(readonly)" to the field label. Supersedes `optional` if both are `true`.
          */
@@ -932,6 +943,11 @@ export namespace Components {
           * @deprecated
          */
         "popoverMinHeight": number;
+        /**
+          * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+          * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
+         */
+        "popoverMode": 'legacy';
         /**
           * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.
           * @info Only applicable when using `<q2-dropdown>` for outlets.
@@ -1064,6 +1080,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;
@@ -1403,6 +1424,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.
          */
@@ -1424,6 +1449,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.
          */
@@ -1523,6 +1552,7 @@ export namespace Components {
           * @deprecated
          */
         "minHeight": number;
+        "mode": 'legacy';
         /**
           * Controls whether the popover is open or closed.
          */
@@ -1700,6 +1730,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
@@ -1768,6 +1802,11 @@ export namespace Components {
           * @deprecated
          */
         "popDirection": 'up' | 'down';
+        /**
+          * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+          * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
+         */
+        "popoverMode": 'legacy';
         /**
           * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
          */
@@ -3002,9 +3041,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;
@@ -3018,6 +3062,7 @@ declare namespace LocalJSX {
         "ariaSelected"?: string;
         /**
           * Displays the component in a smaller, badge style.
+          * @deprecated
          */
         "badge"?: boolean;
         /**
@@ -3060,9 +3105,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.
@@ -3201,6 +3246,11 @@ declare namespace LocalJSX {
           * @deprecated
          */
         "popoverMinHeight"?: number;
+        /**
+          * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+          * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
+         */
+        "popoverMode"?: 'legacy';
         /**
           * The field's content is not editable, but the field remains focusable.  Appends "(readonly)" to the field label. Supersedes `optional` if both are `true`.
          */
@@ -3886,6 +3936,11 @@ declare namespace LocalJSX {
           * @deprecated
          */
         "popoverMinHeight"?: number;
+        /**
+          * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+          * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
+         */
+        "popoverMode"?: 'legacy';
         /**
           * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.
           * @info Only applicable when using `<q2-dropdown>` for outlets.
@@ -4011,6 +4066,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;
@@ -4369,6 +4429,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.
          */
@@ -4395,6 +4459,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.
          */
@@ -4499,6 +4567,7 @@ declare namespace LocalJSX {
           * @deprecated
          */
         "minHeight"?: number;
+        "mode"?: 'legacy';
         /**
           * Emitted when the popover is opened or closed.
          */
@@ -4683,6 +4752,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`.
          */
@@ -4750,6 +4823,11 @@ declare namespace LocalJSX {
           * @deprecated
          */
         "popDirection"?: 'up' | 'down';
+        /**
+          * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+          * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
+         */
+        "popoverMode"?: 'legacy';
         /**
           * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.45.2",
+    "version": "1.46.0",
     "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.2",
+        "q2-tecton-common": "1.46.0",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -54,5 +54,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "d3153217887a51a415c5f2f22d5e8c198d870f2f"
+    "gitHead": "b305e9496eddffe68155563daa5773603b8684c8"
 }

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":"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","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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"}