atomicuilibrary 0.0.1

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

@@ -0,0 +1,887 @@
+import { h, Host } from "@stencil/core";
+export class TagGroup {
+    el;
+    /**
+     * Maximum number of tags to display before hiding and showing (+N)
+     */
+    max = 0;
+    /**
+     * Spacing between tags
+     */
+    spacing = '8px';
+    /**
+     * Whether to overlap tags (avatar style)
+     */
+    overlap = false;
+    /**
+     * Selected values (for checkable tags)
+     */
+    value = [];
+    /**
+     * Selection mode: 'none', 'single', or 'multiple'
+     */
+    selectionMode = 'none';
+    /**
+     * Bulk size for all tags in group
+     */
+    size;
+    /**
+     * Bulk variant for all tags in group
+     */
+    variant;
+    /**
+     * Bulk color for all tags in group
+     */
+    color;
+    /**
+     * Whether all tags in group should be rounded
+     */
+    rounded = false;
+    /**
+     * Whether all tags in group should be removable
+     */
+    removable = false;
+    /**
+     * Whether users can add new tags (Premium)
+     */
+    creatable = false;
+    /**
+     * Whether tags are filterable via search (Premium)
+     */
+    searchable = false;
+    /**
+     * Whether overflow tags can be toggled to show (Premium)
+     */
+    collapsible = false;
+    /**
+     * Case sensitivity for search and duplicates
+     */
+    caseSensitive = false;
+    /**
+     * Delimiters to trigger tag creation
+     */
+    delimiters = [',', ' '];
+    /**
+     * Whether all tags in group should show as skeletons
+     */
+    skeleton = false;
+    /**
+     * Bulk shape for all tags in group
+     */
+    shape;
+    /**
+     * Bulk animation for all tags in group
+     */
+    animation;
+    /**
+     * Whether the entire group is read-only (disables all selection/removal)
+     */
+    readOnly = false;
+    /**
+     * Placeholder text when group is empty (creatable mode)
+     */
+    placeholder = 'Add tag...';
+    /**
+     * Event emitted when a new tag is added
+     */
+    tagAdd;
+    searchQuery = '';
+    isExpanded = false;
+    isLastTagHighlighted = false;
+    tagGroupChange;
+    handleKeyDown(ev) {
+        if (this.readOnly)
+            return;
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const activeElement = this.el.shadowRoot?.activeElement || document.activeElement;
+        // Find if any tag is focused or contains focus
+        const focusedTagIndex = tags.findIndex(t => t === activeElement || t.contains(activeElement));
+        const isInputFocused = activeElement === this.el.shadowRoot?.querySelector('.tag-group-inline-input');
+        if (ev.key === 'ArrowLeft') {
+            if (isInputFocused && ev.target.selectionStart === 0) {
+                // Focus last tag
+                if (tags.length > 0) {
+                    tags[tags.length - 1].focus();
+                    ev.preventDefault();
+                }
+            }
+            else if (focusedTagIndex > 0) {
+                tags[focusedTagIndex - 1].focus();
+                ev.preventDefault();
+            }
+        }
+        else if (ev.key === 'ArrowRight') {
+            if (focusedTagIndex !== -1) {
+                if (focusedTagIndex === tags.length - 1) {
+                    this.el.shadowRoot?.querySelector('.tag-group-inline-input')?.focus();
+                }
+                else {
+                    tags[focusedTagIndex + 1].focus();
+                }
+                ev.preventDefault();
+            }
+        }
+        else if ((ev.key === 'Backspace' || ev.key === 'Delete') && focusedTagIndex !== -1) {
+            const tagToRemove = tags[focusedTagIndex];
+            const nextToFocus = focusedTagIndex < tags.length - 1 ? tags[focusedTagIndex + 1] : this.el.shadowRoot?.querySelector('.tag-group-inline-input');
+            if (this.removable) {
+                const tagValue = tagToRemove.value || tagToRemove.label;
+                this.removeTagByValue(tagValue);
+                if (nextToFocus)
+                    nextToFocus.focus();
+                ev.preventDefault();
+            }
+        }
+    }
+    handleGroupChange() {
+        this.updateChildren();
+    }
+    handleTagRemove(ev) {
+        if (this.readOnly)
+            return;
+        // Find the tag that was removed
+        const tag = ev.target;
+        if (!tag)
+            return;
+        const tagValue = tag.value || tag.label;
+        // If it was selected, remove it from the value array
+        if (Array.isArray(this.value)) {
+            const index = this.value.indexOf(tagValue);
+            if (index > -1) {
+                const newValue = [...this.value];
+                newValue.splice(index, 1);
+                this.value = newValue;
+                this.tagGroupChange.emit(this.value);
+            }
+        }
+        else if (this.value === tagValue) {
+            this.value = '';
+            this.tagGroupChange.emit(this.value);
+        }
+        // Explicitly remove from DOM if it's a child of this component
+        if (tag.parentNode === this.el) {
+            this.el.removeChild(tag);
+        }
+        // Delay updating children slightly to allow for removal animation
+        setTimeout(() => this.updateChildren(), 50);
+    }
+    handleTagCheck(ev) {
+        if (this.readOnly || this.selectionMode === 'none')
+            return;
+        const tag = ev.target;
+        const tagValue = tag.value || tag.label;
+        if (this.selectionMode === 'single') {
+            this.value = ev.detail ? tagValue : '';
+            this.syncSelection();
+        }
+        else {
+            const current = Array.isArray(this.value) ? [...this.value] : (this.value ? [this.value] : []);
+            if (ev.detail) {
+                if (!current.includes(tagValue))
+                    current.push(tagValue);
+            }
+            else {
+                const index = current.indexOf(tagValue);
+                if (index > -1)
+                    current.splice(index, 1);
+            }
+            this.value = current;
+            this.syncSelection();
+        }
+        this.tagGroupChange.emit(this.value);
+    }
+    componentDidLoad() {
+        this.updateChildren();
+        // Listen for slot changes
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot) {
+            slot.addEventListener('slotchange', () => this.updateChildren());
+        }
+    }
+    updateChildren() {
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const query = this.searchQuery.toLowerCase();
+        tags.forEach((tag, index) => {
+            // Apply bulk styles
+            if (this.size)
+                tag.size = this.size;
+            if (this.variant)
+                tag.variant = this.variant;
+            if (this.color)
+                tag.color = this.color;
+            // Default to circle if overlapping and no shape set
+            if (this.overlap && !this.shape && !tag.shape) {
+                tag.shape = 'circle';
+            }
+            else if (this.shape) {
+                tag.shape = this.shape;
+            }
+            else if (this.rounded) {
+                tag.shape = 'pill';
+            }
+            if (this.skeleton)
+                tag.skeleton = this.skeleton;
+            if (this.animation)
+                tag.animation = this.animation;
+            tag.removable = this.readOnly ? false : this.removable;
+            tag.disabled = this.readOnly;
+            if (this.selectionMode !== 'none')
+                tag.checkable = true;
+            // Handle filtering
+            const label = tag.label || '';
+            const matches = label.toLowerCase().includes(query);
+            // Handle max/collapsible
+            const isOverMax = this.max > 0 && index >= this.max;
+            const isHighlighted = this.isLastTagHighlighted && index === (tags.length - 1);
+            if (isHighlighted) {
+                tag.setAttribute('highlighted', 'true');
+            }
+            else {
+                tag.removeAttribute('highlighted');
+            }
+            const shouldBeVisible = matches && (!isOverMax || this.isExpanded);
+            tag.style.display = shouldBeVisible ? '' : 'none';
+        });
+        this.syncSelection();
+    }
+    syncSelection() {
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const currentSelected = Array.isArray(this.value) ? this.value : [this.value];
+        tags.forEach((tag) => {
+            const tagValue = tag.value || tag.label;
+            tag.checked = currentSelected.includes(tagValue);
+        });
+    }
+    handleSearch = (ev) => {
+        this.searchQuery = ev.detail;
+        this.updateChildren();
+    };
+    addTags(input) {
+        if (!input)
+            return;
+        this.isLastTagHighlighted = false;
+        // Escape delimiters for regex
+        const escapedDelimiters = this.delimiters.map(d => d.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+        const regex = new RegExp(escapedDelimiters || ',', 'g');
+        const labels = input.split(regex).map(s => s.trim()).filter(s => !!s);
+        labels.forEach(label => {
+            // Check for duplicates (pulse logic)
+            const allTags = Array.from(this.el.querySelectorAll('ui-tag'));
+            const existing = allTags.find((t) => this.caseSensitive
+                ? t.label === label
+                : t.label.toLowerCase() === label.toLowerCase());
+            if (existing) {
+                existing.pulse = true;
+                setTimeout(() => existing.pulse = false, 2000);
+            }
+            else {
+                const newTag = document.createElement('ui-tag');
+                newTag.setAttribute('label', label);
+                this.el.appendChild(newTag);
+                this.tagAdd.emit(label);
+            }
+        });
+        this.updateChildren();
+    }
+    removeLastTag() {
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        if (tags.length > 0) {
+            const last = tags[tags.length - 1];
+            // Emit removal sync
+            const tagValue = last.value || last.label;
+            // Sync internal selection if needed
+            if (Array.isArray(this.value)) {
+                const idx = this.value.indexOf(tagValue);
+                if (idx > -1) {
+                    const newValue = [...this.value];
+                    newValue.splice(idx, 1);
+                    this.value = newValue;
+                    this.tagGroupChange.emit(this.value);
+                }
+            }
+            this.el.removeChild(last);
+            this.updateChildren();
+        }
+    }
+    removeTagByValue(tagValue) {
+        if (Array.isArray(this.value)) {
+            const index = this.value.indexOf(tagValue);
+            if (index > -1) {
+                const newValue = [...this.value];
+                newValue.splice(index, 1);
+                this.value = newValue;
+                this.tagGroupChange.emit(this.value);
+            }
+        }
+        else if (this.value === tagValue) {
+            this.value = '';
+            this.tagGroupChange.emit(this.value);
+        }
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const tag = tags.find(t => (t.value || t.label) === tagValue);
+        if (tag) {
+            this.el.removeChild(tag);
+        }
+        this.updateChildren();
+    }
+    handleAddTag = (ev) => {
+        const input = ev.detail.target;
+        const val = input.value;
+        const key = ev.detail.key;
+        if (key === 'Enter' || (this.delimiters.includes(key) && val.trim())) {
+            if (this.delimiters.includes(key)) {
+                ev.detail.preventDefault();
+            }
+            this.addTags(val);
+            input.value = '';
+            return;
+        }
+        if (key === 'Backspace' && !val) {
+            if (this.isLastTagHighlighted) {
+                this.removeLastTag();
+                this.isLastTagHighlighted = false;
+            }
+            else {
+                this.isLastTagHighlighted = true;
+                this.updateChildren();
+            }
+        }
+        else if (val || key !== 'Backspace') {
+            this.isLastTagHighlighted = false;
+            this.updateChildren();
+        }
+        if (key === 'Escape') {
+            this.isLastTagHighlighted = false;
+            this.updateChildren();
+        }
+    };
+    // private handlePaste = (ev: ClipboardEvent) => {
+    //     ev.preventDefault();
+    //     const text = ev.clipboardData.getData('text');
+    //     this.addTags(text);
+    //     (ev.target as HTMLInputElement).value = '';
+    // }
+    toggleExpand = () => {
+        this.isExpanded = !this.isExpanded;
+    };
+    render() {
+        const allTags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const visibleTags = allTags.filter((t) => t.style.display !== 'none');
+        const canShowExpand = this.max > 0 && allTags.length > this.max;
+        const isEmpty = allTags.length === 0;
+        const noResults = allTags.length > 0 && visibleTags.length === 0;
+        const showInlineInput = (this.searchable || this.creatable) && !this.readOnly;
+        return (h(Host, { key: '100edcd7c662a814b0f9fb61726e2582e794a228' }, h("div", { key: '4c67c1ca95250f7b86aa920806a9c610fd177e5b', class: {
+                'tag-group-container': true,
+                'is-readonly': this.readOnly,
+                'is-empty': isEmpty
+            } }, h("ui-stack", { key: '80cc96c4c1106e7627160f5396443f9f76ff05d5', spacing: this.spacing, overlap: this.overlap, max: this.isExpanded ? 0 : this.max, wrap: "wrap" }, h("slot", { key: '4d6a8877bc1aad8548782ca3eb79d55bd620a3b7' }), showInlineInput && (h("ui-input", { key: '1097f155dbea020ea979f38ad1557113d5f535f8', type: "text", class: "tag-group-inline-input", placeholder: isEmpty ? this.placeholder : '', value: this.searchQuery, onInputChange: this.handleSearch, onInputKeydown: this.handleAddTag, size: "sm", variant: "borderless", hideBorder: true, fullWidth: true }))), noResults && (h("div", { key: '887770e92e8f74e0c2299b082123aa99f0a8e973', class: "tag-group-empty no-results" }, h("span", { key: '0b99fe5f1f8f1a8e0546d6ef986e4868513f0c98' }, "No tags match \"", this.searchQuery, "\""))) || (isEmpty && this.readOnly && (h("div", { key: 'af1db7772425a2792d52641b9b6a0850a236d4dd', class: "tag-group-empty" }, h("ui-icon", { key: 'c436b83d899bddf9c606cb767b97cbd5485d4086', name: "tag", library: "lucide", size: "1.4em" }), h("span", { key: '22a6243817d886e23b529ead4366bcf81b2fe057' }, "No items assigned")))), this.collapsible && canShowExpand && (h("ui-button", { key: 'bf5f9ce800276a0c6294d48c9817b3b342b09a0c', variant: "ghost", size: "sm", class: "tag-group-overflow-toggle", onClick: this.toggleExpand, label: this.isExpanded ? 'Show less' : `View all ${allTags.length} items` })))));
+    }
+    static get is() { return "ui-tag-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tag-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tag-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of tags to display before hiding and showing (+N)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "0"
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing between tags"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spacing",
+                "defaultValue": "'8px'"
+            },
+            "overlap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to overlap tags (avatar style)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlap",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected values (for checkable tags)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "[]"
+            },
+            "selectionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'single' | 'multiple'",
+                    "resolved": "\"multiple\" | \"none\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection mode: 'none', 'single', or 'multiple'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-mode",
+                "defaultValue": "'none'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bulk size for all tags in group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'filled' | 'outlined' | 'light' | 'dot'",
+                    "resolved": "\"dot\" | \"filled\" | \"light\" | \"outlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bulk variant for all tags in group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bulk color for all tags in group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether all tags in group should be rounded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rounded",
+                "defaultValue": "false"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether all tags in group should be removable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "removable",
+                "defaultValue": "false"
+            },
+            "creatable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether users can add new tags (Premium)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "creatable",
+                "defaultValue": "false"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether tags are filterable via search (Premium)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether overflow tags can be toggled to show (Premium)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
+            },
+            "caseSensitive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Case sensitivity for search and duplicates"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "case-sensitive",
+                "defaultValue": "false"
+            },
+            "delimiters": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delimiters to trigger tag creation"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[',', ' ']"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether all tags in group should show as skeletons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape | 'ribbon' | 'ticket' | 'coupon'",
+                    "resolved": "\"circle\" | \"coupon\" | \"default\" | \"pill\" | \"ribbon\" | \"rounded\" | \"square\" | \"ticket\"",
+                    "references": {
+                        "Shape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Shape",
+                            "referenceLocation": "Shape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bulk shape for all tags in group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fade' | 'scale' | 'slide' | 'rotate' | 'none'",
+                    "resolved": "\"fade\" | \"none\" | \"rotate\" | \"scale\" | \"slide\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bulk animation for all tags in group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the entire group is read-only (disables all selection/removal)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when group is empty (creatable mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Add tag...'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchQuery": {},
+            "isExpanded": {},
+            "isLastTagHighlighted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tagAdd",
+                "name": "tagAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a new tag is added"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tagGroupChange",
+                "name": "tagGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isExpanded",
+                "methodName": "handleGroupChange"
+            }, {
+                "propName": "skeleton",
+                "methodName": "handleGroupChange"
+            }, {
+                "propName": "shape",
+                "methodName": "handleGroupChange"
+            }, {
+                "propName": "color",
+                "methodName": "handleGroupChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "tagRemove",
+                "method": "handleTagRemove",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "tagCheck",
+                "method": "handleTagCheck",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}