q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

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

@@ -5,13 +5,13 @@ export interface IOptionValue {
 }
 export declare class Q2OptionList implements ComponentInterface {
   role: 'listbox' | 'menu';
-  direction: 'up' | 'down';
   customSearch: boolean;
   noSelect: boolean;
   align: 'left' | 'right';
   selectedOptions: IOptionValue[];
   multiple: boolean;
   disabled: boolean;
+  showSelected: boolean;
   type: 'menu' | 'listbox';
   change: EventEmitter<{
     value: string;
@@ -19,7 +19,9 @@ export declare class Q2OptionList implements ComponentInterface {
   }>;
   popoverState: EventEmitter<{
     open: boolean;
+    action: 'close' | 'select' | 'open';
   }>;
+  ready: EventEmitter;
   hasOptions: boolean;
   contentElement: HTMLElement;
   activeIndex: number;
@@ -30,29 +32,35 @@ export declare class Q2OptionList implements ComponentInterface {
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
+  get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[];
   get allOptions(): HTMLQ2OptionElement[];
-  checkOptions(): void;
-  getRootSlot(element: Element): any;
+  get allVisibleOptions(): HTMLQ2OptionElement[];
+  checkOptions(): Promise<void>;
+  getRootSlot(element: Element): Element[];
   scrollToActiveOption(): void;
-  resizeIframe(): void;
   openDropdownWithActiveElement(activeIndex: number): void;
   getDefaultActiveIndex(): number;
   updateSingleOptionAttrs(): void;
   updateMultipleOptionAttrs(): void;
   setActiveOption(): void;
   setFocusedOption(): void;
-  getNextVisibleIndex(direction: any): any;
-  selectOption(selectedValue: string): void;
+  getNextVisibleIndex(direction: any): number;
+  focusSelectedSibling(option: HTMLQ2OptionElement): void;
+  selectOption(selectedOption: HTMLQ2OptionElement): void;
   adjustActiveOptionAndScroll(numToAdd: number): void;
   resetTimer(): void;
-  searchAndFocus(key: string): void;
+  searchOptions(key: string, shouldSelect?: boolean): void;
+  showSelectedUpdated(showSelected: boolean): void;
   selectedOptionsUpdated(): void;
   delegateFocus(event: FocusEvent): void;
   handleClick(event: MouseEvent): void;
   setDefaultActiveElement(): Promise<void>;
   setActiveElement(index: number): Promise<void>;
   handleExternalKeydown(event: KeyboardEvent): Promise<void>;
-  keydownHandler: (event: KeyboardEvent, ignoreSelectionEvents?: boolean) => void;
+  getContents(): Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]>;
+  getOptions(): Promise<HTMLQ2OptionElement[]>;
+  externalKeydownHandler: (event: KeyboardEvent) => void;
+  internalKeydownHandler: (event: KeyboardEvent) => void;
   focusoutHandler: (event: FocusEvent) => void;
   clickHandler: (event: Event) => void;
   render(): any;

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

@@ -1,6 +1,7 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { IOptionValue } from '../q2-option-list';
 export declare class Q2Pill implements ComponentInterface {
+  hoist: boolean;
   disabled: boolean;
   active: boolean;
   open: boolean;
@@ -13,6 +14,7 @@ export declare class Q2Pill implements ComponentInterface {
   popoverMinHeight: number;
   popoverDirection: 'up' | 'down';
   hasOptions: boolean;
+  selectedOptionElements: HTMLQ2OptionElement[];
   hostElement: HTMLElement;
   change: EventEmitter<{
     value: string;
@@ -32,14 +34,21 @@ export declare class Q2Pill implements ComponentInterface {
   disconnectedCallback(): void;
   get buttonContent(): string;
   get truncatedButtonContent(): string;
+  updateSelectedOptionElements: () => Promise<void>;
   determineHasOptions: () => void;
+  executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
+  handleSelectionChanges(changeDetails: {
+    value?: string;
+    values?: IOptionValue[];
+  }): void;
   clearSelectedOptions: () => void;
+  selectedOptionsWatcher(): void;
   delegateFocus(event: FocusEvent): void;
   popoverStateHandler({ detail: { open } }: CustomEvent<{
     open: boolean;
   }>): void;
   handleClick: (event: MouseEvent) => Promise<void>;
-  handleKeydown: (event: KeyboardEvent) => void;
+  handleKeydown: (event: KeyboardEvent) => Promise<void>;
   handleChange: (event: any) => void;
   handleWrapperClick: () => void;
   onClickElsewhere: (event: CustomEvent) => void;

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

@@ -13,8 +13,10 @@ export declare class Q2Popover implements ComponentInterface {
   privateDirection: 'down' | 'up';
   containerElement: HTMLDivElement;
   contentElement: HTMLDivElement;
+  scheduledAfterRender: (() => void)[];
   componentDidLoad(): void;
   componentWillRender(): void;
+  componentDidRender(): void;
   toggle(): Promise<void>;
   openChanged(open: any): void;
   popoverStateHandler(event: CustomEvent<{

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

@@ -1,11 +1,13 @@
 /// <reference types="node" />
 import { EventEmitter, Event, ComponentInterface } from '../../stencil-public-runtime';
+import { Q2OptionListCustomEvent } from 'src/components';
+import { IOptionValue } from '../q2-option-list';
 export declare class Q2Select implements ComponentInterface {
   label: string;
   hideLabel: boolean;
   value: string;
   ariaLabel: string;
-  selectedOptions: any;
+  selectedOptions: string[];
   disabled: boolean;
   readonly: boolean;
   invalid: boolean;
@@ -16,94 +18,91 @@ export declare class Q2Select implements ComponentInterface {
   searchable: boolean;
   multilineOptions: boolean;
   optional: boolean;
+  placeholder: string;
+  hoist: boolean;
   hostElement: HTMLElement;
-  dropdownOpen: boolean;
-  onlyShowingSelected: boolean;
-  activeOptionId: string;
+  open: boolean;
+  showSelected: boolean;
   searchText: string;
   hasCustomDisplay: boolean;
   inputFocused: boolean;
   statusMessage: string;
   prioritizeSearch: boolean;
+  structuredSelectedOptions: IOptionValue[];
   inputField?: HTMLQ2InputElement | HTMLButtonElement;
-  dropdownContainer?: HTMLDivElement;
+  optionList: HTMLQ2OptionListElement;
+  popoverElement?: HTMLQ2PopoverElement;
   multiSelectHeader?: HTMLDivElement;
-  privatePopDirection: 'down' | 'up';
-  activeIndex: number;
-  pivotIndex: number;
   scheduledAfterRender: (() => void)[];
-  keyStore: {
-    queue: string[];
-    lastPressedAt: Date;
-  };
-  guid: number;
   mutationObserver: MutationObserver;
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
-  get isComponentFocused(): boolean;
-  get isSearchMode(): string | true;
-  get badgeValue(): any;
-  get minPopHeight(): number;
-  get selectedDisplay(): any;
+  get badgeValue(): string;
+  get popoverMinHeight(): number;
+  get selectedDisplay(): string;
   get selectedDisplaySlot(): HTMLElement;
-  get firstSelectedValue(): any;
+  get firstSelectedValue(): string;
   get firstSelectedOptionElement(): HTMLQ2OptionElement;
   get optionElements(): HTMLQ2OptionElement[];
-  get visibleOptionElements(): HTMLQ2OptionElement[];
   get wrapperClasses(): string;
+  buildStructuredSelectedOptions(): void;
   ariaLabelObserver(): void;
   valueUpdated(): void;
-  selectedOptionsUpdated(): void;
-  multilineOptionsChanged(newValue: any, oldValue: any): void;
-  dropdownOpenChanged(isOpen: any): void;
-  change: EventEmitter;
+  handleMultilineOptionsUpdate(newValue: any, oldValue: any): void;
+  openChanged(isOpen: any): void;
+  change: EventEmitter<{
+    value: string;
+    selectedOptions: string[];
+  }>;
   input: EventEmitter;
   keydownHandler(event: KeyboardEvent): void;
-  onHostElementChange(event: CustomEvent): void;
+  onHostElementChange(event: CustomEvent<{
+    value: string;
+    selectedOptions: string[];
+  }>): void;
   onHostElementInput(event: CustomEvent): void;
   delegateFocus(event: FocusEvent): void;
   handleFocusout(event: FocusEvent): void;
-  clickHandler(event: Event): void;
-  getDefaultActiveIndex(): number;
-  getLastEnabledIndex(): any;
-  setActiveOption(): void;
-  setFocusedOption(): void;
-  calculateMultiSelectSelectedDisplay(): any;
+  executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
+  handleSelectionChanges(changeDetails: {
+    value?: string;
+    values?: IOptionValue[];
+  }): void;
+  showSelectedOptions: (event: MouseEvent) => void;
+  showAllOptions: (event?: MouseEvent) => void;
+  clearValue(): void;
+  calculateMultiSelectSelectedDisplay(): string;
   calculateSingleSelectSelectedDisplay(): string;
-  updateSingleOptionAttrs(): void;
-  updateMultipleOptionAttrs(): void;
   onMutationObserved: () => void;
-  focusSelectedSibling(option: HTMLQ2OptionElement): void;
-  selectOption(option: HTMLQ2OptionElement, focusInputOnClose?: boolean): void;
-  scrollToActiveOption(): void;
+  onOptionListChange: (event: Q2OptionListCustomEvent<{
+    value: string;
+    values: IOptionValue[];
+  }>) => void;
   openDropdownWithoutActiveElement(): void;
-  openDropdownWithActiveElement(activeIndex: number): void;
   closeDropdown(): void;
+  clearSearchText(): void;
   toggleDropdown(): void;
-  adjustActiveOptionAndScroll(numToAdd: number): void;
-  setDefaultActiveElement(): void;
   focusInput(): void;
-  getNextVisibleIndex(direction: any): any;
   statusMessageTimer: NodeJS.Timeout;
   setStatusMessage(message: any): void;
   clearSelectedDisplay(): void;
   checkSelectedDisplay(): void | HTMLElement;
   checkSelectedDisplayHeight(): void;
-  searchAndFocus: (keyValue: any) => void;
-  dropdownFocusoutHandler: (event: FocusEvent) => void;
-  dropdownKeydownHandler: (event: KeyboardEvent) => void;
-  inputKeydownHandler: (event: KeyboardEvent) => void;
-  inputClickHandler: (event: Event) => void;
+  popoverStateChanged: ({ detail: { open } }: CustomEvent<{
+    open: boolean;
+  }>) => void;
+  inputKeydownHandler: (event: KeyboardEvent) => Promise<void>;
+  shouldClearSearchText(event: KeyboardEvent): boolean;
+  visibilityToggleKeyDown: (event: KeyboardEvent) => void;
+  inputClickHandler: (event: MouseEvent) => Promise<void>;
   inputInputHandler: (event: CustomEvent) => void;
   inputFocusHandler: () => void;
   inputBlurHandler: () => void;
   inputChangeHandler: (event: Event) => void;
   clickedElsewhere: (event: CustomEvent) => void;
   onCustomDisplayClick: (event: MouseEvent) => void;
-  showSelectedOptions: (event: MouseEvent) => void;
-  showAllOptions: (event: MouseEvent) => void;
   renderCustomDisplay(): any;
   render(): any;
   optionsDropdown(): any;

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

@@ -1,5 +1,6 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 export declare class Q2Tag implements ComponentInterface {
+  hoist: boolean;
   open: boolean;
   role: string;
   label: string;
@@ -26,8 +27,8 @@ export declare class Q2Tag implements ComponentInterface {
   }>): void;
   onClickElsewhere: (event: CustomEvent) => void;
   handleChange: (event: any) => void;
-  handleClick: (event: MouseEvent) => void;
-  handleKeydown: (event: KeyboardEvent) => void;
+  handleClick: (event: MouseEvent) => Promise<void>;
+  handleKeydown: (event: KeyboardEvent) => Promise<void>;
   handleButtonFocusout: (event: FocusEvent) => void;
   handleWrapperClick: () => void;
   render(): any;

package/dist/types/components.d.ts

@@ -5,6 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/utility/action-sheet";
 import { IChartData } from "src/utils/charting";
 import { IDonutChartData } from "./components/q2-chart-donut/index";
 import { IEventDetail } from "./components/q2-input/types";
@@ -14,6 +15,12 @@ import { IStepperPaneEvent } from "./components/q2-stepper-pane/index";
 export namespace Components {
     interface ClickElsewhere {
     }
+    interface Q2ActionSheet {
+        "data": ActionSheetData;
+        "hide": (data?: ActionSheetListCloseData) => Promise<void>;
+        "hideClose": boolean;
+        "show": () => Promise<void>;
+    }
     interface Q2Avatar {
         "icon": string;
         "initials": string;
@@ -104,6 +111,27 @@ export namespace Components {
         "label": string;
         "siblingCount": number;
     }
+    interface Q2ChartArea {
+        "alignChartName": 'left' | 'right' | 'center';
+        "areaColor": string;
+        "chartName": string;
+        "data": IChartData[];
+        "dataNamesOverflow": 'break' | 'truncate';
+        "dataNamesWidth": number;
+        "format": 'currency' | 'default';
+        "formatModifier": string;
+        "gridLines": 'horizontal' | 'vertical' | 'off';
+        "hideNameAxisLabels": boolean;
+        "hideValueAxisLabels": boolean;
+        "lineColor": string;
+        "offsetDataNames": boolean;
+        "offsetDataValues": boolean;
+        "pointerLineColor": string;
+        "pointerLineStyle": 'solid' | 'dashed';
+        "showChartName": boolean;
+        "showDatapointLabels": boolean;
+        "showGradient": boolean;
+    }
     interface Q2ChartBar {
         "alignChartName": 'left' | 'right' | 'center';
         "chartName": string;
@@ -282,18 +310,16 @@ export namespace Components {
         "display": string;
         "hidden": boolean;
         "multiline": boolean;
-        "noSelect": boolean;
-        "optionId": string;
         "role": string;
         "selected": boolean;
-        "tabindex": string;
         "value": string;
     }
     interface Q2OptionList {
         "align": 'left' | 'right';
         "customSearch": boolean;
-        "direction": 'up' | 'down';
         "disabled": boolean;
+        "getContents": () => Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]>;
+        "getOptions": () => Promise<HTMLQ2OptionElement[]>;
         "handleExternalKeydown": (event: KeyboardEvent) => Promise<void>;
         "multiple": boolean;
         "noSelect": boolean;
@@ -301,6 +327,7 @@ export namespace Components {
         "selectedOptions": IOptionValue[];
         "setActiveElement": (index: number) => Promise<void>;
         "setDefaultActiveElement": () => Promise<void>;
+        "showSelected": boolean;
         "type": 'menu' | 'listbox';
     }
     interface Q2Pagination {
@@ -315,6 +342,7 @@ export namespace Components {
     interface Q2Pill {
         "active": boolean;
         "disabled": boolean;
+        "hoist": boolean;
         "label": string;
         "maxLength": number;
         "multiple": boolean;
@@ -369,16 +397,18 @@ export namespace Components {
         "disabled": boolean;
         "errors": string[];
         "hideLabel": boolean;
+        "hoist": boolean;
         "invalid": boolean;
         "label": string;
         "minRows": number;
         "multilineOptions": boolean;
         "multiple": boolean;
         "optional": boolean;
+        "placeholder": string;
         "popDirection": 'up' | 'down';
         "readonly": boolean;
         "searchable": boolean;
-        "selectedOptions": any;
+        "selectedOptions": string[];
         "value": string;
     }
     interface Q2Stepper {
@@ -414,6 +444,7 @@ export namespace Components {
         "value": string;
     }
     interface Q2Tag {
+        "hoist": boolean;
         "label": string;
         "open": boolean;
         "popoverDirection": 'up' | 'down';
@@ -467,6 +498,10 @@ export interface ClickElsewhereCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLClickElsewhereElement;
 }
+export interface Q2ActionSheetCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2ActionSheetElement;
+}
 export interface Q2CalendarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2CalendarElement;
@@ -483,6 +518,10 @@ export interface Q2CarouselPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2CarouselPaneElement;
 }
+export interface Q2ChartAreaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2ChartAreaElement;
+}
 export interface Q2ChartDonutCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2ChartDonutElement;
@@ -578,6 +617,12 @@ declare global {
         prototype: HTMLClickElsewhereElement;
         new (): HTMLClickElsewhereElement;
     };
+    interface HTMLQ2ActionSheetElement extends Components.Q2ActionSheet, HTMLStencilElement {
+    }
+    var HTMLQ2ActionSheetElement: {
+        prototype: HTMLQ2ActionSheetElement;
+        new (): HTMLQ2ActionSheetElement;
+    };
     interface HTMLQ2AvatarElement extends Components.Q2Avatar, HTMLStencilElement {
     }
     var HTMLQ2AvatarElement: {
@@ -620,6 +665,12 @@ declare global {
         prototype: HTMLQ2CarouselPaneElement;
         new (): HTMLQ2CarouselPaneElement;
     };
+    interface HTMLQ2ChartAreaElement extends Components.Q2ChartArea, HTMLStencilElement {
+    }
+    var HTMLQ2ChartAreaElement: {
+        prototype: HTMLQ2ChartAreaElement;
+        new (): HTMLQ2ChartAreaElement;
+    };
     interface HTMLQ2ChartBarElement extends Components.Q2ChartBar, HTMLStencilElement {
     }
     var HTMLQ2ChartBarElement: {
@@ -820,6 +871,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "click-elsewhere": HTMLClickElsewhereElement;
+        "q2-action-sheet": HTMLQ2ActionSheetElement;
         "q2-avatar": HTMLQ2AvatarElement;
         "q2-badge": HTMLQ2BadgeElement;
         "q2-btn": HTMLQ2BtnElement;
@@ -827,6 +879,7 @@ declare global {
         "q2-card": HTMLQ2CardElement;
         "q2-carousel": HTMLQ2CarouselElement;
         "q2-carousel-pane": HTMLQ2CarouselPaneElement;
+        "q2-chart-area": HTMLQ2ChartAreaElement;
         "q2-chart-bar": HTMLQ2ChartBarElement;
         "q2-chart-donut": HTMLQ2ChartDonutElement;
         "q2-checkbox": HTMLQ2CheckboxElement;
@@ -866,6 +919,12 @@ declare namespace LocalJSX {
     interface ClickElsewhere {
         "onChange"?: (event: ClickElsewhereCustomEvent<any>) => void;
     }
+    interface Q2ActionSheet {
+        "data"?: ActionSheetData;
+        "hideClose"?: boolean;
+        "onClose"?: (event: Q2ActionSheetCustomEvent<ActionSheetListCloseData>) => void;
+        "onReady"?: (event: Q2ActionSheetCustomEvent<any>) => void;
+    }
     interface Q2Avatar {
         "icon"?: string;
         "initials"?: string;
@@ -962,6 +1021,28 @@ declare namespace LocalJSX {
         "onClickCarouselPane"?: (event: Q2CarouselPaneCustomEvent<any>) => void;
         "siblingCount"?: number;
     }
+    interface Q2ChartArea {
+        "alignChartName"?: 'left' | 'right' | 'center';
+        "areaColor"?: string;
+        "chartName"?: string;
+        "data"?: IChartData[];
+        "dataNamesOverflow"?: 'break' | 'truncate';
+        "dataNamesWidth"?: number;
+        "format"?: 'currency' | 'default';
+        "formatModifier"?: string;
+        "gridLines"?: 'horizontal' | 'vertical' | 'off';
+        "hideNameAxisLabels"?: boolean;
+        "hideValueAxisLabels"?: boolean;
+        "lineColor"?: string;
+        "offsetDataNames"?: boolean;
+        "offsetDataValues"?: boolean;
+        "onChange"?: (event: Q2ChartAreaCustomEvent<any>) => void;
+        "pointerLineColor"?: string;
+        "pointerLineStyle"?: 'solid' | 'dashed';
+        "showChartName"?: boolean;
+        "showDatapointLabels"?: boolean;
+        "showGradient"?: boolean;
+    }
     interface Q2ChartBar {
         "alignChartName"?: 'left' | 'right' | 'center';
         "chartName"?: string;
@@ -1006,7 +1087,7 @@ declare namespace LocalJSX {
         "indeterminate"?: boolean;
         "label"?: string;
         "name"?: string;
-        "onChange"?: (event: Q2CheckboxCustomEvent<any>) => void;
+        "onChange"?: (event: Q2CheckboxCustomEvent<{ value: string; checked: boolean }>) => void;
         "readonly"?: boolean;
         "type"?: string;
         "value"?: string;
@@ -1147,24 +1228,22 @@ declare namespace LocalJSX {
         "display"?: string;
         "hidden"?: boolean;
         "multiline"?: boolean;
-        "noSelect"?: boolean;
-        "optionId"?: string;
         "role"?: string;
         "selected"?: boolean;
-        "tabindex"?: string;
         "value"?: string;
     }
     interface Q2OptionList {
         "align"?: 'left' | 'right';
         "customSearch"?: boolean;
-        "direction"?: 'up' | 'down';
         "disabled"?: boolean;
         "multiple"?: boolean;
         "noSelect"?: boolean;
         "onChange"?: (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => void;
-        "onPopoverState"?: (event: Q2OptionListCustomEvent<{ open: boolean }>) => void;
+        "onPopoverState"?: (event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => void;
+        "onReady"?: (event: Q2OptionListCustomEvent<any>) => void;
         "role"?: 'listbox' | 'menu';
         "selectedOptions"?: IOptionValue[];
+        "showSelected"?: boolean;
         "type"?: 'menu' | 'listbox';
     }
     interface Q2Pagination {
@@ -1180,6 +1259,7 @@ declare namespace LocalJSX {
     interface Q2Pill {
         "active"?: boolean;
         "disabled"?: boolean;
+        "hoist"?: boolean;
         "label"?: string;
         "maxLength"?: number;
         "multiple"?: boolean;
@@ -1238,18 +1318,20 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "errors"?: string[];
         "hideLabel"?: boolean;
+        "hoist"?: boolean;
         "invalid"?: boolean;
         "label"?: string;
         "minRows"?: number;
         "multilineOptions"?: boolean;
         "multiple"?: boolean;
-        "onChange"?: (event: Q2SelectCustomEvent<any>) => void;
+        "onChange"?: (event: Q2SelectCustomEvent<{ value: string; selectedOptions: string[] }>) => void;
         "onInput"?: (event: Q2SelectCustomEvent<any>) => void;
         "optional"?: boolean;
+        "placeholder"?: string;
         "popDirection"?: 'up' | 'down';
         "readonly"?: boolean;
         "searchable"?: boolean;
-        "selectedOptions"?: any;
+        "selectedOptions"?: string[];
         "value"?: string;
     }
     interface Q2Stepper {
@@ -1292,6 +1374,7 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface Q2Tag {
+        "hoist"?: boolean;
         "label"?: string;
         "onClick"?: (event: Q2TagCustomEvent<{ value: string }>) => void;
         "open"?: boolean;
@@ -1346,6 +1429,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "click-elsewhere": ClickElsewhere;
+        "q2-action-sheet": Q2ActionSheet;
         "q2-avatar": Q2Avatar;
         "q2-badge": Q2Badge;
         "q2-btn": Q2Btn;
@@ -1353,6 +1437,7 @@ declare namespace LocalJSX {
         "q2-card": Q2Card;
         "q2-carousel": Q2Carousel;
         "q2-carousel-pane": Q2CarouselPane;
+        "q2-chart-area": Q2ChartArea;
         "q2-chart-bar": Q2ChartBar;
         "q2-chart-donut": Q2ChartDonut;
         "q2-checkbox": Q2Checkbox;
@@ -1393,6 +1478,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "click-elsewhere": LocalJSX.ClickElsewhere & JSXBase.HTMLAttributes<HTMLClickElsewhereElement>;
+            "q2-action-sheet": LocalJSX.Q2ActionSheet & JSXBase.HTMLAttributes<HTMLQ2ActionSheetElement>;
             "q2-avatar": LocalJSX.Q2Avatar & JSXBase.HTMLAttributes<HTMLQ2AvatarElement>;
             "q2-badge": LocalJSX.Q2Badge & JSXBase.HTMLAttributes<HTMLQ2BadgeElement>;
             "q2-btn": LocalJSX.Q2Btn & JSXBase.HTMLAttributes<HTMLQ2BtnElement>;
@@ -1400,6 +1486,7 @@ declare module "@stencil/core" {
             "q2-card": LocalJSX.Q2Card & JSXBase.HTMLAttributes<HTMLQ2CardElement>;
             "q2-carousel": LocalJSX.Q2Carousel & JSXBase.HTMLAttributes<HTMLQ2CarouselElement>;
             "q2-carousel-pane": LocalJSX.Q2CarouselPane & JSXBase.HTMLAttributes<HTMLQ2CarouselPaneElement>;
+            "q2-chart-area": LocalJSX.Q2ChartArea & JSXBase.HTMLAttributes<HTMLQ2ChartAreaElement>;
             "q2-chart-bar": LocalJSX.Q2ChartBar & JSXBase.HTMLAttributes<HTMLQ2ChartBarElement>;
             "q2-chart-donut": LocalJSX.Q2ChartDonut & JSXBase.HTMLAttributes<HTMLQ2ChartDonutElement>;
             "q2-checkbox": LocalJSX.Q2Checkbox & JSXBase.HTMLAttributes<HTMLQ2CheckboxElement>;

package/dist/types/global.d.ts

@@ -1,17 +1,26 @@
+import { ShowActionSheetFn } from 'q2-tecton-common/lib/utility/action-sheet';
 import { LocFn, ResizeIframeFn, ResolveMenuFn, NavigateToFn, ShowOverpanelFn } from './util';
 
 declare global {
     interface Window {
+        tecton: {
+            actions: Record<string, any>;
+            sources: Record<string, any>;
+        };
         TectonElements?: {
             loc: LocFn;
             resizeIframe: ResizeIframeFn;
             resolveMenu: ResolveMenuFn;
             navigateTo: NavigateToFn;
             showOverpanel: ShowOverpanelFn;
+            showActionSheet?: ShowActionSheetFn;
         };
         Tecton?: {
             inMobileApp: boolean;
-            noString: boolean;
+            noStrings: boolean;
+            platformUrl: string;
+            platformDimensions: Record<string, any>;
+            useActionSheets?: boolean;
         };
         __forceSmoothScrollPolyfill__: boolean;
     }

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/dist/types/utils/index.d.ts

@@ -10,6 +10,7 @@ import { Q2Loading } from 'src/components/q2-loading';
 import { Q2Radio } from 'src/components/q2-radio';
 import { Q2Select } from 'src/components/q2-select';
 import { FormFieldTypes, IDict } from 'src/util';
+export declare function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement): boolean;
 export declare function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement): boolean;
 export declare function isEventFromElement(event: Event, element: HTMLElement): boolean;
 export declare function overrideFocus(hostElement: HTMLElement): void;
@@ -18,7 +19,8 @@ export declare function isFirefox(): boolean;
 export declare function isTouchDevice(): boolean;
 export declare function isSafari(): boolean;
 export declare function createGuid(): number;
-export declare function nextPaint(fn: () => void, execute?: boolean): void;
+export declare function nextPaint(fn: (value?: unknown) => void): void;
+export declare function waitForNextPaint(): Promise<unknown>;
 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;