q2-tecton-elements 1.49.2 → 1.49.4

package/dist/types/components/q2-dropdown-item/q2-dropdown-item.d.ts

@@ -0,0 +1,50 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { JSX } from '../../components';
+export declare class Q2DropdownItem implements ComponentInterface {
+    hostElement: HTMLElement;
+    q2LocValue: string;
+    /** @deprecated */
+    ariaLabel: string;
+    /** Disables interaction with the item and blocks its click event. */
+    disabled: boolean;
+    /**
+     * The text that appears within the dropdown item.
+     *
+     * @info
+     * This will be used as the `aria-label` for this item.
+     * @localizable
+     */
+    label: string;
+    /**
+     * Renders an icon button in the item.
+     * Clicking on this button will change the `type` on the item's click event detail to "remove".
+     */
+    removable: boolean;
+    /**
+     * Renders a line in the item instead of text.
+     * Click events from these items will not have details provided.
+     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.
+     */
+    separator: boolean;
+    /** A static reference value for the item. This value is returned in the click event detail. */
+    value: string;
+    componentWillLoad(): void;
+    onHostElementFocus(): void;
+    ariaLabelObserver(): void;
+    get dropdownItemBtn(): HTMLQ2BtnElement;
+    get innerLabel(): string;
+    get removeBtn(): HTMLQ2BtnElement;
+    get removeLabel(): string;
+    focusItem(): void;
+    focusRemoveBtn(): void;
+    handleQ2LocValue: () => string;
+    itemDOM(): JSX.IntrinsicElements;
+    onItemClick: (event: MouseEvent) => void;
+    onItemFocus: (event: FocusEvent) => void;
+    onItemKeydown: (event: KeyboardEvent) => void;
+    onRemoveBtnClick: (event: MouseEvent) => void;
+    onRemoveBtnFocus: (event: FocusEvent) => void;
+    onRemoveBtnKeydown: (event: KeyboardEvent) => void;
+    separatorDOM(): JSX.IntrinsicElements;
+    render(): JSX.IntrinsicElements;
+}

package/dist/types/components/q2-editable-field/q2-editable-field.d.ts

