q2-tecton-elements 1.45.3 → 1.46.0

package/dist/cjs/q2-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-14c3693c.js');
 const index$1 = require('./index-0e15dc8d.js');
 
-const q2ItemCss = "*{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}*{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}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}::slotted([slot]){--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px))}.action{align-items:center;display:flex;grid-row:1;justify-content:center;--tct-btn-icon-height:28px;--tct-btn-icon-width:28px;--tct-icon-size:16px;--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px))}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const q2ItemCss = "*{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}*{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}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const Q2ItemStyle0 = q2ItemCss;
 
 const Q2Item = class {

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

@@ -1 +1 @@
-{"file":"q2-item.entry.cjs.js","mappings":"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","names":["hasSlotContent","h","Fragment"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 3px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n::slotted([slot]) {\n    --tct-avatar-height: var(--tct-item-avatar-height, var(--app-scale-7x, 35px));\n    --tct-avatar-width: var(--tct-item-avatar-width, var(--app-scale-7x, 35px));\n}\n\n.action {\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n    --tct-btn-icon-height: 28px;\n    --tct-btn-icon-width: 28px;\n    --tct-icon-size: 16px;\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px));\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n\n","import { Component, Element, h, State, Prop, Fragment } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    itemElement: HTMLDivElement;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        this.setClickable();\n    }\n    // #endregion\n    // #region Local methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    setClickable() {\n        if (this.clickable) {\n            this.itemElement?.setAttribute('role', 'button');\n            this.itemElement?.setAttribute('tabindex', '0');\n        } else {\n            this.itemElement?.removeAttribute('role');\n            this.itemElement?.removeAttribute('tabindex');\n        }\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        this.setClickable();\n        return (\n            <Fragment>\n                <div\n                    class={this.itemClasses}\n                    ref={el => (this.itemElement = el)}\n                >\n                    {this.hasBulletSlotContent && (\n                        <div class={this.bulletClasses}>\n                            <slot name=\"bullet\" />\n                        </div>\n                    )}\n                    <div class={this.mainClasses}>\n                        {this.hasHeaderSlotContent && (\n                            <div class=\"header\">\n                                <slot name=\"header\" />\n                            </div>\n                        )}\n                        {this.hasBodySlotContent && (\n                            <div class=\"body\">\n                                <slot name=\"body\" />\n                            </div>\n                        )}\n                    </div>\n                    {this.hasActionSlotContent && (\n                        <div class={this.actionClasses}>\n                            <slot name=\"action\" />\n                        </div>\n                    )}\n                    {this.hasFooterSlotContent && (\n                        <div class={this.footerClasses}>\n                            <slot name=\"footer\" />\n                        </div>\n                    )}\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-item.entry.cjs.js","mappings":"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","names":["hasSlotContent","h","Fragment"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 3px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px));\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, h, State, Prop, Fragment } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    itemElement: HTMLDivElement;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        this.setClickable();\n    }\n    // #endregion\n    // #region Local methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    setClickable() {\n        if (this.clickable) {\n            this.itemElement?.setAttribute('role', 'button');\n            this.itemElement?.setAttribute('tabindex', '0');\n        } else {\n            this.itemElement?.removeAttribute('role');\n            this.itemElement?.removeAttribute('tabindex');\n        }\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        this.setClickable();\n        return (\n            <Fragment>\n                <div\n                    class={this.itemClasses}\n                    ref={el => (this.itemElement = el)}\n                >\n                    {this.hasBulletSlotContent && (\n                        <div class={this.bulletClasses}>\n                            <slot name=\"bullet\" />\n                        </div>\n                    )}\n                    <div class={this.mainClasses}>\n                        {this.hasHeaderSlotContent && (\n                            <div class=\"header\">\n                                <slot name=\"header\" />\n                            </div>\n                        )}\n                        {this.hasBodySlotContent && (\n                            <div class=\"body\">\n                                <slot name=\"body\" />\n                            </div>\n                        )}\n                    </div>\n                    {this.hasActionSlotContent && (\n                        <div class={this.actionClasses}>\n                            <slot name=\"action\" />\n                        </div>\n                    )}\n                    {this.hasFooterSlotContent && (\n                        <div class={this.footerClasses}>\n                            <slot name=\"footer\" />\n                        </div>\n                    )}\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-14c3693c.js');
 const index$1 = require('./index-0e15dc8d.js');
 
-const q2ListCss = "*{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}*{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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-bottom:var(--tct-list-item-separator, 1px solid #949494)}.header{--comp-default-header-padding:var(--app-scale-2x, 8px) var(--app-scale-4x, 16px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--tct-item-padding, var(--comp-default-header-padding)));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, 16px);font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const q2ListCss = "*{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}*{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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const Q2ListStyle0 = q2ListCss;
 
 const Q2List = class {

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

@@ -1 +1 @@
-{"file":"q2-list.entry.cjs.js","mappings":"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","names":["hasSlotContent","h"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered ='false'])) {\n    ::slotted(q2-item:not(:last-child)), .header {\n        border-bottom: var(--tct-list-item-separator, 1px solid #949494);\n    }\n}\n\n.header {\n    --comp-default-header-padding: var(--app-scale-2x, 8px) var(--app-scale-4x, 16px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(\n        --tct-list-header-padding,\n        --tct-item-padding,\n        --comp-default-header-padding\n    );\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, 16px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    listElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /** label text on header area */\n    @Prop({ reflect: true }) label: string;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n            this.onMutationObserved();\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    // #endregion\n    // #region Local methods\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-list.entry.cjs.js","mappings":"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","names":["hasSlotContent","h"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    listElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /** label text on header area */\n    @Prop({ reflect: true }) label: string;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n            this.onMutationObserved();\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    // #endregion\n    // #region Local methods\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-optgroup.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-14c3693c.js');
+const index$1 = require('./index-0e15dc8d.js');
+
+const q2OptgroupCss = "*{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 Q2OptgroupStyle0 = q2OptgroupCss;
+
+const Q2Optgroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guid = index$1.createGuid();
+        this.setHidden = () => {
+            this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
+        };
+        this.disabled = false;
+        this.label = undefined;
+        this.hidden = false;
+    }
+    /// LIFECYCLE HOOKS ///
+    componentWillLoad() {
+        const observer = new MutationObserver(this.setHidden);
+        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
+        this.mutationObserver = observer;
+        // set initially
+        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'));
+    }
+    ///// OBSERVERS ///////
+    disabledWatcher(disabled) {
+        this.options.forEach(opt => {
+            opt.disabledGroup = !!disabled;
+        });
+    }
+    render() {
+        return (index.h("div", { key: 'f90275607d9a96d441d38a0580ce1b93e662634e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'd7ebce6b9dca35f1a41c500942f6b21b6277d7b8', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '1f617b24906eb0ebe0e14520a45ae5de2e6757b5', class: "q2-optgroup-options" }, index.h("slot", { key: 'b90f24f7d8c10e3289041cb948587436c75a19f2' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": ["disabledWatcher"]
+    }; }
+};
+Q2Optgroup.style = Q2OptgroupStyle0;
+
+exports.q2_optgroup = Q2Optgroup;
+
+//# sourceMappingURL=q2-optgroup.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"q2-optgroup.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,k+CAAk+C,CAAC;AACz/C,yBAAe,aAAa;;MCGf,UAAU;;;QASnB,SAAI,GAAWA,kBAAU,EAAE,CAAC;QAoB5B,cAAS,GAAG;YACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;SACjF,CAAC;wBA7B2C,KAAK;;sBAMvB,KAAK;;;IAMhC,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;;QAGjC,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAMD,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;KAC5C;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;KACrE;;IAKD,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG;YACpB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;SAClC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACIC,kEACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,IAEZA,kEACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAIC,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACND,kEAAK,KAAK,EAAC,qBAAqB,IAC5BA,oEAAQ,CACN,CACJ,EACR;KACL;;;;;;;;;;","names":["createGuid","h","loc"],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --tct-gray-13,\n        --t-gray-13,\n        --tct-gray-l2,\n        --app-gray-l2,\n        #e6e6e6\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n    position: sticky;\n    top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    /** 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"],"version":3}

package/dist/cjs/{q2-optgroup_2.cjs.entry.js → q2-option.cjs.entry.js}

@@ -3,56 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-0e15dc8d.js');
-
-const q2OptgroupCss = "*{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 Q2OptgroupStyle0 = q2OptgroupCss;
-
-const Q2Optgroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.guid = index$1.createGuid();
-        this.setHidden = () => {
-            this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
-        };
-        this.disabled = false;
-        this.label = undefined;
-        this.hidden = false;
-    }
-    /// LIFECYCLE HOOKS ///
-    componentWillLoad() {
-        const observer = new MutationObserver(this.setHidden);
-        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
-        this.mutationObserver = observer;
-        // set initially
-        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'));
-    }
-    ///// OBSERVERS ///////
-    disabledWatcher(disabled) {
-        this.options.forEach(opt => {
-            opt.disabledGroup = !!disabled;
-        });
-    }
-    render() {
-        return (index.h("div", { key: 'f90275607d9a96d441d38a0580ce1b93e662634e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'd7ebce6b9dca35f1a41c500942f6b21b6277d7b8', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '1f617b24906eb0ebe0e14520a45ae5de2e6757b5', class: "q2-optgroup-options" }, index.h("slot", { key: 'b90f24f7d8c10e3289041cb948587436c75a19f2' }))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": ["disabledWatcher"]
-    }; }
-};
-Q2Optgroup.style = Q2OptgroupStyle0;
 
 const q2OptionCss = "*{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 Q2OptionStyle0 = q2OptionCss;
@@ -116,7 +66,6 @@ const Q2Option = class {
 };
 Q2Option.style = Q2OptionStyle0;
 
-exports.q2_optgroup = Q2Optgroup;
 exports.q2_option = Q2Option;
 
-//# sourceMappingURL=q2-optgroup_2.cjs.entry.js.map
+//# sourceMappingURL=q2-option.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"q2-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,+3EAA+3E,CAAC;AACp5E,uBAAe,WAAW;;MCEb,QAAQ;;;;QAoEjB,oBAAe,GAAG,CAAC,SAA2B;;YAC1C,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YAC5C,MAAM,WAAW,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,KAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YACjE,IAAI,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YACtD,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE;gBACzB,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,IAAI,GAAG,CAAC,IAAI,KAAK,eAAe,EAAE;oBAC1D,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;iBAC9B;qBAAM,IAAI,GAAG,CAAC,IAAI,KAAK,YAAY,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS,EAAE;oBACrE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC1C;aACJ;YACD,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY;gBAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAC7G,CAAC;oBA1EsC,QAAQ;;;;;;;;kCA+BwC,KAAK;;IAY7F,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,gBAAgB;QACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9G,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;KACpC;IAED,WAAW;;QACP,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,EAAC,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAE;YACxD,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SAC/C;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;YAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACtD;KACJ;IAgBD,MAAM;QACF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;QAE7C,QACIA,QAACC,UAAI,qDACD,QAAQ,EAAC,IAAI,mBACE,UAAU,GAAG,MAAM,GAAG,SAAS,mBAC/B,GAAG,CAAC,CAAC,QAAQ,EAAE,iBACjB,kBAAkB,GAAG,MAAM,GAAG,SAAS,EACpD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,QAAQ,IAAID,sEAAS,IAAI,EAAC,WAAW,GAAG,EAC9CA,kEAAK,KAAK,EAAC,SAAS,IAChBA,oEAAQ,CACN,CACH,EACT;KACL;;;;;;;","names":["h","Host"],"sources":["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    --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/cjs/q2-pagination.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-14c3693c.js');
 const index$1 = require('./index-0e15dc8d.js');
 
-const q2PaginationCss = "*{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{text-align:right;display:block;width:100%}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
+const q2PaginationCss = "*{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:flex;width:100%;justify-content:flex-end}:host([alignment=center]){justify-content:center}:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}";
 const Q2PaginationStyle0 = q2PaginationCss;
 
 const Q2Pagination = class {
@@ -27,6 +27,9 @@ const Q2Pagination = class {
             }
             this.change.emit({ page });
         };
+        this.handlePerPageChange = (event) => {
+            this.perPage = event.detail.value * 1;
+        };
         this.checkSize = () => {
             const { hostElement, containerElement } = this;
             const isOverflowing = this.containerWidth > hostElement.clientWidth;
@@ -47,8 +50,10 @@ const Q2Pagination = class {
         this.pages = undefined;
         this.pagesOnly = undefined;
         this.perPage = undefined;
+        this.perPageIncrements = undefined;
         this.recordsOnly = undefined;
         this.recordType = undefined;
+        this.alignment = undefined;
         this.isSmall = undefined;
     }
     ////////// LIFECYCLE HOOKS ////////
@@ -138,7 +143,21 @@ const Q2Pagination = class {
             window.removeEventListener('resize', this.checkSize);
         }
     }
+    renderPerPage() {
+        var _a;
+        if (!((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length)) {
+            return '';
+        }
+        this.perPageIncrements = this.perPageIncrements
+            .filter(perPage => !isNaN(perPage))
+            .map(perPage => perPage * 1)
+            .sort((a, b) => a - b);
+        if (this.perPage === undefined)
+            this.perPage = this.perPageIncrements[0];
+        return (index.h("q2-select", { onChange: this.handlePerPageChange, value: this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined }, this.perPageIncrements.map(perPage => (index.h("q2-option", { value: `${perPage}`, display: `${index$1.loc('tecton.element.pagination.view')} ${perPage}` }, `${index$1.loc('tecton.element.pagination.view')} ${perPage}`)))));
+    }
     render() {
+        var _a;
         const { pagesOnly, recordsOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, nextRange, prevRange, } = this;
         const onFirstPage = page === 1;
         const onLastPage = page === totalPages;
@@ -160,7 +179,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (index.h("nav", { key: '74561394c7bdb496d306e959ad5b1e5361e42ec7', class: "container", ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: '2500a292e1823d4d24136be40a4fa4f9346bc9c8', class: "description", "test-id": "description" }, pagesOnly
+        return (index.h("nav", { key: '44eb0a538a5d88250254eb8608aef86047f5b9ea', class: "container", ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'c765f6c929367f9715deddc7fc01fdb8e8686d52', class: "description", "test-id": "description" }, pagesOnly
             ? index$1.loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -169,7 +188,7 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), index.h("div", { key: '653ee492dfd5b7e80d8d1e1eb680364cbdb13f17', class: "btn-group" }, index.h("q2-btn", { key: '512e60ac934efaa54a87862ab81677956d80c7dc', label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '7c0c57fbb28c7221467457ced6e2f196f5c0c41a', type: "chevron-double-left" })), index.h("q2-btn", { key: '5a3ad7135ac650be29b2dcbd0f4e2dd1e0303a14', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: '9955d71cb14f809d7794022aff67c4403dd59e0c', type: "chevron-left" }))), index.h("div", { key: 'b7bbe334d869c527093f50b61419cd680dad7205', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, index.h("span", { key: '778f9842501854d5427f481e02924b2f967f8ec7', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '2761c3e8acd7150aba435d86c545e0903482163d', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '00e1cfc6c391311920928694844875715ed2fd97', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), index.h("span", { key: 'f14e720d12dcf4deb0b1ccf1b290f8ef1b3f9dab', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: '6acb2c32ca833bdd68fe0e09cee75df7c8abaae3', class: "btn-group" }, index.h("q2-btn", { key: '0ac42aecaf056348a8c2e2729d1e35e7db44750b', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'f1c87ff1bc99dc529a2e5efdaad614f1b1c4b520', type: "chevron-right" })), index.h("q2-btn", { key: '2f6d47cc2805f3e9e3215448e5c6ca0909b7ad80', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: '88a16778a20430935b7cc5d23393897f426d4548', type: "chevron-double-right" })))));
+            })), index.h("div", { key: 'ebda41944173b9f810c517715ec28304bfd4f5f5', class: "btn-group" }, index.h("q2-btn", { key: 'e48d65cf8936f093fca76aac546988d69a7cd019', label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'b7b8fbba4f4f4c30da9aa0de9f558800ffcc8f00', type: "chevron-double-left" })), index.h("q2-btn", { key: '78ce3fd249bc19b9401a751fc15e6a00cea0ad74', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: '9cfd78793289084d596b545124516a20185ebdd4', type: "chevron-left" }))), index.h("div", { key: '42c13150618ecaeeab55ec5589bd8f012a099d1f', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, index.h("span", { key: 'b78b4dca58e8fdff7272734fbc38b4edf46f2455', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '88c66c4fa458fab14476b05edf7d5a45c8d0dfa5', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '8abe4074a77e3f67d1e82351a5be78d2d6b85ffe', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), index.h("span", { key: 'd715bbbdbc5dc42156fe7249acc8dd3c01b38525', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: 'd6cdbd1023d863b5a8253d0457fb9f6c562a2ad3', class: "btn-group" }, index.h("q2-btn", { key: '1da65b555ece6c2f5d648126d1e875729bb3655c', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'c6712201038fa284dc742205c9358ff3d4cf6dad', type: "chevron-right" })), index.h("q2-btn", { key: '5855d4bc16deea2d6f70235b16a84f32209c5297', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'a09d6ddfe281f490666e04604c6c191ac1944926', type: "chevron-double-right" }))), index.h("div", { key: '221c89e3e6bacc0a634f5b791116eb77201b53f2', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"q2-pagination.entry.cjs.js","mappings":"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","names":["nextPaint","overrideFocus","isEventFromElement","loc","h"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    text-align: right;\n    display: block;\n    width: 100%;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.container {\n    display: inline-flex;\n    column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n    align-items: center;\n    height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n    white-space: nowrap;\n}\n\n.controls {\n    display: grid;\n    grid-template-columns: auto 50px auto;\n    align-items: center;\n    gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n    &[hidden] {\n        display: none;\n    }\n}\n\n.input-wrapper {\n    height: var-list(var-prefixer(pagination-height), 44px);\n    display: flex;\n    align-items: center;\n}\n\nq2-btn {\n    --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n    --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n    color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n    --tct-input-margin-top: 0;\n    --tct-input-margin-bottom: 0;\n    --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n    --tct-input-min-height: var(--tct-input-height);\n    --tct-input-align: center;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true }) autoSize: boolean = true;\n\n    /** The total number of records to paginate. */\n    @Prop({ reflect: true }) total: number;\n\n    /** The current page that is being displayed. */\n    @Prop({ reflect: true, mutable: true }) page: number;\n\n    /**\n     * The number of pages that can be displayed.\n     * @info\n     * Only referenced when `pagesOnly` is true.\n     */\n    @Prop({ reflect: true, mutable: true }) pages: number;\n\n    /** Indicates to only display the current and total pages. */\n    @Prop({ reflect: true, mutable: true }) pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\n    @Prop() perPage: number;\n\n    /** Indicates to only display the current and total records. */\n    @Prop({ reflect: true, mutable: true }) recordsOnly: boolean;\n\n    /** Description of the record type to be displayed alongside the record count. */\n    @Prop() recordType: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ page: number }>;\n\n    @State() isSmall: boolean;\n\n    inputField: HTMLQ2InputElement;\n    containerElement: HTMLElement;\n    containerWidth: number;\n    resizeObserver: ResizeObserver;\n\n    ////////// LIFECYCLE HOOKS ////////\n    componentWillLoad(): void {\n        this.manageResizeObserver();\n    }\n\n    componentDidLoad(): void {\n        this.containerWidth = this.containerElement.clientWidth;\n\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    ///////// OBSERVERS /////////\n\n    @Watch('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n            if (this.resizeObserver) return;\n            this.resizeObserver = new ResizeObserver(() => this.checkSize());\n            this.resizeObserver.observe(this.hostElement);\n            window.addEventListener('resize', this.checkSize);\n        } else {\n            this.isSmall = false;\n            this.removeResizeObserver();\n        }\n    }\n\n    ///////// HOST ELEMENT EVENTS /////////\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const { isFullViewHidden, containerElement, inputField } = this;\n        if (isFullViewHidden) {\n            containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n        } else {\n            inputField.focus();\n        }\n    }\n\n    ///////// GETTERS /////////\n\n    get isFullViewHidden() {\n        return this.isSmall || this.recordsOnly || this.pagesOnly;\n    }\n\n    get pageWithDefault() {\n        return this.page || 1;\n    }\n\n    get perPageWithDefault() {\n        return this.perPage || 10;\n    }\n\n    get totalWithDefault() {\n        return this.total || 0;\n    }\n\n    get recordTypeWithDefault() {\n        return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n    }\n\n    get currentRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = (page - 1) * perPage + 1;\n        const end = Math.min(page * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get nextRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = page * perPage + 1;\n        const end = Math.min((page + 1) * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get prevRange() {\n        const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n        const start = Math.max(1, (page - 2) * perPage + 1);\n        const end = (page - 1) * perPage;\n        return `${start} - ${end}`;\n    }\n\n    get totalPages() {\n        const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n        if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n        return Math.ceil(total / perPage);\n    }\n\n    ///////// HELPERS /////////\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    handlePageChange = (page: number) => {\n        const { totalPages, inputField } = this;\n        if (page < 1) {\n            page = 1;\n        } else if (page > totalPages) {\n            page = totalPages;\n        }\n\n        if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n        if (!this.hostElement.onchange) {\n            this.page = page;\n        }\n\n        this.change.emit({ page });\n    };\n\n    checkSize = () => {\n        const { hostElement, containerElement } = this;\n        const isOverflowing = this.containerWidth > hostElement.clientWidth;\n        this.isSmall = isOverflowing;\n        if (isOverflowing) return;\n\n        nextPaint(() => {\n            const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n            if (containerWidthHasNotChanged) return;\n            this.containerWidth = containerElement.clientWidth;\n            this.checkSize();\n        });\n    };\n\n    render() {\n        const {\n            pagesOnly,\n            recordsOnly,\n            isFullViewHidden,\n            recordTypeWithDefault: recordType,\n            totalPages,\n            totalWithDefault: total,\n            pageWithDefault: page,\n            currentRange,\n            nextRange,\n            prevRange,\n        } = this;\n        const onFirstPage = page === 1;\n        const onLastPage = page === totalPages;\n\n        let nextButtonLabel: string = '';\n        let prevButtonLabel: string = '';\n        if (pagesOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n            nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n        } else if (recordsOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: prevRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n            nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: nextRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n        }\n\n        return (\n            <nav\n                class=\"container\"\n                ref={el => (this.containerElement = el)}\n                aria-label={loc('tecton.element.pagination.title')}\n            >\n                <div\n                    class=\"description\"\n                    test-id=\"description\"\n                >\n                    {pagesOnly\n                        ? loc('tecton.element.pagination.pages', {\n                              current: page,\n                              total: totalPages,\n                          })\n                        : loc('tecton.element.pagination.description', {\n                              range: currentRange,\n                              recordType: recordType.toLowerCase(),\n                              total: total.toLocaleString(),\n                          })}\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(1)}\n                        test-id=\"firstPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-left\" />\n                    </q2-btn>\n                    <q2-btn\n                        label={prevButtonLabel}\n                        disabled={onFirstPage}\n                        onClick={() => this.handlePageChange(page - 1)}\n                        test-id=\"prevPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-left\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\n                >\n                    <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n                    <div\n                        class=\"input-wrapper\"\n                        onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n                    >\n                        <q2-input\n                            type=\"number\"\n                            value={`${page}`}\n                            min={1}\n                            max={this.totalPages}\n                            hideLabel\n                            optional\n                            label={`${loc('tecton.element.pagination.page')} (${loc(\n                                'tecton.element.pagination.ofPages',\n                                [totalPages.toLocaleString()]\n                            )})`}\n                            onChange={event => this.handlePageChange(event.detail.value)}\n                            test-id=\"pageInput\"\n                            current=\"page\"\n                            ref={el => (this.inputField = el)}\n                        ></q2-input>\n                    </div>\n                    <span aria-hidden=\"true\">\n                        {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n                    </span>\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        label={nextButtonLabel}\n                        disabled={onLastPage}\n                        onClick={() => this.handlePageChange(page + 1)}\n                        test-id=\"nextPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-right\" />\n                    </q2-btn>\n                    <q2-btn\n                        label=\"tecton.element.pagination.goToLastPage\"\n                        disabled={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(totalPages)}\n                        test-id=\"lastPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-right\" />\n                    </q2-btn>\n                </div>\n            </nav>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-pagination.entry.cjs.js","mappings":"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","names":["nextPaint","overrideFocus","isEventFromElement","loc","h"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: flex;\n    width: 100%;\n    justify-content: flex-end;\n}\n\n:host([alignment=\"center\"]) {\n    justify-content: center;\n}\n\n:host([alignment=\"left\"]) {\n    justify-content: flex-start;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.container {\n    display: inline-flex;\n    column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n    align-items: center;\n    height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n    white-space: nowrap;\n}\n\n.controls {\n    display: grid;\n    grid-template-columns: auto 50px auto;\n    align-items: center;\n    gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n    &[hidden] {\n        display: none;\n    }\n}\n\n.input-wrapper {\n    height: var-list(var-prefixer(pagination-height), 44px);\n    display: flex;\n    align-items: center;\n}\n\nq2-btn {\n    --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n    --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n    color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n    --tct-input-margin-top: 0;\n    --tct-input-margin-bottom: 0;\n    --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n    --tct-input-min-height: var(--tct-input-height);\n    --tct-input-align: center;\n}\n\nq2-select {\n    --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n    min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true }) autoSize: boolean = true;\n\n    /** The total number of records to paginate. */\n    @Prop({ reflect: true }) total: number;\n\n    /** The current page that is being displayed. */\n    @Prop({ reflect: true, mutable: true }) page: number;\n\n    /**\n     * The number of pages that can be displayed.\n     * @info\n     * Only referenced when `pagesOnly` is true.\n     */\n    @Prop({ reflect: true, mutable: true }) pages: number;\n\n    /** Indicates to only display the current and total pages. */\n    @Prop({ reflect: true, mutable: true }) pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\n    @Prop() perPage: number;\n\n    /** The list of perPage to operate pagination. e.g.) [10, 25, 50] */\n    @Prop() perPageIncrements: number[];\n\n    /** Indicates to only display the current and total records. */\n    @Prop({ reflect: true, mutable: true }) recordsOnly: boolean;\n\n    /** Description of the record type to be displayed alongside the record count. */\n    @Prop() recordType: string;\n\n    /** Indicates the horizontal alignment of children elements */\n    @Prop() alignment: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ page: number }>;\n\n    @State() isSmall: boolean;\n\n    inputField: HTMLQ2InputElement;\n    containerElement: HTMLElement;\n    containerWidth: number;\n    resizeObserver: ResizeObserver;\n\n    ////////// LIFECYCLE HOOKS ////////\n    componentWillLoad(): void {\n        this.manageResizeObserver();\n    }\n\n    componentDidLoad(): void {\n        this.containerWidth = this.containerElement.clientWidth;\n\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    ///////// OBSERVERS /////////\n\n    @Watch('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n            if (this.resizeObserver) return;\n            this.resizeObserver = new ResizeObserver(() => this.checkSize());\n            this.resizeObserver.observe(this.hostElement);\n            window.addEventListener('resize', this.checkSize);\n        } else {\n            this.isSmall = false;\n            this.removeResizeObserver();\n        }\n    }\n\n    ///////// HOST ELEMENT EVENTS /////////\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const { isFullViewHidden, containerElement, inputField } = this;\n        if (isFullViewHidden) {\n            containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n        } else {\n            inputField.focus();\n        }\n    }\n\n    ///////// GETTERS /////////\n\n    get isFullViewHidden() {\n        return this.isSmall || this.recordsOnly || this.pagesOnly;\n    }\n\n    get pageWithDefault() {\n        return this.page || 1;\n    }\n\n    get perPageWithDefault() {\n        return this.perPage || 10;\n    }\n\n    get totalWithDefault() {\n        return this.total || 0;\n    }\n\n    get recordTypeWithDefault() {\n        return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n    }\n\n    get currentRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = (page - 1) * perPage + 1;\n        const end = Math.min(page * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get nextRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = page * perPage + 1;\n        const end = Math.min((page + 1) * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get prevRange() {\n        const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n        const start = Math.max(1, (page - 2) * perPage + 1);\n        const end = (page - 1) * perPage;\n        return `${start} - ${end}`;\n    }\n\n    get totalPages() {\n        const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n        if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n        return Math.ceil(total / perPage);\n    }\n\n    ///////// HELPERS /////////\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    handlePageChange = (page: number) => {\n        const { totalPages, inputField } = this;\n        if (page < 1) {\n            page = 1;\n        } else if (page > totalPages) {\n            page = totalPages;\n        }\n\n        if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n        if (!this.hostElement.onchange) {\n            this.page = page;\n        }\n\n        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    checkSize = () => {\n        const { hostElement, containerElement } = this;\n        const isOverflowing = this.containerWidth > hostElement.clientWidth;\n        this.isSmall = isOverflowing;\n        if (isOverflowing) return;\n\n        nextPaint(() => {\n            const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n            if (containerWidthHasNotChanged) return;\n            this.containerWidth = containerElement.clientWidth;\n            this.checkSize();\n        });\n    };\n\n    renderPerPage() {\n        if (!this.perPageIncrements?.length) {\n            return '';\n        }\n        this.perPageIncrements = this.perPageIncrements\n            .filter(perPage => !isNaN(perPage))\n            .map(perPage => perPage * 1)\n            .sort((a, b) => a - b);\n        if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];\n        return (\n            <q2-select\n                onChange={this.handlePerPageChange}\n                value={this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined}\n            >\n                {this.perPageIncrements.map(perPage => (\n                    <q2-option\n                        value={`${perPage}`}\n                        display={`${loc('tecton.element.pagination.view')} ${perPage}`}\n                    >{`${loc('tecton.element.pagination.view')} ${perPage}`}</q2-option>\n                ))}\n            </q2-select>\n        );\n    }\n\n    render() {\n        const {\n            pagesOnly,\n            recordsOnly,\n            isFullViewHidden,\n            recordTypeWithDefault: recordType,\n            totalPages,\n            totalWithDefault: total,\n            pageWithDefault: page,\n            currentRange,\n            nextRange,\n            prevRange,\n        } = this;\n        const onFirstPage = page === 1;\n        const onLastPage = page === totalPages;\n\n        let nextButtonLabel: string = '';\n        let prevButtonLabel: string = '';\n        if (pagesOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n            nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n        } else if (recordsOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: prevRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n            nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: nextRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n        }\n\n        return (\n            <nav\n                class=\"container\"\n                ref={el => (this.containerElement = el)}\n                aria-label={loc('tecton.element.pagination.title')}\n            >\n                <div\n                    class=\"description\"\n                    test-id=\"description\"\n                >\n                    {pagesOnly\n                        ? loc('tecton.element.pagination.pages', {\n                              current: page,\n                              total: totalPages,\n                          })\n                        : loc('tecton.element.pagination.description', {\n                              range: currentRange,\n                              recordType: recordType.toLowerCase(),\n                              total: total.toLocaleString(),\n                          })}\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(1)}\n                        test-id=\"firstPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-left\" />\n                    </q2-btn>\n                    <q2-btn\n                        label={prevButtonLabel}\n                        disabled={onFirstPage}\n                        onClick={() => this.handlePageChange(page - 1)}\n                        test-id=\"prevPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-left\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\n                >\n                    <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n                    <div\n                        class=\"input-wrapper\"\n                        onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n                    >\n                        <q2-input\n                            type=\"number\"\n                            value={`${page}`}\n                            min={1}\n                            max={this.totalPages}\n                            hideLabel\n                            optional\n                            label={`${loc('tecton.element.pagination.page')} (${loc(\n                                'tecton.element.pagination.ofPages',\n                                [totalPages.toLocaleString()]\n                            )})`}\n                            onChange={event => this.handlePageChange(event.detail.value)}\n                            test-id=\"pageInput\"\n                            current=\"page\"\n                            ref={el => (this.inputField = el)}\n                        ></q2-input>\n                    </div>\n                    <span aria-hidden=\"true\">\n                        {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n                    </span>\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        label={nextButtonLabel}\n                        disabled={onLastPage}\n                        onClick={() => this.handlePageChange(page + 1)}\n                        test-id=\"nextPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-right\" />\n                    </q2-btn>\n                    <q2-btn\n                        label=\"tecton.element.pagination.goToLastPage\"\n                        disabled={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(totalPages)}\n                        test-id=\"lastPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-right\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"per-page\"\n                    hidden={isFullViewHidden || !this.perPageIncrements?.length}\n                >\n                    {this.renderPerPage()}\n                </div>\n            </nav>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/q2-pill.cjs.entry.js

@@ -252,7 +252,7 @@ const Q2Pill = class {
         const isButton = optionCount && active;
         const TagName = isButton ? 'button' : 'div';
         const iconName = isButton || !optionCount ? 'close' : 'chevron-down';
-        return (index.h(TagName, { class: "btn-close", onClick: isButton && this.clearSelectedOptions, disabled: isButton && this.disabled, "aria-label": isButton && index$1.loc('tecton.element.pill.clearSelection'), type: isButton && 'button' }, index.h("q2-icon", { type: iconName })));
+        return (index.h(TagName, { class: "btn-close", onClick: (isButton && this.clearSelectedOptions) || undefined, disabled: (isButton && this.disabled) || undefined, "aria-label": (isButton && index$1.loc('tecton.element.pill.clearSelection')) || undefined, type: (isButton && 'button') || undefined }, index.h("q2-icon", { type: iconName })));
     }
     generateHiddenElement() {
         return (index.h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, index$1.loc('tecton.element.optionList.optionCount', [this.optionCount])));
@@ -264,7 +264,7 @@ const Q2Pill = class {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (index.h("click-elsewhere", { key: '752d0feff9bd565302610c81ce63280196edb43f', onChange: this.onClickElsewhere }, index.h("div", { key: '4edb21febc2216235832c4b13c638e1f2f8f59a0', class: wrapperClassNames.join(' ') }, index.h("div", { key: 'c29234f319bf1046b68c41a7375b9a216f12fbbd', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: '420e70da1b2f7f9db59b3e403e4bafc405ccc65f', class: "btn-primary", "test-id": "btn-control", type: "button", role: "combobox", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": optionCount && 'option-list', "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && index.h("span", { key: '4cc237dbfeaeba74b265b4118018d06c45b7f7a5', class: "sr" }, "(", index$1.loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: '018056177363dba5b2eb5345a3f0b9504e68bcde', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: '0cf2c285a470d38bd0ec9c76c42d463c4b8ed02e', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: 'cf56015e6aa133d5df2e671ec2d6b862cd634e91' }))))));
+        return (index.h("click-elsewhere", { key: '6e29701c0e6a7a25f3f004837ef666c70ef407ca', onChange: this.onClickElsewhere }, index.h("div", { key: 'bc45668fe556c5dc1c25ac75fde16ec108074fae', class: wrapperClassNames.join(' ') }, index.h("div", { key: 'd5bbb266fe8435d59266b1852a6a5f483b85dbbc', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: '7b9d98be7cb7cd843ca7e23cfad309e362ebf335', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && index.h("span", { key: 'd515e700bcaae2907a8b5e11dc2608ec113287d8', class: "sr" }, "(", index$1.loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: '92c72fe5742558acc376a5a1d05ed197ddf6ff6e', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: '0aeb00f2c654ff3e8889d596c9daec7ccf9b4973', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: '4696af6cbcc67f1a61a0f5edce1067e0acf1fb27' }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {