@factor_ec/ui 2.0.0 → 2.0.2

package/esm2020/lib/io/expression-builder/expression-builder.component.mjs

@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../icon/icon.component";
+export 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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 []; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwcmVzc2lvbi1idWlsZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpL3NyYy9saWIvaW8vZXhwcmVzc2lvbi1idWlsZGVyL2V4cHJlc3Npb24tYnVpbGRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS9zcmMvbGliL2lvL2V4cHJlc3Npb24tYnVpbGRlci9leHByZXNzaW9uLWJ1aWxkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU8xQyxNQUFNLE9BQU8sMEJBQTBCO0lBZ0RyQztRQS9DQSxlQUFVLEdBQUc7WUFDWCxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFO1lBQ2xELEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUU7WUFDbkQsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFO1NBQ3JFLENBQUM7UUFDRixtQkFBYyxHQUFHO1lBQ2YsRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUU7WUFDNUIsRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUU7U0FDNUIsQ0FBQztRQUNGLFlBQU8sR0FBRztZQUNSLEVBQUUsRUFBRSxNQUFNO1lBQ1YsSUFBSSxFQUFFLE9BQU87WUFDYixRQUFRLEVBQUUsS0FBSztZQUNmLFFBQVEsRUFBRTtnQkFDUjtvQkFDRSxJQUFJLEVBQUUsUUFBUTtvQkFDZCxRQUFRLEVBQUUsRUFBRTtvQkFDWixRQUFRLEVBQUUsR0FBRztvQkFDYixLQUFLLEVBQUUsRUFBRTtpQkFDVjtnQkFDRDtvQkFDRSxJQUFJLEVBQUUsUUFBUTtvQkFDZCxRQUFRLEVBQUUsRUFBRTtvQkFDWixRQUFRLEVBQUUsSUFBSTtvQkFDZCxLQUFLLEVBQUUsRUFBRTtpQkFDVjtnQkFDRDtvQkFDRSxJQUFJLEVBQUUsUUFBUTtvQkFDZCxRQUFRLEVBQUUsRUFBRTtvQkFDWixRQUFRLEVBQUUsSUFBSTtvQkFDZCxLQUFLLEVBQUUsRUFBRTtpQkFDVjtnQkFDRDtvQkFDRSxJQUFJLEVBQUUsT0FBTztvQkFDYixRQUFRLEVBQUUsSUFBSTtvQkFDZCxRQUFRLEVBQUU7d0JBQ1I7NEJBQ0UsSUFBSSxFQUFFLFFBQVE7NEJBQ2QsUUFBUSxFQUFFLEVBQUU7NEJBQ1osUUFBUSxFQUFFLElBQUk7NEJBQ2QsS0FBSyxFQUFFLEVBQUU7eUJBQ1Y7cUJBQ0Y7aUJBQ0Y7YUFDRjtTQUNGLENBQUM7SUFFYyxDQUFDO0lBRWpCLEdBQUcsQ0FBQyxJQUFZLEVBQUUsTUFBVztRQUMzQixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRTtZQUNwQixNQUFNLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztTQUN0QjtRQUNELE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUMvQixNQUFNLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBTSxFQUFFLENBQU0sRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksS0FBSyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUMxRixDQUFDO0lBQ0QsTUFBTSxDQUFDLE1BQVcsRUFBRSxNQUFhO1FBQy9CLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDckMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDMUIsQ0FBQzs7dUhBNURVLDBCQUEwQjsyR0FBMUIsMEJBQTBCLDZEQ1B2QyxxaEdBb0RjOzJGRDdDRCwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UsdUJBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Z0LWV4cHJlc3Npb24tYnVpbGRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9leHByZXNzaW9uLWJ1aWxkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9leHByZXNzaW9uLWJ1aWxkZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBFeHByZXNzaW9uQnVpbGRlckNvbXBvbmVudCB7XG4gIHByb3BlcnRpZXMgPSBbXG4gICAgeyBsYWJlbDogJ05vbWJyZScsIHR5cGU6ICdzdHJpbmcnLCBmaWVsZDogJ25hbWUnIH0sXG4gICAgeyBsYWJlbDogJ01vbnRvJywgdHlwZTogJ251bWJlcicsIGZpZWxkOiAnYW1vdW50JyB9LFxuICAgIHsgbGFiZWw6ICdUYXJqZXRhIGFkaWNpb25hbCcsIHR5cGU6ICdib29sZWFuJywgZmllbGQ6ICdhZGRpdGlvbmFsJyB9XG4gIF07XG4gIGdyb3VwT3BlcmF0b3JzID0gW1xuICAgIHsgbGFiZWw6ICdZJywgdmFsdWU6ICdBTkQnIH0sXG4gICAgeyBsYWJlbDogJ08nLCB2YWx1ZTogJ09SJyB9XG4gIF07XG4gIGZpbHRlcnMgPSB7XG4gICAgaWQ6ICdyb290JyxcbiAgICB0eXBlOiAnZ3JvdXAnLFxuICAgIG9wZXJhdG9yOiAnQU5EJyxcbiAgICBjaGlsZHJlbjogW1xuICAgICAge1xuICAgICAgICB0eXBlOiAnZmlsdGVyJyxcbiAgICAgICAgcHJvcGVydHk6ICcnLFxuICAgICAgICBvcGVyYXRvcjogJz4nLFxuICAgICAgICB2YWx1ZTogJydcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIHR5cGU6ICdmaWx0ZXInLFxuICAgICAgICBwcm9wZXJ0eTogJycsXG4gICAgICAgIG9wZXJhdG9yOiB0cnVlLFxuICAgICAgICB2YWx1ZTogJydcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIHR5cGU6ICdmaWx0ZXInLFxuICAgICAgICBwcm9wZXJ0eTogJycsXG4gICAgICAgIG9wZXJhdG9yOiAnPT0nLFxuICAgICAgICB2YWx1ZTogJydcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIHR5cGU6ICdncm91cCcsXG4gICAgICAgIG9wZXJhdG9yOiAnT1InLFxuICAgICAgICBjaGlsZHJlbjogW1xuICAgICAgICAgIHtcbiAgICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLFxuICAgICAgICAgICAgcHJvcGVydHk6ICcnLFxuICAgICAgICAgICAgb3BlcmF0b3I6ICc9PScsXG4gICAgICAgICAgICB2YWx1ZTogJydcbiAgICAgICAgICB9XG4gICAgICAgIF1cbiAgICAgIH1cbiAgICBdXG4gIH07XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBhZGQodHlwZTogc3RyaW5nLCBmaWx0ZXI6IGFueSk6IHZvaWQge1xuICAgIGlmICghZmlsdGVyLmNoaWxkcmVuKSB7XG4gICAgICBmaWx0ZXIuY2hpbGRyZW4gPSBbXTtcbiAgICB9XG4gICAgZmlsdGVyLmNoaWxkcmVuLnB1c2goeyB0eXBlIH0pO1xuICAgIGZpbHRlci5jaGlsZHJlbiA9IGZpbHRlci5jaGlsZHJlbi5zb3J0KChhOiBhbnksIGI6IGFueSkgPT4gYS50eXBlICE9PSAnZ3JvdXAnID8gLTEgOiAwKTtcbiAgfVxuICByZW1vdmUoZmlsdGVyOiBhbnksIHBhcmVudDogYW55W10pOiB2b2lkIHtcbiAgICBjb25zdCBpbmRleCA9IHBhcmVudC5pbmRleE9mKGZpbHRlcik7XG4gICAgcGFyZW50LnNwbGljZShpbmRleCwgMSk7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiZmlsdGVyR3JvdXBUZW1wbGF0ZVwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ZmlsdGVyOmZpbHRlcnMsIHBhcmVudDpudWxsfVwiPlxuPC9uZy1jb250YWluZXI+XG48bmctdGVtcGxhdGUgI2ZpbHRlckdyb3VwVGVtcGxhdGUgbGV0LWZpbHRlcj1cImZpbHRlclwiIGxldC1wYXJlbnQ9XCJwYXJlbnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZnQtZmlsdGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmdC1maWx0ZXJfX3Rvb2xzXCI+XG4gICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImZpbHRlcl9fYnV0dG9uIGZpbHRlcl9fYnV0dG9uLS1pY29uIGZpbHRlcl9fYnV0dG9uLS10b2dnbGVcIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJmaWx0ZXIuY29sbGFwc2VkID0gIWZpbHRlci5jb2xsYXBzZWRcIiAqbmdJZj1cImZpbHRlci5jaGlsZHJlbiAmJiBmaWx0ZXIuY2hpbGRyZW4ubGVuZ3RoID4gMFwiPlxuICAgICAgICAgICAgICAgIDxmdC1pY29uIG5hbWU9XCJhbmdsZS1yaWdodFwiIFtuZ0NsYXNzXT1cInsnZnQtaWNvbi0tb3Blbic6ICFmaWx0ZXIuY29sbGFwc2VkfVwiPjwvZnQtaWNvbj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZ0LWZpbHRlcl9fYnV0dG9uLWdyb3VwXCI+XG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJmaWx0ZXJfX2J1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsnZnQtZmlsdGVyX19idXR0b24tLWFjdGl2ZSc6IGZpbHRlci5vcGVyYXRvciA9PT0gb3BlcmF0b3IudmFsdWV9XCJcbiAgICAgICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IG9wZXJhdG9yIG9mIGdyb3VwT3BlcmF0b3JzXCIgKGNsaWNrKT1cImZpbHRlci5vcGVyYXRvciA9IG9wZXJhdG9yLnZhbHVlXCI+e3sgb3BlcmF0b3IubGFiZWxcbiAgICAgICAgICAgICAgICAgICAgfX08L2J1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJmdC1maWx0ZXJfX2J1dHRvblwiIChjbGljayk9XCJhZGQoJ2ZpbHRlcicsIGZpbHRlcilcIiAqbmdJZj1cImZpbHRlci5vcGVyYXRvclwiPkFncmVnYXJcbiAgICAgICAgICAgICAgICBmaWx0cm88L2J1dHRvbj5cbiAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiZnQtZmlsdGVyX19idXR0b25cIiAoY2xpY2spPVwiYWRkKCdncm91cCcsIGZpbHRlcilcIiAqbmdJZj1cImZpbHRlci5vcGVyYXRvclwiPkFncmVnYXJcbiAgICAgICAgICAgICAgICBncnVwbzwvYnV0dG9uPlxuICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJmdC1maWx0ZXJfX2J1dHRvbiBmaWx0ZXJfX2J1dHRvbi0taWNvbiBmaWx0ZXJfX2J1dHRvbi0tcmVtb3ZlXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwicmVtb3ZlKGZpbHRlciwgcGFyZW50KVwiICpuZ0lmPVwicGFyZW50XCI+XG4gICAgICAgICAgICAgICAgPGZ0LWljb24gbmFtZT1cImNsb3NlXCI+PC9mdC1pY29uPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZnQtZmlsdGVyX19jaGlsZHJlblwiICpuZ0lmPVwiZmlsdGVyLmNoaWxkcmVuICYmIGZpbHRlci5jaGlsZHJlbi5sZW5ndGggPiAwICYmICFmaWx0ZXIuY29sbGFwc2VkXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBjaGlsZCBvZiBmaWx0ZXIuY2hpbGRyZW5cIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNoaWxkLnR5cGUgPT09ICdncm91cCcgPyBmaWx0ZXJHcm91cFRlbXBsYXRlIDogZmlsdGVyVGVtcGxhdGVcIlxuICAgICAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwie2ZpbHRlcjpjaGlsZCwgcGFyZW50OmZpbHRlci5jaGlsZHJlbn1cIj5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG48bmctdGVtcGxhdGUgI2ZpbHRlclRlbXBsYXRlIGxldC1maWx0ZXI9XCJmaWx0ZXJcIiBsZXQtcGFyZW50PVwicGFyZW50XCI+XG4gICAgPGRpdiBjbGFzcz1cImZ0LWZpbHRlclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZnQtZmlsdGVyX190b29sc1wiPlxuICAgICAgICAgICAgPHNlbGVjdCBjbGFzcz1cImZpbHRlcl9faW5wdXRcIj5cbiAgICAgICAgICAgICAgICA8b3B0aW9uICpuZ0Zvcj1cImxldCBwcm9wZXJ0eSBvZiBwcm9wZXJ0aWVzXCIgdmFsdWU9XCJwcm9wZXJ0eS52YWx1ZVwiPnt7IHByb3BlcnR5LmxhYmVsIH19PC9vcHRpb24+XG4gICAgICAgICAgICA8L3NlbGVjdD5cbiAgICAgICAgICAgIDxzZWxlY3QgY2xhc3M9XCJmdC1maWx0ZXJfX2lucHV0XCI+XG4gICAgICAgICAgICAgICAgPG9wdGlvbj5NYXlvciBxdWU8L29wdGlvbj5cbiAgICAgICAgICAgICAgICA8b3B0aW9uPk1heW9yIGlndWFsIHF1ZTwvb3B0aW9uPlxuICAgICAgICAgICAgICAgIDxvcHRpb24+SWd1YWwgcXVlPC9vcHRpb24+XG4gICAgICAgICAgICAgICAgPG9wdGlvbj5NZW5vciBxdWU8L29wdGlvbj5cbiAgICAgICAgICAgICAgICA8b3B0aW9uPk1lbm9yIGlndWFsIHF1ZTwvb3B0aW9uPlxuICAgICAgICAgICAgPC9zZWxlY3Q+XG4gICAgICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBjbGFzcz1cImZ0LWZpbHRlcl9faW5wdXRcIiAvPlxuICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJmaWx0ZXJfX2J1dHRvbiBmaWx0ZXJfX2J1dHRvbi0taWNvblwiIChjbGljayk9XCJyZW1vdmUoZmlsdGVyLCBwYXJlbnQpXCI+XG4gICAgICAgICAgICAgICAgPGZ0LWljb24gbmFtZT1cImNsb3NlXCI+PC9mdC1pY29uPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT4iXX0=

