@firestitch/autocomplete-chips - npm Package Compare versions

Comparing version 12.4.4 to 12.4.5

app/components/autocomplete-chips/autocomplete-chips.component.d.ts

@@ -18,2 +18,3 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef, QueryList } from '@angular/core';
     private _dialog;
+    private _elRef;
     fetch: any;
@@ -86,3 +87,3 @@ readonly: boolean;
     registerOnTouched(fn: () => any): void;
-    constructor(_cdRef: ChangeDetectorRef, _dialog: MatDialog);
+    constructor(_cdRef: ChangeDetectorRef, _dialog: MatDialog, _elRef: ElementRef);
     ngOnInit(): void;
@@ -106,2 +107,3 @@ drop(event: CdkDragDrop<{
     closePanel(): void;
+    opened(): void;
     closed(): void;
@@ -108,0 +110,0 @@ blured(): void;

fesm2015/firestitch-autocomplete-chips.js

@@ -148,5 +148,6 @@ import * as i0 from '@angular/core';
 class FsAutocompleteChipsComponent {
-    constructor(_cdRef, _dialog) {
+    constructor(_cdRef, _dialog, _elRef) {
         this._cdRef = _cdRef;
         this._dialog = _dialog;
+        this._elRef = _elRef;
         this.fetch = null;
@@ -344,2 +345,12 @@ this.readonly = false;
     }
+    opened() {
+        let width = this._elRef.nativeElement.getBoundingClientRect().width;
+        setTimeout(() => {
+            var _a;
+            let panel = (_a = this.autocomplete.panel) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (panel) {
+                panel.style.minWidth = `${width}px`;
+            }
+        });
+    }
     closed() {
@@ -602,3 +613,3 @@ setTimeout(() => {
 }
-FsAutocompleteChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAutocompleteChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FsAutocompleteChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAutocompleteChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 FsAutocompleteChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: { fetch: "fetch", readonly: "readonly", size: "size", placeholder: "placeholder", chipImage: "chipImage", chipBackground: "chipBackground", chipColor: "chipColor", chipIcon: "chipIcon", chipIconColor: "chipIconColor", chipClass: "chipClass", hint: "hint", allowText: "allowText", allowObject: "allowObject", delay: "delay", validateText: "validateText", removable: "removable", allowClear: "allowClear", color: "color", background: "background", orderable: "orderable", limit: "limit", initOnClick: "initOnClick", fetchOnFocus: "fetchOnFocus", multiple: "multiple", confirm: "confirm", panelClass: "panelClass", compareWith: "compareWith", setDisabled: ["disabled", "setDisabled"], panelWidth: "panelWidth" }, outputs: { selected: "selected", removed: "removed", reordered: "reordered", clearEvent: "clear" }, host: { listeners: { "dragstart": "dragStart($event)" }, properties: { "class.fs-form-wrapper": "this.formWrapper" } }, providers: [{
@@ -608,3 +619,3 @@ provide: NG_VALUE_ACCESSOR,
             multi: true
-        }], queries: [{ propertyName: "objectTemplate", first: true, predicate: FsAutocompleteObjectDirective, descendants: true, read: TemplateRef }, { propertyName: "chipSuffixTemplate", first: true, predicate: FsAutocompleteChipSuffixDirective, descendants: true, read: TemplateRef }, { propertyName: "chipsSuffixTemplate", first: true, predicate: FsAutocompleteChipsSuffixDirective, descendants: true, read: TemplateRef }, { propertyName: "textValidIndicatorTemplate", first: true, predicate: FsAutocompleteChipsTextValidIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "noResultsTemplate", first: true, predicate: FsAutocompleteChipsNoResultsDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "staticTemplates", predicate: FsAutocompleteChipsStaticDirective, read: TemplateRef }, { propertyName: "staticDirectives", predicate: FsAutocompleteChipsStaticDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "dummyInput", first: true, predicate: ["dummyInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "formField", first: true, predicate: MatFormField, descendants: true, read: ElementRef }, { propertyName: "autocompleteTriggers", predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<mat-form-field\n    [ngClass]=\"{ \n      inited: inited, \n      multiple: multiple, \n      'has-value': !!(model || []).length,\n      'has-keyword': !!keyword\n    }\"\n    (click)=\"focus()\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-chip-list\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [tabIndex]=\"-1\"\n      cdkDropListGroup\n      #searchList>\n    <div\n        *ngFor=\"let item of model; let index = index\"\n        cdkDropList\n        [cdkDropListData]=\"{ index: index }\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\">\n      <mat-chip\n          [disableRipple]=\"true\"\n          [selectable]=\"!disabled\"\n          [removable]=\"!disabled\"\n          [disabled]=\"disabled\"\n          [class]=\"'fs-autocomplete-chip ' + item.class\"\n          [ngClass]=\"{\n            imaged: item.image,\n            'size-small': size === 'small',\n            'size-large': size === 'large',\n            'last-chip': model.length - 1 === index\n          }\"\n          [style.backgroundColor]=\"item.background || background\"\n          [style.color]=\"item.color || color\"\n          (keydown)=\"chipKeyDown($event, index)\"\n          (click)=\"chipClick($event)\"\n          [cdkDragDisabled]=\"!orderable || disabled || !inited\"\n          [cdkDragData]=\"item\"\n          tabindex=\"-1\"\n          cdkDrag\n          cdkDragHandle>\n        <ng-container\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item, selecting: false }\">\n        </ng-container>\n        <ng-container\n          [ngTemplateOutlet]=\"itemSuffixTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item, selecting: false, disabled: disabled }\">\n        </ng-container>\n      </mat-chip>\n    </div>\n    <input\n      #input\n      autocomplete=\"off\"\n      [readonly]=\"readonly\"\n      (input)=\"inputed($event)\"\n      (keydown)=\"keyDown($event)\"\n      (focus)=\"focused($event)\"\n      (blur)=\"blured()\"\n      [name]=\"name\"\n      [matAutocomplete]=\"autocompleteSearch\"\n      [matChipInputFor]=\"searchList\">\n  </mat-chip-list>\n\n  <span *ngIf=\"chipsSuffixTemplate\" matSuffix>\n    <ng-container [ngTemplateOutlet]=\"chipsSuffixTemplate\"></ng-container>\n  </span>\n\n  <span *ngIf=\"!disabled && allowClear && inited\" matSuffix>\n    <mat-icon\n        *ngIf=\"model.length\"\n        class=\"clear\"\n        (click)=\"clearClick($event)\">\n      clear\n    </mat-icon>\n  </span>\n\n  <mat-autocomplete\n      #autocompleteSearch=\"matAutocomplete\"\n      [class]=\"panelClasses\"\n      (optionSelected)=\"optionSelected($event)\"\n      (closed)=\"closed()\"\n      [panelWidth]=\"panelWidth\"\n      [autoActiveFirstOption]=\"true\">\n    <ng-container *ngIf=\"keyword && allowText\">\n      <mat-option \n          class=\"option-text\"\n          *ngIf=\"textData.type===dataType.Text\" \n          [value]=\"textData\"\n          [ngClass]=\"{ valid: textData.valid }\">\n        <ng-container\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{ item: textData }\">\n        </ng-container>\n        <span class=\"check\">\n          <ng-container \n            *ngIf=\"textValidIndicatorTemplate; else textValidIndicator\"\n            [ngTemplateOutlet]=\"textValidIndicatorTemplate\"\n            [ngTemplateOutletContext]=\"{ valid: textData.valid }\">\n          </ng-container>\n          <ng-template #textValidIndicator>\n            {{ textData.valid ? 'Valid' : 'Invalid' }}\n          </ng-template>\n        </span>\n      </mat-option>\n    </ng-container>\n\n    <mat-option\n      [ngClass]=\"{ multiple: multiple }\"\n      class=\"option\"\n      *ngFor=\"let item of data\" [value]=\"item\">\n      <a\n          *ngIf=\"multiple\"\n          class=\"add-icon\"\n          (click)=\"optionClick($event, item, true)\">\n        <mat-icon>add</mat-icon>\n      </a>\n      <div class=\"option-chip\" (click)=\"optionClick($event, item)\">\n        <mat-radio-button *ngIf=\"!multiple\" [checked]=\"item.selected\"></mat-radio-button>\n        <mat-chip\n            (click)=\"optionClick($event, item)\"\n            [disableRipple]=\"true\"\n            [class]=\"'fs-autocomplete-chip ' + item.class\"\n            [ngClass]=\"{ imaged: item.image, 'size-small': size === 'small', 'size-large': size === 'large' }\"\n            [style.backgroundColor]=\"item.background || background\"\n            [style.color]=\"item.color || color\">\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item, selecting: true }\">\n          </ng-container>\n          <ng-container\n            [ngTemplateOutlet]=\"itemSuffixTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item, selecting: true, disabled: disabled }\">\n          </ng-container>\n        </mat-chip>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"noResults !== false\">\n      <ng-template\n        *ngIf=\"noResultsTemplate; else noResultsOption\"\n        [ngTemplateOutlet]=\"noResultsTemplate\"\n        [ngTemplateOutletContext]=\"{ keyword: keyword }\">\n      </ng-template>\n      <ng-template #noResultsOption>\n        <mat-option disabled class=\"no-results\">\n          No results <ng-container *ngIf=\"keyword\">for \"{{keyword}}\"</ng-container>\n        </mat-option>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"staticTemplates.length\">\n      <div class=\"static-templates\">\n        <mat-option\n          *ngFor=\"let staticTemplate of staticTemplates; let i = index\"\n          class=\"static-option\"\n          (click)=\"staticClick($event, i)\">\n          <ng-template *ngTemplateOutlet=\"staticTemplate;context: { test: true }\"></ng-template>\n        </mat-option>\n      </div>\n    </ng-container>\n\n    <mat-option disabled class=\"blank-placeholder\"></mat-option>\n  </mat-autocomplete>\n  <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n  <input class=\"dummy-input\" #dummyInput tabindex=\"-1\">\n</mat-form-field>\n\n<ng-template #itemTemplate let-item=\"item\" let-selecting=\"selecting\">\n  <ng-container *ngIf=\"item.type===dataType.Object\" class=\"item\">\n    <div class=\"item-image\" *ngIf=\"item.image\" [style.backgroundImage]=\"'url(' + item.image + ')'\"></div>\n    <mat-icon class=\"item-icon\" *ngIf=\"item.icon\" [style.color]=\"item.iconColor || item.color\">{{item.icon}}</mat-icon>\n    <span class=\"item-content\">\n      <ng-template\n        [ngTemplateOutlet]=\"objectTemplate\"\n        [ngTemplateOutletContext]=\"{ object: item.data, selecting: selecting }\">\n      </ng-template>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"item.type===dataType.Text\">\n    {{item.data}}\n  </ng-container>\n</ng-template>\n\n<ng-template #itemSuffixTemplate let-item=\"item\" let-selecting=\"selecting\">\n  <div class=\"item-suffix\">\n    <ng-container\n      *ngIf=\"chipSuffixTemplate\"\n      [ngTemplateOutlet]=\"chipSuffixTemplate\"\n      [ngTemplateOutletContext]=\"{ object: item.data, selecting: selecting, disabled: disabled }\">\n    </ng-container>\n    <a\n        class=\"remove\"\n        *ngIf=\"!selecting && removable && !disabled\"\n        (click)=\"chipRemoved($event, item)\"\n        (mousedown)=\"chipRemovedMousedown($event)\">\n      <mat-icon\n      [style.color]=\"item.color || color\">clear</mat-icon>\n    </a>\n  </div>\n</ng-template>\n", styles: [".mat-chip-list{outline:transparent;overflow:hidden}.blank-placeholder{display:none}.none-placeholder{cursor:pointer;color:#0000008a;border-bottom:1px solid transparent}.none-placeholder:hover{border-bottom-style:dashed}.no-results{background-color:inherit}.dummy-input{width:0;height:0;padding:0;border:0;display:table}:host ::ng-deep .cdk-drop-list{max-width:100%}:host ::ng-deep .mat-form-field{width:100%;letter-spacing:inherit;margin-left:0}:host ::ng-deep .mat-form-field input.mat-chip-input{width:0px}:host ::ng-deep .mat-form-field.inited{cursor:pointer}:host ::ng-deep .mat-form-field.mat-focused:not(.multiple).has-keyword .mat-chip{margin-left:-1000px}:host ::ng-deep .mat-form-field.mat-focused input.mat-chip-input{width:200px}:host ::ng-deep .mat-form-field:not(.inited):not(.has-value) input.mat-chip-input{width:100px}:host ::ng-deep .mat-form-field:not(.inited) .mat-form-field-underline{visibility:hidden}:host ::ng-deep .mat-form-field:not(.inited) .mat-chip{cursor:pointer}:host ::ng-deep .mat-form-field .mat-form-field-infix{width:unset}:host ::ng-deep .mat-form-field .mat-form-field-prefix,:host ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end}:host ::ng-deep .mat-form-field .mat-form-field-prefix .clear,:host ::ng-deep .mat-form-field .mat-form-field-suffix .clear{cursor:pointer}:host ::ng-deep .mat-form-field.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{transform:translateY(-1.34375em) scale(.75)}:host ::ng-deep .mat-form-field .mat-chip-list-wrapper{cursor:pointer;line-height:0;margin:-4px 0}:host ::ng-deep .mat-form-field .mat-chip-list-wrapper .mat-chip:not(.cdk-drag-disabled){cursor:move}:host ::ng-deep .mat-form-field .mat-chip-list-wrapper input.mat-chip-input{flex:1;margin-right:0;margin-bottom:2px}:host ::ng-deep .mat-chip-list-wrapper .mat-chip{margin:4px 4px 0 0;line-height:normal}::ng-deep .fs-autocomplete-chips-panel:not(:hover) .mat-active .option-chip{background-color:#2a2a2a1a}::ng-deep .fs-autocomplete-chips-panel .mat-option-text{align-items:center;display:inline-flex;height:inherit}::ng-deep .fs-autocomplete-chips-panel .static-templates{position:sticky;bottom:0;width:100%;background:#fff}::ng-deep .fs-autocomplete-chips-panel .static-templates mat-option:first-child{border-top:1px solid #e0e0e0}::ng-deep .fs-autocomplete-chips-panel .invalid-message .mat-option-text{line-height:normal;flex-direction:column;align-items:start;font-size:80%}::ng-deep .fs-autocomplete-chips-panel .mat-option{line-height:45px;height:45px}::ng-deep .fs-autocomplete-chips-panel .mat-option.option-text .check{margin-left:5px;font-size:85%}::ng-deep .fs-autocomplete-chips-panel .mat-option.option-text.valid .check{color:#0faa0f}::ng-deep .fs-autocomplete-chips-panel .mat-option.option-text:not(.valid) .check{color:#ea1b09}::ng-deep .fs-autocomplete-chips-panel .mat-option.option{padding:0}::ng-deep .fs-autocomplete-chips-panel .mat-option.multiple .option-chip{padding-left:8px}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip{-webkit-user-select:none;user-select:none;display:flex;text-overflow:ellipsis;overflow:inherit;cursor:pointer;padding:0 16px;align-items:center;height:inherit;width:100%}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip .mat-chip{cursor:pointer;pointer-events:all}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip .mat-chip .mat-icon{margin-right:5px}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip:hover,::ng-deep .fs-autocomplete-chips-panel .mat-option .add-icon:hover{background-color:#0000001a}::ng-deep .fs-autocomplete-chips-panel .mat-option.mat-active,::ng-deep .fs-autocomplete-chips-panel .mat-option:hover:not(.mat-option-disabled),::ng-deep .fs-autocomplete-chips-panel .mat-option:focus:not(.mat-option-disabled){background:none}::ng-deep .fs-autocomplete-chips-panel .mat-option .add-icon{display:flex;font-size:24px;height:100%;align-items:center;width:45px;display:block;text-align:center;-webkit-user-select:none;user-select:none}::ng-deep .fs-autocomplete-chips-panel .mat-option .add-icon mat-icon{margin:0}::ng-deep .mat-chip.fs-autocomplete-chip{background-color:#f3f3f3;white-space:nowrap;box-shadow:none!important;-webkit-user-select:none;user-select:none;max-width:100%}::ng-deep .mat-chip.fs-autocomplete-chip:hover:after{opacity:0}::ng-deep .mat-chip.fs-autocomplete-chip.cdk-drag-placeholder{opacity:.5}::ng-deep .mat-chip.fs-autocomplete-chip .item-image{width:30px;height:30px;object-fit:cover;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;margin-right:5px;display:flex;border-radius:50%;flex-shrink:0}::ng-deep .mat-chip.fs-autocomplete-chip .item-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-chip.fs-autocomplete-chip .item-template{display:flex;flex-direction:row;align-items:center}::ng-deep .mat-chip.fs-autocomplete-chip .item-icon{margin:0 5px 0 -5px}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix{display:flex;align-items:center}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix a{display:flex}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix .mat-icon{color:#8f8f8f;opacity:1;margin-left:3px;margin-right:-5px;cursor:pointer;transform:scale(.77)}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix .mat-icon:hover{color:#202020}::ng-deep .mat-chip.fs-autocomplete-chip.size-small{height:25px;font-size:85%;padding:0 8px;min-height:auto}::ng-deep .mat-chip.fs-autocomplete-chip.size-small .item-image{width:25px;height:25px}::ng-deep .mat-chip.fs-autocomplete-chip.size-small .item-icon{transform:scale(.8);margin-right:0}::ng-deep .mat-chip.fs-autocomplete-chip.imaged{padding-left:0}::ng-deep .mat-chip.fs-autocomplete-chip.imaged .item-image{margin-left:-1px}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputSeparatorKeyCodes", "placeholder", "id", "matChipInputFor", "matChipInputAddOnBlur", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        }], queries: [{ propertyName: "objectTemplate", first: true, predicate: FsAutocompleteObjectDirective, descendants: true, read: TemplateRef }, { propertyName: "chipSuffixTemplate", first: true, predicate: FsAutocompleteChipSuffixDirective, descendants: true, read: TemplateRef }, { propertyName: "chipsSuffixTemplate", first: true, predicate: FsAutocompleteChipsSuffixDirective, descendants: true, read: TemplateRef }, { propertyName: "textValidIndicatorTemplate", first: true, predicate: FsAutocompleteChipsTextValidIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "noResultsTemplate", first: true, predicate: FsAutocompleteChipsNoResultsDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "staticTemplates", predicate: FsAutocompleteChipsStaticDirective, read: TemplateRef }, { propertyName: "staticDirectives", predicate: FsAutocompleteChipsStaticDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "dummyInput", first: true, predicate: ["dummyInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "formField", first: true, predicate: MatFormField, descendants: true, read: ElementRef }, { propertyName: "autocompleteTriggers", predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<mat-form-field\n    [ngClass]=\"{ \n      inited: inited, \n      multiple: multiple, \n      'has-value': !!(model || []).length,\n      'has-keyword': !!keyword\n    }\"\n    (click)=\"focus()\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-chip-list\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [tabIndex]=\"-1\"\n      cdkDropListGroup\n      #searchList>\n    <div\n        *ngFor=\"let item of model; let index = index\"\n        cdkDropList\n        [cdkDropListData]=\"{ index: index }\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\">\n      <mat-chip\n          [disableRipple]=\"true\"\n          [selectable]=\"!disabled\"\n          [removable]=\"!disabled\"\n          [disabled]=\"disabled\"\n          [class]=\"'fs-autocomplete-chip ' + item.class\"\n          [ngClass]=\"{\n            imaged: item.image,\n            'size-small': size === 'small',\n            'size-large': size === 'large',\n            'last-chip': model.length - 1 === index\n          }\"\n          [style.backgroundColor]=\"item.background || background\"\n          [style.color]=\"item.color || color\"\n          (keydown)=\"chipKeyDown($event, index)\"\n          (click)=\"chipClick($event)\"\n          [cdkDragDisabled]=\"!orderable || disabled || !inited\"\n          [cdkDragData]=\"item\"\n          tabindex=\"-1\"\n          cdkDrag\n          cdkDragHandle>\n        <ng-container\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item, selecting: false }\">\n        </ng-container>\n        <ng-container\n          [ngTemplateOutlet]=\"itemSuffixTemplate\"\n          [ngTemplateOutletContext]=\"{ item: item, selecting: false, disabled: disabled }\">\n        </ng-container>\n      </mat-chip>\n    </div>\n    <input\n      #input\n      autocomplete=\"off\"\n      [readonly]=\"readonly\"\n      (input)=\"inputed($event)\"\n      (keydown)=\"keyDown($event)\"\n      (focus)=\"focused($event)\"\n      (blur)=\"blured()\"\n      [name]=\"name\"\n      [matAutocomplete]=\"autocompleteSearch\"\n      [matChipInputFor]=\"searchList\">\n  </mat-chip-list>\n\n  <span *ngIf=\"chipsSuffixTemplate\" matSuffix>\n    <ng-container [ngTemplateOutlet]=\"chipsSuffixTemplate\"></ng-container>\n  </span>\n\n  <span *ngIf=\"!disabled && allowClear && inited\" matSuffix>\n    <mat-icon\n        *ngIf=\"model.length\"\n        class=\"clear\"\n        (click)=\"clearClick($event)\">\n      clear\n    </mat-icon>\n  </span>\n\n  <mat-autocomplete\n      #autocompleteSearch=\"matAutocomplete\"\n      [class]=\"panelClasses\"\n      (optionSelected)=\"optionSelected($event)\"\n      (closed)=\"closed()\"\n      (opened)=\"opened()\"\n      [panelWidth]=\"panelWidth\"\n      [autoActiveFirstOption]=\"true\">\n    <ng-container *ngIf=\"keyword && allowText\">\n      <mat-option \n          class=\"option-text\"\n          *ngIf=\"textData.type===dataType.Text\" \n          [value]=\"textData\"\n          [ngClass]=\"{ valid: textData.valid }\">\n        <ng-container\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{ item: textData }\">\n        </ng-container>\n        <span class=\"check\">\n          <ng-container \n            *ngIf=\"textValidIndicatorTemplate; else textValidIndicator\"\n            [ngTemplateOutlet]=\"textValidIndicatorTemplate\"\n            [ngTemplateOutletContext]=\"{ valid: textData.valid }\">\n          </ng-container>\n          <ng-template #textValidIndicator>\n            {{ textData.valid ? 'Valid' : 'Invalid' }}\n          </ng-template>\n        </span>\n      </mat-option>\n    </ng-container>\n\n    <mat-option\n      [ngClass]=\"{ multiple: multiple }\"\n      class=\"option\"\n      *ngFor=\"let item of data\" [value]=\"item\">\n      <a\n          *ngIf=\"multiple\"\n          class=\"add-icon\"\n          (click)=\"optionClick($event, item, true)\">\n        <mat-icon>add</mat-icon>\n      </a>\n      <div class=\"option-chip\" (click)=\"optionClick($event, item)\">\n        <mat-radio-button *ngIf=\"!multiple\" [checked]=\"item.selected\"></mat-radio-button>\n        <mat-chip\n            (click)=\"optionClick($event, item)\"\n            [disableRipple]=\"true\"\n            [class]=\"'fs-autocomplete-chip ' + item.class\"\n            [ngClass]=\"{ imaged: item.image, 'size-small': size === 'small', 'size-large': size === 'large' }\"\n            [style.backgroundColor]=\"item.background || background\"\n            [style.color]=\"item.color || color\">\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item, selecting: true }\">\n          </ng-container>\n          <ng-container\n            [ngTemplateOutlet]=\"itemSuffixTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item, selecting: true, disabled: disabled }\">\n          </ng-container>\n        </mat-chip>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"noResults !== false\">\n      <ng-template\n        *ngIf=\"noResultsTemplate; else noResultsOption\"\n        [ngTemplateOutlet]=\"noResultsTemplate\"\n        [ngTemplateOutletContext]=\"{ keyword: keyword }\">\n      </ng-template>\n      <ng-template #noResultsOption>\n        <mat-option disabled class=\"no-results\">\n          No results <ng-container *ngIf=\"keyword\">for \"{{keyword}}\"</ng-container>\n        </mat-option>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"staticTemplates.length\">\n      <div class=\"static-templates\">\n        <mat-option\n          *ngFor=\"let staticTemplate of staticTemplates; let i = index\"\n          class=\"static-option\"\n          (click)=\"staticClick($event, i)\">\n          <ng-template *ngTemplateOutlet=\"staticTemplate;context: { test: true }\"></ng-template>\n        </mat-option>\n      </div>\n    </ng-container>\n\n    <mat-option disabled class=\"blank-placeholder\"></mat-option>\n  </mat-autocomplete>\n  <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n  <input class=\"dummy-input\" #dummyInput tabindex=\"-1\">\n</mat-form-field>\n\n<ng-template #itemTemplate let-item=\"item\" let-selecting=\"selecting\">\n  <ng-container *ngIf=\"item.type===dataType.Object\" class=\"item\">\n    <div class=\"item-image\" *ngIf=\"item.image\" [style.backgroundImage]=\"'url(' + item.image + ')'\"></div>\n    <mat-icon class=\"item-icon\" *ngIf=\"item.icon\" [style.color]=\"item.iconColor || item.color\">{{item.icon}}</mat-icon>\n    <span class=\"item-content\">\n      <ng-template\n        [ngTemplateOutlet]=\"objectTemplate\"\n        [ngTemplateOutletContext]=\"{ object: item.data, selecting: selecting }\">\n      </ng-template>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"item.type===dataType.Text\">\n    {{item.data}}\n  </ng-container>\n</ng-template>\n\n<ng-template #itemSuffixTemplate let-item=\"item\" let-selecting=\"selecting\">\n  <div class=\"item-suffix\">\n    <ng-container\n      *ngIf=\"chipSuffixTemplate\"\n      [ngTemplateOutlet]=\"chipSuffixTemplate\"\n      [ngTemplateOutletContext]=\"{ object: item.data, selecting: selecting, disabled: disabled }\">\n    </ng-container>\n    <a\n        class=\"remove\"\n        *ngIf=\"!selecting && removable && !disabled\"\n        (click)=\"chipRemoved($event, item)\"\n        (mousedown)=\"chipRemovedMousedown($event)\">\n      <mat-icon\n      [style.color]=\"item.color || color\">clear</mat-icon>\n    </a>\n  </div>\n</ng-template>\n", styles: [".mat-chip-list{outline:transparent;overflow:hidden}.blank-placeholder{display:none}.none-placeholder{cursor:pointer;color:#0000008a;border-bottom:1px solid transparent}.none-placeholder:hover{border-bottom-style:dashed}.no-results{background-color:inherit}.dummy-input{width:0;height:0;padding:0;border:0;display:table}:host ::ng-deep .cdk-drop-list{max-width:100%}:host ::ng-deep .mat-form-field{width:100%;letter-spacing:inherit;margin-left:0}:host ::ng-deep .mat-form-field input.mat-chip-input{width:0px}:host ::ng-deep .mat-form-field.inited{cursor:pointer}:host ::ng-deep .mat-form-field.mat-focused:not(.multiple).has-keyword .mat-chip{margin-left:-1000px}:host ::ng-deep .mat-form-field.mat-focused input.mat-chip-input{width:200px}:host ::ng-deep .mat-form-field:not(.inited):not(.has-value) input.mat-chip-input{width:100px}:host ::ng-deep .mat-form-field:not(.inited) .mat-form-field-underline{visibility:hidden}:host ::ng-deep .mat-form-field:not(.inited) .mat-chip{cursor:pointer}:host ::ng-deep .mat-form-field .mat-form-field-infix{width:unset}:host ::ng-deep .mat-form-field .mat-form-field-prefix,:host ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end}:host ::ng-deep .mat-form-field .mat-form-field-prefix .clear,:host ::ng-deep .mat-form-field .mat-form-field-suffix .clear{cursor:pointer}:host ::ng-deep .mat-form-field.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{transform:translateY(-1.34375em) scale(.75)}:host ::ng-deep .mat-form-field .mat-chip-list-wrapper{cursor:pointer;line-height:0;margin:-4px 0}:host ::ng-deep .mat-form-field .mat-chip-list-wrapper .mat-chip:not(.cdk-drag-disabled){cursor:move}:host ::ng-deep .mat-form-field .mat-chip-list-wrapper input.mat-chip-input{flex:1;margin-right:0;margin-bottom:2px}:host ::ng-deep .mat-chip-list-wrapper .mat-chip{margin:4px 4px 0 0;line-height:normal}::ng-deep .fs-autocomplete-chips-panel:not(:hover) .mat-active .option-chip{background-color:#2a2a2a1a}::ng-deep .fs-autocomplete-chips-panel .mat-option-text{align-items:center;display:inline-flex;height:inherit}::ng-deep .fs-autocomplete-chips-panel .static-templates{position:sticky;bottom:0;width:100%;background:#fff}::ng-deep .fs-autocomplete-chips-panel .static-templates mat-option:first-child{border-top:1px solid #e0e0e0}::ng-deep .fs-autocomplete-chips-panel .invalid-message .mat-option-text{line-height:normal;flex-direction:column;align-items:start;font-size:80%}::ng-deep .fs-autocomplete-chips-panel .mat-option{line-height:45px;height:45px}::ng-deep .fs-autocomplete-chips-panel .mat-option.option-text .check{margin-left:5px;font-size:85%}::ng-deep .fs-autocomplete-chips-panel .mat-option.option-text.valid .check{color:#0faa0f}::ng-deep .fs-autocomplete-chips-panel .mat-option.option-text:not(.valid) .check{color:#ea1b09}::ng-deep .fs-autocomplete-chips-panel .mat-option.option{padding:0}::ng-deep .fs-autocomplete-chips-panel .mat-option.multiple .option-chip{padding-left:8px}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip{-webkit-user-select:none;user-select:none;display:flex;text-overflow:ellipsis;overflow:inherit;cursor:pointer;padding:0 16px;align-items:center;height:inherit;width:100%}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip .mat-chip{cursor:pointer;pointer-events:all}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip .mat-chip .mat-icon{margin-right:5px}::ng-deep .fs-autocomplete-chips-panel .mat-option .option-chip:hover,::ng-deep .fs-autocomplete-chips-panel .mat-option .add-icon:hover{background-color:#0000001a}::ng-deep .fs-autocomplete-chips-panel .mat-option.mat-active,::ng-deep .fs-autocomplete-chips-panel .mat-option:hover:not(.mat-option-disabled),::ng-deep .fs-autocomplete-chips-panel .mat-option:focus:not(.mat-option-disabled){background:none}::ng-deep .fs-autocomplete-chips-panel .mat-option .add-icon{display:flex;font-size:24px;height:100%;align-items:center;width:45px;display:block;text-align:center;-webkit-user-select:none;user-select:none}::ng-deep .fs-autocomplete-chips-panel .mat-option .add-icon mat-icon{margin:0}::ng-deep .mat-chip.fs-autocomplete-chip{background-color:#f3f3f3;white-space:nowrap;box-shadow:none!important;-webkit-user-select:none;user-select:none;max-width:100%}::ng-deep .mat-chip.fs-autocomplete-chip:hover:after{opacity:0}::ng-deep .mat-chip.fs-autocomplete-chip.cdk-drag-placeholder{opacity:.5}::ng-deep .mat-chip.fs-autocomplete-chip .item-image{width:30px;height:30px;object-fit:cover;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;margin-right:5px;display:flex;border-radius:50%;flex-shrink:0}::ng-deep .mat-chip.fs-autocomplete-chip .item-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-chip.fs-autocomplete-chip .item-template{display:flex;flex-direction:row;align-items:center}::ng-deep .mat-chip.fs-autocomplete-chip .item-icon{margin:0 5px 0 -5px}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix{display:flex;align-items:center}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix a{display:flex}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix .mat-icon{color:#8f8f8f;opacity:1;margin-left:3px;margin-right:-5px;cursor:pointer;transform:scale(.77)}::ng-deep .mat-chip.fs-autocomplete-chip .item-suffix .mat-icon:hover{color:#202020}::ng-deep .mat-chip.fs-autocomplete-chip.size-small{height:25px;font-size:85%;padding:0 8px;min-height:auto}::ng-deep .mat-chip.fs-autocomplete-chip.size-small .item-image{width:25px;height:25px}::ng-deep .mat-chip.fs-autocomplete-chip.size-small .item-icon{transform:scale(.8);margin-right:0}::ng-deep .mat-chip.fs-autocomplete-chip.imaged{padding-left:0}::ng-deep .mat-chip.fs-autocomplete-chip.imaged .item-image{margin-left:-1px}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputSeparatorKeyCodes", "placeholder", "id", "matChipInputFor", "matChipInputAddOnBlur", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAutocompleteChipsComponent, decorators: [{
@@ -623,3 +634,3 @@ type: Component,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }]; }, propDecorators: { fetch: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i0.ElementRef }]; }, propDecorators: { fetch: [{
                 type: Input
@@ -626,0 +637,0 @@ }], readonly: [{

package.json

 {
   "name": "@firestitch/autocomplete-chips",
-  "version": "12.4.4",
+  "version": "12.4.5",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

438563

increased by0.98%

Lines of code

3372

increased by1.17%

No dependency changes