@recursyve/nice-ui-kit.v2 13.2.0-beta.97 → 13.2.0-beta.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/esm2020/lib/components/alert/alert.component.mjs +22 -10
  2. package/esm2020/lib/components/alert/alert.types.mjs +1 -1
  3. package/esm2020/lib/components/async-typeahead/async-typeahead.component.mjs +9 -5
  4. package/esm2020/lib/components/base-form/base-form.component.mjs +14 -3
  5. package/esm2020/lib/components/toast/toast.component.mjs +1 -1
  6. package/esm2020/lib/directives/chip-async-typeahead/chip-async-typeahead.directive.mjs +39 -0
  7. package/esm2020/lib/directives/chip-async-typeahead/index.mjs +2 -0
  8. package/esm2020/lib/directives/chip-async-typeahead/public-api.mjs +2 -0
  9. package/esm2020/lib/directives/chip-list/chip-list-items/chip-list-item-label.directive.mjs +14 -0
  10. package/esm2020/lib/directives/chip-list/chip-list-items/chip-list-items.component.mjs +32 -0
  11. package/esm2020/lib/directives/chip-list/chip-list.directive.mjs +100 -0
  12. package/esm2020/lib/directives/chip-list/chip-list.module.mjs +21 -0
  13. package/esm2020/lib/directives/chip-list/index.mjs +2 -0
  14. package/esm2020/lib/directives/chip-list/public-api.mjs +5 -0
  15. package/esm2020/lib/directives/public-api.mjs +3 -2
  16. package/fesm2015/recursyve-nice-ui-kit.v2.mjs +210 -16
  17. package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
  18. package/fesm2020/recursyve-nice-ui-kit.v2.mjs +217 -16
  19. package/fesm2020/recursyve-nice-ui-kit.v2.mjs.map +1 -1
  20. package/lib/components/alert/alert.component.d.ts +3 -2
  21. package/lib/components/alert/alert.types.d.ts +1 -0
  22. package/lib/components/async-typeahead/async-typeahead.component.d.ts +3 -2
  23. package/lib/components/base-form/base-form.component.d.ts +1 -0
  24. package/lib/directives/chip-async-typeahead/chip-async-typeahead.directive.d.ts +14 -0
  25. package/lib/directives/chip-async-typeahead/index.d.ts +1 -0
  26. package/lib/directives/chip-async-typeahead/public-api.d.ts +1 -0
  27. package/lib/directives/chip-list/chip-list-items/chip-list-item-label.directive.d.ts +8 -0
  28. package/lib/directives/chip-list/chip-list-items/chip-list-items.component.d.ts +14 -0
  29. package/lib/directives/chip-list/chip-list.directive.d.ts +27 -0
  30. package/lib/directives/chip-list/chip-list.module.d.ts +11 -0
  31. package/lib/directives/chip-list/index.d.ts +1 -0
  32. package/lib/directives/chip-list/public-api.d.ts +4 -0
  33. package/lib/directives/public-api.d.ts +2 -1
  34. package/package.json +1 -1
  35. package/src/lib/components/chip-list/chip-list.theme.scss +14 -0
  36. package/src/lib/components/chip-list/components/item-list/item-list.theme.scss +37 -0
  37. package/src/lib/directives/chip-list/chip-list-items/chip-list-items.theme.scss +35 -0
  38. package/src/lib/nice.theme.scss +5 -0
@@ -2,7 +2,7 @@ import * as i1$7 from '@angular/animations';
2
2
  import { animation, style, animate, trigger, transition, useAnimation, state, keyframes } from '@angular/animations';
3
3
  import { HttpContextToken, HttpResponse, HttpContext, HttpParams } from '@angular/common/http';
4
4
  import * as i0 from '@angular/core';
5
- import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, Optional, Inject, ViewChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, TemplateRef, ContentChildren, SkipSelf } from '@angular/core';
5
+ import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, Optional, Inject, ViewChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, TemplateRef, ContentChildren, ContentChild, SkipSelf } from '@angular/core';
6
6
  import { plainToInstance } from 'class-transformer';
