@xplortech/apollo-core 2.6.0 → 2.7.0

package/dist/collection/components/xpl-tag/xpl-tag.js

@@ -1,13 +1,246 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 export class Tag {
-    render() {
-        return (h(Host, { key: '6a2aaaef81c317bb30ebfc20266581205db73ce2', class: "xpl-tag-container" }, h("button", { key: '2aaae9dd6bbdb13db531cf249baa96bfa15aff55', class: "xpl-tag", onClick: () => {
-                this.close.emit();
-            } }, h("slot", { key: 'cd56059cee54af39ce61e7560e00e013646c648f' })), h("button", { key: 'd529f61e40d097db2832e550e0f0b05c8ccc9179', class: "xpl-tag__close", onClick: () => {
+    constructor() {
+        this.dismissAriaLabelSuffix = 'tag';
+        this.isDragging = false;
+        this.disabled = false;
+        this.dismissible = true;
+        this.isDraggable = false;
+        this.size = 'default';
+        this.handleTagClick = (_event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (!this.isDraggable) {
                 this.close.emit();
-            } }, "\u00D7")));
+            }
+        };
+        this.setDragPreviewToHost = (event) => {
+            if (!event.dataTransfer) {
+                return;
+            }
+            try {
+                const rect = this.el.getBoundingClientRect();
+                const offsetX = Math.max(0, event.clientX - rect.left);
+                const offsetY = Math.max(0, event.clientY - rect.top);
+                event.dataTransfer.setDragImage(this.el, offsetX, offsetY);
+            }
+            catch (_a) {
+            }
+        };
+        this.handleContentKeyDown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+        };
+        this.handleDismissClick = (event) => {
+            event.stopPropagation();
+            if (this.disabled) {
+                return;
+            }
+            this.close.emit();
+            this.tagRemove.emit();
+        };
+        this.handleDragStart = (event) => {
+            this.isDragging = true;
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+                this.setDragPreviewToHost(event);
+                if (this.tagId) {
+                    event.dataTransfer.setData('application/x-tag-id', this.tagId);
+                }
+                event.dataTransfer.setData('text/plain', this.getContentLabelText());
+            }
+            this.tagDragStart.emit({
+                tagId: this.tagId,
+                content: this.getContentLabelText(),
+                originalEvent: event,
+            });
+        };
+        this.handleDragEnd = (event) => {
+            var _a;
+            this.isDragging = false;
+            const wasDropped = ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.dropEffect) === 'move';
+            this.tagDragEnd.emit({
+                tagId: this.tagId,
+                dropped: wasDropped,
+                originalEvent: event,
+            });
+        };
+        this.handleDragOver = (event) => {
+            if (this.disabled || !this.isDraggable) {
+                return;
+            }
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+        };
+        this.handleDragEnter = (event) => {
+            if (this.disabled || !this.isDraggable) {
+                return;
+            }
+            event.preventDefault();
+        };
+        this.handleHostDragStart = (event) => {
+            if (event.target === this.el && this.isDraggable) {
+                event.preventDefault();
+            }
+        };
+    }
+    onDisabledChange(newValue) {
+        if (newValue && this.isDragging) {
+            this.isDragging = false;
+        }
+    }
+    onIsDraggableChange(newValue) {
+        if (!newValue && this.isDragging) {
+            this.isDragging = false;
+        }
+    }
+    componentDidRender() {
+        queueMicrotask(() => this.syncDismissAriaLabelSuffix());
+    }
+    getContentLabelText() {
+        var _a, _b;
+        return ((_b = (_a = this.el.querySelector('.xpl-tag__content')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '').trim();
+    }
+    syncDismissAriaLabelSuffix() {
+        if (!this.el.isConnected) {
+            return;
+        }
+        const trimmed = this.getContentLabelText();
+        const next = trimmed === '' ? 'tag' : trimmed;
+        if (next !== this.dismissAriaLabelSuffix) {
+            this.dismissAriaLabelSuffix = next;
+        }
+    }
+    render() {
+        const dragEnabled = this.isDraggable && !this.disabled;
+        return (h(Host, { key: '117319681b3edca99c97361353fd1775a0b9b32f', class: {
+                'xpl-tag': true,
+                'xpl-tag-container': true,
+                'xpl-tag--disabled': this.disabled,
+                'xpl-tag--dismissible': this.dismissible,
+                'xpl-tag--dragging': this.isDragging,
+                'xpl-tag--draggable': dragEnabled,
+                'xpl-tag--sm': this.size === 'sm',
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'b1040693b482270dec9403a908bf3cacd5db49b8', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: 'ed0419c92f526424bb1b9cd43e93ba119348da07', icon: "xmark", size: 10 })))));
     }
     static get is() { return "xpl-tag"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag shows a dismiss button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the tag label uses native HTML5 drag (the inner label is the drag source).\nNamed `isDraggable` so the Stencil prop does not collide with the native `HTMLElement.draggable`\nAPI. `reflect: false` avoids syncing a `draggable` attribute onto the host; the inner label\nremains the drag source. Host `onDragStart` still suppresses stray native drags from host chrome."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'sm'",
+                    "resolved": "\"default\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "tagId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional stable id for the tag. When set, it is included in `tagDragStart` / `tagDragEnd` detail\nand written to `dataTransfer` as `application/x-tag-id`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dismissAriaLabelSuffix": {},
+            "isDragging": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "close",
@@ -15,15 +248,85 @@ export class Tag {
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `tagRemove` for dismiss button clicks only. The `close` event will be removed in a future major version."
+                        }],
+                    "text": "Emitted when the tag is dismissed (content click when `isDraggable` is false, or dismiss button click)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tagDragEnd",
+                "name": "tagDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a drag operation ends. `event.detail`: `{ tagId?, dropped, originalEvent }`.\n`dropped` is `true` when `dataTransfer.dropEffect === 'move'`.\n`originalEvent` is the native `DragEvent`; browsers may clear `dataTransfer` after the\nsynchronous handler runs \u2014 do not read `originalEvent.dataTransfer.getData(...)` asynchronously."
+                },
+                "complexType": {
+                    "original": "TagDragEndDetail",
+                    "resolved": "TagDragEndDetail",
+                    "references": {
+                        "TagDragEndDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
+                            "id": "src/components/components/xpl-tag/xpl-tag.tsx::TagDragEndDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tagDragStart",
+                "name": "tagDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Callback function that is called when tag text or `x` icon is clicked"
+                    "text": "Emitted when a drag operation starts (native `dragstart` on the inner label).\n`event.detail`: `{ tagId?, content, originalEvent }`.\n`originalEvent` is the native `DragEvent`; browsers may clear `dataTransfer` after the\nsynchronous handler runs \u2014 do not read `originalEvent.dataTransfer.getData(...)` asynchronously."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "TagDragStartDetail",
+                    "resolved": "TagDragStartDetail",
+                    "references": {
+                        "TagDragStartDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
+                            "id": "src/components/components/xpl-tag/xpl-tag.tsx::TagDragStartDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tagRemove",
+                "name": "tagRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tag dismiss (\u00D7) button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }, {
+                "propName": "isDraggable",
+                "methodName": "onIsDraggableChange"
+            }];
+    }
 }

