@factor_ec/ui 4.0.11 → 5.0.1

package/fesm2022/factor_ec-ui.mjs

@@ -1,193 +1,434 @@
 import * as i0 from '@angular/core';
-import { Component, Input, HostBinding, Inject, EventEmitter, PLATFORM_ID, Directive, Output, Injectable, ApplicationRef } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import * as i1 from '@factor_ec/utils';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ReplaySubject } from 'rxjs';
-import * as i1$2 from '@angular/material/snack-bar';
-import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
-import * as i2$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+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 * 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';
 import * as i2 from '@angular/material/button';
 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 {
-    set src(value) {
-        if (value && value.trim() != '') {
-            this._src = value;
-            let image = new Image();
-            image.src = value;
-            image.onload = () => {
-                if ("decode" in image) {
-                    image.decode().then(() => {
-                        this.loaded = true;
-                    });
-                }
-                else {
-                    console.error('Image.decode not available.');
-                }
-            };
-        }
-    }
-    set label(value) {
-        this._label = value;
-        this.initials = this.getInitials(value);
-    }
+    colorService = inject(ColorService);
+    color = input();
+    initials = computed(() => {
+        return this.getInitials(this.label());
+    });
+    label = input.required();
+    loaded = signal(false);
+    src = input();
     get backgroundColor() {
-        return this.color || this.colorService.hex(this._label);
+        return this.color() || this.colorService.hex(this.label());
     }
     get backgroundImage() {
-        return this._src ? `url(${this._src})` : '';
+        return this.src() ? `url(${this.src()})` : '';
     }
+    class = input();
     get hostClasses() {
-        return [
-            'ft-avatar',
-            this.class
-        ].join(' ');
+        return ['ft-avatar', this.class()].join(' ');
     }
-    constructor(colorService) {
-        this.colorService = colorService;
-        this.class = '';
-    }
-    ngOnInit() {
+    constructor() {
+        // Usa `effect` para reaccionar a los cambios en el valor de `src`
+        effect(() => {
+            const value = this.src();
+            if (value && value.trim() !== '') {
+                const image = new Image();
+                image.src = value;
+                image.onload = () => {
+                    if ('decode' in image) {
+                        image.decode().then(() => {
+                            this.loaded.set(true);
+                        });
+                    }
+                    else {
+                        console.error('Image.decode not available.');
+                    }
+                };
+            }
+        });
     }
     getInitials(value) {
-        let allInitials = value.match(/\b\w/g) || [];
-        let initials = ((allInitials.shift() || '') + (allInitials.pop() || '')).toUpperCase();
+        const allInitials = value.match(/\b\w/g) || [];
+        const initials = ((allInitials.shift() || '') + (allInitials.pop() || '')).toUpperCase();
         return initials;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: AvatarComponent, isStandalone: true, selector: "ft-avatar", inputs: { color: "color", src: "src", label: "label", class: "class" }, host: { properties: { "style.background-color": "this.backgroundColor", "style.background-image": "this.backgroundImage", "class": "this.hostClasses" } }, ngImport: i0, template: "<div *ngIf=\"!loaded\">{{ initials }}</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-avatar', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"!loaded\">{{ initials }}</div>" }]
-        }], ctorParameters: function () { return [{ type: i1.ColorService }]; }, propDecorators: { color: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], backgroundColor: [{
+            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: [{
                 type: HostBinding,
                 args: ['style.background-color']
             }], backgroundImage: [{
                 type: HostBinding,
                 args: ['style.background-image']
-            }], class: [{
-                type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class IconComponent {
-    set collection(collection) {
-        this._collection = collection;
-        this.update();
-    }
-    set mode(mode) {
-        this._mode = mode;
-        this.update();
+class ChartService {
+    resizeTimeout;
+    charts = new Map();
+    constructor() {
+        window.addEventListener('resize', this.handleResize.bind(this));
     }
-    set name(name) {
-        this._name = name;
-        this.update();
+    remove(element) {
+        this.charts.delete(element);
     }
-    set path(path) {
-        this._path = path;
-        this.update();
+    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;
+                }
+            });
+        }
     }
-    get hostClasses() {
-        return [
-            'ft-icon',
-            this.class
-        ].join(' ');
+    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();
     }
-    constructor(configuration) {
-        this.configuration = configuration;
-        this.class = '';
+    handleResize() {
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+            for (const [element, items] of this.charts.entries()) {
+                this.render(element, items);
+            }
+        }, 300);
     }
-    ngOnInit() {
-        this.update();
+    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;
     }
-    update() {
+    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();
+    url = computed(() => {
+        let collection = this.collection();
+        let mode = this.mode();
+        let path = this.path();
+        const options = this.options.get().iconSettings;
         // Set the default collection if the mode is external
-        if (!this._collection) {
-            if (this.configuration.icon && this.configuration.icon.collection) {
-                this._collection = this.configuration.icon.collection;
+        if (!this.collection()) {
+            if (options && options.collection) {
+                collection = options.collection;
             }
-            else if (this._mode === 'external') {
-                this._collection = 'icons';
+            else if (this.mode() === 'external') {
+                collection = 'icons';
             }
         }
-        if (!this._mode) {
-            if (this.configuration.icon && this.configuration.icon.mode) {
-                this._mode = this.configuration.icon.mode;
+        if (!this.mode()) {
+            if (this.options.get().iconSettings && options.mode) {
+                mode = options.mode;
             }
             else {
-                this._mode = 'external';
+                mode = 'external';
             }
         }
-        if (this._mode === 'external') {
+        if (mode === 'external') {
             // If the icon mode is external
-            if (!this._path) {
-                if (this.configuration.icon && this.configuration.icon.path) {
-                    this._path = this.configuration.icon.path;
+            if (!this.path()) {
+                if (options && 'path' in options) {
+                    path = options.path;
                 }
                 else {
-                    this._path = 'assets';
+                    path = 'assets';
                 }
             }
-            this.url = `${this._path}/${this._collection}.svg#${this._name}`;
+            return `${path}/${collection}.svg#${this.name()}`;
         }
         else {
             // If the icon mode is inline
-            const name = this._collection && this._collection !== 'unset' ? `${this._collection}--${this._name}` : this._name;
-            this.url = `#${name}`;
+            const name = this.collection() && this.collection() !== 'unset'
+                ? `${this.collection()}--${this.name()}`
+                : this.name();
+            return `#${name}`;
         }
+    });
+    class = input();
+    get hostClasses() {
+        return ['ft-icon', this.class()].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IconComponent, deps: [{ token: 'FactorUiConfiguration' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: IconComponent, isStandalone: true, selector: "ft-icon", inputs: { collection: "collection", mode: "mode", name: "name", path: "path", src: "src", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg *ngIf=\"!src; else imageTemplate\">\n    <use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" />\n</svg>\n<ng-template #imageTemplate>\n    <img [src]=\"src\" />\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ft-icon', standalone: true, imports: [CommonModule], template: "<svg *ngIf=\"!src; else imageTemplate\">\n    <use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" />\n</svg>\n<ng-template #imageTemplate>\n    <img [src]=\"src\" />\n</ng-template>" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['FactorUiConfiguration']
-                }] }]; }, propDecorators: { collection: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], hostClasses: [{
+            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']
             }] } });
 
 class ImageComponent {
-    constructor(element) {
-        this.element = element;
-        this.class = '';
-        this.loading = false;
-        this.shown = false;
-    }
+    element = inject(ElementRef);
+    class = input('');
+    error;
+    loading = false;
+    src = input.required();
+    alt = input('');
+    shown = false;
     ngOnInit() {
         if ("IntersectionObserver" in window) {
             let elementObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach((entry) => {
                     if (entry.isIntersecting) {
                         let image = new Image();
-                        image.src = this.src;
+                        image.src = this.src();
                         setTimeout(() => {
                             if (!this.shown && !this.error) {
                                 this.loading = true;
@@ -226,90 +467,354 @@ class ImageComponent {
     get hostClasses() {
         return [
             'ft-image',
-            this.class
+            this.class()
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: ImageComponent, isStandalone: true, selector: "ft-image", inputs: { class: "class", src: "src" }, host: { properties: { "class.ft-image--error": "this.error", "class.ft-image--loading": "this.loading", "class": "this.hostClasses" } }, ngImport: i0, template: "<img *ngIf=\"shown\" [src]=\"src\" />\n<ft-icon name=\"warning\" size=\"2\" *ngIf=\"error\"></ft-icon>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src", "class"] }] }); }
+    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}", dependencies: [{ kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src", "class"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ft-image', standalone: true, imports: [
-                        CommonModule,
                         IconComponent
-                    ], template: "<img *ngIf=\"shown\" [src]=\"src\" />\n<ft-icon name=\"warning\" size=\"2\" *ngIf=\"error\"></ft-icon>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { class: [{
-                type: Input
-            }], error: [{
+                    ], template: "@if (shown) {\n  <img [src]=\"src()\" [alt]=\"alt()\" />\n}\n@if (error) {\n  <ft-icon name=\"warning\" size=\"2\"></ft-icon>\n}" }]
+        }], propDecorators: { error: [{
                 type: HostBinding,
                 args: ['class.ft-image--error']
             }], loading: [{
                 type: HostBinding,
                 args: ['class.ft-image--loading']
-            }], src: [{
-                type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class ProgressComponent {
-    constructor() {
-        this.class = '';
-        this.mode = 'indeterminate';
-        this.overlay = false;
+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: `
+    @switch (data.message?.type) { @case ('html') {
+    <div [innerHTML]="data.message?.content"></div>
+    } @default {
+    {{ data.message?.content }}
+    } }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatSnackBarModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [MatSnackBarModule],
+                    template: `
+    @switch (data.message?.type) { @case ('html') {
+    <div [innerHTML]="data.message?.content"></div>
+    } @default {
+    {{ data.message?.content }}
+    } }
+  `,
+                }]
+        }] });
+class MessageDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    beforeSelect = output();
+    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: `
+    @if (data.options?.title) {
+    <h1 mat-dialog-title class="ft-message__title">
+      @if (data.options?.titleIcon) {
+      <ft-icon
+        [name]="data.options?.titleIcon?.name"
+        [collection]="data.options?.titleIcon?.collection"
+        [ngClass]="data.options?.titleIcon?.class"
+      ></ft-icon>
+      }
+      <div>{{ data.options?.title }}</div>
+    </h1>
+    }
+    <div
+      mat-dialog-content
+      class="ft-message__content"
+      [ngClass]="data.options?.class"
+    >
+      @if (data.options?.icon) {
+      <ft-icon
+        [name]="data.options?.icon?.name"
+        [collection]="data.options?.icon?.collection"
+        [ngClass]="data.options?.icon?.class"
+      ></ft-icon>
+      } @switch (data.message?.type) { @case ('html') {
+      <div [innerHTML]="data.message?.content"></div>
+      } @default {
+      {{ data.message?.content }}
+      } }
+    </div>
+    @if (data.options.actionsVisible) {
+    <div mat-dialog-actions class="ft-message__actions">
+      @if (data.options?.actions?.length > 0) { @for (action of
+      data.options?.actions; track action; let i = $index) { @switch
+      (action.type) { @case ('raised') {
+      <button
+        type="button"
+        mat-raised-button
+        [color]="action.metadata?.color"
+        (click)="select(action.value)"
+      >
+        {{ action.label }}
+      </button>
+      } @case ('flat') {
+      <button
+        type="button"
+        mat-flat-button
+        [color]="action.metadata?.color"
+        (click)="select(action.value)"
+      >
+        {{ action.label }}
+      </button>
+      } @case ('stroked') {
+      <button
+        type="button"
+        mat-stroked-button
+        [color]="action.metadata?.color"
+        (click)="select(action.value)"
+      >
+        {{ action.label }}
+      </button>
+      } @default {
+      <button type="button" mat-button (click)="select(action.value)">
+        {{ action.label }}
+      </button>
+      } } } } @else {
+      <button
+        type="button"
+        mat-flat-button
+        color="primary"
+        (click)="select('-1')"
+        i18n
+      >
+        Accept
+      </button>
+      }
+    </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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [CommonModule, MatButtonModule, MatDialogModule, IconComponent],
+                    template: `
+    @if (data.options?.title) {
+    <h1 mat-dialog-title class="ft-message__title">
+      @if (data.options?.titleIcon) {
+      <ft-icon
+        [name]="data.options?.titleIcon?.name"
+        [collection]="data.options?.titleIcon?.collection"
+        [ngClass]="data.options?.titleIcon?.class"
+      ></ft-icon>
+      }
+      <div>{{ data.options?.title }}</div>
+    </h1>
+    }
+    <div
+      mat-dialog-content
+      class="ft-message__content"
+      [ngClass]="data.options?.class"
+    >
+      @if (data.options?.icon) {
+      <ft-icon
+        [name]="data.options?.icon?.name"
+        [collection]="data.options?.icon?.collection"
+        [ngClass]="data.options?.icon?.class"
+      ></ft-icon>
+      } @switch (data.message?.type) { @case ('html') {
+      <div [innerHTML]="data.message?.content"></div>
+      } @default {
+      {{ data.message?.content }}
+      } }
+    </div>
+    @if (data.options.actionsVisible) {
+    <div mat-dialog-actions class="ft-message__actions">
+      @if (data.options?.actions?.length > 0) { @for (action of
+      data.options?.actions; track action; let i = $index) { @switch
+      (action.type) { @case ('raised') {
+      <button
+        type="button"
+        mat-raised-button
+        [color]="action.metadata?.color"
+        (click)="select(action.value)"
+      >
+        {{ action.label }}
+      </button>
+      } @case ('flat') {
+      <button
+        type="button"
+        mat-flat-button
+        [color]="action.metadata?.color"
+        (click)="select(action.value)"
+      >
+        {{ action.label }}
+      </button>
+      } @case ('stroked') {
+      <button
+        type="button"
+        mat-stroked-button
+        [color]="action.metadata?.color"
+        (click)="select(action.value)"
+      >
+        {{ action.label }}
+      </button>
+      } @default {
+      <button type="button" mat-button (click)="select(action.value)">
+        {{ action.label }}
+      </button>
+      } } } } @else {
+      <button
+        type="button"
+        mat-flat-button
+        color="primary"
+        (click)="select('-1')"
+        i18n
+      >
+        Accept
+      </button>
+      }
+    </div>
+    }
+  `,
+                }]
+        }] });
+class MessageService {
+    snackBar = inject(MatSnackBar);
+    dialog = inject(MatDialog);
+    stringService = inject(StringService);
+    show(message, options) {
+        const selectionSource = new ReplaySubject(undefined);
+        const selection = selectionSource.asObservable();
+        const defaults = {
+            type: 'notification',
+            duration: 2000,
+            actionsVisible: true,
+        };
+        options = Object.assign(defaults, options);
+        const data = {
+            message: typeof message === 'string'
+                ? { content: message, type: 'text' }
+                : message,
+            options,
+        };
+        let dialogRef;
+        switch (options.type) {
+            default:
+            case 'notification':
+                this.snackBar.openFromComponent(MessageContentComponent, {
+                    data,
+                    panelClass: ['ft-message', 'ft-message--notification'],
+                    duration: this.stringService.calculateReadingTime(typeof message === 'string' ? message : message.content),
+                    verticalPosition: options.verticalPosition || 'bottom',
+                });
+                break;
+            case 'modal':
+                dialogRef = this.dialog.open(MessageDialogComponent, {
+                    width: options.width || '350px',
+                    data,
+                    panelClass: ['ft-message', 'ft-message--modal'],
+                    autoFocus: false,
+                    disableClose: true,
+                });
+                dialogRef.componentInstance.beforeSelect.subscribe((response) => {
+                    selectionSource.next(response);
+                    dialogRef.close();
+                });
+                break;
+        }
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ObserveIntersectingDirective {
+    element = inject(ElementRef);
+    platformId = inject(PLATFORM_ID);
+    ftObserveIntersectingOptions = input();
+    event = output({ alias: 'ftObserveIntersecting' });
     ngOnInit() {
-        this.value = 0;
+        if (isPlatformBrowser(this.platformId)) {
+            if ('IntersectionObserver' in window) {
+                const elementObserver = new IntersectionObserver((entries) => {
+                    entries.forEach((entry) => {
+                        this.event.emit(entry.isIntersecting);
+                    });
+                }, this.ftObserveIntersectingOptions());
+                elementObserver.observe(this.element.nativeElement);
+            }
+            else {
+                console.error('ftObserveIntersecting not available in this browser.');
+            }
+        }
     }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ObserveIntersectingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ftObserveIntersecting]',
+                    standalone: true,
+                }]
+        }] });
+
+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
+            this.overlay() ? 'ft-progress--overlay' : '',
+            this.class()
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: ProgressComponent, isStandalone: true, 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\"\n        cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    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: "16.1.2", ngImport: i0, type: ProgressComponent, decorators: [{
+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 [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\"\n        cy=\"50\" r=\"40\"\n        [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n    </circle>\n</svg>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], overlay: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], hostClasses: [{
+            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']
             }] } });
 
 class RatingComponent {
-    constructor() {
-        this.disabled = false;
-        this.propagateChange = (_) => { };
-        this.readOnly = false;
-        this.stars = [
-            { value: 1 },
-            { value: 2 },
-            { value: 3 },
-            { value: 4 },
-            { value: 5 }
-        ];
-    }
-    ngOnInit() {
-    }
+    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);
@@ -337,16 +842,16 @@ class RatingComponent {
     writeValue(value) {
         this.value = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: RatingComponent, isStandalone: true, selector: "ft-rating", inputs: { readOnly: "readOnly", value: "value" }, providers: [
+    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: "<ng-container *ngFor=\"let star of stars\">\n    <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n    <button type=\"button\" class=\"ft-rating__item\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\"\n        (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n        (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n        <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n    <svg [ngClass]=\"{'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>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
+        ], 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: "16.1.2", ngImport: i0, type: RatingComponent, decorators: [{
+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: [
                         {
@@ -354,297 +859,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                             useExisting: RatingComponent,
                             multi: true
                         }
-                    ], template: "<ng-container *ngFor=\"let star of stars\">\n    <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n    <button type=\"button\" class=\"ft-rating__item\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\"\n        (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\"\n        (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n        <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n    </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n    <svg [ngClass]=\"{'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>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { readOnly: [{
-                type: Input
-            }], value: [{
+                    ], 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
             }] } });
 
