@factor_ec/ui 2.0.1 → 2.1.0

package/fesm2020/factor_ec-ui.mjs

@@ -62,14 +62,12 @@ class AvatarComponent {
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.ColorService }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: AvatarComponent, selector: "ft-avatar", inputs: { color: "color", class: "class", src: "src", label: "label" }, host: { properties: { "style.background-color": "this.backgroundColor", "style.background-image": "this.backgroundImage", "class": "this.hostClasses" } }, ngImport: i0, template: "<div *ngIf=\"!loaded\">{{ initials }}</div>", styles: [":host{--default-size: var(--size, 3rem);display:inline-flex;align-items:center;justify-content:center;color:#fff;background-size:cover;background-repeat:no-repeat;border-radius:calc(var(--default-size) / 2);font-size:calc(var(--default-size) - var(--default-size) * .6);min-width:var(--default-size);min-height:var(--default-size);cursor:default;-webkit-user-select:none;user-select:none}div{font-size:1em;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: AvatarComponent, selector: "ft-avatar", inputs: { color: "color", src: "src", label: "label", class: "class" }, host: { properties: { "style.background-color": "this.backgroundColor", "style.background-image": "this.backgroundImage", "class": "this.hostClasses" } }, ngImport: i0, template: "<div *ngIf=\"!loaded\">{{ initials }}</div>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-avatar', template: "<div *ngIf=\"!loaded\">{{ initials }}</div>", styles: [":host{--default-size: var(--size, 3rem);display:inline-flex;align-items:center;justify-content:center;color:#fff;background-size:cover;background-repeat:no-repeat;border-radius:calc(var(--default-size) / 2);font-size:calc(var(--default-size) - var(--default-size) * .6);min-width:var(--default-size);min-height:var(--default-size);cursor:default;-webkit-user-select:none;user-select:none}div{font-size:1em;line-height:1em}\n"] }]
+            args: [{ selector: 'ft-avatar', template: "<div *ngIf=\"!loaded\">{{ initials }}</div>" }]
         }], ctorParameters: function () { return [{ type: i1.ColorService }]; }, propDecorators: { color: [{
                 type: Input
-            }], class: [{
-                type: Input
             }], src: [{
                 type: Input
             }], label: [{
@@ -80,6 +78,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             }], backgroundImage: [{
                 type: HostBinding,
                 args: ['style.background-image']
+            }], class: [{
+                type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -153,16 +153,14 @@ class IconComponent {
     }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: IconComponent, deps: [{ token: 'FactorUiConfiguration' }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: IconComponent, selector: "ft-icon", inputs: { class: "class", collection: "collection", mode: "mode", name: "name", path: "path", size: "size", src: "src" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg *ngIf=\"!src; else imageTemplate\"><use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" /></svg>\n<ng-template #imageTemplate>\n  <img [src]=\"src\" />\n</ng-template>", styles: [":host{line-height:0;display:inline-block}:host[size=\"1\"],:host.ft-icon--1{font-size:1rem}:host[size=\"2\"],:host.ft-icon--2{font-size:1.5rem}:host[size=\"3\"],:host.ft-icon--3{font-size:2rem}:host[size=\"4\"],:host.ft-icon--4{font-size:3rem}:host[size=\"5\"],:host.ft-icon--5{font-size:4.5rem}:host[size=\"6\"],:host.ft-icon--6{font-size:8rem}:host[size=\"7\"],:host.ft-icon--7{font-size:16rem}:host[size=\"8\"],:host.ft-icon--8{font-size:32rem}svg{width:1em;height:1em;vertical-align:middle;fill:currentColor}img{height:1em;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: IconComponent, selector: "ft-icon", inputs: { collection: "collection", mode: "mode", name: "name", path: "path", size: "size", src: "src", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg *ngIf=\"!src; else imageTemplate\"><use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" /></svg>\n<ng-template #imageTemplate>\n  <img [src]=\"src\" />\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-icon', template: "<svg *ngIf=\"!src; else imageTemplate\"><use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" /></svg>\n<ng-template #imageTemplate>\n  <img [src]=\"src\" />\n</ng-template>", styles: [":host{line-height:0;display:inline-block}:host[size=\"1\"],:host.ft-icon--1{font-size:1rem}:host[size=\"2\"],:host.ft-icon--2{font-size:1.5rem}:host[size=\"3\"],:host.ft-icon--3{font-size:2rem}:host[size=\"4\"],:host.ft-icon--4{font-size:3rem}:host[size=\"5\"],:host.ft-icon--5{font-size:4.5rem}:host[size=\"6\"],:host.ft-icon--6{font-size:8rem}:host[size=\"7\"],:host.ft-icon--7{font-size:16rem}:host[size=\"8\"],:host.ft-icon--8{font-size:32rem}svg{width:1em;height:1em;vertical-align:middle;fill:currentColor}img{height:1em;vertical-align:middle}\n"] }]
+            args: [{ selector: 'ft-icon', template: "<svg *ngIf=\"!src; else imageTemplate\"><use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" /></svg>\n<ng-template #imageTemplate>\n  <img [src]=\"src\" />\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['FactorUiConfiguration']
-                }] }]; }, propDecorators: { class: [{
-                type: Input
-            }], collection: [{
+                }] }]; }, propDecorators: { collection: [{
                 type: Input
             }], mode: [{
                 type: Input
@@ -174,6 +172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 type: Input
             }], src: [{
                 type: Input
+            }], class: [{
+                type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -236,7 +236,7 @@ class ImageComponent {
     }
 }
 ImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ImageComponent, selector: "ft-image", inputs: { class: "class", src: "src" }, host: { properties: { "class.ft-image--error": "this.error", "class.ft-image--loading": "this.loading", "class": "this.hostClasses" } }, ngImport: i0, template: "<img *ngIf=\"shown\" [src]=\"src\" />\n<ft-icon name=\"warning\" size=\"2\" *ngIf=\"error\"></ft-icon>\n", styles: [":host{display:inline-block;overflow:hidden;display:flex;align-items:center;justify-content:center}:host.ft-image--loading{background-color:#00000008;position:relative;overflow:hidden}:host.ft-image--loading:after{content:\"\";display:block;background-color:#00000005;position:absolute;top:0;bottom:0;width:100%;height:100%;transform:translate(0);animation:1.5s placeholder-loading ease-in-out infinite}:host.ft-image--error{background-color:#ff000008}:host.ft-image--error ft-icon{color:var(--danger)}img{position:relative;z-index:1;max-width:100%;max-height:100%;animation:fade-in .3s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes placeholder-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
+ImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ImageComponent, selector: "ft-image", inputs: { class: "class", src: "src" }, host: { properties: { "class.ft-image--error": "this.error", "class.ft-image--loading": "this.loading", "class": "this.hostClasses" } }, ngImport: i0, template: "<img *ngIf=\"shown\" [src]=\"src\" />\n<ft-icon name=\"warning\" size=\"2\" *ngIf=\"error\"></ft-icon>\n", styles: [":host{display:inline-block;overflow:hidden;display:flex;align-items:center;justify-content:center}:host.ft-image--loading{background-color:#00000008;position:relative;overflow:hidden}:host.ft-image--loading:after{content:\"\";display:block;background-color:#00000005;position:absolute;top:0;bottom:0;width:100%;height:100%;transform:translate(0);animation:1.5s placeholder-loading ease-in-out infinite}:host.ft-image--error{background-color:#ff000008}:host.ft-image--error ft-icon{color:var(--danger)}img{position:relative;z-index:1;max-width:100%;max-height:100%;animation:fade-in .3s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes placeholder-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "size", "src", "class"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ft-image', template: "<img *ngIf=\"shown\" [src]=\"src\" />\n<ft-icon name=\"warning\" size=\"2\" *ngIf=\"error\"></ft-icon>\n", styles: [":host{display:inline-block;overflow:hidden;display:flex;align-items:center;justify-content:center}:host.ft-image--loading{background-color:#00000008;position:relative;overflow:hidden}:host.ft-image--loading:after{content:\"\";display:block;background-color:#00000005;position:absolute;top:0;bottom:0;width:100%;height:100%;transform:translate(0);animation:1.5s placeholder-loading ease-in-out infinite}:host.ft-image--error{background-color:#ff000008}:host.ft-image--error ft-icon{color:var(--danger)}img{position:relative;z-index:1;max-width:100%;max-height:100%;animation:fade-in .3s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes placeholder-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
@@ -282,10 +282,10 @@ class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: MessageComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: MessageComponent, selector: "ft-message", outputs: { beforeSelect: "beforeSelect" }, ngImport: i0, template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-dialog-title{display:flex;align-items:center}.mat-dialog-title ft-icon{margin-right:.5rem}.mat-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-dialog-content ft-icon{margin-right:.5rem}.mat-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: MessageComponent, selector: "ft-message", outputs: { beforeSelect: "beforeSelect" }, ngImport: i0, template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-mdc-dialog-title{display:flex;align-items:center;gap:.5rem}.mat-mdc-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-mdc-dialog-content ft-icon{margin-right:.5rem}.mat-mdc-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "size", "src", "class"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-message', template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-dialog-title{display:flex;align-items:center}.mat-dialog-title ft-icon{margin-right:.5rem}.mat-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-dialog-content ft-icon{margin-right:.5rem}.mat-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"] }]
+            args: [{ selector: 'ft-message', template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-mdc-dialog-title{display:flex;align-items:center;gap:.5rem}.mat-mdc-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-mdc-dialog-content ft-icon{margin-right:.5rem}.mat-mdc-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -362,10 +362,10 @@ class ProgressComponent {
     }
 }
 ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ProgressComponent, selector: "ft-progress", inputs: { class: "class", color: "color", mode: "mode", overlay: "overlay", size: "size", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg [ngStyle]=\"{'--bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--track-color: rgba(0, 0, 0, .08);--bar-color: var(--primary);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ProgressComponent, selector: "ft-progress", inputs: { class: "class", color: "color", mode: "mode", overlay: "overlay", size: "size", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg [ngStyle]=\"{'--ft-bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode === 'determinate' ? 'ft-bar--determinate' : 'ft-bar--indeterminate'\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--ft-track-color: rgba(0, 0, 0, .08);--ft-bar-color: var(--ft-primary-color);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--ft-z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:ft-progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .ft-track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--ft-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes ft-progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ft-progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-progress', template: "<svg [ngStyle]=\"{'--bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--track-color: rgba(0, 0, 0, .08);--bar-color: var(--primary);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"] }]
+            args: [{ selector: 'ft-progress', template: "<svg [ngStyle]=\"{'--ft-bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode === 'determinate' ? 'ft-bar--determinate' : 'ft-bar--indeterminate'\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--ft-track-color: rgba(0, 0, 0, .08);--ft-bar-color: var(--ft-primary-color);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--ft-z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:ft-progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .ft-track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--ft-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes ft-progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ft-progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { class: [{
                 type: Input
             }], color: [{
@@ -515,10 +515,10 @@ class RatingComponent {
     }
 }
 RatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: RatingComponent, selector: "ft-rating", inputs: { readOnly: "readOnly", value: "value" }, ngImport: i0, template: "<ng-container *ngFor=\"let star of stars\">\n    <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n    <button type=\"button\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\"\n        (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n        (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n        <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n    <svg [ngClass]=\"{hover: hoverValue >= star.value, active: value >= star.value}\" viewBox=\"0 0 24 24\">\n        <path\n            d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n</ng-template>", styles: [":host{line-height:0;display:inline-flex}:host:hover button{color:var(--primary)}:host:hover button svg:not(.hover){color:var(--gray)}:host[size=\"1\"]{font-size:1rem}:host[size=\"2\"]{font-size:1.5rem}:host[size=\"3\"]{font-size:2rem}:host[size=\"4\"]{font-size:3rem}:host[size=\"5\"]{font-size:4.5rem}:host[size=\"6\"]{font-size:8rem}:host[size=\"7\"]{font-size:16rem}:host[size=\"8\"]{font-size:32rem}svg{width:1em;height:1em;display:block}svg path{fill:none;stroke-width:1;stroke:currentColor}svg.hover path,svg.active path{fill:currentColor}button{border:0;background:transparent;padding:0}button:focus,button:active{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: RatingComponent, selector: "ft-rating", inputs: { readOnly: "readOnly", value: "value" }, ngImport: i0, template: "<ng-container *ngFor=\"let star of stars\">\n    <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n    <button type=\"button\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\"\n        (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n        (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n        <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n    <svg [ngClass]=\"{hover: hoverValue >= star.value, active: value >= star.value}\" viewBox=\"0 0 24 24\">\n        <path\n            d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: RatingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-rating', template: "<ng-container *ngFor=\"let star of stars\">\n    <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n    <button type=\"button\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\"\n        (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n        (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n        <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n    <svg [ngClass]=\"{hover: hoverValue >= star.value, active: value >= star.value}\" viewBox=\"0 0 24 24\">\n        <path\n            d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n</ng-template>", styles: [":host{line-height:0;display:inline-flex}:host:hover button{color:var(--primary)}:host:hover button svg:not(.hover){color:var(--gray)}:host[size=\"1\"]{font-size:1rem}:host[size=\"2\"]{font-size:1.5rem}:host[size=\"3\"]{font-size:2rem}:host[size=\"4\"]{font-size:3rem}:host[size=\"5\"]{font-size:4.5rem}:host[size=\"6\"]{font-size:8rem}:host[size=\"7\"]{font-size:16rem}:host[size=\"8\"]{font-size:32rem}svg{width:1em;height:1em;display:block}svg path{fill:none;stroke-width:1;stroke:currentColor}svg.hover path,svg.active path{fill:currentColor}button{border:0;background:transparent;padding:0}button:focus,button:active{outline:none}\n"] }]
+            args: [{ selector: 'ft-rating', template: "<ng-container *ngFor=\"let star of stars\">\n    <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n    <button type=\"button\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\"\n        (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n        (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n        <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n    <svg [ngClass]=\"{hover: hoverValue >= star.value, active: value >= star.value}\" viewBox=\"0 0 24 24\">\n        <path\n            d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n</ng-template>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readOnly: [{
                 type: Input
             }], value: [{
@@ -694,7 +694,7 @@ class ExpressionBuilderComponent {
     }
 }
 ExpressionBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ExpressionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExpressionBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ExpressionBuilderComponent, selector: "ft-expression-builder", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"filterGroupTemplate\" [ngTemplateOutletContext]=\"{filter:filters, parent:null}\">\n</ng-container>\n<ng-template #filterGroupTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <button type=\"button\" class=\"filter__button filter__button--icon filter__button--toggle\"\n                (click)=\"filter.collapsed = !filter.collapsed\" *ngIf=\"filter.children && filter.children.length > 0\">\n                <ft-icon name=\"angle-right\" [ngClass]=\"{'ft-icon--open': !filter.collapsed}\"></ft-icon>\n            </button>\n            <div class=\"ft-filter__button-group\">\n                <button type=\"button\" class=\"filter__button\"\n                    [ngClass]=\"{'ft-filter__button--active': filter.operator === operator.value}\"\n                    *ngFor=\"let operator of groupOperators\" (click)=\"filter.operator = operator.value\">{{ operator.label\n                    }}</button>\n            </div>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('filter', filter)\" *ngIf=\"filter.operator\">Agregar\n                filtro</button>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('group', filter)\" *ngIf=\"filter.operator\">Agregar\n                grupo</button>\n            <button type=\"button\" class=\"ft-filter__button filter__button--icon filter__button--remove\"\n                (click)=\"remove(filter, parent)\" *ngIf=\"parent\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n        <div class=\"ft-filter__children\" *ngIf=\"filter.children && filter.children.length > 0 && !filter.collapsed\">\n            <ng-container *ngFor=\"let child of filter.children\">\n                <ng-container [ngTemplateOutlet]=\"child.type === 'group' ? filterGroupTemplate : filterTemplate\"\n                    [ngTemplateOutletContext]=\"{filter:child, parent:filter.children}\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n<ng-template #filterTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <select class=\"filter__input\">\n                <option *ngFor=\"let property of properties\" value=\"property.value\">{{ property.label }}</option>\n            </select>\n            <select class=\"ft-filter__input\">\n                <option>Mayor que</option>\n                <option>Mayor igual que</option>\n                <option>Igual que</option>\n                <option>Menor que</option>\n                <option>Menor igual que</option>\n            </select>\n            <input type=\"text\" class=\"ft-filter__input\" />\n            <button type=\"button\" class=\"filter__button filter__button--icon\" (click)=\"remove(filter, parent)\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>", styles: [":host{display:block;padding:2rem}.ft-filter{--focus-color: #00bcd4;--focus-color-rgb: 0, 188, 212;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__tools{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;background-color:#0000000d;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;overflow:hidden}.ft-filter__children{padding-left:1rem;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__button{border:1px solid rgba(0,0,0,.2);background-color:transparent;border-radius:.25rem;padding:.25rem .5rem;background-color:#ffffff4d}.ft-filter__button--icon{border-color:transparent;background-color:transparent;padding:.25rem}.ft-filter__button--active{background-color:var(--focus-color);color:#fff}.ft-filter__button:not(.ft-filter__button--active):hover{border-color:var(--focus-color);background-color:rgba(var(--focus-color-rgb),.1)}.ft-filter__button:not(.ft-filter__button--active):active{background-color:rgba(var(--focus-color-rgb),.3)}.ft-filter__button:focus{outline:none;border-color:var(--focus-color)}.ft-filter__button .ft-icon{display:block;transition:transform .2s}.ft-filter__button .ft-icon--open{transform:rotate(90deg)}.ft-filter__button-group .ft-filter__button{border-radius:0}.ft-filter__button-group .ft-filter__button:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-right:0}.ft-filter__button-group .ft-filter__button:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ft-filter__input{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.25rem;padding:.25rem;transition:box-shadow .2s}.ft-filter__input:hover{border-color:var(--focus-color)}.ft-filter__input:focus{outline:none;border-color:var(--focus-color);box-shadow:0 0 0 2px rgba(var(--focus-color-rgb),.2)}.ft-filter select.ft-filter__input{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right .5rem center;background-size:.625rem;padding-right:1.5rem;-webkit-appearance:none;appearance:none}@keyframes slide-right{0%{margin-left:calc(-40px + .5rem)}to{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
+ExpressionBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ExpressionBuilderComponent, selector: "ft-expression-builder", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"filterGroupTemplate\" [ngTemplateOutletContext]=\"{filter:filters, parent:null}\">\n</ng-container>\n<ng-template #filterGroupTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <button type=\"button\" class=\"filter__button filter__button--icon filter__button--toggle\"\n                (click)=\"filter.collapsed = !filter.collapsed\" *ngIf=\"filter.children && filter.children.length > 0\">\n                <ft-icon name=\"angle-right\" [ngClass]=\"{'ft-icon--open': !filter.collapsed}\"></ft-icon>\n            </button>\n            <div class=\"ft-filter__button-group\">\n                <button type=\"button\" class=\"filter__button\"\n                    [ngClass]=\"{'ft-filter__button--active': filter.operator === operator.value}\"\n                    *ngFor=\"let operator of groupOperators\" (click)=\"filter.operator = operator.value\">{{ operator.label\n                    }}</button>\n            </div>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('filter', filter)\" *ngIf=\"filter.operator\">Agregar\n                filtro</button>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('group', filter)\" *ngIf=\"filter.operator\">Agregar\n                grupo</button>\n            <button type=\"button\" class=\"ft-filter__button filter__button--icon filter__button--remove\"\n                (click)=\"remove(filter, parent)\" *ngIf=\"parent\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n        <div class=\"ft-filter__children\" *ngIf=\"filter.children && filter.children.length > 0 && !filter.collapsed\">\n            <ng-container *ngFor=\"let child of filter.children\">\n                <ng-container [ngTemplateOutlet]=\"child.type === 'group' ? filterGroupTemplate : filterTemplate\"\n                    [ngTemplateOutletContext]=\"{filter:child, parent:filter.children}\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n<ng-template #filterTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <select class=\"filter__input\">\n                <option *ngFor=\"let property of properties\" value=\"property.value\">{{ property.label }}</option>\n            </select>\n            <select class=\"ft-filter__input\">\n                <option>Mayor que</option>\n                <option>Mayor igual que</option>\n                <option>Igual que</option>\n                <option>Menor que</option>\n                <option>Menor igual que</option>\n            </select>\n            <input type=\"text\" class=\"ft-filter__input\" />\n            <button type=\"button\" class=\"filter__button filter__button--icon\" (click)=\"remove(filter, parent)\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>", styles: [":host{display:block;padding:2rem}.ft-filter{--focus-color: #00bcd4;--focus-color-rgb: 0, 188, 212;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__tools{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;background-color:#0000000d;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;overflow:hidden}.ft-filter__children{padding-left:1rem;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__button{border:1px solid rgba(0,0,0,.2);background-color:transparent;border-radius:.25rem;padding:.25rem .5rem;background-color:#ffffff4d}.ft-filter__button--icon{border-color:transparent;background-color:transparent;padding:.25rem}.ft-filter__button--active{background-color:var(--focus-color);color:#fff}.ft-filter__button:not(.ft-filter__button--active):hover{border-color:var(--focus-color);background-color:rgba(var(--focus-color-rgb),.1)}.ft-filter__button:not(.ft-filter__button--active):active{background-color:rgba(var(--focus-color-rgb),.3)}.ft-filter__button:focus{outline:none;border-color:var(--focus-color)}.ft-filter__button .ft-icon{display:block;transition:transform .2s}.ft-filter__button .ft-icon--open{transform:rotate(90deg)}.ft-filter__button-group .ft-filter__button{border-radius:0}.ft-filter__button-group .ft-filter__button:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-right:0}.ft-filter__button-group .ft-filter__button:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ft-filter__input{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.25rem;padding:.25rem;transition:box-shadow .2s}.ft-filter__input:hover{border-color:var(--focus-color)}.ft-filter__input:focus{outline:none;border-color:var(--focus-color);box-shadow:0 0 0 2px rgba(var(--focus-color-rgb),.2)}.ft-filter select.ft-filter__input{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right .5rem center;background-size:.625rem;padding-right:1.5rem;-webkit-appearance:none;appearance:none}@keyframes slide-right{0%{margin-left:calc(-40px + .5rem)}to{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "size", "src", "class"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ExpressionBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ft-expression-builder', template: "<ng-container [ngTemplateOutlet]=\"filterGroupTemplate\" [ngTemplateOutletContext]=\"{filter:filters, parent:null}\">\n</ng-container>\n<ng-template #filterGroupTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <button type=\"button\" class=\"filter__button filter__button--icon filter__button--toggle\"\n                (click)=\"filter.collapsed = !filter.collapsed\" *ngIf=\"filter.children && filter.children.length > 0\">\n                <ft-icon name=\"angle-right\" [ngClass]=\"{'ft-icon--open': !filter.collapsed}\"></ft-icon>\n            </button>\n            <div class=\"ft-filter__button-group\">\n                <button type=\"button\" class=\"filter__button\"\n                    [ngClass]=\"{'ft-filter__button--active': filter.operator === operator.value}\"\n                    *ngFor=\"let operator of groupOperators\" (click)=\"filter.operator = operator.value\">{{ operator.label\n                    }}</button>\n            </div>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('filter', filter)\" *ngIf=\"filter.operator\">Agregar\n                filtro</button>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('group', filter)\" *ngIf=\"filter.operator\">Agregar\n                grupo</button>\n            <button type=\"button\" class=\"ft-filter__button filter__button--icon filter__button--remove\"\n                (click)=\"remove(filter, parent)\" *ngIf=\"parent\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n        <div class=\"ft-filter__children\" *ngIf=\"filter.children && filter.children.length > 0 && !filter.collapsed\">\n            <ng-container *ngFor=\"let child of filter.children\">\n                <ng-container [ngTemplateOutlet]=\"child.type === 'group' ? filterGroupTemplate : filterTemplate\"\n                    [ngTemplateOutletContext]=\"{filter:child, parent:filter.children}\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n<ng-template #filterTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <select class=\"filter__input\">\n                <option *ngFor=\"let property of properties\" value=\"property.value\">{{ property.label }}</option>\n            </select>\n            <select class=\"ft-filter__input\">\n                <option>Mayor que</option>\n                <option>Mayor igual que</option>\n                <option>Igual que</option>\n                <option>Menor que</option>\n                <option>Menor igual que</option>\n            </select>\n            <input type=\"text\" class=\"ft-filter__input\" />\n            <button type=\"button\" class=\"filter__button filter__button--icon\" (click)=\"remove(filter, parent)\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>", styles: [":host{display:block;padding:2rem}.ft-filter{--focus-color: #00bcd4;--focus-color-rgb: 0, 188, 212;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__tools{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;background-color:#0000000d;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;overflow:hidden}.ft-filter__children{padding-left:1rem;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__button{border:1px solid rgba(0,0,0,.2);background-color:transparent;border-radius:.25rem;padding:.25rem .5rem;background-color:#ffffff4d}.ft-filter__button--icon{border-color:transparent;background-color:transparent;padding:.25rem}.ft-filter__button--active{background-color:var(--focus-color);color:#fff}.ft-filter__button:not(.ft-filter__button--active):hover{border-color:var(--focus-color);background-color:rgba(var(--focus-color-rgb),.1)}.ft-filter__button:not(.ft-filter__button--active):active{background-color:rgba(var(--focus-color-rgb),.3)}.ft-filter__button:focus{outline:none;border-color:var(--focus-color)}.ft-filter__button .ft-icon{display:block;transition:transform .2s}.ft-filter__button .ft-icon--open{transform:rotate(90deg)}.ft-filter__button-group .ft-filter__button{border-radius:0}.ft-filter__button-group .ft-filter__button:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-right:0}.ft-filter__button-group .ft-filter__button:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ft-filter__input{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.25rem;padding:.25rem;transition:box-shadow .2s}.ft-filter__input:hover{border-color:var(--focus-color)}.ft-filter__input:focus{outline:none;border-color:var(--focus-color);box-shadow:0 0 0 2px rgba(var(--focus-color-rgb),.2)}.ft-filter select.ft-filter__input{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right .5rem center;background-size:.625rem;padding-right:1.5rem;-webkit-appearance:none;appearance:none}@keyframes slide-right{0%{margin-left:calc(-40px + .5rem)}to{margin-left:0}}\n"] }]
@@ -811,10 +811,10 @@ class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ListComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ListComponent, selector: "ft-list", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", iconPath: "iconPath", labelField: "labelField", items: "items", class: "class" }, outputs: { change: "change" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n    <ng-container *ngSwitchCase=\"'collapsible'\">\n      <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'header'\">\n      <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n  <ng-container [ngSwitch]=\"getComponentType(item)\">\n    <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-list__item\" [ngClass]=\"item.class\"\n      (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </button>\n    <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-active\" matRipple class=\"ft-list__item\"\n      [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </a>\n  </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n  <button type=\"button\" matRipple class=\"ft-collapsible-header ft-list__item\"\n    [ngClass]=\"{ 'ft-show': item.metadata?.show }\" (click)=\"toggleCollapsible(item)\">\n    <div class=\"ft-item\">\n      <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n        [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n      <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n      <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n    </div>\n  </button>\n  <div class=\"ft-collapsible\" [ngClass]=\"{ 'ft-show': item.metadata?.show }\" *ngIf=\"item.children\">\n    <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n  <div class=\"ft-header\" [ngClass]=\"item.class\">\n    {{ item[labelField] }}\n  </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n  <div class=\"ft-item\">\n    <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n      [path]=\"iconPath\"></ft-icon>\n    <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n  </div>\n</ng-template>", styles: [".ft-list{display:block;overflow:auto}.ft-list__item{border:0;box-sizing:border-box;color:var(--ft-text-color);background-color:var(--ft-background-color);cursor:pointer;display:flex;outline:none;transition:background-color .3s,color .3s;text-align:left;padding:.75rem 1.5rem;width:100%}.ft-list__item:hover{text-decoration:none}.ft-list__item:hover:not(.active){--ft-background-color: var(--ft-background-color-hover);--ft-text-color: var(--text-color-hover)}.ft-list__item.ft-active,.ft-list__item:active{--ft-background-color: var(--ft-background-color-active);--ft-text-color: var(--ft-text-color-active)}.ft-list__item .ft-item{max-width:100%;display:flex;align-items:center;gap:.25rem}.ft-list__item .ft-item__icon{font-size:1.5rem}.ft-list__item .ft-item__icon+.ft-item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ft-list__item .ft-item__icon,.ft-list__item .ft-item__label{transition:margin-left .3s}.ft-list__item .ft-item__toggle{transition:transform .2s}.ft-list__item .ft-item__label{flex-grow:1}.ft-collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh}.ft-collapsible-header{font-weight:500}.ft-collapsible-header>div{display:flex;align-items:center;flex-grow:1}.ft-collapsible-header.ft-show .ft-item__toggle{transform:rotate(90deg)}.ft-collapsible:not(.ft-show){max-height:0;background-color:transparent}.ft-header{text-transform:uppercase;font-weight:700;padding:.75rem 1.5rem .25rem;font-size:.75rem;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ListComponent, selector: "ft-list", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", iconPath: "iconPath", labelField: "labelField", items: "items", class: "class" }, outputs: { change: "change" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n    <ng-container *ngSwitchCase=\"'collapsible'\">\n      <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'header'\">\n      <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n  <ng-container [ngSwitch]=\"getComponentType(item)\">\n    <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-button ft-list__item\" [ngClass]=\"item.class\"\n      (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </button>\n    <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-list__item--active\" matRipple class=\"ft-button ft-list__item\"\n      [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </a>\n  </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n  <button type=\"button\" matRipple class=\"ft-button ft-list__item ft-list__item--header\"\n    [ngClass]=\"{ 'ft-list__item--show': item.metadata?.show }\" (click)=\"toggleCollapsible(item)\">\n    <div class=\"ft-item\">\n      <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n        [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n      <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n      <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n    </div>\n  </button>\n  <div class=\"ft-list__collapsible\" [ngClass]=\"{ 'ft-collapsible--show': item.metadata?.show }\" *ngIf=\"item.children\">\n    <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n  <div class=\"ft-list__header\" [ngClass]=\"item.class\">\n    {{ item[labelField] }}\n  </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n  <div class=\"ft-item\">\n    <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n      [path]=\"iconPath\"></ft-icon>\n    <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n  </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "size", "src", "class"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-list', template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n    <ng-container *ngSwitchCase=\"'collapsible'\">\n      <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'header'\">\n      <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n  <ng-container [ngSwitch]=\"getComponentType(item)\">\n    <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-list__item\" [ngClass]=\"item.class\"\n      (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </button>\n    <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-active\" matRipple class=\"ft-list__item\"\n      [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </a>\n  </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n  <button type=\"button\" matRipple class=\"ft-collapsible-header ft-list__item\"\n    [ngClass]=\"{ 'ft-show': item.metadata?.show }\" (click)=\"toggleCollapsible(item)\">\n    <div class=\"ft-item\">\n      <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n        [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n      <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n      <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n    </div>\n  </button>\n  <div class=\"ft-collapsible\" [ngClass]=\"{ 'ft-show': item.metadata?.show }\" *ngIf=\"item.children\">\n    <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n  <div class=\"ft-header\" [ngClass]=\"item.class\">\n    {{ item[labelField] }}\n  </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n  <div class=\"ft-item\">\n    <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n      [path]=\"iconPath\"></ft-icon>\n    <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n  </div>\n</ng-template>", styles: [".ft-list{display:block;overflow:auto}.ft-list__item{border:0;box-sizing:border-box;color:var(--ft-text-color);background-color:var(--ft-background-color);cursor:pointer;display:flex;outline:none;transition:background-color .3s,color .3s;text-align:left;padding:.75rem 1.5rem;width:100%}.ft-list__item:hover{text-decoration:none}.ft-list__item:hover:not(.active){--ft-background-color: var(--ft-background-color-hover);--ft-text-color: var(--text-color-hover)}.ft-list__item.ft-active,.ft-list__item:active{--ft-background-color: var(--ft-background-color-active);--ft-text-color: var(--ft-text-color-active)}.ft-list__item .ft-item{max-width:100%;display:flex;align-items:center;gap:.25rem}.ft-list__item .ft-item__icon{font-size:1.5rem}.ft-list__item .ft-item__icon+.ft-item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ft-list__item .ft-item__icon,.ft-list__item .ft-item__label{transition:margin-left .3s}.ft-list__item .ft-item__toggle{transition:transform .2s}.ft-list__item .ft-item__label{flex-grow:1}.ft-collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh}.ft-collapsible-header{font-weight:500}.ft-collapsible-header>div{display:flex;align-items:center;flex-grow:1}.ft-collapsible-header.ft-show .ft-item__toggle{transform:rotate(90deg)}.ft-collapsible:not(.ft-show){max-height:0;background-color:transparent}.ft-header{text-transform:uppercase;font-weight:700;padding:.75rem 1.5rem .25rem;font-size:.75rem;opacity:.3}\n"] }]
+            args: [{ selector: 'ft-list', template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n    <ng-container *ngSwitchCase=\"'collapsible'\">\n      <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'header'\">\n      <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n  <ng-container [ngSwitch]=\"getComponentType(item)\">\n    <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-button ft-list__item\" [ngClass]=\"item.class\"\n      (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </button>\n    <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-list__item--active\" matRipple class=\"ft-button ft-list__item\"\n      [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n      <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n    </a>\n  </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n  <button type=\"button\" matRipple class=\"ft-button ft-list__item ft-list__item--header\"\n    [ngClass]=\"{ 'ft-list__item--show': item.metadata?.show }\" (click)=\"toggleCollapsible(item)\">\n    <div class=\"ft-item\">\n      <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n        [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n      <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n      <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n    </div>\n  </button>\n  <div class=\"ft-list__collapsible\" [ngClass]=\"{ 'ft-collapsible--show': item.metadata?.show }\" *ngIf=\"item.children\">\n    <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n  <div class=\"ft-list__header\" [ngClass]=\"item.class\">\n    {{ item[labelField] }}\n  </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n  <div class=\"ft-item\">\n    <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n      [path]=\"iconPath\"></ft-icon>\n    <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n  </div>\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { change: [{
                 type: Output
             }], iconCollection: [{
@@ -878,7 +878,7 @@ class NavbarComponent {
     }
 }
 NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: NavbarComponent, selector: "ft-navbar", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", labelField: "labelField", labelPlacement: "labelPlacement", items: "items", position: "position", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n    <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n        <ng-container *ngTemplateOutlet=\"actionTemplate; context: { item: item }\"></ng-container>\n    </ng-container>\n</div>\n<ng-content select=\"[ftEnd]\"></ng-content>\n<ng-template #actionTemplate let-item=\"item\">\n    <ng-container [ngSwitch]=\"getComponentType(item)\">\n        <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\"\n            [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n            <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n        </button>\n        <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\"\n            [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n            <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n        </a>\n    </ng-container>\n</ng-template>\n<ng-template #textTemplate let-item=\"item\">\n    <div class=\"item\">\n        <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n            [collection]=\"iconCollection\" [title]=\"labelPlacement === 'none' ? item[labelField] : '' \"></ft-icon>\n        <div class=\"item__label\" *ngIf=\"labelPlacement !== 'none'\">{{ item[labelField] }}</div>\n    </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: NavbarComponent, selector: "ft-navbar", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", labelField: "labelField", labelPlacement: "labelPlacement", items: "items", position: "position", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n    <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n        <ng-container *ngTemplateOutlet=\"actionTemplate; context: { item: item }\"></ng-container>\n    </ng-container>\n</div>\n<ng-content select=\"[ftEnd]\"></ng-content>\n<ng-template #actionTemplate let-item=\"item\">\n    <ng-container [ngSwitch]=\"getComponentType(item)\">\n        <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\"\n            [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n            <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n        </button>\n        <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\"\n            [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n            <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n        </a>\n    </ng-container>\n</ng-template>\n<ng-template #textTemplate let-item=\"item\">\n    <div class=\"item\">\n        <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n            [collection]=\"iconCollection\" [title]=\"labelPlacement === 'none' ? item[labelField] : '' \"></ft-icon>\n        <div class=\"item__label\" *ngIf=\"labelPlacement !== 'none'\">{{ item[labelField] }}</div>\n    </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "size", "src", "class"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ft-navbar', template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n    <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n        <ng-container *ngTemplateOutlet=\"actionTemplate; context: { item: item }\"></ng-container>\n    </ng-container>\n</div>\n<ng-content select=\"[ftEnd]\"></ng-content>\n<ng-template #actionTemplate let-item=\"item\">\n    <ng-container [ngSwitch]=\"getComponentType(item)\">\n        <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\"\n            [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n            <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n        </button>\n        <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\"\n            [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n            <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n        </a>\n    </ng-container>\n</ng-template>\n<ng-template #textTemplate let-item=\"item\">\n    <div class=\"item\">\n        <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n            [collection]=\"iconCollection\" [title]=\"labelPlacement === 'none' ? item[labelField] : '' \"></ft-icon>\n        <div class=\"item__label\" *ngIf=\"labelPlacement !== 'none'\">{{ item[labelField] }}</div>\n    </div>\n</ng-template>" }]
@@ -965,7 +965,7 @@ class SearchboxComponent {
     }
 }
 SearchboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SearchboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: SearchboxComponent, selector: "ft-searchbox", inputs: { placeholder: "placeholder", class: "class", show: "show", value: "value" }, outputs: { execute: "execute", showChange: "showChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputPlaceholder", first: true, predicate: ["inputPlaceholder"], descendants: true }], ngImport: i0, template: "<form (submit)=\"onSearch($event)\" class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n    <div class=\"d-flex align-items-center\">\n        <button type=\"button\" mat-icon-button class=\"p-2 mr-2\" (click)=\"closeSearch()\">\n            <ft-icon name=\"arrow-left\" size=\"2\"></ft-icon>\n        </button>\n        <input #input type=\"search\" matInput class=\"flex-grow-1\" i18n-placeholder placeholder=\"Search criteria\"\n            [disabled]=\"disabled\" (change)=\"updateValue($event)\" (keyup)=\"updateValue($event)\" *ngIf=\"!placeholder\" />\n        <input #inputPlaceholder type=\"search\" matInput class=\"flex-grow-1\" [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\" (change)=\"updateValue($event)\" (keyup)=\"updateValue($event)\" *ngIf=\"placeholder\" />\n        <button type=\"submit\" mat-icon-button class=\"p-2 ml-2\">\n            <ft-icon name=\"search\" size=\"2\"></ft-icon>\n        </button>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+SearchboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: SearchboxComponent, selector: "ft-searchbox", inputs: { placeholder: "placeholder", class: "class", show: "show", value: "value" }, outputs: { execute: "execute", showChange: "showChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputPlaceholder", first: true, predicate: ["inputPlaceholder"], descendants: true }], ngImport: i0, template: "<form (submit)=\"onSearch($event)\" class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n    <div class=\"d-flex align-items-center\">\n        <button type=\"button\" mat-icon-button class=\"p-2 mr-2\" (click)=\"closeSearch()\">\n            <ft-icon name=\"arrow-left\" size=\"2\"></ft-icon>\n        </button>\n        <input #input type=\"search\" matInput class=\"flex-grow-1\" i18n-placeholder placeholder=\"Search criteria\"\n            [disabled]=\"disabled\" (change)=\"updateValue($event)\" (keyup)=\"updateValue($event)\" *ngIf=\"!placeholder\" />\n        <input #inputPlaceholder type=\"search\" matInput class=\"flex-grow-1\" [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\" (change)=\"updateValue($event)\" (keyup)=\"updateValue($event)\" *ngIf=\"placeholder\" />\n        <button type=\"submit\" mat-icon-button class=\"p-2 ml-2\">\n            <ft-icon name=\"search\" size=\"2\"></ft-icon>\n        </button>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "size", "src", "class"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SearchboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ft-searchbox', template: "<form (submit)=\"onSearch($event)\" class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n    <div class=\"d-flex align-items-center\">\n        <button type=\"button\" mat-icon-button class=\"p-2 mr-2\" (click)=\"closeSearch()\">\n            <ft-icon name=\"arrow-left\" size=\"2\"></ft-icon>\n        </button>\n        <input #input type=\"search\" matInput class=\"flex-grow-1\" i18n-placeholder placeholder=\"Search criteria\"\n            [disabled]=\"disabled\" (change)=\"updateValue($event)\" (keyup)=\"updateValue($event)\" *ngIf=\"!placeholder\" />\n        <input #inputPlaceholder type=\"search\" matInput class=\"flex-grow-1\" [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\" (change)=\"updateValue($event)\" (keyup)=\"updateValue($event)\" *ngIf=\"placeholder\" />\n        <button type=\"submit\" mat-icon-button class=\"p-2 ml-2\">\n            <ft-icon name=\"search\" size=\"2\"></ft-icon>\n        </button>\n    </div>\n</form>" }]
