q2-tecton-elements 1.37.1 → 1.38.1

package/dist/types/components/q2-chart-donut/index.d.ts

@@ -63,8 +63,17 @@ export declare class Q2ChartDonut implements ComponentInterface {
   outerRadiusUpdated(): void;
   checkSelectedId(): void;
   delegateFocus(event: FocusEvent): void;
+  /**
+   * Selects a slice by its provided `id` in the provided `data`.
+   */
   selectById(id: string): Promise<void>;
+  /**
+   * Selects a slice by its index in the provided `data`.
+   */
   selectByIndex(index: number): Promise<void>;
+  /**
+   * Clears any selected slice.
+   */
   clearSelection(): Promise<void>;
   onClickElsewhere: (event: Event) => void;
   onButtonKeyDown: (event: KeyboardEvent) => void;

package/dist/types/components/q2-checkbox-group/index.d.ts

@@ -19,6 +19,11 @@ export declare class Q2CheckboxGroup implements ComponentInterface {
   valueUpdated(): void;
   updateDisabled(): void;
   updateReadonly(newReadonly: boolean): void;
+  /**
+   * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.
+   *
+   * @testOnly
+   */
   setValue(values: string | string[]): void;
   change: EventEmitter;
   onHostElementChange(event: CustomEvent): void;

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

@@ -38,9 +38,32 @@ export declare class Q2EditableField {
   delegateFocus(event: FocusEvent): void;
   input: EventEmitter;
   change: EventEmitter;
+  /**
+   * Emulates clicking the edit button, which will display the `<q2-input>` field.
+   *
+   * @testOnly
+   */
   clickEdit(): void;
+  /**
+   * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
+   *
+   * @testOnly
+   */
   clickCancel(): 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>;

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

@@ -37,6 +37,7 @@ export declare class Q2Input {
   iconLeft: Q2Icon['type'];
   iconRight: Q2Icon['type'];
   readonly: boolean;
+  showCount: boolean;
   clearable: boolean;
   optional: boolean;
   min: number;
@@ -63,16 +64,21 @@ export declare class Q2Input {
   formattedValueObject: IFormatterValueObject;
   hasFocus: boolean;
   isSmall: boolean;
+  checkSlotCount: number;
+  hostElement: HTMLElement;
   resizeObserver: ResizeObserver;
   scheduledAfterRender: (() => void)[];
   valueOnFocus: string;
   isMobile: boolean;
+  mutationObserver: MutationObserver;
+  textSelectedForDeletion: boolean;
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
+  onMutationObserved: () => void;
   getFormattedValue(value: string, valueChangedFromProperty: boolean): IFormatterValueObject;
-  hostElement: HTMLElement;
+  get hasCustomDisplaySlot(): boolean;
   get canClear(): boolean;
   get shouldCursorStayAtEnd(): boolean;
   get hasError(): boolean;
@@ -82,6 +88,8 @@ export declare class Q2Input {
   guid: number;
   get inputId(): string;
   get inputDescribedBy(): string;
+  get hasInputLeftSlot(): boolean;
+  get hasInputRightSlot(): boolean;
   get isMaskedType(): boolean;
   get wrapperClasses(): string;
   get computedType(): string;
@@ -102,7 +110,23 @@ export declare class Q2Input {
   formatModifierObserver(): void;
   hintsObserver(): void;
   errorsObserver(): void;
+  /**
+   * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
+   *
+   * This method leaves the focus on the `<input>` and as a result does not trigger the `change` event. If you want
+   * to trigger the` change` event, move the focus to another element after calling this method.
+   *
+   * @testOnly
+   */
   setValue(value: string): void;
+  /**
+   * Emulates clicking the clear button when the input is clearable.
+   *
+   * @warning
+   * Only applicable when the input is clearable.
+   *
+   * @testOnly
+   */
   clearValue(): void;
   onHostElementFocus(event: any): void;
   onHostElementChange(event: CustomEvent): void;
@@ -115,13 +139,15 @@ export declare class Q2Input {
   onInputFocus: () => void;
   onInputBlur: () => void;
   onInputInput: (event: InputEvent) => void;
+  handleCurrencyDeletion(event: InputEvent): void;
   onInputPaste: (event: ClipboardEvent) => void;
   handleDataInput(newFormattedValue: IFormatterValueObject): void;
   handleValueAndCursor: () => void;
+  handleCurrencyKeydown: (event: KeyboardEvent) => void;
   onInputKeydown: (event: KeyboardEvent) => void;
   onClearInput: () => void;
   render(): any;
-  get hasCustomDisplaySlot(): boolean;
+  countDOM(): any;
   inputContainerDOM(): any;
   standardInputDOM(): any;
   pseudoInputDOM(): any;

package/dist/types/components/q2-message/index.d.ts

@@ -6,6 +6,9 @@ export declare class Q2Message {
   presentToggle: boolean;
   get isFirefox(): boolean;
   componentDidLoad(): void;
+  /**
+   * Prompts assistive technology to announce the message.
+   */
   present(): Promise<void>;
   delegateFocus(event: FocusEvent): void;
   render(): any;

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

@@ -4,8 +4,9 @@ export declare class Q2Popover implements ComponentInterface {
   align: 'left' | 'right';
   open: boolean;
   block: boolean;
-  minHeight: number;
   controlElement: HTMLElement;
+  /** @deprecated */
+  minHeight: number;
   hostElement: HTMLElement;
   popoverStateChanged: EventEmitter<{
     open: boolean;
@@ -15,19 +16,26 @@ export declare class Q2Popover implements ComponentInterface {
   containerElement: HTMLDivElement;
   contentElement: HTMLDivElement;
   scheduledAfterRender: (() => void)[];
+  /**
+   * The number of pixels to leave between the popover and the edge of the viewport
+   */
+  displayBuffer: number;
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
   toggle(): Promise<void>;
   scrollContainerTo(options: ScrollToOptions): Promise<void>;
   openChanged(open: any): void;
+  minHeightProvided(): void;
   popoverStateHandler(event: CustomEvent<{
     open: boolean;
   }>): void;
+  handleMinHeight: () => void;
   viewPortChanged: () => void;
   addViewportListeners(): void;
   removeViewportListeners(): void;
   setDirectionAndShow(direction: 'up' | 'down'): Promise<void>;
+  get isModule(): boolean;
   determinePopDirection(): Promise<void>;
   determinePopOffset(): void;
   render(): any;

package/dist/types/components/q2-radio-group/index.d.ts

@@ -26,6 +26,11 @@ export declare class Q2RadioGroup implements ComponentInterface {
   readonlyUpdated(): void;
   handleDeprecatedTilelayout(tilelayout: boolean): void;
   tileLayoutUpdated(tileLayout: boolean): void;
+  /**
+   * Emulates clicking the `<q2-radio>` option with the provided value.
+   *
+   * @testOnly
+   */
   setValue(value: string): void;
   change: EventEmitter;
   onHostElementChange(event: CustomEvent): void;

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

@@ -27,6 +27,8 @@ export declare class Q2Select implements ComponentInterface {
   showSelected: boolean;
   searchText: string;
   hasCustomDisplay: boolean;
+  hasPopoverTop: boolean;
+  hasPopoverBottom: boolean;
   inputFocused: boolean;
   statusMessage: string;
   prioritizeSearch: boolean;
@@ -34,7 +36,7 @@ export declare class Q2Select implements ComponentInterface {
   inputField?: HTMLQ2InputElement;
   optionList: HTMLQ2OptionListElement;
   popoverElement?: HTMLQ2PopoverElement;
-  multiSelectHeader?: HTMLDivElement;
+  popoverTopContainer?: HTMLDivElement;
   scheduledAfterRender: (() => void)[];
   mutationObserver: MutationObserver;
   componentWillLoad(): void;
@@ -42,6 +44,7 @@ export declare class Q2Select implements ComponentInterface {
   componentDidRender(): void;
   disconnectedCallback(): void;
   get innerInputField(): HTMLInputElement | HTMLButtonElement;
+  get innerInputContainer(): HTMLElement;
   get badgeValue(): string;
   get popoverMinHeight(): number;
   get selectedDisplay(): string;
@@ -54,18 +57,44 @@ export declare class Q2Select implements ComponentInterface {
   ariaLabelObserver(): void;
   valueUpdated(): void;
   handleMultilineOptionsUpdate(newValue: any, oldValue: any): void;
-  openChanged(isOpen: any): void;
+  openChanged(isOpen: boolean): void;
   change: EventEmitter<{
     value: string;
     selectedOptions: string[];
   }>;
   input: EventEmitter;
   _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<{
@@ -102,8 +131,9 @@ export declare class Q2Select implements ComponentInterface {
   clearSelectedDisplay(): void;
   checkSelectedDisplay(): void | HTMLElement;
   checkSelectedDisplayHeight(): void;
-  popoverStateChanged: ({ detail: { open } }: CustomEvent<{
+  onPopoverState: ({ detail: { open, action }, }: CustomEvent<{
     open: boolean;
+    action: 'close' | 'select' | 'open';
   }>) => void;
   inputKeydownHandler: (event: KeyboardEvent) => Promise<void>;
   shouldClearSearchText(event: KeyboardEvent): boolean;

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

@@ -18,7 +18,7 @@ export declare class Q2Textarea {
   maxlength: number;
   rows: number;
   cols: number;
-  resize: 'none' | 'vertical' | 'horizontal' | 'both';
+  resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto';
   errors: string[];
   hints: string[];
   hasFocus: boolean;
@@ -46,6 +46,14 @@ export declare class Q2Textarea {
   onHostElementInput(event: CustomEvent): void;
   input: EventEmitter<any>;
   change: EventEmitter<any>;
+  /**
+   * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.
+   *
+   * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want
+   * to trigger the `change` event, move the focus to another element after calling this method.
+   *
+   * @testOnly
+   */
   setValue(value: string): void;
   onTextareaFocus: () => void;
   onTextareaBlur: () => void;
@@ -57,6 +65,9 @@ export declare class Q2Textarea {
   onTouchMove: (event: TouchEvent) => void;
   setWidth(event: MouseEvent | TouchEvent): void;
   setHeight(event: MouseEvent | TouchEvent): void;
+  increaseHeightIfOverflowing: () => void;
+  isOverflowingVertically: () => boolean;
+  getBorderOffset: () => number;
   onMouseUp: () => void;
   render(): any;
   maxLengthDOM(): any;

package/dist/types/components.d.ts

@@ -98,6 +98,10 @@ export namespace Components {
         "buttonLabel": string;
         "calendarLabel": string;
         "clearable": boolean;
+        /**
+          * Emulates clicking the `<input>` to hide the popover if it is visible.
+          * @testOnly
+         */
         "closePopover": () => Promise<void>;
         "cutoffTime": string;
         "daysOfWeekChecksum": number;
@@ -117,6 +121,10 @@ export namespace Components {
          */
         "onsuccess": (e: CustomEvent) => void;
         "open": boolean;
+        /**
+          * Emulates clicking the `<input>` to display the popover if it is hidden.
+          * @testOnly
+         */
         "openPopover": () => Promise<void>;
         "optional": boolean;
         "placeholder": string;
@@ -128,8 +136,17 @@ export namespace Components {
         "popoverDirection": 'up' | 'down';
         "popoverMinHeight": number;
         "readonly": boolean;
+        /**
+          * Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the provided date.  While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method will not select the date.
+          * @testOnly
+         */
         "setValue": (value: string | Date) => Promise<void>;
         "startDate": string;
+        /**
+          * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.  While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method will not select the date.
+          * @warning Only applicable when the input is typeable.
+          * @testOnly
+         */
         "typeValue": (value: string | Date) => Promise<void>;
         "typeable": boolean;
         "validDates": string[];
@@ -222,6 +239,9 @@ export namespace Components {
     }
     interface Q2ChartDonut {
         "chartName": string;
+        /**
+          * Clears any selected slice.
+         */
         "clearSelection": () => Promise<void>;
         "data": IDonutChartData[];
         "format": 'currency';
@@ -230,7 +250,13 @@ export namespace Components {
         "isClickable": boolean;
         "minSliceSize": string;
         "outerRadius": string;
+        /**
+          * Selects a slice by its provided `id` in the provided `data`.
+         */
         "selectById": (id: string) => Promise<void>;
+        /**
+          * Selects a slice by its index in the provided `data`.
+         */
         "selectByIndex": (index: number) => Promise<void>;
         "selectedId": string;
         "selectedOffset": number;
@@ -266,6 +292,10 @@ export namespace Components {
         "label": string;
         "optional": boolean;
         "readonly": boolean;
+        /**
+          * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.
+          * @testOnly
+         */
         "setValue": (values: string | string[]) => Promise<void>;
         "value": object;
     }
@@ -329,8 +359,20 @@ export namespace Components {
          */
         "ariaLabel": string;
         "block": boolean;
+        /**
+          * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
+          * @testOnly
+         */
         "clickCancel": () => Promise<void>;
+        /**
+          * Emulates clicking the edit button, which will display the `<q2-input>` field.
+          * @testOnly
+         */
         "clickEdit": () => Promise<void>;
+        /**
+          * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
+          * @testOnly
+         */
         "clickSave": () => Promise<void>;
         "disabled": boolean;
         "editing": boolean;
@@ -341,6 +383,10 @@ export namespace Components {
         "label": string;
         "maxlength": number;
         "persistentLabel": boolean;
+        /**
+          * 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>;
         "truncated": boolean;
         "type": Q2Input['type'];
@@ -367,6 +413,11 @@ export namespace Components {
         "autofocus": boolean;
         "badgeTheme": Q2Badge['theme'];
         "badgeValue": string;
+        /**
+          * Emulates clicking the clear button when the input is clearable.
+          * @warning Only applicable when the input is clearable.
+          * @testOnly
+         */
         "clearValue": () => Promise<void>;
         "clearable": boolean;
         "current": 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
@@ -387,7 +438,12 @@ export namespace Components {
         "pseudo": boolean;
         "readonly": boolean;
         "role": string;
+        /**
+          * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.  This method leaves the focus on the `<input>` and as a result does not trigger the `change` event. If you want to trigger the` change` event, move the focus to another element after calling this method.
+          * @testOnly
+         */
         "setValue": (value: string) => Promise<void>;
+        "showCount": boolean;
         "showVisibilityToggle": boolean;
         "step": number;
         "textHidden": boolean;
@@ -419,6 +475,9 @@ export namespace Components {
     interface Q2Message {
         "appearance": 'minimal' | 'standard';
         "description": boolean;
+        /**
+          * Prompts assistive technology to announce the message.
+         */
         "present": () => Promise<void>;
         "type": 'info' | 'error' | 'danger' | 'warning' | 'success';
     }
@@ -514,6 +573,9 @@ export namespace Components {
         "block": boolean;
         "controlElement": HTMLElement;
         "direction": 'up' | 'down';
+        /**
+          * @deprecated
+         */
         "minHeight": number;
         "open": boolean;
         "scrollContainerTo": (options: ScrollToOptions) => Promise<void>;
@@ -559,6 +621,10 @@ export namespace Components {
         "name": string;
         "optional": boolean;
         "readonly": boolean;
+        /**
+          * Emulates clicking the `<q2-radio>` option with the provided value.
+          * @testOnly
+         */
         "setValue": (value: string) => Promise<void>;
         "tileAlignment": 'left' | 'center' | 'right';
         "tileLayout": boolean;
@@ -579,6 +645,10 @@ export namespace Components {
           * @deprecated
          */
         "ariaLabel": string;
+        /**
+          * Emulates clicking the `<input>` to hide the popover if it is visible.
+          * @testOnly
+         */
         "closePopover": () => Promise<void>;
         "disabled": boolean;
         "errors": string[];
@@ -590,14 +660,27 @@ export namespace Components {
         "minRows": number;
         "multilineOptions": boolean;
         "multiple": boolean;
+        /**
+          * Emulates clicking the `<input>` to display the popover if it is hidden.
+          * @testOnly
+         */
         "openPopover": () => Promise<void>;
         "optional": boolean;
         "placeholder": string;
         "popDirection": 'up' | 'down';
         "readonly": boolean;
+        /**
+          * 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) => Promise<void>;
         "searchable": boolean;
         "selectedOptions": string[];
+        /**
+          * 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>;
         "value": string;
     }
@@ -681,8 +764,12 @@ export namespace Components {
         "optional": boolean;
         "placeholder": string;
         "readonly": boolean;
-        "resize": 'none' | 'vertical' | 'horizontal' | 'both';
+        "resize": 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto';
         "rows": number;
+        /**
+          * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.  This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want to trigger the `change` event, move the focus to another element after calling this method.
+          * @testOnly
+         */
         "setValue": (value: string) => Promise<void>;
         "spellcheck": boolean;
         "value": string;
@@ -1524,6 +1611,7 @@ declare namespace LocalJSX {
         "pseudo"?: boolean;
         "readonly"?: boolean;
         "role"?: string;
+        "showCount"?: boolean;
         "showVisibilityToggle"?: boolean;
         "step"?: number;
         "textHidden"?: boolean;
@@ -1652,6 +1740,9 @@ declare namespace LocalJSX {
         "block"?: boolean;
         "controlElement"?: HTMLElement;
         "direction"?: 'up' | 'down';
+        /**
+          * @deprecated
+         */
         "minHeight"?: number;
         "onPopoverStateChanged"?: (event: Q2PopoverCustomEvent<{ open: boolean }>) => void;
         "open"?: boolean;
@@ -1829,7 +1920,7 @@ declare namespace LocalJSX {
         "optional"?: boolean;
         "placeholder"?: string;
         "readonly"?: boolean;
-        "resize"?: 'none' | 'vertical' | 'horizontal' | 'both';
+        "resize"?: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto';
         "rows"?: number;
         "spellcheck"?: boolean;
         "value"?: string;

package/dist/types/global.d.ts

@@ -1,4 +1,5 @@
 import { ShowActionSheetFn } from 'q2-tecton-common/lib/utility/action-sheet';
+import { IPlatformDimensions } from 'q2-tecton-common/lib/types/platformDimensions';
 import { LocFn, ResizeIframeFn, ResolveMenuFn, NavigateToFn, ShowOverpanelFn } from './util';
 
 declare global {
@@ -19,7 +20,7 @@ declare global {
             inMobileApp: boolean;
             noStrings: boolean;
             platformUrl: string;
-            platformDimensions: Record<string, any>;
+            platformDimensions: IPlatformDimensions;
             useActionSheets?: boolean;
         };
         __forceSmoothScrollPolyfill__: boolean;

package/dist/types/utils/index.d.ts

@@ -26,6 +26,7 @@ export declare function capitalize(value: string): string;
 export declare function pick(props: string[]): (obj: object) => object;
 export declare function loc(key: string, subs?: IDict<any> | string[]): string;
 export declare function labelDOM(target: FormFieldTypes): any;
+export declare function hasSlotContent(target: HTMLElement, slotName: string): boolean;
 export declare function handleAriaLabel(target: Q2Input | Q2Select | Q2Radio | Q2Checkbox | Q2EditableField | Q2Dropdown | Q2DropdownItem | Q2Loading | Q2Carousel | Q2Calendar | Q2Btn): void;
 /**
  * Handles when a prop has been renamed on a component without introducing a breaking change.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.37.1",
+    "version": "1.38.1",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@stencil/core": "3.4.2",
-        "q2-tecton-common": "1.37.1",
+        "q2-tecton-common": "1.38.1",
         "smoothscroll-polyfill": "^0.4.4",
         "swiper": "8.4.4"
     },
@@ -54,5 +54,5 @@
         "tslint-config-prettier": "^1.18.0",
         "typescript": "4.7.4"
     },
-    "gitHead": "8df742a6b241195deebff62081bf508c95e36e76"
+    "gitHead": "a2ca6b68446da3e9c112df81f2722a1164d4df35"
 }