q2-tecton-elements 1.45.3 → 1.46.1

package/dist/collection/components/q2-legend/q2-legend.js

@@ -0,0 +1,271 @@
+import { h } from "@stencil/core";
+export class Q2Legend {
+    constructor() {
+        this.selectedItemIndex = -1;
+        this.hoveredItemIndex = -1;
+        this.data = [];
+        this.hoveredItemId = null;
+        this.format = 'default';
+        this.selectedItemId = null;
+    }
+    watchHoveredItemId(newItemId) {
+        const newItemIndex = this.getDataIndexForId(newItemId);
+        this.hoveredItemIndex = newItemIndex;
+    }
+    watchSelectedItemId(newItemId) {
+        const newItemIndex = this.getDataIndexForId(newItemId);
+        this.selectedItemIndex = newItemIndex;
+    }
+    // #endregion
+    // #region Lifecycle events
+    componentWillLoad() {
+        this.watchHoveredItemId(this.hoveredItemId);
+        this.watchSelectedItemId(this.selectedItemId);
+    }
+    // #endregion
+    // #region Local methods
+    get dataWithClasses() {
+        return this.data.map((item, index) => (Object.assign(Object.assign({}, item), { classes: {
+                'item-button': true,
+                'item-button-faded': this.isItemButtonFaded(index),
+                'item-button-selected': this.isItemButtonSelected(index),
+            } })));
+    }
+    formatValue(value) {
+        const valueAsFloat = parseFloat(value.toString());
+        if (this.format === 'currency') {
+            return Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }).format(valueAsFloat);
+        }
+        return Intl.NumberFormat('en-US').format(valueAsFloat);
+    }
+    getDataIndexForId(id) {
+        const index = this.data.findIndex(item => item.id === id);
+        return index >= 0 ? index : -1;
+    }
+    isItemButtonFaded(index) {
+        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex)
+            return false;
+        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1)
+            return true;
+        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;
+    }
+    isItemButtonSelected(index) {
+        return index === this.selectedItemIndex;
+    }
+    onClick(event, itemData) {
+        event.stopPropagation();
+        const itemIndex = this.getDataIndexForId(itemData.id);
+        if (this.selectedItemIndex === itemIndex) {
+            this.selectedItemIndex = -1;
+            if (event.detail === 0) {
+                // Keyboard click
+                this.hoveredItemIndex = -1;
+            }
+            else {
+                // Mouse click
+                this.hoveredItemIndex = itemIndex;
+            }
+            this.click.emit(null);
+            return;
+        }
+        this.selectedItemIndex = itemIndex;
+        this.click.emit(this.data[itemIndex]);
+    }
+    onClickElsewhere(obj) {
+        obj.selectedItemIndex = -1;
+    }
+    onMouseLeave(event, itemData) {
+        event.stopPropagation();
+        const itemIndex = this.getDataIndexForId(itemData.id);
+        this.hoveredItemIndex = -1;
+        this.mouseleave.emit(this.data[itemIndex]);
+    }
+    onMouseEnter(event, itemData) {
+        event.stopPropagation();
+        const itemIndex = this.getDataIndexForId(itemData.id);
+        this.hoveredItemIndex = itemIndex;
+        this.mouseenter.emit(this.data[itemIndex]);
+    }
+    // #endregion
+    // #region Render methods
+    render() {
+        return (h("click-elsewhere", { key: '8ee6971693e03e0823d3db40447389010de04fcf', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '3e61a3ce65430feeb44596680f8f042d83ac934e' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+    }
+    static get is() { return "q2-legend"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-legend.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-legend.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDonutChartData[]",
+                    "resolved": "IDonutChartData[]",
+                    "references": {
+                        "IDonutChartData": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/element-types",
+                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of objects that contain the data to be displayed."
+                },
+                "defaultValue": "[]"
+            },
+            "hoveredItemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the item to set as hovered."
+                },
+                "attribute": "hovered-item-id",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'currency'",
+                    "resolved": "\"currency\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The format of the value displayed in the legend."
+                },
+                "attribute": "format",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "selectedItemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the item to set as selected."
+                },
+                "attribute": "selected-item-id",
+                "reflect": true,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedItemIndex": {},
+            "hoveredItemIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IDonutChartData",
+                    "resolved": "IDonutChartData",
+                    "references": {
+                        "IDonutChartData": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/element-types",
+                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                        }
+                    }
+                }
+            }, {
+                "method": "mouseleave",
+                "name": "mouseleave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IDonutChartData",
+                    "resolved": "IDonutChartData",
+                    "references": {
+                        "IDonutChartData": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/element-types",
+                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                        }
+                    }
+                }
+            }, {
+                "method": "mouseenter",
+                "name": "mouseenter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IDonutChartData",
+                    "resolved": "IDonutChartData",
+                    "references": {
+                        "IDonutChartData": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/element-types",
+                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "hoveredItemId",
+                "methodName": "watchHoveredItemId"
+            }, {
+                "propName": "selectedItemId",
+                "methodName": "watchSelectedItemId"
+            }];
+    }
+}
+//# sourceMappingURL=q2-legend.js.map

