@factor_ec/ui 3.0.1 → 4.0.0

package/esm2022/lib/ui.module.mjs

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { ObserveInersectingDirective } from './observe-inersecting.directive';
+import * as i0 from "@angular/core";
+export class UiModule {
+    static forRoot(configuration) {
+        return {
+            ngModule: UiModule,
+            providers: [
+                { provide: 'FactorUiConfiguration', useValue: configuration }
+            ]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: UiModule, declarations: [ObserveInersectingDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: UiModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: UiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ObserveInersectingDirective
+                    ],
+                    imports: [],
+                    exports: []
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidWkubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi91aS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUF1QixRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFOUQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0saUNBQWlDLENBQUM7O0FBWTlFLE1BQU0sT0FBTyxRQUFRO0lBQ1osTUFBTSxDQUFDLE9BQU8sQ0FBQyxhQUErQjtRQUNuRCxPQUFPO1lBQ0wsUUFBUSxFQUFFLFFBQVE7WUFDbEIsU0FBUyxFQUFFO2dCQUNULEVBQUUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUU7YUFDOUQ7U0FDRixDQUFDO0lBQ0osQ0FBQzs4R0FSVSxRQUFROytHQUFSLFFBQVEsaUJBUGpCLDJCQUEyQjsrR0FPbEIsUUFBUTs7MkZBQVIsUUFBUTtrQkFWcEIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBRVosMkJBQTJCO3FCQUM1QjtvQkFDRCxPQUFPLEVBQUUsRUFDUjtvQkFDRCxPQUFPLEVBQUUsRUFDUjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE1vZHVsZVdpdGhQcm92aWRlcnMsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVaUNvbmZpZ3VyYXRpb24gfSBmcm9tICcuL21vZGVscy91aS1jb25maWd1cmF0aW9uJztcbmltcG9ydCB7IE9ic2VydmVJbmVyc2VjdGluZ0RpcmVjdGl2ZSB9IGZyb20gJy4vb2JzZXJ2ZS1pbmVyc2VjdGluZy5kaXJlY3RpdmUnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgXG4gICAgT2JzZXJ2ZUluZXJzZWN0aW5nRGlyZWN0aXZlXG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgXSxcbiAgZXhwb3J0czogW1xuICBdXG59KVxuZXhwb3J0IGNsYXNzIFVpTW9kdWxlIHsgXG4gIHB1YmxpYyBzdGF0aWMgZm9yUm9vdChjb25maWd1cmF0aW9uPzogVWlDb25maWd1cmF0aW9uKTogTW9kdWxlV2l0aFByb3ZpZGVyczxVaU1vZHVsZT4ge1xuICAgIHJldHVybiB7XG4gICAgICBuZ01vZHVsZTogVWlNb2R1bGUsXG4gICAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgeyBwcm92aWRlOiAnRmFjdG9yVWlDb25maWd1cmF0aW9uJywgdXNlVmFsdWU6IGNvbmZpZ3VyYXRpb24gfVxuICAgICAgXVxuICAgIH07XG4gIH1cbn1cbiJdfQ==

package/esm2022/public-api.mjs

@@ -0,0 +1,12 @@
+/*
+ * Public API Surface of ui
+ */
+export * from './lib/ui.module';
+export * from './lib/io/avatar/avatar.component';
+export * from './lib/io/icon/icon.component';
+export * from './lib/io/image/image.component';
+export * from './lib/io/progress/progress.component';
+export * from './lib/io/rating/rating.component';
+export * from './lib/io/timeline/timeline.component';
+export * from './lib/observe-inersecting.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3VpL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLHNDQUFzQyxDQUFDO0FBQ3JELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLHFDQUFxQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiB1aVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3VpLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9pY29uL2ljb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lvL2ltYWdlL2ltYWdlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pby9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vcmF0aW5nL3JhdGluZy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW8vdGltZWxpbmUvdGltZWxpbmUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL29ic2VydmUtaW5lcnNlY3RpbmcuZGlyZWN0aXZlJztcbiJdfQ==

package/fesm2022/factor_ec-ui.mjs

@@ -0,0 +1,515 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, NgModule, Component, HostBinding } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1 from '@factor_ec/utils';
+
+class ObserveInersectingDirective {
+    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: ObserveInersectingDirective, 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: ObserveInersectingDirective, selector: "[ftObserveInersecting]", inputs: { options: ["ftObserveIntersectingOptions", "options"] }, outputs: { event: "ftObserveIntersecting" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ObserveInersectingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ftObserveInersecting]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['ftObserveIntersectingOptions']
+            }], event: [{
+                type: Output,
+                args: ['ftObserveIntersecting']
+            }] } });
+
+class UiModule {
+    static forRoot(configuration) {
+        return {
+            ngModule: UiModule,
+            providers: [
+                { provide: 'FactorUiConfiguration', useValue: configuration }
+            ]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: UiModule, declarations: [ObserveInersectingDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: UiModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: UiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ObserveInersectingDirective
+                    ],
+                    imports: [],
+                    exports: []
+                }]
+        }] });
+
+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);
+    }
+    get backgroundColor() {
+        return this.color || this.colorService.hex(this._label);
+    }
+    get backgroundImage() {
+        return this._src ? `url(${this._src})` : '';
+    }
+    get hostClasses() {
+        return [
+            'ft-avatar',
+            this.class
+        ].join(' ');
+    }
+    constructor(colorService) {
+        this.colorService = colorService;
+        this.class = '';
+    }
+    ngOnInit() {
+    }
+    getInitials(value) {
+        let allInitials = value.match(/\b\w/g) || [];
+        let 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", 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: [{
+                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();
+    }
+    set name(name) {
+        this._name = name;
+        this.update();
+    }
+    set path(path) {
+        this._path = path;
+        this.update();
+    }
+    get hostClasses() {
+        return [
+            'ft-icon',
+            this.class
+        ].join(' ');
+    }
+    constructor(configuration) {
+        this.configuration = configuration;
+        this.class = '';
+    }
+    ngOnInit() {
+        this.update();
+    }
+    update() {
+        // Set the default collection if the mode is external
+        if (!this._collection) {
+            if (this.configuration.icon && this.configuration.icon.collection) {
+                this._collection = this.configuration.icon.collection;
+            }
+            else if (this._mode === 'external') {
+                this._collection = 'icons';
+            }
+        }
+        if (!this._mode) {
+            if (this.configuration.icon && this.configuration.icon.mode) {
+                this._mode = this.configuration.icon.mode;
+            }
+            else {
+                this._mode = 'external';
+            }
+        }
+        if (this._mode === 'external') {
+            // If the icon mode is external
+            if (!this._path) {
+                if (this.configuration.icon && this.configuration.icon.path) {
+                    this._path = this.configuration.icon.path;
+                }
+                else {
+                    this._path = 'assets';
+                }
+            }
+            this.url = `${this._path}/${this._collection}.svg#${this._name}`;
+        }
+        else {
+            // If the icon mode is inline
+            const name = this._collection && this._collection !== 'unset' ? `${this._collection}--${this._name}` : this._name;
+            this.url = `#${name}`;
+        }
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ImageComponent {
+    constructor(element) {
+        this.element = element;
+        this.class = '';
+        this.loading = false;
+        this.shown = false;
+    }
+    ngOnInit() {
+        if ("IntersectionObserver" in window) {
+            let elementObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        let image = new Image();
+                        image.src = this.src;
+                        setTimeout(() => {
+                            if (!this.shown && !this.error) {
+                                this.loading = true;
+                            }
+                        }, 100);
+                        image.onerror = () => {
+                            this.error = true;
+                            this.loading = false;
+                        };
+                        image.onload = () => {
+                            if ("decode" in image) {
+                                image.decode().then(() => {
+                                    this.loading = false;
+                                    this.shown = true;
+                                });
+                            }
+                            else {
+                                this.loading = false;
+                                this.shown = true;
+                            }
+                        };
+                        elementObserver.unobserve(this.element.nativeElement);
+                    }
+                });
+            }, {
+                rootMargin: "0px 0px 200px 0px"
+            });
+            elementObserver.observe(this.element.nativeElement);
+        }
+        else {
+            console.error('IntersectionObserver not available.');
+            this.loading = false;
+            this.shown = true;
+        }
+    }
+    get hostClasses() {
+        return [
+            'ft-image',
+            this.class
+        ].join(' ');
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", 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: [{
+                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;
+    }
+    ngOnInit() {
+        this.value = 0;
+    }
+    get hostClasses() {
+        return [
+            'ft-progress',
+            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: "lib-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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-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: [{
+                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() {
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.propagateChange(this._value);
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        //this.propagateChange = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    setRate(value, isHover) {
+        if (isHover) {
+            this.hoverValue = value;
+        }
+        else {
+            this.value = value;
+        }
+    }
+    updateValue(event) {
+        this.value = event.target.value;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    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: "lib-rating", inputs: { readOnly: "readOnly", value: "value" }, 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-rating', standalone: true, imports: [CommonModule], 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: [{
+                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: "lib-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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-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']
+            }] } });
+
+/*
+ * Public API Surface of ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent, IconComponent, ImageComponent, ObserveInersectingDirective, ProgressComponent, RatingComponent, TimelineComponent, UiModule };
+//# sourceMappingURL=factor_ec-ui.mjs.map