q2-tecton-elements 1.50.1 → 1.51.0

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

@@ -61,6 +61,11 @@ export declare class Q2Dropdown implements ComponentInterface {
      * 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;
     /**
@@ -88,6 +93,36 @@ export declare class Q2Dropdown implements ComponentInterface {
     popoverStateHandler({ 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;
@@ -108,6 +143,7 @@ export declare class Q2Dropdown implements ComponentInterface {
         className: string;
         custom: boolean;
     };
+    _togglePopover(): void;
     closeDropdown: () => void;
     focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev'): void;
     focusFirstItem: () => Promise<void>;

package/dist/types/components/q2-formatted-text/q2-formatted-text.d.ts

@@ -0,0 +1,34 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Q2FormattedText implements ComponentInterface {
+    /** @private The formatted text to display */
+    formattedValue: string;
+    /** The value you want formatted.  */
+    value: number;
+    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */
+    locale: string | string[];
+    /** The minimum number of integer digits to use.  */
+    minimumIntegerDigits: number;
+    /** The minimum number of fraction digits to use.  */
+    minimumFractionDigits: number;
+    /** The maximum number of fraction digits to use.  */
+    maximumFractionDigits: number;
+    /**
+     * Determine how the positive or negative sign should display.
+     *
+     * Behavior:
+     * - `always`: Always display the sign.
+     * - `auto`: Sign displays for negative numbers only, including negative zero.
+     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.
+     * - `never`: Never display the sign.
+     */
+    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero';
+    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */
+    size: 'small' | 'medium' | 'large' | undefined;
+    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.  */
+    slotSize: string;
+    componentWillLoad(): void | Promise<void>;
+    propsUpdated(): void;
+    get formattedTextClasses(): string;
+    formatValue(): void;
+    render(): any;
+}

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

@@ -152,18 +152,15 @@ export declare class Q2Input {
     /** Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`. */
     optional: boolean;
     /**
-     * The pattern string of the input field, regular expression string is expected.
-     * This allows us to check the validity user's input.
-     * For instance,
-     * <q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput">
+     * Applies the value as a RegEx pattern to assess the validity of the input field's value.
+     * Check the ValidityState's `patternMismatch` property for the result.
      *
-     * - Allows only 3~5 alphanumeric letters
-     *
-     * In Javascript, you can check the validity object in your q2-input
-     * Type "abcdefgh", then access the validity object
+     * **Example:**
      * @snippet
+     * <q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"></q2-input>
+     * // enter "abcdefgh" in the input field (too many characters)
      * const myInput = document.querySelector('#myInput');
-     * console.log(myInput.validity);
+     * console.log(myInput.validity.patternMismatch); // true
      */
     pattern: string;
     /**
@@ -210,6 +207,10 @@ export declare class Q2Input {
     textHidden: boolean;
     /** Specifies the field's expeted [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices. */
     type: InputType;
+    /**
+     * Returns a read-only `ValidityState` object representing the validity states of the element.
+     * [See MDN for more information on ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
+     */
     validity: ValidityState;
     /**
      * The value of the input field.

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

@@ -24,6 +24,7 @@ export declare class Q2Legend implements ComponentInterface {
             'item-button-selected': boolean;
         };
         icon?: string;
+        itemStyle?: any;
         id: string;
         value: number;
         name: string;

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

@@ -0,0 +1,36 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Link implements ComponentInterface {
+    hostElement: HTMLElement;
+    /** The disabled.  */
+    disabled: boolean;
+    /** The link when clicked. */
+    href: string;
+    /** The label to display. */
+    label: string;
+    /** The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) */
+    referrerpolicy: ReferrerPolicy;
+    /** The target.  */
+    target: string;
+    /** The title attribute on a tag in shadowRoot. */
+    tctTitle: string;
+    /** The value link to display. */
+    variant: string;
+    /**
+     * Emitted when the link is clicked.
+     * @legacyEvent
+     */
+    tctClick: EventEmitter<{
+        target: string;
+        referrerpolicy: string;
+        href: string;
+    }>;
+    /**
+     * A method for click.
+     *
+     * @testOnly
+     */
+    clickLink(): Promise<void>;
+    get classes(): string;
+    handleClick(event: MouseEvent): void;
+    render(): any;
+}

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