package/dist/collection/components/xpl-toast/xpl-toast.js

@@ -35,9 +35,9 @@ export class Toast {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b8a25651f1dd57f9f574cd6401877295a6ca7101', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '20adfa314269787a9a03e793a1b74b9c5fb47585', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: 'e3346cee07a34c61ed825966c59c9c8ac30f6302', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e85cc1925897c34079e73a9d094c681c835548f4', class: "xpl-toast__notification" }, h("p", { key: '467fc15e4d26f240d735ddc957218bb7ab508dab', class: "xpl-toast__title" }, h("slot", { key: '3b339cd7b382043919139e83679e7033d63c3196', name: "title" })), this.caption !== '' && (h("p", { key: '675f42d92a7bd0527416e5eb77a56a7319d8f9a5', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '1904c868cba4f3178b0470b7381c23925a732a16', class: "xpl-toast__action", ref: (el) => {
+        return (h(Host, { key: 'c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '7057e31e0f25dab1ba8b093f1dca15e6f08c44e4', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7875c518753729ae39a7bb9f2051751924a0d558', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e38c7d0593c16f3dfa83bc4e521f89ee644b46d4', class: "xpl-toast__notification" }, h("p", { key: '8186437158381780554d2509a806704c52450f8c', class: "xpl-toast__title" }, h("slot", { key: '0aa8df0520c33b4576acfb1ad4750a72928b94d5', name: "title" })), this.caption !== '' && (h("p", { key: '3a4ce8f73e498373344b8b692e624f177212a70a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '636ff5b9476cea09d21b97f3e1b78860a6f10669', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, h("slot", { key: '33c8ef7761d07e4d38b2a2a73c058f6769bc7a44', name: "action" })), this.dismissable && (h("div", { key: '3d67f14c2704a6b054be63ad35a9bd3d5355b4ca', class: "xpl-toast__close" }, h("button", { key: '345b314745b40b2c802b0221ea64d90bd5c36b38', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: '39634fb5cc157a05b05d2245d66fc23d96a1c790', icon: "x" }))))));
+            } }, h("slot", { key: '733bc27fba998cdbb97cc1124d8449b539a0fc21', name: "action" })), this.dismissable && (h("div", { key: '8f555e8a02c8aed5095ab659a792e19c242dae98', class: "xpl-toast__close" }, h("button", { key: 'ca64c6cb98c4cda5d2dab208afef54db4832e103', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'bf00f852ecffd16504a8ec95f3f6630b1aa569c9', icon: "x" }))))));
     }
     static get is() { return "xpl-toast"; }
     static get properties() {

package/dist/collection/components/xpl-toggle/xpl-toggle.js

@@ -12,13 +12,13 @@ export class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'fe018e63a2c645565150c2b5494e057b24421cf3', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '461ba525112e90914f3d61b221f938ec94861b58', class: {
+        return (h(Host, { key: 'b501bb268b9fbc2756544b17481ae78ee3144960', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '34d2bb6e6c4538a863f333e8124fbde9ec2544cb', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'd764ac2dc9341192079f3791ce3e784c0d810c41', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'f9f5ff29d428e776566d0a12e62ab7efe311feb5', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: '9fd76e6a84d08db81941db0aaa742c4e0205bffa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: 'fc58e8c3dba8a45a7c2aedda7daff3788f4dc0a0', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: 'f9b1baf90d9336711ce1354a66770c7423551af8', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: '49f803372904b5b87394a55c67f428401cd14379', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {

package/dist/collection/components/xpl-toolbar/xpl-toolbar.js

@@ -12,11 +12,11 @@ export class Toolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: '48056451ad54987de8d046a3892cc1011ed41bbb', class: {
+        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: '3c9680e4cf006dee69372d271a0720b6802767bc', class: "toolbar" }, h("p", { key: 'afcfba4a2d5c73d6bf602b94340280dcc28d6493', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'fdadc34738fcf397a38772ab817c3a5bc1e5015f', class: "actions" }, h("slot", { key: 'b6571d83f8ac800143e4f9cd62559aac83c7e424', name: "actions-left" }), h("slot", { key: '30aa34da340647dbcb79f8862c5ca9647ebedb12', name: "actions-right" })))));
+            } }, h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
     }
     static get is() { return "xpl-toolbar"; }
     static get properties() {

package/dist/collection/components/xpl-tooltip/xpl-tooltip.js

@@ -6,7 +6,7 @@ export class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '849e02776ea70de89a5bd3c133df6205ff3265b3' }, h("div", { key: '98947c9ece90e6ebcbf90c23cd2e1c0902ae59d5', class: "xpl-tooltip-container" }, h("slot", { key: 'a24df50f2081fcc4ef70c685933fab1420eb850a' }), h("div", { key: 'be1a1832cdf428f2d368258b3a784e7b27589a97', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: '43241958db2b8fec0993040f7321bca7d5a163e6', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '34359c7bec6b7ee0616eac8961e9941b60c7d321' }))))));
+        return (h(Host, { key: '9890dea245d2fbd24c67fea6e39ce3430ffc8d81' }, h("div", { key: '0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb', class: "xpl-tooltip-container" }, h("slot", { key: '3b9a8aebce020a13f3d7ef624b59c06e55398907' }), h("div", { key: '50fe33b8bef96df08899b449065558ea8f2ed820', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: 'eddf77e8e8093eff29c5c22fdc3d2b882de4a0ca', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'fad3bccade4af1d9734d288c32d7951527398853' }))))));
     }
     static get is() { return "xpl-tooltip"; }
     static get properties() {