q2-tecton-elements 1.36.0 → 1.37.0

package/dist/q2-tecton-elements/p-252889b7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Textarea","this","scheduledAfterRender","guid","createGuid","checkRows","contentContainer","rows","textareaField","resize","includes","style","height","offsetHeight","removeAttribute","checkCols","cols","width","offsetWidth","onTextareaFocus","hasFocus","valueOnFocus","value","setMessageHeight","onTextareaBlur","change","emit","onTextareaInput","event","stopPropagation","target","input","onTextareaChange","onMouseDown","downParams","x","clientX","y","clientY","document","addEventListener","onMouseMove","onMouseUp","setHeight","setWidth","onTouchStart","touches","length","preventDefault","firstTouch","pageX","pageY","onTouchMove","removeEventListener","componentWillLoad","isNaN","maxlength","undefined","componentDidRender","push","forEach","fn","componentDidLoad","overrideFocus","hostElement","hasError","Array","isArray","errors","messages","hints","showMessages","hideMessages","inputId","inputDescribedBy","wrapperClasses","errorClass","valueClass","focusClass","showResize","valueObserver","truncatedValue","substr","rowsObserver","colsObserver","hintsObserver","errorsObserver","onHostElementFocus","isEventFromElement","focus","onHostElementChange","onchange","detail","onHostElementInput","oninput","setValue","dispatchEvent","InputEvent","resizeX","eventX","MouseEvent","_b","_a","newWidth","resizeY","eventY","newHeight","render","h","class","labelDOM","ref","el","inputDOM","maxLengthDOM","messagesDOM","id","placeholder","loc","maxLength","optional","hideLabel","label","spellcheck","readonly","disabled","onInput","onChange","onFocus","onBlur","type","tabIndex","viewBox","xmlns","d","fill"],"sources":["./src/components/q2-textarea/styles.scss?tag=q2-textarea&encapsulation=shadow","./src/components/q2-textarea/index.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    margin: var-list(var-prefixer(textarea-margin-top), --app-scale-6x, 30px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-6x, 30px);\n    font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\nlabel {\n    --comp-label-padding: #{var-list(\n            --tct-textarea-label-padding,\n            unquote(\n                '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n            )\n        )};\n    --comp-label-margin: #{var-list(\n            --tct-textarea-label-margin,\n            unquote(\n                '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    display: block;\n    padding: var(--comp-label-padding);\n    margin: var(--comp-label-margin);\n    color: var-list(var-prefixer(textarea-label-font-color), inherit);\n    font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n    text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n    letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), normal);\n    transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n}\n\n.optional-tag {\n    --comp-label-optional-margin: #{var-list(\n            --tct-textarea-label-optional-margin,\n            unquote(\n                '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    margin: var(--comp-label-optional-margin);\n    color: var-list(\n        var-prefixer(textarea-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    height: 100%;\n    --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 3px)};\n    --comp-textarea-border-top-left-radius: #{var-list(\n            var-prefixer(textarea-border-top-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-top-right-radius: #{var-list(\n            var-prefixer(textarea-border-top-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-right-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-left-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n        var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n        var(--comp-textarea-border-bottom-left-radius);\n    --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n        var-list(var-prefixer(textarea-border-right-width), 1px)\n        var-list(var-prefixer(textarea-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-border-left-width), 1px)};\n    --comp-textarea-focus-border-width: #{var-list(var-prefixer(textarea-focus-border-top-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-right-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-left-width), 1px)};\n    --comp-textarea-icon-clearance: 34px;\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n        opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    }\n}\n\n.content-container {\n    --comp-textarea-min-height: 44px;\n    --comp-textarea-min-width: 150px;\n    position: relative;\n    display: inline-block;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n    :host(:not([cols])) & {\n        width: 100%;\n    }\n}\n\ntextarea {\n    --comp-textarea-padding: #{var-list(\n            --tct-textarea-padding,\n            unquote(\n                '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n            )\n        )};\n    resize: none;\n    height: 100%;\n    -webkit-appearance: none;\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    padding: var(--comp-textarea-padding);\n    background: var-list(\n        --tct-textarea-background,\n        var-prefixer(textarea-bg),\n        --tct-input-background,\n        var-prefixer(input-bg),\n        --t-gray-14,\n        #fcfcfd\n    );\n    color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n    border-width: var(--comp-textarea-border-width);\n    border-style: solid;\n    border-color: var-list(\n        var-prefixer(textarea-border-color),\n        var-prefixer(input-border-color),\n        --t-a11y-gray-color-AA,\n        #949494\n    );\n    border-radius: var(--comp-textarea-border-radius);\n    box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n    scrollbar-width: thin;\n    scrollbar-color: var(--t-a11y-gray-color) transparent;\n    --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    transition: border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween),\n        box-shadow var(--comp-textarea-tween);\n\n    &::-webkit-scrollbar {\n        width: var(--app-scale-1x);\n        height: var(--app-scale-1x);\n        margin: var(--app-scale-1x);\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--t-a11y-gray-color);\n        border-radius: 2px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &:not([cols]) {\n        width: 100%;\n    }\n\n    &:focus {\n        border-width: var(--comp-textarea-focus-border-width, 1px);\n        border-color: var-list(\n            var-prefixer(textarea-focus-border-color),\n            var-prefixer(input-focus-border-color),\n            --t-a11y-active-gray-color-AA,\n            #404040\n        );\n        box-shadow: var(--const-double-focus-ring),\n            var-list(var-prefixer(textarea-focus-box-shadow), unquote('0 0 transparent'));\n    }\n\n    &::placeholder {\n        color: var-list(\n            var-prefixer(textarea-placeholder-font-color),\n            --t-input-placeholder-font-color,\n            --tct-gray-7,\n            --app-gray-7,\n            --tct-gray-d1,\n            --app-gray-d1,\n            #666666\n        );\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n\n        &:not(:focus) {\n            border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #c30000);\n        }\n    }\n}\n\nq2-icon {\n    margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n    margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n    pointer-events: none;\n    position: absolute;\n    top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n    color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n    right: 0;\n    margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n    --tct-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n    --t-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n}\n\n.icon-error {\n    color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n}\n\n.messages-container {\n    height: 0px;\n    overflow: hidden;\n    background: var-list(\n        --tct-message-background,\n        --tct-message-bg,\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    box-shadow: var-list(\n        var-prefixer(textarea-message-box-shadow),\n        --tct-box-shadow-1,\n        --app-shadow-1,\n        unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n    );\n    transition: height\n        var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    margin-top: 2px;\n    z-index: 1;\n    position: absolute;\n    width: 100%;\n    color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.has-error label {\n    color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n}\n\n.max-length {\n    color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(\n        var-prefixer(textarea-max-length-font-size),\n        --tct-font-size-small,\n        --app-font-size-small,\n        12px\n    );\n    position: absolute;\n    right: 0;\n}\n\n.btn-resize {\n    --tct-textarea-resize-icon-padding: calc(\n        calc(\n                #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n                        var-prefixer(textarea-resize-icon-size),\n                        12px\n                    )}\n            ) / 2\n    );\n    width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n    height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n    background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n    stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n    border: 0;\n    position: absolute;\n    right: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n    bottom: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n    display: block;\n    padding: var-list(var-prefixer(textarea-resize-icon-padding));\n    font-size: 0;\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([resize='both']) & {\n        cursor: se-resize;\n    }\n\n    :host([resize='vertical']) & {\n        cursor: s-resize;\n    }\n\n    :host([resize='horizontal']) & {\n        cursor: e-resize;\n    }\n}\n","import { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n    tag: 'q2-textarea',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n    private textareaField?: HTMLTextAreaElement;\n    private contentContainer?: HTMLDivElement;\n    private valueOnFocus: string;\n    private scheduledAfterRender: (() => void)[] = [];\n    private guid = createGuid();\n\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) hideMessages: boolean;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) spellcheck: boolean;\n    @Prop({ reflect: true, mutable: true }) maxlength: number;\n    @Prop({ reflect: true }) rows: number;\n    @Prop({ reflect: true }) cols: number;\n    @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n    @Prop() errors: string[];\n    @Prop() hints: string[];\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    @Event() input: EventEmitter<any>;\n    @Event() change: EventEmitter<any>;\n\n    /// Methods ///\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n\n        const resizeY = ['both', 'vertical'].includes(resize);\n        if (!resizeY) return;\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        contentContainer.style.height = `${newHeight}px`;\n    }\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-d4da72f0.entry.js → p-25bd1b18.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,g as o}from"./p-277dc8cd.js";import{r,o as n,l as a,i as l}from"./p-99ab3236.js";import{s as c,a as s}from"./p-788adb51.js";const p="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary-l5, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary-l5, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary-l5, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary-l5, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary-l5, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary-l5, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";const d=class{constructor(e){t(this,e);this.change=i(this,"change",7);var o;this.scheduledAfterRender=[];this.syncValueProperties=()=>{const{value:t,selectedOptions:i}=this;if(!!(i===null||i===void 0?void 0:i.length))this.selectedOptionsChanged(i);else if(t)this.valueChanged(t)};this.getOption=async t=>{if(this.optionList){const i=await this.optionList.getOptions();return i.find((i=>i.value===t))}else{return this.hostElement.querySelector(`q2-option[value="${t}"]`)}};this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i=[]}=this;const e=i.map((t=>t.value));const o=await((t=this.optionList)===null||t===void 0?void 0:t.getOptions());if(this.optionCount)this.active=!!e.length;this.selectedOptionElements=(o===null||o===void 0?void 0:o.filter((t=>e.includes(t.value))))||[]};this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.clearSelectedOptions=()=>{this.selectedOptions=[];this.value=null;this.active=false;this.open=false;this.primaryBtn.focus();this.change.emit({value:null,values:[],active:false});this.scheduledAfterRender.push(r)};this.handleClick=async t=>{t.stopPropagation();if(this.disabled)return;if(this.optionCount){if(c(this)){this.executeActionSheet(t)}else{await this.popoverElement.toggle()}}else{const{value:t,label:i}=this;const e=this.active=!this.active;const o=e?[{value:t,display:i}]:[];this.selectedOptions=o;this.change.emit({value:t,values:o,active:e})}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(!this.optionCount||this.disabled||i)return;t.preventDefault();if(c(this,t)){this.executeActionSheet(t)}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const e=t.relatedTarget;if((i=(e===null||e===void 0?void 0:e.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;this.handleSelectionChanges(t.detail)};this.handleWrapperClick=()=>{this.primaryBtn.focus();this.primaryBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.hoist=!!((o=window.Tecton)===null||o===void 0?void 0:o.useActionSheets);this.disabled=undefined;this.active=undefined;this.open=undefined;this.multiple=undefined;this.maxLength=undefined;this.label=undefined;this.value=undefined;this.theme=undefined;this.selectedOptions=[];this.popoverMinHeight=150;this.popoverDirection=undefined;this.popoverAlignment="right";this.optionListLabel=undefined;this.optionCount=undefined;this.selectedOptionElements=[]}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement);this.syncValueProperties()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:e,optionCount:o}=this;if(!o||e.length===0)return t;else if(e.length===1)return e[0].display;return a("tecton.element.pill.activeCount",{count:i.length})}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;if(t)return i.length>t?`${i.substring(0,t)}…`:i;else return i}async executeActionSheet(t){const i=await s(this,t);this.handleSelectionChanges(i)}async handleSelectionChanges(t){const{multiple:i}=this;const{value:e="",values:o=[]}=t;const r=i?!!o.length:!!e;if(!this.hostElement.onchange){if(i){this.selectedOptions=o;this.value=undefined}else{const t=await this.getOption(e);this.selectedOptions=t?[{value:t.value,display:t.display}]:[];this.value=(t===null||t===void 0?void 0:t.value)||undefined}}this.change.emit({value:e,values:o,active:r})}async valueChanged(t){var i,e;const{multiple:o,selectedOptions:r}=this;const n=(e=(i=r===null||r===void 0?void 0:r[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o)return;if(t===n)this.updateSelectedOptionElements();else{const i=await this.getOption(t);const{value:e,display:o}=i||{value:t,display:null};this.selectedOptions=e?[{value:e,display:o}]:[]}}selectedOptionsChanged(t){var i,e;const{multiple:o}=this;const r=(e=(i=t===null||t===void 0?void 0:t[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o){if(this.value)this.value=null;this.updateSelectedOptionElements()}else if(this.value===r){this.updateSelectedOptionElements()}else{this.value=r}}delegateFocus(t){if(!l(t,this.hostElement))return;this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}handleSelectedDisplay(){if(this.multiple)return;this.updateSelectedOptionElements()}generateIcon(){const{optionCount:t,active:i}=this;const o=t&&i;const r=o?"button":"div";const n=o||!t?"close":"chevron-down";return e(r,{class:"btn-close",onClick:o&&this.clearSelectedOptions,disabled:o&&this.disabled,"aria-label":o&&a("tecton.element.pill.clearSelection"),type:o&&"button"},e("q2-icon",{type:n}))}generateHiddenElement(){return e("div",{id:"option-description",class:"sr","aria-hidden":"true"},a("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,active:i,open:o}=this;const r=["btn-wrapper"];if(t||i)r.push("has-icon");if(t)r.push("has-options");return e("click-elsewhere",{onChange:this.onClickElsewhere},e("div",{class:r.join(" ")},e("div",{class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},e("button",{class:"btn-primary","test-id":"btn-control",type:"button",role:"combobox",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,disabled:this.disabled,"aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-expanded":t&&`${!!o}`||undefined,"aria-label":this.maxLength&&this.buttonContent,"aria-describedby":t&&"option-description"||undefined},this.truncatedButtonContent,!t&&i&&e("span",{class:"sr"},"(",a("tecton.element.pill.active"),")"))),this.generateIcon(),this.generateHiddenElement()),this.optionCount>0&&e("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},e("q2-option-list",{type:"listbox",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements(),label:a("tecton.element.optionList.label",[this.optionListLabel])},e("slot",null))))}get hostElement(){return o(this)}static get watchers(){return{value:["valueChanged"],selectedOptions:["selectedOptionsChanged"]}}};d.style=p;export{d as q2_pill};
-//# sourceMappingURL=p-d4da72f0.entry.js.map
+import{r as t,c as i,h as e,g as o}from"./p-277dc8cd.js";import{r,o as n,l as a,i as l}from"./p-ef856249.js";import{s as c,a as s}from"./p-788adb51.js";const p="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary-l5, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary-l5, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary-l5, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary-l5, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary-l5, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary-l5, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";const d=class{constructor(e){t(this,e);this.change=i(this,"change",7);var o;this.scheduledAfterRender=[];this.syncValueProperties=()=>{const{value:t,selectedOptions:i}=this;if(!!(i===null||i===void 0?void 0:i.length))this.selectedOptionsChanged(i);else if(t)this.valueChanged(t)};this.getOption=async t=>{if(this.optionList){const i=await this.optionList.getOptions();return i.find((i=>i.value===t))}else{return this.hostElement.querySelector(`q2-option[value="${t}"]`)}};this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i=[]}=this;const e=i.map((t=>t.value));const o=await((t=this.optionList)===null||t===void 0?void 0:t.getOptions());if(this.optionCount)this.active=!!e.length;this.selectedOptionElements=(o===null||o===void 0?void 0:o.filter((t=>e.includes(t.value))))||[]};this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.clearSelectedOptions=()=>{this.selectedOptions=[];this.value=null;this.active=false;this.open=false;this.primaryBtn.focus();this.change.emit({value:null,values:[],active:false});this.scheduledAfterRender.push(r)};this.handleClick=async t=>{t.stopPropagation();if(this.disabled)return;if(this.optionCount){if(c(this)){this.executeActionSheet(t)}else{await this.popoverElement.toggle()}}else{const{value:t,label:i}=this;const e=this.active=!this.active;const o=e?[{value:t,display:i}]:[];this.selectedOptions=o;this.change.emit({value:t,values:o,active:e})}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(!this.optionCount||this.disabled||i)return;t.preventDefault();if(c(this,t)){this.executeActionSheet(t)}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const e=t.relatedTarget;if((i=(e===null||e===void 0?void 0:e.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;this.handleSelectionChanges(t.detail)};this.handleWrapperClick=()=>{this.primaryBtn.focus();this.primaryBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.hoist=!!((o=window.Tecton)===null||o===void 0?void 0:o.useActionSheets);this.disabled=undefined;this.active=undefined;this.open=undefined;this.multiple=undefined;this.maxLength=undefined;this.label=undefined;this.value=undefined;this.theme=undefined;this.selectedOptions=[];this.popoverMinHeight=150;this.popoverDirection=undefined;this.popoverAlignment="right";this.optionListLabel=undefined;this.optionCount=undefined;this.selectedOptionElements=[]}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement);this.syncValueProperties()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:e,optionCount:o}=this;if(!o||e.length===0)return a(t);else if(e.length===1)return a(e[0].display);return a("tecton.element.pill.activeCount",{count:i.length})}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;if(t)return i.length>t?`${i.substring(0,t)}…`:i;else return i}async executeActionSheet(t){const i=await s(this,t);this.handleSelectionChanges(i)}async handleSelectionChanges(t){const{multiple:i}=this;const{value:e="",values:o=[]}=t;const r=i?!!o.length:!!e;if(!this.hostElement.onchange){if(i){this.selectedOptions=o;this.value=undefined}else{const t=await this.getOption(e);this.selectedOptions=t?[{value:t.value,display:t.display}]:[];this.value=(t===null||t===void 0?void 0:t.value)||undefined}}this.change.emit({value:e,values:o,active:r})}async valueChanged(t){var i,e;const{multiple:o,selectedOptions:r}=this;const n=(e=(i=r===null||r===void 0?void 0:r[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o)return;if(t===n)this.updateSelectedOptionElements();else{const i=await this.getOption(t);const{value:e,display:o}=i||{value:t,display:null};this.selectedOptions=e?[{value:e,display:o}]:[]}}selectedOptionsChanged(t){var i,e;const{multiple:o}=this;const r=(e=(i=t===null||t===void 0?void 0:t[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o){if(this.value)this.value=null;this.updateSelectedOptionElements()}else if(this.value===r){this.updateSelectedOptionElements()}else{this.value=r}}delegateFocus(t){if(!l(t,this.hostElement))return;this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}handleSelectedDisplay(){if(this.multiple)return;this.updateSelectedOptionElements()}generateIcon(){const{optionCount:t,active:i}=this;const o=t&&i;const r=o?"button":"div";const n=o||!t?"close":"chevron-down";return e(r,{class:"btn-close",onClick:o&&this.clearSelectedOptions,disabled:o&&this.disabled,"aria-label":o&&a("tecton.element.pill.clearSelection"),type:o&&"button"},e("q2-icon",{type:n}))}generateHiddenElement(){return e("div",{id:"option-description",class:"sr","aria-hidden":"true"},a("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,active:i,open:o}=this;const r=["btn-wrapper"];if(t||i)r.push("has-icon");if(t)r.push("has-options");return e("click-elsewhere",{onChange:this.onClickElsewhere},e("div",{class:r.join(" ")},e("div",{class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},e("button",{class:"btn-primary","test-id":"btn-control",type:"button",role:"combobox",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,disabled:this.disabled,"aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-expanded":t&&`${!!o}`||undefined,"aria-label":this.maxLength&&this.buttonContent,"aria-describedby":t&&"option-description"||undefined},this.truncatedButtonContent,!t&&i&&e("span",{class:"sr"},"(",a("tecton.element.pill.active"),")"))),this.generateIcon(),this.generateHiddenElement()),this.optionCount>0&&e("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},e("q2-option-list",{type:"listbox",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements(),label:a("tecton.element.optionList.label",[this.optionListLabel])},e("slot",null))))}get hostElement(){return o(this)}static get watchers(){return{value:["valueChanged"],selectedOptions:["selectedOptionsChanged"]}}};d.style=p;export{d as q2_pill};
+//# sourceMappingURL=p-25bd1b18.entry.js.map

package/dist/q2-tecton-elements/p-25bd1b18.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Pill","this","scheduledAfterRender","syncValueProperties","value","selectedOptions","length","selectedOptionsChanged","valueChanged","getOption","async","optionList","options","getOptions","find","option","hostElement","querySelector","updateSelectedOptionElements","selectedValues","map","_a","optionCount","active","selectedOptionElements","filter","includes","determineOptionCount","numberOfOptions","querySelectorAll","clearSelectedOptions","open","primaryBtn","focus","change","emit","values","push","resizeIframe","handleClick","event","stopPropagation","disabled","shouldShowActionSheet","executeActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","handleExternalKeydown","handleButtonFocusout","relatedTarget","tagName","handleChange","handleSelectionChanges","detail","handleWrapperClick","click","onClickElsewhere","target","localName","window","Tecton","useActionSheets","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","disconnectedCallback","disconnect","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","result","showActionSheetList","changeDetails","multiple","onchange","undefined","selectedOption","newValue","firstValue","_b","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","handleSelectedDisplay","generateIcon","isButton","TagName","iconName","h","class","onClick","type","generateHiddenElement","id","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","onReady","optionListLabel"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    :host(:not(:empty)) &,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary-l5, #61c4ff)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary-l5, #61c4ff)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary-l5, #d9e1e6)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary-l5, #d9e1e6)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary-l5, #f4fafe)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary-l5, #f4fafe)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentColor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n    tag: 'q2-pill',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true, mutable: true }) active: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) multiple: boolean;\n    @Prop({ reflect: true }) maxLength: number;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string;\n\n    @State() optionCount: number;\n    @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n    scheduledAfterRender: (() => void)[] = [];\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n    popoverElement: HTMLQ2PopoverElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    /// Helpers ///\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value,\n            values,\n            active: isActive,\n        });\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    /// Watchers ///\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (multiple) return;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n    /// Event Handlers ///\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    /// DOM ///\n    generateIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={isButton && this.clearSelectedOptions}\n                disabled={isButton && this.disabled}\n                aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n                type={isButton && 'button'}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role=\"combobox\"\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={optionCount && 'option-list'}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.maxLength && this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.generateIcon()}\n                    {this.generateHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <q2-option-list\n                            type=\"listbox\"\n                            ref={el => (this.optionList = el)}\n                            id=\"option-list\"\n                            onChange={this.handleChange}\n                            multiple={this.multiple}\n                            selectedOptions={this.selectedOptions}\n                            onReady={() => this.updateSelectedOptionElements()}\n                            label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        >\n                            <slot />\n                        </q2-option-list>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-2a975246.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as s}from"./p-277dc8cd.js";import{l as n,h as a,o as r,i as h,w as d}from"./p-ef856249.js";const l="*{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 #33b4ff #06C)}: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:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";const o=class{constructor(e){t(this,e);this.input=i(this,"input",7);this.change=i(this,"change",7);this.scheduledAfterRender=[];this.defaultValue=this.value;this.inputInput=t=>{t.stopPropagation();this.input.emit(t.detail);this.formattedValue=t.detail.formattedValue;this.innerValue=t.detail.value};this.inputChange=t=>{t.stopPropagation()};this.inputKeyDown=t=>{if(t.key==="Escape"||t.key==="Esc"){t.preventDefault();this.cancelClick();return}if(t.key==="Enter"){t.preventDefault();this.saveClick();return}};this.inputClick=t=>{t.stopPropagation()};this.saveClick=t=>{t&&t.stopPropagation();const i=this.hostElement.shadowRoot.querySelector("q2-input").value;this.defaultValue=i;this.change.emit({editing:false,name:"save",value:this.innerValue||i,formattedValue:this.formattedValue||i});setTimeout((()=>{const{errors:t=[]}=this;if(!t.length)return;this.hostElement.focus()}),1)};this.editClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:true,name:"edit"})};this.cancelClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:false,name:"cancel"});this.hostElement.shadowRoot.querySelector("q2-input").value=this.defaultValue};this.value="";this.editing=false;this.label="";this.hideLabel=undefined;this.type=undefined;this.formatModifier=undefined;this.truncated=undefined;this.maxlength=undefined;this.persistentLabel=undefined;this.disabled=undefined;this.block=undefined;this.hints=undefined;this.errors=undefined;this.ariaLabel=undefined;this.formattedValue=undefined}get locLabel(){return this.label&&n(this.label)||""}componentWillLoad(){a(this)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.formattedValue=this.inputElement.formattedValue}componentDidLoad(){r(this.hostElement)}errorsObserver(){var t;const{editing:i,errors:e=[]}=this;const s=this.hostElement.shadowRoot.activeElement;const n=(t=(s===null||s===void 0?void 0:s.tagName)==="Q2-INPUT")!==null&&t!==void 0?t:false;const a=e.length;if(n||!s||!i||!a)return;this.inputElement.focus()}ariaLabelObserver(){a(this)}observesEditing(t,i){if(t===i)return;this.scheduledAfterRender.push(this.hostElement.focus)}get wrapperClass(){return`q2-editable-field-wrapper ${this.editing?"editing":""}`}onHostElementChange(t){if(!h(t,this.hostElement)||this.hostElement.onchange)return;switch(t.detail.name){case"save":this.value=t.detail.value;break;case"cancel":this.inputElement.value=this.value;break}this.editing=t.detail.editing}delegateFocus(t){if(!h(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(this.editing?"q2-input":"q2-btn.begin-edit").focus()}clickEdit(){var t;if(this.editing)return;(t=this.editBtnElement)===null||t===void 0?void 0:t.click()}clickCancel(){var t;if(!this.editing)return;(t=this.cancelBtnElement)===null||t===void 0?void 0:t.click()}clickSave(){var t;if(!this.editing)return;(t=this.saveBtnElement)===null||t===void 0?void 0:t.click()}async setValue(t,i={clickSave:true}){await this.clickEdit();await d();await this.inputElement.setValue(t);if(i.clickSave){await this.clickSave();await d()}}render(){return e("div",null,this.generateEditStateDOM(),this.generateReadStateDOM())}generateEditStateDOM(){return e("div",{class:this.wrapperClass,hidden:!this.editing},e("q2-input",{ref:t=>this.inputElement=t,label:this.locLabel,hideLabel:this.hideLabel,value:this.value,hints:Array.isArray(this.hints)&&this.hints.map((t=>n(t)))||undefined,errors:Array.isArray(this.errors)&&this.errors.map((t=>n(t)))||undefined,type:this.type,disabled:this.disabled,formatModifier:this.formatModifier,maxlength:this.maxlength,"test-id":"editableInput",onInput:this.inputInput,onChange:this.inputChange,onKeyDown:this.inputKeyDown,onClick:this.inputClick}),e("q2-btn",{ref:t=>this.cancelBtnElement=t,class:"cancel-edit",label:`${n("tecton.element.editableField.cancel")} ${this.locLabel}`,"hide-label":true,"test-id":"cancelButton",onClick:this.cancelClick},e("q2-icon",{type:"close"})),e("q2-btn",{ref:t=>this.saveBtnElement=t,class:"save-edit",label:`${n("tecton.element.editableField.save")} ${this.locLabel}`,"hide-label":true,"test-id":"saveButton",onClick:this.saveClick},e("q2-icon",{type:"checkmark"})))}generateReadStateDOM(){if(this.persistentLabel&&this.locLabel){return e("div",{class:this.wrapperClass,hidden:this.editing},e("dl",null,e("dt",{class:"read-state-label"},this.locLabel),e("dd",null,e("span",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())))}return e("div",{class:this.wrapperClass,hidden:this.editing},e("div",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())}generateEditBtn(){return e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${n("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"}))}get hostElement(){return s(this)}static get watchers(){return{errors:["errorsObserver"],ariaLabel:["ariaLabelObserver"],editing:["observesEditing"]}}};o.style=l;export{o as q2_editable_field};
+//# sourceMappingURL=p-2a975246.entry.js.map

package/dist/q2-tecton-elements/p-2a975246.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2EditableField","this","scheduledAfterRender","defaultValue","value","inputInput","event","stopPropagation","input","emit","detail","formattedValue","innerValue","inputChange","e","inputKeyDown","key","preventDefault","cancelClick","saveClick","inputClick","valueFromInputProp","hostElement","shadowRoot","querySelector","change","editing","name","setTimeout","errors","length","focus","editClick","locLabel","label","loc","componentWillLoad","handleAriaLabel","componentDidRender","forEach","fn","inputElement","componentDidLoad","overrideFocus","errorsObserver","focusedElement","activeElement","isInputFocused","_a","tagName","hasErrors","ariaLabelObserver","observesEditing","newValue","oldValue","push","wrapperClass","onHostElementChange","isEventFromElement","onchange","delegateFocus","clickEdit","editBtnElement","click","clickCancel","cancelBtnElement","clickSave","saveBtnElement","async","options","waitForNextPaint","setValue","render","h","generateEditStateDOM","generateReadStateDOM","class","hidden","ref","el","hideLabel","hints","Array","isArray","map","str","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","persistentLabel","generateEditBtn"],"sources":["./src/components/q2-editable-field/styles.scss?tag=q2-editable-field&encapsulation=shadow","./src/components/q2-editable-field/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input';\nimport { IFormatterValueObject } from '../q2-input/types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n    formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({\n    tag: 'q2-editable-field',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2EditableField {\n    @Prop({ reflect: true, mutable: true }) value: string = '';\n    @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n    @Prop({ reflect: true, mutable: true }) label: string = '';\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) type: Q2Input['type'];\n    @Prop({ reflect: true }) formatModifier: string;\n    @Prop({ reflect: true }) truncated: boolean;\n    @Prop({ reflect: true }) maxlength: number;\n    @Prop({ reflect: true }) persistentLabel: boolean;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop() hints: string[];\n    @Prop() errors: string[];\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    scheduledAfterRender: (() => void)[] = [];\n\n    @Element() hostElement: HTMLElement;\n    inputElement: HTMLQ2InputElement;\n    editBtnElement: HTMLQ2BtnElement;\n    cancelBtnElement: HTMLQ2BtnElement;\n    saveBtnElement: HTMLQ2BtnElement;\n\n    @State() formattedValue: string;\n    innerValue: string;\n    defaultValue: string = this.value;\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    /////// LIFECYCLE HOOKS ///////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    //////// OBSERVERS ////////\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, errors = [] } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n        const hasErrors = errors.length;\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        switch (event.detail.name) {\n            case 'save':\n                this.value = event.detail.value;\n                break;\n\n            case 'cancel':\n                this.inputElement.value = this.value;\n                break;\n        }\n\n        this.editing = event.detail.editing;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    ///////// EVENTS /////////\n\n    @Event() input: EventEmitter;\n    @Event() change: EventEmitter;\n\n    /// Methods ///\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    //////// ACTIONS /////////\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n\n        setTimeout(() => {\n            const { errors = [] } = this;\n            if (!errors.length) return;\n            this.hostElement.focus();\n        }, 1);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;\n    };\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined}\n                    errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            {this.generateEditBtn()}\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                {this.generateEditBtn()}\n            </div>\n        );\n    }\n\n    generateEditBtn() {\n        return (\n            <q2-btn\n                ref={el => (this.editBtnElement = el)}\n                class=\"begin-edit\"\n                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                hide-label\n                disabled={this.disabled}\n                test-id=\"editButton\"\n                onClick={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-55deaceb.entry.js → p-30facf35.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as a,F as e,H as o,g as r}from"./p-277dc8cd.js";import{o as n,i as s,l as c}from"./p-99ab3236.js";import{s as l,a as p}from"./p-788adb51.js";const h="*{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 #33b4ff #06C)}: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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary-l5, #61c4ff));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary-l5, #d9e1e6));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #000000))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary-l5, #f4fafe));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #000000))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";const d=class{constructor(a){t(this,a);this.click=i(this,"click",7);var e;this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;const{value:i}=t.detail;this.click.emit({value:i})};this.handleClick=async t=>{t.stopPropagation();this.popoverElement.controlElement=this.dropdownBtn;if(l(this)){const{value:i}=await p(this,t);this.click.emit({value:i})}else{await this.popoverElement.toggle()}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(i)return;t.preventDefault();this.popoverElement.controlElement=this.dropdownBtn;if(l(this,t)){const{value:i}=await p(this,t);this.click.emit({value:i})}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const a=t.relatedTarget;if((i=(a===null||a===void 0?void 0:a.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleWrapperClick=()=>{this.dropdownBtn.focus();this.dropdownBtn.click()};this.hoist=!!((e=window.Tecton)===null||e===void 0?void 0:e.useActionSheets);this.open=undefined;this.label=undefined;this.theme=undefined;this.popoverMinHeight=150;this.popoverDirection=undefined;this.popoverAlignment="right";this.optionListLabel="options";this.optionCount=undefined}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}delegateFocus(t){if(!s(t,this.hostElement))return;if(!this.optionCount)return;this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}generateHiddenElement(){return a("div",{id:"option-description",class:"sr","aria-hidden":"true"},c("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,open:i}=this;const r=["tag"];if(t)r.push("has-options");return a(o,{role:"listitem"},a("click-elsewhere",{onChange:this.onClickElsewhere},this.optionCount?a(e,null,a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{class:"tag-wrapper",ref:t=>this.dropdownBtn=t,"test-id":"btn-control",type:"button",role:"combobox",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-expanded":i?"true":"false","aria-describedby":"option-description"},a("div",{class:r.join(" ")},this.label),a("q2-icon",{type:"options"}))),this.generateHiddenElement()):a("div",{class:"tag-wrapper",onClick:t=>t.stopPropagation()},a("div",{class:r.join(" ")},this.label)),this.optionCount>0&&a("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},a("q2-option-list",{id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,type:"menu",align:"right",label:c("tecton.element.optionList.label",[this.optionListLabel]),"no-select":true},a("slot",null)))))}get hostElement(){return r(this)}};d.style=h;export{d as q2_tag};
-//# sourceMappingURL=p-55deaceb.entry.js.map
+import{r as t,c as i,h as a,F as e,H as o,g as r}from"./p-277dc8cd.js";import{o as n,i as s,l as c}from"./p-ef856249.js";import{s as l,a as p}from"./p-788adb51.js";const h="*{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 #33b4ff #06C)}: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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary-l5, #61c4ff));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary-l5, #d9e1e6));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #000000))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary-l5, #f4fafe));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #000000))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";const d=class{constructor(a){t(this,a);this.click=i(this,"click",7);var e;this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;const{value:i}=t.detail;this.click.emit({value:i})};this.handleClick=async t=>{t.stopPropagation();this.popoverElement.controlElement=this.dropdownBtn;if(l(this)){const{value:i}=await p(this,t);this.click.emit({value:i})}else{await this.popoverElement.toggle()}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(i)return;t.preventDefault();this.popoverElement.controlElement=this.dropdownBtn;if(l(this,t)){const{value:i}=await p(this,t);this.click.emit({value:i})}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const a=t.relatedTarget;if((i=(a===null||a===void 0?void 0:a.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleWrapperClick=()=>{this.dropdownBtn.focus();this.dropdownBtn.click()};this.hoist=!!((e=window.Tecton)===null||e===void 0?void 0:e.useActionSheets);this.open=undefined;this.label=undefined;this.theme=undefined;this.popoverMinHeight=150;this.popoverDirection=undefined;this.popoverAlignment="right";this.optionListLabel="options";this.optionCount=undefined}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}delegateFocus(t){if(!s(t,this.hostElement))return;if(!this.optionCount)return;this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}generateHiddenElement(){return a("div",{id:"option-description",class:"sr","aria-hidden":"true"},c("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,open:i}=this;const r=["tag"];if(t)r.push("has-options");return a(o,{role:"listitem"},a("click-elsewhere",{onChange:this.onClickElsewhere},this.optionCount?a(e,null,a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{class:"tag-wrapper",ref:t=>this.dropdownBtn=t,"test-id":"btn-control",type:"button",role:"combobox",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-expanded":i?"true":"false","aria-describedby":"option-description"},a("div",{class:r.join(" ")},this.label),a("q2-icon",{type:"options"}))),this.generateHiddenElement()):a("div",{class:"tag-wrapper",onClick:t=>t.stopPropagation()},a("div",{class:r.join(" ")},this.label)),this.optionCount>0&&a("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},a("q2-option-list",{id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,type:"menu",align:"right",label:c("tecton.element.optionList.label",[this.optionListLabel]),"no-select":true},a("slot",null)))))}get hostElement(){return r(this)}};d.style=h;export{d as q2_tag};
+//# sourceMappingURL=p-30facf35.entry.js.map

package/dist/q2-tecton-elements/p-3798ad96.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as s}from"./p-277dc8cd.js";import{l,h as o,o as r,w as n,d as a,i as c,e as h}from"./p-ef856249.js";import{s as d,a as p}from"./p-788adb51.js";const u="*{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 #33b4ff #06C)}: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.multi-select-header legend{padding:0;float:left}.multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.multi-select-header input:checked+label,.multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const v=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.scheduledAfterRender=[];this.showSelectedOptions=()=>{this.showSelected=true};this.showAllOptions=()=>{this.showSelected=false};this.onMutationObserved=()=>{const t=this.hostElement.querySelector(".custom-display-content");const e=this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');const i=!!e?e.assignedNodes().length>0:t.children.length>0;if(this.hasCustomDisplay!==i){this.hasCustomDisplay=i}};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.popoverStateChanged=({detail:{open:t}})=>{if(this.open===t)return;this.open=t;if(t&&!this.searchText)return;this.optionList.setActiveElement(null);this.inputField.focus()};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const e=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(d(this,t)){return this.executeActionSheet(t)}if(this.searchable&&!e.includes(t.key))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(t.key===" ")t.preventDefault();this.optionList.handleExternalKeydown(t)};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();this.optionList.setDefaultActiveElement()}};this.inputClickHandler=async t=>{t.stopPropagation();if(d(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;const i=!!this.value;if(i)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=e;this.input.emit({query:e})};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation();if(!this.open)return;this.closeDropdown()};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.onOptionListSlotChange=async()=>{const t=(await this.optionList.getOptions()).map((t=>t.value));if(this.multiple){this.selectedOptions=this.selectedOptions.filter((e=>t.includes(e)))}else if(!t.includes(this.value)){this.value=undefined}};this.label=undefined;this.hideLabel=undefined;this.value=undefined;this.selectedOptions=[];this.disabled=false;this.readonly=false;this.invalid=undefined;this.listLabel=l("tecton.element.select.listLabel");this.errors=undefined;this.multiple=false;this.minRows=3;this.popDirection=undefined;this.searchable=false;this.multilineOptions=false;this.optional=false;this.placeholder=undefined;this.hoist=!!((s=window.Tecton)===null||s===void 0?void 0:s.useActionSheets);this.ariaLabel=undefined;this.open=false;this.showSelected=false;this.searchText="";this.hasCustomDisplay=false;this.inputFocused=false;this.statusMessage=undefined;this.prioritizeSearch=false;this.structuredSelectedOptions=[]}componentWillLoad(){o(this);this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved();r(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null}get innerInputField(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-field")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;if(this.open&&this.searchable)return i?`${i}`:null;else return i>1?`+${i-1}`:null}get popoverMinHeight(){const{minRows:t}=this;const e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;if(!i||i==="0px")i="44px";return t*parseInt(i)}get selectedDisplay(){if(this.prioritizeSearch||this.searchText)return this.searchText;if(this.hasCustomDisplay)return"";return this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null||t===void 0?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this;const e=["q2-select-container"];if(Array.isArray(t)&&t.length>0)e.push("has-error");if(this.inputFocused)e.push("is-focused");if(this.searchable)e.push("is-searchable");return e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;if(t){this.structuredSelectedOptions=!!(e===null||e===void 0?void 0:e.length)?e.map((t=>typeof t==="string"?{value:t}:t)):[]}else{this.structuredSelectedOptions=i?[{value:i}]:[]}}ariaLabelObserver(){o(this)}valueUpdated(){if(this.multiple)return;this.clearSearchText()}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((()=>{const{multiple:e,multiSelectHeader:i,popoverElement:s}=this;const l=t&&e&&(i===null||i===void 0?void 0:i.offsetHeight)||0;if(l){s.style.setProperty("--comp-multi-select-header-height",`${l}px`)}else{s.style.removeProperty("--comp-multi-select-header-height")}}))}_togglePopover(){const{innerInputField:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open||this.disabled)return;this._togglePopover()}async closePopover(){if(!this.open||this.disabled)return;this._togglePopover()}async setValue(t,e={closePopover:true}){const i=new Set(Array.isArray(t)?t:[t]);if(!this.open){await this.openPopover();await n()}i.forEach((t=>{var e;(e=this.optionElements.find((e=>e.value===t)))===null||e===void 0?void 0:e.click()}));if(e.closePopover){await this.closePopover();await n()}}searchOptions(t){if(!this.searchable)return;const{innerInputField:e}=this;e.focus();e.dispatchEvent(new FocusEvent("focus"));e.value=t;e.dispatchEvent(new InputEvent("input"))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){if(this.readonly||this.disabled)return;if(t.target!==this.hostElement||this.hostElement.onchange)return;if(this.multiple){this.value=null;this.selectedOptions=t.detail.selectedOptions}else{this.value=t.detail.value;this.selectedOptions=[]}}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const l=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:o="",innerText:r=""}=t;const n=[o,l,r];const a=n.some((t=>{var e;return(e=t===null||t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!a;if(a)s++}));const o=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const r=i?s:e.length;this.setStatusMessage(l(o,[r]))}delegateFocus(t){const e=a(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(c(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=h(t,this.hostElement);if(e)this.closeDropdown();this.prioritizeSearch=!e&&this.searchable}handleSelectedDisplay(t){if(this.multiple)return;this.inputField.value=t.detail.display}async executeActionSheet(t){const e=await p(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:l}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:l?undefined:e,selectedOptions:l?s:undefined})}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:o,multilineOptions:r}=this;if(!o)return"";if(s===null||s===void 0?void 0:s.display)return l(s.display);if(r&&this.searchable)return this.searchText;if(r)return"";return(i=(e=(t=s===null||s===void 0?void 0:s.textContent)===null||t===void 0?void 0:t.trim())!==null&&e!==void 0?e:s===null||s===void 0?void 0:s.value)!==null&&i!==void 0?i:o}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null||e===void 0?void 0:e.display)&&l(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&l(e.display)||((t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||this.value||""}}openDropdownWithoutActiveElement(){if(this.readonly||this.disabled)return;this.optionList.setActiveElement(null);this.open=true}closeDropdown(){this.open=false;this.clearSearchText()}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}toggleDropdown(){if(this.readonly||this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}focusInput(){var t;(t=this.inputField)===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null||t===void 0?void 0:t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:l,firstSelectedOptionElement:o,prioritizeSearch:r}=this;const n=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(r||!l||n)return this.clearSelectedDisplay();if(!o||o.display)return this.clearSelectedDisplay();const a=o.firstElementChild.cloneNode(true);a.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==a.outerHTML){t.replaceChild(a,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(a);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}render(){const t=!this.searchable;return i("click-elsewhere",{class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{"aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&l(this.label)||"",value:this.selectedDisplay,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>l(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:this.readonly,placeholder:this.placeholder||undefined,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox",role:"combobox",pseudo:t,"test-id":"toggleDropdown","hide-messages":true,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":undefined},this.renderCustomDisplay()),i("div",{class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputField,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,onPopoverStateChanged:this.popoverStateChanged,block:true},i("div",{class:"popover-content",tabindex:"-1"},i("q2-option-list",{ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,"aria-label":this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",{onSlotchange:this.onOptionListSlotChange})),this.multiple&&this.visibilityToggle()))}visibilityToggle(){var t,e;const s=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;const{showSelected:o}=this;return i("div",{class:"multi-select-header",ref:t=>this.multiSelectHeader=t},i("fieldset",null,i("legend",{"aria-label":l("tecton.element.select.multiHeader.showing")},l("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!o,"aria-label":l("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},l("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:s===0,name:"viewDisplay",value:"selected","aria-label":l("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:o,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},l("tecton.element.select.multiHeader.selected",[s])))))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};v.style=u;export{v as q2_select};
+//# sourceMappingURL=p-3798ad96.entry.js.map