@@ -2,7 +2,12 @@ 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;
@@ -18,13 +23,20 @@ export declare class Q2Pagination implements ComponentInterface {
      * Only referenced when `pagesOnly` is true.
      */
     pages: number;
-    /** Indicates to only display the current and total pages. */
+    /** Indicates to display only 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] */
+    /**
+     * 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 only display the current and total records. */
+    /** 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;
@@ -41,6 +53,50 @@ export declare class Q2Pagination implements ComponentInterface {
     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;
@@ -49,6 +105,7 @@ export declare class Q2Pagination implements ComponentInterface {
     get perPageWithDefault(): number;
     get prevRange(): string;
     get recordTypeWithDefault(): string;
+    get showPerPageSelect(): boolean;
     get totalPages(): number;
     get totalWithDefault(): number;
     checkSize: () => void;

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

@@ -4,10 +4,14 @@ export declare class Q2Pill implements ComponentInterface {
     mutationObserver: MutationObserver;
     optionList: HTMLQ2OptionListElement;
     popoverElement: HTMLQ2PopoverElement;
+    popoverTopContainer: HTMLElement;
+    popoverBottomContainer: HTMLElement;
     primaryBtn: HTMLButtonElement;
     primaryBtnWrapper: HTMLElement;
     scheduledAfterRender: (() => void)[];
     hostElement: HTMLElement;
+    hasPopoverTop: boolean;
+    hasPopoverBottom: boolean;
     optionCount: number;
     selectedOptionElements: HTMLQ2OptionElement[];
     /** Determine if the elements is in the selected state, with values. */
@@ -50,6 +54,11 @@ export declare class Q2Pill implements ComponentInterface {
      * 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;
     /** A list of the selected options on the element. */
@@ -120,6 +129,8 @@ export declare class Q2Pill implements ComponentInterface {
     }) => Promise<void>;
     handleWrapperClick: () => void;
     onClickElsewhere: (event: CustomEvent) => void;
+    onMutationObserved: () => void;
+    updateSlotState: () => void;
     syncValueProperties: () => void;
     updateSelectedOptionElements: () => Promise<void>;
     renderHiddenElement(): any;

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

@@ -23,6 +23,11 @@ export declare class Q2Popover implements ComponentInterface {
      * If no value is passed, the component will auto-detect the direction based on available space.
      */
     direction: '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.
+     */
+    maxHeight: number;
     /** @deprecated */
     minHeight: number;
     mode: 'legacy';
@@ -43,8 +48,9 @@ export declare class Q2Popover implements ComponentInterface {
     toggle(): Promise<void>;
     minHeightProvided(): void;
     openChanged(open: boolean): Promise<void>;
-    get actualDirection(): 'up' | 'down' | undefined;
     get isModule(): boolean;
+    get providedDirection(): 'up' | 'down' | undefined;
+    get validatedMaxHeight(): number | undefined;
     addViewportListeners(): void;
     clearCSSProperties(): void;
     determinePopDirection(): Promise<void>;

package/dist/types/components/q2-resize-observer/q2-resize-observer.d.ts

@@ -0,0 +1,28 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2ResizeObserver implements ComponentInterface {
+    currentResizeObserverEntries: ResizeObserverEntry[];
+    observedElements: HTMLElement[];
+    resizeObserver?: ResizeObserver;
+    hostElement: HTMLElement;
+    /**
+     * Determines wheter or not events will be emitted from the component.
+     */
+    disabled: boolean;
+    /**
+     * Emitted when any of the observed elements are resized.
+     */
+    tctResize: EventEmitter<{
+        entries: ResizeObserverEntry[];
+    }>;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    /**
+     * Returns the latest entries reported by the component.
+     */
+    getCurrentResizeEntries(): Promise<ResizeObserverEntry[]>;
+    disabledUpdated(newVal: boolean): void;
+    handleSlotChange: () => void;
+    startObserver(): void;
+    stopObserver(): void;
+    render(): any;
+}

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

@@ -44,6 +44,18 @@ export declare class Q2Section implements ComponentInterface {
     delegateFocus(event: FocusEvent): void;
     collapsibleObserver(): void;
     expandedObserver(expanded: boolean): Promise<void>;
+    /**
+     * A test method to collapse section.
+     *
+     * @testOnly
+     */
+    collapse(): Promise<void>;
+    /**
+     * A test method to expand section.
+     *
+     * @testOnly
+     */
+    expand(): Promise<void>;
     get contentContainerHeight(): string;
     get currentHeight(): string;
     addContentSlotListener: () => void;

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

@@ -76,6 +76,11 @@ export declare class Q2Select implements ComponentInterface {
     placeholder: string;
     /** @deprecated */
     popDirection: '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;
     /**
      * Determines the display mode of the popover.
      *

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

@@ -34,8 +34,17 @@ export declare class Q2Stepper implements ComponentInterface {
     contentChangeHandler(): void;
     delegateFocus(event: FocusEvent): void;
     statusChangeHandler(event: CustomEvent): void;
+    /**
+     * Emulates clicking a step in the stepper and emitting the change event.
+     *
+     * You may provide either the step number or the stepper pane id.
+     *
+     * If the value is invalid or the step is locked, the method will do nothing.
+     * @testOnly
+     */
+    selectStep(value: number | string): Promise<void>;
     currentStepChanged(stepNumber: number): void;
-    get allPanes(): NodeListOf<HTMLQ2StepperPaneElement>;
+    get allPanes(): HTMLQ2StepperPaneElement[];
     checkForPanes: () => void;
     checkScrollState: () => void;
     focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean): void;

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

@@ -71,8 +71,6 @@ export declare class Q2TabContainer implements ComponentInterface {
     get tabList(): Element;
     get tabPanes(): (HTMLQ2TabPaneElement | HTMLTectonTabPaneElement)[];
     checkScrollState: () => void;
-    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements;
-    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements;
     moveToAdjacentTab: (value: string, direction: 'next' | 'prev' | 'first' | 'last') => void;
     moveToTab: (index: number, shouldFocus?: boolean) => HTMLButtonElement;
     onScrollBtnClick: (direction?: 'left' | 'right') => void;
@@ -83,6 +81,14 @@ export declare class Q2TabContainer implements ComponentInterface {
     setTabs: () => void;
     updateTabData: () => void;
     updateTabPaneProps: () => void;
+    /**
+     * A method to select a tab pane corresponding with the value.
+     *
+     * @testOnly
+     */
+    selectTab(value: string): Promise<void>;
+    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements;
+    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements;
     render(): any;
 }
 export {};

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

@@ -28,6 +28,11 @@ export declare class Q2Tag implements ComponentInterface {
      * 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;
     /** The color of the element. */

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

@@ -2,6 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { IDict } from "../../util";
 export declare class Q2Textarea {
     contentContainer?: HTMLDivElement;
+    debouncedScreenReaderCharacterCount: () => void;
+    describeByScreenReaderCharacterCount: boolean;
     guid: number;
     scheduledAfterRender: (() => void)[];
     textareaField?: HTMLTextAreaElement;
@@ -9,6 +11,7 @@ export declare class Q2Textarea {
     hostElement: HTMLElement;
     downParams: IDict<number>;
     hasFocus: boolean;
+    screenReaderCharacterCount: number;
     /**
      * Defines the number of columns displayed in the field.
      * If not set, the field will be full-width and respond to the window size.
@@ -107,10 +110,11 @@ export declare class Q2Textarea {
     colsObserver(): void;
     errorsObserver(): void;
     hintsObserver(): void;
+    maxlengthObserver(): void;
     rowsObserver(): void;
     valueObserver(): void;
     get hasError(): boolean;
-    get inputDescribedBy(): string;
+    get inputDescribedBy(): any;
     get inputId(): string;
     get messages(): string[];
     get showMessages(): boolean;
@@ -120,9 +124,7 @@ export declare class Q2Textarea {
     checkRows: () => void;
     getBorderOffset: () => number;
     increaseHeightIfOverflowing: () => void;
-    inputDOM(): any;
     isOverflowingVertically: () => boolean;
-    maxLengthDOM(): any;
     onMouseDown: (event: MouseEvent) => void;
     onMouseMove: (event: MouseEvent) => void;
     onMouseUp: () => void;
@@ -134,5 +136,8 @@ export declare class Q2Textarea {
     onTouchStart: (event: TouchEvent) => void;
     setHeight(event: MouseEvent | TouchEvent): void;
     setWidth(event: MouseEvent | TouchEvent): void;
+    updateScreenReaderCharacterCount: () => void;
+    renderInput(): any;
+    renderMaxLength(): any;
     render(): any;
 }