@acorex/components 18.5.17 → 18.6.0

package/fesm2022/acorex-components-circular-progress.mjs

@@ -1,6 +1,6 @@
 import { MXColorComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Output, Input, HostBinding, NgModule } from '@angular/core';
+import { viewChild, input, model, afterNextRender, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
 
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
@@ -8,108 +8,48 @@ import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Vi
  * @category Components
  */
 class AXCircularProgressComponent extends MXColorComponent {
+    /**
+     *  @ignore
+     */
     constructor() {
-        super(...arguments);
-        /**
-         *  @ignore
-         */
-        this.strokeDashoffset = 0;
+        super();
         /**
          *  @ignore
          */
-        this.circumference = 0;
+        this.circle = viewChild('circle');
         /**
-         *  @ignore
-         */
-        this.normalizedRadius = 0;
-        /**
-         * Emits when the value of the circular progress changes.
+         * Defines the current progress of the circular progress component.
          *
-         * @event
-         */
-        this.ValueChange = new EventEmitter();
-        /**
-         *  @ignore
-         */
-        this._progress = 0;
-        /**
-         * Emitted when the stroke width of the circular progress component changes.
+         * Change progress mode
          *
-         * @event
          */
-        this.strokeChange = new EventEmitter();
+        this.mode = input('determinate');
         /**
-         *  @ignore
+         * Defines the current progress of the circular progress component.
+         *
+         * The percentage value to set for the progress.
+         *
          */
-        this._stroke = 4;
+        this.progress = model();
         /**
-         * Emits when the size of the circular progress component changes.
+         * Defines the stroke width of the circular progress component.
          *
-         * @event
+         * The stroke width to be set for the circular progress component.
          */
-        this.sizeChange = new EventEmitter();
+        this.stroke = model();
         /**
-         *  @ignore
+         * Defines the stroke width of the circular progress component.
+         *
+         * Circle size
          */
-        this._size = 48;
-    }
-    /**
-     *  @ignore
-     */
-    ngAfterViewInit() {
-        this.setCircularSize();
-        this.updateProgress();
-    }
-    /**
-     * Defines the current progress of the circular progress component.
-     *
-     * @param v - The percentage value to set for the progress.
-     *
-     */
-    get progress() {
-        return this._progress;
-    }
-    set progress(v) {
-        this.setOption({
-            name: 'progress',
-            value: v,
-            afterCallback: () => {
-                this.updateProgress();
-            },
-        });
-    }
-    /**
-     * Defines the stroke width of the circular progress component.
-     *
-     * @param v - The stroke width to be set for the circular progress component.
-     */
-    get stroke() {
-        return this._stroke;
-    }
-    set stroke(v) {
-        this.setOption({
-            name: 'stroke',
-            value: v,
-            afterCallback: () => {
-                this.setCircularSize();
-            },
+        this.size = model();
+        afterNextRender(() => {
+            this.setCircularSize();
+            this.updateProgress();
         });
-    }
-    /**
-     * Defines the size of the circular progress component.
-     *
-     * @param v - The new size value for the circular progress component.
-     */
-    get size() {
-        return this._size;
-    }
-    set size(v) {
-        this.setOption({
-            name: 'size',
-            value: v,
-            afterCallback: () => {
-                this.setCircularSize();
-            },
+        effect(() => {
+            this.setCircularSize();
+            this.updateProgress();
         });
     }
     /**
@@ -119,46 +59,37 @@ class AXCircularProgressComponent extends MXColorComponent {
         return `ax-${this['color']}-circular`;
     }
     /**
-     * Updates the circular progress size based on `size` and `stroke`.
      * @ignore
      */
     setCircularSize() {
-        if (this.circle) {
-            this.circle.nativeElement.style.setProperty('--ax-stroke-size', `${this.size - this.stroke}px`);
-            this.circle.nativeElement.style.setProperty('--ax-circle-size', `${this.size}px`);
+        if (this.circle()) {
+            this.circle().nativeElement.style.setProperty('--ax-stroke-size', `${this.size() - this.stroke()}px`);
+            this.circle().nativeElement.style.setProperty('--ax-circle-size', `${this.size()}px`);
         }
     }
     /**
-     * Updates the circular progress display based on the current `progress` value.
      * @ignore
      */
     updateProgress() {
-        if (this.circle) {
-            this.circle.nativeElement.style.background = `conic-gradient(var(--ax-progress-color) ${this.progress * 3.6}deg, var(--ax-progress-line-color) 0deg)`;
+        if (this.circle()) {
+            this.circle().nativeElement.style.background = `conic-gradient(var(--ax-progress-color) ${this.progress() * 3.6}deg, var(--ax-progress-line-color) 0deg)`;
+        }
+    }
+    /**
+     * @ignore
+     */
+    setIndeterminateMode() {
+        if (this.mode() === 'indeterminate' && !this.progress()) {
+            this.progress.set(65);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCircularProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXCircularProgressComponent, selector: "ax-circular-progress", inputs: { color: "color", progress: "progress", stroke: "stroke", size: "size" }, outputs: { ValueChange: "ValueChange", strokeChange: "strokeChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: [".ax-dark ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress .ax-progress-circular{--ax-progress-line-color: rgba(var(--ax-color-white), .25)}ax-circular-progress .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25);--ax-circle-size: 48px;--ax-stroke-size: 44px;height:var(--ax-circle-size);width:var(--ax-circle-size);background:conic-gradient(var(--ax-progress-color) 0deg,var(--ax-progress-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center;border-radius:9999px}ax-circular-progress .ax-progress-circular:before{content:\"\";height:var(--ax-stroke-size);width:var(--ax-stroke-size);position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress.ax-ghost-circular .ax-circular-progress-svg{--ax-progress-color: rgba(var(--ax-color-ghost-fore));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.2", type: AXCircularProgressComponent, selector: "ax-circular-progress", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { progress: "progressChange", stroke: "strokeChange", size: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{mode()}}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>", styles: [".ax-dark ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress .ax-progress-circular{--ax-progress-line-color: rgba(var(--ax-color-white), .25)}ax-circular-progress .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25);--ax-circle-size: 48px;--ax-stroke-size: 44px;height:var(--ax-circle-size);width:var(--ax-circle-size);border-radius:9999px;background:conic-gradient(var(--ax-progress-color) 0deg,var(--ax-progress-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular:before{content:\"\";height:var(--ax-stroke-size);width:var(--ax-stroke-size);position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular.ax-progress-indeterminate{animation-name:rotate;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:rotate(360deg)}}ax-circular-progress.ax-ghost-circular .ax-circular-progress-svg{--ax-progress-color: rgba(var(--ax-color-ghost-fore));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCircularProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-circular-progress', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: [".ax-dark ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress .ax-progress-circular{--ax-progress-line-color: rgba(var(--ax-color-white), .25)}ax-circular-progress .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25);--ax-circle-size: 48px;--ax-stroke-size: 44px;height:var(--ax-circle-size);width:var(--ax-circle-size);background:conic-gradient(var(--ax-progress-color) 0deg,var(--ax-progress-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center;border-radius:9999px}ax-circular-progress .ax-progress-circular:before{content:\"\";height:var(--ax-stroke-size);width:var(--ax-stroke-size);position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress.ax-ghost-circular .ax-circular-progress-svg{--ax-progress-color: rgba(var(--ax-color-ghost-fore));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}\n"] }]
-        }], propDecorators: { circle: [{
-                type: ViewChild,
-                args: ['circle']
-            }], ValueChange: [{
-                type: Output
-            }], progress: [{
-                type: Input
-            }], strokeChange: [{
-                type: Output
-            }], stroke: [{
-                type: Input
-            }], sizeChange: [{
-                type: Output
-            }], size: [{
-                type: Input
-            }], __hostClass: [{
+            args: [{ selector: 'ax-circular-progress', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{mode()}}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>", styles: [".ax-dark ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500), 70%);--ax-progress-line-color: rgba(var(--ax-color-white), .25)}.ax-dark ax-circular-progress .ax-progress-circular{--ax-progress-line-color: rgba(var(--ax-color-white), .25)}ax-circular-progress .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25);--ax-circle-size: 48px;--ax-stroke-size: 44px;height:var(--ax-circle-size);width:var(--ax-circle-size);border-radius:9999px;background:conic-gradient(var(--ax-progress-color) 0deg,var(--ax-progress-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular:before{content:\"\";height:var(--ax-stroke-size);width:var(--ax-stroke-size);position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular.ax-progress-indeterminate{animation-name:rotate;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:rotate(360deg)}}ax-circular-progress.ax-ghost-circular .ax-circular-progress-svg{--ax-progress-color: rgba(var(--ax-color-ghost-fore));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info-500));--ax-progress-line-color: rgba(var(--ax-color-black), .25)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });

package/fesm2022/acorex-components-circular-progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-circular-progress.mjs","sources":["../../../../libs/components/circular-progress/src/lib/circular-progress.component.ts","../../../../libs/components/circular-progress/src/lib/circular-progress.component.html","../../../../libs/components/circular-progress/src/lib/circular-progress.module.ts","../../../../libs/components/circular-progress/src/acorex-components-circular-progress.ts"],"sourcesContent":["import { MXColorComponent } from '@acorex/components/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\nexport type AXProgressLook = 'linear' | 'circular';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-circular-progress',\n  templateUrl: './circular-progress.component.html',\n  styleUrls: ['./circular-progress.component.scss'],\n  inputs: ['color'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXCircularProgressComponent extends MXColorComponent implements AfterViewInit {\n  /**\n   *  @ignore\n   */\n  @ViewChild('circle') circle: ElementRef;\n\n  /**\n   *  @ignore\n   */\n  strokeDashoffset = 0;\n\n  /**\n   *  @ignore\n   */\n  circumference = 0;\n\n  /**\n   *  @ignore\n   */\n  normalizedRadius = 0;\n\n  /**\n   *  @ignore\n   */\n  ngAfterViewInit(): void {\n    this.setCircularSize();\n    this.updateProgress();\n  }\n\n  /**\n   * Emits when the value of the circular progress changes.\n   *\n   * @event\n   */\n  @Output()\n  ValueChange: EventEmitter<number> = new EventEmitter();\n\n  /**\n   *  @ignore\n   */\n  private _progress = 0;\n\n  /**\n   * Defines the current progress of the circular progress component.\n   *\n   * @param v - The percentage value to set for the progress.\n   *\n   */\n  @Input()\n  public get progress(): number {\n    return this._progress;\n  }\n  public set progress(v: number) {\n    this.setOption({\n      name: 'progress',\n      value: v,\n      afterCallback: () => {\n        this.updateProgress();\n      },\n    });\n  }\n\n  /**\n   * Emitted when the stroke width of the circular progress component changes.\n   *\n   * @event\n   */\n  @Output()\n  strokeChange: EventEmitter<number> = new EventEmitter();\n\n  /**\n   *  @ignore\n   */\n  private _stroke = 4;\n\n  /**\n   * Defines the stroke width of the circular progress component.\n   *\n   * @param v - The stroke width to be set for the circular progress component.\n   */\n  @Input()\n  public get stroke(): number {\n    return this._stroke;\n  }\n  public set stroke(v: number) {\n    this.setOption({\n      name: 'stroke',\n      value: v,\n      afterCallback: () => {\n        this.setCircularSize();\n      },\n    });\n  }\n\n  /**\n   * Emits when the size of the circular progress component changes.\n   *\n   * @event\n   */\n  @Output()\n  sizeChange: EventEmitter<number> = new EventEmitter();\n\n  /**\n   *  @ignore\n   */\n  private _size = 48;\n\n  /**\n   * Defines the size of the circular progress component.\n   *\n   * @param v - The new size value for the circular progress component.\n   */\n  @Input()\n  public get size(): number {\n    return this._size;\n  }\n  public set size(v: number) {\n    this.setOption({\n      name: 'size',\n      value: v,\n      afterCallback: () => {\n        this.setCircularSize();\n      },\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  private get __hostClass(): string {\n    return `ax-${this['color']}-circular`;\n  }\n\n  /**\n   * Updates the circular progress size based on `size` and `stroke`.\n   * @ignore\n   */\n  setCircularSize() {\n    if (this.circle) {\n      this.circle.nativeElement.style.setProperty('--ax-stroke-size', `${this.size - this.stroke}px`);\n      this.circle.nativeElement.style.setProperty('--ax-circle-size', `${this.size}px`);\n    }\n  }\n\n  /**\n   * Updates the circular progress display based on the current `progress` value.\n   * @ignore\n   */\n  updateProgress() {\n    if (this.circle) {\n      this.circle.nativeElement.style.background = `conic-gradient(var(--ax-progress-color) ${\n        this.progress * 3.6\n      }deg, var(--ax-progress-line-color) 0deg)`;\n    }\n  }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n","import { NgModule } from '@angular/core';\nimport { AXCircularProgressComponent } from './circular-progress.component';\n\n@NgModule({\n  declarations: [AXCircularProgressComponent],\n  imports: [],\n  exports: [AXCircularProgressComponent],\n})\nexport class AXCircularProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-circular-progress.mjs","sources":["../../../../libs/components/circular-progress/src/lib/circular-progress.component.ts","../../../../libs/components/circular-progress/src/lib/circular-progress.component.html","../../../../libs/components/circular-progress/src/lib/circular-progress.module.ts","../../../../libs/components/circular-progress/src/acorex-components-circular-progress.ts"],"sourcesContent":["import { MXColorComponent } from '@acorex/components/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  ElementRef,\n  HostBinding,\n  input,\n  model,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\nexport type AXCircularProgressMode = 'determinate' | 'indeterminate';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-circular-progress',\n  templateUrl: './circular-progress.component.html',\n  styleUrls: ['./circular-progress.component.scss'],\n  inputs: ['color'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXCircularProgressComponent extends MXColorComponent {\n  /**\n   *  @ignore\n   */\n  circle = viewChild<ElementRef<HTMLDivElement>>('circle');\n\n  /**\n   * Defines the current progress of the circular progress component.\n   *\n   * Change progress mode\n   *\n   */\n\n  mode = input<AXCircularProgressMode>('determinate');\n\n  /**\n   * Defines the current progress of the circular progress component.\n   *\n   * The percentage value to set for the progress.\n   *\n   */\n  progress = model<number>();\n\n  /**\n   * Defines the stroke width of the circular progress component.\n   *\n   * The stroke width to be set for the circular progress component.\n   */\n  stroke = model<number>();\n\n  /**\n   * Defines the stroke width of the circular progress component.\n   *\n   * Circle size\n   */\n  size = model<number>();\n\n  /**\n   *  @ignore\n   */\n\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.setCircularSize();\n      this.updateProgress();\n    });\n    effect(() => {\n      this.setCircularSize();\n      this.updateProgress();\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  private get __hostClass(): string {\n    return `ax-${this['color']}-circular`;\n  }\n\n  /**\n   * @ignore\n   */\n  setCircularSize() {\n    if (this.circle()) {\n      this.circle().nativeElement.style.setProperty('--ax-stroke-size', `${this.size() - this.stroke()}px`);\n      this.circle().nativeElement.style.setProperty('--ax-circle-size', `${this.size()}px`);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  updateProgress() {\n    if (this.circle()) {\n      this.circle().nativeElement.style.background = `conic-gradient(var(--ax-progress-color) ${\n        this.progress() * 3.6\n      }deg, var(--ax-progress-line-color) 0deg)`;\n    }\n  }\n  /**\n   * @ignore\n   */\n  setIndeterminateMode() {\n    if (this.mode() === 'indeterminate' && !this.progress()) {\n      this.progress.set(65);\n    }\n  }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{mode()}}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>","import { NgModule } from '@angular/core';\nimport { AXCircularProgressComponent } from './circular-progress.component';\n\n@NgModule({\n  declarations: [AXCircularProgressComponent],\n  imports: [],\n  exports: [AXCircularProgressComponent],\n})\nexport class AXCircularProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-data-pager.mjs

@@ -417,19 +417,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+/**
+ * Displays a button to select page sizes for data pagination.
+ *
+ * @category Components
+ */
 class AXDataPagerPageSizesComponent extends AXDataPagerChild {
     constructor() {
         super(...arguments);
+        /**
+         *  @ignore
+         */
         //TODO: AXButtonItems type error
         this._items = [];
     }
+    /**
+     * Gets the list of page sizes available for selection.
+     */
     get sizes() {
         return this._sizes || [5, 10, 20, 50, 100];
     }
+    /**
+     * Sets the list of page sizes available for selection.
+     *
+     * @param value - An array of numbers representing the page sizes to be set.
+     */
     set sizes(v) {
         this._sizes = v;
         this.applyParent();
     }
+    /**
+     *  @ignore
+     */
     applyParent() {
         this._size = this._parent.displayInfo.take;
         this._items = this.sizes.map((s) => ({
@@ -441,6 +460,9 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
         }));
         this.cdr.detectChanges();
     }
+    /**
+     *  @ignore
+     */
     _emitOnItemClick(e) {
         if (this._parent.readonly || this._parent.disabled)
             return;
@@ -491,19 +513,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Component that provides navigation buttons for going to the previous page and the first page in a data pager.
+ *
+ * @category Components
+ */
 class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
+    /**
+     *  @ignore
+     */
     ngOnInit() {
         super.ngOnInit;
         this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
     }
+    /**
+     *  @ignore
+     */
     applyParent() {
         this.disabled = this._parent.displayInfo.page == 1 || this._parent.disabled;
     }
+    /**
+     *  @ignore
+     */
     _emitOnFirstPageClick(e) {
         if (this._parent.readonly || this._parent.disabled)
             return;
         this._parent.goFirstPage();
     }
+    /**
+     *  @ignore
+     */
     _emitOnPrevPageClick(e) {
         if (this._parent.readonly || this._parent.disabled)
             return;
@@ -549,16 +588,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+/**
+ * Component for managing and displaying data pagination controls.
+ *
+ * @category Components
+ */
 class AXDataPagerComponent extends MXValueComponent {
+    /**
+     * Indicates whether the component is currently loading.
+     *
+     */
     get isLoading() {
         return this._isLoading();
     }
+    /**
+     * Sets the loading state of the component.
+     *
+     * @param v - The loading state to be set.
+     */
     set isLoading(v) {
         this._isLoading.set(v);
     }
+    /**
+     * Gets the number of items per page in the data pager.
+     */
     get size() {
         return this._size || 10;
     }
+    /**
+     * Sets the number of items per page and updates the data pager accordingly.
+     *
+     * @param {number} v - The new number of items per page.
+     */
     set size(v) {
         if (v != this._size) {
             const prevSize = this._size;
@@ -571,9 +632,18 @@ class AXDataPagerComponent extends MXValueComponent {
             this._emitChangedEvent(prevSize != null ? true : false);
         }
     }
+    /**
+     * Gets the total number of items.
+     */
     get total() {
         return this._total;
     }
+    /**
+     * Sets the total number of items and triggers an update event if the value changes.
+     *
+     * @param v - The total number of items to set.
+     *                     If the value is non-positive, it defaults to 0.
+     */
     set total(v) {
         const t = v && v > 0 ? v : 0;
         if (t != this._total) {
@@ -581,15 +651,31 @@ class AXDataPagerComponent extends MXValueComponent {
             this._emitChangedEvent();
         }
     }
+    /**
+     * Gets the total number of pages.
+     */
     get totalPages() {
         return this._totalPages;
     }
+    /**
+     * Sets the total number of pages.
+     *
+     * @param value - The total number of pages to set.
+     */
     set totalPages(value) {
         this._totalPages = value;
     }
+    /**
+     * Gets the current display mode of the data pager.
+     */
     get displayMode() {
         return this._displayMode;
     }
+    /**
+     * Sets the display mode of the data pager and emits a change event.
+     *
+     * @param v - The new display mode to set, of type `AXDataPagerMode`.
+     */
     set displayMode(v) {
         this.setOption({
             name: 'displayMode',
@@ -599,15 +685,43 @@ class AXDataPagerComponent extends MXValueComponent {
             },
         });
     }
+    /**
+     *  @ignore
+     */
     constructor(_parent) {
         super();
         this._parent = _parent;
+        /**
+         *  @ignore
+         */
         this._isLoading = signal(false);
+        /**
+         *  @ignore
+         */
         this._size = null;
+        /**
+         *  @ignore
+         */
         this._total = 0;
+        /**
+         *  @ignore
+         */
         this._totalPages = 0;
+        /**
+         * Emitted when the display mode changes.
+         * @event
+         * An event containing the new display mode.
+         */
         this.displayModeChange = new EventEmitter();
+        /**
+         *  @ignore
+         */
         this._displayMode = 'full';
+        /**
+         * Emitted when the data pager's state changes.
+         * @event
+         * An event containing details about the change.
+         */
         this.onChanged = new EventEmitter();
         //
         if (this._parent) {
@@ -620,12 +734,21 @@ class AXDataPagerComponent extends MXValueComponent {
             this.total = this._parent.totalCount;
         }
     }
+    /**
+     *  @ignore
+     */
     ngAfterViewInit() {
         this._emitChangedEvent();
     }
+    /**
+     *  @ignore
+     */
     internalValueChanged(value) {
         this._emitChangedEvent(true);
     }
+    /**
+     *  @ignore
+     */
     internalGetValue(value) {
         if (!isNumber(value) || !value || this.totalPages == 0)
             return 1;
@@ -646,6 +769,9 @@ class AXDataPagerComponent extends MXValueComponent {
         };
         return result;
     }
+    /**
+     *  @ignore
+     */
     _emitChangedEvent(u = false) {
         this.totalPages = Math.ceil(this._total / this.size);
         //
@@ -663,18 +789,39 @@ class AXDataPagerComponent extends MXValueComponent {
             this.cdr.markForCheck();
         }
     }
+    /**
+     * Navigates to the next page, or to the last page if on the final page.
+     * @ignore
+     */
     goNextPage() {
         this.goToPage(Math.min(this.value + 1, this.totalPages));
     }
+    /**
+     * Navigates to the last page.
+     * @ignore
+     */
     goLastPage() {
         this.goToPage(this.totalPages);
     }
+    /**
+     * Navigates to the first page.
+     * @ignore
+     */
     goFirstPage() {
         this.goToPage(1);
     }
+    /**
+     * Navigates to the previous page, or to the first page if on the initial page.
+     * @ignore
+     */
     goPrevPage() {
         this.goToPage(Math.max(this.value - 1, 1));
     }
+    /**
+     * Navigates to a specified page.
+     * @param page - The page number to navigate to.
+     * @ignore
+     */
     goToPage(page) {
         if (page != this.value) {
             this.commitValue(page, true);