package/dist/q2-tecton-elements/p-3798ad96.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Select","this","scheduledAfterRender","showSelectedOptions","showSelected","showAllOptions","onMutationObserved","slotContainer","hostElement","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","onOptionListChange","event","stopPropagation","values","detail","handleSelectionChanges","popoverStateChanged","open","searchText","optionList","setActiveElement","inputField","focus","inputKeydownHandler","readonly","disabled","keysForOptionListToHandle","shouldShowActionSheet","executeActionSheet","searchable","includes","key","shouldClearSearchText","clearSearchText","preventDefault","handleExternalKeydown","visibilityToggleKeyDown","isShiftTab","shiftKey","isRadioControlKey","setDefaultActiveElement","inputClickHandler","async","toggleDropdown","focusInput","inputInputHandler","eventValue","value","shouldClearValue","clearValue","openDropdownWithoutActiveElement","prioritizeSearch","input","emit","query","inputFocusHandler","inputFocused","inputBlurHandler","inputChangeHandler","clickedElsewhere","target","localName","closeDropdown","onCustomDisplayClick","onOptionListSlotChange","options","getOptions","map","option","multiple","selectedOptions","filter","undefined","loc","_a","window","Tecton","useActionSheets","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","disconnectedCallback","disconnect","innerInputField","_b","badgeValue","optionsLength","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","firstSelectedValue","firstSelectedOptionElement","optionElements","find","Array","from","querySelectorAll","wrapperClasses","errors","classes","isArray","push","join","structuredSelectedOptions","ariaLabelObserver","valueUpdated","newValue","oldValue","element","multiline","openChanged","isOpen","multiSelectHeader","popoverElement","height","offsetHeight","style","setProperty","removeProperty","_togglePopover","click","dispatchEvent","FocusEvent","closePopover","valuesSet","Set","openPopover","waitForNextPaint","searchOptions","InputEvent","keydownHandler","onHostElementChange","onchange","onHostElementInput","oninput","trim","toLocaleLowerCase","matchedCount","hidden","title","firstElementChild","tagName","display","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","handleSelectedDisplay","result","showActionSheetList","changeDetails","selectedOptionValues","change","_c","textContent","message","clearTimeout","statusMessageTimer","statusMessage","remove","namedSlot","hasNoValue","selectionClone","cloneNode","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","renderCustomDisplay","hasSelectedDisplay","h","name","render","showAsPseudo","class","onChange","role","ref","el","label","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","pseudo","iconRight","onClick","onInput","onKeyDown","onFocus","onBlur","badgeTheme","optionsDropdown","controlElement","direction","popDirection","onPopoverStateChanged","block","tabindex","type","id","listLabel","onSlotchange","visibilityToggle","selectedOptionsCount","checked","htmlFor"],"sources":["./src/components/q2-select/styles.scss?tag=q2-select&encapsulation=shadow","./src/components/q2-select/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.multi-select-header {\n    padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    background: var(--app-white);\n    display: flex;\n    gap: var-list(--app-scale-2x, 10px);\n    align-items: center;\n\n    fieldset {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n    }\n\n    legend {\n        padding: 0;\n        float: left;\n    }\n\n    label {\n        cursor: pointer;\n        padding: var-list(\n            var-prefixer(select-multi-select-option-padding),\n            var-prefixer(btn-badge-padding),\n            unquote('2px 5px')\n        );\n        font-size: var-list(\n            var-prefixer(select-multi-select-option-font-size),\n            var-prefixer(btn-badge-font-size),\n            inherit\n        );\n        border-radius: var-list(\n            var-prefixer(select-multi-select-option-radius),\n            var-prefixer(btn-badge-border-radius),\n            --app-border-radius-1,\n            3px\n        );\n        background: var-list(\n            --tct-select-multi-select-option-background,\n            var-prefixer(select-multi-select-option-bg),\n            --tct-badge-background,\n            var-prefixer(btn-badge-bg),\n            transparent\n        );\n        color: var-list(var-prefixer(select-multi-select-option-color), var-prefixer(btn-badge-font-color), inherit);\n\n        &:hover {\n            background: var-list(\n                --tct-select-multi-select-option-hover-background,\n                var-prefixer(select-multi-select-option-hover-background-color),\n                var-prefixer(btn-badge-hover-bg),\n                var-prefixer(gray-14),\n                --app-gray-l3,\n                #f2f2f2\n            );\n            color: var-list(\n                --tct-select-multi-select-option-hover-color,\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-hover-font-color),\n                var-prefixer(gray-5),\n                --app-gray-d2,\n                #404040\n            );\n        }\n    }\n\n    input {\n        &:checked + label {\n            &,\n            &:enabled:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-active-background,\n                    var-prefixer(select-multi-select-option-active-background-color),\n                    var-prefixer(btn-primary-bg),\n                    #2e2e2e\n                );\n                color: var-list(\n                    var-prefixer(select-multi-select-option-active-color),\n                    var-prefixer(btn-primary-font-color),\n                    --app-white,\n                    #ffffff\n                );\n            }\n        }\n\n        &:disabled + label {\n            opacity: var-list(\n                var-prefixer(select-multi-select-option-active-color),\n                var-prefixer(btn-disabled-opacity),\n                --app-disabled-opacity,\n                0.4\n            );\n            cursor: not-allowed;\n        }\n\n        &:focus + label {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n    tag: 'q2-select',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Select implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ mutable: true }) selectedOptions: string[] = [];\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) invalid: boolean;\n    @Prop() listLabel: string = loc('tecton.element.select.listLabel');\n    @Prop() errors: string[];\n    @Prop({ reflect: true }) multiple: boolean = false;\n    @Prop() minRows: number = 3;\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n    @Prop({ reflect: true }) searchable: boolean = false;\n    @Prop({ reflect: true }) multilineOptions: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() open: boolean = false;\n    @State() showSelected: boolean = false;\n    @State() searchText: string = '';\n    @State() hasCustomDisplay: boolean = false;\n    @State() inputFocused: boolean = false;\n    @State() statusMessage: string;\n    @State() prioritizeSearch: boolean = false;\n    @State() structuredSelectedOptions: IOptionValue[] = [];\n\n    inputField?: HTMLQ2InputElement;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    multiSelectHeader?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    mutationObserver: MutationObserver;\n\n    /// Lifecycle Hooks ///\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    /// Watchers ///\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen) {\n        this.scheduledAfterRender.push(() => {\n            const { multiple, multiSelectHeader, popoverElement } = this;\n            const height = (isOpen && multiple && multiSelectHeader?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-multi-select-header-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-multi-select-header-height');\n            }\n        });\n    }\n\n    /// Events ///\n    @Event() change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n    @Event() input: EventEmitter;\n\n    /// Methods ///\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /// Listeners ///\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    /// Helpers ///\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    onMutationObserved = () => {\n        const slotContainer = this.hostElement.querySelector('.custom-display-content');\n        const displaySlot = this.hostElement.shadowRoot.querySelector<HTMLSlotElement>(\n            'slot[name=\"q2-select-display\"]'\n        );\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    statusMessageTimer: NodeJS.Timeout;\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    /// Event handlers ///\n    popoverStateChanged = ({ detail: { open } }: CustomEvent<{ open: boolean }>) => {\n        if (this.open === open) return;\n        this.open = open;\n        if (open && !this.searchText) return;\n        this.optionList.setActiveElement(null);\n        this.inputField.focus();\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n        if (shouldShowActionSheet(this, event)) {\n            return this.executeActionSheet(event);\n        }\n        if (this.searchable && !keysForOptionListToHandle.includes(event.key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (event.key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n        if (!this.open) return;\n        this.closeDropdown();\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    /// DOM ///\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    onOptionListSlotChange = async () => {\n        const options = (await this.optionList.getOptions()).map(option => option.value);\n        if (this.multiple) {\n            // allow only intersectioned value\n            this.selectedOptions = this.selectedOptions.filter(option => options.includes(option));\n        } else if (!options.includes(this.value)) {\n            this.value = undefined;\n        }\n    };\n\n    render() {\n        const showAsPseudo = !this.searchable;\n\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    role=\"combobox\"\n                    pseudo={showAsPseudo}\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.optionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    optionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputField}\n                open={this.open}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                onPopoverStateChanged={this.popoverStateChanged}\n                block\n            >\n                <div\n                    class=\"popover-content\"\n                    tabindex=\"-1\"\n                >\n                    <q2-option-list\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        aria-label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot onSlotchange={this.onOptionListSlotChange} />\n                    </q2-option-list>\n                    {this.multiple && this.visibilityToggle()}\n                </div>\n            </q2-popover>\n        );\n    }\n\n    visibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div\n                class=\"multi-select-header\"\n                ref={el => (this.multiSelectHeader = el)}\n            >\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-2325975a.entry.js → p-46287c02.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,h as o}from"./p-277dc8cd.js";import{l as n}from"./p-99ab3236.js";const t="*{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 #33b4ff #06C)}: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:inline}";const e=class{constructor(o){i(this,o);this.value=undefined;this.substitutions=undefined}render(){return o("span",null,n(this.value,this.substitutions))}};e.style=t;export{e as q2_loc};
-//# sourceMappingURL=p-2325975a.entry.js.map
+import{r as i,h as o}from"./p-277dc8cd.js";import{l as n}from"./p-ef856249.js";const t="*{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 #33b4ff #06C)}: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:inline}";const e=class{constructor(o){i(this,o);this.value=undefined;this.substitutions=undefined}render(){return o("span",null,n(this.value,this.substitutions))}};e.style=t;export{e as q2_loc};
+//# sourceMappingURL=p-46287c02.entry.js.map

package/dist/q2-tecton-elements/{p-2bf5a3bc.entry.js → p-47c60d4a.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,g as i}from"./p-277dc8cd.js";import{o as e,i as r}from"./p-99ab3236.js";const a='*{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 #33b4ff #06C)}: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:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';const n=class{constructor(o){t(this,o);this.animationEndCount=0;this.label=undefined;this.block=undefined;this.multiline=undefined;this.persistent=undefined;this.immediate=undefined;this.focusable=false;this.position="n";this.focusClass=undefined}componentDidLoad(){e(this.hostElement)}get shouldBeVisible(){if(this.persistent)return true;return this.hostElement.matches(":hover, :focus-within")}checkFocusClass(){if(!this.shouldBeVisible)return;const t=!!this.findFocusVisibleElement(document.activeElement);this.focusClass=t?"has-keyboard-focus":"has-generic-focus";if(t)return}hideTooltip(){if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}animationEndHandler(){this.animationEndCount=this.animationEndCount+1;const{focusClass:t,animationEndCount:o}=this;if(t==="has-generic-focus-out"||t==="has-generic-focus"&&o===4){this.focusClass=null;this.animationEndCount=0}}findFocusVisibleElement(t){if(!t)return;if(t.shadowRoot)t=this.findFocusVisibleElement(t.shadowRoot.activeElement);return(t===null||t===void 0?void 0:t.matches(":focus-visible"))?t:null}keyUpHandler(t){switch(t.key){case"Esc":case"Escape":this.hideTooltip();break}}focusCaptureHandler(){this.checkFocusClass()}focusHandler(t){if(!r(t,this.hostElement))return;if(!this.focusable)return;this.tooltipElement.focus()}focusOutHandler(){if(this.shouldBeVisible)return;if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}render(){const{focusClass:t}=this;const i=["tooltip"];if(t)i.push(t);return this.label?o("div",{tabindex:this.focusable?0:undefined,ref:t=>this.tooltipElement=t,class:i.join(" "),"aria-label":this.label,onAnimationEnd:()=>this.animationEndHandler(),role:"tooltip","test-id":"tooltipContainer"},o("slot",null)):o("slot",null)}get hostElement(){return i(this)}};n.style=a;export{n as q2_tooltip};
-//# sourceMappingURL=p-2bf5a3bc.entry.js.map
+import{r as t,h as o,g as i}from"./p-277dc8cd.js";import{o as e,i as r}from"./p-ef856249.js";const a='*{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 #33b4ff #06C)}: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:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';const n=class{constructor(o){t(this,o);this.animationEndCount=0;this.label=undefined;this.block=undefined;this.multiline=undefined;this.persistent=undefined;this.immediate=undefined;this.focusable=false;this.position="n";this.focusClass=undefined}componentDidLoad(){e(this.hostElement)}get shouldBeVisible(){if(this.persistent)return true;return this.hostElement.matches(":hover, :focus-within")}checkFocusClass(){if(!this.shouldBeVisible)return;const t=!!this.findFocusVisibleElement(document.activeElement);this.focusClass=t?"has-keyboard-focus":"has-generic-focus";if(t)return}hideTooltip(){if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}animationEndHandler(){this.animationEndCount=this.animationEndCount+1;const{focusClass:t,animationEndCount:o}=this;if(t==="has-generic-focus-out"||t==="has-generic-focus"&&o===4){this.focusClass=null;this.animationEndCount=0}}findFocusVisibleElement(t){if(!t)return;if(t.shadowRoot)t=this.findFocusVisibleElement(t.shadowRoot.activeElement);return(t===null||t===void 0?void 0:t.matches(":focus-visible"))?t:null}keyUpHandler(t){switch(t.key){case"Esc":case"Escape":this.hideTooltip();break}}focusCaptureHandler(){this.checkFocusClass()}focusHandler(t){if(!r(t,this.hostElement))return;if(!this.focusable)return;this.tooltipElement.focus()}focusOutHandler(){if(this.shouldBeVisible)return;if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}render(){const{focusClass:t}=this;const i=["tooltip"];if(t)i.push(t);return this.label?o("div",{tabindex:this.focusable?0:undefined,ref:t=>this.tooltipElement=t,class:i.join(" "),"aria-label":this.label,onAnimationEnd:()=>this.animationEndHandler(),role:"tooltip","test-id":"tooltipContainer"},o("slot",null)):o("slot",null)}get hostElement(){return i(this)}};n.style=a;export{n as q2_tooltip};
+//# sourceMappingURL=p-47c60d4a.entry.js.map