@koalarx/ui 14.0.3 → 14.0.4

package/dynamic-component/fesm2020/koalarx-ui-dynamic-component.mjs

@@ -6,9 +6,9 @@ class KoalaDynamicComponentDirective {
         this.viewContainerRef = viewContainerRef;
     }
 }
-KoalaDynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-KoalaDynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: KoalaDynamicComponentDirective, selector: "[koalaDynamicComponent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentDirective, decorators: [{
+KoalaDynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+KoalaDynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.9", type: KoalaDynamicComponentDirective, selector: "[koalaDynamicComponent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[koalaDynamicComponent]',
@@ -35,10 +35,10 @@ class KoalaDynamicComponentFactory {
         }
     }
 }
-KoalaDynamicComponentFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentFactory, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-KoalaDynamicComponentFactory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: KoalaDynamicComponentFactory, selector: "koala-dynamic-component", inputs: { dynamicComponent: "dynamicComponent" }, viewQueries: [{ propertyName: "koalaDynamicComponentDirective", first: true, predicate: KoalaDynamicComponentDirective, descendants: true, static: true }], ngImport: i0, template: `
+KoalaDynamicComponentFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentFactory, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+KoalaDynamicComponentFactory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: KoalaDynamicComponentFactory, selector: "koala-dynamic-component", inputs: { dynamicComponent: "dynamicComponent" }, viewQueries: [{ propertyName: "koalaDynamicComponentDirective", first: true, predicate: KoalaDynamicComponentDirective, descendants: true, static: true }], ngImport: i0, template: `
     <ng-template koalaDynamicComponent></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: KoalaDynamicComponentDirective, selector: "[koalaDynamicComponent]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentFactory, decorators: [{
             type: Component,
             args: [{
                     selector: 'koala-dynamic-component',
@@ -54,11 +54,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 
 class KoalaDynamicComponentModule {
 }
-KoalaDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentModule, declarations: [KoalaDynamicComponentDirective,
+KoalaDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentModule, declarations: [KoalaDynamicComponentDirective,
         KoalaDynamicComponentFactory], exports: [KoalaDynamicComponentFactory] });
-KoalaDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaDynamicComponentModule, decorators: [{
+KoalaDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaDynamicComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [

package/file-button/esm2020/lib/file-button.component.mjs

@@ -89,9 +89,9 @@ export class FileButtonComponent {
         return null;
     }
 }
-FileButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileButtonComponent, selector: "koala-file-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", multiple: "multiple", accept: "accept", setFile: "setFile", updateFileList: "updateFileList", autoclear: "autoclear" }, outputs: { getFiles: "getFiles" }, viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileButtonComponent, decorators: [{
+FileButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: FileButtonComponent, selector: "koala-file-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", multiple: "multiple", accept: "accept", setFile: "setFile", updateFileList: "updateFileList", autoclear: "autoclear" }, outputs: { getFiles: "getFiles" }, viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FileButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-file-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"] }]
         }], propDecorators: { color: [{

package/file-button/esm2020/lib/koala.btn-file.service.mjs

@@ -16,9 +16,9 @@ export class KoalaBtnFileService {
         this.fileListSubject.next(files);
     }
 }
-KoalaBtnFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaBtnFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, decorators: [{
+KoalaBtnFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaBtnFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }] });

package/file-button/esm2020/lib/koala.file-button.module.mjs

@@ -7,16 +7,16 @@ import { FileButtonComponent } from './file-button.component';
 import * as i0 from "@angular/core";
 export class KoalaFileButtonModule {
 }
-KoalaFileButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFileButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, declarations: [FileButtonComponent], imports: [CommonModule,
+KoalaFileButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFileButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, declarations: [FileButtonComponent], imports: [CommonModule,
         MatTooltipModule,
         MatButtonModule,
         MatIconModule], exports: [FileButtonComponent] });
-KoalaFileButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, imports: [CommonModule,
+KoalaFileButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, imports: [CommonModule,
         MatTooltipModule,
         MatButtonModule,
         MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [

package/file-button/fesm2015/koalarx-ui-file-button.mjs

@@ -28,9 +28,9 @@ class KoalaBtnFileService {
         this.fileListSubject.next(files);
     }
 }
-KoalaBtnFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaBtnFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, decorators: [{
+KoalaBtnFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaBtnFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }] });
@@ -126,9 +126,9 @@ class FileButtonComponent {
         });
     }
 }
-FileButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileButtonComponent, selector: "koala-file-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", multiple: "multiple", accept: "accept", setFile: "setFile", updateFileList: "updateFileList", autoclear: "autoclear" }, outputs: { getFiles: "getFiles" }, viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileButtonComponent, decorators: [{
+FileButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: FileButtonComponent, selector: "koala-file-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", multiple: "multiple", accept: "accept", setFile: "setFile", updateFileList: "updateFileList", autoclear: "autoclear" }, outputs: { getFiles: "getFiles" }, viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FileButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-file-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"] }]
         }], propDecorators: { color: [{
@@ -162,16 +162,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 
 class KoalaFileButtonModule {
 }
-KoalaFileButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFileButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, declarations: [FileButtonComponent], imports: [CommonModule,
+KoalaFileButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFileButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, declarations: [FileButtonComponent], imports: [CommonModule,
         MatTooltipModule,
         MatButtonModule,
         MatIconModule], exports: [FileButtonComponent] });
-KoalaFileButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, imports: [CommonModule,
+KoalaFileButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, imports: [CommonModule,
         MatTooltipModule,
         MatButtonModule,
         MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [

package/file-button/fesm2020/koalarx-ui-file-button.mjs

@@ -25,9 +25,9 @@ class KoalaBtnFileService {
         this.fileListSubject.next(files);
     }
 }
-KoalaBtnFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaBtnFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaBtnFileService, decorators: [{
+KoalaBtnFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaBtnFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaBtnFileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }] });
@@ -116,9 +116,9 @@ class FileButtonComponent {
         return null;
     }
 }
-FileButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileButtonComponent, selector: "koala-file-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", multiple: "multiple", accept: "accept", setFile: "setFile", updateFileList: "updateFileList", autoclear: "autoclear" }, outputs: { getFiles: "getFiles" }, viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileButtonComponent, decorators: [{
+FileButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: FileButtonComponent, selector: "koala-file-button", inputs: { color: "color", backgroundColor: "backgroundColor", icon: "icon", text: "text", tooltip: "tooltip", disabled: "disabled", multiple: "multiple", accept: "accept", setFile: "setFile", updateFileList: "updateFileList", autoclear: "autoclear" }, outputs: { getFiles: "getFiles" }, viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], ngImport: i0, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FileButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-file-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input #file (change)=\"emitFiles(file.files)\" [accept]=\"accept\" [multiple]=\"multiple\"\n       style=\"display: none;\"\n       type=\"file\"/>\n<button\n\t(click)=\"open()\"\n\t*ngIf=\"text else iconButton\"\n\t[disabled]=\"disabled\"\n\t[matTooltipDisabled]=\"!tooltip\"\n\t[matTooltip]=\"tooltip ?? ''\"\n  [style]=\"style\"\n\tclass=\"koala-button\"\n\tmat-button\n\tmatTooltipPosition=\"above\"\n\ttype=\"button\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n\t{{textSubject | async}}\n</button>\n<ng-template #iconButton>\n  <button\n\t  (click)=\"open()\"\n\t  [disabled]=\"disabled\"\n\t  [matTooltipDisabled]=\"!tooltip\"\n\t  [matTooltip]=\"tooltip ?? ''\"\n    [style]=\"style\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  matTooltipPosition=\"before\"\n\t  type=\"button\">\n    <mat-icon>{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".koala-button{padding:2px 8px}.koala-icon-button:disabled,.koala-button:disabled{background:#cccccc!important;color:#616161!important;cursor:not-allowed}.koala-icon-button{height:25px;line-height:25px;width:25px}.koala-icon-button mat-icon{font-size:20px;height:20px;line-height:20px;position:relative;width:20px}\n"] }]
         }], propDecorators: { color: [{
@@ -152,16 +152,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 
 class KoalaFileButtonModule {
 }
-KoalaFileButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFileButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, declarations: [FileButtonComponent], imports: [CommonModule,
+KoalaFileButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFileButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, declarations: [FileButtonComponent], imports: [CommonModule,
         MatTooltipModule,
         MatButtonModule,
         MatIconModule], exports: [FileButtonComponent] });
-KoalaFileButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, imports: [CommonModule,
+KoalaFileButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, imports: [CommonModule,
         MatTooltipModule,
         MatButtonModule,
         MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFileButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFileButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [

package/folder-page/esm2020/lib/folder.component.mjs

@@ -40,9 +40,9 @@ export class FolderComponent {
         }
     }
 }
-FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FolderComponent, decorators: [{
+FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FolderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-folder-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"] }]
         }], propDecorators: { titlePage: [{

package/folder-page/esm2020/lib/koala.folder-page.module.mjs

@@ -8,18 +8,18 @@ import { KoalaIconModule } from "@koalarx/ui/icon";
 import * as i0 from "@angular/core";
 export class KoalaFolderPageModule {
 }
-KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
+KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule], exports: [FolderComponent] });
-KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, imports: [CommonModule,
+KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/folder-page/fesm2015/koalarx-ui-folder-page.mjs

@@ -47,9 +47,9 @@ class FolderComponent {
         }
     }
 }
-FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FolderComponent, decorators: [{
+FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FolderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-folder-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"] }]
         }], propDecorators: { titlePage: [{
@@ -77,18 +77,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 
 class KoalaFolderPageModule {
 }
-KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
+KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule], exports: [FolderComponent] });
-KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, imports: [CommonModule,
+KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/folder-page/fesm2020/koalarx-ui-folder-page.mjs

@@ -46,9 +46,9 @@ class FolderComponent {
         }
     }
 }
-FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FolderComponent, decorators: [{
+FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: FolderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-folder-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"] }]
         }], propDecorators: { titlePage: [{
@@ -76,18 +76,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 
 class KoalaFolderPageModule {
 }
-KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
+KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule], exports: [FolderComponent] });
-KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, imports: [CommonModule,
+KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/form/esm2020/lib/btn-submit/btn-submit.component.mjs

@@ -24,9 +24,9 @@ export class BtnSubmitComponent {
         }
     }
 }
-BtnSubmitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BtnSubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BtnSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: BtnSubmitComponent, selector: "koala-submit", inputs: { fg: "fg", color: "color", btnLabel: "btnLabel", btnSubmitDisabled: "btnSubmitDisabled", loader: "loader", iconButton: "iconButton", icon: "icon", iconColor: "iconColor" }, usesOnChanges: true, ngImport: i0, template: "<button\n\t*ngIf=\"!iconButton else btnIcon\"\n\t[color]=\"color\"\n\t[disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\tmat-raised-button\n\ttype=\"submit\">\n  <span>{{btnLabel}}</span>\n  <mat-spinner *ngIf=\"loader | async\" diameter=\"20\"></mat-spinner>\n</button>\n<ng-template #btnIcon>\n  <button\n\t  [color]=\"color\"\n\t  [disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  type=\"submit\">\n    <mat-spinner *ngIf=\"loader | async\" [color]=\"color\" diameter=\"20\"></mat-spinner>\n    <mat-icon *ngIf=\"!(loader | async)\">{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".mat-spinner{display:inline-block;margin-left:8px}.koala-button{padding:2px 8px}.koala-icon-button mat-spinner{position:relative;display:inline-flex;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BtnSubmitComponent, decorators: [{
+BtnSubmitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: BtnSubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BtnSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: BtnSubmitComponent, selector: "koala-submit", inputs: { fg: "fg", color: "color", btnLabel: "btnLabel", btnSubmitDisabled: "btnSubmitDisabled", loader: "loader", iconButton: "iconButton", icon: "icon", iconColor: "iconColor" }, usesOnChanges: true, ngImport: i0, template: "<button\n\t*ngIf=\"!iconButton else btnIcon\"\n\t[color]=\"color\"\n\t[disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\tmat-raised-button\n\ttype=\"submit\">\n  <span>{{btnLabel}}</span>\n  <mat-spinner *ngIf=\"loader | async\" diameter=\"20\"></mat-spinner>\n</button>\n<ng-template #btnIcon>\n  <button\n\t  [color]=\"color\"\n\t  [disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  type=\"submit\">\n    <mat-spinner *ngIf=\"loader | async\" [color]=\"color\" diameter=\"20\"></mat-spinner>\n    <mat-icon *ngIf=\"!(loader | async)\">{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".mat-spinner{display:inline-block;margin-left:8px}.koala-button{padding:2px 8px}.koala-icon-button mat-spinner{position:relative;display:inline-flex;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: BtnSubmitComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-submit', template: "<button\n\t*ngIf=\"!iconButton else btnIcon\"\n\t[color]=\"color\"\n\t[disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\tmat-raised-button\n\ttype=\"submit\">\n  <span>{{btnLabel}}</span>\n  <mat-spinner *ngIf=\"loader | async\" diameter=\"20\"></mat-spinner>\n</button>\n<ng-template #btnIcon>\n  <button\n\t  [color]=\"color\"\n\t  [disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  type=\"submit\">\n    <mat-spinner *ngIf=\"loader | async\" [color]=\"color\" diameter=\"20\"></mat-spinner>\n    <mat-icon *ngIf=\"!(loader | async)\">{{icon}}</mat-icon>\n  </button>\n</ng-template>\n", styles: [".mat-spinner{display:inline-block;margin-left:8px}.koala-button{padding:2px 8px}.koala-icon-button mat-spinner{position:relative;display:inline-flex;margin:0}\n"] }]
         }], propDecorators: { fg: [{

package/form/esm2020/lib/directives/koala-autofocus.directive.mjs

@@ -12,9 +12,9 @@ export class KoalaAutofocusDirective {
         }
     }
 }
-KoalaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-KoalaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: { koalaAutoFocus: "koalaAutoFocus" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KoalaAutofocusDirective, decorators: [{
+KoalaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+KoalaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.9", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: { koalaAutoFocus: "koalaAutoFocus" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: KoalaAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[koalaAutoFocus]'