@annalib/anna-core 30.0.5 → 30.0.6

package/esm2022/lib/anna-core-shared-lib/components/anna-circular-progress/anna-circular-progress.component.mjs

@@ -0,0 +1,52 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer2 } from "@angular/core";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class AnnaCircularProgressComponent {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.percent = 0;
+        this.radius = 22;
+        this.outerStrokeWidth = 5;
+        this.innerStrokeWidth = 5;
+        this.outerStrokeColor = "#268bff";
+        this.innerStrokeColor = "#d5d5d5";
+        this.animationDuration = 0;
+        this.circumference = 0;
+    }
+    ngOnChanges() {
+        this.updateCircumference();
+        this.applyAnimationDuration();
+    }
+    updateCircumference() {
+        this.circumference = 2 * Math.PI * (this.radius - this.outerStrokeWidth / 2);
+    }
+    applyAnimationDuration() {
+        const progressBar = this.el.nativeElement.querySelector(".custom-progress-bar");
+        if (progressBar) {
+            this.renderer.setStyle(progressBar, "transition", `stroke-dashoffset ${this.animationDuration}ms ease`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnaCircularProgressComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AnnaCircularProgressComponent, isStandalone: true, selector: "anna-core-circular-progress", inputs: { percent: "percent", radius: "radius", outerStrokeWidth: "outerStrokeWidth", innerStrokeWidth: "innerStrokeWidth", outerStrokeColor: "outerStrokeColor", innerStrokeColor: "innerStrokeColor", animationDuration: "animationDuration" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"custom-progress-wrapper\"\r\n    [ngStyle]=\"{ width: radius * 2 + 1 + 'px', height: radius * 2 + 1 + 'px' }\"\r\n>\r\n    <svg\r\n        class=\"custom-progress-circle\"\r\n        [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\r\n    >\r\n        <!-- Background circle -->\r\n        <circle\r\n            class=\"custom-progress-bg\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"innerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n        ></circle>\r\n\r\n        <!-- Progress circle -->\r\n        <circle\r\n            class=\"custom-progress-bar\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"outerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n            [attr.stroke-dasharray]=\"circumference\"\r\n            [attr.stroke-dashoffset]=\"circumference - (percent / 100) * circumference\"\r\n            [attr.transform]=\"'rotate(' + radius + ' ' + radius + ')'\"\r\n        ></circle>\r\n    </svg>\r\n</div>\r\n", styles: [".custom-progress-wrapper{position:relative;display:flex}.custom-progress-circle{width:100%;height:100%;transform:rotate(-90deg)}.custom-progress-bar{stroke-linecap:round;transition:stroke-dashoffset .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnaCircularProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "anna-core-circular-progress", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"custom-progress-wrapper\"\r\n    [ngStyle]=\"{ width: radius * 2 + 1 + 'px', height: radius * 2 + 1 + 'px' }\"\r\n>\r\n    <svg\r\n        class=\"custom-progress-circle\"\r\n        [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\r\n    >\r\n        <!-- Background circle -->\r\n        <circle\r\n            class=\"custom-progress-bg\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"innerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n        ></circle>\r\n\r\n        <!-- Progress circle -->\r\n        <circle\r\n            class=\"custom-progress-bar\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"outerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n            [attr.stroke-dasharray]=\"circumference\"\r\n            [attr.stroke-dashoffset]=\"circumference - (percent / 100) * circumference\"\r\n            [attr.transform]=\"'rotate(' + radius + ' ' + radius + ')'\"\r\n        ></circle>\r\n    </svg>\r\n</div>\r\n", styles: [".custom-progress-wrapper{position:relative;display:flex}.custom-progress-circle{width:100%;height:100%;transform:rotate(-90deg)}.custom-progress-bar{stroke-linecap:round;transition:stroke-dashoffset .3s ease}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { percent: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], outerStrokeWidth: [{
+                type: Input
+            }], innerStrokeWidth: [{
+                type: Input
+            }], outerStrokeColor: [{
+                type: Input
+            }], innerStrokeColor: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5uYS1jaXJjdWxhci1wcm9ncmVzcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbm5hLWNvcmUvc3JjL2xpYi9hbm5hLWNvcmUtc2hhcmVkLWxpYi9jb21wb25lbnRzL2FubmEtY2lyY3VsYXItcHJvZ3Jlc3MvYW5uYS1jaXJjdWxhci1wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbm5hLWNvcmUvc3JjL2xpYi9hbm5hLWNvcmUtc2hhcmVkLWxpYi9jb21wb25lbnRzL2FubmEtY2lyY3VsYXItcHJvZ3Jlc3MvYW5uYS1jaXJjdWxhci1wcm9ncmVzcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFhLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBVTVHLE1BQU0sT0FBTyw2QkFBNkI7SUFXdEMsWUFDWSxFQUFjLEVBQ2QsUUFBbUI7UUFEbkIsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUNkLGFBQVEsR0FBUixRQUFRLENBQVc7UUFadEIsWUFBTyxHQUFXLENBQUMsQ0FBQztRQUNwQixXQUFNLEdBQVcsRUFBRSxDQUFDO1FBQ3BCLHFCQUFnQixHQUFXLENBQUMsQ0FBQztRQUM3QixxQkFBZ0IsR0FBVyxDQUFDLENBQUM7UUFDN0IscUJBQWdCLEdBQVcsU0FBUyxDQUFDO1FBQ3JDLHFCQUFnQixHQUFXLFNBQVMsQ0FBQztRQUNyQyxzQkFBaUIsR0FBVyxDQUFDLENBQUM7UUFFdkMsa0JBQWEsR0FBVyxDQUFDLENBQUM7SUFLdkIsQ0FBQztJQUVKLFdBQVc7UUFDUCxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztRQUMzQixJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQsbUJBQW1CO1FBQ2YsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ2pGLENBQUM7SUFFRCxzQkFBc0I7UUFDbEIsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLHNCQUFzQixDQUFDLENBQUM7UUFDaEYsSUFBSSxXQUFXLEVBQUU7WUFDYixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsWUFBWSxFQUFFLHFCQUFxQixJQUFJLENBQUMsaUJBQWlCLFNBQVMsQ0FBQyxDQUFDO1NBQzNHO0lBQ0wsQ0FBQzsrR0E5QlEsNkJBQTZCO21HQUE3Qiw2QkFBNkIsOFZDWDFDLHl5Q0FrQ0EsMlFENUJjLFlBQVk7OzRGQUtiLDZCQUE2QjtrQkFSekMsU0FBUzsrQkFDSSw2QkFBNkIsY0FDM0IsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDLG1CQUdOLHVCQUF1QixDQUFDLE1BQU07eUhBR3RDLE9BQU87c0JBQWYsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLGlCQUFpQjtzQkFBekIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcclxuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uQ2hhbmdlcywgUmVuZGVyZXIyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6IFwiYW5uYS1jb3JlLWNpcmN1bGFyLXByb2dyZXNzXCIsXHJcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gICAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXHJcbiAgICB0ZW1wbGF0ZVVybDogXCIuL2FubmEtY2lyY3VsYXItcHJvZ3Jlc3MuY29tcG9uZW50Lmh0bWxcIixcclxuICAgIHN0eWxlVXJsczogW1wiLi9hbm5hLWNpcmN1bGFyLXByb2dyZXNzLmNvbXBvbmVudC5zY3NzXCJdLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBBbm5hQ2lyY3VsYXJQcm9ncmVzc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XHJcbiAgICBASW5wdXQoKSBwZXJjZW50OiBudW1iZXIgPSAwO1xyXG4gICAgQElucHV0KCkgcmFkaXVzOiBudW1iZXIgPSAyMjtcclxuICAgIEBJbnB1dCgpIG91dGVyU3Ryb2tlV2lkdGg6IG51bWJlciA9IDU7XHJcbiAgICBASW5wdXQoKSBpbm5lclN0cm9rZVdpZHRoOiBudW1iZXIgPSA1O1xyXG4gICAgQElucHV0KCkgb3V0ZXJTdHJva2VDb2xvcjogc3RyaW5nID0gXCIjMjY4YmZmXCI7XHJcbiAgICBASW5wdXQoKSBpbm5lclN0cm9rZUNvbG9yOiBzdHJpbmcgPSBcIiNkNWQ1ZDVcIjtcclxuICAgIEBJbnB1dCgpIGFuaW1hdGlvbkR1cmF0aW9uOiBudW1iZXIgPSAwO1xyXG5cclxuICAgIGNpcmN1bWZlcmVuY2U6IG51bWJlciA9IDA7XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcclxuICAgICAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXHJcbiAgICApIHt9XHJcblxyXG4gICAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy51cGRhdGVDaXJjdW1mZXJlbmNlKCk7XHJcbiAgICAgICAgdGhpcy5hcHBseUFuaW1hdGlvbkR1cmF0aW9uKCk7XHJcbiAgICB9XHJcblxyXG4gICAgdXBkYXRlQ2lyY3VtZmVyZW5jZSgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmNpcmN1bWZlcmVuY2UgPSAyICogTWF0aC5QSSAqICh0aGlzLnJhZGl1cyAtIHRoaXMub3V0ZXJTdHJva2VXaWR0aCAvIDIpO1xyXG4gICAgfVxyXG5cclxuICAgIGFwcGx5QW5pbWF0aW9uRHVyYXRpb24oKTogdm9pZCB7XHJcbiAgICAgICAgY29uc3QgcHJvZ3Jlc3NCYXIgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcihcIi5jdXN0b20tcHJvZ3Jlc3MtYmFyXCIpO1xyXG4gICAgICAgIGlmIChwcm9ncmVzc0Jhcikge1xyXG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHByb2dyZXNzQmFyLCBcInRyYW5zaXRpb25cIiwgYHN0cm9rZS1kYXNob2Zmc2V0ICR7dGhpcy5hbmltYXRpb25EdXJhdGlvbn1tcyBlYXNlYCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiIsIjxkaXZcclxuICAgIGNsYXNzPVwiY3VzdG9tLXByb2dyZXNzLXdyYXBwZXJcIlxyXG4gICAgW25nU3R5bGVdPVwieyB3aWR0aDogcmFkaXVzICogMiArIDEgKyAncHgnLCBoZWlnaHQ6IHJhZGl1cyAqIDIgKyAxICsgJ3B4JyB9XCJcclxuPlxyXG4gICAgPHN2Z1xyXG4gICAgICAgIGNsYXNzPVwiY3VzdG9tLXByb2dyZXNzLWNpcmNsZVwiXHJcbiAgICAgICAgW2F0dHIudmlld0JveF09XCInMCAwICcgKyByYWRpdXMgKiAyICsgJyAnICsgcmFkaXVzICogMlwiXHJcbiAgICA+XHJcbiAgICAgICAgPCEtLSBCYWNrZ3JvdW5kIGNpcmNsZSAtLT5cclxuICAgICAgICA8Y2lyY2xlXHJcbiAgICAgICAgICAgIGNsYXNzPVwiY3VzdG9tLXByb2dyZXNzLWJnXCJcclxuICAgICAgICAgICAgW2F0dHIuY3hdPVwicmFkaXVzXCJcclxuICAgICAgICAgICAgW2F0dHIuY3ldPVwicmFkaXVzXCJcclxuICAgICAgICAgICAgW2F0dHIucl09XCJyYWRpdXMgLSBvdXRlclN0cm9rZVdpZHRoIC8gMlwiXHJcbiAgICAgICAgICAgIFthdHRyLnN0cm9rZS13aWR0aF09XCJvdXRlclN0cm9rZVdpZHRoXCJcclxuICAgICAgICAgICAgW2F0dHIuc3Ryb2tlXT1cImlubmVyU3Ryb2tlQ29sb3JcIlxyXG4gICAgICAgICAgICBbYXR0ci5maWxsXT1cIidub25lJ1wiXHJcbiAgICAgICAgPjwvY2lyY2xlPlxyXG5cclxuICAgICAgICA8IS0tIFByb2dyZXNzIGNpcmNsZSAtLT5cclxuICAgICAgICA8Y2lyY2xlXHJcbiAgICAgICAgICAgIGNsYXNzPVwiY3VzdG9tLXByb2dyZXNzLWJhclwiXHJcbiAgICAgICAgICAgIFthdHRyLmN4XT1cInJhZGl1c1wiXHJcbiAgICAgICAgICAgIFthdHRyLmN5XT1cInJhZGl1c1wiXHJcbiAgICAgICAgICAgIFthdHRyLnJdPVwicmFkaXVzIC0gb3V0ZXJTdHJva2VXaWR0aCAvIDJcIlxyXG4gICAgICAgICAgICBbYXR0ci5zdHJva2Utd2lkdGhdPVwib3V0ZXJTdHJva2VXaWR0aFwiXHJcbiAgICAgICAgICAgIFthdHRyLnN0cm9rZV09XCJvdXRlclN0cm9rZUNvbG9yXCJcclxuICAgICAgICAgICAgW2F0dHIuZmlsbF09XCInbm9uZSdcIlxyXG4gICAgICAgICAgICBbYXR0ci5zdHJva2UtZGFzaGFycmF5XT1cImNpcmN1bWZlcmVuY2VcIlxyXG4gICAgICAgICAgICBbYXR0ci5zdHJva2UtZGFzaG9mZnNldF09XCJjaXJjdW1mZXJlbmNlIC0gKHBlcmNlbnQgLyAxMDApICogY2lyY3VtZmVyZW5jZVwiXHJcbiAgICAgICAgICAgIFthdHRyLnRyYW5zZm9ybV09XCIncm90YXRlKCcgKyByYWRpdXMgKyAnICcgKyByYWRpdXMgKyAnKSdcIlxyXG4gICAgICAgID48L2NpcmNsZT5cclxuICAgIDwvc3ZnPlxyXG48L2Rpdj5cclxuIl19