@ascentgl/ads-ui 21.108.0 → 21.108.1

package/fesm2022/ascentgl-ads-ui.mjs

@@ -556,6 +556,59 @@ function contrastTextColor(backgroundColor) {
     return luminance > 0.7 ? '#000' : '#fff';
 }
 
+class CreateTagHelper {
+    static trimString(tagName) {
+        return tagName.trim().toLowerCase();
+    }
+    /** Builds a comparison key for tag identity: case-insensitive name and color */
+    static tagKey(tag) {
+        return `${CreateTagHelper.trimString(tag.tag)}::${CreateTagHelper.trimString(tag.color)}`;
+    }
+    /** Returns the next available numeric ID based on existing tags */
+    static getNextId(tags) {
+        let max = 0;
+        for (const tag of tags) {
+            const num = Number(tag.id);
+            if (Number.isFinite(num) && num > max) {
+                max = num;
+            }
+        }
+        return max + 1;
+    }
+    /** Applies formatting rules to the tag name: alphanumeric filtering, lowercase, space normalization */
+    static formatTagName(tagName, alphanumeric, lowercase) {
+        let formattedName = tagName;
+        if (alphanumeric) {
+            formattedName = formattedName.replace(/[^a-z0-9\s]/gi, '');
+        }
+        if (lowercase) {
+            formattedName = formattedName.toLowerCase();
+        }
+        if (formattedName.startsWith(' ')) {
+            formattedName = formattedName.replace(/^\s+/gm, '');
+        }
+        if (formattedName.includes('  ')) {
+            formattedName = formattedName.replace(/\s\s+/gm, ' ');
+        }
+        return formattedName;
+    }
+    /** Assigns new IDs to tags with empty or duplicate IDs. Preserves existing unique IDs.
+     *  New IDs are generated as the largest existing numeric ID + 1. */
+    static sanitizeTags(tags) {
+        const seen = new Set();
+        let nextId = CreateTagHelper.getNextId(tags);
+        return tags.map((tag) => {
+            if (!tag.id || seen.has(tag.id)) {
+                const id = String(nextId++);
+                seen.add(id);
+                return { ...tag, id };
+            }
+            seen.add(tag.id);
+            return tag;
+        });
+    }
+}
+
 class AdsTagContainerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTagContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AdsTagContainerComponent, isStandalone: false, selector: "ads-tag-container", ngImport: i0, template: "<div class=\"tag-container\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tag-container{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;flex-wrap:wrap;height:24px}\n"] }); }
