q2-tecton-elements 1.47.0 → 1.47.2

package/dist/types/components/q2-pagination/q2-pagination.d.ts

@@ -0,0 +1,60 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Pagination implements ComponentInterface {
+    /** Determines whether the component uses the dynamic resizing behavior. */
+    autoSize: boolean;
+    /** The total number of records to paginate. */
+    total: number;
+    /** The current page that is being displayed. */
+    page: number;
+    /**
+     * The number of pages that can be displayed.
+     * @info
+     * Only referenced when `pagesOnly` is true.
+     */
+    pages: number;
+    /** Indicates to only display the current and total pages. */
+    pagesOnly: boolean;
+    /** The total number of records displayed on each page. */
+    perPage: number;
+    /** The list of perPage to operate pagination. e.g.) [10, 25, 50] */
+    perPageIncrements: number[];
+    /** Indicates to only display the current and total records. */
+    recordsOnly: boolean;
+    /** Description of the record type to be displayed alongside the record count. */
+    recordType: string;
+    /** Indicates the horizontal alignment of children elements */
+    alignment: string;
+    hostElement: HTMLElement;
+    /**
+     * Emitted when the page is changed.
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        page: number;
+    }>;
+    isSmall: boolean;
+    inputField: HTMLQ2InputElement;
+    containerElement: HTMLElement;
+    containerWidth: number;
+    resizeObserver: ResizeObserver;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    manageResizeObserver(): void;
+    onHostElementFocus(event: any): void;
+    get isFullViewHidden(): boolean;
+    get pageWithDefault(): number;
+    get perPageWithDefault(): number;
+    get totalWithDefault(): number;
+    get recordTypeWithDefault(): string;
+    get currentRange(): string;
+    get nextRange(): string;
+    get prevRange(): string;
+    get totalPages(): number;
+    removeResizeObserver(): void;
+    handlePageChange: (page: number) => void;
+    handlePerPageChange: (event: CustomEvent) => void;
+    checkSize: () => void;
+    renderPerPage(): any;
+    render(): any;
+}

package/dist/types/components/q2-pill/q2-pill.d.ts

@@ -0,0 +1,102 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { IOptionValue } from '../q2-option-list/q2-option-list';
+export declare class Q2Pill implements ComponentInterface {
+    /** Determine if the elements is in the selected state, with values. */
+    active: boolean;
+    /** Indicates the pill cannot be focused or interacted with. */
+    disabled: boolean;
+    /** Indicates that the pill has no border */
+    borderless: boolean;
+    /**
+     * Instructs the component to use the action sheet workflow for displaying its options.
+     *
+     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
+     */
+    hoist: boolean;
+    /**
+     * The text that populates the label.
+     * @localizable
+     */
+    label: string;
+    /**
+     * The maximum number of characters to display before ellipcizing.
+     * @info
+     * Limitless by default.
+     */
+    maxLength: number;
+    /**
+     * Enables the multi-select ability for the dropdown.
+     * @info
+     * Only applicable when options are provided.
+     */
+    multiple: boolean;
+    /** Determine whether the popover is open or closed. */
+    open: boolean;
+    /** Determines the label that is applied to the option list for accessibility purposes. */
+    optionListLabel: string;
+    /**
+     * Force the direction of the popover dropdown when it opens.
+     * If no value is passed, the component will auto-detect the direction based on available space.
+     */
+    popoverDirection: 'up' | 'down';
+    /** Aligns the popover dropdown to the left or right side of the input field. */
+    popoverAlignment: 'left' | 'right';
+    /** @deprecated */
+    popoverMinHeight: number;
+    /** A list of the selected options on the element. */
+    selectedOptions: IOptionValue[];
+    /** The color of the element when in the active state. */
+    theme: 'primary' | 'secondary' | 'tertiary';
+    /** The value emitted when the component is selected. */
+    value: string;
+    optionCount: number;
+    selectedOptionElements: HTMLQ2OptionElement[];
+    hostElement: HTMLElement;
+    /**
+     * Emitted when the pill is clicked or the selected options change.
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        value: string;
+        values: IOptionValue[];
+        active: boolean;
+    }>;
+    scheduledAfterRender: (() => void)[];
+    primaryBtn: HTMLButtonElement;
+    primaryBtnWrapper: HTMLElement;
+    optionList: HTMLQ2OptionListElement;
+    mutationObserver: MutationObserver;
+    popoverElement: HTMLQ2PopoverElement;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    get buttonContent(): string;
+    get truncatedButtonContent(): string;
+    syncValueProperties: () => void;
+    getOption: (value: string) => Promise<HTMLQ2OptionElement>;
+    updateSelectedOptionElements: () => Promise<void>;
+    determineOptionCount: () => void;
+    executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
+    handleSelectionChanges(changeDetails: {
+        value?: string;
+        values?: IOptionValue[];
+    }): Promise<void>;
+    clearSelectedOptions: () => void;
+    valueChanged(newValue: any): Promise<void>;
+    selectedOptionsChanged(newValue: any): void;
+    delegateFocus(event: FocusEvent): void;
+    popoverStateHandler({ detail: { open } }: CustomEvent<{
+        open: boolean;
+    }>): void;
+    handleSelectedDisplay(): void;
+    handleClick: (event: MouseEvent) => Promise<void>;
+    handleKeydown: (event: KeyboardEvent) => Promise<void>;
+    handleButtonFocusout: (event: FocusEvent) => Promise<void>;
+    handleChange: (event: any) => void;
+    handleWrapperClick: () => void;
+    onClickElsewhere: (event: CustomEvent) => void;
+    generateIcon(): any;
+    generateHiddenElement(): any;
+    render(): any;
+}

package/dist/types/components/q2-popover/q2-popover.d.ts

@@ -31,8 +31,8 @@ export declare class Q2Popover implements ComponentInterface {
      * The number of pixels to leave between the popover and the edge of the viewport
      */
     displayBuffer: number;
-    /** remove when Popover API is supported in iOS */
     orientationChanged: boolean;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     toggle(): Promise<void>;
@@ -42,14 +42,16 @@ export declare class Q2Popover implements ComponentInterface {
     popoverStateHandler(event: CustomEvent<{
         open: boolean;
     }>): void;
-    get actualDirection(): 'up' | 'down' | undefined;
+    get providedDirection(): 'up' | 'down' | undefined;
     get isModule(): boolean;
+    get supportsPopoverAPI(): boolean;
     handleMinHeight: () => void;
+    handlePopoverToggleEvent: (event: ToggleEvent) => void;
     viewPortChanged: () => void;
     viewPortOrientationChanged: () => void;
     addViewportListeners(): void;
     removeViewportListeners(): void;
-    setFixedCSSProperties: () => Promise<void>;
+    setPopoverAPICSSProperties: () => Promise<void>;
     setAbsoluteCSSProperties: () => Promise<void>;
     clearCSSProperties(): void;
     setDirectionAndShow(direction: 'up' | 'down'): void;

package/dist/types/components/q2-select/q2-select.d.ts

@@ -0,0 +1,239 @@
+/// <reference types="node" />
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+import { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from "../../components";
+import { IOptionValue } from '../q2-option-list/q2-option-list';
+export declare class Q2Select implements ComponentInterface {
+    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */
+    disabled: boolean;
+    /**
+     * The presence of `errors` will mark the field as invalid, putting it into an error state.
+     * @localizable
+     */
+    errors: string[];
+    /**
+     * Hide's the field's `<label>` element from view.
+     * @warning
+     * Only use when a visible label is impractical.
+     */
+    hideLabel: boolean;
+    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */
+    clearable: boolean;
+    /**
+     * Instructs the component to use the action sheet workflow for displaying its options.
+     *
+     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
+     * @warning
+     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,
+     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.
+     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/ui/q2-card/) component since its styling is managed by Tecton.
+     */
+    hoist: boolean;
+    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */
+    invalid: boolean;
+    /**
+     * The text that will be used as the label for the field.
+     * @localizable
+     */
+    label: string;
+    /**
+     * Determines the label that is applied to the option list for accessibility purposes.
+     * @localizable
+     */
+    listLabel: string;
+    /** The minimum number of rows the component will try to display below or above the component when opened. */
+    minRows: number;
+    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */
+    multilineOptions: boolean;
+    /** Enables multi-select functionality. */
+    multiple: boolean;
+    /** Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`. */
+    optional: boolean;
+    /**
+     * Text that appears within the field when it is blurred and empty.
+     * Placeholder text disappears when the user selects an option.
+     * @localizable
+     */
+    placeholder: string;
+    /** @deprecated */
+    popDirection: 'up' | 'down';
+    /**
+     * Determines the display mode of the popover.
+     *
+     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+     *
+     * @info
+     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover
+     * when nested inside of elements with transform properties. This will be removed once the popover API is available
+     * for use.
+     */
+    popoverMode: 'legacy';
+    /**
+     * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable.
+     * Takes priority over `optional` if both are `true`.
+     */
+    readonly: boolean;
+    /** Enables search functionality. */
+    searchable: boolean;
+    /**
+     * Each item in this array should correspond to the value of a `q2-option` element.
+     * This property is only relevant for `multiple` (i.e., multi-select) implementations.
+     */
+    selectedOptions: string[];
+    /**
+     * The current value for the select. This should correspond to the value of a nested q2-option element.
+     * This property is only relevant for single-select implementations.
+     */
+    value: string;
+    /** @deprecated */
+    ariaLabel: string;
+    hostElement: HTMLElement;
+    open: boolean;
+    showSelected: boolean;
+    searchText: string;
+    hasCustomDisplay: boolean;
+    hasPopoverTop: boolean;
+    hasPopoverBottom: boolean;
+    inputFocused: boolean;
+    statusMessage: string;
+    prioritizeSearch: boolean;
+    structuredSelectedOptions: IOptionValue[];
+    inputField?: HTMLQ2InputElement;
+    optionList: HTMLQ2OptionListElement;
+    popoverElement?: HTMLQ2PopoverElement;
+    popoverTopContainer?: HTMLDivElement;
+    scheduledAfterRender: (() => void)[];
+    mutationObserver: MutationObserver;
+    originalSearchable: boolean;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    get isModule(): boolean;
+    get innerInputField(): HTMLInputElement | HTMLButtonElement;
+    get innerInputContainer(): HTMLElement;
+    get badgeValue(): string;
+    get popoverMinHeight(): number;
+    get selectedDisplay(): string;
+    get selectedDisplaySlot(): HTMLElement;
+    get firstSelectedValue(): string;
+    get firstSelectedOptionElement(): HTMLQ2OptionElement;
+    get optionElements(): HTMLQ2OptionElement[];
+    get wrapperClasses(): string;
+    buildStructuredSelectedOptions(): void;
+    ariaLabelObserver(): void;
+    valueUpdated(): void;
+    handleMultilineOptionsUpdate(newValue: any, oldValue: any): void;
+    openChanged(isOpen: boolean): void;
+    /**
+     * Emitted when an option is selected or deselected.
+     *
+     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property
+     * will contain the selected option values.
+     *
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        value: string;
+        selectedOptions: string[];
+    }>;
+    /**
+     * Emitted when the input value changes.
+     *
+     * Requires the `searchable` prop to be set to `true`.
+     */
+    input: EventEmitter<{
+        query: string;
+    }>;
+    _togglePopover(): void;
+    /**
+     * Emulates clicking the `<input>` to display the popover if it is hidden.
+     *
+     * @testOnly
+     */
+    openPopover(): Promise<void>;
+    /**
+     * Emulates clicking the `<input>` to hide the popover if it is visible.
+     *
+     * @testOnly
+     */
+    closePopover(): Promise<void>;
+    /**
+     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).
+     *
+     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed
+     * after the option(s) are selected.
+     *
+     * @testOnly
+     */
+    setValue(values: string | string[], options?: {
+        closePopover?: boolean;
+    }): Promise<void>;
+    /**
+     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
+     *
+     * @warning
+     * Only applicable when the input is searchable.
+     *
+     * @testOnly
+     */
+    searchOptions(query: string): void;
+    keydownHandler(event: KeyboardEvent): void;
+    onHostElementChange(event: CustomEvent<{
+        value: string;
+        selectedOptions: string[];
+    }>): void;
+    onClearHandler(): void;
+    onHostElementInput(event: CustomEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    handleFocusout(event: FocusEvent): void;
+    handleSelectedDisplay(event: CustomEvent): void;
+    executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
+    handleSelectionChanges(changeDetails: {
+        value?: string;
+        values?: IOptionValue[];
+    }): void;
+    initEventListeners: () => void;
+    initMutationObserver: () => void;
+    showSelectedOptions: () => void;
+    showAllOptions: () => void;
+    clearValue(): void;
+    calculateMultiSelectSelectedDisplay(): string;
+    calculateSingleSelectSelectedDisplay(): string;
+    onMutationObserved: () => void;
+    onOptionListChange: (event: Q2OptionListCustomEvent<{
+        value: string;
+        values: IOptionValue[];
+    }>) => void;
+    openDropdownWithoutActiveElement(): void;
+    closeDropdown(): void;
+    destroyEventListeners: () => void;
+    clearSearchText(): void;
+    toggleDropdown(): void;
+    focusInput(): void;
+    handleOptionListExternalKeydown(event: KeyboardEvent): void;
+    handleOrientationChange: () => void;
+    statusMessageTimer: NodeJS.Timeout;
+    setStatusMessage(message: any): void;
+    checkSelectedOptions(): void;
+    clearSelectedDisplay(): void;
+    checkSelectedDisplay(): void | HTMLElement;
+    checkSelectedDisplayHeight(): void;
+    onPopoverState: ({ detail: { open, action }, }: CustomEvent<{
+        open: boolean;
+        action: 'close' | 'select' | 'open';
+    }>) => void;
+    inputKeydownHandler: (event: KeyboardEvent) => Promise<void>;
+    shouldClearSearchText(event: KeyboardEvent): boolean;
+    visibilityToggleKeyDown: (event: KeyboardEvent) => void;
+    inputClickHandler: (event: MouseEvent) => Promise<void>;
+    inputInputHandler: (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => void;
+    inputFocusHandler: () => void;
+    inputBlurHandler: () => void;
+    inputChangeHandler: (event: Event) => void;
+    clickedElsewhere: (event: CustomEvent) => void;
+    onCustomDisplayClick: (event: MouseEvent) => void;
+    renderCustomDisplay(): any;
+    render(): any;
+    optionsDropdown(): any;
+    visibilityToggle(): any;
+}

package/dist/types/components/q2-stepper/q2-stepper.d.ts

@@ -0,0 +1,52 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Stepper implements ComponentInterface {
+    /** The currently selected step. */
+    currentStep: number;
+    /**
+     * Used to determine the number of steps in the stepper.
+     * @private
+     */
+    stepCount: number;
+    /**
+     * The last step the user may navigate to.
+     * @info
+     * Will be managed automatically if not provided.
+     */
+    lastEnabledStep: number;
+    hostElement: HTMLElement;
+    /**
+     * Emitted when the selected step changes.
+     * @legacyEvent
+     */
+    change: EventEmitter;
+    contentChangeTriggerCount: number;
+    scrollEnabled: boolean;
+    showScrollLeft: boolean;
+    showScrollRight: boolean;
+    listElement: HTMLUListElement;
+    resizeObserver: ResizeObserver;
+    scheduledAfterRender: (() => void)[];
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    currentStepChanged(stepNumber: number): void;
+    defaultChangeHandler(event: CustomEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    statusChangeHandler(event: CustomEvent): void;
+    contentChangeHandler(): void;
+    get allPanes(): NodeListOf<HTMLQ2StepperPaneElement>;
+    onSlotChange: () => void;
+    onScrollBtnClick: (direction: 'left' | 'right') => void;
+    onStepClick: (event: any, selectedStep: number) => void;
+    onStepKeyDown: (event: KeyboardEvent, stepNumber: number) => void;
+    showStep(stepNumber: number): void;
+    checkForPanes: () => void;
+    checkScrollState: () => void;
+    resizeIframe(): void;
+    showStepPane(stepNumber: number): void;
+    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean): void;
+    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label'): string;
+    renderStepBtn(stepIndex: number): any;
+    render(): any;
+}

package/dist/types/components/q2-stepper-vertical/q2-stepper-vertical.d.ts

@@ -0,0 +1,62 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+interface IBaseStructuredPane {
+    id: string;
+    label: string;
+    description: string;
+    isActive: boolean;
+    status: string;
+}
+interface IStructuredPane extends IBaseStructuredPane {
+    children: IBaseStructuredPane[];
+}
+export declare class Q2StepperVertical implements ComponentInterface {
+    /** The `id` of the currently selected `q2-stepper-pane`. */
+    currentStepId: string;
+    hostElement: HTMLElement;
+    /**
+     * Emitted when the selected step changes.
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        selectedStep: HTMLQ2StepperPaneElement;
+        selectedStepId: string;
+        currentStepId: string;
+    }>;
+    structuredPanes: IStructuredPane[];
+    mutationObserver: MutationObserver;
+    expandedStepChildrenList: HTMLUListElement;
+    scheduledAfterRender: (() => void)[];
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentWillUpdate(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    get allRootPanes(): HTMLQ2StepperPaneElement[];
+    get allPanes(): HTMLQ2StepperPaneElement[];
+    setDefaultPane(): void;
+    determinePaneChanges: (mutations: MutationRecord[]) => void;
+    getStepId(currentStepId: string, goTo: string): string;
+    showStep(stepId: string): void;
+    extractDetails(pane: HTMLQ2StepperPaneElement): {
+        id: string;
+        label: string;
+        description: string;
+        status: "error" | "complete" | "locked";
+    };
+    buildPaneList: () => void;
+    resizeIframe(): void;
+    openCurrentStepChildren(): void;
+    showStepPane(stepId: string): void;
+    focusStepBtn(stepId: string, forceFocus?: boolean): void;
+    defaultChangeHandler(event: CustomEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    statusChangeHandler(): void;
+    currentStepChanged(stepId: string): void;
+    onStepClick: (event: any, stepId: string) => void;
+    onStepKeyDown: (event: KeyboardEvent, stepId: string) => void;
+    renderStepBtn(pane: IStructuredPane, index: number): any;
+    renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean): any;
+    renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string): any;
+    render(): any;
+}
+export {};

package/dist/types/components/q2-tab-container/q2-tab-container.d.ts

@@ -58,8 +58,8 @@ export declare class Q2TabContainer implements ComponentInterface {
     showScrollRight: boolean;
     tabs: TabPane[];
     resizeIframe(): void;
-    get tabPanes(): any[];
-    get selectedTabValue(): any;
+    get tabPanes(): (HTMLQ2TabPaneElement | HTMLTectonTabPaneElement)[];
+    get selectedTabValue(): string;
     get tabList(): Element;
     defaultChangeHandler(event: CustomEvent): void;
     onResize(): void;

package/dist/types/components/q2-tag/q2-tag.d.ts

@@ -0,0 +1,59 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Tag implements ComponentInterface {
+    /**
+     * Instructs the component to use the action sheet workflow for displaying its options.
+     *
+     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
+     */
+    hoist: boolean;
+    /**
+     * The text that populates the label.
+     * @localizable
+     */
+    label: string;
+    /** Determine whether the popover is open or closed. */
+    open: boolean;
+    /** Determines the label that is applied to the option list for accessibility purposes. */
+    optionListLabel: string;
+    /**
+     * Force the direction of the popover dropdown when it opens.
+     * If no value is passed, the component will auto-detect the direction based on available space.
+     */
+    popoverDirection: 'up' | 'down';
+    /** Aligns the popover dropdown to the left or right side of the input field. */
+    popoverAlignment: 'left' | 'right';
+    /** @deprecated */
+    popoverMinHeight: number;
+    /** The color of the element. */
+    theme: 'primary' | 'secondary' | 'tertiary';
+    optionCount: number;
+    hostElement: HTMLElement;
+    /**
+     * Emitted when a provided option is clicked.
+     *
+     * Requires at least one option to be provided.
+     */
+    click: EventEmitter<{
+        value: string;
+    }>;
+    dropdownBtn: HTMLButtonElement;
+    popoverElement: HTMLQ2PopoverElement;
+    optionList: HTMLQ2OptionListElement;
+    mutationObserver: MutationObserver;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    determineOptionCount: () => void;
+    delegateFocus(event: FocusEvent): void;
+    popoverStateHandler({ detail: { open } }: CustomEvent<{
+        open: boolean;
+    }>): void;
+    onClickElsewhere: (event: CustomEvent) => void;
+    handleChange: (event: any) => void;
+    handleClick: (event: MouseEvent) => Promise<void>;
+    handleKeydown: (event: KeyboardEvent) => Promise<void>;
+    handleButtonFocusout: (event: FocusEvent) => Promise<void>;
+    handleWrapperClick: () => void;
+    generateHiddenElement(): any;
+    render(): any;
+}

package/dist/types/utils/action-sheet.d.ts

@@ -0,0 +1,12 @@
+import { ActionSheetListCloseData, ActionSheetListData } from 'q2-tecton-common/lib/utility/action-sheet';
+interface IActionSheetComponent {
+    hoist: boolean;
+}
+export declare const shouldShowActionSheet: (component: IActionSheetComponent, event?: KeyboardEvent | MouseEvent) => boolean;
+export declare const buildListData: (component: IActionSheetListComponent, event?: MouseEvent | KeyboardEvent) => Promise<ActionSheetListData>;
+interface IActionSheetListComponent {
+    optionList: HTMLQ2OptionListElement;
+    label: string;
+}
+export declare const showActionSheetList: (component: IActionSheetListComponent, event?: MouseEvent | KeyboardEvent) => Promise<ActionSheetListCloseData>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.47.0",
+    "version": "1.47.2",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.47.0",
+        "q2-tecton-common": "1.47.2",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -54,5 +54,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "c94c06f4129a0105b8104934ba5282934364b775"
+    "gitHead": "11ae4713667592017f602ce9599eae599162407c"
 }

package/dist/q2-tecton-elements/p-0e27ea75.entry.js

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