q2-tecton-elements 1.55.4 → 1.55.5

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

@@ -0,0 +1,178 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Q2Dropdown implements ComponentInterface {
+    controlElement?: HTMLQ2BtnElement;
+    dropdownItemSelector: string;
+    popoverElement?: HTMLQ2PopoverElement;
+    optionList: HTMLQ2OptionListElement;
+    hostElement: HTMLElement;
+    additionalContext: string;
+    /** @deprecated */
+    alignment: 'left' | 'right';
+    /** @deprecated */
+    ariaLabel: string;
+    /** If `true`, component expands to fill the width of its parent element. */
+    block: boolean;
+    /**
+     * Tells the outlet what the type of object being passed in as contextValue.
+     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.
+     *
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    context: string;
+    /**
+     * 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).
+     *
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    contextValue: string;
+    /** Indicates the menu cannot be focused or interacted with. */
+    disabled: boolean;
+    /**
+     * Hide's the field's `<label>` element from view.
+     * @warning
+     * Only use when a visible label is impractical.
+     */
+    hideLabel: 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 icon that will render within the toggle button. You may use any of the `q2-icon` types. */
+    icon: string;
+    /**
+     * The text that appears within the button.
+     * @warning
+     * This property should not be used if the `type` is `icon`.
+     * @localizable
+     */
+    label: string;
+    /**
+     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    name: string;
+    /**
+     * Determine whether the popover is open or closed.
+     *
+     * @readonly
+     */
+    open: boolean;
+    /** Determines the label that is applied to the option list for accessibility purposes. */
+    optionListLabel: string;
+    /** @deprecated */
+    popDirection: 'up' | 'down';
+    /** 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';
+    /**
+     * Force the maximum height of the popover. This value will be interpreted as pixels.
+     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+     */
+    popoverMaxHeight: number;
+    /** @deprecated */
+    popoverMinHeight: number;
+    /**
+     * 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';
+    /**
+     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    resolvedType: string;
+    /** The type of button used as the menu toggle.
+     * @info
+     * Type must be "custom" to use the custom button slot.
+     */
+    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    delegateFocus(event: FocusEvent): void;
+    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{
+        open: boolean;
+    }>): void;
+    /**
+     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.
+     * @testOnly
+     */
+    closePopover(): Promise<void>;
+    /**
+     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.
+     * @testOnly
+     */
+    openPopover(): Promise<void>;
+    /**
+     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).
+     *
+     * If the dropdown is closed, this will open it before selecting the item.
+     *
+     * If the value does not match any item's value, this method does nothing.
+     * @testOnly
+     */
+    selectItem(value: string): Promise<void>;
+    /**
+     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.
+     *
+     * If the dropdown is closed, this will open it before selecting the remove item button.
+     *
+     * Requirements for this method to work properly:
+     * - Provided `value` matches the item's `value` property
+     * - Item has the `removable` property enabled
+     * @testOnly
+     */
+    selectRemoveItem(value: string): Promise<void>;
+    additionalContextHandler(): void;
+    alignmentHandler(): void;
+    ariaLabelHandler(): void;
+    contextHandler(): void;
+    contextValueHandler(): void;
+    nameHandler(): void;
+    popDirectionHandler(): void;
+    resolvedTypeHandler(): void;
+    get determineDropdownItemCount(): number;
+    get hasCustomControl(): boolean;
+    get toggleButtonProps(): {
+        icon: boolean;
+        fab: boolean;
+        intent: any;
+        active: boolean;
+        disabled: boolean;
+        ariaExpanded: boolean;
+        className: string;
+        custom: boolean;
+    };
+    _clickItem(value: string): void;
+    _handleActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
+    _togglePopover(): void;
+    focusToggle: () => void;
+    onClickElsewhere: (event: CustomEvent) => void;
+    onToggleClick: (event: MouseEvent) => Promise<void>;
+    onToggleKeydown: (event: KeyboardEvent) => Promise<void>;
+    onPopoverState: (event: CustomEvent<{
+        open: boolean;
+        action: string;
+    }>) => void;
+    handleFocusOut: (event: FocusEvent) => void;
+    orchestrateResolvedMenuItems(): void;
+    removeResolvedElements(): void;
+    resolveMenu(): Promise<import("../../util").ResolvedMenuItem[]>;
+    resolveMenuItemElements(): Promise<HTMLQ2DropdownItemElement[]>;
+    render(): any;
+}

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