@@ -714,7 +767,7 @@ class AdsCreateTagComponent {
             const seen = new Set();
             const result = [];
             for (let i = all.length - 1; i >= 0; i--) {
-                const key = this.tagKey(all[i]);
+                const key = CreateTagHelper.tagKey(all[i]);
                 if (!seen.has(key)) {
                     seen.add(key);
                     result.push(all[i]);
@@ -728,8 +781,8 @@ class AdsCreateTagComponent {
             const raw = this.rawSuggestions();
             const currentTags = this.tags();
             const max = this.maxSuggestions();
-            const currentTagKeys = new Set(currentTags.map((t) => this.tagKey(t)));
-            return raw.filter((s) => !currentTagKeys.has(this.tagKey(s))).slice(0, max);
+            const currentTagKeys = new Set(currentTags.map((t) => CreateTagHelper.tagKey(t)));
+            return raw.filter((s) => !currentTagKeys.has(CreateTagHelper.tagKey(s))).slice(0, max);
         }, ...(ngDevMode ? [{ debugName: "displayedSuggestions" }] : []));
         /** @ignore — Whether the tag limit has been reached, used to disable suggestion selection */
         this.isLimitReached = computed(() => this.tags().length >= this.limit(), ...(ngDevMode ? [{ debugName: "isLimitReached" }] : []));
@@ -794,7 +847,7 @@ class AdsCreateTagComponent {
     onTagNameInput(event) {
         const inputEl = event.target;
         const raw = inputEl.value;
-        const formatted = this.formatTagName(raw);
+        const formatted = CreateTagHelper.formatTagName(raw, this.alphanumeric(), this.lowercase());
         this.draftTag.update((prev) => ({ ...prev, tag: formatted }));
         /** Sync the DOM input if formatting changed the value (e.g., stripped special chars) */
         if (formatted !== raw) {
@@ -859,20 +912,11 @@ class AdsCreateTagComponent {
             current.tag.length > this.maxlength() ||
             !current.color ||
             this.tags().filter((tag) => {
-                return (this.trimString(tag.tag) === this.trimString(current.tag) &&
+                return (CreateTagHelper.trimString(tag.tag) === CreateTagHelper.trimString(current.tag) &&
                     tag.color === current.color &&
                     tag.id !== current.id);
             }).length > 0);
     }
-    /** @ignore */
-    onTagUpdated(tag) {
-        /** Immutably replace the matching tag so the model signal emits the update */
-        this.tags.update((prev) => this.reindexTags(prev.map((t) => (t.id === tag.id ? { ...t, ...tag } : t))));
-    }
-    /** @ignore */
-    onTagCreated(tag) {
-        this.appendTag(tag);
-    }
     /** @ignore — Adds a suggestion to the tags list with a generated id, emits tagCreate,
      *  and optionally closes the overlay based on closeOnSelect. Does nothing if the tag limit is reached. */
     onSuggestionSelect(suggestion) {
@@ -890,7 +934,7 @@ class AdsCreateTagComponent {
     /** @ignore */
     onTagRemove(id) {
         /** Immutably remove the tag and let the model signal emit the update */
-        this.tags.update((prev) => this.reindexTags(prev.filter((t) => t.id !== id)));
+        this.tags.update((prev) => prev.filter((t) => t.id !== id));
         this.tagRemove.emit(id);
     }
     /** @ignore — Returns white or dark text color based on the perceived luminance of a background color */
@@ -907,43 +951,19 @@ class AdsCreateTagComponent {
             this.onColorChange(palette[randomIndex]);
         }
     }
-    /** @ignore — Applies formatting rules to the tag name: alphanumeric filtering, lowercase, space normalization */
-    formatTagName(tagName) {
-        let formattedName = tagName;
-        /** if "alphanumeric" is true - allow only alphanumerics and spaces */
-        if (this.alphanumeric()) {
-            formattedName = formattedName.replace(/[^a-z0-9\s]/gi, '');
-        }
-        /** if "lowercase" is true - turn all letters to lowercase */
-        if (this.lowercase()) {
-            formattedName = formattedName.toLowerCase();
-        }
-        /** do not allow space at the beginning of the string*/
-        if (formattedName.startsWith(' ')) {
-            formattedName = formattedName.replace(/^\s+/gm, '');
-        }
-        /** do not allow multi-space sequences*/
-        if (formattedName.includes('  ')) {
-            formattedName = formattedName.replace(/\s\s+/gm, ' ');
-        }
-        return formattedName;
-    }
-    /** @ignore */
-    trimString(tagName) {
-        return tagName.trim().toLowerCase();
-    }
-    /** @ignore — Builds a comparison key for tag identity: case-insensitive name and color */
-    tagKey(tag) {
-        return `${this.trimString(tag.tag)}::${this.trimString(tag.color)}`;
-    }
     /** @ignore — Appends a tag to the model signal and emits the tagCreate output */
     appendTag(tag) {
-        this.tags.update((prev) => this.reindexTags([...prev, tag]));
+        this.tags.update((prev) => CreateTagHelper.sanitizeTags([...prev, tag]));
         this.tagCreate.emit(this.tags()[this.tags().length - 1]);
     }
-    /** @ignore — Re-assigns sequential numeric ids (1, 2, 3, …) to all tags */
-    reindexTags(tags) {
-        return tags.map((t, i) => ({ ...t, id: String(i + 1) }));
+    /** @ignore */
+    onTagUpdated(tag) {
+        /** Immutably replace the matching tag so the model signal emits the update */
+        this.tags.update((prev) => prev.map((t) => (t.id === tag.id ? { ...t, ...tag } : t)));
+    }
+    /** @ignore */
+    onTagCreated(tag) {
+        this.appendTag(tag);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCreateTagComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCreateTagComponent, isStandalone: false, selector: "ads-create-tag", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, maxSuggestions: { classPropertyName: "maxSuggestions", publicName: "maxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, lowercase: { classPropertyName: "lowercase", publicName: "lowercase", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tags: "tagsChange", tagCreate: "tagCreate", tagRemove: "tagRemove" }, host: { listeners: { "window:scroll": "onPageScroll()", "document:scroll": "onPageScroll()" } }, viewQueries: [{ propertyName: "addInput", first: true, predicate: ["addInput"], descendants: true, isSignal: true }, { propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ads-tag-container>\r\n  @for (tag of tags(); track tag.id) {\r\n    @if (selectedTag()?.id === tag.id) {\r\n      <input\r\n        #editInput\r\n        class=\"overlay-input\"\r\n        cdkOverlayOrigin\r\n        #updateTrigger=\"cdkOverlayOrigin\"\r\n        [value]=\"draftTag().tag\"\r\n        (input)=\"onTagNameInput($event)\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n      />\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        [cdkConnectedOverlayOrigin]=\"updateTrigger\"\r\n        [cdkConnectedOverlayPositions]=\"positions\"\r\n        [cdkConnectedOverlayPush]=\"true\"\r\n        [cdkConnectedOverlayOpen]=\"true\"\r\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayScrollStrategy]=\"closeScrollStrategy\"\r\n        (backdropClick)=\"hide()\"\r\n        (detach)=\"hide()\"\r\n      >\r\n        <div class=\"tag-configuration\">\r\n          <div class=\"color-picker\">\r\n            @for (color of palette(); track color) {\r\n              <div\r\n                class=\"color\"\r\n                [class.selected]=\"draftTag().color === color\"\r\n                [style.background-color]=\"color\"\r\n                (click)=\"onColorChange(color)\"\r\n              ></div>\r\n            }\r\n          </div>\r\n          <div class=\"actions\">\r\n            <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\r\n            <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"updateTag()\">\r\n              {{ 'Save' }}\r\n            </ads-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    } @else {\r\n      <ads-tag\r\n        [tag]=\"tag.tag\"\r\n        [color]=\"tag.color\"\r\n        [style.--color-dark]=\"tagIconDark\"\r\n        [style.--color-white]=\"tagIconLight\"\r\n        [id]=\"tag.id\"\r\n        (selected)=\"onTagSelect($event)\"\r\n        (remove)=\"onTagRemove($event)\"\r\n      />\r\n    }\r\n  }\r\n\r\n  <div class=\"tag-container \">\r\n    @if (showInput()) {\r\n      <input\r\n        #addInput\r\n        class=\"overlay-input\"\r\n        cdkOverlayOrigin\r\n        #addTrigger=\"cdkOverlayOrigin\"\r\n        [value]=\"draftTag().tag\"\r\n        (input)=\"onTagNameInput($event)\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n      />\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        [cdkConnectedOverlayOrigin]=\"addTrigger\"\r\n        [cdkConnectedOverlayPositions]=\"positions\"\r\n        [cdkConnectedOverlayPush]=\"true\"\r\n        [cdkConnectedOverlayOpen]=\"true\"\r\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayScrollStrategy]=\"closeScrollStrategy\"\r\n        (backdropClick)=\"hide()\"\r\n        (detach)=\"hide()\"\r\n      >\r\n        <div class=\"tag-configuration\">\r\n          @if (displayedSuggestions().length > 0) {\r\n            <div class=\"suggestions-list\">\r\n              @for (suggestion of displayedSuggestions(); track suggestion.tag + suggestion.color) {\r\n                <div\r\n                  class=\"suggestion-item\"\r\n                  [style.background-color]=\"suggestion.color\"\r\n                  (click)=\"onSuggestionSelect(suggestion)\"\r\n                >\r\n                  <span\r\n                    class=\"suggestion-text\"\r\n                    [style.color]=\"contrastTextColor(suggestion.color)\"\r\n                    #textEl\r\n                    (mouseenter)=\"textEl.title = textEl.scrollWidth > textEl.clientWidth ? suggestion.tag : ''\"\r\n                  >{{ suggestion.tag }}</span>\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          <div class=\"color-picker\">\r\n            @for (color of palette(); track color) {\r\n              <div\r\n                class=\"color\"\r\n                [class.selected]=\"draftTag().color === color\"\r\n                [style.background-color]=\"color\"\r\n                (click)=\"onColorChange(color)\"\r\n              ></div>\r\n            }\r\n          </div>\r\n          <div class=\"actions\">\r\n            <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\r\n            <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"addTag()\">{{ 'Add' }} </ads-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n    @if (!isLimitReached()) {\r\n      <ads-button (click)=\"displayInput()\" size=\"xs\">\r\n        {{ 'Add Tag' }}\r\n      </ads-button>\r\n    }\r\n  </div>\r\n</ads-tag-container>\r\n", styles: [".tag-overlay-trigger{height:0;width:150px;display:flex;align-self:flex-start}input{padding:0 8px;box-sizing:border-box;background-color:var(--color-white);border:2px solid var(--color-medium);color:var(--color-dark);height:24px;border-radius:5px;width:150px}input:focus{outline:none}.tag-configuration{box-shadow:0 0 0 1px #98a1b31a,0 15px 35px -5px #11182626,0 5px 15px #00000014;border-radius:5px;background-color:var(--color-white);overflow:hidden}@media(prefers-color-scheme:dark){.tag-configuration{background-color:var(--color-muted)}.actions ::ng-deep ads-button button{background-color:var(--color-muted)!important}}.suggestions-list{max-height:96px;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--color-light)}.suggestion-item{height:32px;display:flex;align-items:center;padding:0 8px;cursor:pointer;overflow:hidden}.suggestion-item:hover:not(.disabled){opacity:.85}.suggestion-item.disabled{cursor:default;opacity:.4}.suggestion-text{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-picker{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;grid-gap:12px}.color-picker .color{position:relative;width:20px;height:20px;border-radius:50%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.color-picker .color:after{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-primary);opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.color-picker .color.selected{transform:scale(1.05)}.color-picker .color.selected:after{opacity:1;transform:scale(1)}.actions{border-top:1px solid var(--color-light);padding:8px 16px;display:flex;justify-content:center;gap:12px}.actions ::ng-deep ads-button button{width:52px;min-width:unset}::ng-deep .cdk-overlay-dark-backdrop{opacity:0!important}.tag-container{display:inline-flex;align-items:center;gap:16px;min-height:24px;position:relative}.tag-container ads-button{display:flex}.overlay-input{width:150px}\n"], dependencies: [{ kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: AdsTagContainerComponent, selector: "ads-tag-container" }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }] }); }