@@ -0,0 +1,140 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IEventDetail, Q2InputCustomEvent } from "../../components";
+import { Q2Input } from '../q2-input/q2-input';
+export declare class Q2EditableField {
+    cancelBtnElement: HTMLQ2BtnElement;
+    defaultValue: string;
+    editBtnElement: HTMLQ2BtnElement;
+    innerValue: string;
+    inputElement: HTMLQ2InputElement;
+    saveBtnElement: HTMLQ2BtnElement;
+    scheduledAfterRender: (() => void)[];
+    hostElement: HTMLElement;
+    formattedValue: string;
+    /** @deprecated */
+    ariaLabel: string;
+    /** If `true`, component expands to fill the width of its parent element. */
+    block: boolean;
+    /** Disables the edit button and field. */
+    disabled: boolean;
+    /** Controls the edit state of the element. */
+    editing: boolean;
+    /**
+     * Determines the `errors` applied to the `q2-input` element.
+     *
+     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
+     */
+    errors: string[];
+    /**
+     * Determines the `formatModifier` applied to the `q2-input` element.
+     * @info
+     * Only applicable when `type="currency"`.
+     *
+     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
+     */
+    formatModifier: string;
+    /** Hide's the field's `<label>` element from view. */
+    hideLabel: boolean;
+    /**
+     * Determines the `hints` applied to the `q2-input` element.
+     *
+     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
+     */
+    hints: string[];
+    /**
+     * The visible descriptor for the element.
+     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
+     * @localizable
+     */
+    label: string;
+    /**
+     * Determines the `maxLength` applied to the `q2-input`.
+     *
+     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
+     */
+    maxlength: number;
+    /** Displays the provided label in the read state. */
+    persistentLabel: boolean;
+    /** Shortens long values with ellipses instead of splitting into multiple lines. */
+    truncated: boolean;
+    /**
+     * Determines the `type` applied to the `q2-input` element.
+     *
+     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.
+     */
+    type: Q2Input['type'];
+    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */
+    value: string;
+    /**
+     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.
+     *
+     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
+     *@info
+     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
+     */
+    change: EventEmitter<{
+        editing: boolean;
+        name: 'edit' | 'cancel' | 'save';
+        value?: string;
+        formattedValue?: string;
+    }>;
+    /**
+     * Emitted when the user updates the `q2-input` element in the editing state.
+     */
+    input: EventEmitter<{
+        formattedValue: string;
+        value: string;
+    }>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    onHostElementChange(event: CustomEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    /**
+     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
+     *
+     * @testOnly
+     */
+    clickCancel(): void;
+    /**
+     * Emulates clicking the edit button, which will display the `<q2-input>` field.
+     *
+     * @testOnly
+     */
+    clickEdit(): void;
+    /**
+     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
+     *
+     * @testOnly
+     */
+    clickSave(): void;
+    /**
+     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.
+     *
+     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\
+     * `change` event will be emitted.
+     *
+     * @testOnly
+     */
+    setValue(value: string, options?: {
+        clickSave?: boolean;
+    }): Promise<void>;
+    ariaLabelObserver(): void;
+    observesEditing(newValue: boolean, oldValue: boolean): void;
+    errorsObserver(): void;
+    get hasErrors(): boolean;
+    get hasHints(): boolean;
+    get locLabel(): string;
+    get wrapperClass(): string;
+    cancelClick: (event?: MouseEvent) => void;
+    editClick: (event: MouseEvent) => void;
+    generateEditBtn(): any;
+    generateEditStateDOM(): any;
+    generateReadStateDOM(): any;
+    inputChange: (e: CustomEvent) => void;
+    inputClick: (event: MouseEvent) => void;
+    inputInput: (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => void;
+    inputKeyDown: (e: KeyboardEvent) => void;
+    saveClick: (event?: MouseEvent) => void;
+    render(): any;
+}

package/dist/types/components/q2-loading/skeleton/shapes.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from './../../../components';
 interface AtomOptions {
     width?: string;
     height?: string;

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

@@ -12,7 +12,7 @@ export declare class Q2Optgroup implements ComponentInterface {
     componentWillLoad(): void;
     disabledWatcher(disabled: boolean): void;
     get headerId(): string;
-    get options(): Element[];
+    get options(): HTMLQ2OptionElement[];
     setHidden: () => void;
     render(): any;
 }

package/dist/types/components/q2-option-list/q2-option-list.d.ts

@@ -0,0 +1,99 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export interface IOptionValue {
+    value: string;
+    display?: string;
+}
+export declare class Q2OptionList implements ComponentInterface {
+    activeIndex: number;
+    contentElement: HTMLElement;
+    keyStore: {
+        queue: string[];
+        lastPressedAt: Date;
+    };
+    pivotIndex: number;
+    scheduledAfterRender: (() => void)[];
+    searchString: string;
+    searchStringTimer: number;
+    hostElement: HTMLElement;
+    hasOptions: boolean;
+    align: 'left' | 'right';
+    /** Indicates a custom search is being implemented for the option list. */
+    customSearch: boolean;
+    /** Disables the option list. */
+    disabled: boolean;
+    /** Determines the label that is applied to the option list for accessibility purposes. */
+    label: string;
+    /**
+     * Enables the multi-select ability for the option list.
+     * @info
+     * Only applicable when options are provided.
+     */
+    multiple: boolean;
+    /** Disables the logic that handles selecting and focusing an option in the option list. */
+    noSelect: boolean;
+    /** A list of the selected options on the element. */
+    selectedOptions: IOptionValue[];
+    /** Applies focus to the selected option. */
+    showSelected: boolean;
+    /** Translates to the role of the option list */
+    type: 'menu' | 'listbox';
+    /**
+     * 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.
+     */
+    change: EventEmitter<{
+        value: string;
+        values: IOptionValue[];
+    }>;
+    /**
+     * Emitted to indicate the intended state of the popover.
+     * @private
+     */
+    popoverState: EventEmitter<{
+        open: boolean;
+        action: 'close' | 'select' | 'open';
+    }>;
+    /**
+     * Emitted when the component has finished rendering.
+     * @private
+     */
+    ready: EventEmitter<undefined>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    handleClick(event: MouseEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    getContents(): Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]>;
+    getOptions(): Promise<HTMLQ2OptionElement[]>;
+    handleExternalKeydown(event: KeyboardEvent): Promise<void>;
+    setActiveElement(index: number): Promise<void>;
+    setDefaultActiveElement(): Promise<void>;
+    selectedOptionsUpdated(): void;
+    showSelectedUpdated(showSelected: boolean): void;
+    get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[];
+    get allOptions(): HTMLQ2OptionElement[];
+    get allVisibleOptions(): HTMLQ2OptionElement[];
+    adjustActiveOptionAndScroll(numToAdd: number): void;
+    checkOptions(): Promise<void>;
+    clickHandler: (event: Event) => void;
+    externalKeydownHandler: (event: KeyboardEvent) => void;
+    focusoutHandler: (event: FocusEvent) => void;
+    focusSelectedSibling(option: HTMLQ2OptionElement): void;
+    getDefaultActiveIndex(): number;
+    getNextVisibleIndex(direction: any): number;
+    getRootSlot(element: Element): Element[];
+    internalKeydownHandler: (event: KeyboardEvent) => void;
+    openDropdownWithActiveElement(activeIndex: number): Promise<void>;
+    resetTimer(): void;
+    scrollToActiveOption(): void;
+    searchAndFocus: (keyValue: string, shouldSelect: boolean) => void;
+    searchOptions(key: string, shouldSelect?: boolean): void;
+    selectOption(selectedOption: HTMLQ2OptionElement): void;
+    setActiveOption(): void;
+    setFocusedOption(): void;
+    updateMultipleOptionAttrs(): void;
+    updateSingleOptionAttrs(): void;
+    render(): any;
+}

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 {
+    containerElement: HTMLElement;
+    containerWidth: number;
+    inputField: HTMLQ2InputElement;
+    resizeObserver: ResizeObserver;
+    hostElement: HTMLElement;
+    isSmall: boolean;
+    /** Indicates the horizontal alignment of children elements */
+    alignment: string;
+    /** Determines whether the component uses the dynamic resizing behavior. */
+    autoSize: boolean;
+    /** 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;
+    /** The total number of records to paginate. */
+    total: number;
+    /**
+     * Emitted when the page is changed.
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        page: number;
+    }>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    onHostElementFocus(event: any): void;
+    manageResizeObserver(): void;
+    get currentRange(): string;
+    get isFullViewHidden(): boolean;
+    get nextRange(): string;
+    get pageWithDefault(): number;
+    get perPageWithDefault(): number;
+    get prevRange(): string;
+    get recordTypeWithDefault(): string;
+    get totalPages(): number;
+    get totalWithDefault(): number;
+    checkSize: () => void;
+    handlePageChange: (page: number) => void;
+    handlePerPageChange: (event: CustomEvent) => void;
+    removeResizeObserver(): 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 {
+    mutationObserver: MutationObserver;
+    optionList: HTMLQ2OptionListElement;
+    popoverElement: HTMLQ2PopoverElement;
+    primaryBtn: HTMLButtonElement;
+    primaryBtnWrapper: HTMLElement;
+    scheduledAfterRender: (() => void)[];
+    hostElement: HTMLElement;
+    optionCount: number;
+    selectedOptionElements: HTMLQ2OptionElement[];
+    /** Determine if the elements is in the selected state, with values. */
+    active: boolean;
+    /** Indicates that the pill has no border */
+    borderless: boolean;
+    /** Indicates the pill cannot be focused or interacted with. */
+    disabled: 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;
+    /** Aligns the popover dropdown to the left or right side of the input field. */
+    popoverAlignment: 'left' | 'right';
+    /**
+     * 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';
+    /** @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;
+    /**
+     * Emitted when the pill is clicked or the selected options change.
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        value: string;
+        values: IOptionValue[];
+        active: boolean;
+    }>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    handleSelectedDisplay(): void;
+    delegateFocus(event: FocusEvent): void;
+    popoverStateHandler({ detail: { open } }: CustomEvent<{
+        open: boolean;
+    }>): void;
+    selectedOptionsChanged(newValue: any): void;
+    valueChanged(newValue: any): Promise<void>;
+    get buttonContent(): string;
+    get truncatedButtonContent(): string;
+    clearSelectedOptions: () => void;
+    determineOptionCount: () => void;
+    executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
+    generateHiddenElement(): any;
+    generateIcon(): any;
+    getOption: (value: string) => Promise<HTMLQ2OptionElement>;
+    handleButtonFocusout: (event: FocusEvent) => Promise<void>;
+    handleChange: (event: any) => void;
+    handleClick: (event: MouseEvent) => Promise<void>;
+    handleKeydown: (event: KeyboardEvent) => Promise<void>;
+    handleSelectionChanges(changeDetails: {
+        value?: string;
+        values?: IOptionValue[];
+    }): Promise<void>;
+    handleWrapperClick: () => void;
+    onClickElsewhere: (event: CustomEvent) => void;
+    syncValueProperties: () => void;
+    updateSelectedOptionElements: () => Promise<void>;
+    render(): any;
+}

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

@@ -1,60 +1,60 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 export declare class Q2Popover implements ComponentInterface {
-    containerElement: HTMLDivElement;
-    contentElement: HTMLDivElement;
     /**
-     * The number of pixels to leave between the popover and the edge of the viewport
+     * Force the direction of the popover when it opens.
+     * If no value is passed, the component will auto-detect the direction based on available space.
      */
-    displayBuffer: number;
-    /** remove when Popover API is supported in iOS */
-    orientationChanged: boolean;
-    rootElementRect: DOMRect;
-    hostElement: HTMLElement;
-    currentDirection: 'down' | 'up';
-    show: boolean;
+    direction: 'up' | 'down';
     /** Aligns the popover to the left or right side of the control element. */
     align: 'left' | 'right';
+    /** Controls whether the popover is open or closed. */
+    open: boolean;
     /** Indicates the popover will match the width of its parent element. */
     block: boolean;
     /** The element that controls the popover's behavior. */
     controlElement: HTMLElement;
-    /**
-     * Force the direction of the popover when it opens.
-     * If no value is passed, the component will auto-detect the direction based on available space.
-     */
-    direction: 'up' | 'down';
+    mode: 'legacy';
     /** @deprecated */
     minHeight: number;
-    mode: 'legacy';
-    /** Controls whether the popover is open or closed. */
-    open: boolean;
+    hostElement: HTMLElement;
     /**
      * Emitted when the popover is opened or closed.
      */
     popoverStateChanged: EventEmitter<{
         open: boolean;
     }>;
-    disconnectedCallback(): void;
+    currentDirection: 'down' | 'up';
+    show: boolean;
+    containerElement: HTMLDivElement;
+    contentElement: HTMLDivElement;
+    /**
+     * The number of pixels to leave between the popover and the edge of the viewport
+     */
+    displayBuffer: number;
+    orientationChanged: boolean;
+    componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    toggle(): Promise<void>;
+    scrollContainerTo(options: ScrollToOptions): Promise<void>;
+    openChanged(open: boolean): Promise<void>;
+    minHeightProvided(): void;
     popoverStateHandler(event: CustomEvent<{
         open: boolean;
     }>): void;
-    scrollContainerTo(options: ScrollToOptions): Promise<void>;
-    toggle(): Promise<void>;
-    minHeightProvided(): void;
-    openChanged(open: boolean): Promise<void>;
-    get actualDirection(): 'up' | 'down' | undefined;
+    get providedDirection(): 'up' | 'down' | undefined;
     get isModule(): boolean;
-    addViewportListeners(): void;
-    clearCSSProperties(): void;
-    determinePopDirection(): Promise<void>;
+    get supportsPopoverAPI(): boolean;
     handleMinHeight: () => void;
+    handlePopoverToggleEvent: (event: ToggleEvent) => void;
+    viewPortChanged: () => void;
+    viewPortOrientationChanged: () => void;
+    addViewportListeners(): void;
     removeViewportListeners(): void;
+    setPopoverAPICSSProperties: () => Promise<void>;
     setAbsoluteCSSProperties: () => Promise<void>;
+    clearCSSProperties(): void;
     setDirectionAndShow(direction: 'up' | 'down'): void;
-    setFixedCSSProperties: () => Promise<void>;
-    setRootElement(): void;
-    viewPortChanged: () => void;
-    viewPortOrientationChanged: () => void;
+    determinePopDirection(): Promise<void>;
     render(): any;
 }