q2-tecton-elements 1.52.1 → 1.53.0

package/dist/types/components/q2-file-picker/q2-file-picker.d.ts

@@ -0,0 +1,98 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+type FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';
+export type FilesObject = {
+    invalidFiles: {
+        file: File;
+        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';
+    }[];
+    validFiles: File[];
+};
+export declare class Q2FilePicker implements ComponentInterface {
+    browseButtonInput: HTMLElement;
+    dropZone: HTMLElement;
+    fileItemsToBeDeleted: any;
+    queuedFiles: File[];
+    el: HTMLElement;
+    areFilesUploading: boolean;
+    displayedFiles: {
+        file: File;
+        status: FileStatus;
+        toBeRemoved?: boolean;
+    }[];
+    isDropZoneHighlighted: boolean;
+    refreshCounter: number;
+    /**
+     * A description of the field. This is announced by screen readers when the field is focused.
+     * @localizable
+     */
+    description: string;
+    /**
+     * An array of strings representing the allowed file types based on file extension.
+     * Example: ['jpg', 'png', 'pdf']
+     */
+    fileTypes: string[] | string;
+    /**
+     * The label for the field. This is announced by screen readers when the field is focused.
+     * @localizable
+     */
+    label: string;
+    /**
+     * The maximum number of files that can be selected.
+     */
+    maxFiles: number;
+    /**
+     * The maximum size (in bytes) of any file that can be selected.
+     */
+    maxFileSize: number;
+    /**
+     * An array of objects representing the status of the files being uploaded.
+     * Each object should have a `name` property (the file name) and a `status`
+     * property (the status of the file) that equals either 'in-progress',
+     * 'failed' or 'uploaded'.
+     */
+    status: {
+        name: string;
+        status: 'in-progress' | 'failed' | 'uploaded';
+    }[];
+    /**
+     * Returns an array of File objects representing the files selected by the
+     * user. If no files are selected, the value is an empty array.
+     * @readonly
+     */
+    value: FilesObject;
+    /**
+     * Determines if the file picker is a browse button or a drop zone with a
+     * browse link.
+     */
+    variant: 'browse' | 'browse-drop';
+    tctChange: EventEmitter<FilesObject>;
+    updateFileList(newValue: {
+        name: string;
+        status: FileStatus;
+    }[]): void;
+    get dropZoneClasses(): string;
+    get fileTypesArray(): string[];
+    get hasDescription(): boolean;
+    get hasDescriptionSlotContent(): boolean;
+    get hasLabel(): boolean;
+    get hasLabelSlotContent(): boolean;
+    buildFilesObject(filesToUpload: File[]): FilesObject;
+    dimDropZone: (e: DragEvent) => void;
+    disableEvent(event: Event): void;
+    disableLoaderIfAllFilesUploaded(): void;
+    emitChange(filesObject: FilesObject): void;
+    extractFilesOfInvalidTypes(files: File[]): any[];
+    extractFilesOverMaxFilesLimit(files: File[]): any[];
+    extractFilesOverSizeLimit(files: File[]): any[];
+    forceRerender(): void;
+    getAnimationendHandlerToRemoveFileItem(fileName: string): (e: AnimationEvent) => void;
+    getClickHandlerToRemoveFileItem(fileName: string): () => void;
+    getFileItemClasses(fileName: string): string;
+    getFileItemStatusMessage(status: FileStatus, size: number): string;
+    grabDroppedFiles: (e: DragEvent) => void;
+    grabSelectedFiles: (e: Event) => void;
+    highlightDropZone: (e: DragEvent) => void;
+    launchFileBrowser(): void;
+    render: () => any;
+}
+export {};

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

