q2-tecton-elements 1.23.0 → 1.25.0

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;
@@ -303,18 +310,16 @@ export namespace Components {
         "display": string;
         "hidden": boolean;
         "multiline": boolean;
-        "noSelect": boolean;
-        "optionId": string;
-        "role": string;
+        "role": 'option' | 'menuitem';
         "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;
@@ -322,6 +327,7 @@ export namespace Components {
         "selectedOptions": IOptionValue[];
         "setActiveElement": (index: number) => Promise<void>;
         "setDefaultActiveElement": () => Promise<void>;
+        "showSelected": boolean;
         "type": 'menu' | 'listbox';
     }
     interface Q2Pagination {
@@ -336,6 +342,7 @@ export namespace Components {
     interface Q2Pill {
         "active": boolean;
         "disabled": boolean;
+        "hoist": boolean;
         "label": string;
         "maxLength": number;
         "multiple": boolean;
@@ -390,6 +397,7 @@ export namespace Components {
         "disabled": boolean;
         "errors": string[];
         "hideLabel": boolean;
+        "hoist": boolean;
         "invalid": boolean;
         "label": string;
         "minRows": number;
@@ -400,7 +408,7 @@ export namespace Components {
         "popDirection": 'up' | 'down';
         "readonly": boolean;
         "searchable": boolean;
-        "selectedOptions": any;
+        "selectedOptions": string[];
         "value": string;
     }
     interface Q2Stepper {
@@ -436,11 +444,11 @@ export namespace Components {
         "value": string;
     }
     interface Q2Tag {
+        "hoist": boolean;
         "label": string;
         "open": boolean;
         "popoverDirection": 'up' | 'down';
         "popoverMinHeight": number;
-        "role": string;
         "theme": 'primary' | 'secondary' | 'tertiary';
     }
     interface Q2Textarea {
@@ -489,6 +497,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;
@@ -604,6 +616,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: {
@@ -852,6 +870,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "click-elsewhere": HTMLClickElsewhereElement;
+        "q2-action-sheet": HTMLQ2ActionSheetElement;
         "q2-avatar": HTMLQ2AvatarElement;
         "q2-badge": HTMLQ2BadgeElement;
         "q2-btn": HTMLQ2BtnElement;
@@ -899,6 +918,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;
@@ -1061,7 +1086,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;
@@ -1202,24 +1227,22 @@ declare namespace LocalJSX {
         "display"?: string;
         "hidden"?: boolean;
         "multiline"?: boolean;
-        "noSelect"?: boolean;
-        "optionId"?: string;
-        "role"?: string;
+        "role"?: 'option' | 'menuitem';
         "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 {
@@ -1235,6 +1258,7 @@ declare namespace LocalJSX {
     interface Q2Pill {
         "active"?: boolean;
         "disabled"?: boolean;
+        "hoist"?: boolean;
         "label"?: string;
         "maxLength"?: number;
         "multiple"?: boolean;
@@ -1293,19 +1317,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 {
@@ -1348,12 +1373,12 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface Q2Tag {
+        "hoist"?: boolean;
         "label"?: string;
         "onClick"?: (event: Q2TagCustomEvent<{ value: string }>) => void;
         "open"?: boolean;
         "popoverDirection"?: 'up' | 'down';
         "popoverMinHeight"?: number;
-        "role"?: string;
         "theme"?: 'primary' | 'secondary' | 'tertiary';
     }
     interface Q2Textarea {
@@ -1402,6 +1427,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "click-elsewhere": ClickElsewhere;
+        "q2-action-sheet": Q2ActionSheet;
         "q2-avatar": Q2Avatar;
         "q2-badge": Q2Badge;
         "q2-btn": Q2Btn;
@@ -1450,6 +1476,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>;

package/dist/types/global.d.ts

@@ -1,19 +1,26 @@
-import { LocFn, ResizeIframeFn, ResolveMenuFn, NavigateToFn, ShowOverpanelFn, IDict } from './util';
+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;
             noStrings: boolean;
             platformUrl: string;
-            platformDimensions: IDict<any>;
+            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,8 @@ 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 isMobile(): boolean;
+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 +20,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;

package/dist/types/workspace/workspace/Tecton_tecton-production_master/packages/q2-tecton-elements/.stencil/test/helpers.d.ts

@@ -11,6 +11,6 @@ export declare function setWindowHeight(height: number): void;
 export declare function makeDomRect(customAttributes: any): any;
 export declare const base64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=";
 export declare function getActiveElementTestId(page: E2EPage): Promise<string>;
-export declare const getFocusedValue: (page: E2EPage) => Promise<string>;
+export declare const getFocusedOptionValue: (page: E2EPage) => Promise<string>;
 export declare const getFocusedTagName: (page: E2EPage) => Promise<string>;
 export declare function getFocusedAttribute(page: E2EPage, attribute: string): Promise<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.23.0",
+    "version": "1.25.0",
     "description": "Q2 Tecton Custom Elements",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -22,6 +22,7 @@
         "build:prod": "stencil build",
         "build:elements": "stencil build",
         "build:local": "stencil build --dev --watch --serve",
+        "build:docs-json": "stencil build --docs-json dist/docs.json",
         "test": "stencil test --spec --e2e",
         "test:dev": "stencil test --spec --e2e --watchAll",
         "clean": "rm -rf dist tmp",
@@ -49,8 +50,9 @@
     "dependencies": {
         "@stencil/core": "2.19.2",
         "puppeteer": "^10.4.0",
+        "q2-tecton-common": "^1.25.0",
         "smoothscroll-polyfill": "^0.4.4",
         "swiper": "8.4.4"
     },
-    "gitHead": "618b0e86c3a5d915bfa221fdc27d5501c90766b6"
+    "gitHead": "e2c4b205d38e2411a417a5afa4903e58a308e9ad"
 }

package/dist/cjs/q2-optgroup.cjs.entry.js

@@ -1,56 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-734296a7.js');
-const index$1 = require('./index-0648c2ec.js');
-
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:var(--comp-multi-select-header-height, 0);z-index:1}";
-
-const Q2Optgroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.guid = index$1.createGuid();
-    this.setHidden = () => {
-      this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
-    };
-    this.disabled = false;
-    this.label = undefined;
-    this.hidden = false;
-  }
-  /// LIFECYCLE HOOKS ///
-  componentWillLoad() {
-    const observer = new MutationObserver(this.setHidden);
-    observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
-    this.mutationObserver = observer;
-    // set initially
-    this.setHidden();
-    this.disabledWatcher(this.disabled);
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
-    this.mutationObserver = null;
-  }
-  get headerId() {
-    return `q2-optgroup-header-${this.guid}`;
-  }
-  get options() {
-    return Array.from(this.hostElement.querySelectorAll('q2-option'));
-  }
-  ///// OBSERVERS ///////
-  disabledWatcher(disabled) {
-    this.options.forEach(opt => {
-      opt.disabledGroup = !!disabled;
-    });
-  }
-  render() {
-    return (index.h("div", { class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { class: "q2-optgroup-options" }, index.h("slot", null))));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "disabled": ["disabledWatcher"]
-  }; }
-};
-Q2Optgroup.style = stylesCss;
-
-exports.q2_optgroup = Q2Optgroup;

package/dist/cjs/q2-option.cjs.entry.js

@@ -1,46 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-734296a7.js');
-
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
-
-const Q2Option = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.role = 'option';
-    this.tabindex = '-1';
-    this.display = undefined;
-    this.value = undefined;
-    this.disabled = undefined;
-    this.optionId = undefined;
-    this.disabledGroup = undefined;
-    this.selected = undefined;
-    this.hidden = undefined;
-    this.multiline = undefined;
-    this.active = undefined;
-    this.noSelect = undefined;
-    this._multiSelectHidden = false;
-  }
-  componentWillLoad() {
-    this.handleDisplay();
-  }
-  handleDisplay() {
-    if (this.display || this.multiline)
-      return;
-    this.display = this.hostElement.textContent.trim();
-  }
-  render() {
-    const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
-    const isDisabled = disabled || disabledGroup;
-    return (index.h(index.Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && index.h("q2-icon", { type: "checkmark" }), index.h("div", { class: "content" }, index.h("slot", null))));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-};
-Q2Option.style = stylesCss;
-
-exports.q2_option = Q2Option;

package/dist/esm/q2-optgroup.entry.js

@@ -1,52 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-bb1c8c7f.js';
-import { c as createGuid, l as loc } from './index-501fd22e.js';
-
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:var(--comp-multi-select-header-height, 0);z-index:1}";
-
-const Q2Optgroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.guid = createGuid();
-    this.setHidden = () => {
-      this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
-    };
-    this.disabled = false;
-    this.label = undefined;
-    this.hidden = false;
-  }
-  /// LIFECYCLE HOOKS ///
-  componentWillLoad() {
-    const observer = new MutationObserver(this.setHidden);
-    observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
-    this.mutationObserver = observer;
-    // set initially
-    this.setHidden();
-    this.disabledWatcher(this.disabled);
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
-    this.mutationObserver = null;
-  }
-  get headerId() {
-    return `q2-optgroup-header-${this.guid}`;
-  }
-  get options() {
-    return Array.from(this.hostElement.querySelectorAll('q2-option'));
-  }
-  ///// OBSERVERS ///////
-  disabledWatcher(disabled) {
-    this.options.forEach(opt => {
-      opt.disabledGroup = !!disabled;
-    });
-  }
-  render() {
-    return (h("div", { class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { class: "q2-optgroup-options" }, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "disabled": ["disabledWatcher"]
-  }; }
-};
-Q2Optgroup.style = stylesCss;
-
-export { Q2Optgroup as q2_optgroup };

package/dist/esm/q2-option.entry.js

@@ -1,42 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-bb1c8c7f.js';
-
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
-
-const Q2Option = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.role = 'option';
-    this.tabindex = '-1';
-    this.display = undefined;
-    this.value = undefined;
-    this.disabled = undefined;
-    this.optionId = undefined;
-    this.disabledGroup = undefined;
-    this.selected = undefined;
-    this.hidden = undefined;
-    this.multiline = undefined;
-    this.active = undefined;
-    this.noSelect = undefined;
-    this._multiSelectHidden = false;
-  }
-  componentWillLoad() {
-    this.handleDisplay();
-  }
-  handleDisplay() {
-    if (this.display || this.multiline)
-      return;
-    this.display = this.hostElement.textContent.trim();
-  }
-  render() {
-    const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
-    const isDisabled = disabled || disabledGroup;
-    return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-};
-Q2Option.style = stylesCss;
-
-export { Q2Option as q2_option };

package/dist/q2-tecton-elements/p-18629cbf.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,g as a}from"./p-926a3e80.js";import{g as e,o,n as r,i}from"./p-a510290a.js";const n=class{constructor(s){t(this,s),this.type="info",this.appearance="standard",this.description=!1,this.presentToggle=void 0}get isFirefox(){return e()}componentDidLoad(){o(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle,t&&r((()=>{this.presentToggle=!1}))}delegateFocus(t){i(t,this.hostElement)&&this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this,a=t&&this.presentToggle,e=!t&&this.presentToggle,{description:o}=this;return s("div",{tabindex:"-1",class:"message",role:o?void 0:"alert","aria-live":o?void 0:"assertive","aria-atomic":o?void 0:"true","aria-relevant":o?void 0:"all"},"standard"===this.appearance?function(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};return s("q2-icon",{type:a[t]||a.info,class:"message-icon"})}(this.type):"",e&&s("div",{class:"sr"}),s("div",{class:"message-content","aria-hidden":a?"true":void 0},s("slot",null)))}get hostElement(){return a(this)}};n.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";export{n as q2_message}

package/dist/q2-tecton-elements/p-2c20fc43.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as o,H as e,g as s}from"./p-926a3e80.js";import{o as n,i as r}from"./p-a510290a.js";const a=class{constructor(o){t(this,o),this.change=i(this,"change",7),this.popoverState=i(this,"popoverState",7),this.scheduledAfterRender=[],this.keydownHandler=(t,i)=>{t.stopPropagation();const{activeIndex:o,customSearch:e,allOptions:s}=this,{key:n,shiftKey:r}=t;let a;switch(n){case" ":case"Enter":if(i){this.setDefaultActiveElement();break}if(t.preventDefault(),a=s.find((t=>t.active)),!a||a.disabled)break;this.selectOption(a.value);break;case"ArrowUp":if(t.preventDefault(),0===o)break;if(void 0===o)this.setDefaultActiveElement();else{const t=this.getNextVisibleIndex(-1);if(-1===t)break;this.adjustActiveOptionAndScroll(t-o)}break;case"ArrowDown":if(t.preventDefault(),o===s.length-1)break;if(void 0===o)this.setDefaultActiveElement();else{const t=this.getNextVisibleIndex(1);if(-1===t)break;this.adjustActiveOptionAndScroll(t-o)}break;case"Home":t.preventDefault(),this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault(),this.openDropdownWithActiveElement(s.length-1);break;case"PageUp":t.preventDefault(),this.openDropdownWithActiveElement(Math.max(o-10,0));break;case"PageDown":t.preventDefault(),this.openDropdownWithActiveElement(Math.min(o+10,s.length-1));break;case"Tab":if(i)break;if(r)break;if(a=s.find((t=>t.active)),!a||a.disabled)return;this.selectOption(a.value);break;case"Esc":case"Escape":this.noSelect&&this.setActiveElement(null),this.popoverState.emit({open:!1});break;default:if(e)break;if(!n.match(/^[A-Za-z0-9]$/))break;this.searchAndFocus(n)}},this.focusoutHandler=t=>{const{relatedTarget:i}=t,o=this.allOptions.includes(i),e=!o&&this.hostElement.contains(i);(o||e)&&t.stopPropagation()},this.clickHandler=t=>{const i=t.target;"q2-option"!==i.localName||i.disabled||this.selectOption(i.value)},this.role="listbox",this.direction="down",this.customSearch=void 0,this.noSelect=void 0,this.align=void 0,this.selectedOptions=[],this.multiple=void 0,this.disabled=void 0,this.type=void 0,this.hasOptions=void 0}componentWillLoad(){this.hasOptions=!!this.hostElement.querySelectorAll("q2-option").length}componentDidLoad(){n(this.hostElement),this.checkOptions(),this.selectedOptionsUpdated()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}get allOptions(){return this.getRootSlot(this.hostElement)}checkOptions(){const{noSelect:t,type:i,allOptions:o}=this;if(!t&&!i)return;const e="menu"===i?"menuitem":"option";o.forEach((o=>{t&&(o.noSelect=!0),i&&(o.role=e)}))}getRootSlot(t){var i;const o=t.querySelector("slot"),e=null!==(i=null==o?void 0:o.assignedElements())&&void 0!==i?i:Array.from(t.children);return e.length&&"SLOT"===e[0].tagName?this.getRootSlot(e[0]):e}scrollToActiveOption(){const t=this.allOptions[this.activeIndex];null==t||t.scrollIntoView({block:"nearest"})}resizeIframe(){var t,i;return null===(i=null===(t=window.TectonElements)||void 0===t?void 0:t.resizeIframe)||void 0===i?void 0:i.call(t)}openDropdownWithActiveElement(t){this.disabled||(this.activeIndex=t,this.popoverState.emit({open:!0}),this.setActiveOption(),this.setFocusedOption(),this.scheduledAfterRender.push((()=>{this.scrollToActiveOption(),this.resizeIframe()})))}getDefaultActiveIndex(){const{allOptions:t}=this,i=t.findIndex((t=>t.selected));if(i>-1)return i;const o=t.findIndex((t=>!t.hidden));return o>-1?o:0}updateSingleOptionAttrs(){var t,i;const{allOptions:o,selectedOptions:e}=this,s=null!==(i=null===(t=e[0])||void 0===t?void 0:t.value)&&void 0!==i?i:void 0;o.forEach((t=>{t.selected=t.value===s}))}updateMultipleOptionAttrs(){const{allOptions:t,selectedOptions:i}=this,o=i.map((t=>t.value));t.forEach((t=>{t.selected=o.includes(t.value)}))}setActiveOption(){const t=this.activeIndex;this.allOptions.forEach(((i,o)=>{i.active=t===o}))}setFocusedOption(){const t=this.allOptions[this.activeIndex];t&&setTimeout((()=>{t.focus()}),25)}getNextVisibleIndex(t){let i=this.activeIndex+t;for(;i>=0&&i<=this.allOptions.length-1;){const{display:o,visibility:e}=window.getComputedStyle(this.allOptions[i]);if("none"!==o&&"hidden"!==e)return i;i+=t}return-1}selectOption(t){const i=this.allOptions.find((({value:i})=>i===t)),o={value:t,display:i.display||i.innerText.trim()},{multiple:e,noSelect:s}=this;let n;if(e){const{selectedOptions:i=[]}=this;n=i.find((({value:i})=>i===t))?i.filter((({value:i})=>i!==t)):[...i,o]}else n=[o];s?this.setActiveElement(null):this.selectedOptions=n,this.change.emit({value:t,values:n}),e||this.popoverState.emit({open:!1})}adjustActiveOptionAndScroll(t){this.activeIndex+=t,this.setActiveOption(),this.setFocusedOption(),this.scrollToActiveOption()}resetTimer(){this.searchStringTimer&&clearTimeout(this.searchStringTimer),this.searchStringTimer=window.setTimeout((()=>{this.searchString=null}),2e3)}searchAndFocus(t){this.resetTimer();let i=this.searchString?`${this.searchString}${t}`:t;i=i.replace(/[^0-9a-z]/gi,""),this.searchString=i;const o=new RegExp(i,"i"),e=this.allOptions.findIndex((t=>t.value===i||t.textContent.match(o)));-1!==e&&this.setActiveElement(e)}selectedOptionsUpdated(){this.multiple?this.updateMultipleOptionAttrs():this.updateSingleOptionAttrs()}delegateFocus(t){r(t,this.hostElement)&&(this.popoverState.emit({open:!0}),this.setDefaultActiveElement())}handleClick(t){t.stopPropagation()}async setDefaultActiveElement(){this.activeIndex=this.getDefaultActiveIndex(),this.setActiveOption(),this.setFocusedOption()}async setActiveElement(t){this.activeIndex=t,this.setActiveOption(),this.setFocusedOption()}async handleExternalKeydown(t){["ArrowDown","ArrowUp","PageDown","PageUp","Home","End"].includes(t.key)&&this.popoverState.emit({open:!0}),["ArrowDown","ArrowUp"].includes(t.key)?(t.preventDefault(),this.setDefaultActiveElement()):this.keydownHandler(t,!0)}render(){return o(e,null,o("div",{class:"content",ref:t=>this.contentElement=t,onFocusout:this.focusoutHandler},o("div",{class:"options",role:this.type||"listbox",onKeyDown:this.keydownHandler,onClick:this.clickHandler},o("slot",null))))}get hostElement(){return s(this)}static get watchers(){return{selectedOptions:["selectedOptionsUpdated"]}}};a.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";const h=class{constructor(o){t(this,o),this.popoverStateChanged=i(this,"popoverStateChanged",7),this.privateDirection="down",this.direction=void 0,this.align=void 0,this.open=void 0,this.block=void 0,this.minHeight=void 0,this.controlElement=void 0}componentDidLoad(){this.open&&this.determinePopDirection()}componentWillRender(){this.containerElement&&this.containerElement&&this.open&&this.determinePopDirection()}async toggle(){this.open=!this.open}openChanged(t){this.popoverStateChanged.emit({open:t})}popoverStateHandler(t){const{detail:{open:i}}=t;i!==this.open&&(this.open=i,t.stopPropagation())}determinePopDirection(){var t,i,o,e,s;const{containerElement:n,contentElement:r,direction:a,controlElement:h}=this;if(n&&(n.style.maxHeight=null),a)return this.privateDirection=a;const l=r.clientHeight,{top:d,height:c}=null!==(t=null==h?void 0:h.getBoundingClientRect())&&void 0!==t?t:{top:0,height:0},p=((null===(o=null===(i=window.Tecton)||void 0===i?void 0:i.platformDimensions)||void 0===o?void 0:o.scrollY)||0)+((null===(s=null===(e=window.Tecton)||void 0===e?void 0:e.platformDimensions)||void 0===s?void 0:s.innerHeight)||window.innerHeight)-d-c,v=l<=d;if(p>l)return this.privateDirection="down";if(v||!this.minHeight)return this.determinePopOffset(),this.privateDirection="up";const{minHeight:u=150}=this;if(p>=u+5){const t=Math.max(p-5,u);return n.style.setProperty("--comp-pop-max-height",`${t}px`),this.privateDirection="down"}{const t=Math.max(d,u);return n.style.setProperty("--comp-pop-max-height",`${t}px`),this.determinePopOffset(),this.privateDirection="up"}}determinePopOffset(){var t;const{controlElement:i,containerElement:o}=this,e=null!==(t=null==i?void 0:i.getBoundingClientRect().height)&&void 0!==t?t:0;o.style.setProperty("--comp-pop-offset",`${e}px`)}render(){return o("div",{ref:t=>this.containerElement=t,class:["container",this.privateDirection].join(" "),role:"menu"},o("div",{ref:t=>this.contentElement=t,class:"content"},o("slot",null)))}get hostElement(){return s(this)}static get watchers(){return{open:["openChanged"]}}};h.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex;width:100%}.container{display:block;overflow:hidden;opacity:0;height:0;position:absolute;visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%}:host([align=right]) .container{right:0;text-align:end;left:unset}:host([open]) .container{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";export{a as q2_option_list,h as q2_popover}

package/dist/q2-tecton-elements/p-3813f51d.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as a,g as o}from"./p-926a3e80.js";import{o as e,i as r,l as s}from"./p-a510290a.js";const n=class{constructor(a){t(this,a),this.click=i(this,"click",7),this.activateFirstOption=!1,this.determineHasOptions=()=>{const t=!!this.hostElement.querySelectorAll("q2-option").length;this.hasOptions=t},this.onClickElsewhere=t=>{"click-elsewhere"===t.target.localName&&(t.stopPropagation(),this.popoverElement.open=!1)},this.handleChange=t=>{if(t.stopPropagation(),!this.hasOptions)return;const{value:i}=t.detail;this.click.emit({value:i})},this.handleClick=t=>{t.stopPropagation(),this.activateFirstOption=!1,this.popoverElement.toggle()},this.handleKeydown=t=>{this.activateFirstOption=!0,this.optionList.handleExternalKeydown(t)},this.handleButtonFocusout=t=>{var i;const a=t.relatedTarget;null!==(i="Q2-OPTION"===(null==a?void 0:a.tagName))&&void 0!==i&&i||(this.open=!1)},this.handleWrapperClick=()=>{this.dropdownBtn.focus(),this.dropdownBtn.click()},this.open=void 0,this.role="listitem",this.label=void 0,this.theme=void 0,this.popoverMinHeight=150,this.popoverDirection=void 0,this.hasOptions=void 0}componentWillLoad(){const t=new MutationObserver(this.determineHasOptions);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t}componentDidLoad(){e(this.hostElement)}disconnectedCallback(){this.mutationObserver.disconnect(),this.mutationObserver=null}delegateFocus(t){r(t,this.hostElement)&&this.hasOptions&&this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){this.open!==t&&(this.open=t),t&&this.activateFirstOption?(this.optionList.focus(),this.activateFirstOption=!1):(this.optionList.setActiveElement(null),this.dropdownBtn.focus())}render(){const{hasOptions:t,open:i}=this,o=["tag-wrapper"];return t&&o.push("has-options"),a("click-elsewhere",{onChange:this.onClickElsewhere},a("div",{class:o.join(" "),onClick:t=>t.stopPropagation()},a("div",{class:"tag"},this.label),this.hasOptions&&a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{ref:t=>this.dropdownBtn=t,"test-id":"btn-control",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-haspopup":"true","aria-expanded":i?"true":"false","aria-label":s("tecton.element.tag.viewOptions")},a("q2-icon",{type:"options"})))),this.hasOptions&&a("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection},a("q2-option-list",{id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,align:"right",type:"menu","no-select":!0},a("slot",null))))}get hostElement(){return o(this)}};n.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--t-primary-l5, #61c4ff);--comp-tag-color:var(--t-primary-text, #ffffff)}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--t-secondary-l5, #d9e1e6);--comp-tag-color:var(--t-secondary-text, #000000)}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--t-tertiary-l5, #f4fafe);--comp-tag-color:var(--t-tertiary-text, #000000)}.tag{height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)))}.has-options .tag{padding-right:var(--comp-tag-btn-size)}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);height:var(--comp-tag-clickable-size);width:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:absolute;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{width:var(--comp-tag-btn-size);height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;--tct-icon-size:18px}";export{n as q2_tag}