@factor_ec/ui 2.0.0 → 2.0.2

package/fesm2020/factor_ec-ui.mjs

@@ -282,10 +282,10 @@ class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: MessageComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: MessageComponent, selector: "ft-message", outputs: { beforeSelect: "beforeSelect" }, ngImport: i0, template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-dialog-title{display:flex;align-items:center}.mat-dialog-title ft-icon{margin-right:.5rem}.mat-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-dialog-content ft-icon{margin-right:.5rem}.mat-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: MessageComponent, selector: "ft-message", outputs: { beforeSelect: "beforeSelect" }, ngImport: i0, template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-mdc-dialog-title{display:flex;align-items:center;gap:.5rem}.mat-mdc-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-mdc-dialog-content ft-icon{margin-right:.5rem}.mat-mdc-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-message', template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-dialog-title{display:flex;align-items:center}.mat-dialog-title ft-icon{margin-right:.5rem}.mat-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-dialog-content ft-icon{margin-right:.5rem}.mat-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"] }]
+            args: [{ selector: 'ft-message', template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n    <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n        [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n        [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n    <div>{{ data.options?.title }}</div>\n</h1>\n<div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n    <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n        [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n    <ng-container [ngSwitch]=\"data.message?.type\">\n        <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n        <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n    </ng-container>\n</div>\n<div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n    <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n        <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n            <ng-container [ngSwitch]=\"action.type\">\n                <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n<ng-template #acceptTemplate>\n    <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", styles: [".mat-mdc-dialog-title{display:flex;align-items:center;gap:.5rem}.mat-mdc-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-mdc-dialog-content ft-icon{margin-right:.5rem}.mat-mdc-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -362,10 +362,10 @@ class ProgressComponent {
     }
 }
 ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ProgressComponent, selector: "ft-progress", inputs: { class: "class", color: "color", mode: "mode", overlay: "overlay", size: "size", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg [ngStyle]=\"{'--bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--track-color: rgba(0, 0, 0, .08);--bar-color: var(--primary);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ProgressComponent, selector: "ft-progress", inputs: { class: "class", color: "color", mode: "mode", overlay: "overlay", size: "size", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg [ngStyle]=\"{'--ft-bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode === 'determinate' ? 'ft-bar--determinate' : 'ft-bar--indeterminate'\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--ft-track-color: rgba(0, 0, 0, .08);--ft-bar-color: var(--ft-primary-color);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--ft-z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:ft-progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .ft-track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--ft-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes ft-progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ft-progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-progress', template: "<svg [ngStyle]=\"{'--bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--track-color: rgba(0, 0, 0, .08);--bar-color: var(--primary);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"] }]
+            args: [{ selector: 'ft-progress', template: "<svg [ngStyle]=\"{'--ft-bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" [ngClass]=\"mode === 'determinate' ? 'ft-bar--determinate' : 'ft-bar--indeterminate'\" cx=\"50\" cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", styles: [":host{--ft-track-color: rgba(0, 0, 0, .08);--ft-bar-color: var(--ft-primary-color);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--ft-z-index-modal, 1000);inset:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:ft-progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .ft-track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--ft-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-bar-color)}svg .ft-bar.ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .ft-bar.ft-bar--determinate{stroke-dasharray:251.327412288}@keyframes ft-progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ft-progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { class: [{
                 type: Input
             }], color: [{
@@ -632,6 +632,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             args: [{ selector: 'ft-listview', template: "<p>listview works!</p>\n" }]
         }] });
 
+class ExpressionBuilderComponent {
+    constructor() {
+        this.properties = [
+            { label: 'Nombre', type: 'string', field: 'name' },
+            { label: 'Monto', type: 'number', field: 'amount' },
+            { label: 'Tarjeta adicional', type: 'boolean', field: 'additional' }
+        ];
+        this.groupOperators = [
+            { label: 'Y', value: 'AND' },
+            { label: 'O', value: 'OR' }
+        ];
+        this.filters = {
+            id: 'root',
+            type: 'group',
+            operator: 'AND',
+            children: [
+                {
+                    type: 'filter',
+                    property: '',
+                    operator: '>',
+                    value: ''
+                },
+                {
+                    type: 'filter',
+                    property: '',
+                    operator: true,
+                    value: ''
+                },
+                {
+                    type: 'filter',
+                    property: '',
+                    operator: '==',
+                    value: ''
+                },
+                {
+                    type: 'group',
+                    operator: 'OR',
+                    children: [
+                        {
+                            type: 'filter',
+                            property: '',
+                            operator: '==',
+                            value: ''
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+    add(type, filter) {
+        if (!filter.children) {
+            filter.children = [];
+        }
+        filter.children.push({ type });
+        filter.children = filter.children.sort((a, b) => a.type !== 'group' ? -1 : 0);
+    }
+    remove(filter, parent) {
+        const index = parent.indexOf(filter);
+        parent.splice(index, 1);
+    }
+}
+ExpressionBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ExpressionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ExpressionBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ExpressionBuilderComponent, selector: "ft-expression-builder", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"filterGroupTemplate\" [ngTemplateOutletContext]=\"{filter:filters, parent:null}\">\n</ng-container>\n<ng-template #filterGroupTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <button type=\"button\" class=\"filter__button filter__button--icon filter__button--toggle\"\n                (click)=\"filter.collapsed = !filter.collapsed\" *ngIf=\"filter.children && filter.children.length > 0\">\n                <ft-icon name=\"angle-right\" [ngClass]=\"{'ft-icon--open': !filter.collapsed}\"></ft-icon>\n            </button>\n            <div class=\"ft-filter__button-group\">\n                <button type=\"button\" class=\"filter__button\"\n                    [ngClass]=\"{'ft-filter__button--active': filter.operator === operator.value}\"\n                    *ngFor=\"let operator of groupOperators\" (click)=\"filter.operator = operator.value\">{{ operator.label\n                    }}</button>\n            </div>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('filter', filter)\" *ngIf=\"filter.operator\">Agregar\n                filtro</button>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('group', filter)\" *ngIf=\"filter.operator\">Agregar\n                grupo</button>\n            <button type=\"button\" class=\"ft-filter__button filter__button--icon filter__button--remove\"\n                (click)=\"remove(filter, parent)\" *ngIf=\"parent\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n        <div class=\"ft-filter__children\" *ngIf=\"filter.children && filter.children.length > 0 && !filter.collapsed\">\n            <ng-container *ngFor=\"let child of filter.children\">\n                <ng-container [ngTemplateOutlet]=\"child.type === 'group' ? filterGroupTemplate : filterTemplate\"\n                    [ngTemplateOutletContext]=\"{filter:child, parent:filter.children}\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n<ng-template #filterTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <select class=\"filter__input\">\n                <option *ngFor=\"let property of properties\" value=\"property.value\">{{ property.label }}</option>\n            </select>\n            <select class=\"ft-filter__input\">\n                <option>Mayor que</option>\n                <option>Mayor igual que</option>\n                <option>Igual que</option>\n                <option>Menor que</option>\n                <option>Menor igual que</option>\n            </select>\n            <input type=\"text\" class=\"ft-filter__input\" />\n            <button type=\"button\" class=\"filter__button filter__button--icon\" (click)=\"remove(filter, parent)\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>", styles: [":host{display:block;padding:2rem}.ft-filter{--focus-color: #00bcd4;--focus-color-rgb: 0, 188, 212;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__tools{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;background-color:#0000000d;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;overflow:hidden}.ft-filter__children{padding-left:1rem;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__button{border:1px solid rgba(0,0,0,.2);background-color:transparent;border-radius:.25rem;padding:.25rem .5rem;background-color:#ffffff4d}.ft-filter__button--icon{border-color:transparent;background-color:transparent;padding:.25rem}.ft-filter__button--active{background-color:var(--focus-color);color:#fff}.ft-filter__button:not(.ft-filter__button--active):hover{border-color:var(--focus-color);background-color:rgba(var(--focus-color-rgb),.1)}.ft-filter__button:not(.ft-filter__button--active):active{background-color:rgba(var(--focus-color-rgb),.3)}.ft-filter__button:focus{outline:none;border-color:var(--focus-color)}.ft-filter__button .ft-icon{display:block;transition:transform .2s}.ft-filter__button .ft-icon--open{transform:rotate(90deg)}.ft-filter__button-group .ft-filter__button{border-radius:0}.ft-filter__button-group .ft-filter__button:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-right:0}.ft-filter__button-group .ft-filter__button:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ft-filter__input{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.25rem;padding:.25rem;transition:box-shadow .2s}.ft-filter__input:hover{border-color:var(--focus-color)}.ft-filter__input:focus{outline:none;border-color:var(--focus-color);box-shadow:0 0 0 2px rgba(var(--focus-color-rgb),.2)}.ft-filter select.ft-filter__input{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right .5rem center;background-size:.625rem;padding-right:1.5rem;-webkit-appearance:none;appearance:none}@keyframes slide-right{0%{margin-left:calc(-40px + .5rem)}to{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ExpressionBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ft-expression-builder', template: "<ng-container [ngTemplateOutlet]=\"filterGroupTemplate\" [ngTemplateOutletContext]=\"{filter:filters, parent:null}\">\n</ng-container>\n<ng-template #filterGroupTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <button type=\"button\" class=\"filter__button filter__button--icon filter__button--toggle\"\n                (click)=\"filter.collapsed = !filter.collapsed\" *ngIf=\"filter.children && filter.children.length > 0\">\n                <ft-icon name=\"angle-right\" [ngClass]=\"{'ft-icon--open': !filter.collapsed}\"></ft-icon>\n            </button>\n            <div class=\"ft-filter__button-group\">\n                <button type=\"button\" class=\"filter__button\"\n                    [ngClass]=\"{'ft-filter__button--active': filter.operator === operator.value}\"\n                    *ngFor=\"let operator of groupOperators\" (click)=\"filter.operator = operator.value\">{{ operator.label\n                    }}</button>\n            </div>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('filter', filter)\" *ngIf=\"filter.operator\">Agregar\n                filtro</button>\n            <button type=\"button\" class=\"ft-filter__button\" (click)=\"add('group', filter)\" *ngIf=\"filter.operator\">Agregar\n                grupo</button>\n            <button type=\"button\" class=\"ft-filter__button filter__button--icon filter__button--remove\"\n                (click)=\"remove(filter, parent)\" *ngIf=\"parent\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n        <div class=\"ft-filter__children\" *ngIf=\"filter.children && filter.children.length > 0 && !filter.collapsed\">\n            <ng-container *ngFor=\"let child of filter.children\">\n                <ng-container [ngTemplateOutlet]=\"child.type === 'group' ? filterGroupTemplate : filterTemplate\"\n                    [ngTemplateOutletContext]=\"{filter:child, parent:filter.children}\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n<ng-template #filterTemplate let-filter=\"filter\" let-parent=\"parent\">\n    <div class=\"ft-filter\">\n        <div class=\"ft-filter__tools\">\n            <select class=\"filter__input\">\n                <option *ngFor=\"let property of properties\" value=\"property.value\">{{ property.label }}</option>\n            </select>\n            <select class=\"ft-filter__input\">\n                <option>Mayor que</option>\n                <option>Mayor igual que</option>\n                <option>Igual que</option>\n                <option>Menor que</option>\n                <option>Menor igual que</option>\n            </select>\n            <input type=\"text\" class=\"ft-filter__input\" />\n            <button type=\"button\" class=\"filter__button filter__button--icon\" (click)=\"remove(filter, parent)\">\n                <ft-icon name=\"close\"></ft-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>", styles: [":host{display:block;padding:2rem}.ft-filter{--focus-color: #00bcd4;--focus-color-rgb: 0, 188, 212;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__tools{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;background-color:#0000000d;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;overflow:hidden}.ft-filter__children{padding-left:1rem;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.5rem}.ft-filter__button{border:1px solid rgba(0,0,0,.2);background-color:transparent;border-radius:.25rem;padding:.25rem .5rem;background-color:#ffffff4d}.ft-filter__button--icon{border-color:transparent;background-color:transparent;padding:.25rem}.ft-filter__button--active{background-color:var(--focus-color);color:#fff}.ft-filter__button:not(.ft-filter__button--active):hover{border-color:var(--focus-color);background-color:rgba(var(--focus-color-rgb),.1)}.ft-filter__button:not(.ft-filter__button--active):active{background-color:rgba(var(--focus-color-rgb),.3)}.ft-filter__button:focus{outline:none;border-color:var(--focus-color)}.ft-filter__button .ft-icon{display:block;transition:transform .2s}.ft-filter__button .ft-icon--open{transform:rotate(90deg)}.ft-filter__button-group .ft-filter__button{border-radius:0}.ft-filter__button-group .ft-filter__button:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-right:0}.ft-filter__button-group .ft-filter__button:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ft-filter__input{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.25rem;padding:.25rem;transition:box-shadow .2s}.ft-filter__input:hover{border-color:var(--focus-color)}.ft-filter__input:focus{outline:none;border-color:var(--focus-color);box-shadow:0 0 0 2px rgba(var(--focus-color-rgb),.2)}.ft-filter select.ft-filter__input{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right .5rem center;background-size:.625rem;padding-right:1.5rem;-webkit-appearance:none;appearance:none}@keyframes slide-right{0%{margin-left:calc(-40px + .5rem)}to{margin-left:0}}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
 class IoModule {
 }
 IoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: IoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -644,7 +712,8 @@ IoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0
         ObserveIntersectingDirective,
         TimelineComponent,
         ListviewComponent,
-        MessageContentComponent], imports: [CommonModule,
+        MessageContentComponent,
+        ExpressionBuilderComponent], imports: [CommonModule,
         MatButtonModule,
         MatDialogModule,
         MatSnackBarModule], exports: [AvatarComponent,
@@ -656,7 +725,8 @@ IoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0
         ObserveIntersectingDirective,
         TimelineComponent,
         ListviewComponent,
-        MessageContentComponent] });
+        MessageContentComponent,
+        ExpressionBuilderComponent] });
 IoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: IoModule, imports: [CommonModule,
         MatButtonModule,
         MatDialogModule,
@@ -674,7 +744,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ObserveIntersectingDirective,
                         TimelineComponent,
                         ListviewComponent,
-                        MessageContentComponent
+                        MessageContentComponent,
+                        ExpressionBuilderComponent
                     ],
                     imports: [
                         CommonModule,
@@ -692,7 +763,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ObserveIntersectingDirective,
                         TimelineComponent,
                         ListviewComponent,
-                        MessageContentComponent
+                        MessageContentComponent,
+                        ExpressionBuilderComponent
                     ]
                 }]
         }] });
@@ -1011,6 +1083,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
         }] });
 
 class UiModule {
+    static forRoot(configuration) {
+        return {
+            ngModule: UiModule,
+            providers: [
+                { provide: 'FactorUiConfiguration', useValue: configuration }
+            ]
+        };
+    }
 }
 UiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 UiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: UiModule, imports: [CommonModule,
@@ -1045,5 +1125,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, IconComponent, ImageComponent, IoModule, ListComponent, ListviewComponent, MessageComponent, MessageContentComponent, MessageService, NavbarComponent, NavigationModule, ObserveIntersectingDirective, ProgressComponent, ProgressService, RatingComponent, SearchboxComponent, TimelineComponent, ToolbarComponent, UiModule };
+export { AvatarComponent, ExpressionBuilderComponent, IconComponent, ImageComponent, IoModule, ListComponent, ListviewComponent, MessageComponent, MessageContentComponent, MessageService, NavbarComponent, NavigationModule, ObserveIntersectingDirective, ProgressComponent, ProgressService, RatingComponent, SearchboxComponent, TimelineComponent, ToolbarComponent, UiModule };
 //# sourceMappingURL=factor_ec-ui.mjs.map