@factor_ec/ui 1.0.13 → 1.0.17

package/fesm2020/factor_ec-ui.mjs

@@ -0,0 +1,993 @@
+import * as i0 from '@angular/core';
+import { Component, Input, HostBinding, Inject, EventEmitter, Output, Injectable, ApplicationRef, PLATFORM_ID, Directive, NgModule, forwardRef, ViewChild } from '@angular/core';
+import * as i1 from '@factor_ec/utils';
+import * as i1$1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1$2 from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i3 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { ReplaySubject } from 'rxjs';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1$3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+
+class AvatarComponent {
+    constructor(colorService) {
+        this.colorService = colorService;
+        this.class = '';
+    }
+    set src(value) {
+        if (value && value.trim() != '') {
+            this._src = value;
+            let image = new Image();
+            image.src = value;
+            image.onload = () => {
+                if ("decode" in image) {
+                    image.decode().then(() => {
+                        this.loaded = true;
+                    });
+                }
+                else {
+                    console.error('Image.decode not available.');
+                }
+            };
+        }
+    }
+    set label(value) {
+        this._label = value;
+        this.initials = this.getInitials(value);
+    }
+    get backgroundColor() {
+        return this.color || this.colorService.hex(this._label);
+    }
+    get backgroundImage() {
+        return this._src ? `url(${this._src})` : '';
+    }
+    get hostClasses() {
+        return [
+            'ft-avatar',
+            this.class
+        ].join(' ');
+    }
+    ngOnInit() {
+    }
+    getInitials(value) {
+        let allInitials = value.match(/\b\w/g) || [];
+        let initials = ((allInitials.shift() || '') + (allInitials.pop() || '')).toUpperCase();
+        return initials;
+    }
+}
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.ColorService }], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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>\n", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ft-avatar', template: "<div *ngIf=\"!loaded\">{{ initials }}</div>\n", 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"] }]
+        }], ctorParameters: function () { return [{ type: i1.ColorService }]; }, propDecorators: { color: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], backgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], backgroundImage: [{
+                type: HostBinding,
+                args: ['style.background-image']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class IconComponent {
+    constructor(configuration) {
+        this.configuration = configuration;
+        this.class = '';
+    }
+    set collection(collection) {
+        this._collection = collection;
+        this.update();
+    }
+    set mode(mode) {
+        this._mode = mode;
+        this.update();
+    }
+    set name(name) {
+        this._name = name;
+        this.update();
+    }
+    set path(path) {
+        this._path = path;
+        this.update();
+    }
+    get hostClasses() {
+        return [
+            'ft-icon',
+            this.class
+        ].join(' ');
+    }
+    ngOnInit() {
+        this.update();
+    }
+    update() {
+        // Set the default collection if the mode is external
+        if (!this._collection) {
+            if (this.configuration.icon && this.configuration.icon.collection) {
+                this._collection = this.configuration.icon.collection;
+            }
+            else if (this._mode === 'external') {
+                this._collection = 'icons';
+            }
+        }
+        if (!this._mode) {
+            if (this.configuration.icon && this.configuration.icon.mode) {
+                this._mode = this.configuration.icon.mode;
+            }
+            else {
+                this._mode = 'external';
+            }
+        }
+        if (this._mode === 'external') {
+            // If the icon mode is external
+            if (!this._path) {
+                if (this.configuration.icon && this.configuration.icon.path) {
+                    this._path = this.configuration.icon.path;
+                }
+                else {
+                    this._path = 'assets';
+                }
+            }
+            this.url = `${this._path}/${this._collection}.svg#${this._name}`;
+        }
+        else {
+            // If the icon mode is inline
+            const name = this._collection && this._collection !== 'unset' ? `${this._collection}--${this._name}` : this._name;
+            this.url = `#${name}`;
+        }
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IconComponent, deps: [{ token: 'FactorUiConfiguration' }], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['FactorUiConfiguration']
+                }] }]; }, propDecorators: { class: [{
+                type: Input
+            }], collection: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], path: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ImageComponent {
+    constructor(element) {
+        this.element = element;
+        this.class = '';
+        this.loading = false;
+        this.shown = false;
+    }
+    ngOnInit() {
+        if ("IntersectionObserver" in window) {
+            let elementObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        let image = new Image();
+                        image.src = this.src;
+                        setTimeout(() => {
+                            if (!this.shown && !this.error) {
+                                this.loading = true;
+                            }
+                        }, 100);
+                        image.onerror = () => {
+                            this.error = true;
+                            this.loading = false;
+                        };
+                        image.onload = () => {
+                            if ("decode" in image) {
+                                image.decode().then(() => {
+                                    this.loading = false;
+                                    this.shown = true;
+                                });
+                            }
+                            else {
+                                this.loading = false;
+                                this.shown = true;
+                            }
+                        };
+                        elementObserver.unobserve(this.element.nativeElement);
+                    }
+                });
+            }, {
+                rootMargin: "0px 0px 200px 0px"
+            });
+            elementObserver.observe(this.element.nativeElement);
+        }
+        else {
+            console.error('IntersectionObserver not available.');
+            this.loading = false;
+            this.shown = true;
+        }
+    }
+    get hostClasses() {
+        return [
+            'ft-image',
+            this.class
+        ].join(' ');
+    }
+}
+ImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { class: [{
+                type: Input
+            }], error: [{
+                type: HostBinding,
+                args: ['class.ft-image--error']
+            }], loading: [{
+                type: HostBinding,
+                args: ['class.ft-image--loading']
+            }], src: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ContentComponent {
+    constructor(data) {
+        this.data = data;
+    }
+}
+ContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ContentComponent, deps: [{ token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ContentComponent, selector: "lib-content", ngImport: i0, template: "<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>", styles: [""], dependencies: [{ 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]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-content', template: "<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>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }]; } });
+
+class MessageComponent {
+    constructor(data) {
+        this.data = data;
+        this.beforeSelect = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    select(value) {
+        this.beforeSelect.emit(value);
+    }
+}
+MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; }, propDecorators: { beforeSelect: [{
+                type: Output
+            }] } });
+
+class MessageService {
+    constructor(snackBar, dialog) {
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+    }
+    show(message, options) {
+        let selectionSource = new ReplaySubject(undefined);
+        let selection = selectionSource.asObservable();
+        const defaults = {
+            type: 'notification',
+            duration: 2000,
+            actionsVisible: true
+        };
+        options = Object.assign(defaults, options);
+        const data = { message: typeof message === 'string' ? { content: message, type: 'text' } : message, options };
+        switch (options.type) {
+            default:
+            case 'notification':
+                this.snackBar.openFromComponent(ContentComponent, {
+                    data,
+                    panelClass: ['ft-message', 'ft-message--notification'],
+                    duration: options.duration || 2000,
+                });
+                break;
+            case 'modal':
+                const dialogRef = this.dialog.open(MessageComponent, {
+                    width: options.width || '350px',
+                    data,
+                    panelClass: ['ft-message', 'ft-message--modal'],
+                    autoFocus: false,
+                    disableClose: true
+                });
+                dialogRef.componentInstance.beforeSelect.subscribe(response => {
+                    selectionSource.next(response);
+                    dialogRef.close();
+                });
+                this.snackBar.dismiss();
+                break;
+        }
+        return selection;
+    }
+}
+MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageService, deps: [{ token: i1$2.MatSnackBar }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatSnackBar }, { type: i3.MatDialog }]; } });
+
+class ProgressComponent {
+    constructor() {
+        this.class = '';
+        this.mode = 'indeterminate';
+        this.overlay = false;
+    }
+    ngOnInit() {
+        this.value = 0;
+    }
+    get hostClasses() {
+        return [
+            'ft-progress',
+            this.overlay ? 'ft-progress--overlay' : '',
+            this.class
+        ].join(' ');
+    }
+}
+ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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\" preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"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);top:0;left:0;right:0;bottom: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 .track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .bar.indeterminate{animation:progress-rotation 2s infinite linear}svg .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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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\" preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"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);top:0;left:0;right:0;bottom: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 .track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .bar.indeterminate{animation:progress-rotation 2s infinite linear}svg .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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ProgressService {
+    constructor(componentFactoryResolver, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+    }
+    show() {
+        if (!this.componentRef) {
+            this.appRef = this.injector.get(ApplicationRef);
+            // 1. Create a component reference from the component 
+            this.componentRef = this.componentFactoryResolver
+                .resolveComponentFactory(ProgressComponent)
+                .create(this.injector);
+            // 2. Attach component to the appRef so that it's inside the ng component tree
+            this.appRef.attachView(this.componentRef.hostView);
+            this.componentRef.instance.overlay = true;
+            // 3. Get DOM element from component
+            const domElem = this.componentRef.hostView
+                .rootNodes[0];
+            // 4. Append DOM element to the body
+            document.body.appendChild(domElem);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    hide() {
+        if (this.componentRef) {
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+}
+ProgressService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+ProgressService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; } });
+
+class ObserveIntersectingDirective {
+    constructor(element, platformId) {
+        this.element = element;
+        this.platformId = platformId;
+        this.event = new EventEmitter();
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            if ("IntersectionObserver" in window) {
+                const elementObserver = new IntersectionObserver((entries, observer) => {
+                    entries.forEach((entry) => {
+                        this.event.emit(entry.isIntersecting);
+                    });
+                }, this.options);
+                elementObserver.observe(this.element.nativeElement);
+            }
+            else {
+                console.error('ftObserveIntersecting not available in this browser.');
+            }
+        }
+    }
+}
+ObserveIntersectingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ObserveIntersectingDirective, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
+ObserveIntersectingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ObserveIntersectingDirective, selector: "[ftObserveIntersecting]", inputs: { options: ["ftObserveIntersectingOptions", "options"] }, outputs: { event: "ftObserveIntersecting" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ObserveIntersectingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ftObserveIntersecting]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['ftObserveIntersectingOptions']
+            }], event: [{
+                type: Output,
+                args: ['ftObserveIntersecting']
+            }] } });
+
+class DisplayModule {
+}
+DisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, declarations: [AvatarComponent,
+        IconComponent,
+        ImageComponent,
+        ProgressComponent,
+        ObserveIntersectingDirective,
+        MessageComponent,
+        ContentComponent], imports: [CommonModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatSnackBarModule], exports: [AvatarComponent,
+        IconComponent,
+        ImageComponent,
+        ProgressComponent,
+        ObserveIntersectingDirective,
+        MessageComponent,
+        ContentComponent] });
+DisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, imports: [CommonModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatSnackBarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AvatarComponent,
+                        IconComponent,
+                        ImageComponent,
+                        ProgressComponent,
+                        ObserveIntersectingDirective,
+                        MessageComponent,
+                        ContentComponent
+                    ],
+                    exports: [
+                        AvatarComponent,
+                        IconComponent,
+                        ImageComponent,
+                        ProgressComponent,
+                        ObserveIntersectingDirective,
+                        MessageComponent,
+                        ContentComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatSnackBarModule
+                    ]
+                }]
+        }] });
+
+class RatingComponent {
+    constructor() {
+        this.disabled = false;
+        this.propagateChange = (_) => { };
+        this.readOnly = false;
+        this.stars = [
+            { value: 1 },
+            { value: 2 },
+            { value: 3 },
+            { value: 4 },
+            { value: 5 }
+        ];
+    }
+    ngOnInit() {
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.propagateChange(this._value);
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        //this.propagateChange = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    setRate(value, isHover) {
+        if (isHover) {
+            this.hoverValue = value;
+        }
+        else {
+            this.value = value;
+        }
+    }
+    updateValue(event) {
+        this.value = event.target.value;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+}
+RatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: RatingComponent, selector: "ft-rating", inputs: { readOnly: "readOnly", value: "value" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RatingComponent),
+            multi: true
+        }
+    ], 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\" (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\" (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 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>\n", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ft-rating', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RatingComponent),
+                            multi: true
+                        }
+                    ], 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\" (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\" (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 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>\n", 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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { readOnly: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class InputsModule {
+}
+InputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, declarations: [RatingComponent], imports: [CommonModule], exports: [RatingComponent] });
+InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        RatingComponent
+                    ],
+                    exports: [
+                        RatingComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class ListComponent {
+    constructor(router) {
+        this.router = router;
+        this.change = new EventEmitter();
+        this.iconNameField = 'iconName';
+        this.labelField = 'label';
+        this.class = '';
+    }
+    get hostClasses() {
+        return [
+            'ft-list',
+            this.class
+        ].join(' ');
+    }
+    ;
+    getComponentType(item) {
+        let type = 'text';
+        if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+            type = 'button';
+        }
+        else {
+            type = 'link';
+        }
+        return type;
+    }
+    setItem(item) {
+        if (item.url) {
+            if (item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+                window.location.href = item.url;
+            }
+        }
+        else if (item.click) {
+            item.click();
+        }
+    }
+    toggleCollapsible(action) {
+        action.metadata = action.metadata || {};
+        action.metadata.show = !action.metadata?.show;
+        this.change.emit(action);
+    }
+}
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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: [":host{--ft-background-color: var(--ft-background-color, #f8f9fa);--ft-background-color-hover: rgba(0, 0, 0, .03);--ft-background-color-active: rgba(var(--ft-primary-color-rgb), .1);--ft-text-color: #333;--ft-text-color-hover: var(--ft-primary-color);--ft-text-color-active: var(--ft-primary-color);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;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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: [":host{--ft-background-color: var(--ft-background-color, #f8f9fa);--ft-background-color-hover: rgba(0, 0, 0, .03);--ft-background-color-active: rgba(var(--ft-primary-color-rgb), .1);--ft-text-color: #333;--ft-text-color-hover: var(--ft-primary-color);--ft-text-color-active: var(--ft-primary-color);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;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.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"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { change: [{
+                type: Output
+            }], iconCollection: [{
+                type: Input
+            }], iconNameField: [{
+                type: Input
+            }], iconPath: [{
+                type: Input
+            }], labelField: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class NavbarComponent {
+    constructor(router) {
+        this.router = router;
+        this.iconNameField = 'iconName';
+        this.labelField = 'label';
+        this.labelPlacement = 'auto';
+        this.position = 'auto';
+        this.class = '';
+    }
+    get hostClasses() {
+        return [
+            'ft-navbar',
+            this.class,
+            this.position
+        ].join(' ');
+    }
+    ;
+    ngOnInit() { }
+    getComponentType(item) {
+        let type = 'text';
+        if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+            type = 'button';
+        }
+        else {
+            type = 'link';
+        }
+        return type;
+    }
+    setItem(item) {
+        if (item.url) {
+            if (item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+                window.location.href = item.url;
+            }
+        }
+        else if (item.click) {
+            item.click();
+        }
+    }
+    toggleCollapsible(action) {
+        action.metadata.show = !action.metadata.show;
+    }
+    trackByItem(index, item) {
+        return `${item.label} ${item.url}`;
+    }
+}
+NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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\" [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\" [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]\" [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>\n", styles: [":host{--min-width: 4rem;--min-height: 3.5rem;--background-color: #FFF;--background-color-hover: rgba(0, 0, 0, .1);--background-color-active: rgba(0, 0, 0, .1);--text-color: #333;--text-color-hover: #333;--text-color-active: #FFF;background-color:var(--background-color);position:fixed;transition:transform .3s ease-in-out,width .3s,color .3s,background-color .3s;z-index:var(--z-index, 990);font-size:.875rem;display:flex}@media (min-width: 576px){:host{--min-width: 13.75rem}}:host.left,:host.right{top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width)}:host.left{left:0}:host.right{right:0}:host.bottom,:host.top{left:0;right:0;min-height:var(--min-height)}:host.bottom .list,:host.top .list{display:flex}:host.bottom .list__item,:host.top .list__item{flex-grow:1;justify-content:center}:host.bottom{bottom:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f}:host.top{top:0;box-shadow:0 0 1px #00000024,0 1px 3px #0000001f}@media (min-width: 768px){:host.auto{left:0;top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width);flex-direction:column}}@media (max-width: 767.98px){:host.auto{bottom:0;left:0;right:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f;min-height:var(--min-height)}:host.auto .list{display:flex}}.list{display:block;flex-grow:1;overflow:auto}.list__item{border:0;box-sizing:border-box;color:var(--text-color);cursor:pointer;outline:none;transition:background-color .3s,color .3s;display:flex;align-items:center;padding:.75rem 1rem;width:100%}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){background:var(--hover-background-color);color:var(--hover-text-color)}.list__item.active{background:var(--active-background-color);color:var(--active-text-color)}.list__item.left{justify-content:flex-start}.list__item.left .item__icon{margin-right:.5rem}.list__item.right{justify-content:flex-end}.list__item.right .item{flex-direction:row-reverse}.list__item.right .item__icon{margin-left:.5rem}.list__item.top{justify-content:center;flex-grow:1;padding:.5rem}.list__item.top .item{flex-direction:column-reverse}.list__item.bottom{justify-content:center;flex-grow:1;padding:.5rem}.list__item.bottom .item{flex-direction:column}@media (min-width: 768px){.list__item.auto .item{flex-direction:row}.list__item.auto .item__icon{margin-right:.5rem}}@media (max-width: 767.98px){.list__item.auto{justify-content:center;flex-grow:1;padding:.5rem}.list__item.auto .item{flex-direction:column;font-size:.6875rem}}.list__item .item{display:flex;align-items:center}.list__item .item__icon{font-size:1.5rem}.list__item .item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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\" [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\" [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]\" [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>\n", styles: [":host{--min-width: 4rem;--min-height: 3.5rem;--background-color: #FFF;--background-color-hover: rgba(0, 0, 0, .1);--background-color-active: rgba(0, 0, 0, .1);--text-color: #333;--text-color-hover: #333;--text-color-active: #FFF;background-color:var(--background-color);position:fixed;transition:transform .3s ease-in-out,width .3s,color .3s,background-color .3s;z-index:var(--z-index, 990);font-size:.875rem;display:flex}@media (min-width: 576px){:host{--min-width: 13.75rem}}:host.left,:host.right{top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width)}:host.left{left:0}:host.right{right:0}:host.bottom,:host.top{left:0;right:0;min-height:var(--min-height)}:host.bottom .list,:host.top .list{display:flex}:host.bottom .list__item,:host.top .list__item{flex-grow:1;justify-content:center}:host.bottom{bottom:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f}:host.top{top:0;box-shadow:0 0 1px #00000024,0 1px 3px #0000001f}@media (min-width: 768px){:host.auto{left:0;top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width);flex-direction:column}}@media (max-width: 767.98px){:host.auto{bottom:0;left:0;right:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f;min-height:var(--min-height)}:host.auto .list{display:flex}}.list{display:block;flex-grow:1;overflow:auto}.list__item{border:0;box-sizing:border-box;color:var(--text-color);cursor:pointer;outline:none;transition:background-color .3s,color .3s;display:flex;align-items:center;padding:.75rem 1rem;width:100%}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){background:var(--hover-background-color);color:var(--hover-text-color)}.list__item.active{background:var(--active-background-color);color:var(--active-text-color)}.list__item.left{justify-content:flex-start}.list__item.left .item__icon{margin-right:.5rem}.list__item.right{justify-content:flex-end}.list__item.right .item{flex-direction:row-reverse}.list__item.right .item__icon{margin-left:.5rem}.list__item.top{justify-content:center;flex-grow:1;padding:.5rem}.list__item.top .item{flex-direction:column-reverse}.list__item.bottom{justify-content:center;flex-grow:1;padding:.5rem}.list__item.bottom .item{flex-direction:column}@media (min-width: 768px){.list__item.auto .item{flex-direction:row}.list__item.auto .item__icon{margin-right:.5rem}}@media (max-width: 767.98px){.list__item.auto{justify-content:center;flex-grow:1;padding:.5rem}.list__item.auto .item{flex-direction:column;font-size:.6875rem}}.list__item .item{display:flex;align-items:center}.list__item .item__icon{font-size:1.5rem}.list__item .item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { iconCollection: [{
+                type: Input
+            }], iconNameField: [{
+                type: Input
+            }], labelField: [{
+                type: Input
+            }], labelPlacement: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SearchboxComponent {
+    constructor() {
+        this.execute = new EventEmitter();
+        this.showChange = new EventEmitter();
+        this.class = '';
+        this.onChange = (_) => { };
+        this.onTouched = (_) => { };
+    }
+    get hostClasses() {
+        return [
+            'ft-searchbox',
+            this.class,
+            this.shown ? 'show' : ''
+        ].join(' ');
+    }
+    ;
+    set show(value) {
+        this.shown = value;
+        if (value) {
+            setTimeout(() => {
+                this.getNativeElement().focus();
+            }, 300);
+        }
+    }
+    set value(value) {
+        this._value = value || '';
+        this.getNativeElement().value = this._value;
+        this.onChange(this._value);
+        this.onTouched(this._value);
+    }
+    get value() {
+        return this._value;
+    }
+    ngOnInit() {
+    }
+    closeSearch() {
+        this.showChange.emit(false);
+    }
+    getNativeElement() {
+        const input = this.placeholder ? this.inputPlaceholder : this.input;
+        return input.nativeElement;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onSearch(event) {
+        event.preventDefault();
+        this.getNativeElement().value = '';
+        this.execute.emit(this._value);
+    }
+    updateValue(event) {
+        this.value = event.target.value;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+}
+SearchboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SearchboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SearchboxComponent, selector: "ft-searchbox", inputs: { placeholder: "placeholder", class: "class", show: "show", value: "value" }, outputs: { execute: "execute", showChange: "showChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SearchboxComponent),
+            multi: true
+        }
+    ], 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\n        #input\n        type=\"search\"\n        matInput\n        class=\"flex-grow-1\"\n        i18n-placeholder\n        placeholder=\"Search criteria\"\n        [disabled]=\"disabled\"\n        (change)=\"updateValue($event)\"\n        (keyup)=\"updateValue($event)\"\n        *ngIf=\"!placeholder\"\n      />\n      <input\n        #inputPlaceholder\n        type=\"search\"\n        matInput\n        class=\"flex-grow-1\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        (change)=\"updateValue($event)\"\n        (keyup)=\"updateValue($event)\"\n        *ngIf=\"placeholder\"\n      />\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>\n  ", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);display:block;transition:background-color .2s,box-shadow .2s;position:sticky;top:-1px;margin-top:-3.5rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}:host.show{opacity:1;visibility:visible}@media (min-width: 576px){:host{margin-top:-4.5rem}}@media (min-width: 768px){:host{top:-2rem;margin-top:-6.5rem}}:host button{min-width:0;line-height:inherit}:host input{border:0;background-color:transparent}:host input:focus{outline:none}\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"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SearchboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ft-searchbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SearchboxComponent),
+                            multi: true
+                        }
+                    ], 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\n        #input\n        type=\"search\"\n        matInput\n        class=\"flex-grow-1\"\n        i18n-placeholder\n        placeholder=\"Search criteria\"\n        [disabled]=\"disabled\"\n        (change)=\"updateValue($event)\"\n        (keyup)=\"updateValue($event)\"\n        *ngIf=\"!placeholder\"\n      />\n      <input\n        #inputPlaceholder\n        type=\"search\"\n        matInput\n        class=\"flex-grow-1\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        (change)=\"updateValue($event)\"\n        (keyup)=\"updateValue($event)\"\n        *ngIf=\"placeholder\"\n      />\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>\n  ", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);display:block;transition:background-color .2s,box-shadow .2s;position:sticky;top:-1px;margin-top:-3.5rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}:host.show{opacity:1;visibility:visible}@media (min-width: 576px){:host{margin-top:-4.5rem}}@media (min-width: 768px){:host{top:-2rem;margin-top:-6.5rem}}:host button{min-width:0;line-height:inherit}:host input{border:0;background-color:transparent}:host input:focus{outline:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], inputPlaceholder: [{
+                type: ViewChild,
+                args: ['inputPlaceholder', { static: false }]
+            }], placeholder: [{
+                type: Input
+            }], execute: [{
+                type: Output
+            }], showChange: [{
+                type: Output
+            }], class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], show: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class ToolbarComponent {
+    constructor() {
+        this.rootMargin = { rootMargin: '0px 0px 0px 0px' };
+        this.class = '';
+        const breakpointSm = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm'));
+        if (window.innerWidth < breakpointSm) {
+            this.rootMargin = { rootMargin: '0px 0px 0px 0px' };
+        }
+    }
+    get hostClasses() {
+        return [
+            'ft-toolbar',
+            this.class,
+            this.overlapped ? 'overlapped' : ''
+        ].join(' ');
+    }
+    ;
+    ngOnInit() {
+        if (this.titleOptions && !this.currentTitleOption) {
+            this.currentTitleOption = this.titleOptions[0];
+        }
+    }
+    setOverlapped(overlapped) {
+        this.overlapped = !overlapped;
+    }
+}
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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\" (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\" [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 }}</div>\n            </div>\n          </button>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let childOption of option.children\" (click)=\"childOption.click ? childOption.click($event): null\">{{ childOption.label }}</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\" (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>\n", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);transition:background-color .2s,box-shadow .2s;display:block;position:sticky;top:-1px}:host.overlapped{box-shadow:0 0 1px #00000024,0 0 6px #0000001f}@media (min-width: 768px){:host{top:-2rem}}.content button{min-width:0}.content button .label{line-height:initial}.content .title{font-size:1.21rem;font-weight:500}\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: "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: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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\" (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\" [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 }}</div>\n            </div>\n          </button>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let childOption of option.children\" (click)=\"childOption.click ? childOption.click($event): null\">{{ childOption.label }}</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\" (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>\n", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);transition:background-color .2s,box-shadow .2s;display:block;position:sticky;top:-1px}:host.overlapped{box-shadow:0 0 1px #00000024,0 0 6px #0000001f}@media (min-width: 768px){:host{top:-2rem}}.content button{min-width:0}.content button .label{line-height:initial}.content .title{font-size:1.21rem;font-weight:500}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { actionOptions: [{
+                type: Input
+            }], currentTitleOption: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], titleOptions: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class NavigationModule {
+}
+NavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, declarations: [ListComponent,
+        NavbarComponent,
+        ToolbarComponent,
+        SearchboxComponent], imports: [CommonModule,
+        DisplayModule,
+        RouterModule,
+        MatMenuModule,
+        MatButtonModule], exports: [ListComponent,
+        NavbarComponent,
+        ToolbarComponent,
+        SearchboxComponent] });
+NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, imports: [CommonModule,
+        DisplayModule,
+        RouterModule,
+        MatMenuModule,
+        MatButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ListComponent,
+                        NavbarComponent,
+                        ToolbarComponent,
+                        SearchboxComponent
+                    ],
+                    exports: [
+                        ListComponent,
+                        NavbarComponent,
+                        ToolbarComponent,
+                        SearchboxComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DisplayModule,
+                        RouterModule,
+                        MatMenuModule,
+                        MatButtonModule
+                    ]
+                }]
+        }] });
+
+class UiModule {
+    static forRoot(configuration) {
+        return {
+            ngModule: UiModule,
+            providers: [
+                { provide: 'FactorUiConfiguration', useValue: configuration }
+            ]
+        };
+    }
+}
+UiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: UiModule, imports: [CommonModule,
+        DisplayModule,
+        InputsModule,
+        NavigationModule], exports: [DisplayModule,
+        InputsModule,
+        NavigationModule] });
+UiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, imports: [CommonModule,
+        DisplayModule,
+        InputsModule,
+        NavigationModule, DisplayModule,
+        InputsModule,
+        NavigationModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        DisplayModule,
+                        InputsModule,
+                        NavigationModule
+                    ],
+                    exports: [
+                        DisplayModule,
+                        InputsModule,
+                        NavigationModule
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent, ContentComponent, DisplayModule, IconComponent, ImageComponent, InputsModule, ListComponent, MessageComponent, MessageService, NavbarComponent, NavigationModule, ObserveIntersectingDirective, ProgressComponent, ProgressService, RatingComponent, SearchboxComponent, ToolbarComponent, UiModule };
+//# sourceMappingURL=factor_ec-ui.mjs.map