7
7
  import { map, filter, takeUntil, tap, take, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
8
8
  import { __rest, __awaiter } from 'tslib';
@@ -795,14 +795,7 @@ class NiceAlertComponent {
795
795
  * Host binding for component classes
796
796
  */
797
797
  get classList() {
798
- return {
799
- "nice-alert-appearance-border": this.appearance === "border",
800
- "nice-alert-appearance-fill": this.appearance === "fill",
801
- "nice-alert-appearance-outline": this.appearance === "outline",
802
- "nice-alert-appearance-soft": this.appearance === "soft",
803
- "nice-alert-dismissed": this.dismissed,
804
- "nice-alert-dismissible": this.dismissible,
805
- "nice-alert-show-icon": this.showIcon,
798
+ let types = {
806
799
  "nice-alert-type-primary": this.type === "primary",
807
800
  "nice-alert-type-accent": this.type === "accent",
808
801
  "nice-alert-type-warn": this.type === "warn",
@@ -812,6 +805,14 @@ class NiceAlertComponent {
812
805
  "nice-alert-type-warning": this.type === "warning",
813
806
  "nice-alert-type-error": this.type === "error"
814
807
  };
808
+ if (this.color) {
809
+ types = {
810
+ "nice-alert-type-primary": this.color === "primary",
811
+ "nice-alert-type-accent": this.color === "accent",
812
+ "nice-alert-type-warn": this.color === "warn"
813
+ };
814
+ }
815
+ return Object.assign({ "nice-alert-appearance-border": this.appearance === "border", "nice-alert-appearance-fill": this.appearance === "fill", "nice-alert-appearance-outline": this.appearance === "outline", "nice-alert-appearance-soft": this.appearance === "soft", "nice-alert-dismissed": this.dismissed, "nice-alert-dismissible": this.dismissible, "nice-alert-show-icon": this.showIcon }, types);
815
816
  }
816
817
  // -----------------------------------------------------------------------------------------------------
817
818
  // @ Lifecycle hooks
@@ -920,7 +921,7 @@ class NiceAlertComponent {
920
921
  }
921
922
  }
922
923
  NiceAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAlertComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceAlertService }, { token: NiceUtilsService }], target: i0.ɵɵFactoryTarget.Component });
