@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,13 +1,246 @@
-import { Host, h } from "@stencil/core";
-export class XplTag {
-    render() {
-        return (h(Host, { key: '4a5d37bbd7458d289bf7ea272bd3f944e5f1f1a8', class: "xpl-tag-container" }, h("button", { key: '65701bf44741a791ab8d60db2de0f3308c83df33', class: "xpl-tag", onClick: () => {
-                this.close.emit();
-            } }, h("slot", { key: 'bd3a1e0af2dbfbc70e18082a1cd0c02710f6ef26' })), h("button", { key: '13224cc6cc44e1c4ed9515019906ba3217edffd7', class: "xpl-tag__close", onClick: () => {
+import { Host, h, } from "@stencil/core";
+export class Tag {
+    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 XplTag {
                 "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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplToast {
+export class Toast {
     constructor() {
         this.variant = 'neutral';
         this.showIcon = true;
@@ -35,9 +35,9 @@ export class XplToast {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6a4c1dfe86f62c39db5573a0bb1eef2c14616085', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '282a4c5fc37e538d3359a0c38e7cd30e2a29e311', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: 'dfb6bb1923f5c9e1b1dae80630cc7977529e834f', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: '9a1755b484e316be08b89044ae3c55e7a30c3795', class: "xpl-toast__notification" }, h("p", { key: 'afa9572dcb109c58c6c4045e14b604010da95230', class: "xpl-toast__title" }, h("slot", { key: '0b80b8719e79a1e01bcf8ec125db8d9762f1a1d7', name: "title" })), this.caption !== '' && (h("p", { key: '7debe4dd50870bc6478a86e7742450f667dfee3a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '194104f419162bd4157fb5e8885983ca40467d9c', 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: 'c63cc79ec725417c4f317dd72511e72b24f8280e', name: "action" })), this.dismissable && (h("div", { key: '3328ad43d7cd4026d5b4488dc2d920031be0ca34', class: "xpl-toast__close" }, h("button", { key: 'ce3b27ae3c1570806916b3d668678513df5065ed', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'be1a177568f933417b62ce2a2705441d00b3118f', 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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplToggle {
+export class Toggle {
     constructor() {
         this.variant = 'default';
         this.id = uuid();
@@ -12,13 +12,13 @@ export class XplToggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'e5b8f2802e828221c2966fa85bafe7fb6bcf40bc', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '17aff6b0b12c4815d2848af71a84a808c5b2a356', 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: 'c5bf01336e7f02b41f050971b596f718cdc8a87d', 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: 'e9426bde8c042f3727fbcac738bd4903c063b2a4', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: '7d1bdfdf3ccc08276d86ffa3beb84a7946f576bb', 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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplToolbar {
+export class Toolbar {
     constructor() {
         this.selectedItemCount = 0;
     }
@@ -12,11 +12,11 @@ export class XplToolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: '097500ed053ff1f15d30fc62e2efa556f8f95ef2', class: {
+        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: 'c2e73f623f8afe7ca8e9e367b173067992b661fa', class: "toolbar" }, h("p", { key: '63c1b1f5edee4abc4fea15bdb6d483a682854403', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'bc387680fee35312128aac1e2d2a9e83e78b86af', class: "actions" }, h("slot", { key: 'a8e3e41f75565cbf9b8fc86665ecabdcf2f674f3', name: "actions-left" }), h("slot", { key: 'b3e82f6aabb8279f39248b551570d8937cf35aa6', 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

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
 import { TooltipArrow } from "./tooltip-arrow";
-export class XplTooltip {
+export class Tooltip {
     constructor() {
         this.position = 'top-middle';
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '2a442f9c9c54e8e6f8032b5d6384c84a1fbda0ad' }, h("div", { key: 'f30932db02af0f1273421b14c5b25840adbc3f58', class: "xpl-tooltip-container" }, h("slot", { key: '729aee67e66fb3d281b84a86aeba2d12a8a08340' }), h("div", { key: '9c0f6a237f2a1a11459a311095a2bdf9be4b176d', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: '3bb6b085ddde321cf3063feba8ff23e785723afd', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'f687c2776a7b9097aec183c5128e9e238e57d26e' }))))));
+        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() {