@factor_ec/ui 5.0.8 → 6.0.0

package/fesm2022/factor_ec-ui.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, signal, effect, Component, HostBinding, Injectable, InjectionToken, ElementRef, output, PLATFORM_ID, Directive, Input, NgModule } from '@angular/core';
-import { ColorService, StringService } from '@factor_ec/utils';
-import * as d3 from 'd3';
+import { inject, input, computed, signal, effect, HostBinding, Component, InjectionToken, ElementRef, output, ChangeDetectionStrategy, Injectable, PLATFORM_ID, Directive } from '@angular/core';
+import { ColorUtil, StringUtil } from '@factor_ec/utils';
 import * as i3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
@@ -10,24 +9,23 @@ import { MatButtonModule } from '@angular/material/button';
 import { ReplaySubject } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-class AvatarComponent {
-    colorService = inject(ColorService);
-    color = input();
+class Avatar {
+    colorService = inject(ColorUtil);
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     initials = computed(() => {
         return this.getInitials(this.label());
-    });
-    label = input.required();
-    loaded = signal(false);
-    src = input();
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
     get backgroundColor() {
         return this.color() || this.colorService.hex(this.label());
     }
     get backgroundImage() {
         return this.src() ? `url(${this.src()})` : '';
     }
-    class = input();
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
     get hostClasses() {
         return ['ft-avatar', this.class()].join(' ');
     }
@@ -56,312 +54,38 @@ class AvatarComponent {
         const initials = ((allInitials.shift() || '') + (allInitials.pop() || '')).toUpperCase();
         return initials;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: AvatarComponent, isStandalone: true, selector: "ft-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.background-color": "this.backgroundColor", "style.background-image": "this.backgroundImage", "class": "this.hostClasses" } }, ngImport: i0, template: "@if (!loaded()) {\n<div>{{ initials() }}</div>\n}", styles: [":host{display:inline-flex;align-items:center;justify-content:center;color:var(--ft-avatar-color);background-color:var(--ft-avatar-bg);background-size:cover;background-repeat:no-repeat;border-radius:calc(var(--ft-avatar-size) / 2);font-size:calc(var(--ft-avatar-size) - var(--ft-avatar-size) * .6);min-width:var(--ft-avatar-size);min-height:var(--ft-avatar-size);cursor:default;-webkit-user-select:none;user-select:none}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Avatar, isStandalone: true, selector: "ft-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ft-avatar-bg-color": "this.backgroundColor", "style.--ft-avatar-bg-image": "this.backgroundImage", "class": "this.hostClasses" } }, ngImport: i0, template: "@if (!loaded()) {\n<div>{{ initials() }}</div>\n}", styles: [":host{display:inline-flex;align-items:center;justify-content:center;background-color:var(--ft-avatar-bg-color, #e5e7eb);background-image:var(--ft-avatar-bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:calc(var(--ft-avatar-size) / 2);color:var(--ft-avatar-color, #FFF);font-size:calc(var(--ft-avatar-size) - var(--ft-avatar-size) * .6);font-weight:700;min-width:var(--ft-avatar-size);min-height:var(--ft-avatar-size);text-align:center;vertical-align:middle;cursor:default;-webkit-user-select:none;user-select:none}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Avatar, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-avatar', standalone: true, imports: [], template: "@if (!loaded()) {\n<div>{{ initials() }}</div>\n}", styles: [":host{display:inline-flex;align-items:center;justify-content:center;color:var(--ft-avatar-color);background-color:var(--ft-avatar-bg);background-size:cover;background-repeat:no-repeat;border-radius:calc(var(--ft-avatar-size) / 2);font-size:calc(var(--ft-avatar-size) - var(--ft-avatar-size) * .6);min-width:var(--ft-avatar-size);min-height:var(--ft-avatar-size);cursor:default;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { backgroundColor: [{
+            args: [{ selector: 'ft-avatar', imports: [], template: "@if (!loaded()) {\n<div>{{ initials() }}</div>\n}", styles: [":host{display:inline-flex;align-items:center;justify-content:center;background-color:var(--ft-avatar-bg-color, #e5e7eb);background-image:var(--ft-avatar-bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:calc(var(--ft-avatar-size) / 2);color:var(--ft-avatar-color, #FFF);font-size:calc(var(--ft-avatar-size) - var(--ft-avatar-size) * .6);font-weight:700;min-width:var(--ft-avatar-size);min-height:var(--ft-avatar-size);text-align:center;vertical-align:middle;cursor:default;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], backgroundColor: [{
                 type: HostBinding,
-                args: ['style.background-color']
+                args: ['style.--ft-avatar-bg-color']
             }], backgroundImage: [{
                 type: HostBinding,
-                args: ['style.background-image']
-            }], hostClasses: [{
+                args: ['style.--ft-avatar-bg-image']
+            }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class ChartService {
-    resizeTimeout;
-    charts = new Map();
-    constructor() {
-        window.addEventListener('resize', this.handleResize.bind(this));
-    }
-    remove(element) {
-        this.charts.delete(element);
-    }
-    render(element, items) {
-        // Clear svg
-        const svg = d3.select(element).html('');
-        // Resize event
-        if (!this.charts.has(element)) {
-            this.charts.set(element, items);
-        }
-        const values = [0];
-        items.forEach((item) => {
-            item.data.forEach((i) => {
-                if (typeof i[item.field] === 'number') {
-                    values.push(i[item.field]);
-                }
-            });
-        });
-        if (values.length > 0) {
-            const domain = d3.extent(values);
-            // Dibujo los gráficos
-            items.forEach((item) => {
-                switch (item.type) {
-                    case 'limit':
-                        this.drawLimitChart(svg, { ...item, domain });
-                        break;
-                    case 'column':
-                        this.drawColumnChart(svg, { ...item, domain });
-                        break;
-                    case 'line':
-                        this.drawLineChart(svg, { ...item, domain });
-                        break;
-                    case 'circle':
-                        this.drawCircleChart(svg, { ...item, domain });
-                        break;
-                    case 'event':
-                        this.drawEventsPlaceholder(svg, { ...item, domain });
-                        break;
-                }
-            });
-        }
-    }
-    drawAxis(svg, values, domain) {
-        const element = svg.node()?.getBoundingClientRect();
-        const yScale = d3
-            .scaleLinear()
-            .domain(domain)
-            .range([element?.height || 0 - 4, 4]);
-        // Dibuja el eje en X
-        svg.select('.x-axis').remove();
-        svg
-            .append('rect')
-            .attr('class', 'x-axis')
-            .attr('fill', 'rgba(0, 0, 0, 0.08)')
-            .attr('x', 0)
-            .attr('width', element?.width || 0)
-            .attr('height', 1)
-            .attr('shape-rendering', 'crispEdges')
-            .attr('y', yScale(0));
-        /*
-        const yScale = d3.scaleLinear().domain([-5000, 8000]).range([this.height, 0]);
-        const yAxisGenerator = d3.axisLeft(yScale).ticks(8);
-        this.svg.append('g').call(yAxisGenerator).style('transform', 'translateX(50px)');
-        */
-    }
-    drawCircleChart(svg, options) {
-        const domRect = svg.node().getBoundingClientRect();
-        const xAccessor = (d) => d[options.categoryField];
-        const yAccessor = (d) => d[options.field] || 0;
-        const xScale = d3
-            .scaleBand()
-            .domain(options.data.map(xAccessor))
-            .range([0, domRect.width])
-            .padding(typeof options.padding === 'number' ? options.padding : 0);
-        const yScale = d3
-            .scaleLinear()
-            .domain(options.domain ?? [
-            Math.min(d3.min(options.data, yAccessor), 0),
-            d3.max(options.data, yAccessor),
-        ])
-            .range([domRect.height - 10, 10]);
-        const circles = svg
-            .append('g')
-            .attr('class', 'ft-chart__circle')
-            .selectAll(`circle`)
-            .data(options.data);
-        circles
-            .enter()
-            .append('circle')
-            .style('stroke', options.color ?? '#ff9800')
-            .attr('stroke-width', options.strokeWidth ?? 1)
-            .style('fill', 'var(--ft-body-bg)')
-            .attr('r', 1.5)
-            .merge(circles)
-            .attr('cx', (d) => Math.round((xScale(xAccessor(d)) || 0) + xScale.bandwidth() / 2))
-            .attr('cy', (d) => Math.round(yScale(yAccessor(d))));
-        circles.exit().remove();
-    }
-    drawColumnChart(svg, options) {
-        const element = svg.node().getBoundingClientRect();
-        const xAccessor = (d) => d[options.categoryField];
-        //const xAccessor = (d: any) => (new Date(d[options.categoryField]))?.getTime();
-        const yAccessor = (d) => d[options.field] || 0;
-        const xScale = d3
-            .scaleBand()
-            .domain(options.data.map(xAccessor))
-            .range([0, element.width])
-            .padding(options.padding ?? 0.5);
-        const yScale = d3
-            .scaleLinear()
-            .domain(options.domain
-            ? options.domain
-            : [
-                Math.min(d3.min(options.data, yAccessor), 0),
-                d3.max(options.data, yAccessor),
-            ])
-            .range([element.height - 4, 4]);
-        const columns = svg
-            .append('g')
-            .attr('class', 'ft-chart__column')
-            .selectAll('rect')
-            .data(options.data);
-        columns
-            .enter()
-            .append('rect')
-            .attr('x', (d) => xScale(xAccessor(d)))
-            .attr('y', (d) => yScale(yAccessor(d)))
-            .attr('shape-rendering', 'crispEdges')
-            .attr('fill', options.color ?? '#ff9800')
-            .attr('title', (d) => d[options.field])
-            .merge(columns)
-            .attr('width', Math.max(1, xScale.bandwidth()))
-            .attr('height', (d) => Math.abs(yScale(yAccessor(d)) - yScale(0)));
-        columns.exit().remove();
-    }
-    drawLineChart(svg, options) {
-        const domRect = svg.node().getBoundingClientRect();
-        const xAccessor = (d) => d[options.categoryField];
-        const yAccessor = (d) => d[options.field] || 0;
-        const xScale = d3
-            .scaleBand()
-            .domain(options.data.map(xAccessor))
-            .range([0, domRect.width])
-            .padding(typeof options.padding === 'number' ? options.padding : 0);
-        const yScale = d3
-            .scaleLinear()
-            .domain(options.domain ?? [
-            Math.min(d3.min(options.data, yAccessor), 0),
-            d3.max(options.data, yAccessor),
-        ])
-            .range([domRect.height - 10, 10]);
-        const lineGenerator = d3
-            .line()
-            .x((d) => Math.round((xScale(xAccessor(d)) || 0) + xScale.bandwidth() / 2))
-            .y((d) => Math.round(yScale(yAccessor(d))));
-        svg
-            .append('path')
-            .attr('class', 'ft-chart__line')
-            .attr('fill', 'none')
-            .attr('stroke', options.color ?? '#ff9800')
-            .attr('stroke-width', options.strokeWidth ?? 2)
-            .attr('stroke-linecap', 'round')
-            .attr('d', lineGenerator(options.data));
-    }
-    drawLimitChart(svg, options) {
-        const element = svg.node().getBoundingClientRect();
-        const yAccessor = (d) => d[options.field] || 0;
-        const yScale = d3
-            .scaleLinear()
-            .domain(options.domain
-            ? options.domain
-            : [
-                Math.min(d3.min(options.data, yAccessor), 0),
-                d3.max(options.data, yAccessor),
-            ])
-            .range([element.height - 4, 4]);
-        const line = svg.append('g').selectAll('rect').data([options.data[0]]);
-        line
-            .enter()
-            .append('rect')
-            .attr('x', 0)
-            .attr('y', (d) => yScale(yAccessor(d)) + 1)
-            .attr('shape-rendering', 'crispEdges')
-            .attr('fill', options.color ?? '#ff9800')
-            .attr('title', 0)
-            .attr('width', () => '100%')
-            .attr('height', 1);
-        line.exit().remove();
-        line
-            .enter()
-            .append('text')
-            .attr('style', 'font-weight: 600; font-size: var(--ft-text-font-size-sm);')
-            .attr('x', 0)
-            .attr('y', (d) => yScale(yAccessor(d)) + 16)
-            .attr('fill', 'var(--ft-danger-color)')
-            .text(options.label);
-    }
-    drawEventsPlaceholder(svg, options) {
-        const domRect = svg.node().getBoundingClientRect();
-        const xAccessor = (d) => d[options.categoryField];
-        const yAccessor = (d) => d[options.field] || 0;
-        const xScale = d3
-            .scaleBand()
-            .domain(options.data.map(xAccessor))
-            .range([0, domRect.width])
-            .padding(typeof options.padding === 'number' ? options.padding : 0);
-        const yScale = d3
-            .scaleLinear()
-            .domain(options.domain ?? [
-            Math.min(d3.min(options.data, yAccessor), 0),
-            d3.max(options.data, yAccessor),
-        ])
-            .range([domRect.height, 0]);
-        const columns = svg
-            .append('g')
-            .attr('class', 'ft-chart__placeholder')
-            .selectAll('rect')
-            .data(options.data);
-        columns
-            .enter()
-            .append('rect')
-            .attr('x', (d) => xScale(d[options.categoryField]))
-            .attr('y', () => 0)
-            .attr('shape-rendering', 'crispEdges')
-            .attr('fill', 'rgba(0,0,0,0)')
-            .attr('tabindex', 0)
-            .merge(columns)
-            .attr('width', Math.max(1, xScale.bandwidth()))
-            .attr('height', () => yScale(0))
-            .on('click', (event, d) => {
-            if (options.click) {
-                options.click(event, d);
-            }
-        });
-        columns.exit().remove();
-    }
-    handleResize() {
-        clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = setTimeout(() => {
-            for (const [element, items] of this.charts.entries()) {
-                this.render(element, items);
-            }
-        }, 300);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChartService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ChartService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
 const UI_OPTIONS = new InjectionToken('UI_OPTIONS');
 
-class UiService {
-    options = inject(UI_OPTIONS);
-    get() {
-        return this.options;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class IconComponent {
-    options = inject(UiService);
-    collection = input();
-    mode = input();
-    name = input.required();
-    path = input();
-    src = input();
+class Icon {
+    UIOptions = inject(UI_OPTIONS, { optional: true });
+    options = signal(this.UIOptions || null, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    collection = input(...(ngDevMode ? [undefined, { debugName: "collection" }] : /* istanbul ignore next */ []));
+    mode = input(...(ngDevMode ? [undefined, { debugName: "mode" }] : /* istanbul ignore next */ []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    path = input(...(ngDevMode ? [undefined, { debugName: "path" }] : /* istanbul ignore next */ []));
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
     url = computed(() => {
-        let collection = this.collection();
+        let collection = this.collection() ?? 'icons';
         let mode = this.mode();
         let path = this.path();
-        const options = this.options.get().iconSettings;
+        const options = this.options()?.iconSettings;
         // Set the default collection if the mode is external
         if (!this.collection()) {
             if (options && options.collection) {
@@ -372,7 +96,7 @@ class IconComponent {
             }
         }
         if (!this.mode()) {
-            if (this.options.get().iconSettings && options.mode) {
+            if (this.options()?.iconSettings && options?.mode) {
                 mode = options.mode;
             }
             else {
@@ -386,7 +110,7 @@ class IconComponent {
                     path = options.path;
                 }
                 else {
-                    path = 'assets';
+                    path = '';
                 }
             }
             return `${path}/${collection}.svg#${this.name()}`;
@@ -398,29 +122,24 @@ class IconComponent {
                 : this.name();
             return `#${name}`;
         }
-    });
-    class = input();
-    get hostClasses() {
-        return ['ft-icon', this.class()].join(' ');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: IconComponent, isStandalone: true, selector: "ft-icon", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (!src()) {\n<svg>\n    <use attr.href=\"{{ url() }}\" />\n</svg>\n} @else {\n<img [src]=\"src()\" alt=\"\" />\n}", styles: [":host{line-height:0;display:inline-block}:host svg{width:1em;height:1em;vertical-align:middle;fill:currentColor;display:inline-block}:host img{height:1em;vertical-align:middle;display:inline-block}:host.ft-icon--1{font-size:1rem}:host.ft-icon--2{font-size:1.5rem}:host.ft-icon--3{font-size:2rem}:host.ft-icon--4{font-size:3rem}:host.ft-icon--5{font-size:4.5rem}:host.ft-icon--6{font-size:8rem}:host.ft-icon--7{font-size:16rem}:host.ft-icon--8{font-size:32rem}\n"] });
+    }, ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Icon, isStandalone: true, selector: "ft-icon", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ft-icon" }, ngImport: i0, template: "@if (!src()) {\n<svg>\n    <use attr.href=\"{{ url() }}\" />\n</svg>\n} @else {\n<img [src]=\"src()\" alt=\"\" />\n}", styles: [":host{display:inline-block;line-height:0;vertical-align:middle}svg{width:1em;height:1em;display:block}img{max-width:100%;height:auto;display:block}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Icon, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-icon', standalone: true, imports: [], template: "@if (!src()) {\n<svg>\n    <use attr.href=\"{{ url() }}\" />\n</svg>\n} @else {\n<img [src]=\"src()\" alt=\"\" />\n}", styles: [":host{line-height:0;display:inline-block}:host svg{width:1em;height:1em;vertical-align:middle;fill:currentColor;display:inline-block}:host img{height:1em;vertical-align:middle;display:inline-block}:host.ft-icon--1{font-size:1rem}:host.ft-icon--2{font-size:1.5rem}:host.ft-icon--3{font-size:2rem}:host.ft-icon--4{font-size:3rem}:host.ft-icon--5{font-size:4.5rem}:host.ft-icon--6{font-size:8rem}:host.ft-icon--7{font-size:16rem}:host.ft-icon--8{font-size:32rem}\n"] }]
-        }], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'ft-icon', imports: [], host: {
+                        class: 'ft-icon'
+                    }, template: "@if (!src()) {\n<svg>\n    <use attr.href=\"{{ url() }}\" />\n</svg>\n} @else {\n<img [src]=\"src()\" alt=\"\" />\n}", styles: [":host{display:inline-block;line-height:0;vertical-align:middle}svg{width:1em;height:1em;display:block}img{max-width:100%;height:auto;display:block}\n"] }]
+        }], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
 
-class ImageComponent {
+class LazyImage {
     element = inject(ElementRef);
-    class = input('');
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     error;
     loading = false;
-    src = input.required();
-    alt = input('');
+    src = input.required(...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
     shown = false;
     ngOnInit() {
         if ('IntersectionObserver' in window) {
@@ -467,27 +186,101 @@ class ImageComponent {
     get hostClasses() {
         return ['ft-image', this.class()].join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: ImageComponent, isStandalone: true, selector: "ft-image", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ft-image--error": "this.error", "class.ft-image--loading": "this.loading", "class": "this.hostClasses" } }, ngImport: i0, template: "@if (shown) {\n  <img [src]=\"src()\" [alt]=\"alt()\" />\n}\n@if (error) {\n  <ft-icon name=\"warning\" size=\"2\"></ft-icon>\n}", styles: [":host{display:inline-flex;align-items:center;justify-content:center}img{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src", "class"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LazyImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LazyImage, isStandalone: true, selector: "ft-lazy-image", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ft-image--error": "this.error", "class.ft-image--loading": "this.loading", "class": "this.hostClasses" } }, ngImport: i0, template: "@if (shown) {\n  <img [src]=\"src()\" [alt]=\"alt()\" />\n}\n@if (error) {\n  <ft-icon name=\"warning\" />\n}\n", styles: [""], dependencies: [{ kind: "component", type: Icon, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LazyImage, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-image', standalone: true, imports: [IconComponent], template: "@if (shown) {\n  <img [src]=\"src()\" [alt]=\"alt()\" />\n}\n@if (error) {\n  <ft-icon name=\"warning\" size=\"2\"></ft-icon>\n}", styles: [":host{display:inline-flex;align-items:center;justify-content:center}img{max-width:100%;max-height:100%}\n"] }]
-        }], propDecorators: { error: [{
+            args: [{ selector: 'ft-lazy-image', imports: [Icon], template: "@if (shown) {\n  <img [src]=\"src()\" [alt]=\"alt()\" />\n}\n@if (error) {\n  <ft-icon name=\"warning\" />\n}\n" }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], error: [{
                 type: HostBinding,
                 args: ['class.ft-image--error']
             }], loading: [{
                 type: HostBinding,
                 args: ['class.ft-image--loading']
-            }], hostClasses: [{
+            }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class Progress {
+    mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    get hostClasses() {
+        return [
+            'ft-progress',
+            this.overlay() ? 'ft-progress--overlay' : '',
+            this.class()
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Progress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Progress, isStandalone: true, selector: "ft-progress", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" \n        [class.ft-bar--determinate]=\"mode() === 'determinate'\"\n        [class.ft-bar--indeterminate]=\"mode() === 'indeterminate'\"\n        cx=\"50\" cy=\"50\" r=\"40\"\n        [style.stroke-dashoffset]=\"mode() === 'determinate' ? 'calc((3.14159265 * 40 * 2 * (100 - ' + value() + ')) / 100)' : null\">\n    </circle>\n</svg>", styles: [":host{line-height:0;display:inline-block}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--ft-progress-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-progress-bar-color)}svg .ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .ft-bar--determinate{stroke-dasharray:calc(2 * 3.1415926536 * 40)}@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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Progress, decorators: [{
+            type: Component,
+            args: [{ selector: 'ft-progress', imports: [], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n    <circle class=\"ft-track\" cx=\"50\" cy=\"50\" r=\"40\" />\n    <circle class=\"ft-bar\" \n        [class.ft-bar--determinate]=\"mode() === 'determinate'\"\n        [class.ft-bar--indeterminate]=\"mode() === 'indeterminate'\"\n        cx=\"50\" cy=\"50\" r=\"40\"\n        [style.stroke-dashoffset]=\"mode() === 'determinate' ? 'calc((3.14159265 * 40 * 2 * (100 - ' + value() + ')) / 100)' : null\">\n    </circle>\n</svg>", styles: [":host{line-height:0;display:inline-block}svg{width:1em;height:1em;vertical-align:middle}svg .ft-track{fill:none;stroke-width:10;stroke:var(--ft-progress-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-progress-bar-color)}svg .ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .ft-bar--determinate{stroke-dasharray:calc(2 * 3.1415926536 * 40)}@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"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
+class Rating {
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    stars = [
+        { value: 1 },
+        { value: 2 },
+        { value: 3 },
+        { value: 4 },
+        { value: 5 }
+    ];
+    hoverValue = signal(0, ...(ngDevMode ? [{ debugName: "hoverValue" }] : /* istanbul ignore next */ []));
+    isHovered = computed(() => (starValue) => {
+        return this.hoverValue() >= starValue;
+    }, ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => (starValue) => {
+        return this.value() >= starValue;
+    }, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => (starValue) => {
+        const hovered = this.isHovered()(starValue);
+        const active = this.isActive()(starValue);
+        return {
+            'ft-rating__item-icon--hover': hovered,
+            'ft-rating__item-icon--active': active
+        };
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    setRate(value, isHover = false) {
+        if (isHover) {
+            this.hoverValue.set(value);
+        }
+        else {
+            this.valueChange.emit(value);
+        }
+    }
+    clearHover() {
+        this.hoverValue.set(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Rating, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Rating, isStandalone: true, selector: "ft-rating", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "@for (star of stars; track star.value) {\n  @if (!readOnly()) {\n    <button \n      type=\"button\" \n      class=\"ft-rating__item\" \n      [disabled]=\"disabled()\" \n      (mouseover)=\"setRate(star.value, true)\"\n      (focus)=\"setRate(star.value, true)\" \n      (blur)=\"clearHover()\" \n      (mouseout)=\"clearHover()\"\n      (click)=\"setRate(star.value)\">\n      <svg \n        [class]=\"iconClasses()(star.value)\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\">\n        <path\n          d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n      </svg>\n    </button>\n  } @else {\n    <svg \n      [class]=\"iconClasses()(star.value)\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\">\n      <path\n        d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n  }\n}\n", styles: [".ft-rating__item{background-color:transparent;border:0;padding:0;cursor:pointer;outline:none;transition:transform .2s ease}.ft-rating__item:hover:not(:disabled){transform:scale(1.1)}.ft-rating__item:disabled{cursor:not-allowed;opacity:.5}.ft-rating__item:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.25rem}.ft-rating__item-icon--active{fill:var(--ft-rating-active-color, #fbbf24);transition:fill .2s ease}.ft-rating__item-icon--hover{fill:var(--ft-rating-hover-color, #fcd34d);transition:fill .2s ease}svg:not(.ft-rating__item-icon--active):not(.ft-rating__item-icon--hover){fill:var(--ft-rating-default-color, #d1d5db);transition:fill .2s ease}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Rating, decorators: [{
+            type: Component,
+            args: [{ selector: 'ft-rating', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (star of stars; track star.value) {\n  @if (!readOnly()) {\n    <button \n      type=\"button\" \n      class=\"ft-rating__item\" \n      [disabled]=\"disabled()\" \n      (mouseover)=\"setRate(star.value, true)\"\n      (focus)=\"setRate(star.value, true)\" \n      (blur)=\"clearHover()\" \n      (mouseout)=\"clearHover()\"\n      (click)=\"setRate(star.value)\">\n      <svg \n        [class]=\"iconClasses()(star.value)\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\">\n        <path\n          d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n      </svg>\n    </button>\n  } @else {\n    <svg \n      [class]=\"iconClasses()(star.value)\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\">\n      <path\n        d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n  }\n}\n", styles: [".ft-rating__item{background-color:transparent;border:0;padding:0;cursor:pointer;outline:none;transition:transform .2s ease}.ft-rating__item:hover:not(:disabled){transform:scale(1.1)}.ft-rating__item:disabled{cursor:not-allowed;opacity:.5}.ft-rating__item:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.25rem}.ft-rating__item-icon--active{fill:var(--ft-rating-active-color, #fbbf24);transition:fill .2s ease}.ft-rating__item-icon--hover{fill:var(--ft-rating-hover-color, #fcd34d);transition:fill .2s ease}svg:not(.ft-rating__item-icon--active):not(.ft-rating__item-icon--hover){fill:var(--ft-rating-default-color, #d1d5db);transition:fill .2s ease}\n"] }]
+        }], propDecorators: { readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+const MESSAGE_POSITION = {
+    TOP: 'top',
+    BOTTOM: 'bottom'
+};
+
 class MessageContentComponent {
     data = inject(MAT_SNACK_BAR_DATA);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: MessageContentComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MessageContentComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
     @if (data.options.icon) {
     <ft-icon [name]="data.options.icon" class="ft-icon--2" />
     } @switch (data.message?.type) { @case ('html') {
@@ -495,13 +288,13 @@ class MessageContentComponent {
     } @default {
     {{ data.message?.content }}
     } }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: Icon, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MessageContentComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [MatSnackBarModule, IconComponent],
+                    imports: [MatSnackBarModule, Icon],
                     template: `
     @if (data.options.icon) {
     <ft-icon [name]="data.options.icon" class="ft-icon--2" />
@@ -519,8 +312,8 @@ class MessageDialogComponent {
     select(value) {
         this.beforeSelect.emit(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: MessageDialogComponent, isStandalone: true, selector: "ng-component", outputs: { beforeSelect: "beforeSelect" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MessageDialogComponent, isStandalone: true, selector: "ng-component", outputs: { beforeSelect: "beforeSelect" }, ngImport: i0, template: `
     @if (data.options?.title) {
     <h1 mat-dialog-title class="ft-message__title">
       @if (data.options?.titleIcon) {
@@ -563,7 +356,7 @@ class MessageDialogComponent {
       >
         {{ action.label }}
       </button>
-      } @case ('flat') {
+      } @case ('flat') @case ('filled') {
       <button
         type="button"
         mat-flat-button
@@ -572,7 +365,7 @@ class MessageDialogComponent {
       >
         {{ action.label }}
       </button>
-      } @case ('stroked') {
+      } @case ('stroked') @case ('outlined') {
       <button
         type="button"
         mat-stroked-button
@@ -598,13 +391,13 @@ class MessageDialogComponent {
       }
     </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: Icon, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MessageDialogComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [CommonModule, MatButtonModule, MatDialogModule, IconComponent],
+                    imports: [CommonModule, MatButtonModule, MatDialogModule, Icon],
                     template: `
     @if (data.options?.title) {
     <h1 mat-dialog-title class="ft-message__title">
@@ -648,7 +441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
       >
         {{ action.label }}
       </button>
-      } @case ('flat') {
+      } @case ('flat') @case ('filled') {
       <button
         type="button"
         mat-flat-button
@@ -657,7 +450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
       >
         {{ action.label }}
       </button>
-      } @case ('stroked') {
+      } @case ('stroked') @case ('outlined') {
       <button
         type="button"
         mat-stroked-button
@@ -685,11 +478,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
     }
   `,
                 }]
-        }] });
+        }], propDecorators: { beforeSelect: [{ type: i0.Output, args: ["beforeSelect"] }] } });
 class MessageService {
     snackBar = inject(MatSnackBar);
     dialog = inject(MatDialog);
-    stringService = inject(StringService);
+    stringUtil = inject(StringUtil);
     show(message, options) {
         const selectionSource = new ReplaySubject(undefined);
         const selection = selectionSource.asObservable();
@@ -716,8 +509,8 @@ class MessageService {
                     data,
                     panelClass,
                     duration: options.duration ??
-                        Math.min(this.stringService.calculateReadingTime(typeof message === 'string' ? message : message.content), 30000),
-                    verticalPosition: options.verticalPosition || 'top',
+                        Math.min(this.stringUtil.calculateReadingTime(typeof message === 'string' ? message : message.content), 30000),
+                    verticalPosition: MESSAGE_POSITION.TOP,
                 });
                 snackBarRef.onAction().subscribe(() => {
                     snackBarRef.dismiss();
@@ -739,28 +532,28 @@ class MessageService {
         }
         return selection;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MessageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MessageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class ObserveIntersectingDirective {
+class ObserveIntersecting {
     element = inject(ElementRef);
     platformId = inject(PLATFORM_ID);
     elementObserver = null;
-    ftObserveIntersectingOptions = input();
-    event = output({ alias: 'ftObserveIntersecting' });
+    ftObserveIntersectingOptions = input(...(ngDevMode ? [undefined, { debugName: "ftObserveIntersectingOptions" }] : /* istanbul ignore next */ []));
+    ftObserveIntersecting = output();
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
             if ('IntersectionObserver' in window) {
                 this.elementObserver = new IntersectionObserver((entries) => {
                     entries.forEach((entry) => {
-                        this.event.emit(entry.isIntersecting);
+                        this.ftObserveIntersecting.emit(entry.isIntersecting);
                     });
                 }, this.ftObserveIntersectingOptions());
                 this.elementObserver.observe(this.element.nativeElement);
@@ -776,152 +569,29 @@ class ObserveIntersectingDirective {
             this.elementObserver = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ObserveIntersectingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: ObserveIntersectingDirective, isStandalone: true, selector: "[ftObserveIntersecting]", inputs: { ftObserveIntersectingOptions: { classPropertyName: "ftObserveIntersectingOptions", publicName: "ftObserveIntersectingOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "ftObserveIntersecting" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ObserveIntersecting, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ObserveIntersecting, isStandalone: true, selector: "[ftObserveIntersecting]", inputs: { ftObserveIntersectingOptions: { classPropertyName: "ftObserveIntersectingOptions", publicName: "ftObserveIntersectingOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ftObserveIntersecting: "ftObserveIntersecting" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ObserveIntersectingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ObserveIntersecting, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ftObserveIntersecting]',
-                    standalone: true
+                    selector: '[ftObserveIntersecting]'
                 }]
-        }] });
-
-class ProgressComponent {
-    mode = input('indeterminate');
-    overlay = input(false);
-    value = input(0);
-    class = input('');
-    get hostClasses() {
-        return [
-            'ft-progress',
-            this.overlay() ? 'ft-progress--overlay' : '',
-            this.class()
-        ].join(' ');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: ProgressComponent, isStandalone: true, selector: "ft-progress", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg 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\"\n        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{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:10000;inset:0;font-size:42px}:host.ft-progress--overlay svg{background:#fff9;-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-progress-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-progress-bar-color)}svg .ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .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: "ngmodule", type: CommonModule }, { 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: "19.0.6", ngImport: i0, type: ProgressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ft-progress', standalone: true, imports: [CommonModule], template: "<svg 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\"\n        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{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:10000;inset:0;font-size:42px}:host.ft-progress--overlay svg{background:#fff9;-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-progress-track-color)}svg .ft-bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--ft-progress-bar-color)}svg .ft-bar--indeterminate{animation:ft-progress-rotation 2s infinite linear}svg .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"] }]
-        }], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { ftObserveIntersectingOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ftObserveIntersectingOptions", required: false }] }], ftObserveIntersecting: [{ type: i0.Output, args: ["ftObserveIntersecting"] }] } });
 
-class RatingComponent {
-    disabled = false;
-    hoverValue;
-    propagateChange = (_) => { };
-    readOnly = input(false);
-    stars = [
-        { value: 1 },
-        { value: 2 },
-        { value: 3 },
-        { value: 4 },
-        { value: 5 }
-    ];
-    _value;
-    get value() {
-        return this._value;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set value(value) {
-        this._value = value;
-        this.propagateChange(this._value);
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        //this.propagateChange = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    setRate(value, isHover) {
-        if (isHover) {
-            this.hoverValue = value;
-        }
-        else {
-            this.value = value;
-        }
-    }
-    updateValue(event) {
-        this.value = event.target.value;
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: RatingComponent, isStandalone: true, selector: "ft-rating", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: RatingComponent,
-                multi: true
-            }
-        ], ngImport: i0, template: "@for (star of stars; track star) {\n  <ng-container *ngTemplateOutlet=\"!readOnly()? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n}\n<ng-template #buttonTemplate let-star=\"star\">\n  @if (!readOnly()) {\n    <button type=\"button\" class=\"ft-rating__item\" [disabled]=\"disabled\"\n      (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n      (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n      <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n  } @else {\n    <svg [ngClass]=\"{'ft-rating__item-icon--hover': hoverValue >= star.value, 'ft-rating__item-icon--active': value >= star.value}\"\n      viewBox=\"0 0 24 24\">\n      <path\n        d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n  }\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n  <svg [ngClass]=\"{'ft-rating__item-icon--hover': hoverValue >= star.value, 'ft-rating__item-icon--active': value >= star.value}\"\n    viewBox=\"0 0 24 24\">\n    <path\n      d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n  </svg>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RatingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ft-rating', standalone: true, imports: [CommonModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: RatingComponent,
-                            multi: true
-                        }
-                    ], template: "@for (star of stars; track star) {\n  <ng-container *ngTemplateOutlet=\"!readOnly()? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n}\n<ng-template #buttonTemplate let-star=\"star\">\n  @if (!readOnly()) {\n    <button type=\"button\" class=\"ft-rating__item\" [disabled]=\"disabled\"\n      (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n      (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n      <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n  } @else {\n    <svg [ngClass]=\"{'ft-rating__item-icon--hover': hoverValue >= star.value, 'ft-rating__item-icon--active': value >= star.value}\"\n      viewBox=\"0 0 24 24\">\n      <path\n        d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n    </svg>\n  }\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n  <svg [ngClass]=\"{'ft-rating__item-icon--hover': hoverValue >= star.value, 'ft-rating__item-icon--active': value >= star.value}\"\n    viewBox=\"0 0 24 24\">\n    <path\n      d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n  </svg>\n</ng-template>" }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
+const MESSAGE_TYPE = {
+    MODAL: 'modal',
+    NOTIFICATION: 'notification'
+};
 
-class UiModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: UiModule, imports: [CommonModule,
-            AvatarComponent,
-            IconComponent,
-            ImageComponent,
-            ProgressComponent,
-            RatingComponent,
-            ObserveIntersectingDirective], exports: [AvatarComponent,
-            IconComponent,
-            ImageComponent,
-            ProgressComponent,
-            RatingComponent,
-            ObserveIntersectingDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UiModule, imports: [CommonModule,
-            ProgressComponent,
-            RatingComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UiModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [
-                        CommonModule,
-                        AvatarComponent,
-                        IconComponent,
-                        ImageComponent,
-                        ProgressComponent,
-                        RatingComponent,
-                        ObserveIntersectingDirective
-                    ],
-                    exports: [
-                        AvatarComponent,
-                        IconComponent,
-                        ImageComponent,
-                        ProgressComponent,
-                        RatingComponent,
-                        ObserveIntersectingDirective
-                    ]
-                }]
-        }] });
+/*
+ * Public API Surface of ui
+ */
+// Components
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, ChartService, IconComponent, ImageComponent, MessageContentComponent, MessageDialogComponent, MessageService, ObserveIntersectingDirective, ProgressComponent, RatingComponent, UI_OPTIONS, UiModule };
+export { Avatar, Icon, LazyImage, MESSAGE_POSITION, MESSAGE_TYPE, MessageContentComponent, MessageDialogComponent, MessageService, ObserveIntersecting, Progress, Rating, UI_OPTIONS };
 //# sourceMappingURL=factor_ec-ui.mjs.map