923
- NiceAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAlertComponent, selector: "nice-alert", inputs: { appearance: "appearance", dismissed: "dismissed", dismissible: "dismissible", disableAnimation: "disableAnimation", name: "name", showIcon: "showIcon", type: "type" }, outputs: { dismissedChanged: "dismissedChanged" }, host: { properties: { "class": "this.classList" } }, exportAs: ["niceAlert"], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"nice-alert-container\"\n *ngIf=\"!dismissible || dismissible && !dismissed\"\n [@fadeIn]=\"!dismissed && !disableAnimation\"\n [@fadeOut]=\"!dismissed && !disableAnimation\">\n\n <!-- Border -->\n <div\n class=\"nice-alert-border\"\n *ngIf=\"appearance === 'border'\"></div>\n\n <!-- Icon -->\n <div\n class=\"nice-alert-icon\"\n *ngIf=\"showIcon\">\n\n <!-- Custom icon -->\n <div class=\"nice-alert-custom-icon\">\n <ng-content select=\"[niceAlertIcon]\"></ng-content>\n </div>\n\n <!-- Default icons -->\n <div class=\"nice-alert-default-icon\">\n\n <mat-icon\n *ngIf=\"type === 'primary'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'accent'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'warn'\"\n [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'basic'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'info'\"\n [svgIcon]=\"'heroicons_solid:information-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'success'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'warning'\"\n [svgIcon]=\"'heroicons_solid:exclamation'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'error'\"\n [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n </div>\n\n </div>\n\n <!-- Content -->\n <div class=\"nice-alert-content\">\n\n <div class=\"nice-alert-title\">\n <ng-content select=\"[niceAlertTitle]\"></ng-content>\n </div>\n\n <div class=\"nice-alert-message\">\n <ng-content></ng-content>\n </div>\n\n </div>\n\n <!-- Dismiss button -->\n <button\n class=\"nice-alert-dismiss-button\"\n mat-icon-button\n (click)=\"dismiss()\">\n <mat-icon [svgIcon]=\"'heroicons_solid:x'\"></mat-icon>\n </button>\n\n</div>\n", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
924
+ NiceAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAlertComponent, selector: "nice-alert", inputs: { appearance: "appearance", dismissed: "dismissed", dismissible: "dismissible", disableAnimation: "disableAnimation", name: "name", showIcon: "showIcon", type: "type", color: "color" }, outputs: { dismissedChanged: "dismissedChanged" }, host: { properties: { "class": "this.classList" } }, exportAs: ["niceAlert"], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"nice-alert-container\"\n *ngIf=\"!dismissible || dismissible && !dismissed\"\n [@fadeIn]=\"!dismissed && !disableAnimation\"\n [@fadeOut]=\"!dismissed && !disableAnimation\">\n\n <!-- Border -->\n <div\n class=\"nice-alert-border\"\n *ngIf=\"appearance === 'border'\"></div>\n\n <!-- Icon -->\n <div\n class=\"nice-alert-icon\"\n *ngIf=\"showIcon\">\n\n <!-- Custom icon -->\n <div class=\"nice-alert-custom-icon\">\n <ng-content select=\"[niceAlertIcon]\"></ng-content>\n </div>\n\n <!-- Default icons -->\n <div class=\"nice-alert-default-icon\">\n\n <mat-icon\n *ngIf=\"type === 'primary'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'accent'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'warn'\"\n [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'basic'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'info'\"\n [svgIcon]=\"'heroicons_solid:information-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'success'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'warning'\"\n [svgIcon]=\"'heroicons_solid:exclamation'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'error'\"\n [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n </div>\n\n </div>\n\n <!-- Content -->\n <div class=\"nice-alert-content\">\n\n <div class=\"nice-alert-title\">\n <ng-content select=\"[niceAlertTitle]\"></ng-content>\n </div>\n\n <div class=\"nice-alert-message\">\n <ng-content></ng-content>\n </div>\n\n </div>\n\n <!-- Dismiss button -->\n <button\n class=\"nice-alert-dismiss-button\"\n mat-icon-button\n (click)=\"dismiss()\">\n <mat-icon [svgIcon]=\"'heroicons_solid:x'\"></mat-icon>\n </button>\n\n</div>\n", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
924
925
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAlertComponent, decorators: [{
925
926
  type: Component,
926
927
  args: [{ selector: "nice-alert", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: niceAnimations, exportAs: "niceAlert", template: "<div\n class=\"nice-alert-container\"\n *ngIf=\"!dismissible || dismissible && !dismissed\"\n [@fadeIn]=\"!dismissed && !disableAnimation\"\n [@fadeOut]=\"!dismissed && !disableAnimation\">\n\n <!-- Border -->\n <div\n class=\"nice-alert-border\"\n *ngIf=\"appearance === 'border'\"></div>\n\n <!-- Icon -->\n <div\n class=\"nice-alert-icon\"\n *ngIf=\"showIcon\">\n\n <!-- Custom icon -->\n <div class=\"nice-alert-custom-icon\">\n <ng-content select=\"[niceAlertIcon]\"></ng-content>\n </div>\n\n <!-- Default icons -->\n <div class=\"nice-alert-default-icon\">\n\n <mat-icon\n *ngIf=\"type === 'primary'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'accent'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'warn'\"\n [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'basic'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'info'\"\n [svgIcon]=\"'heroicons_solid:information-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'success'\"\n [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'warning'\"\n [svgIcon]=\"'heroicons_solid:exclamation'\"></mat-icon>\n\n <mat-icon\n *ngIf=\"type === 'error'\"\n [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n </div>\n\n </div>\n\n <!-- Content -->\n <div class=\"nice-alert-content\">\n\n <div class=\"nice-alert-title\">\n <ng-content select=\"[niceAlertTitle]\"></ng-content>\n </div>\n\n <div class=\"nice-alert-message\">\n <ng-content></ng-content>\n </div>\n\n </div>\n\n <!-- Dismiss button -->\n <button\n class=\"nice-alert-dismiss-button\"\n mat-icon-button\n (click)=\"dismiss()\">\n <mat-icon [svgIcon]=\"'heroicons_solid:x'\"></mat-icon>\n </button>\n\n</div>\n" }]
@@ -938,6 +939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
938
939
  type: Input
939
940
  }], type: [{
940
941
  type: Input
942
+ }], color: [{
943
+ type: Input
941
944
  }], dismissedChanged: [{
942
945
  type: Output
943
946
  }], classList: [{
@@ -2768,6 +2771,7 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
2768
2771
  this.allowNotFoundItems = false;
2769
2772
  this.panelClass = [];
2770
2773
  this.bindValue = "id";
2774
+ this.selected = new EventEmitter();
2771
2775
  this._disabled = false;
2772
2776
  this.id = uuid.v4();
2773
2777
  this.describedBy = "";
@@ -2814,6 +2818,7 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
2814
2818
  this._value = value;
2815
2819
  this.propagate(value);
2816
2820
  this.stateChanges.next();
2821
+ this.selected.emit(value);
2817
2822
  }
2818
2823
  }