@@ -1019,7 +1019,7 @@ class ToolbarComponent {
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ToolbarComponent, selector: "ft-toolbar", inputs: { actionOptions: "actionOptions", currentTitleOption: "currentTitleOption", title: "title", titleOptions: "titleOptions", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div (ftObserveIntersecting)=\"setOverlapped($event)\" [ftObserveIntersectingOptions]=\"rootMargin\"></div>\n<div class=\"content\">\n    <div class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n        <div class=\"d-flex align-items-center\">\n            <h5 class=\"title ml-2 ml-md-0 mb-0 mr-auto\" *ngIf=\"!titleOptions; else titleForm\">{{ title }}</h5>\n            <ng-container *ngFor=\"let option of actionOptions\">\n                <button type=\"button\" class=\"p-2\" mat-button [ngClass]=\"option.class || ''\" *ngIf=\"!option.children\"\n                    (click)=\"option.click ? option.click($event) : null\" title=\"{{ option.label }}\">\n                    <div class=\"d-flex align-items-center\">\n                        <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n                        <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}</div>\n                    </div>\n                </button>\n                <ng-container *ngIf=\"option.children\">\n                    <button type=\"button\" class=\"p-2\" mat-button [matMenuTriggerFor]=\"menu\"\n                        [ngClass]=\"option.class || ''\" title=\"{{ option.label }}\">\n                        <div class=\"d-flex align-items-center\">\n                            <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n                            <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}\n                            </div>\n                        </div>\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <button mat-menu-item *ngFor=\"let childOption of option.children\"\n                            (click)=\"childOption.click ? childOption.click($event): null\">{{ childOption.label\n                            }}</button>\n                    </mat-menu>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<ng-template #titleForm>\n    <button type=\"button\" class=\"title p-2 pl-3 mr-auto\" mat-button [matMenuTriggerFor]=\"titleMenu\">\n        <div class=\"d-flex align-items-center\">\n            <div class=\"label mr-1\">{{ currentTitleOption.label }}</div>\n            <ft-icon name=\"angle-down\" size=\"1\"></ft-icon>\n        </div>\n    </button>\n    <mat-menu #titleMenu=\"matMenu\">\n        <button class=\"mr-4\" mat-menu-item [disabled]=\"option == currentTitleOption\" *ngFor=\"let option of titleOptions\"\n            (click)=\"currentTitleOption = option; option.click ? option.click($event) : null\">\n            <div class=\"d-flex align-items-center\">\n                <ft-icon [name]=\"option == currentTitleOption? 'check' : ''\" class=\"mr-1\"></ft-icon>\n                <div>{{ option.label }}</div>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: ObserveIntersectingDirective, selector: "[ftObserveIntersecting]", inputs: ["ftObserveIntersectingOptions"], outputs: ["ftObserveIntersecting"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ToolbarComponent, selector: "ft-toolbar", inputs: { actionOptions: "actionOptions", currentTitleOption: "currentTitleOption", title: "title", titleOptions: "titleOptions", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div (ftObserveIntersecting)=\"setOverlapped($event)\" [ftObserveIntersectingOptions]=\"rootMargin\"></div>\n<div class=\"content\">\n    <div class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n        <div class=\"d-flex align-items-center\">\n            <h5 class=\"title ml-2 ml-md-0 mb-0 mr-auto\" *ngIf=\"!titleOptions; else titleForm\">{{ title }}</h5>\n            <ng-container *ngFor=\"let option of actionOptions\">\n                <button type=\"button\" class=\"p-2\" mat-button [ngClass]=\"option.class || ''\" *ngIf=\"!option.children\"\n                    (click)=\"option.click ? option.click($event) : null\" title=\"{{ option.label }}\">\n                    <div class=\"d-flex align-items-center\">\n                        <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n                        <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}</div>\n                    </div>\n                </button>\n                <ng-container *ngIf=\"option.children\">\n                    <button type=\"button\" class=\"p-2\" mat-button [matMenuTriggerFor]=\"menu\"\n                        [ngClass]=\"option.class || ''\" title=\"{{ option.label }}\">\n                        <div class=\"d-flex align-items-center\">\n                            <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n                            <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}\n                            </div>\n                        </div>\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <button mat-menu-item *ngFor=\"let childOption of option.children\"\n                            (click)=\"childOption.click ? childOption.click($event): null\">{{ childOption.label\n                            }}</button>\n                    </mat-menu>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<ng-template #titleForm>\n    <button type=\"button\" class=\"title p-2 pl-3 mr-auto\" mat-button [matMenuTriggerFor]=\"titleMenu\">\n        <div class=\"d-flex align-items-center\">\n            <div class=\"label mr-1\">{{ currentTitleOption.label }}</div>\n            <ft-icon name=\"angle-down\" size=\"1\"></ft-icon>\n        </div>\n    </button>\n    <mat-menu #titleMenu=\"matMenu\">\n        <button class=\"mr-4\" mat-menu-item [disabled]=\"option == currentTitleOption\" *ngFor=\"let option of titleOptions\"\n            (click)=\"currentTitleOption = option; option.click ? option.click($event) : null\">\n            <div class=\"d-flex align-items-center\">\n                <ft-icon [name]=\"option == currentTitleOption? 'check' : ''\" class=\"mr-1\"></ft-icon>\n                <div>{{ option.label }}</div>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "size", "src", "class"] }, { kind: "directive", type: ObserveIntersectingDirective, selector: "[ftObserveIntersecting]", inputs: ["ftObserveIntersectingOptions"], outputs: ["ftObserveIntersecting"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ft-toolbar', template: "<div (ftObserveIntersecting)=\"setOverlapped($event)\" [ftObserveIntersectingOptions]=\"rootMargin\"></div>\n<div class=\"content\">\n    <div class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n        <div class=\"d-flex align-items-center\">\n            <h5 class=\"title ml-2 ml-md-0 mb-0 mr-auto\" *ngIf=\"!titleOptions; else titleForm\">{{ title }}</h5>\n            <ng-container *ngFor=\"let option of actionOptions\">\n                <button type=\"button\" class=\"p-2\" mat-button [ngClass]=\"option.class || ''\" *ngIf=\"!option.children\"\n                    (click)=\"option.click ? option.click($event) : null\" title=\"{{ option.label }}\">\n                    <div class=\"d-flex align-items-center\">\n                        <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n                        <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}</div>\n                    </div>\n                </button>\n                <ng-container *ngIf=\"option.children\">\n                    <button type=\"button\" class=\"p-2\" mat-button [matMenuTriggerFor]=\"menu\"\n                        [ngClass]=\"option.class || ''\" title=\"{{ option.label }}\">\n                        <div class=\"d-flex align-items-center\">\n                            <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n                            <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}\n                            </div>\n                        </div>\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <button mat-menu-item *ngFor=\"let childOption of option.children\"\n                            (click)=\"childOption.click ? childOption.click($event): null\">{{ childOption.label\n                            }}</button>\n                    </mat-menu>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<ng-template #titleForm>\n    <button type=\"button\" class=\"title p-2 pl-3 mr-auto\" mat-button [matMenuTriggerFor]=\"titleMenu\">\n        <div class=\"d-flex align-items-center\">\n            <div class=\"label mr-1\">{{ currentTitleOption.label }}</div>\n            <ft-icon name=\"angle-down\" size=\"1\"></ft-icon>\n        </div>\n    </button>\n    <mat-menu #titleMenu=\"matMenu\">\n        <button class=\"mr-4\" mat-menu-item [disabled]=\"option == currentTitleOption\" *ngFor=\"let option of titleOptions\"\n            (click)=\"currentTitleOption = option; option.click ? option.click($event) : null\">\n            <div class=\"d-flex align-items-center\">\n                <ft-icon [name]=\"option == currentTitleOption? 'check' : ''\" class=\"mr-1\"></ft-icon>\n                <div>{{ option.label }}</div>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>" }]