-class TimelineComponent {
-    get hostClasses() {
-        return [
-            'ft-timeline',
-            this.class
-        ].join(' ');
-    }
-    ;
-    constructor() {
-        this.startDate = new Date();
-        this.data = [];
-        this.dataParsed = {
-            months: [],
-            days: [],
-            weekends: []
-        };
-        this.class = '';
-    }
-    ngOnInit() {
-        this.addMonth(this.calcStartDate());
-    }
-    addMonth(date) {
-        const month = this.getMonth(date.getMonth(), date.getFullYear());
-        const currentDays = this.dataParsed.days.length;
-        this.dataParsed.months = [...this.dataParsed.months, { date: month.days[0], daysInMonth: month.days.length }];
-        this.dataParsed.days = [...this.dataParsed.days, ...month.days];
-        this.dataParsed.weekends = [...this.dataParsed.weekends, ...month.weekends];
-        if (!this.currentDate && month.currentDate) {
-            this.currentDate = currentDays + month.currentDate;
-        }
-        this.dataParsed.days.some((day, index) => {
-            if ([0, 6].includes(day.getDay())) {
-                this.dataParsed.weekendStart = index;
-                return true;
-            }
-            return false;
-        });
-        this.parseTasks();
-    }
-    calcStartDate() {
-        return new Date();
-    }
-    getMonth(month, year) {
-        const days = [];
-        const weekends = [];
-        let currentDate = null;
-        let today = new Date();
-        const date = new Date(year, month + 1, 0);
-        for (let i = 1; i <= date.getDate(); i++) {
-            const idate = new Date(year, month, i);
-            if ([0, 6].includes(idate.getDay())) {
-                if (idate.getDay() === 6) {
-                    weekends.push([idate]);
-                }
-                else {
-                    weekends[weekends.length - 1].push(idate);
-                }
-            }
-            if (idate.getTime() === new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime()) {
-                currentDate = i - 1;
-            }
-            days.push(idate);
-        }
-        const data = { days, weekends };
-        if (currentDate) {
-            data.currentDate = currentDate;
-        }
-        return data;
-    }
-    parseTasks() {
-        let tasks = this.data.filter(task => task.endAt) /*.sort((a, b) => a.)*/;
-        this.dataParsed.tasks = tasks.map((task) => {
-            return {
-                label: task.label,
-                start: 10,
-                type: task.type,
-                size: 1
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TimelineComponent, isStandalone: true, selector: "ft-timeline", inputs: { data: "data", class: "class" }, host: { properties: { "style.--current-date": "this.currentDate", "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"ft-weekends\" [style.--start]=\"dataParsed.weekendStart\">\n    <div class=\"ft-weekends__item\" [style.--weekend-size]=\"weekend.length\" *ngFor=\"let weekend of dataParsed.weekends\">\n    </div>\n</div>\n<div class=\"ft-current-date\" *ngIf=\"currentDate\"></div>\n<div class=\"ft-header\">\n    <div class=\"ft-header__months\">\n        <div [style.--days-in-month]=\"month.daysInMonth\" *ngFor=\"let month of dataParsed.months; let i = index\">{{\n            month.date\n            | date: 'MMMM, yyyy' }}</div>\n    </div>\n    <div class=\"ft-header__days\">\n        <div *ngFor=\"let day of dataParsed.days; let i = index\">\n            <div [ngClass]=\"{active: currentDate && currentDate === i}\">{{ day | date:'d' }}</div>\n        </div>\n    </div>\n</div>\n<div class=\"ft-tasks\">\n    <button type=\"button\" class=\"ft-tasks__item\" [class.tasks__item--milestone]=\"task.type === 'milestone'\"\n        [style.--start]=\"task.start\" [style.--days]=\"task.type === 'milestone' ? 1 : task.size\"\n        style=\" --color-rgb: 130, 121, 210;\" *ngFor=\"let task of dataParsed.tasks;\">{{ task.label }}</button>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+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: "16.1.2", ngImport: i0, type: TimelineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ft-timeline', standalone: true, imports: [CommonModule], template: "<div class=\"ft-weekends\" [style.--start]=\"dataParsed.weekendStart\">\n    <div class=\"ft-weekends__item\" [style.--weekend-size]=\"weekend.length\" *ngFor=\"let weekend of dataParsed.weekends\">\n    </div>\n</div>\n<div class=\"ft-current-date\" *ngIf=\"currentDate\"></div>\n<div class=\"ft-header\">\n    <div class=\"ft-header__months\">\n        <div [style.--days-in-month]=\"month.daysInMonth\" *ngFor=\"let month of dataParsed.months; let i = index\">{{\n            month.date\n            | date: 'MMMM, yyyy' }}</div>\n    </div>\n    <div class=\"ft-header__days\">\n        <div *ngFor=\"let day of dataParsed.days; let i = index\">\n            <div [ngClass]=\"{active: currentDate && currentDate === i}\">{{ day | date:'d' }}</div>\n        </div>\n    </div>\n</div>\n<div class=\"ft-tasks\">\n    <button type=\"button\" class=\"ft-tasks__item\" [class.tasks__item--milestone]=\"task.type === 'milestone'\"\n        [style.--start]=\"task.start\" [style.--days]=\"task.type === 'milestone' ? 1 : task.size\"\n        style=\" --color-rgb: 130, 121, 210;\" *ngFor=\"let task of dataParsed.tasks;\">{{ task.label }}</button>\n</div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
-                type: Input
-            }], currentDate: [{
-                type: HostBinding,
-                args: ['style.--current-date']
-            }], class: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class ObserveIntersectingDirective {
-    constructor(element, platformId = {}) {
-        this.element = element;
-        this.platformId = platformId;
-        this.event = new EventEmitter();
-    }
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            if ("IntersectionObserver" in window) {
-                const elementObserver = new IntersectionObserver((entries, observer) => {
-                    entries.forEach((entry) => {
-                        this.event.emit(entry.isIntersecting);
-                    });
-                }, this.options);
-                elementObserver.observe(this.element.nativeElement);
-            }
-            else {
-                console.error('ftObserveIntersecting not available in this browser.');
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ObserveIntersectingDirective, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: ObserveIntersectingDirective, isStandalone: true, selector: "[ftObserveIntersecting]", inputs: { options: ["ftObserveIntersectingOptions", "options"] }, outputs: { event: "ftObserveIntersecting" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ObserveIntersectingDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UiModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[ftObserveIntersecting]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }]; }, propDecorators: { options: [{
-                type: Input,
-                args: ['ftObserveIntersectingOptions']
-            }], event: [{
-                type: Output,
-                args: ['ftObserveIntersecting']
-            }] } });
-
-class MessageContentComponent {
-    constructor(data) {
-        this.data = data;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MessageContentComponent, deps: [{ token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: MessageContentComponent, isStandalone: true, selector: "ft-message-content", ngImport: i0, template: "<ng-container [ngSwitch]=\"data.message?.type\">\n    <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n    <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MessageContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ft-message-content', standalone: true, imports: [CommonModule], template: "<ng-container [ngSwitch]=\"data.message?.type\">\n    <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n    <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n</ng-container>" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_SNACK_BAR_DATA]
-                }] }]; } });
-
-class MessageDialogComponent {
-    constructor(data) {
-        this.data = data;
-        this.beforeSelect = new EventEmitter();
-    }
-    select(value) {
-        this.beforeSelect.emit(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MessageDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: MessageDialogComponent, isStandalone: true, selector: "ft-message-dialog", 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\"></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\"></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)\">{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ 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\" (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["collection", "mode", "name", "path", "src", "class"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MessageDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ft-message-dialog', standalone: true, imports: [
+                    declarations: [],
+                    imports: [
                         CommonModule,
-                        MatButtonModule,
-                        IconComponent
-                    ], 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\"></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\"></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)\">{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ action.label }}</button>\n                <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n                    (click)=\"select(action.value)\">{{ 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\" (click)=\"select('-1')\" i18n>Accept</button>\n</ng-template>" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }]; }, propDecorators: { beforeSelect: [{
-                type: Output
-            }] } });
-
-class MessageService {
-    constructor(snackBar, dialog) {
-        this.snackBar = snackBar;
-        this.dialog = dialog;
-    }
-    show(message, options) {
-        const selectionSource = new ReplaySubject(undefined);
-        const selection = selectionSource.asObservable();
-        const defaults = {
-            type: 'notification',
-            duration: 2000,
-            actionsVisible: true
-        };
-        options = Object.assign(defaults, options);
-        const data = { message: typeof message === 'string' ? { content: message, type: 'text' } : message, options };
-        let dialogRef;
-        switch (options.type) {
-            default:
-            case 'notification':
-                this.snackBar.openFromComponent(MessageContentComponent, {
-                    data,
-                    panelClass: ['ft-message', 'ft-message--notification', options.class || ''],
-                    duration: options.duration || 2000,
-                    verticalPosition: options.verticalPosition || 'bottom'
-                });
-                break;
-            case 'modal':
-                dialogRef = this.dialog.open(MessageDialogComponent, {
-                    width: options.width || '350px',
-                    data,
-                    panelClass: ['ft-message', 'ft-message--modal'],
-                    autoFocus: false,
-                    disableClose: true
-                });
-                dialogRef.componentInstance.beforeSelect.subscribe((response) => {
-                    selectionSource.next(response);
-                    dialogRef.close();
-                });
-                this.snackBar.dismiss();
-                break;
-        }
-        return selection;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MessageService, deps: [{ token: i1$2.MatSnackBar }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MessageService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MessageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
+                        AvatarComponent,
+                        IconComponent,
+                        ImageComponent,
+                        ProgressComponent,
+                        RatingComponent,
+                        ObserveIntersectingDirective
+                    ],
+                    exports: [
+                        AvatarComponent,
+                        IconComponent,
+                        ImageComponent,
+                        ProgressComponent,
+                        RatingComponent,
+                        ObserveIntersectingDirective
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatSnackBar }, { type: i2$1.MatDialog }]; } });
-
-class ProgressService {
-    constructor(viewContainerRef, injector) {
-        this.viewContainerRef = viewContainerRef;
-        this.injector = injector;
-    }
-    show() {
-        if (!this.componentRef) {
-            this.appRef = this.injector.get(ApplicationRef);
-            // 1. Create a component reference from the component 
-            this.componentRef = this.viewContainerRef.createComponent(ProgressComponent);
-            // 2. Attach component to the appRef so that it's inside the ng component tree
-            this.appRef.attachView(this.componentRef.hostView);
-            this.componentRef.instance.overlay = true;
-            // 3. Get DOM element from component
-            const domElem = this.componentRef.hostView
-                .rootNodes[0];
-            // 4. Append DOM element to the body
-            document.body.appendChild(domElem);
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    hide() {
-        if (this.componentRef) {
-            this.appRef.detachView(this.componentRef.hostView);
-            this.componentRef.destroy();
-            this.componentRef = null;
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ProgressService, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ProgressService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ProgressService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Injector }]; } });
-
-/*
- * Public API Surface of ui
- */
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, IconComponent, ImageComponent, MessageService, ObserveIntersectingDirective, ProgressComponent, ProgressService, RatingComponent, TimelineComponent };
+export { AvatarComponent, ChartService, IconComponent, ImageComponent, MessageContentComponent, MessageDialogComponent, MessageService, ObserveIntersectingDirective, ProgressComponent, RatingComponent, UI_OPTIONS, UiModule };
 //# sourceMappingURL=factor_ec-ui.mjs.map