2819
2824
  get value() {
@@ -3061,13 +3066,13 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
3061
3066
  }
3062
3067
  }
3063
3068
  NiceAsyncTypeaheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAsyncTypeaheadComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.NgForm, optional: true }, { token: i1$2.FormGroupDirective, optional: true }, { token: i2$2.ErrorStateMatcher }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: NiceAsyncTypeaheadService }], target: i0.ɵɵFactoryTarget.Component });
3064
- NiceAsyncTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAsyncTypeaheadComponent, selector: "nice-async-typeahead", inputs: { resource: "resource", searchOptions: "searchOptions", preloadResource: "preloadResource", allowNotFoundItems: "allowNotFoundItems", panelClass: "panelClass", bindValue: "bindValue", bindLabel: "bindLabel", placeholder: "placeholder", emptyPlaceholder: "emptyPlaceholder", optionTemplate: "optionTemplate", filterFn: "filterFn", labelFormatFn: "labelFormatFn", disabled: "disabled", value: "value", required: "required" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [
3069
+ NiceAsyncTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAsyncTypeaheadComponent, selector: "nice-async-typeahead", inputs: { resource: "resource", searchOptions: "searchOptions", preloadResource: "preloadResource", allowNotFoundItems: "allowNotFoundItems", panelClass: "panelClass", bindValue: "bindValue", bindLabel: "bindLabel", placeholder: "placeholder", emptyPlaceholder: "emptyPlaceholder", optionTemplate: "optionTemplate", filterFn: "filterFn", labelFormatFn: "labelFormatFn", disabled: "disabled", value: "value", required: "required" }, outputs: { selected: "selected" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [
3065
3070
  {
3066
3071
  provide: MatFormFieldControl,
3067
3072
  useExisting: NiceAsyncTypeaheadComponent
3068
3073
  },
3069
3074
  NiceAsyncTypeaheadService
3070
- ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{ loading: service.loading$ | async, loadingPage: service.loadingPage$ | async, values: service.filteredItems$ | async } as ctx\">\n <div class=\"flex\" *ngIf=\"!disabled; else disable\">\n <input\n #searchInput\n matInput\n class=\"flex-auto\"\n type=\"text\"\n name=\"mat-autocomplete\"\n [disabled]=\"$any(disabled)\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [required]=\"$any(required)\"\n (focus)=\"focusChanged(true)\"\n />\n <mat-icon *ngIf=\"value && !ctx.loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n close\n </mat-icon>\n\n <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"ctx.loading\"></mat-spinner>\n </div>\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth\"\n [class]=\"panelClass\"\n (optionActivated)=\"onOptionActivated($event)\"\n (optionSelected)=\"onOptionSelected($event)\"\n (closed)=\"updateState(false)\"\n (opened)=\"updateState(true)\"\n (optionsScroll)=\"onEndScroll()\"\n autoActiveFirstOption\n >\n <mat-progress-bar *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n <mat-option *ngFor=\"let option of ctx.values\" [value]=\"option\">\n <ng-container\n *ngIf=\"optionTemplate; else format\"\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n <ng-template #format>\n {{ formatLabel(option) }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && !allowNotFoundItems\" disabled>\n <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n {{ emptyPlaceholder }}\n </ng-container>\n <ng-template #defaultEmptyPlaceholder>\n {{ \"components.typeahead.no_item_found\" | translate }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n <span class=\"italic\">{{ searchControl.value }}</span>\n </mat-option>\n <mat-progress-bar *ngIf=\"open && ctx.loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n </mat-autocomplete>\n</ng-container>\n\n<ng-template #disable>\n <input\n matInput\n class=\"disabled-input\"\n type=\"text\"\n [disabled]=\"true\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"$any(required)\"\n />\n</ng-template>\n", styles: ["nice-async-typeahead{width:100%}nice-async-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-async-typeahead .disabled-input{flex:1 1 95%}nice-async-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-async-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatSuffix, selector: "[matSuffix]" }, { type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4.AsyncPipe, "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
3075
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{ loading: service.loading$ | async, loadingPage: service.loadingPage$ | async, values: service.filteredItems$ | async } as ctx\">\n <div class=\"flex\" *ngIf=\"!disabled; else disable\">\n <input\n #searchInput\n matInput\n class=\"flex-auto\"\n type=\"text\"\n name=\"mat-autocomplete\"\n [disabled]=\"$any(disabled)\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [required]=\"$any(required)\"\n (focus)=\"focusChanged(true)\"\n />\n <mat-icon *ngIf=\"value && !ctx.loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n close\n </mat-icon>\n\n <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"ctx.loading\"></mat-spinner>\n </div>\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth\"\n [class]=\"panelClass\"\n (optionActivated)=\"onOptionActivated($event)\"\n (optionSelected)=\"onOptionSelected($event)\"\n (closed)=\"updateState(false)\"\n (opened)=\"updateState(true)\"\n (optionsScroll)=\"onEndScroll()\"\n autoActiveFirstOption\n >\n <mat-progress-bar *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n <mat-option *ngFor=\"let option of ctx.values\" [value]=\"option\">\n <ng-container\n *ngIf=\"optionTemplate; else format\"\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n <ng-template #format>\n {{ formatLabel(option) }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && !allowNotFoundItems\" disabled>\n <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n {{ emptyPlaceholder }}\n </ng-container>\n <ng-template #defaultEmptyPlaceholder>\n {{ \"components.typeahead.no_item_found\" | translate }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n <span class=\"italic\">{{ searchControl.value }}</span>\n </mat-option>\n <mat-progress-bar *ngIf=\"open && ctx.loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n </mat-autocomplete>\n</ng-container>\n\n<ng-template #disable>\n <input\n matInput\n class=\"disabled-input\"\n type=\"text\"\n [disabled]=\"true\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"$any(required)\"\n />\n</ng-template>\n", styles: ["nice-async-typeahead{width:100%}nice-async-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-async-typeahead .disabled-input{flex:1 1 95%}nice-async-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-async-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatSuffix, selector: "[matSuffix]" }, { type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4.AsyncPipe, "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
3071
3076
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAsyncTypeaheadComponent, decorators: [{
3072
3077
  type: Component,
3073
3078
  args: [{ selector: "nice-async-typeahead", encapsulation: ViewEncapsulation.None, providers: [
@@ -3089,7 +3094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
3089
3094
  }] }, { type: i2$2.ErrorStateMatcher }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: NiceAsyncTypeaheadService }];
3090
3095
  }, propDecorators: { input: [{
3091
3096
  type: ViewChild,
3092
- args: ["searchInput", { static: true }]
3097
+ args: ["searchInput"]
3093
3098
  }], options: [{
3094
3099
  type: ViewChildren,
3095
3100
  args: [MatOption]
@@ -3115,6 +3120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
3115
3120
  type: Input
3116
3121
  }], filterFn: [{
3117
3122
  type: Input
3123
+ }], selected: [{
3124
+ type: Output
3118
3125
  }], labelFormatFn: [{
3119
3126
  type: Input
3120
3127
  }], disabled: [{
@@ -3195,6 +3202,13 @@ class NiceBaseFormComponent {
3195
3202
  this.unsubscribeAll$ = new Subject();
3196
3203
  this.propagate = () => { };
3197
3204
  }
3205
+ onChange(event) {
3206
+ if (event) {
3207
+ if (event.code === KeyboardCodes.Enter) {
3208
+ this.clickSubmit();
3209
+ }
3210
+ }
3211
+ }
3198
3212
  ngOnInit() {
3199
3213
  this.formGroup.valueChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(() => {
3200
3214
  this.onValueChange(this.formGroup.getRawValue());
@@ -3256,7 +3270,7 @@ class NiceBaseFormComponent {
3256
3270
  }
3257
3271
  }
3258
3272
  NiceBaseFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseFormComponent, deps: [{ token: i1$3.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
3259
- NiceBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseFormComponent, selector: "ng-component", inputs: { loading: "loading" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: CdkStepper, descendants: true }], ngImport: i0, template: ``, isInline: true });
3273
+ NiceBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseFormComponent, selector: "ng-component", inputs: { loading: "loading" }, outputs: { submit: "submit" }, host: { listeners: { "keyup": "onChange($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: CdkStepper, descendants: true }], ngImport: i0, template: ``, isInline: true });
3260
3274
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseFormComponent, decorators: [{
3261
3275
  type: Component,
3262
3276
  args: [{
@@ -3269,6 +3283,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
3269
3283
  type: Input
3270
3284
  }], submit: [{
3271
3285
  type: Output
3286
+ }], onChange: [{
3287
+ type: HostListener,
3288
+ args: ["keyup", ["$event"]]
3272
3289
  }] } });
3273
3290
 
3274
3291
  class NiceFormSubmitDirective {
@@ -8432,7 +8449,7 @@ class NiceToastComponent {
8432
8449
  }
8433
8450
  }
8434
8451
  NiceToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceToastComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$c.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component });
8435
- NiceToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceToastComponent, selector: "nice-toast", ngImport: i0, template: "<nice-alert disableAnimation [type]=\"data.type\" [appearance]=\"data.appearance || 'outline'\" (click)=\"dismiss()\">\n <span niceAlertTitle *ngIf=\"data.title\">{{ data.title }}</span>\n <span [innerHtml]=\"data.message\" *ngIf=\"data.message\"></span>\n</nice-alert>\n", styles: [".message-box{background-color:transparent!important;box-shadow:none!important}\n"], components: [{ type: NiceAlertComponent, selector: "nice-alert", inputs: ["appearance", "dismissed", "dismissible", "disableAnimation", "name", "showIcon", "type"], outputs: ["dismissedChanged"], exportAs: ["niceAlert"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
8452
+ NiceToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceToastComponent, selector: "nice-toast", ngImport: i0, template: "<nice-alert disableAnimation [type]=\"data.type\" [appearance]=\"data.appearance || 'outline'\" (click)=\"dismiss()\">\n <span niceAlertTitle *ngIf=\"data.title\">{{ data.title }}</span>\n <span [innerHtml]=\"data.message\" *ngIf=\"data.message\"></span>\n</nice-alert>\n", styles: [".message-box{background-color:transparent!important;box-shadow:none!important}\n"], components: [{ type: NiceAlertComponent, selector: "nice-alert", inputs: ["appearance", "dismissed", "dismissible", "disableAnimation", "name", "showIcon", "type", "color"], outputs: ["dismissedChanged"], exportAs: ["niceAlert"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
8436
8453
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceToastComponent, decorators: [{
8437
8454
  type: Component,
8438
8455
  args: [{ selector: "nice-toast", encapsulation: ViewEncapsulation.None, template: "<nice-alert disableAnimation [type]=\"data.type\" [appearance]=\"data.appearance || 'outline'\" (click)=\"dismiss()\">\n <span niceAlertTitle *ngIf=\"data.title\">{{ data.title }}</span>\n <span [innerHtml]=\"data.message\" *ngIf=\"data.message\"></span>\n</nice-alert>\n", styles: [".message-box{background-color:transparent!important;box-shadow:none!important}\n"] }]
@@ -8859,6 +8876,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
8859
8876
  }]
8860
8877
  }] });
8861
8878
 
8879
+ class NiceChipAsyncTypeaheadDirective {
8880
+ constructor(typeahead, elementRef) {
8881
+ this.typeahead = typeahead;
8882
+ this.elementRef = elementRef;
8883
+ this.niceChipAsyncTypeaheadTokenEnd = new EventEmitter();
8884
+ this.unsubscribeAll$ = new Subject();
8885
+ }
8886
+ ngOnInit() {
8887
+ this.typeahead.selected
8888
+ .pipe(takeUntil(this.unsubscribeAll$), filter((selected) => selected))
8889
+ .subscribe((_) => {
8890
+ this.niceChipAsyncTypeaheadTokenEnd.emit(this.typeahead.getActive());
8891
+ this.typeahead.writeValue(null);
8892
+ });
8893
+ this.elementRef.nativeElement.classList.add("nice-chip-async-typeahead");
8894
+ }
8895
+ ngOnDestroy() {
8896
+ this.unsubscribeAll$.next(null);
8897
+ this.unsubscribeAll$.complete();
8898
+ }
8899
+ }
8900
+ NiceChipAsyncTypeaheadDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipAsyncTypeaheadDirective, deps: [{ token: NiceAsyncTypeaheadComponent }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
8901
+ NiceChipAsyncTypeaheadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceChipAsyncTypeaheadDirective, selector: "[niceChipAsyncTypeahead]", outputs: { niceChipAsyncTypeaheadTokenEnd: "niceChipAsyncTypeaheadTokenEnd" }, exportAs: ["niceChipAsyncTypeahead"], ngImport: i0 });
8902
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipAsyncTypeaheadDirective, decorators: [{
8903
+ type: Directive,
8904
+ args: [{
8905
+ selector: "[niceChipAsyncTypeahead]",
8906
+ exportAs: "niceChipAsyncTypeahead",
8907
+ }]
8908
+ }], ctorParameters: function () { return [{ type: NiceAsyncTypeaheadComponent }, { type: i0.ElementRef }]; }, propDecorators: { niceChipAsyncTypeaheadTokenEnd: [{
8909
+ type: Output
8910
+ }] } });
8911
+
8912
+ class ChipListItemLabelDirective {
8913
+ constructor(template) {
8914
+ this.template = template;
8915
+ }
8916
+ }
8917
+ ChipListItemLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChipListItemLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
8918
+ ChipListItemLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ChipListItemLabelDirective, selector: "[niceChipListItemLabel]", ngImport: i0 });
8919
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChipListItemLabelDirective, decorators: [{
8920
+ type: Directive,
8921
+ args: [{ selector: "[niceChipListItemLabel]" }]
8922
+ }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
8923
+
8924
+ class NiceChipListItemsComponent {
8925
+ constructor() {
8926
+ this.color = "primary";
8927
+ this.removeChip = new EventEmitter();
8928
+ this.defaultColor = "primary";
8929
+ }
8930
+ remove(index) {
8931
+ this.removeChip.next(index);
8932
+ }
8933
+ }
8934
+ NiceChipListItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8935
+ NiceChipListItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceChipListItemsComponent, selector: "nice-chip-list-items", inputs: { color: "color", items$: "items$" }, outputs: { removeChip: "removeChip" }, queries: [{ propertyName: "itemLabel", first: true, predicate: ChipListItemLabelDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"nice-items-row\" *ngIf=\"(items$ | async)?.length\">\n <div\n class=\"nice-chip\"\n *ngFor=\"let value of items$ | async; let i = index\"\n [ngClass]=\"color\"\n >\n <span *ngIf=\"!itemLabel\">{{ value }}</span>\n <ng-container *ngIf=\"itemLabel\">\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { $implicit: value }\"></ng-container>\n </ng-container>\n <button (click)=\"remove(i)\">\n <mat-icon class=\"close-icon\">cancel</mat-icon>\n </button>\n </div>\n</div>\n", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
8936
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListItemsComponent, decorators: [{
8937
+ type: Component,
8938
+ args: [{ selector: "nice-chip-list-items", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nice-items-row\" *ngIf=\"(items$ | async)?.length\">\n <div\n class=\"nice-chip\"\n *ngFor=\"let value of items$ | async; let i = index\"\n [ngClass]=\"color\"\n >\n <span *ngIf=\"!itemLabel\">{{ value }}</span>\n <ng-container *ngIf=\"itemLabel\">\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { $implicit: value }\"></ng-container>\n </ng-container>\n <button (click)=\"remove(i)\">\n <mat-icon class=\"close-icon\">cancel</mat-icon>\n </button>\n </div>\n</div>\n" }]
8939
+ }], propDecorators: { itemLabel: [{
8940
+ type: ContentChild,
8941
+ args: [ChipListItemLabelDirective, { read: TemplateRef }]
8942
+ }], color: [{
8943
+ type: Input
8944
+ }], removeChip: [{
8945
+ type: Output
8946
+ }], items$: [{
8947
+ type: Input
8948
+ }] } });
8949
+
8950
+ class NiceChipListDirective {
8951
+ constructor(asyncTypeahead, ngControl, elementRef) {
8952
+ this.asyncTypeahead = asyncTypeahead;
8953
+ this.ngControl = ngControl;
8954
+ this.elementRef = elementRef;
8955
+ this.unsubscribeAll$ = new Subject();
8956
+ this.values$ = new BehaviorSubject([]);
8957
+ this._values = [];
8958
+ this.propagateChanges = (value) => { };
8959
+ if (this.ngControl) {
8960
+ this.ngControl.valueAccessor = this;
8961
+ }
8962
+ }
8963
+ get values() {
8964
+ return this._values;
8965
+ }
8966
+ onKeyDown(event) {
8967
+ if (this.asyncTypeahead) {
8968
+ return;
8969
+ }
8970
+ if (event.code === KeyboardCodes.Enter) {
8971
+ if (!this.elementRef.nativeElement.validity.valid) {
8972
+ return;
8973
+ }
8974
+ this.addValue(this.elementRef.nativeElement.value);
8975
+ this.elementRef.nativeElement.value = "";
8976
+ return;
8977
+ }
8978
+ }
8979
+ ngOnInit() {
8980
+ if (this.asyncTypeahead) {
8981
+ this.setupAsyncTypeahead();
8982
+ }
8983
+ if (this.elementRef.nativeElement.parentElement.classList.contains("mat-form-field-infix")) {
8984
+ this.elementRef.nativeElement.parentElement.style.alignItems = "flex-start";
8985
+ this.elementRef.nativeElement.parentElement.style.flexDirection = "column-reverse";
8986
+ }
8987
+ }
8988
+ ngOnChanges(changes) {
8989
+ if ("withItemList" in changes) {
8990
+ this.withItemList.items$ = this.values$;
8991
+ this.withItemList.removeChip.pipe(takeUntil(this.unsubscribeAll$)).subscribe(x => {
8992
+ this._values.splice(x, 1);
8993
+ this.propagateChanges(this._values);
8994
+ this.values$.next(this._values);
8995
+ });
8996
+ }
8997
+ }
8998
+ writeValue(obj) {
8999
+ this._values = [];
9000
+ }
9001
+ registerOnChange(fn) {
9002
+ this.propagateChanges = fn;
9003
+ }
9004
+ registerOnTouched(fn) { }
9005
+ setupAsyncTypeahead() {
9006
+ this.asyncTypeahead.selected
9007
+ .pipe(takeUntil(this.unsubscribeAll$), filter((selected) => selected))
9008
+ .subscribe((_) => {
9009
+ this.addValue(this.asyncTypeahead.getActive());
9010
+ this.asyncTypeahead.writeValue(null);
9011
+ });
9012
+ }
9013
+ addValue(value) {
9014
+ if (this._values.includes(value)) {
9015
+ return;
9016
+ }
9017
+ this._values.push(value);
9018
+ this.propagateChanges(this._values);
9019
+ this.values$.next(this._values);
9020
+ }
9021
+ }
9022
+ NiceChipListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirective, deps: [{ token: NiceAsyncTypeaheadComponent, optional: true }, { token: i1$2.NgControl, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
9023
+ NiceChipListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceChipListDirective, selector: "input[niceChipList], nice-async-typeahead[niceChipList]", inputs: { withItemList: "withItemList" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, usesOnChanges: true, ngImport: i0 });
9024
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirective, decorators: [{
9025
+ type: Directive,
9026
+ args: [{
9027
+ selector: "input[niceChipList], nice-async-typeahead[niceChipList]"
9028
+ }]
9029
+ }], ctorParameters: function () {
9030
+ return [{ type: NiceAsyncTypeaheadComponent, decorators: [{
9031
+ type: Optional
9032
+ }] }, { type: i1$2.NgControl, decorators: [{
9033
+ type: Optional
9034
+ }] }, { type: i0.ElementRef }];
9035
+ }, propDecorators: { withItemList: [{
9036
+ type: Input
9037
+ }], onKeyDown: [{
9038
+ type: HostListener,
9039
+ args: ["keydown", ["$event"]]
9040
+ }] } });
9041
+
9042
+ class NiceChipListDirectiveModule {
9043
+ }
9044
+ NiceChipListDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
9045
+ NiceChipListDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirectiveModule, declarations: [NiceChipListDirective, NiceChipListItemsComponent, ChipListItemLabelDirective], imports: [CommonModule, MatIconModule], exports: [NiceChipListDirective, NiceChipListItemsComponent, ChipListItemLabelDirective] });
9046
+ NiceChipListDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirectiveModule, imports: [[CommonModule, MatIconModule]] });
9047
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirectiveModule, decorators: [{
9048
+ type: NgModule,
9049
+ args: [{
9050
+ imports: [CommonModule, MatIconModule],
9051
+ declarations: [NiceChipListDirective, NiceChipListItemsComponent, ChipListItemLabelDirective],
9052
+ exports: [NiceChipListDirective, NiceChipListItemsComponent, ChipListItemLabelDirective]
9053
+ }]
9054
+ }] });
9055
+
8862
9056
  class NiceImageErrorPlaceholderDirective {
8863
9057
  constructor(elementRef, viewContainerRef) {
8864
9058
  this.elementRef = elementRef;
@@ -9709,5 +9903,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
9709
9903
  * Generated bundle index. Do not edit.
9710
9904
  */
9711
9905
 
9712
- export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceClickStopPropagationDirective, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TypeUtils, UrlUtils, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
9906
+ export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TypeUtils, UrlUtils, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
9713
9907
  //# sourceMappingURL=recursyve-nice-ui-kit.v2.mjs.map