package/dist/collection/components/q2-legend/q2-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-legend.js","sourceRoot":"","sources":["../../../../src/components/q2-legend/q2-legend.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/q2-list/q2-list.css

@@ -132,15 +132,18 @@ button {
   visibility: hidden;
 }
 
-:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)), :host([bordered]:not([bordered=false])) .header {
-  border-bottom: var(--tct-list-item-separator, 1px solid #949494);
+:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),
+:host([bordered]:not([bordered=false])) .header {
+  border-style: var(--tct-list-item-border-style, solid);
+  border-width: var(--tct-list-item-border-width, 0 0 1px 0);
+  border-color: var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9));
 }
 
 .header {
-  --comp-default-header-padding: var(--app-scale-2x, 8px) var(--app-scale-4x, 16px);
+  --comp-default-header-padding: 0 var(--app-scale-4x, 20px);
   display: flex;
   gap: var(--app-scale-3x, 12px);
-  padding: var(--tct-list-header-padding, var(--tct-item-padding, var(--comp-default-header-padding)));
+  padding: var(--tct-list-header-padding, var(--comp-default-header-padding));
   min-height: var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px));
 }
 .header-spacebetween {
@@ -156,7 +159,7 @@ button {
   width: 100%;
   height: var(--tct-list-label-height, 44px);
   line-height: var(--tct-list-label-line-height, 44px);
-  font-size: var(--tct-list-label-font-size, 16px);
+  font-size: var(--tct-list-label-font-size, var(--app-font-size, 14px));
   font-weight: var(--tct-list-label-font-weight, 600);
   color: var(--tct-list-label-font-color, var(--t-text, #4d4d4d));
 }

package/dist/collection/components/q2-list/q2-list.js

@@ -21,12 +21,12 @@ export class Q2List {
     // #endregion
     // #region Component Lifecycle Events
     componentDidLoad() {
-        if (typeof MutationObserver !== 'undefined') {
-            const observer = new MutationObserver(this.onMutationObserved);
-            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
-            this.mutationObserver = observer;
-            this.onMutationObserved();
-        }
+        if (typeof MutationObserver === 'undefined')
+            return;
+        const observer = new MutationObserver(this.onMutationObserved);
+        observer.observe(this.hostElement, { childList: true, subtree: true });
+        this.mutationObserver = observer;
+        this.onMutationObserved();
     }
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
@@ -64,7 +64,7 @@ export class Q2List {
     // #endregion
     // #region Render methods
     render() {
-        return (h("div", { key: '37b0671ca94200f7e753f2b5e02a3dfd00efc6a3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a00b89d9153d707f5b7a3c0aaea857e5d489caff', class: this.headerClasses }, h("div", { key: '6ab05c1b898d8340526e9c45b457eb1920d37431', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'cb491e1700fc4312aa65016f897c35501ada01ff', name: "filter" }))), h("div", { key: 'b5af288fd5a3b233f981f67156bf1fbb59e1326d', role: "list" }, h("slot", { key: '3c48768066b42cecfc998506537a9447b5b61ff5' }))));
+        return (h("div", { key: '5cf0fbf1cf90821aad8380a082925050834930c5', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'e34cb030fc9a5ddd52f3b9668f5e4e6606a90ab3', class: this.headerClasses }, h("div", { key: '2c698cdc7359ba6404423c7f508b1f3583385de5', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '19e450240e0788440e61ea85bf729533c3dfef5f', name: "filter" }))), h("div", { key: '44c1a6503f9c80c01b3d58b48641272b580b0add', role: "list" }, h("slot", { key: '941440f0f21772302f0ac5ef70a42d4820cca063' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-list/q2-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-list.js","sourceRoot":"","sources":["../../../../src/components/q2-list/q2-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    listElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /** label text on header area */\n    @Prop({ reflect: true }) label: string;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n            this.onMutationObserved();\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    // #endregion\n    // #region Local methods\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-list.js","sourceRoot":"","sources":["../../../../src/components/q2-list/q2-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    listElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /** label text on header area */\n    @Prop({ reflect: true }) label: string;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    // #endregion\n    // #region Local methods\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-loc/q2-loc.js

@@ -6,7 +6,7 @@ export class Q2Loc {
         this.value = undefined;
     }
     render() {
-        return h("span", { key: '3b8059b85a21870fc1b8e9ff9d89cad6afe2df36' }, loc(this.value, this.substitutions));
+        return h("span", { key: '207c331410df3dfa7963912368b2fab219a84a97' }, loc(this.value, this.substitutions));
     }
     static get is() { return "q2-loc"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-message/q2-message.js

@@ -36,7 +36,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'dc36daa38d71e2adb1b5926531fa3c6864a8e7a4', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '41ea931afc6d551e6618f3041a77fc8c67fa23ea', class: "sr" }), h("div", { key: 'f77d9ae560914108eda454c0d4b4eb04302ba558', class: "sr message-label" }, messageLabel), h("div", { key: '6fb809b83d5de60625da2f9799bdbbcf2eb96eef', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b03b23335c2b650f82a57abc8b2830353c5d8ae9' }))));
+        return (h("div", { key: '48c08c15096e1787af65a9d847a191f5b7ee7100', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '4d673d2bdf92f56606ab1075d8af807992982a57', class: "sr" }), h("div", { key: 'c31396c4d2aaed7b2d6ee96e33697e7c14c814af', class: "sr message-label" }, messageLabel), h("div", { key: '9bedced6017fa3da2024ce713688e4b5b006f563', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b3d452032ef55d3aca7ea63768f820a522241ba6' }))));
     }
     messageIcon(type) {
         const iconMap = {

package/dist/collection/components/q2-optgroup/q2-optgroup.js

@@ -36,7 +36,7 @@ export class Q2Optgroup {
         });
     }
     render() {
-        return (h("div", { key: 'f90275607d9a96d441d38a0580ce1b93e662634e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'd7ebce6b9dca35f1a41c500942f6b21b6277d7b8', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '1f617b24906eb0ebe0e14520a45ae5de2e6757b5', class: "q2-optgroup-options" }, h("slot", { key: 'b90f24f7d8c10e3289041cb948587436c75a19f2' }))));
+        return (h("div", { key: '22334d6ad4d588af06d33c426442c17e517bfdff', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '82470c713ed744c41ca8a1682d78e4795e83e125', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'd246db5839936be3b0ee56eec47e7a11aa0269ee', class: "q2-optgroup-options" }, h("slot", { key: '12442af1a98a84db8023dd7572ffa3d6fba34fdc' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-option/q2-option.js

@@ -50,7 +50,7 @@ export class Q2Option {
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: 'b6ca0e5f1a15c594a6577769c7549369573541bd', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'd4ddab403a45207e8f7e1c2b3611fd9ad5eafa52', type: "checkmark" }), h("div", { key: '4d10f04c3cc686a21f7e6e5d19106b61af89f6f2', class: "content" }, h("slot", { key: '2290b5fe8bbce6a3cb64c70d31df2376d51dd129' }))));
+        return (h(Host, { key: '4b5001e4870ee08cbd313e029bc2fa6b15503ced', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '652c794d376c56a8cdb116e8c9d37596dad6a4dd', type: "checkmark" }), h("div", { key: 'f39323dc5d9959daf61833a4cd8066bea83ea0c6', class: "content" }, h("slot", { key: '2107c286ec7b9ce7f94e4e3de3a0789217a56e45' }))));
     }
     static get is() { return "q2-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-option-list/q2-option-list.js

@@ -659,7 +659,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/tecton-production_release_1.45.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/workspace/workspace/tecton-production_release_1.46.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -731,7 +731,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/tecton-production_release_1.45.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/workspace/workspace/tecton-production_release_1.46.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }

package/dist/collection/components/q2-pagination/q2-pagination.css

@@ -66,9 +66,17 @@ button {
 }
 
 :host {
-  text-align: right;
-  display: block;
+  display: flex;
   width: 100%;
+  justify-content: flex-end;
+}
+
+:host([alignment=center]) {
+  justify-content: center;
+}
+
+:host([alignment=left]) {
+  justify-content: flex-start;
 }
 
 :host([hidden]) {
@@ -124,4 +132,11 @@ q2-input {
   --tct-input-height: var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));
   --tct-input-min-height: var(--tct-input-height);
   --tct-input-align: center;
+}
+
+q2-select {
+  --tct-select-input-min-height: var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));
+  --tct-select-input-max-height: var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));
+  width: var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));
+  min-width: var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px));
 }

package/dist/collection/components/q2-pagination/q2-pagination.js

@@ -17,6 +17,9 @@ export class Q2Pagination {
             }
             this.change.emit({ page });
         };
+        this.handlePerPageChange = (event) => {
+            this.perPage = event.detail.value * 1;
+        };
         this.checkSize = () => {
             const { hostElement, containerElement } = this;
             const isOverflowing = this.containerWidth > hostElement.clientWidth;
@@ -37,8 +40,10 @@ export class Q2Pagination {
         this.pages = undefined;
         this.pagesOnly = undefined;
         this.perPage = undefined;
+        this.perPageIncrements = undefined;
         this.recordsOnly = undefined;
         this.recordType = undefined;
+        this.alignment = undefined;
         this.isSmall = undefined;
     }
     ////////// LIFECYCLE HOOKS ////////
@@ -128,7 +133,21 @@ export class Q2Pagination {
             window.removeEventListener('resize', this.checkSize);
         }
     }
+    renderPerPage() {
+        var _a;
+        if (!((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length)) {
+            return '';
+        }
+        this.perPageIncrements = this.perPageIncrements
+            .filter(perPage => !isNaN(perPage))
+            .map(perPage => perPage * 1)
+            .sort((a, b) => a - b);
+        if (this.perPage === undefined)
+            this.perPage = this.perPageIncrements[0];
+        return (h("q2-select", { onChange: this.handlePerPageChange, value: this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined }, this.perPageIncrements.map(perPage => (h("q2-option", { value: `${perPage}`, display: `${loc('tecton.element.pagination.view')} ${perPage}` }, `${loc('tecton.element.pagination.view')} ${perPage}`)))));
+    }
     render() {
+        var _a;
         const { pagesOnly, recordsOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, nextRange, prevRange, } = this;
         const onFirstPage = page === 1;
         const onLastPage = page === totalPages;
@@ -150,7 +169,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: '74561394c7bdb496d306e959ad5b1e5361e42ec7', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '2500a292e1823d4d24136be40a4fa4f9346bc9c8', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '50343b3b19ac4d64966783eab66f5ce61dc1b94f', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '7ab3dafbf56de8ec12ac49b470fdb5a8d4df2f74', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -159,7 +178,7 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '653ee492dfd5b7e80d8d1e1eb680364cbdb13f17', class: "btn-group" }, h("q2-btn", { key: '512e60ac934efaa54a87862ab81677956d80c7dc', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7c0c57fbb28c7221467457ced6e2f196f5c0c41a', type: "chevron-double-left" })), h("q2-btn", { key: '5a3ad7135ac650be29b2dcbd0f4e2dd1e0303a14', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9955d71cb14f809d7794022aff67c4403dd59e0c', type: "chevron-left" }))), h("div", { key: 'b7bbe334d869c527093f50b61419cd680dad7205', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '778f9842501854d5427f481e02924b2f967f8ec7', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '2761c3e8acd7150aba435d86c545e0903482163d', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '00e1cfc6c391311920928694844875715ed2fd97', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'f14e720d12dcf4deb0b1ccf1b290f8ef1b3f9dab', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '6acb2c32ca833bdd68fe0e09cee75df7c8abaae3', class: "btn-group" }, h("q2-btn", { key: '0ac42aecaf056348a8c2e2729d1e35e7db44750b', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'f1c87ff1bc99dc529a2e5efdaad614f1b1c4b520', type: "chevron-right" })), h("q2-btn", { key: '2f6d47cc2805f3e9e3215448e5c6ca0909b7ad80', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '88a16778a20430935b7cc5d23393897f426d4548', type: "chevron-double-right" })))));
+            })), h("div", { key: 'ccac7c6ba741c00ee29a273ff95d6f1376c82114', class: "btn-group" }, h("q2-btn", { key: '995f73fe6f8b7caba3f33b26d2951d6dfdb9c8ad', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '511c412f9b64ef9c255d3bb0c3036c508041ba1e', type: "chevron-double-left" })), h("q2-btn", { key: 'b31a58e9895d6bd0a290bc878bcc90e5d05573c4', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '237e92a052c98544f5e5d3655b76a87fcbae1ffc', type: "chevron-left" }))), h("div", { key: 'c5f5dbcf26d85bf38329ca342462c097a6fdfbf2', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '744fc7c5fd66aa050e336173677c0560597773a2', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '6a51a7881d8dc25f33e882cb801dfa49e66f5624', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '9fcd3d30b4c641e428f9088c5da31fe9236af065', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: '74fb4e9dc5fb522a2a8e4d6bb079de21a75e7b8e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'af17aff0c838a045e151651ff58c3aeae37310a4', class: "btn-group" }, h("q2-btn", { key: '6241c7d80e88ebf31dba7ac2c013174415e78860', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'c101b0a222e94f3bef8a6e878c5d507bf15bf9a7', type: "chevron-right" })), h("q2-btn", { key: '91b74767914718048301eb21ac5ddf93ce7dca5e', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'b8ce5dfd5622c941602e6439fff5e0e75b639855', type: "chevron-double-right" }))), h("div", { key: '5897095710edb3fa0fc00eaf072de8d6e1cee844', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -281,6 +300,21 @@ export class Q2Pagination {
                 "attribute": "per-page",
                 "reflect": false
             },
+            "perPageIncrements": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list of perPage to operate pagination. e.g.) [10, 25, 50]"
+                }
+            },
             "recordsOnly": {
                 "type": "boolean",
                 "mutable": true,
@@ -314,6 +348,23 @@ export class Q2Pagination {
                 },
                 "attribute": "record-type",
                 "reflect": false
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the horizontal alignment of children elements"
+                },
+                "attribute": "alignment",
+                "reflect": false
             }
         };
     }