@acorex/components 18.5.17 → 18.7.1

package/fesm2022/acorex-components-calendar.mjs

@@ -120,10 +120,10 @@ class MXCalendarBaseComponent extends MXBaseComponent {
         this.setOption({ name: 'holidayDates', value: v });
     }
     render() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MXCalendarBaseComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MXCalendarBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
             type: Injectable
         }], propDecorators: { interface: [{
                 type: Input
@@ -689,8 +689,8 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     getMonthName(date, style) {
         return `dateTime.months.${date.calendar.name()}.${style}.${date.monthOfYear - 1}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarComponent),
@@ -703,7 +703,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for(v of views; let i = $index, first = $first, last = $last; track i){\n  @switch (activeView) {\n  @case ('year') {\n  @if(showNavigation)\n  {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-state-disabled\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\" (click)=\"_handlePrevClick()\"\n        [title]=\"'prev' | translate | async\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\"\n        [title]=\"'next' | translate | async\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\n  </div>\n  }\n  <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n    @for(slot of v.slots; track slot.text){\n    <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n      @if(cellTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n        </ng-container>\n      </div>\n      } @else {\n      <div [title]=\"slot.tooltip\">\n        {{ slot.text }}\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n  @case ('month') {\n  @if(showNavigation)\n  {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handlePrevClick()\"\n        [title]=\"'prev' | translate | async\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\"\n        [title]=\"'next' | translate | async\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\n  </div>\n  }\n  <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n    <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n      (click)=\"_handleSlotClick($event, slot)\">\n\n      @if(cellTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n        </ng-container>\n      </div>\n      }@else {\n      <div [title]=\"slot.tooltip\">\n        {{getMonthName(slot.date,'short') | translate | async }}\n      </div>\n      }\n\n    </div>\n  </div>\n  }\n  @default {\n  @if(showNavigation)\n  {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }}\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'month')\">\n        {{getMonthName(v.range.startTime,'long') | translate | async }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handlePrevClick()\"\n        [title]=\"'prev' | translate | async\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\"\n        [title]=\"'next' | translate | async\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\n  </div>\n  }\n  <div class=\"ax-calendar-week\">\n    <div *ngFor=\"let d of _weekdays\">{{ ('dateTime.weekdays.short.'+d) | translate | async }}</div>\n  </div>\n  <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n    <ng-container *ngFor=\"let slot of v.slots\">\n      <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n        @if(cellTemplate){\n        <div>\n          <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n          </ng-container>\n        </div>\n        } @else{\n        <div [title]=\"slot.tooltip\">\n          {{ slot.text }}\n        </div>\n        }\n\n      </div>\n    </ng-container>\n  </div>\n  }\n  }\n  }\n\n</div>\n<ng-content select=\"ax-footer\"></ng-content>", styles: [".ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{outline-color:rgba(var(--ax-color-primary-200))!important;background-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:hover{background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover{background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-footer:is(.ax-dark ax-calendar .ax-calendar-footer:focus,.ax-dark ax-calendar .ax-calendar-footer:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}html[dir=rtl] ax-calendar .ax-calendar-header-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar{display:block;width:100%;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text;opacity:.75}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-surface-fore));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{background-color:rgba(var(--ax-color-danger-500))!important;color:rgba(var(--ax-color-danger-fore))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover{background-color:rgba(var(--ax-color-danger-500))!important;border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-primary-500));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-600))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-500),1)}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
                         'rtl',
@@ -929,10 +929,10 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             this._c1.navTo(e.startOf('year'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\"\n            (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\" [cellTemplate]=\"cellTemplate\"\n        [minValue]=\"minValue\" [maxValue]=\"maxValue\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\" [cellTemplate]=\"cellTemplate\"\n        [minValue]=\"minValue\" [maxValue]=\"maxValue\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background-color:rgba(var(--ax-color-background-default))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background-color:rgba(var(--ax-color-surface));padding:.5rem;color:rgb(var(--ax-color-text-default));display:block}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}@media (min-width: 320px) and (max-width: 600px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\"\n            (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\" [cellTemplate]=\"cellTemplate\"\n        [minValue]=\"minValue\" [maxValue]=\"maxValue\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\" [cellTemplate]=\"cellTemplate\"\n        [minValue]=\"minValue\" [maxValue]=\"maxValue\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background-color:rgba(var(--ax-color-background-default))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background-color:rgba(var(--ax-color-surface));padding:.5rem;color:rgb(var(--ax-color-text-default));display:block}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}@media (min-width: 320px) and (max-width: 600px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, inputs: [
                         'rtl',
@@ -975,11 +975,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
 const MODULES = [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule];
 class AXCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-check-box.mjs

@@ -96,8 +96,8 @@ class AXCheckBoxComponent extends MXValueComponent {
     _handleModelChange(value) {
         this.commitValue(value, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", name: "name", id: "id", checked: "checked", indeterminate: "indeterminate" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "click": "_handleClick($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", name: "name", id: "id", checked: "checked", indeterminate: "indeterminate" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "click": "_handleClick($event)" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXCheckBoxComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -106,7 +106,7 @@ class AXCheckBoxComponent extends MXValueComponent {
             },
         ], queries: [{ propertyName: "_labels", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    <input\n      [id]=\"id\"\n      class=\"ax-checkbox\"\n      type=\"checkbox\"\n      [indeterminate]=\"_stateIndeterminate\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    />\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: [".ax-checkbox-label{display:flex;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;font-size:.875rem;line-height:1.25rem}.ax-checkbox-label.ax-state-readonly{opacity:.75}.ax-checkbox-label.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-checkbox-label.ax-state-disabled .ax-checkbox:disabled{opacity:1}.ax-checkbox-label .ax-checkbox-start-side{display:flex;height:1.25rem;align-items:center}.ax-checkbox-label .ax-checkbox-end-side{margin-inline-start:.75rem}.ax-checkbox-label .ax-checkbox-end-side ax-label label{margin-bottom:0}.ax-checkbox-label .ax-checkbox-end-side ax-form-hint{margin-top:.25rem;cursor:text;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-check-box', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'name', 'id', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXValuableComponent, useExisting: AXCheckBoxComponent },
@@ -127,11 +127,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             }] } });
 
 class AXCheckBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXDecoratorModule], exports: [AXCheckBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXDecoratorModule], exports: [AXCheckBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCheckBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],

package/fesm2022/acorex-components-chips.mjs

@@ -25,10 +25,10 @@ class AXChipsComponent extends MXColorLookComponent {
     get __hostClass() {
         return `ax-el-${this.color}-${this.look} ax-el-interactive`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXChipsComponent, selector: "ax-chips", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, hostDirectives: [{ directive: i1.AXRippleDirective }], ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if(text()){\n<div class=\"ax-chips-text\">{{ text() }}</div>\n}\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-radius:9999px;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-chips:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#00000080}ax-chips .ax-chips-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem;line-height:1.75rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXChipsComponent, selector: "ax-chips", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, hostDirectives: [{ directive: i1.AXRippleDirective }], ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if(text()){\n<div class=\"ax-chips-text\">{{ text() }}</div>\n}\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-radius:9999px;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-chips:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#00000080}ax-chips .ax-chips-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem;line-height:1.75rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-chips', inputs: ['tabIndex', 'color', 'look'], hostDirectives: [AXRippleDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if(text()){\n<div class=\"ax-chips-text\">{{ text() }}</div>\n}\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-radius:9999px;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-chips:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#00000080}ax-chips .ax-chips-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem;line-height:1.75rem}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -37,11 +37,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             }] } });
 
 class AXChipsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXChipsModule, declarations: [AXChipsComponent], imports: [CommonModule], exports: [AXChipsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXChipsModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXChipsModule, declarations: [AXChipsComponent], imports: [CommonModule], exports: [AXChipsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXChipsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXChipsComponent],

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,56 +59,47 @@ 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.2.0", ngImport: i0, type: AXCircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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']
             }] } });
 
 class AXCircularProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCircularProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXCircularProgressModule, declarations: [AXCircularProgressComponent], exports: [AXCircularProgressComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCircularProgressModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCircularProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXCircularProgressModule, declarations: [AXCircularProgressComponent], exports: [AXCircularProgressComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCircularProgressModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXCircularProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCircularProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCircularProgressComponent],

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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"}