@recursyve/nice-ui-kit.v2 15.0.0-beta.122 → 15.0.0-beta.124

package/fesm2020/recursyve-nice-ui-kit.v2.mjs

@@ -3213,7 +3213,7 @@ NiceAsyncTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             useExisting: NiceAsyncTypeaheadComponent
         },
         NiceAsyncTypeaheadService
-    ], 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            >\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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "directive", type: i1$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], 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 class=\"-mt-2\" *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n\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            >\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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "directive", type: i1$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAsyncTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-async-typeahead", encapsulation: ViewEncapsulation.None, providers: [
@@ -3222,7 +3222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: NiceAsyncTypeaheadComponent
                         },
                         NiceAsyncTypeaheadService
-                    ], 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            >\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"] }]
+                    ], 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 class=\"-mt-2\" *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n\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            >\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"] }]
         }], ctorParameters: function () { return [{ type: i1$3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3957,7 +3957,7 @@ NiceDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             useExisting: forwardRef(() => NiceDateRangePickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            panelClass=\"nice-date-range-picker\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-date-range-picker", encapsulation: ViewEncapsulation.None, providers: [
@@ -3966,7 +3966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: forwardRef(() => NiceDateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"] }]
+                    ], template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            panelClass=\"nice-date-range-picker\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -10164,23 +10164,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 function showSuccessToast(loadingToastService, options) {
+    const observer = options.useObserver ?? "next";
     return source => source.pipe(tap$1({
-        next: () => loadingToastService.success(options.messageKey, options.titleKey, options.params)
+        [observer]: () => loadingToastService.success(options.messageKey, options.titleKey, options.params)
     }));
 }
 function showErrorToast(loadingToastService, options) {
+    const observer = options.useObserver ?? "error";
     return source => source.pipe(tap$1({
-        next: () => loadingToastService.error(options.messageKey, options.titleKey, options.params)
+        [observer]: () => loadingToastService.error(options.messageKey, options.titleKey, options.params)
     }));
 }
 function showInfoToast(loadingToastService, options) {
+    const observer = options.useObserver ?? "next";
     return source => source.pipe(tap$1({
-        next: () => loadingToastService.info(options.messageKey, options.titleKey, options.params)
+        [observer]: () => loadingToastService.info(options.messageKey, options.titleKey, options.params)
     }));
 }
 function showWarningToast(loadingToastService, options) {
+    const observer = options.useObserver ?? "error";
     return source => source.pipe(tap$1({
-        next: () => loadingToastService.warning(options.messageKey, options.titleKey, options.params)
+        [observer]: () => loadingToastService.warning(options.messageKey, options.titleKey, options.params)
     }));
 }