q2-tecton-elements 1.46.1 → 1.48.0

package/dist/types/components.d.ts

@@ -799,9 +799,9 @@ export namespace Components {
     }
     interface Q2DataTable {
         /**
-          * Adds a border between each row for the table.
+          * Adds borders between rows and/or columns in the table.
          */
-        "bordered": boolean;
+        "bordered": boolean | 'horizontal' | 'vertical' | 'grid';
         /**
           * Provides a caption for the data table.
          */
@@ -859,6 +859,10 @@ export namespace Components {
           * Adds a shadow to the table
          */
         "shadowed": boolean;
+        /**
+          * Enables alternating background colors for the table rows
+         */
+        "striped": boolean;
     }
     interface Q2Detail {
         /**
@@ -978,11 +982,12 @@ export namespace Components {
         "disabled": boolean;
         /**
           * The text that appears within the dropdown item.
+          * @info This will be used as the `aria-label` for this item.
           * @localizable
          */
         "label": string;
         /**
-          * Renders an icon button in the item. Clicking on this button will change the `type` emitting on the item's click event detail to "remove".
+          * Renders an icon button in the item. Clicking on this button will change the `type` on the item's click event detail to "remove".
          */
         "removable": boolean;
         /**
@@ -1089,6 +1094,11 @@ export namespace Components {
         "type": string;
     }
     interface Q2Input {
+        /**
+          * Sets readonly to true on the input without adding the "read only" label.  Can be used to prevent user input while still presenting the necessary information for assistive technology.
+          * @private
+         */
+        "_preventEntry": boolean;
         /**
           * Allows for correct semantics of q2-input element when aria-expanded.
           * @private Defaults to undefined Will assign role to combobox when used inside q2-select and q2-calendar.
@@ -1129,6 +1139,10 @@ export namespace Components {
           * Displays a `q2-badge` element on the right side of the input.
          */
         "badgeValue": string;
+        /**
+          * Emulates firing checkValidity on `<input>`, emits `invalid` event if validation failed.
+         */
+        "checkValidity": () => Promise<void>;
         /**
           * Emulates clicking the clear button when the input is clearable.
           * @warning Only applicable when the input is clearable.
@@ -1202,6 +1216,11 @@ export namespace Components {
           * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          */
         "optional": boolean;
+        /**
+          * The pattern string of the input field, regular expression string is expected. This allows us to check the validity user's input. For instance, &lt;q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"&gt;  - Allows only 3~5 alphanumeric letters  In Javascript, you can check the validity object in your q2-input Type "abcdefgh", then access the validity object
+          * @snippet const myInput = document.querySelector('#myInput'); console.log(myInput.validity);
+         */
+        "pattern": string;
         /**
           * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
           * @info Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).
@@ -1217,7 +1236,8 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * Indicates the element's intended purpose to assistive technology, according to the [WAI-ARIA Roles Model](https://www.w3.org/WAI/PF/aria/roles).
+          * Indicates the element's intended purpose to assistive technology.
+          * @deprecated
          */
         "role": string;
         /**
@@ -1247,6 +1267,7 @@ export namespace Components {
           * Specifies the field's expeted [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices.
          */
         "type": InputType;
+        "validity": ValidityState;
         /**
           * The value of the input field.
           * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` does not change its own `value` outside of its default change event handler.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
@@ -1698,13 +1719,13 @@ export namespace Components {
     }
     interface Q2RelativeTime {
         /**
-          * If you want to compare two specific dates, you can provide a valid `date` and `baseDate`, and the component will tell you the elapsed time between the two dates. If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and now.
-          * @warning - Requires a valid `date` value. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
+          * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.  If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.
+          * @warning - Requires a valid `date` value. - If the provided `baseDate` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
          */
         "baseDate": Date | string;
         /**
           * The date you want to calculate relative time from.
-          * @warning Must be a valid ISO date string.
+          * @warning - Must be a valid ISO date string. - If the provided `date` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
          */
         "date": Date | string;
         /**
@@ -1712,8 +1733,8 @@ export namespace Components {
          */
         "displayedMessageValue": () => Promise<string>;
         /**
-          * The language used for the relative time message.
-          * @info It is recommended to use the BCP 47 Language Tags in the ['language-extlang' format](https://www.w3.org/International/articles/language-tags/).
+          * The language used for the displayed message.
+          * @info It is recommended to use the BCP 47 Language Tags in the ["language-extlang" format](https://www.w3.org/International/articles/language-tags/).
          */
         "locale": string;
         /**
@@ -1721,7 +1742,8 @@ export namespace Components {
          */
         "messageFormat": 'long' | 'short' | 'narrow';
         /**
-          * Set this to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday") in the time message.
+          * Determines if the displayed message will use numeric or relative values.
+          * @info  Set this property to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday").
          */
         "numeric": 'always' | 'auto';
         /**
@@ -1730,9 +1752,17 @@ export namespace Components {
          */
         "sync": boolean;
         /**
-          * Force the unit of measurement.
+          * Enforces the use of the provided unit of measurement in the displayed message.
          */
         "unit": 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
+        /**
+          * Checks the provided baseDate prop is a valid date.
+         */
+        "validBaseDateProp": () => Promise<boolean>;
+        /**
+          * Checks the provided date prop is a valid date.
+         */
+        "validDateProp": () => Promise<boolean>;
     }
     interface Q2Section {
         /**
@@ -1744,7 +1774,8 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * The text to display above the `q2-section`. Renders as an `<h2>` element.
+          * The text to display above the `q2-section`. Renders as an `<h2>` element.  It is also used to provided an `aria-label` for the toggle button when the component is collapsible.
+          * @warning If you are providing a custom header, setting this property is still strongly encouraged for the purposes of accessibility.
          */
         "label": string;
         /**
@@ -2563,6 +2594,7 @@ declare global {
         "change": IEventDetail;
         "clear": undefined;
         "formatted": IFormatterValueObject;
+        "invalid": IEventDetail;
     }
     interface HTMLQ2InputElement extends Components.Q2Input, HTMLStencilElement {
         addEventListener<K extends keyof HTMLQ2InputElementEventMap>(type: K, listener: (this: HTMLQ2InputElement, ev: Q2InputCustomEvent<HTMLQ2InputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3819,9 +3851,9 @@ declare namespace LocalJSX {
     }
     interface Q2DataTable {
         /**
-          * Adds a border between each row for the table.
+          * Adds borders between rows and/or columns in the table.
          */
-        "bordered"?: boolean;
+        "bordered"?: boolean | 'horizontal' | 'vertical' | 'grid';
         /**
           * Provides a caption for the data table.
          */
@@ -3903,6 +3935,10 @@ declare namespace LocalJSX {
           * Adds a shadow to the table
          */
         "shadowed"?: boolean;
+        /**
+          * Enables alternating background colors for the table rows
+         */
+        "striped"?: boolean;
     }
     interface Q2Detail {
         /**
@@ -4022,11 +4058,12 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         /**
           * The text that appears within the dropdown item.
+          * @info This will be used as the `aria-label` for this item.
           * @localizable
          */
         "label"?: string;
         /**
-          * Renders an icon button in the item. Clicking on this button will change the `type` emitting on the item's click event detail to "remove".
+          * Renders an icon button in the item. Clicking on this button will change the `type` on the item's click event detail to "remove".
          */
         "removable"?: boolean;
         /**
@@ -4083,6 +4120,7 @@ declare namespace LocalJSX {
         "maxlength"?: number;
         /**
           * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
+          * @info  If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
          */
         "onChange"?: (event: Q2EditableFieldCustomEvent<{
         editing: boolean;
@@ -4126,6 +4164,11 @@ declare namespace LocalJSX {
         "type"?: string;
     }
     interface Q2Input {
+        /**
+          * Sets readonly to true on the input without adding the "read only" label.  Can be used to prevent user input while still presenting the necessary information for assistive technology.
+          * @private
+         */
+        "_preventEntry"?: boolean;
         /**
           * Allows for correct semantics of q2-input element when aria-expanded.
           * @private Defaults to undefined Will assign role to combobox when used inside q2-select and q2-calendar.
@@ -4247,10 +4290,20 @@ declare namespace LocalJSX {
           * @legacyEvent
          */
         "onInput"?: (event: Q2InputCustomEvent<IEventDetail>) => void;
+        /**
+          * Emitted when the validation is updated.
+          * @legacyEvent
+         */
+        "onInvalid"?: (event: Q2InputCustomEvent<IEventDetail>) => void;
         /**
           * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          */
         "optional"?: boolean;
+        /**
+          * The pattern string of the input field, regular expression string is expected. This allows us to check the validity user's input. For instance, &lt;q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"&gt;  - Allows only 3~5 alphanumeric letters  In Javascript, you can check the validity object in your q2-input Type "abcdefgh", then access the validity object
+          * @snippet const myInput = document.querySelector('#myInput'); console.log(myInput.validity);
+         */
+        "pattern"?: string;
         /**
           * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
           * @info Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).
@@ -4266,7 +4319,8 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Indicates the element's intended purpose to assistive technology, according to the [WAI-ARIA Roles Model](https://www.w3.org/WAI/PF/aria/roles).
+          * Indicates the element's intended purpose to assistive technology.
+          * @deprecated
          */
         "role"?: string;
         /**
@@ -4291,6 +4345,7 @@ declare namespace LocalJSX {
           * Specifies the field's expeted [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices.
          */
         "type"?: InputType;
+        "validity"?: ValidityState;
         /**
           * The value of the input field.
           * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` does not change its own `value` outside of its default change event handler.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
@@ -4773,18 +4828,18 @@ declare namespace LocalJSX {
     }
     interface Q2RelativeTime {
         /**
-          * If you want to compare two specific dates, you can provide a valid `date` and `baseDate`, and the component will tell you the elapsed time between the two dates. If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and now.
-          * @warning - Requires a valid `date` value. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
+          * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.  If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.
+          * @warning - Requires a valid `date` value. - If the provided `baseDate` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
          */
         "baseDate"?: Date | string;
         /**
           * The date you want to calculate relative time from.
-          * @warning Must be a valid ISO date string.
+          * @warning - Must be a valid ISO date string. - If the provided `date` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
          */
         "date"?: Date | string;
         /**
-          * The language used for the relative time message.
-          * @info It is recommended to use the BCP 47 Language Tags in the ['language-extlang' format](https://www.w3.org/International/articles/language-tags/).
+          * The language used for the displayed message.
+          * @info It is recommended to use the BCP 47 Language Tags in the ["language-extlang" format](https://www.w3.org/International/articles/language-tags/).
          */
         "locale"?: string;
         /**
@@ -4792,7 +4847,8 @@ declare namespace LocalJSX {
          */
         "messageFormat"?: 'long' | 'short' | 'narrow';
         /**
-          * Set this to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday") in the time message.
+          * Determines if the displayed message will use numeric or relative values.
+          * @info  Set this property to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday").
          */
         "numeric"?: 'always' | 'auto';
         /**
@@ -4801,7 +4857,7 @@ declare namespace LocalJSX {
          */
         "sync"?: boolean;
         /**
-          * Force the unit of measurement.
+          * Enforces the use of the provided unit of measurement in the displayed message.
          */
         "unit"?: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
     }
@@ -4815,7 +4871,8 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * The text to display above the `q2-section`. Renders as an `<h2>` element.
+          * The text to display above the `q2-section`. Renders as an `<h2>` element.  It is also used to provided an `aria-label` for the toggle button when the component is collapsible.
+          * @warning If you are providing a custom header, setting this property is still strongly encouraged for the purposes of accessibility.
          */
         "label"?: string;
         /**

package/dist/types/workspace/workspace/{tecton-production_release_1.46.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts

@@ -41,5 +41,5 @@ export declare const evaluateA11y: (page: any, ...args: string[]) => Promise<{}>
  * @note This function should be called before the component is rendered.
  * @note Be sure to call `jest.restoreAllMocks()` after the test to restore the original fetch function.
  */
-export declare const mockIconFetch: (iconMarkup?: string) => jest.SpyInstance<Promise<Response>, [input: URL | RequestInfo, init?: RequestInit], any>;
+export declare const mockIconFetch: (iconMarkup?: string) => jest.SpyInstance<Promise<Response>, [input: string | URL | Request, init?: RequestInit], any>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.46.1",
+    "version": "1.48.0",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.46.1",
+        "q2-tecton-common": "1.48.0",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -54,5 +54,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "fae4646a29eeae535d7d5c0e9cd050872dab0101"
+    "gitHead": "5cc45af73c1c199eb540024b721631e860726210"
 }

package/dist/cjs/index-0e15dc8d.js.map

@@ -1 +0,0 @@
-{"file":"index-0e15dc8d.js","mappings":";;;;SAgBgB,QAAQ;IACpB,OAAO,qFAAqF,CAAC,IAAI,CAC7F,SAAS,CAAC,SAAS,CACtB,CAAC;AACN,CAAC;SAEe,iBAAiB,CAAC,KAAiB,EAAE,WAAwB;IACzE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IACxB,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;IAI9C,MAAM,mBAAmB,GAAG,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC;IAE3E,MAAM,4BAA4B,GAAG,CAAC,OAAoB;QACtD,IAAI,OAAO,KAAK,WAAW;YAAE,OAAO,IAAI,CAAC;QACzC,IAAI,OAAO,CAAC,aAAa,EAAE;YACvB,OAAO,4BAA4B,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;SAC9D;QACD,OAAO,KAAK,CAAC;KAChB,CAAC;IAEF,IAAI,EAAE,mBAAmB,YAAY,WAAW,CAAC;QAAE,OAAO,IAAI,CAAC;IAC/D,OAAO,CAAC,4BAA4B,CAAC,mBAAmB,CAAC,CAAC;AAC9D,CAAC;SAEe,yBAAyB,CAAC,KAAiB,EAAE,OAAoB;IAC7E,OAAO,KAAK,CAAC,aAAa,KAAK,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,CAAC;AAC7F,CAAC;SAEe,kBAAkB,CAAC,KAAY,EAAE,OAAoB;;IACjE,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,sDAAK,CAAC,CAAC,MAAK,OAAO,CAAC;AACjD,CAAC;SAEe,aAAa,CAAC,WAAwB;IAClD,WAAW,CAAC,KAAK,GAAG,MAAM,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACtG,CAAC;SAEe,SAAS;IACrB,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;IACpD,OAAO,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AACzC,CAAC;SAEe,aAAa;IACzB,OAAO,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC,CAAC;AACpE,CAAC;AAOD;;;;;SAKgB,oBAAoB,CAAC,IAAY,EAAE,WAAsB;IACrE,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACpC,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IAChE,OAAO,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;AACxE,CAAC;AAED,IAAI,IAAI,GAAW,IAAI,CAAC;SACR,UAAU;IACtB,OAAO,IAAI,EAAE,CAAC;AAClB,CAAC;SAEe,SAAS,CAAC,EAA6B;IACnD,qBAAqB,CAAC;QAClB,qBAAqB,CAAC,EAAE,CAAC,CAAC;KAC7B,CAAC,CAAC;AACP,CAAC;SAEe,SAAS,CAAC,OAAoB;IAC1C,OAAO,OAAO,CAAC,WAAW,GAAG,CAAC,IAAI,OAAO,CAAC,YAAY,GAAG,CAAC,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;AACtG,CAAC;SAEe,gBAAgB;IAC5B,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AACtD,CAAC;SAiBe,GAAG,CAAC,GAAW,EAAE,IAA4B;;IACzD,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC;IACpB,IAAI,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,SAAS,MAAK,IAAI,EAAE;QACnC,OAAO,GAAG,CAAC;KACd;IACD,OAAO,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,0CAAE,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,mCAAI,GAAG,CAAC;AACzD,CAAC;SAEe,QAAQ,CAAC,MAAuD;IAC5E,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IACxD,MAAM,YAAY,GAAa,CAAC,aAAa,CAAC,CAAC;IAC/C,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,IAAI,eAAe,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,eAAe,EAAE;QAClB,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAkB,oBAAoB,CAAC,CAAC;QACrG,MAAM,cAAc,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,GAAG,MAAM,IAAG,CAAC,CAAC;QAC7D,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC;QAEzB,eAAe,GAAG,QAAQ,IAAI,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC;KAC/D;IAED,IAAI,eAAe;QAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,QAAQ,EAAE;QACV,QAAQ,GAAGA,kBAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;IACD,IAAI,QAAQ,EAAE;QACV,QAAQ,GAAGA,kBAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;QACpF,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACvC;IACD,QACIA,mBACI,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;QAE7BA,kBAAM,IAAI,EAAC,OAAO;YACb,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,SAAS;YAC9B,QAAQ,CACN,CACH,EACV;AACN,CAAC;SAEe,cAAc,CAAC,MAAmB,EAAE,QAAgB;IAChE,OAAO,MAAM,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC;AACjE,CAAC;SAEe,eAAe,CAC3B,MAWW;IAEX,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,SAAS;QAAE,OAAO;;IAGvB,MAAM,sBAAsB,GAAG,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC;IACnD,IAAI,SAAS,KAAK,sBAAsB,EAAE;QACtC,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,OAAO;KACV;;IAGD,IAAI,WAAW,IAAI,MAAM;QAAE,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC;IACnD,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;AACjC,CAAC;AAED;;;SAGgB,iBAAiB,CAAC,MAAc,EAAE,OAAe,EAAE,OAAe,EAAE,aAAuB;IACvG,IAAI,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,WAAW;QAAE,OAAO;;IAGnD,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE;QACjB,wBAAwB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;KACrD;IAED,MAAM,CAAC,OAAO,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAElC,IAAI,aAAa,EAAE;QACf,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;KAC1B;AACL,CAAC;SAEe,wBAAwB,CACpC,MAAc,EACd,kBAA0B,EAC1B,kBAA4D;IAE5D,IAAI,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK,WAAW,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,KAAK,uBAAuB,EAAE;QAC9F,IAAI,MAAM,CAAC,kBAAkB,CAAC,KAAK,WAAW;YAAE,OAAO;QAEvD,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAErE,QAAQ,kBAAkB;YACtB,KAAK,MAAM;gBACP,IAAI,kBAAkB,KAAK,MAAM,IAAI,aAAa,KAAK,KAAK,EAAE;oBAC1D,OAAO,CAAC,IAAI,CACR,6RAA6R,CAChS,CAAC;iBACL;qBAAM;oBACH,OAAO,CAAC,IAAI,CACR,gBAAgB,kBAAkB,UAAU,aAAa,oFAAoF,CAChJ,CAAC;iBACL;gBACD,MAAM;YAEV,KAAK,UAAU;gBACX,OAAO,CAAC,IAAI,CACR,gBAAgB,kBAAkB,OAAO,aAAa,oFAAoF,CAC7I,CAAC;gBACF,MAAM;YAEV,KAAK,QAAQ;gBACT,OAAO,CAAC,IAAI,CACR,cAAc,kBAAkB,OAAO,aAAa,oFAAoF,CAC3I,CAAC;gBACF,MAAM;YAEV,KAAK,OAAO;gBACR,OAAO,CAAC,IAAI,CACR,aAAa,kBAAkB,OAAO,aAAa,oFAAoF,CAC1I,CAAC;gBACF,MAAM;YAEV;gBACI,OAAO,CAAC,KAAK,CACT,uEAAuE,kBAAkB,UAAU,aAAa,0BAA0B,kBAAkB,EAAE,CACjK,CAAC;SACT;KACJ;AACL,CAAC;SAEe,WAAW,CAAC,MAAsB;IAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEjD,QACIA,iBAAK,KAAK,EAAC,oBAAoB;QAC3BA,wBACI,UAAU,EAAC,SAAS,EACpB,WAAW,QACX,IAAI,EAAE,IAAI,aACF,SAAS;YAEjBA,gBAAI,EAAE,EAAE,MAAM,CAAC,gBAAgB,IAC1B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACxBA,2BAAY,iBAAiB,IAAE,GAAG,CAAC,OAAO,CAAC,CAAM,CACpD,CAAC,CACD,CACI,CACX,EACR;AACN,CAAC;SAEe,gBAAgB,CAAC,MAAsB;IACnD,MAAM,gBAAgB,GAAI,MAAM,CAAC,WAAW,CAAC,UAAyB,CAAC,aAAa,CAChF,qBAAqB,CACxB,CAAC;IACF,MAAM,SAAS,GAAG,gBAAgB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC/D,SAAS,CAAC;QACN,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,IAAI,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAErG,IAAI,gBAAgB,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,GAAG,MAAM,IAAI;YAAE,OAAO;QAEhF,IAAI,MAAM,KAAK,CAAC,EAAE;YACd,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YACrC,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SACnD;aAAM;YACH,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACxC,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;SAC/D;KACJ,CAAC,CAAC;AACP,CAAC;MAEY,YAAY,GAAG;;IACxB,OAAO,MAAA,MAAA,MAAM,CAAC,cAAc,0CAAE,YAAY,kDAAI,CAAC;AACnD,EAAE;AAEF;MACa,WAAW,GAAG,CAAC,MAAa;IACrC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACnE,MAAM,CAAC,MAAM,GAAG,YAAY,MAAM,CAAC,KAAK,EAAgC,CAAC;QACzE,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC;KAC5B;AACL;;;;;;;;;;;;;;;;;;;;;;;;;","names":["h"],"sources":["src/utils/index.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\n/**\n * Returns the value of a prop if it is defined and included in the `validValues`\n * array. This is used primarily to prevent Vue wrappers from setting aria props\n * to \"Symbol()\" when the prop is not set.\n */\nexport function getAriaValueFromProp(prop: string, validValues?: string[]) {\n    if (prop === undefined) return prop;\n    if (!validValues) return prop !== 'Symbol()' ? prop : undefined;\n    return validValues.includes(prop) || prop === '' ? prop : undefined;\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlot = target.hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"label\"]');\n        const hasSlotContent = labelSlot?.assignedNodes().length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"],"version":3}

package/dist/esm/index-0a702dd6.js.map

@@ -1 +0,0 @@
-{"file":"index-0a702dd6.js","mappings":"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","names":[],"sources":["src/utils/index.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\n/**\n * Returns the value of a prop if it is defined and included in the `validValues`\n * array. This is used primarily to prevent Vue wrappers from setting aria props\n * to \"Symbol()\" when the prop is not set.\n */\nexport function getAriaValueFromProp(prop: string, validValues?: string[]) {\n    if (prop === undefined) return prop;\n    if (!validValues) return prop !== 'Symbol()' ? prop : undefined;\n    return validValues.includes(prop) || prop === '' ? prop : undefined;\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlot = target.hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"label\"]');\n        const hasSlotContent = labelSlot?.assignedNodes().length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"],"version":3}

package/dist/q2-tecton-elements/p-245ad08f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i}from"./p-a5f18e27.js";const n="*{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 #0066cc)}: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}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, var(--app-scale-9x, 45px));opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded{opacity:var(--tct-legend-item-opacity-faded, 0.5)}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, #141430);display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, 14px);font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1.4);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, #6f6f82);display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, 14px);font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1.4);text-align:right}";const s=n;const o=class{constructor(i){t(this,i);this.click=e(this,"click",7);this.mouseleave=e(this,"mouseleave",7);this.mouseenter=e(this,"mouseenter",7);this.selectedItemIndex=-1;this.hoveredItemIndex=-1;this.data=[];this.hoveredItemId=null;this.format="default";this.selectedItemId=null}watchHoveredItemId(t){const e=this.getDataIndexForId(t);this.hoveredItemIndex=e}watchSelectedItemId(t){const e=this.getDataIndexForId(t);this.selectedItemIndex=e}componentWillLoad(){this.watchHoveredItemId(this.hoveredItemId);this.watchSelectedItemId(this.selectedItemId)}get dataWithClasses(){return this.data.map(((t,e)=>Object.assign(Object.assign({},t),{classes:{"item-button":true,"item-button-faded":this.isItemButtonFaded(e),"item-button-selected":this.isItemButtonSelected(e)}})))}formatValue(t){const e=parseFloat(t.toString());if(this.format==="currency"){return Intl.NumberFormat("en-US",{style:"currency",currency:"USD"}).format(e)}return Intl.NumberFormat("en-US").format(e)}getDataIndexForId(t){const e=this.data.findIndex((e=>e.id===t));return e>=0?e:-1}isItemButtonFaded(t){if(this.isItemButtonSelected(t)||t==this.hoveredItemIndex)return false;if(this.selectedItemIndex>=0&&this.hoveredItemIndex===-1)return true;return this.hoveredItemIndex>=0&&t!==this.hoveredItemIndex}isItemButtonSelected(t){return t===this.selectedItemIndex}onClick(t,e){t.stopPropagation();const i=this.getDataIndexForId(e.id);if(this.selectedItemIndex===i){this.selectedItemIndex=-1;if(t.detail===0){this.hoveredItemIndex=-1}else{this.hoveredItemIndex=i}this.click.emit(null);return}this.selectedItemIndex=i;this.click.emit(this.data[i])}onClickElsewhere(t){t.selectedItemIndex=-1}onMouseLeave(t,e){t.stopPropagation();const i=this.getDataIndexForId(e.id);this.hoveredItemIndex=-1;this.mouseleave.emit(this.data[i])}onMouseEnter(t,e){t.stopPropagation();const i=this.getDataIndexForId(e.id);this.hoveredItemIndex=i;this.mouseenter.emit(this.data[i])}render(){return i("click-elsewhere",{key:"8ee6971693e03e0823d3db40447389010de04fcf",onChange:()=>this.onClickElsewhere(this)},i("ul",{key:"3e61a3ce65430feeb44596680f8f042d83ac934e"},this.dataWithClasses.map((t=>i("li",{class:"item"},i("button",{"test-id":"item","aria-label":`${t.name} ${this.formatValue(t.value)}`,class:t.classes,onClick:e=>this.onClick(e,t),onMouseEnter:e=>this.onMouseEnter(e,t),onMouseLeave:e=>this.onMouseLeave(e,t)},i("span",{"test-id":"itemColor",class:"item-color-indicator",style:{backgroundColor:t.color},"aria-hidden":"true"}),i("span",{"test-id":"itemName",class:"item-name"},t.name),i("span",{id:`item-${t.id}`,"test-id":"itemValue",class:"item-value"},this.formatValue(t.value))))))))}static get watchers(){return{hoveredItemId:["watchHoveredItemId"],selectedItemId:["watchSelectedItemId"]}}};o.style=s;export{o as q2_legend};
-//# sourceMappingURL=p-245ad08f.entry.js.map

package/dist/q2-tecton-elements/p-245ad08f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","watchHoveredItemId","newItemId","newItemIndex","this","getDataIndexForId","hoveredItemIndex","watchSelectedItemId","selectedItemIndex","componentWillLoad","hoveredItemId","selectedItemId","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseLeave","mouseleave","onMouseEnter","mouseenter","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    column-gap: #{var-list(--tct-legend-item-gap, --app-scale-2x, 10px)};\n    display: flex;\n    height: #{var-list(--tct-legend-item-height, --app-scale-9x, 45px)};\n    opacity: 1;\n    padding-block: 0;\n    padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded {\n        opacity: var(--tct-legend-item-opacity-faded, 0.5);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: #{var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px)};\n    width: #{var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px)};\n}\n\n.item-name {\n    color: var(--tct-legend-item-name-font-color, #141430);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var(--tct-legend-item-name-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var(--tct-legend-item-name-line-height, 1.4);\n    text-align: left;\n}\n\n.item-value {\n    color: var(--tct-legend-item-value-font-color, #6f6f82);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var(--tct-legend-item-value-font-size, 14px);\n    font-weight: var(--tct-legend-item-value-font-weight, 400);\n    line-height: var(--tct-legend-item-value-line-height, 1.4);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State\n\n    @State() selectedItemIndex: number = -1;\n    @State() hoveredItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Events\n\n    @Event() click: EventEmitter<IDonutChartData>;\n    @Event() mouseleave: EventEmitter<IDonutChartData>;\n    @Event() mouseenter: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Lifecycle events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Local methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            this.click.emit(null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        this.click.emit(this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        this.mouseleave.emit(this.data[itemIndex]);\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        this.mouseenter.emit(this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-32e57e9f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2ItemCss","Q2ItemStyle0","Q2Item","componentDidLoad","MutationObserver","observer","this","renderTrigger","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasBulletSlotContent","push","join","bulletClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 3px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px));\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop, Fragment } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    itemElement: HTMLDivElement;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n    // #endregion\n    // #region Local methods\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasBulletSlotContent && (\n                    <div class={this.bulletClasses}>\n                        <slot name=\"bullet\" />\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-36398b59.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as s}from"./p-a5f18e27.js";import{l as o,h as l,o as n,w as r,g as a,i as c,j as d}from"./p-42302f6f.js";import{s as h,a as p}from"./p-780a1d0e.js";const u="*{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 #0066cc)}: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const v=u;const b=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.scheduledAfterRender=[];this.showSelectedOptions=()=>{this.showSelected=true};this.showAllOptions=()=>{this.showSelected=false};this.onMutationObserved=()=>{const{hostElement:t,hasPopoverTop:e,hasPopoverBottom:i}=this;const s=t.querySelector(".custom-display-content");const o=t.shadowRoot.querySelector('slot[name="q2-select-display"]');const l=!!o?o.assignedNodes().length>0:s.children.length>0;if(this.hasCustomDisplay!==l){this.hasCustomDisplay=l}const n=t.shadowRoot.querySelector('slot[name="popover-top"]');const r=n.assignedNodes().length>0;if(e!==r){this.hasPopoverTop=r}const a=t.shadowRoot.querySelector('slot[name="popover-bottom"]');const c=a.assignedNodes().length>0;if(i!==c){this.hasPopoverBottom=c}this.checkSelectedOptions()};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.onPopoverState=({detail:{open:t,action:e}})=>{if(!t||this.searchText){if(e!=="select"){this.optionList.setActiveElement(null)}this.inputField.focus()}if(this.open===t)return;this.open=t};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const e=t.key;const i=this.hasPopoverTop||this.hasPopoverBottom;const s=e==="Tab"&&t.shiftKey;if(i&&(e==="Tab"||e==="Enter"||s))return;if(h(this,t)){return this.executeActionSheet(t)}const o=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(this.searchable&&!o.includes(e))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(e===" ")t.preventDefault();this.optionList.handleExternalKeydown(t)};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();if(this.hasPopoverTop)return;this.optionList.setDefaultActiveElement()}};this.inputClickHandler=async t=>{t.stopPropagation();if(h(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;const i=!!this.value;if(i)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=e;this.input.emit({query:e})};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation()};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.disabled=false;this.errors=undefined;this.hideLabel=undefined;this.clearable=undefined;this.hoist=!!((s=window.Tecton)===null||s===void 0?void 0:s.useActionSheets);this.invalid=undefined;this.label=undefined;this.listLabel=o("tecton.element.select.listLabel");this.minRows=3;this.multilineOptions=false;this.multiple=false;this.optional=false;this.placeholder=undefined;this.popDirection=undefined;this.popoverMode=null;this.readonly=false;this.searchable=false;this.selectedOptions=[];this.value=undefined;this.ariaLabel=undefined;this.open=false;this.showSelected=false;this.searchText="";this.hasCustomDisplay=false;this.hasPopoverTop=false;this.hasPopoverBottom=false;this.inputFocused=false;this.statusMessage=undefined;this.prioritizeSearch=false;this.structuredSelectedOptions=[]}componentWillLoad(){l(this);this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved();n(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null}get innerInputField(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-field")}get innerInputContainer(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-container")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;if(this.open&&this.searchable)return i?`${i}`:null;else return i>1?`+${i-1}`:null}get popoverMinHeight(){const{minRows:t}=this;const e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;if(!i||i==="0px")i="44px";return t*parseInt(i)}get selectedDisplay(){if(this.prioritizeSearch||this.searchText)return this.searchText;if(this.hasCustomDisplay)return"";return this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null||t===void 0?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this;const e=["q2-select-container"];if(Array.isArray(t)&&t.length>0)e.push("has-error");if(this.inputFocused)e.push("is-focused");if(this.searchable)e.push("is-searchable");return e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;if(t){this.structuredSelectedOptions=!!(e===null||e===void 0?void 0:e.length)?e.map((t=>typeof t==="string"?{value:t}:t)):[]}else{this.structuredSelectedOptions=i?[{value:i}]:[]}}ariaLabelObserver(){l(this)}valueUpdated(){if(this.multiple)return;this.clearSearchText()}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((async()=>{await r();const{popoverTopContainer:e,popoverElement:i}=this;const s=t&&(e===null||e===void 0?void 0:e.offsetHeight)||0;if(s){i.style.setProperty("--comp-popover-top-container-height",`${s}px`)}else{i.style.removeProperty("--comp-popover-top-container-height")}}))}_togglePopover(){const{innerInputField:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open||this.disabled)return;this._togglePopover()}async closePopover(){if(!this.open||this.disabled)return;this._togglePopover()}async setValue(t,e={closePopover:true}){const i=new Set(Array.isArray(t)?t:[t]);if(!this.open){await this.openPopover();await r()}i.forEach((t=>{var e;(e=this.optionElements.find((e=>e.value===t)))===null||e===void 0?void 0:e.click()}));if(e.closePopover){await this.closePopover();await r()}}searchOptions(t){if(!this.searchable)return;const{innerInputField:e}=this;e.focus();e.dispatchEvent(new FocusEvent("focus"));e.value=t;e.dispatchEvent(new InputEvent("input"))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){if(this.readonly||this.disabled)return;if(t.target!==this.hostElement||this.hostElement.onchange)return;if(this.multiple){this.value=null;this.selectedOptions=t.detail.selectedOptions}else{this.value=t.detail.value;this.selectedOptions=[]}}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const o=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:l="",innerText:n=""}=t;const r=[l,o,n];const a=r.some((t=>{var e;return(e=t===null||t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!a;if(a)s++}));const l=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const n=i?s:e.length;this.setStatusMessage(o(l,[n]))}delegateFocus(t){const e=a(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(c(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=d(t,this.hostElement);if(e)this.closeDropdown();this.prioritizeSearch=!e&&this.searchable}handleSelectedDisplay(t){if(this.multiple)return;this.inputField.value=t.detail.display}async executeActionSheet(t){const e=await p(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:o}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:o?undefined:e,selectedOptions:o?s:undefined})}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:l,multilineOptions:n}=this;if(!l)return"";if(s===null||s===void 0?void 0:s.display)return o(s.display);if(n&&this.searchable)return this.searchText;if(n)return"";return(i=(e=(t=s===null||s===void 0?void 0:s.textContent)===null||t===void 0?void 0:t.trim())!==null&&e!==void 0?e:s===null||s===void 0?void 0:s.value)!==null&&i!==void 0?i:l}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null||e===void 0?void 0:e.display)&&o(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&o(e.display)||((t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||this.value||""}}openDropdownWithoutActiveElement(){if(this.readonly||this.disabled)return;this.optionList.setActiveElement(null);this.open=true}closeDropdown(){this.open=false;this.clearSearchText()}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}toggleDropdown(){if(this.readonly||this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}focusInput(){var t;(t=this.inputField)===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}checkSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.optionElements.forEach((s=>{if(t){s.selected=e.includes(s.value)}else{s.selected=s.value===i}}))}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null||t===void 0?void 0:t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:o,firstSelectedOptionElement:l,prioritizeSearch:n}=this;const r=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(n||!o||r)return this.clearSelectedDisplay();if(!l||l.display)return this.clearSelectedDisplay();const a=l.firstElementChild.cloneNode(true);a.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==a.outerHTML){t.replaceChild(a,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(a);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}render(){var t;const e=!this.searchable;return i("click-elsewhere",{key:"a3fbee9295ca05dbb4856eebf5e6fb53a9f9e2a3",class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{key:"a50de81a29cca3188898f6d4b6e16cbbfb6839f4","aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{key:"6059e00c0d5b86920a9193b9bf3bd06d0de27d92",ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&o(this.label)||"",value:this.selectedDisplay,clearable:this.clearable&&(!!this.value||!!((t=this.selectedOptions)===null||t===void 0?void 0:t.length))||undefined,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>o(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:this.readonly,placeholder:this.placeholder||undefined,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox",role:"combobox",pseudo:e,"test-id":"toggleDropdown","hide-messages":true,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":undefined,_role:"combobox"},this.renderCustomDisplay()),i("div",{key:"3d0564757940cb634bac20ff556e540ef455f695",class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{key:"dfdfcb9a0ca41f229d2b50c3b300f47cc565cace",name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputContainer,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,mode:this.popoverMode||undefined,block:true},i("div",{class:"popover-content"},i("q2-option-list",{onPopoverState:this.onPopoverState,ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,label:this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),i("div",{class:"popover-top-container",ref:t=>this.popoverTopContainer=t,hidden:!this.multiple&&!this.hasPopoverTop,tabindex:"-1"},i("slot",{name:"popover-top"}),this.multiple&&this.visibilityToggle())),i("div",{class:"popover-bottom-container",hidden:!this.hasPopoverBottom,tabindex:"-1"},i("slot",{name:"popover-bottom"})))}visibilityToggle(){var t,e;const s=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;const{showSelected:l}=this;return i("div",{class:"multi-select-header"},i("fieldset",null,i("legend",{"aria-label":o("tecton.element.select.multiHeader.showing")},o("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!l,"aria-label":o("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},o("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:s===0,name:"viewDisplay",value:"selected","aria-label":o("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:l,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},o("tecton.element.select.multiHeader.selected",[s])))))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};b.style=v;export{b as q2_select};
-//# sourceMappingURL=p-36398b59.entry.js.map