@koobiq/components 18.39.2 → 18.39.4

package/fesm2022/koobiq-components-tags.mjs

@@ -5,7 +5,7 @@ import * as i3 from '@angular/forms';
 import { hasModifierKey, isSelectAll, ENTER as ENTER$1, TAB as TAB$1, SPACE as SPACE$1, COMMA, SEMICOLON } from '@koobiq/cdk/keycodes';
 import * as i3$1 from '@koobiq/components/autocomplete';
 import * as i1 from '@koobiq/components/core';
-import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, isBoolean } from '@koobiq/components/core';
+import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION } from '@koobiq/components/core';
 import * as i1$1 from '@koobiq/components/form-field';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { FocusMonitor } from '@angular/cdk/a11y';
@@ -107,6 +107,10 @@ class KbqTagEditInput {
         this.tag = inject(KbqTag);
     }
     /** @docs-private */
+    handleClick(event) {
+        event.stopPropagation();
+    }
+    /** @docs-private */
     handleKeydown(event) {
         switch (event.keyCode) {
             case ESCAPE: {
@@ -130,7 +134,7 @@ class KbqTagEditInput {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagEditInput, decorators: [{
             type: Directive,
@@ -140,7 +144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     exportAs: 'kbqTagEditInput',
                     host: {
                         class: 'kbq-tag-edit-input',
-                        '(keydown)': 'handleKeydown($event)'
+                        '(keydown)': 'handleKeydown($event)',
+                        '(click)': 'handleClick($event)'
                     },
                     hostDirectives: [KbqFieldSizingContent]
                 }]
@@ -425,6 +430,7 @@ class KbqTag extends KbqColorDirective {
             const input = this.editInputElementRef?.nativeElement;
             if (!input)
                 throw getTagEditInputMissingError();
+            this.focusMonitor.focusVia(this.elementRef.nativeElement, 'keyboard');
             input.select();
         });
     }
@@ -822,6 +828,7 @@ class KbqTagList {
         this.parentForm = parentForm;
         this.parentFormGroup = parentFormGroup;
         this.ngControl = ngControl;
+        this.useLegacyValidation = inject(KBQ_VALIDATION, { optional: true })?.useValidation ?? false;
         this.dropList = inject(CdkDropList, { host: true });
         this.destroyRef = inject(DestroyRef);
         this.focusMonitor = inject(FocusMonitor);
@@ -865,6 +872,11 @@ class KbqTagList {
         this.selectable = true;
         /** Whether the tags in the list are editable. */
         this.editable = false;
+        /**
+         * Whether to emit change events when tags are added/removed.
+         * Set to `false` to prevent the form control from being marked as dirty during programmatic updates.
+         */
+        this.emitOnTagChanges = true;
         this._removable = true;
         this._tabIndex = 0;
         /**
@@ -958,7 +970,7 @@ class KbqTagList {
             Promise.resolve().then(() => {
                 this.stateChanges.next();
                 // do not call on initial
-                if (currentTags) {
+                if (currentTags && this.emitOnTagChanges) {
                     this.propagateTagsChanges();
                 }
             });
@@ -1277,7 +1289,7 @@ class KbqTagList {
     }
     /** Revalidate control. */
     revalidate() {
-        if (this.ngControl?.control) {
+        if (this.useLegacyValidation && this.ngControl?.control) {
             const control = this.ngControl.control;
             control.updateValueAndValidity({ emitEvent: false });
             control.statusChanges.emit(control.status);
@@ -1304,7 +1316,7 @@ class KbqTagList {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: i2$1.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], editable: ["editable", "editable", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable", "class.kbq-tag-list_editable": "editable", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], editable: ["editable", "editable", booleanAttribute], emitOnTagChanges: ["emitOnTagChanges", "emitOnTagChanges", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable", "class.kbq-tag-list_editable": "editable", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
         <div class="kbq-tags-list__list-container">
             <ng-content />
         </div>
@@ -1377,6 +1389,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], editable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], emitOnTagChanges: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], removable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1402,7 +1417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     }]
             }] } });
 