package/esm2020/lib/io/io.module.mjs

@@ -13,6 +13,7 @@ import { ObserveIntersectingDirective } from './observe-intersecting.directive';
 import { TimelineComponent } from './timeline/timeline.component';
 import { ListviewComponent } from './listview/listview.component';
 import { MessageContentComponent } from './message-content/message-content.component';
+import { ExpressionBuilderComponent } from './expression-builder/expression-builder.component';
 import * as i0 from "@angular/core";
 export class IoModule {
 }
@@ -26,7 +27,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,
@@ -38,7 +40,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,
@@ -56,7 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ObserveIntersectingDirective,
                         TimelineComponent,
                         ListviewComponent,
-                        MessageContentComponent
+                        MessageContentComponent,
+                        ExpressionBuilderComponent
                     ],
                     imports: [
                         CommonModule,
@@ -74,8 +78,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ObserveIntersectingDirective,
                         TimelineComponent,
                         ListviewComponent,
-                        MessageContentComponent
+                        MessageContentComponent,
+                        ExpressionBuilderComponent
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW8ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi9pby9pby5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVoRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3RELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7O0FBa0N0RixNQUFNLE9BQU8sUUFBUTs7cUdBQVIsUUFBUTtzR0FBUixRQUFRLGlCQTlCakIsZUFBZTtRQUNmLGFBQWE7UUFDYixjQUFjO1FBQ2QsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixlQUFlO1FBQ2YsNEJBQTRCO1FBQzVCLGlCQUFpQjtRQUNqQixpQkFBaUI7UUFDakIsdUJBQXVCLGFBR3ZCLFlBQVk7UUFDWixlQUFlO1FBQ2YsZUFBZTtRQUNmLGlCQUFpQixhQUdqQixlQUFlO1FBQ2YsYUFBYTtRQUNiLGNBQWM7UUFDZCxnQkFBZ0I7UUFDaEIsaUJBQWlCO1FBQ2pCLGVBQWU7UUFDZiw0QkFBNEI7UUFDNUIsaUJBQWlCO1FBQ2pCLGlCQUFpQjtRQUNqQix1QkFBdUI7c0dBR2QsUUFBUSxZQWxCakIsWUFBWTtRQUNaLGVBQWU7UUFDZixlQUFlO1FBQ2YsaUJBQWlCOzJGQWVSLFFBQVE7a0JBaENwQixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixlQUFlO3dCQUNmLGFBQWE7d0JBQ2IsY0FBYzt3QkFDZCxnQkFBZ0I7d0JBQ2hCLGlCQUFpQjt3QkFDakIsZUFBZTt3QkFDZiw0QkFBNEI7d0JBQzVCLGlCQUFpQjt3QkFDakIsaUJBQWlCO3dCQUNqQix1QkFBdUI7cUJBQ3hCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGVBQWU7d0JBQ2YsZUFBZTt3QkFDZixpQkFBaUI7cUJBQ2xCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxlQUFlO3dCQUNmLGFBQWE7d0JBQ2IsY0FBYzt3QkFDZCxnQkFBZ0I7d0JBQ2hCLGlCQUFpQjt3QkFDakIsZUFBZTt3QkFDZiw0QkFBNEI7d0JBQzVCLGlCQUFpQjt3QkFDakIsaUJBQWlCO3dCQUNqQix1QkFBdUI7cUJBQ3hCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0RGlhbG9nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcbmltcG9ydCB7IE1hdFNuYWNrQmFyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc25hY2stYmFyJztcblxuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnLi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi9pY29uL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IEltYWdlQ29tcG9uZW50IH0gZnJvbSAnLi9pbWFnZS9pbWFnZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWVzc2FnZUNvbXBvbmVudCB9IGZyb20gJy4vbWVzc2FnZS9tZXNzYWdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQcm9ncmVzc0NvbXBvbmVudCB9IGZyb20gJy4vcHJvZ3Jlc3MvcHJvZ3Jlc3MuY29tcG9uZW50JztcbmltcG9ydCB7IFJhdGluZ0NvbXBvbmVudCB9IGZyb20gJy4vcmF0aW5nL3JhdGluZy5jb21wb25lbnQnO1xuaW1wb3J0IHsgT2JzZXJ2ZUludGVyc2VjdGluZ0RpcmVjdGl2ZSB9IGZyb20gJy4vb2JzZXJ2ZS1pbnRlcnNlY3RpbmcuZGlyZWN0aXZlJztcbmltcG9ydCB7IFRpbWVsaW5lQ29tcG9uZW50IH0gZnJvbSAnLi90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgTGlzdHZpZXdDb21wb25lbnQgfSBmcm9tICcuL2xpc3R2aWV3L2xpc3R2aWV3LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNZXNzYWdlQ29udGVudENvbXBvbmVudCB9IGZyb20gJy4vbWVzc2FnZS1jb250ZW50L21lc3NhZ2UtY29udGVudC5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBBdmF0YXJDb21wb25lbnQsXG4gICAgSWNvbkNvbXBvbmVudCxcbiAgICBJbWFnZUNvbXBvbmVudCxcbiAgICBNZXNzYWdlQ29tcG9uZW50LFxuICAgIFByb2dyZXNzQ29tcG9uZW50LFxuICAgIFJhdGluZ0NvbXBvbmVudCxcbiAgICBPYnNlcnZlSW50ZXJzZWN0aW5nRGlyZWN0aXZlLFxuICAgIFRpbWVsaW5lQ29tcG9uZW50LFxuICAgIExpc3R2aWV3Q29tcG9uZW50LFxuICAgIE1lc3NhZ2VDb250ZW50Q29tcG9uZW50XG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgTWF0QnV0dG9uTW9kdWxlLFxuICAgIE1hdERpYWxvZ01vZHVsZSxcbiAgICBNYXRTbmFja0Jhck1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbXG4gICAgQXZhdGFyQ29tcG9uZW50LFxuICAgIEljb25Db21wb25lbnQsXG4gICAgSW1hZ2VDb21wb25lbnQsXG4gICAgTWVzc2FnZUNvbXBvbmVudCxcbiAgICBQcm9ncmVzc0NvbXBvbmVudCxcbiAgICBSYXRpbmdDb21wb25lbnQsXG4gICAgT2JzZXJ2ZUludGVyc2VjdGluZ0RpcmVjdGl2ZSxcbiAgICBUaW1lbGluZUNvbXBvbmVudCxcbiAgICBMaXN0dmlld0NvbXBvbmVudCxcbiAgICBNZXNzYWdlQ29udGVudENvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIElvTW9kdWxlIHsgfVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW8ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi9pby9pby5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVoRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3RELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFDdEYsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sbURBQW1ELENBQUM7O0FBb0MvRixNQUFNLE9BQU8sUUFBUTs7cUdBQVIsUUFBUTtzR0FBUixRQUFRLGlCQWhDakIsZUFBZTtRQUNmLGFBQWE7UUFDYixjQUFjO1FBQ2QsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixlQUFlO1FBQ2YsNEJBQTRCO1FBQzVCLGlCQUFpQjtRQUNqQixpQkFBaUI7UUFDakIsdUJBQXVCO1FBQ3ZCLDBCQUEwQixhQUcxQixZQUFZO1FBQ1osZUFBZTtRQUNmLGVBQWU7UUFDZixpQkFBaUIsYUFHakIsZUFBZTtRQUNmLGFBQWE7UUFDYixjQUFjO1FBQ2QsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixlQUFlO1FBQ2YsNEJBQTRCO1FBQzVCLGlCQUFpQjtRQUNqQixpQkFBaUI7UUFDakIsdUJBQXVCO1FBQ3ZCLDBCQUEwQjtzR0FHakIsUUFBUSxZQW5CakIsWUFBWTtRQUNaLGVBQWU7UUFDZixlQUFlO1FBQ2YsaUJBQWlCOzJGQWdCUixRQUFRO2tCQWxDcEIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osZUFBZTt3QkFDZixhQUFhO3dCQUNiLGNBQWM7d0JBQ2QsZ0JBQWdCO3dCQUNoQixpQkFBaUI7d0JBQ2pCLGVBQWU7d0JBQ2YsNEJBQTRCO3dCQUM1QixpQkFBaUI7d0JBQ2pCLGlCQUFpQjt3QkFDakIsdUJBQXVCO3dCQUN2QiwwQkFBMEI7cUJBQzNCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGVBQWU7d0JBQ2YsZUFBZTt3QkFDZixpQkFBaUI7cUJBQ2xCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxlQUFlO3dCQUNmLGFBQWE7d0JBQ2IsY0FBYzt3QkFDZCxnQkFBZ0I7d0JBQ2hCLGlCQUFpQjt3QkFDakIsZUFBZTt3QkFDZiw0QkFBNEI7d0JBQzVCLGlCQUFpQjt3QkFDakIsaUJBQWlCO3dCQUNqQix1QkFBdUI7d0JBQ3ZCLDBCQUEwQjtxQkFDM0I7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE1hdEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7XG5pbXBvcnQgeyBNYXREaWFsb2dNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xuaW1wb3J0IHsgTWF0U25hY2tCYXJNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zbmFjay1iYXInO1xuXG5pbXBvcnQgeyBBdmF0YXJDb21wb25lbnQgfSBmcm9tICcuL2F2YXRhci9hdmF0YXIuY29tcG9uZW50JztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgSW1hZ2VDb21wb25lbnQgfSBmcm9tICcuL2ltYWdlL2ltYWdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNZXNzYWdlQ29tcG9uZW50IH0gZnJvbSAnLi9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50JztcbmltcG9ydCB7IFByb2dyZXNzQ29tcG9uZW50IH0gZnJvbSAnLi9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgUmF0aW5nQ29tcG9uZW50IH0gZnJvbSAnLi9yYXRpbmcvcmF0aW5nLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBPYnNlcnZlSW50ZXJzZWN0aW5nRGlyZWN0aXZlIH0gZnJvbSAnLi9vYnNlcnZlLWludGVyc2VjdGluZy5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgVGltZWxpbmVDb21wb25lbnQgfSBmcm9tICcuL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBMaXN0dmlld0NvbXBvbmVudCB9IGZyb20gJy4vbGlzdHZpZXcvbGlzdHZpZXcuY29tcG9uZW50JztcbmltcG9ydCB7IE1lc3NhZ2VDb250ZW50Q29tcG9uZW50IH0gZnJvbSAnLi9tZXNzYWdlLWNvbnRlbnQvbWVzc2FnZS1jb250ZW50LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBFeHByZXNzaW9uQnVpbGRlckNvbXBvbmVudCB9IGZyb20gJy4vZXhwcmVzc2lvbi1idWlsZGVyL2V4cHJlc3Npb24tYnVpbGRlci5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBBdmF0YXJDb21wb25lbnQsXG4gICAgSWNvbkNvbXBvbmVudCxcbiAgICBJbWFnZUNvbXBvbmVudCxcbiAgICBNZXNzYWdlQ29tcG9uZW50LFxuICAgIFByb2dyZXNzQ29tcG9uZW50LFxuICAgIFJhdGluZ0NvbXBvbmVudCxcbiAgICBPYnNlcnZlSW50ZXJzZWN0aW5nRGlyZWN0aXZlLFxuICAgIFRpbWVsaW5lQ29tcG9uZW50LFxuICAgIExpc3R2aWV3Q29tcG9uZW50LFxuICAgIE1lc3NhZ2VDb250ZW50Q29tcG9uZW50LFxuICAgIEV4cHJlc3Npb25CdWlsZGVyQ29tcG9uZW50XG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgTWF0QnV0dG9uTW9kdWxlLFxuICAgIE1hdERpYWxvZ01vZHVsZSxcbiAgICBNYXRTbmFja0Jhck1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbXG4gICAgQXZhdGFyQ29tcG9uZW50LFxuICAgIEljb25Db21wb25lbnQsXG4gICAgSW1hZ2VDb21wb25lbnQsXG4gICAgTWVzc2FnZUNvbXBvbmVudCxcbiAgICBQcm9ncmVzc0NvbXBvbmVudCxcbiAgICBSYXRpbmdDb21wb25lbnQsXG4gICAgT2JzZXJ2ZUludGVyc2VjdGluZ0RpcmVjdGl2ZSxcbiAgICBUaW1lbGluZUNvbXBvbmVudCxcbiAgICBMaXN0dmlld0NvbXBvbmVudCxcbiAgICBNZXNzYWdlQ29udGVudENvbXBvbmVudCxcbiAgICBFeHByZXNzaW9uQnVpbGRlckNvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIElvTW9kdWxlIHsgfVxuIl19

package/esm2020/lib/io/message/message.component.mjs

@@ -17,10 +17,10 @@ export 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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: i4.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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: i4.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]