@@ -43,7 +43,11 @@ export declare class Q2Pill implements ComponentInterface {
      * Only applicable when options are provided.
      */
     multiple: boolean;
-    /** Determine whether the popover is open or closed. */
+    /**
+     * Determine whether the popover is open or closed.
+     *
+     * @readonly
+     */
     open: boolean;
     /** Determines the label that is applied to the option list for accessibility purposes. */
     optionListLabel: string;
@@ -119,7 +123,7 @@ export declare class Q2Pill implements ComponentInterface {
     determineOptionCount: () => Promise<void>;
     executeActionSheet: (event: MouseEvent | KeyboardEvent) => Promise<void>;
     getOption: (value: string) => Promise<HTMLQ2OptionElement>;
-    handleButtonFocusout: (event: FocusEvent) => Promise<void>;
+    handleFocusOut: (event: FocusEvent) => Promise<void>;
     handleChange: (event: any) => void;
     handleClick: (event: MouseEvent) => Promise<void>;
     handleKeydown: (event: KeyboardEvent) => Promise<void>;

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

@@ -46,7 +46,6 @@ export declare class Q2Popover implements ComponentInterface {
     }>): void;
     scrollContainerTo(options: ScrollToOptions): Promise<void>;
     toggle(): Promise<void>;
-    handleControlElement(): void;
     minHeightProvided(): void;
     openChanged(open: boolean): Promise<void>;
     get isModule(): boolean;

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

@@ -3,6 +3,7 @@ import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 import { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from "../../components";
 import { IOptionValue } from '../q2-option-list/q2-option-list';
 export declare class Q2Select implements ComponentInterface {
+    inputField?: HTMLQ2InputElement;
     mutationObserver: MutationObserver;
     optionList: HTMLQ2OptionListElement;
     popoverElement?: HTMLQ2PopoverElement;
@@ -13,7 +14,6 @@ export declare class Q2Select implements ComponentInterface {
     hasCustomDisplay: boolean;
     hasPopoverBottom: boolean;
     hasPopoverTop: boolean;
-    inputField?: HTMLQ2InputElement;
     inputFocused: boolean;
     open: boolean;
     prioritizeSearch: boolean;

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

@@ -1,10 +1,10 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 export declare class Q2Tag implements ComponentInterface {
+    dropdownBtn: HTMLButtonElement;
     mutationObserver: MutationObserver;
     optionList: HTMLQ2OptionListElement;
     popoverElement: HTMLQ2PopoverElement;
     hostElement: HTMLElement;
-    dropdownBtn: HTMLButtonElement;
     optionCount: number;
     /**
      * Instructs the component to use the action sheet workflow for displaying its options.
@@ -17,7 +17,11 @@ export declare class Q2Tag implements ComponentInterface {
      * @localizable
      */
     label: string;
-    /** Determine whether the popover is open or closed. */
+    /**
+     * Determine whether the popover is open or closed.
+     *
+     * @readonly
+     */
     open: boolean;
     /** Determines the label that is applied to the option list for accessibility purposes. */
     optionListLabel: string;

package/dist/types/components.d.ts

@@ -10,6 +10,7 @@ import { IChartData, IDonutChartData } from "q2-tecton-common/lib/types/element-
 import { EChartsCoreOption } from "echarts/types/dist/core";
 import { Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow } from "./components/q2-data-table/q2-data-table";
 import { Q2Input } from "./components/q2-input/q2-input";
+import { FilesObject } from "./components/q2-file-picker/q2-file-picker";
 import { Q2Badge } from "./components/q2-badge/q2-badge";
 import { Q2Icon } from "./components/q2-icon/q2-icon";
 import { InputType } from "./components/q2-input/q2-input";
@@ -22,6 +23,7 @@ export { IChartData, IDonutChartData } from "q2-tecton-common/lib/types/element-
 export { EChartsCoreOption } from "echarts/types/dist/core";
 export { Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow } from "./components/q2-data-table/q2-data-table";
 export { Q2Input } from "./components/q2-input/q2-input";
+export { FilesObject } from "./components/q2-file-picker/q2-file-picker";
 export { Q2Badge } from "./components/q2-badge/q2-badge";
 export { Q2Icon } from "./components/q2-icon/q2-icon";
 export { InputType } from "./components/q2-input/q2-input";
@@ -263,6 +265,7 @@ export namespace Components {
         "onsuccess": (e: CustomEvent) => void;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open": boolean;
         /**
@@ -1026,6 +1029,7 @@ export namespace Components {
         "name": string;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open": boolean;
         /**
@@ -1206,6 +1210,43 @@ export namespace Components {
          */
         "type": string;
     }
+    interface Q2FilePicker {
+        /**
+          * A description of the field. This is announced by screen readers when the field is focused.
+          * @localizable
+         */
+        "description": string;
+        /**
+          * An array of strings representing the allowed file types based on file extension. Example: ['jpg', 'png', 'pdf']
+         */
+        "fileTypes": string[] | string;
+        /**
+          * The label for the field. This is announced by screen readers when the field is focused.
+          * @localizable
+         */
+        "label": string;
+        /**
+          * The maximum size (in bytes) of any file that can be selected.
+         */
+        "maxFileSize": number;
+        /**
+          * The maximum number of files that can be selected.
+         */
+        "maxFiles": number;
+        /**
+          * An array of objects representing the status of the files being uploaded. Each object should have a `name` property (the file name) and a `status` property (the status of the file) that equals either 'in-progress', 'failed' or 'uploaded'.
+         */
+        "status": { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[];
+        /**
+          * Returns an array of File objects representing the files selected by the user. If no files are selected, the value is an empty array.
+          * @readonly
+         */
+        "value": FilesObject;
+        /**
+          * Determines if the file picker is a browse button or a drop zone with a browse link.
+         */
+        "variant": 'browse' | 'browse-drop';
+    }
     interface Q2FormattedText {
         /**
           * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
@@ -1785,6 +1826,7 @@ export namespace Components {
         "multiple": boolean;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open": boolean;
         /**
@@ -2319,6 +2361,7 @@ export namespace Components {
         "label": string;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open": boolean;
         "openPopover": () => Promise<void>;
@@ -2528,6 +2571,10 @@ export interface Q2ExampleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2ExampleElement;
 }
+export interface Q2FilePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2FilePickerElement;
+}
 export interface Q2InputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2InputElement;
@@ -2921,6 +2968,23 @@ declare global {
         prototype: HTMLQ2ExampleElement;
         new (): HTMLQ2ExampleElement;
     };
+    interface HTMLQ2FilePickerElementEventMap {
+        "tctChange": FilesObject;
+    }
+    interface HTMLQ2FilePickerElement extends Components.Q2FilePicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLQ2FilePickerElementEventMap>(type: K, listener: (this: HTMLQ2FilePickerElement, ev: Q2FilePickerCustomEvent<HTMLQ2FilePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLQ2FilePickerElementEventMap>(type: K, listener: (this: HTMLQ2FilePickerElement, ev: Q2FilePickerCustomEvent<HTMLQ2FilePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLQ2FilePickerElement: {
+        prototype: HTMLQ2FilePickerElement;
+        new (): HTMLQ2FilePickerElement;
+    };
     interface HTMLQ2FormattedTextElement extends Components.Q2FormattedText, HTMLStencilElement {
     }
     var HTMLQ2FormattedTextElement: {
@@ -3402,6 +3466,7 @@ declare global {
         "q2-dropdown-item": HTMLQ2DropdownItemElement;
         "q2-editable-field": HTMLQ2EditableFieldElement;
         "q2-example": HTMLQ2ExampleElement;
+        "q2-file-picker": HTMLQ2FilePickerElement;
         "q2-formatted-text": HTMLQ2FormattedTextElement;
         "q2-icon": HTMLQ2IconElement;
         "q2-input": HTMLQ2InputElement;
@@ -3696,6 +3761,7 @@ declare namespace LocalJSX {
         "onsuccess"?: (e: CustomEvent) => void;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open"?: boolean;
         /**
@@ -4417,6 +4483,7 @@ declare namespace LocalJSX {
         "name"?: string;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open"?: boolean;
         /**
@@ -4578,6 +4645,44 @@ declare namespace LocalJSX {
          */
         "type"?: string;
     }
+    interface Q2FilePicker {
+        /**
+          * A description of the field. This is announced by screen readers when the field is focused.
+          * @localizable
+         */
+        "description"?: string;
+        /**
+          * An array of strings representing the allowed file types based on file extension. Example: ['jpg', 'png', 'pdf']
+         */
+        "fileTypes"?: string[] | string;
+        /**
+          * The label for the field. This is announced by screen readers when the field is focused.
+          * @localizable
+         */
+        "label"?: string;
+        /**
+          * The maximum size (in bytes) of any file that can be selected.
+         */
+        "maxFileSize"?: number;
+        /**
+          * The maximum number of files that can be selected.
+         */
+        "maxFiles"?: number;
+        "onTctChange"?: (event: Q2FilePickerCustomEvent<FilesObject>) => void;
+        /**
+          * An array of objects representing the status of the files being uploaded. Each object should have a `name` property (the file name) and a `status` property (the status of the file) that equals either 'in-progress', 'failed' or 'uploaded'.
+         */
+        "status"?: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[];
+        /**
+          * Returns an array of File objects representing the files selected by the user. If no files are selected, the value is an empty array.
+          * @readonly
+         */
+        "value"?: FilesObject;
+        /**
+          * Determines if the file picker is a browse button or a drop zone with a browse link.
+         */
+        "variant"?: 'browse' | 'browse-drop';
+    }
     interface Q2FormattedText {
         /**
           * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
@@ -5155,6 +5260,7 @@ declare namespace LocalJSX {
         "onChange"?: (event: Q2PillCustomEvent<{ value: string; values: IOptionValue1[]; active: boolean }>) => void;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open"?: boolean;
         /**
@@ -5686,6 +5792,7 @@ declare namespace LocalJSX {
         "onClick"?: (event: Q2TagCustomEvent<{ value: string }>) => void;
         /**
           * Determine whether the popover is open or closed.
+          * @readonly
          */
         "open"?: boolean;
         /**
@@ -5873,6 +5980,7 @@ declare namespace LocalJSX {
         "q2-dropdown-item": Q2DropdownItem;
         "q2-editable-field": Q2EditableField;
         "q2-example": Q2Example;
+        "q2-file-picker": Q2FilePicker;
         "q2-formatted-text": Q2FormattedText;
         "q2-icon": Q2Icon;
         "q2-input": Q2Input;
@@ -5934,6 +6042,7 @@ declare module "@stencil/core" {
             "q2-dropdown-item": LocalJSX.Q2DropdownItem & JSXBase.HTMLAttributes<HTMLQ2DropdownItemElement>;
             "q2-editable-field": LocalJSX.Q2EditableField & JSXBase.HTMLAttributes<HTMLQ2EditableFieldElement>;
             "q2-example": LocalJSX.Q2Example & JSXBase.HTMLAttributes<HTMLQ2ExampleElement>;
+            "q2-file-picker": LocalJSX.Q2FilePicker & JSXBase.HTMLAttributes<HTMLQ2FilePickerElement>;
             "q2-formatted-text": LocalJSX.Q2FormattedText & JSXBase.HTMLAttributes<HTMLQ2FormattedTextElement>;
             "q2-icon": LocalJSX.Q2Icon & JSXBase.HTMLAttributes<HTMLQ2IconElement>;
             "q2-input": LocalJSX.Q2Input & JSXBase.HTMLAttributes<HTMLQ2InputElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.52.1",
+    "version": "1.53.0",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.52.1",
+        "q2-tecton-common": "1.53.0",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -60,5 +60,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "f4eca32496093589e63775344d338c0762a85eca"
+    "gitHead": "c1c1a3fd469d623971a1081835bfab6fbc56d28c"
 }

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

@@ -1,120 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e7e68b1e.js');
-const index$1 = require('./index-07285783.js');
-
-const q2ItemCss = "*{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}*{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{display:block}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
-const Q2ItemStyle0 = q2ItemCss;
-
-const Q2Item = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.renderTrigger = 0;
-        this.clickable = undefined;
-    }
-    // #endregion
-    // #region Component Lifecycle Events
-    componentDidLoad() {
-        if (typeof MutationObserver !== 'undefined') {
-            const observer = new MutationObserver(() => (this.renderTrigger += 1));
-            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
-            this.mutationObserver = observer;
-        }
-        index$1.overrideFocus(this.hostElement);
-    }
-    // #endregion
-    // #region Listeners
-    delegateFocus(event) {
-        var _a;
-        if (this.clickable) {
-            (_a = this.itemElement) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            event.preventDefault();
-        }
-    }
-    // #endregion
-    // #region Local Methods
-    get actionClasses() {
-        const classes = ['action'];
-        if (!this.hasBulletSlotContent) {
-            classes.push(`action-no-bullet`);
-        }
-        return classes.join(' ');
-    }
-    get bulletClasses() {
-        const classes = ['bullet'];
-        if (!this.hasFooterSlotContent) {
-            classes.push(`bullet-no-footer`);
-        }
-        return classes.join(' ');
-    }
-    get footerClasses() {
-        const classes = ['footer'];
-        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
-            classes.push(`footer-no-action-nor-bullet`);
-        }
-        else if (!this.hasActionSlotContent) {
-            classes.push(`footer-no-action`);
-        }
-        else if (!this.hasBulletSlotContent) {
-            classes.push(`footer-no-bullet`);
-        }
-        return classes.join(' ');
-    }
-    get hasActionSlotContent() {
-        return index$1.hasSlotContent(this.hostElement, 'action');
-    }
-    get hasBodySlotContent() {
-        return index$1.hasSlotContent(this.hostElement, 'body');
-    }
-    get hasBulletSlotContent() {
-        return index$1.hasSlotContent(this.hostElement, 'bullet');
-    }
-    get hasFooterSlotContent() {
-        return index$1.hasSlotContent(this.hostElement, 'footer');
-    }
-    get hasHeaderSlotContent() {
-        return index$1.hasSlotContent(this.hostElement, 'header');
-    }
-    get itemClasses() {
-        const classes = ['item'];
-        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
-            classes.push(`item-no-action-nor-bullet`);
-        }
-        else if (!this.hasActionSlotContent) {
-            classes.push(`item-no-action`);
-        }
-        else if (!this.hasBulletSlotContent) {
-            classes.push(`item-no-bullet`);
-        }
-        if (!this.hasFooterSlotContent) {
-            classes.push(`item-no-footer`);
-        }
-        return classes.join(' ');
-    }
-    get mainClasses() {
-        const classes = ['main'];
-        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
-            classes.push(`main-no-action-nor-bullet`);
-        }
-        else if (!this.hasBulletSlotContent) {
-            classes.push(`main-no-bullet`);
-        }
-        return classes.join(' ');
-    }
-    // #endregion
-    // #region Render Methods
-    render() {
-        const { clickable } = this;
-        return (index.h("div", { key: '0829fd5b35d9479ab8a7dae744e8a09e90a1a128', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (index.h("div", { key: '6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2', class: this.bulletClasses }, index.h("slot", { key: '9bd9880d99124c1102725b5ce6ca49ac1e229cf9', name: "bullet" }))), index.h("div", { key: '0c184236511ba043c91a009c93680858e34de545', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: '2570b5fd60955dbbc97f5f3d941a5d653785fb0e', class: "header" }, index.h("slot", { key: 'a438cafe8aeded03ee814f736ae897852a9f1415', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: '270585a7a4ca111aedd4baeab101c353814aa72c', class: "body" }, index.h("slot", { key: 'cc95afec425e06c0a9edccedb0420207ccab88a0', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: 'c6a32baa731bd79c57a625d615058442a5bc764a', class: this.actionClasses }, index.h("slot", { key: '2b3104f1e0b4eed5e605c5784468f608240a881b', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: '0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35', class: this.footerClasses }, index.h("slot", { key: '76ae62c0b433f78b187853da2cf40394f7ca315e', name: "footer" })))));
-    }
-    get hostElement() { return index.getElement(this); }
-};
-Q2Item.style = Q2ItemStyle0;
-
-exports.q2_item = Q2Item;
-
-//# sourceMappingURL=q2-item.cjs.entry.js.map

package/dist/cjs/q2-item.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"q2-item.entry.cjs.js","mappings":"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","names":["overrideFocus","hasSlotContent","h"],"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, 4px)};\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, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\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, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 1fr) 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 } 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    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    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\n    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Local Methods\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 hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\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"],"version":3}

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

@@ -1,64 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e7e68b1e.js');
-
-const q2LinkCss = "*{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{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
-const Q2LinkStyle0 = q2LinkCss;
-
-const Q2Link = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.tctClick = index.createEvent(this, "tctClick", 7);
-        this.disabled = false;
-        this.href = '#';
-        this.label = undefined;
-        this.referrerpolicy = undefined;
-        this.target = undefined;
-        this.tctTitle = undefined;
-        this.variant = 'inline';
-    }
-    // #endregion
-    // #region Public Methods API
-    /**
-     * A method for click.
-     *
-     * @testOnly
-     */
-    async clickLink() {
-        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id="linkAnchor"]`);
-        anchor === null || anchor === void 0 ? void 0 : anchor.click();
-    }
-    // #endregion
-    // #region Local Methods
-    get classes() {
-        const list = ['link-container'];
-        if (this.variant)
-            list.push(this.variant);
-        if (!!this.disabled)
-            list.push('disabled');
-        return list.join(' ');
-    }
-    handleClick(event) {
-        event.stopPropagation();
-        if (this.disabled)
-            return;
-        this.tctClick.emit({
-            target: this.target,
-            referrerpolicy: this.referrerpolicy,
-            href: this.href,
-        });
-    }
-    // #endregion
-    // #region Render Methods
-    render() {
-        return this.variant === 'standalone' ? (index.h("div", { class: this.classes, "aria-label": this.label }, index.h("a", { class: "link", onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, index.h("span", { class: "label" }, this.label), index.h("q2-icon", { type: "chevron-right" })))) : (index.h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
-    }
-    get hostElement() { return index.getElement(this); }
-};
-Q2Link.style = Q2LinkStyle0;
-
-exports.q2_link = Q2Link;
-
-//# sourceMappingURL=q2-link.cjs.entry.js.map