-const KbqTagInputDefaultSeparators = {
+const KBQ_TAG_INPUT_DEFAULT_SEPARATORS = {
     [ENTER$1]: { symbol: /\r?\n/, key: 'Enter' },
     [TAB$1]: { symbol: /\t/, key: 'Tab' },
     [SPACE$1]: { symbol: / /, key: ' ' },
@@ -1424,6 +1439,7 @@ class KbqTagInput {
     set separatorKeyCodes(value) {
         this._separatorKeyCodes = value || [];
     }
+    /** @docs-private */
     get separators() {
         return this._separatorKeyCodes.reduce((acc, key) => {
             const separator = this.getSeparatorByKeyCode(key);
@@ -1446,15 +1462,6 @@ class KbqTagInput {
     set addOnBlur(value) {
         this._addOnBlur = coerceBooleanProperty(value);
     }
-    /**
-     * Whether the tagEnd event will be emitted when the text pasted.
-     */
-    get addOnPaste() {
-        return this._addOnPaste;
-    }
-    set addOnPaste(value) {
-        this._addOnPaste = coerceBooleanProperty(value);
-    }
     /** Whether the input is disabled. */
     get disabled() {
         return this._disabled || (this._tagList && this._tagList.disabled);
@@ -1475,6 +1482,7 @@ class KbqTagInput {
         /** Whether the control is focused. */
         this.focused = false;
         this._separatorKeyCodes = this.defaultOptions.separatorKeyCodes;
+        this._separators = this.defaultOptions.separators || KBQ_TAG_INPUT_DEFAULT_SEPARATORS;
         /** Emitted when a tag is to be added. */
         this.tagEnd = new EventEmitter();
         /** A value indicating whether allow/prevent tags duplication  */
@@ -1484,6 +1492,11 @@ class KbqTagInput {
         /** Unique id for the input. */
         this.id = `kbq-tag-list-input-${nextUniqueId++}`;
         this._addOnBlur = true;
+        /**
+         * Whether the tagEnd event will be emitted when the text pasted.
+         * @default true
+         */
+        this.addOnPaste = this.defaultOptions.addOnPaste ?? true;
         this._disabled = false;
         /**
          * @docs-private
@@ -1492,8 +1505,6 @@ class KbqTagInput {
          */
         this.countOfSymbolsForUpdateWidth = 3;
         this.inputElement = this.elementRef.nativeElement;
-        this._separators = this.defaultOptions.separators || KbqTagInputDefaultSeparators;
-        this._addOnPaste = isBoolean(this.defaultOptions.addOnPaste) ? this.defaultOptions.addOnPaste : true;
     }
     ngOnChanges() {
         this._tagList.stateChanges.next();
@@ -1559,14 +1570,15 @@ class KbqTagInput {
         const dividedString = separatorsInString.length > 0 ?
             [...data.split(new RegExp(`${separatorsInString.join('|')}`))] :
             [data];
-        const items = dividedString.map((item) => this.trimValue(item));
+        let items = dividedString.map((item) => this.trimValue(item));
         if (items.length === 0) {
             items.push(data);
         }
-        const tagValues = this._tagList.tags.map(({ value }) => value);
-        items
-            .filter((item) => !tagValues.includes(item))
-            .forEach((item) => this.tagEnd.emit({ input: this.inputElement, value: item }));
+        if (this.distinct) {
+            const tagValues = this._tagList.tags.map(({ value }) => value);
+            items = items.filter((item) => !tagValues.includes(item));
+        }
+        items.forEach((item) => this.tagEnd.emit({ input: this.inputElement, value: item }));
         $event.preventDefault();
         $event.stopPropagation();
     }
@@ -1588,8 +1600,8 @@ class KbqTagInput {
     }
     getSeparatorsForString(value) {
         return this.separators
-            .filter((separator) => value.search(separator.key) > -1)
-            .map((separator) => separator.key);
+            .filter((separator) => value.search(separator.symbol) > -1)
+            .map((separator) => separator.symbol.source);
     }
     trimValue(value) {
         return this.trimDirective ? this.trimDirective.trim(value) : value;
@@ -1609,7 +1621,7 @@ class KbqTagInput {
         return this.separators.some((separator) => separator.key === event.key && !event.shiftKey);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: KBQ_TAGS_DEFAULT_OPTIONS }, { token: i1$1.KbqTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3$1.KbqAutocompleteTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste"], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.14", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste", booleanAttribute], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagInput, decorators: [{
             type: Directive,
@@ -1664,7 +1676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['kbqTagInputAddOnBlur']
             }], addOnPaste: [{
                 type: Input,
-                args: ['kbqTagInputAddOnPaste']
+                args: [{ alias: 'kbqTagInputAddOnPaste', transform: booleanAttribute }]
             }], disabled: [{
                 type: Input
             }] } });