package/esm2020/lib/io/progress/progress.component.mjs

@@ -19,10 +19,10 @@ export 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: [{
@@ -39,4 +39,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 type: HostBinding,
                 args: ['class']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi9pby9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS9zcmMvbGliL2lvL3Byb2dyZXNzL3Byb2dyZXNzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTzlELE1BQU0sT0FBTyxpQkFBaUI7SUFRNUI7UUFQUyxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBRW5CLFNBQUksR0FBb0MsZUFBZSxDQUFDO1FBQ3hELFlBQU8sR0FBWSxLQUFLLENBQUM7SUFJbEIsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDakIsQ0FBQztJQUNELElBQ0ksV0FBVztRQUNiLE9BQU87WUFDTCxhQUFhO1lBQ2IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDMUMsSUFBSSxDQUFDLEtBQUs7U0FDWCxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNkLENBQUM7OzhHQXBCVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixzTkNQOUIsdWJBTU07MkZEQ08saUJBQWlCO2tCQUw3QixTQUFTOytCQUNFLGFBQWE7MEVBS2QsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBUUYsV0FBVztzQkFEZCxXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmdC1wcm9ncmVzcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3Byb2dyZXNzLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NDb21wb25lbnQge1xuICBASW5wdXQoKSBjbGFzczogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGNvbG9yITogc3RyaW5nO1xuICBASW5wdXQoKSBtb2RlOiAnZGV0ZXJtaW5hdGUnIHwgJ2luZGV0ZXJtaW5hdGUnID0gJ2luZGV0ZXJtaW5hdGUnO1xuICBASW5wdXQoKSBvdmVybGF5OiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNpemUhOiBudW1iZXI7XG4gIEBJbnB1dCgpIHZhbHVlITogbnVtYmVyO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy52YWx1ZSA9IDA7XG4gIH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBob3N0Q2xhc3NlcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBbXG4gICAgICAnZnQtcHJvZ3Jlc3MnLFxuICAgICAgdGhpcy5vdmVybGF5ID8gJ2Z0LXByb2dyZXNzLS1vdmVybGF5JyA6ICcnLFxuICAgICAgdGhpcy5jbGFzc1xuICAgIF0uam9pbignICcpO1xuICB9XG59XG4iLCI8c3ZnIFtuZ1N0eWxlXT1cInsnLS1iYXItY29sb3InOiBjb2xvcn1cIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgdmlld0JveD1cIjAgMCAxMDAgMTAwXCJcbiAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPVwieE1pZFlNaWRcIj5cbiAgICA8Y2lyY2xlIGNsYXNzPVwiZnQtdHJhY2tcIiBjeD1cIjUwXCIgY3k9XCI1MFwiIHI9XCI0MFwiIC8+XG4gICAgPGNpcmNsZSBjbGFzcz1cImZ0LWJhclwiIFtuZ0NsYXNzXT1cIm1vZGVcIiBjeD1cIjUwXCIgY3k9XCI1MFwiIHI9XCI0MFwiXG4gICAgICAgIFtuZ1N0eWxlXT1cInsnc3Ryb2tlLWRhc2hvZmZzZXQnOiBtb2RlPT0nZGV0ZXJtaW5hdGUnPyAnY2FsYygoMy4xNDE1OTI2NSAqIDQwICogMiAqICgxMDAgLSAnK3ZhbHVlKycpKSAvIDEwMCknIDogbnVsbH1cIj5cbiAgICA8L2NpcmNsZT5cbjwvc3ZnPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi9pby9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS9zcmMvbGliL2lvL3Byb2dyZXNzL3Byb2dyZXNzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTzlELE1BQU0sT0FBTyxpQkFBaUI7SUFRNUI7UUFQUyxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBRW5CLFNBQUksR0FBb0MsZUFBZSxDQUFDO1FBQ3hELFlBQU8sR0FBWSxLQUFLLENBQUM7SUFJbEIsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDakIsQ0FBQztJQUNELElBQ0ksV0FBVztRQUNiLE9BQU87WUFDTCxhQUFhO1lBQ2IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDMUMsSUFBSSxDQUFDLEtBQUs7U0FDWCxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNkLENBQUM7OzhHQXBCVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixzTkNQOUIsOGZBTU07MkZEQ08saUJBQWlCO2tCQUw3QixTQUFTOytCQUNFLGFBQWE7MEVBS2QsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBUUYsV0FBVztzQkFEZCxXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmdC1wcm9ncmVzcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3Byb2dyZXNzLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NDb21wb25lbnQge1xuICBASW5wdXQoKSBjbGFzczogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGNvbG9yITogc3RyaW5nO1xuICBASW5wdXQoKSBtb2RlOiAnZGV0ZXJtaW5hdGUnIHwgJ2luZGV0ZXJtaW5hdGUnID0gJ2luZGV0ZXJtaW5hdGUnO1xuICBASW5wdXQoKSBvdmVybGF5OiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNpemUhOiBudW1iZXI7XG4gIEBJbnB1dCgpIHZhbHVlITogbnVtYmVyO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy52YWx1ZSA9IDA7XG4gIH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBob3N0Q2xhc3NlcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBbXG4gICAgICAnZnQtcHJvZ3Jlc3MnLFxuICAgICAgdGhpcy5vdmVybGF5ID8gJ2Z0LXByb2dyZXNzLS1vdmVybGF5JyA6ICcnLFxuICAgICAgdGhpcy5jbGFzc1xuICAgIF0uam9pbignICcpO1xuICB9XG59XG4iLCI8c3ZnIFtuZ1N0eWxlXT1cInsnLS1mdC1iYXItY29sb3InOiBjb2xvcn1cIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgdmlld0JveD1cIjAgMCAxMDAgMTAwXCJcbiAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPVwieE1pZFlNaWRcIj5cbiAgICA8Y2lyY2xlIGNsYXNzPVwiZnQtdHJhY2tcIiBjeD1cIjUwXCIgY3k9XCI1MFwiIHI9XCI0MFwiIC8+XG4gICAgPGNpcmNsZSBjbGFzcz1cImZ0LWJhclwiIFtuZ0NsYXNzXT1cIm1vZGUgPT09ICdkZXRlcm1pbmF0ZScgPyAnZnQtYmFyLS1kZXRlcm1pbmF0ZScgOiAnZnQtYmFyLS1pbmRldGVybWluYXRlJ1wiIGN4PVwiNTBcIiBjeT1cIjUwXCIgcj1cIjQwXCJcbiAgICAgICAgW25nU3R5bGVdPVwieydzdHJva2UtZGFzaG9mZnNldCc6IG1vZGU9PSdkZXRlcm1pbmF0ZSc/ICdjYWxjKCgzLjE0MTU5MjY1ICogNDAgKiAyICogKDEwMCAtICcrdmFsdWUrJykpIC8gMTAwKScgOiBudWxsfVwiPlxuICAgIDwvY2lyY2xlPlxuPC9zdmc+Il19

package/esm2020/lib/models/module-configuration.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kdWxlLWNvbmZpZ3VyYXRpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS9zcmMvbGliL21vZGVscy9tb2R1bGUtY29uZmlndXJhdGlvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBNb2R1bGVDb25maWd1cmF0aW9uIHtcbiAgICBpY29uPzoge1xuICAgICAgICBwYXRoPzogc3RyaW5nLFxuICAgICAgICBjb2xsZWN0aW9uPzogc3RyaW5nXG4gICAgfVxufSJdfQ==

package/esm2020/lib/ui.module.mjs

@@ -4,6 +4,14 @@ import { IoModule } from './io/io.module';
 import { NavigationModule } from './navigation/navigation.module';
 import * as i0 from "@angular/core";
 export 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,
@@ -29,4 +37,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidWkubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi91aS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOztBQWNsRSxNQUFNLE9BQU8sUUFBUTs7cUdBQVIsUUFBUTtzR0FBUixRQUFRLFlBVGpCLFlBQVk7UUFDWixRQUFRO1FBQ1IsZ0JBQWdCLGFBR2hCLFFBQVE7UUFDUixnQkFBZ0I7c0dBR1AsUUFBUSxZQVRqQixZQUFZO1FBQ1osUUFBUTtRQUNSLGdCQUFnQixFQUdoQixRQUFRO1FBQ1IsZ0JBQWdCOzJGQUdQLFFBQVE7a0JBWnBCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLEVBQUU7b0JBQ2hCLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFFBQVE7d0JBQ1IsZ0JBQWdCO3FCQUNqQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsUUFBUTt3QkFDUixnQkFBZ0I7cUJBQ2pCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJb01vZHVsZSB9IGZyb20gJy4vaW8vaW8ubW9kdWxlJztcbmltcG9ydCB7IE5hdmlnYXRpb25Nb2R1bGUgfSBmcm9tICcuL25hdmlnYXRpb24vbmF2aWdhdGlvbi5tb2R1bGUnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIElvTW9kdWxlLFxuICAgIE5hdmlnYXRpb25Nb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIElvTW9kdWxlLFxuICAgIE5hdmlnYXRpb25Nb2R1bGVcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBVaU1vZHVsZSB7IH1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidWkubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi91aS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBdUIsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUUxQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUFjbEUsTUFBTSxPQUFPLFFBQVE7SUFDWixNQUFNLENBQUMsT0FBTyxDQUFDLGFBQW1DO1FBQ3ZELE9BQU87WUFDTCxRQUFRLEVBQUUsUUFBUTtZQUNsQixTQUFTLEVBQUU7Z0JBQ1QsRUFBRSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRTthQUM5RDtTQUNGLENBQUM7SUFDSixDQUFDOztxR0FSVSxRQUFRO3NHQUFSLFFBQVEsWUFUakIsWUFBWTtRQUNaLFFBQVE7UUFDUixnQkFBZ0IsYUFHaEIsUUFBUTtRQUNSLGdCQUFnQjtzR0FHUCxRQUFRLFlBVGpCLFlBQVk7UUFDWixRQUFRO1FBQ1IsZ0JBQWdCLEVBR2hCLFFBQVE7UUFDUixnQkFBZ0I7MkZBR1AsUUFBUTtrQkFacEIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsRUFBRTtvQkFDaEIsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osUUFBUTt3QkFDUixnQkFBZ0I7cUJBQ2pCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxRQUFRO3dCQUNSLGdCQUFnQjtxQkFDakI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTW9kdWxlV2l0aFByb3ZpZGVycywgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElvTW9kdWxlIH0gZnJvbSAnLi9pby9pby5tb2R1bGUnO1xuaW1wb3J0IHsgTW9kdWxlQ29uZmlndXJhdGlvbiB9IGZyb20gJy4vbW9kZWxzL21vZHVsZS1jb25maWd1cmF0aW9uJztcbmltcG9ydCB7IE5hdmlnYXRpb25Nb2R1bGUgfSBmcm9tICcuL25hdmlnYXRpb24vbmF2aWdhdGlvbi5tb2R1bGUnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIElvTW9kdWxlLFxuICAgIE5hdmlnYXRpb25Nb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIElvTW9kdWxlLFxuICAgIE5hdmlnYXRpb25Nb2R1bGVcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBVaU1vZHVsZSB7IFxuICBwdWJsaWMgc3RhdGljIGZvclJvb3QoY29uZmlndXJhdGlvbj86IE1vZHVsZUNvbmZpZ3VyYXRpb24pOiBNb2R1bGVXaXRoUHJvdmlkZXJzPFVpTW9kdWxlPiB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG5nTW9kdWxlOiBVaU1vZHVsZSxcbiAgICAgIHByb3ZpZGVyczogW1xuICAgICAgICB7IHByb3ZpZGU6ICdGYWN0b3JVaUNvbmZpZ3VyYXRpb24nLCB1c2VWYWx1ZTogY29uZmlndXJhdGlvbiB9XG4gICAgICBdXG4gICAgfTtcbiAgfVxufVxuIl19

package/esm2020/public-api.mjs

@@ -14,6 +14,7 @@ export * from './lib/io/io.module';
 export * from './lib/io/rating/rating.component';
 export * from './lib/io/timeline/timeline.component';
 export * from './lib/io/listview/listview.component';
+export * from './lib/io/expression-builder/expression-builder.component';
 export * from './lib/io/io.module';
 export * from './lib/navigation/list/list.component';
 export * from './lib/navigation/navbar/navbar.component';
@@ -21,4 +22,4 @@ export * from './lib/navigation/searchbox/searchbox.component';
 export * from './lib/navigation/toolbar/toolbar.component';
 export * from './lib/navigation/navigation.module';
 export * from './lib/ui.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3VpL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyxvREFBb0QsQ0FBQztBQUNuRSxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYywwQ0FBMEMsQ0FBQztBQUN6RCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsNENBQTRDLENBQUM7QUFDM0QsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLGlCQUFpQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiB1aVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL2F2YXRhci9hdmF0YXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL2ljb24vaWNvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vaW1hZ2UvaW1hZ2UuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL21lc3NhZ2UtY29udGVudC9tZXNzYWdlLWNvbnRlbnQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL21lc3NhZ2UvbWVzc2FnZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vbWVzc2FnZS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL3Byb2dyZXNzL3Byb2dyZXNzLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9wcm9ncmVzcy5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL29ic2VydmUtaW50ZXJzZWN0aW5nLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9pby5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vcmF0aW5nL3JhdGluZy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vdGltZWxpbmUvdGltZWxpbmUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL2xpc3R2aWV3L2xpc3R2aWV3LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9pby5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmF2aWdhdGlvbi9saXN0L2xpc3QuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25hdmlnYXRpb24vbmF2YmFyL25hdmJhci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmF2aWdhdGlvbi9zZWFyY2hib3gvc2VhcmNoYm94LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uYXZpZ2F0aW9uL3Rvb2xiYXIvdG9vbGJhci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmF2aWdhdGlvbi9uYXZpZ2F0aW9uLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi91aS5tb2R1bGUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3VpL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyxvREFBb0QsQ0FBQztBQUNuRSxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLDBEQUEwRCxDQUFDO0FBQ3pFLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLDBDQUEwQyxDQUFDO0FBQ3pELGNBQWMsZ0RBQWdELENBQUM7QUFDL0QsY0FBYyw0Q0FBNEMsQ0FBQztBQUMzRCxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsaUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHVpXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vYXZhdGFyL2F2YXRhci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9pbWFnZS9pbWFnZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vbWVzc2FnZS1jb250ZW50L21lc3NhZ2UtY29udGVudC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vbWVzc2FnZS9tZXNzYWdlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9tZXNzYWdlLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vcHJvZ3Jlc3MvcHJvZ3Jlc3MuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL3Byb2dyZXNzLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vb2JzZXJ2ZS1pbnRlcnNlY3RpbmcuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL2lvLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9yYXRpbmcvcmF0aW5nLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vbGlzdHZpZXcvbGlzdHZpZXcuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL2V4cHJlc3Npb24tYnVpbGRlci9leHByZXNzaW9uLWJ1aWxkZXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL2lvLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uYXZpZ2F0aW9uL2xpc3QvbGlzdC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmF2aWdhdGlvbi9uYXZiYXIvbmF2YmFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uYXZpZ2F0aW9uL3NlYXJjaGJveC9zZWFyY2hib3guY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25hdmlnYXRpb24vdG9vbGJhci90b29sYmFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uYXZpZ2F0aW9uL25hdmlnYXRpb24ubW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3VpLm1vZHVsZSc7XG4iXX0=

package/fesm2015/factor_ec-ui.mjs

@@ -286,10 +286,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,
@@ -368,10 +368,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: [{
@@ -640,6 +640,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 });
@@ -652,7 +720,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,
@@ -664,7 +733,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,
@@ -682,7 +752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ObserveIntersectingDirective,
                         TimelineComponent,
                         ListviewComponent,
-                        MessageContentComponent
+                        MessageContentComponent,
+                        ExpressionBuilderComponent
                     ],
                     imports: [
                         CommonModule,
@@ -700,7 +771,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ObserveIntersectingDirective,
                         TimelineComponent,
                         ListviewComponent,
-                        MessageContentComponent
+                        MessageContentComponent,
+                        ExpressionBuilderComponent
                     ]
                 }]
         }] });
@@ -1020,6 +1092,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,
@@ -1054,5 +1134,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