@@ -0,0 +1,141 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IEventDetail, Q2InputCustomEvent } from "../../components";
+import { Q2Input } from '../q2-input/q2-input';
+import { IFormatterValueObject } from '../q2-input/q2-input-types';
+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;
+    inputFormatted(event: CustomEvent<IFormatterValueObject>): 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;
+    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-icon/q2-icon.d.ts

@@ -12,6 +12,7 @@ export declare class Q2Icon implements ComponentInterface {
     type: string;
     componentWillLoad(): void;
     componentDidRender(): void;
+    disconnectedCallback(): void;
     handleIcon(): void;
     get iconCloneViewBox(): string;
     get isCustom(): boolean;

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,100 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export interface IOptionValue {
+    value: string;
+    display?: string;
+}
+export type ValidOptionElements = HTMLQ2OptionElement | HTMLQ2DropdownItemElement;
+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 | ValidOptionElements)[]>;
+    getOptions(): Promise<ValidOptionElements[]>;
+    handleExternalKeydown(event: KeyboardEvent): Promise<void>;
+    setActiveElement(index: number): Promise<void>;
+    setDefaultActiveElement(): Promise<void>;
+    selectedOptionsUpdated(): void;
+    showSelectedUpdated(showSelected: boolean): void;
+    get allContents(): (HTMLQ2OptgroupElement | ValidOptionElements)[];
+    get allOptions(): ValidOptionElements[];
+    get allVisibleOptions(): ValidOptionElements[];
+    adjustActiveOptionAndScroll(numToAdd: number): void;
+    checkOptions(): void;
+    clickHandler: (event: Event) => void;
+    externalKeydownHandler: (event: KeyboardEvent) => void;
+    focusoutHandler: (event: FocusEvent) => void;
+    focusSelectedSibling(option: ValidOptionElements): 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: ValidOptionElements): void;
+    setActiveOption(): void;
+    setFocusedOption(): void;
+    updateMultipleOptionAttrs(): void;
+    updateSingleOptionAttrs(): void;
+    render(): any;
+}

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

@@ -0,0 +1,117 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Pagination implements ComponentInterface {
+    containerElement: HTMLElement;
+    containerWidth: number;
+    firstPageBtn: HTMLQ2BtnElement;
+    inputField: HTMLQ2InputElement;
+    lastPageBtn: HTMLQ2BtnElement;
+    nextPageBtn: HTMLQ2BtnElement;
+    perPageSelect: HTMLQ2SelectElement;
+    prevPageBtn: HTMLQ2BtnElement;
+    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 display only the current and total pages. */
+    pagesOnly: boolean;
+    /** The total number of records displayed on each page. */
+    perPage: number;
+    /**
+     * A list of perPage values.
+     * This generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.
+     *
+     * **Example:**
+     * @snippet
+     * this.perPageIncrements = [10, 25, 50];
+     */
+    perPageIncrements: number[];
+    /** Indicates to display only 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;
+    /**
+     * Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    clickFirstPage(): Promise<void>;
+    /**
+     * Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    clickLastPage(): Promise<void>;
+    /**
+     * Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    clickNextPage(): Promise<void>;
+    /**
+     * Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    clickPreviousPage(): Promise<void>;
+    /**
+     * Emulates selecting a `perPage` value from the `perPageIncrements` dropdown,
+     * and updates the value of the `perPage` property.
+     *
+     * If `value` is not in the `perPageIncrements` array, this method does nothing.
+     * @testOnly
+     */
+    selectPerPageIncrementValue(value: number): Promise<void>;
+    /**
+     * Emulates setting the page value in the `<input>` field,
+     * and emitting a change event with the updated page number.
+     *
+     * If `value` is invalid, this method does nothing.
+     * @testOnly
+     */
+    setPageValue(value: number): Promise<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 showPerPageSelect(): boolean;
+    get totalPages(): number;
+    get totalWithDefault(): number;
+    checkSize: () => void;
+    handlePageChange: (page: number) => void;
+    handlePerPageChange: (event: CustomEvent) => void;
+    removeResizeObserver(): void;
+    renderPerPage(): any;
+    render(): any;
+}