q2-tecton-elements 1.45.3 → 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-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.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.
@@ -1074,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;
@@ -1413,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.
          */
@@ -1434,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.
          */
@@ -1711,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
@@ -3018,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;
@@ -3034,6 +3062,7 @@ declare namespace LocalJSX {
         "ariaSelected"?: string;
         /**
           * Displays the component in a smaller, badge style.
+          * @deprecated
          */
         "badge"?: boolean;
         /**
@@ -3076,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.
@@ -4037,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;
@@ -4395,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.
          */
@@ -4421,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.
          */
@@ -4710,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`.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.45.3",
+    "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.3",
+        "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": "321dc27427d9dd6fe9a699591671c729027c2bd1"
+    "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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"}