q2-tecton-elements 1.54.1 → 1.54.3

package/dist/q2-tecton-elements/q2-dropdown.entry.js

@@ -18,6 +18,9 @@ const f = class {
     };
     this.onClickElsewhere = t => {
       const e = t.target;
+      if (e.localName === "q2-option-list") {
+        t.stopPropagation();
+      }
       if (e.localName === "click-elsewhere") {
         t.stopPropagation();
         const {popoverElement: e} = this;
@@ -299,12 +302,12 @@ const f = class {
   render() {
     const t = this.toggleButtonProps;
     return e("click-elsewhere", {
-      key: "1c2b98aded57142318897faeba8985f9e45917d9",
+      key: "35405b57c6680f44ce21156a578cea6d96c063b8",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
     }, e("q2-btn", {
-      key: "6792936333c85e59ee2d2c4cdc309fc0950e76d7",
+      key: "8ec87dae4f675d7764d91e91a3e37f704ad73d07",
       ref: t => this.controlElement = t,
       class: t.className,
       onClick: this.onToggleClick,
@@ -331,7 +334,7 @@ const f = class {
     }) : " ", this.label && !this.hideLabel && e("span", {
       class: "dropdown-button-text"
     }, c(this.label)))), e("q2-popover", {
-      key: "530d3aae2d75ad09b4deba136cff0997c8a3e30b",
+      key: "c71cdf5198dc87f720828d1b9623eadde266d118",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
@@ -343,7 +346,7 @@ const f = class {
       mode: this.popoverMode || undefined,
       block: this.block
     }, e("q2-option-list", {
-      key: "b5c7644d9a70b71253e1641d4b990cc60684a2ec",
+      key: "42b372ea1203e50d15253590f4b8454df5b4f6d7",
       onPopoverState: this.onPopoverState,
       id: "option-list",
       ref: t => this.optionList = t,
@@ -351,7 +354,7 @@ const f = class {
       label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": true
     }, e("slot", {
-      key: "9dad30978c5518b68e2001ba8d083541edf0b7b4"
+      key: "50f04d7a1f74de7cf41b74d4b00b99b9a58eec8d"
     }))));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-dropdown.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","open","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","onPopoverState","detail","handleFocusOut","relatedTarget","_a","contains","hostElement","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","showActionSheetList","dispatchEvent","FocusEvent","navigateTo","featureName","moduleName","queryParams","_b","TectonElements","call","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","contextIdParamName","action","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","overpanelPath","params","undefined","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n    optionList: HTMLQ2OptionListElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _clickItem(value: string) {\n        if (!value) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        itemBtn.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\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    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","open","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","onPopoverState","detail","handleFocusOut","relatedTarget","_a","contains","hostElement","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","showActionSheetList","dispatchEvent","FocusEvent","navigateTo","featureName","moduleName","queryParams","_b","TectonElements","call","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","contextIdParamName","action","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","overpanelPath","params","undefined","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n    optionList: HTMLQ2OptionListElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _clickItem(value: string) {\n        if (!value) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        itemBtn.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\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    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-file-picker.entry.js

@@ -2,7 +2,7 @@ import { r as t, c as e, h as i, F as r, g as o } from "./index-7a5365e2.js";
 
 import { l as s, e as a } from "./index-504f1a9e.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{display:block}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4D4D4D));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #E8F5FC));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #BEE1F6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0D0D0D));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0D0D0D));--tct-btn-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0D0D0D));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0D0D0D));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0D0D0D))}[slot=action]{display:flex;align-items:center}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{display:block}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-only-intent-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
 
 const l = n;
 
@@ -71,7 +71,8 @@ const c = class {
       label: s("tecton.element.filePicker.browse"),
       onTctClick: () => this.launchFileBrowser(),
       variant: "inline",
-      "test-id": "browse-link"
+      "test-id": "browse-link",
+      href: "javascript:void(0)"
     }), s("tecton.element.filePicker.orDragFilesHere", [ this.maxFiles ])))) || i("div", {
       class: "browse",
       "test-id": "browse"

package/dist/q2-tecton-elements/q2-file-picker.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(.75) scaleY(.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(.75) scaleY(.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    display: block;\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4D4D4D);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0D0D0D);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #E8F5FC);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #BEE1F6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n  animation-fill-mode: both;\n  animation-play-state: running;\n  animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n  animation: shrinkToCenterFadeOut 0.1s ease-out;\n  animation-play-state: running;\n  animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: 4px;\n    --tct-btn-neutral-text-active-font-color: #{var-list(--tct-file-picker-item-close-btn-active-color, --t-gray-1, #0D0D0D)};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0D0D0D)};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0D0D0D)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(--tct-file-picker-item-close-btn-hover-focus-ring-color, --t-gray-1, #0D0D0D)};\n    --tct-btn-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0D0D0D)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(--tct-file-picker-item-border-color, --t-gray-8, #808080)};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0D0D0D)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0D0D0D);\n    // cursor: pointer;\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0D0D0D);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0D0D0D);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0D0D0D)};\n    }\n}\n\n[slot=\"action\"] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n    invalidFiles: {\n        file: File;\n        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n    }[];\n    validFiles: File[];\n};\n\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: {\n        file: File;\n        status: FileStatus;\n        toBeRemoved?: boolean;\n    }[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of objects representing the status of the files being uploaded.\n     * Each object should have a `name` property (the file name) and a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed' or 'uploaded'.\n     */\n    @Prop({ reflect: true })\n    status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n    /**\n     * Returns an array of File objects representing the files selected by the\n     * user. If no files are selected, the value is an empty array.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: { name: string; status: FileStatus }[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(status: FileStatus, size: number) {\n        switch (status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size=\"medium\"\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    multiple\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"bullet\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading class=\"file-item-loading\"></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","href","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    display: block;\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n    animation-fill-mode: both;\n    animation-play-state: running;\n    animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n    animation: shrinkToCenterFadeOut 0.1s ease-out;\n    animation-play-state: running;\n    animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: 4px;\n    --tct-btn-neutral-text-active-font-color: #{var-list(\n            --tct-file-picker-item-close-btn-active-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-hover-focus-ring-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-icon-only-intent-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n            --tct-file-picker-item-border-color,\n            --t-gray-8,\n            #808080\n        )};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n    // cursor: pointer;\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n    }\n}\n\n[slot='action'] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n    invalidFiles: {\n        file: File;\n        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n    }[];\n    validFiles: File[];\n};\n\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: {\n        file: File;\n        status: FileStatus;\n        toBeRemoved?: boolean;\n    }[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of objects representing the status of the files being uploaded.\n     * Each object should have a `name` property (the file name) and a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed' or 'uploaded'.\n     */\n    @Prop({ reflect: true })\n    status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n    /**\n     * Returns an array of File objects representing the files selected by the\n     * user. If no files are selected, the value is an empty array.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: { name: string; status: FileStatus }[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(status: FileStatus, size: number) {\n        switch (status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                        href=\"javascript:void(0)\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size=\"medium\"\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    multiple\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"bullet\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading class=\"file-item-loading\"></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.54.1",
+    "version": "1.54.3",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -36,7 +36,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.54.1",
+        "q2-tecton-common": "1.54.3",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -61,5 +61,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "d855734a979ef757c8d2a7dd8f7e69224c9fa517"
+    "gitHead": "b57d3b210d566bbae7877ca19d9839e16b3d16a6"
 }