@acorex/components 16.19.51 → 16.19.52

package/fesm2022/acorex-components.mjs

@@ -1,7 +1,7 @@
 import * as i1$2 from '@acorex/core';
-import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXPlatform, AXScrollModule, AXObjectUtil, setPropByPath, AXColorUtil } from '@acorex/core';
+import { AXTranslator, AXHtmlUtil, AXPlatform, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXScrollModule, AXObjectUtil, setPropByPath, AXColorUtil } from '@acorex/core';
 import * as i0 from '@angular/core';
-import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, TemplateRef, HostListener, ViewEncapsulation, NgModule, input, effect, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, output, inject, ChangeDetectorRef, model, contentChild, afterNextRender, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding, signal } from '@angular/core';
+import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, TemplateRef, inject, signal, HostListener, ViewEncapsulation, NgModule, input, effect, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, output, ChangeDetectorRef, model, contentChild, afterNextRender, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/cdk/portal';
@@ -925,6 +925,8 @@ class AXButtonComponent extends AXBaseButtonComponent {
         this.el = el;
     }
     container;
+    platFormSerivce = inject(AXPlatform);
+    isRtl = signal(this.platFormSerivce.isRtl());
     type = 'primary';
     icon;
     submitBehavior = false;
@@ -961,11 +963,11 @@ class AXButtonComponent extends AXBaseButtonComponent {
         this.container.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXButtonComponent, isStandalone: false, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\n    <div class=\"button-inner-content\">\n        <ng-container *ngIf=\"icon && !loading\">\n            <i class=\"{{icon}} icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <div class=\"ax-wrapper\" #refContent>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</button>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXButtonComponent, isStandalone: false, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #container\n  class=\"ax button form-control {{ type }} {{ size }} {{ cssClass }}\"\n  [class.ax-button-icon]=\"\n    refContent.innerText.length == 0 && refContent.children.length == 0\n  \"\n  [class.selected]=\"selected\"\n  [class.icon]=\"icon\"\n  [class.icon]=\"loading\"\n  [class.disabled]=\"disabled || loading\"\n  (click)=\"handleClick($event)\"\n  [disabled]=\"disabled\"\n  [ngStyle]=\"{ 'width.%': block ? 100 : 'auto' }\"\n  [attr.tabindex]=\"tabIndex\"\n>\n  <div\n    class=\"button-inner-content\"\n    [style.flex-direction]=\"isRtl() ? 'row-reverse' : 'row'\"\n  >\n    <ng-container *ngIf=\"icon && !loading\">\n      <i class=\"{{ icon }} icon\"></i>\n      <ng-container\n        *ngIf=\"\n          refContent.innerText.length == 0 && refContent.children.length == 0\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"loading\">\n      <i class=\"far fa-circle-notch fa-spin icon\"></i>\n      <ng-container\n        *ngIf=\"\n          refContent.innerText.length == 0 && refContent.children.length == 0\n        \"\n      ></ng-container>\n    </ng-container>\n    <div class=\"ax-wrapper\" #refContent>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-button', encapsulation: ViewEncapsulation.None, standalone: false, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\n    <div class=\"button-inner-content\">\n        <ng-container *ngIf=\"icon && !loading\">\n            <i class=\"{{icon}} icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <div class=\"ax-wrapper\" #refContent>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</button>" }]
+            args: [{ selector: 'ax-button', encapsulation: ViewEncapsulation.None, standalone: false, template: "<button\n  #container\n  class=\"ax button form-control {{ type }} {{ size }} {{ cssClass }}\"\n  [class.ax-button-icon]=\"\n    refContent.innerText.length == 0 && refContent.children.length == 0\n  \"\n  [class.selected]=\"selected\"\n  [class.icon]=\"icon\"\n  [class.icon]=\"loading\"\n  [class.disabled]=\"disabled || loading\"\n  (click)=\"handleClick($event)\"\n  [disabled]=\"disabled\"\n  [ngStyle]=\"{ 'width.%': block ? 100 : 'auto' }\"\n  [attr.tabindex]=\"tabIndex\"\n>\n  <div\n    class=\"button-inner-content\"\n    [style.flex-direction]=\"isRtl() ? 'row-reverse' : 'row'\"\n  >\n    <ng-container *ngIf=\"icon && !loading\">\n      <i class=\"{{ icon }} icon\"></i>\n      <ng-container\n        *ngIf=\"\n          refContent.innerText.length == 0 && refContent.children.length == 0\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"loading\">\n      <i class=\"far fa-circle-notch fa-spin icon\"></i>\n      <ng-container\n        *ngIf=\"\n          refContent.innerText.length == 0 && refContent.children.length == 0\n        \"\n      ></ng-container>\n    </ng-container>\n    <div class=\"ax-wrapper\" #refContent>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { static: true }]
@@ -1451,11 +1453,11 @@ class AXCalendarBoxComponent {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXCalendarBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: AXCalendarBoxComponent, isStandalone: false, selector: "ax-calendar-box", inputs: { selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, selectableHoliday: { classPropertyName: "selectableHoliday", publicName: "selectableHoliday", isSignal: false, isRequired: false, transformFunction: null }, dayStyle: { classPropertyName: "dayStyle", publicName: "dayStyle", isSignal: false, isRequired: false, transformFunction: null }, dayMinMaxResoan: { classPropertyName: "dayMinMaxResoan", publicName: "dayMinMaxResoan", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ax-calendar-container {{ size }}\" [ngClass]=\"type\">\n  <div class=\"ax-calendar-header\">\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"next()\">\n        {{ 'common.next' | trans }}\n      </ax-button>\n    </div>\n    <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n      <ax-button type=\"light blank\" (click)=\"changeView()\">\n        <ng-container *ngSwitchCase=\"'day'\">\n          {{ viewRange.startTime.add('day', 10) | dt : 'MMM YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          {{ viewRange.startTime | dt : 'YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{ viewRange.startTime | dt : 'YYYY' }} -\n          {{ viewRange.endTime | dt : 'YYYY' }}\n        </ng-container>\n      </ax-button>\n    </div>\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"prev()\">\n        {{ 'common.prev' | trans }}\n      </ax-button>\n    </div>\n  </div>\n  <div class=\"ax-calendar-body\">\n    <ng-container [ngSwitch]=\"view\">\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"ax-month-items\">\n          <ng-container *ngFor=\"let w of weekdays\">\n            <div class=\"ax-month-item\">{{ w }}</div>\n          </ng-container>\n        </div>\n        <div class=\"ax-day-items\">\n          <ng-container *ngFor=\"let r of matrix\">\n            <div\n              class=\"ax-day-item ax-state-event\"\n              *ngFor=\"let d of r; trackBy: trackByFn\"\n              [title]=\"getTitle(d.date)\"\n              [ngClass]=\"{\n                selected: d.selected,\n                focused: d.focused,\n                today: d.today && !d.selected,\n                'next-month': d.nextMonth,\n                holiday: d.holiday,\n                unselect: d.unselect\n              }\"\n              [ngStyle]=\"findDay(d.date) ? getStyle(d.date) : ''\"\n              (click)=\"setDayClick($event, d)\"\n            >\n              {{ d.date.dayInMonth }}\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n      <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n        <ng-container *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-month-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setMonthClick($event, d.date)\"\n          >\n            <strong>\n              {{ d.date | dt : 'MMM' }}\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n        <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-year-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setYearClick($event, d.date)\"\n          >\n            <strong>{{ d.date | dt : 'YYYY' }}</strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"ax-calendar-footer\">\n    <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n      {{ getTodayName() }}\n    </ax-button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: AXCalendarBoxComponent, isStandalone: false, selector: "ax-calendar-box", inputs: { selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, selectableHoliday: { classPropertyName: "selectableHoliday", publicName: "selectableHoliday", isSignal: false, isRequired: false, transformFunction: null }, dayStyle: { classPropertyName: "dayStyle", publicName: "dayStyle", isSignal: false, isRequired: false, transformFunction: null }, dayMinMaxResoan: { classPropertyName: "dayMinMaxResoan", publicName: "dayMinMaxResoan", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ax-calendar-container {{ size }}\" [ngClass]=\"type\">\n  <div class=\"ax-calendar-header\">\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"next()\">\n        {{ 'common.next' | trans }}\n      </ax-button>\n    </div>\n    <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n      <ax-button type=\"light blank\" (click)=\"changeView()\">\n        <ng-container *ngSwitchCase=\"'day'\">\n          {{ viewRange.startTime.add('day', 10) | dt : 'MMM YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          {{ viewRange.startTime | dt : 'YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{ viewRange.startTime | dt : 'YYYY' }} -\n          {{ viewRange.endTime | dt : 'YYYY' }}\n        </ng-container>\n      </ax-button>\n    </div>\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"prev()\">\n        {{ 'common.prev' | trans }}\n      </ax-button>\n    </div>\n  </div>\n  <div class=\"ax-calendar-body\">\n    <ng-container [ngSwitch]=\"view\">\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"ax-month-items\">\n          <ng-container *ngFor=\"let w of weekdays\">\n            <div class=\"ax-month-item\">{{ w }}</div>\n          </ng-container>\n        </div>\n        <div class=\"ax-day-items\">\n          <ng-container *ngFor=\"let r of matrix\">\n            <div\n              class=\"ax-day-item ax-state-event\"\n              *ngFor=\"let d of r; trackBy: trackByFn\"\n              [title]=\"getTitle(d.date)\"\n              [ngClass]=\"{\n                selected: d.selected,\n                focused: d.focused,\n                today: d.today && !d.selected,\n                'next-month': d.nextMonth,\n                holiday: d.holiday,\n                unselect: d.unselect\n              }\"\n              [ngStyle]=\"findDay(d.date) ? getStyle(d.date) : ''\"\n              (click)=\"setDayClick($event, d)\"\n            >\n              {{ d.date.dayInMonth }}\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n      <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n        <ng-container *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-month-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setMonthClick($event, d.date)\"\n          >\n            <strong>\n              {{ d.date | dt : 'MMM' }}\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n        <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-year-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setYearClick($event, d.date)\"\n          >\n            <strong>{{ d.date | dt : 'YYYY' }}</strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"ax-calendar-footer\">\n    <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"primary\">\n      {{ getTodayName() }}\n    </ax-button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXCalendarBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax-calendar-container {{ size }}\" [ngClass]=\"type\">\n  <div class=\"ax-calendar-header\">\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"next()\">\n        {{ 'common.next' | trans }}\n      </ax-button>\n    </div>\n    <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n      <ax-button type=\"light blank\" (click)=\"changeView()\">\n        <ng-container *ngSwitchCase=\"'day'\">\n          {{ viewRange.startTime.add('day', 10) | dt : 'MMM YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          {{ viewRange.startTime | dt : 'YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{ viewRange.startTime | dt : 'YYYY' }} -\n          {{ viewRange.endTime | dt : 'YYYY' }}\n        </ng-container>\n      </ax-button>\n    </div>\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"prev()\">\n        {{ 'common.prev' | trans }}\n      </ax-button>\n    </div>\n  </div>\n  <div class=\"ax-calendar-body\">\n    <ng-container [ngSwitch]=\"view\">\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"ax-month-items\">\n          <ng-container *ngFor=\"let w of weekdays\">\n            <div class=\"ax-month-item\">{{ w }}</div>\n          </ng-container>\n        </div>\n        <div class=\"ax-day-items\">\n          <ng-container *ngFor=\"let r of matrix\">\n            <div\n              class=\"ax-day-item ax-state-event\"\n              *ngFor=\"let d of r; trackBy: trackByFn\"\n              [title]=\"getTitle(d.date)\"\n              [ngClass]=\"{\n                selected: d.selected,\n                focused: d.focused,\n                today: d.today && !d.selected,\n                'next-month': d.nextMonth,\n                holiday: d.holiday,\n                unselect: d.unselect\n              }\"\n              [ngStyle]=\"findDay(d.date) ? getStyle(d.date) : ''\"\n              (click)=\"setDayClick($event, d)\"\n            >\n              {{ d.date.dayInMonth }}\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n      <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n        <ng-container *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-month-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setMonthClick($event, d.date)\"\n          >\n            <strong>\n              {{ d.date | dt : 'MMM' }}\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n        <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-year-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setYearClick($event, d.date)\"\n          >\n            <strong>{{ d.date | dt : 'YYYY' }}</strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"ax-calendar-footer\">\n    <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n      {{ getTodayName() }}\n    </ax-button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax-calendar-container {{ size }}\" [ngClass]=\"type\">\n  <div class=\"ax-calendar-header\">\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"next()\">\n        {{ 'common.next' | trans }}\n      </ax-button>\n    </div>\n    <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n      <ax-button type=\"light blank\" (click)=\"changeView()\">\n        <ng-container *ngSwitchCase=\"'day'\">\n          {{ viewRange.startTime.add('day', 10) | dt : 'MMM YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          {{ viewRange.startTime | dt : 'YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{ viewRange.startTime | dt : 'YYYY' }} -\n          {{ viewRange.endTime | dt : 'YYYY' }}\n        </ng-container>\n      </ax-button>\n    </div>\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"prev()\">\n        {{ 'common.prev' | trans }}\n      </ax-button>\n    </div>\n  </div>\n  <div class=\"ax-calendar-body\">\n    <ng-container [ngSwitch]=\"view\">\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"ax-month-items\">\n          <ng-container *ngFor=\"let w of weekdays\">\n            <div class=\"ax-month-item\">{{ w }}</div>\n          </ng-container>\n        </div>\n        <div class=\"ax-day-items\">\n          <ng-container *ngFor=\"let r of matrix\">\n            <div\n              class=\"ax-day-item ax-state-event\"\n              *ngFor=\"let d of r; trackBy: trackByFn\"\n              [title]=\"getTitle(d.date)\"\n              [ngClass]=\"{\n                selected: d.selected,\n                focused: d.focused,\n                today: d.today && !d.selected,\n                'next-month': d.nextMonth,\n                holiday: d.holiday,\n                unselect: d.unselect\n              }\"\n              [ngStyle]=\"findDay(d.date) ? getStyle(d.date) : ''\"\n              (click)=\"setDayClick($event, d)\"\n            >\n              {{ d.date.dayInMonth }}\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n      <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n        <ng-container *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-month-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setMonthClick($event, d.date)\"\n          >\n            <strong>\n              {{ d.date | dt : 'MMM' }}\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n        <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-year-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setYearClick($event, d.date)\"\n          >\n            <strong>{{ d.date | dt : 'YYYY' }}</strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"ax-calendar-footer\">\n    <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"primary\">\n      {{ getTodayName() }}\n    </ax-button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { size: [{
                 type: Input
             }], type: [{
@@ -7080,19 +7082,19 @@ class AXPopupComponent extends AXBaseComponent {
     rendererService;
     loadingService;
     cdr;
-    _platform;
     isLoading = true;
     _loadingId;
     onFooterButtonsSubscription;
-    constructor(resolver, ref, rendererService, loadingService, cdr, _platform) {
+    constructor(resolver, ref, rendererService, loadingService, cdr) {
         super();
         this.resolver = resolver;
         this.ref = ref;
         this.rendererService = rendererService;
         this.loadingService = loadingService;
         this.cdr = cdr;
-        this._platform = _platform;
     }
+    _platform = inject(AXPlatform);
+    isRtl = signal(this._platform.isRtl());
     ngAfterViewInit() {
         this._loadingId = this.loadingService.show(this.ref.nativeElement.querySelector('.ax-popup-body-container'));
         if (typeof this.content === 'string') {
@@ -7211,13 +7213,13 @@ class AXPopupComponent extends AXBaseComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }, { token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXPopupComponent, isStandalone: false, selector: "ng-component", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"popup-wrapper\"\n  role=\"dialog\"\n  [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n  aria-modal=\"true\"\n  cdkTrapFocus\n  cdkDrag\n>\n  <div\n    class=\"popup-container {{ size }}\"\n    tabindex=\"0\"\n    [class.has-border]=\"!modal\"\n  >\n    @if (hasHeader) {\n    <div\n      class=\"ax-popup-header\"\n      cdkDragHandle\n      [attr.id]=\"'dialog' + uid + '_label'\"\n    >\n      <span>\n        {{ title }}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i\n          class=\"far fa-expand ax-popup-header-button\"\n          (click)=\"onFullScreen()\"\n          *ngIf=\"maximizable\"\n          tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n        ></i>\n        <i\n          class=\"far fa-times ax-popup-header-button\"\n          (click)=\"onCloseClick()\"\n          *ngIf=\"closable\"\n          tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"\n        ></i>\n      </span>\n    </div>\n    }\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div\n        class=\"ax-popup-footer\"\n        *ngIf=\"!isLoading && footerButtons.length > 0\"\n      >\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button\n              [type]=\"button.style\"\n              [icon]=\"button.icon\"\n              [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\"\n              [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\"\n            >\n              {{ button.text }}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90dvh;position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXPopupComponent, isStandalone: false, selector: "ng-component", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"popup-wrapper\"\n  role=\"dialog\"\n  [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n  aria-modal=\"true\"\n  cdkTrapFocus\n  cdkDrag\n>\n  <div\n    class=\"popup-container {{ size }}\"\n    tabindex=\"0\"\n    [class.has-border]=\"!modal\"\n  >\n    @if (hasHeader) {\n    <div\n      class=\"ax-popup-header\"\n      cdkDragHandle\n      [attr.id]=\"'dialog' + uid + '_label'\"\n    >\n      <span>\n        {{ title }}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i\n          class=\"far fa-expand ax-popup-header-button\"\n          (click)=\"onFullScreen()\"\n          *ngIf=\"maximizable\"\n          tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n        ></i>\n        <i\n          class=\"far fa-times ax-popup-header-button\"\n          (click)=\"onCloseClick()\"\n          *ngIf=\"closable\"\n          tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"\n        ></i>\n      </span>\n    </div>\n    }\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div\n        [style.direction]=\"isRtl() ? 'ltr' : 'rtl'\"\n        class=\"ax-popup-footer\"\n        *ngIf=\"!isLoading && footerButtons.length > 0\"\n      >\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button\n              [type]=\"button.style\"\n              [icon]=\"button.icon\"\n              [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\"\n              [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\"\n            >\n              {{ button.text }}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90dvh;position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"popup-wrapper\"\n  role=\"dialog\"\n  [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n  aria-modal=\"true\"\n  cdkTrapFocus\n  cdkDrag\n>\n  <div\n    class=\"popup-container {{ size }}\"\n    tabindex=\"0\"\n    [class.has-border]=\"!modal\"\n  >\n    @if (hasHeader) {\n    <div\n      class=\"ax-popup-header\"\n      cdkDragHandle\n      [attr.id]=\"'dialog' + uid + '_label'\"\n    >\n      <span>\n        {{ title }}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i\n          class=\"far fa-expand ax-popup-header-button\"\n          (click)=\"onFullScreen()\"\n          *ngIf=\"maximizable\"\n          tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n        ></i>\n        <i\n          class=\"far fa-times ax-popup-header-button\"\n          (click)=\"onCloseClick()\"\n          *ngIf=\"closable\"\n          tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"\n        ></i>\n      </span>\n    </div>\n    }\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div\n        class=\"ax-popup-footer\"\n        *ngIf=\"!isLoading && footerButtons.length > 0\"\n      >\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button\n              [type]=\"button.style\"\n              [icon]=\"button.icon\"\n              [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\"\n              [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\"\n            >\n              {{ button.text }}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90dvh;position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: AXLoadingService }, { type: i0.ChangeDetectorRef }, { type: i1$2.AXPlatform }], propDecorators: { popupBody: [{
+            args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"popup-wrapper\"\n  role=\"dialog\"\n  [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n  aria-modal=\"true\"\n  cdkTrapFocus\n  cdkDrag\n>\n  <div\n    class=\"popup-container {{ size }}\"\n    tabindex=\"0\"\n    [class.has-border]=\"!modal\"\n  >\n    @if (hasHeader) {\n    <div\n      class=\"ax-popup-header\"\n      cdkDragHandle\n      [attr.id]=\"'dialog' + uid + '_label'\"\n    >\n      <span>\n        {{ title }}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i\n          class=\"far fa-expand ax-popup-header-button\"\n          (click)=\"onFullScreen()\"\n          *ngIf=\"maximizable\"\n          tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n        ></i>\n        <i\n          class=\"far fa-times ax-popup-header-button\"\n          (click)=\"onCloseClick()\"\n          *ngIf=\"closable\"\n          tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"\n        ></i>\n      </span>\n    </div>\n    }\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div\n        [style.direction]=\"isRtl() ? 'ltr' : 'rtl'\"\n        class=\"ax-popup-footer\"\n        *ngIf=\"!isLoading && footerButtons.length > 0\"\n      >\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button\n              [type]=\"button.style\"\n              [icon]=\"button.icon\"\n              [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\"\n              [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\"\n            >\n              {{ button.text }}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90dvh;position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: AXLoadingService }, { type: i0.ChangeDetectorRef }], propDecorators: { popupBody: [{
                 type: ViewChild,
                 args: ['popupBody', { read: ViewContainerRef, static: true }]
             }], onKeydownHandler: [{
@@ -12377,9 +12379,11 @@ class AXSearchBarComponent {
         this.cdr = cdr;
         this.ref = ref;
     }
+    isActiveValueChange = signal(false);
     searchPopover;
     _editors;
     form;
+    showBadge = input(false);
     sizeButton = 'md';
     size = 'sm';
     disabled = false;
@@ -12491,8 +12495,10 @@ class AXSearchBarComponent {
             .forEach((el) => el.classList.add('required-state'));
     }
     async handleValueChange(e) {
+        this.isActiveValueChange.set(true);
         await this._handleInitVlaue(e);
         this.onValueChange.emit(e);
+        this.isActiveValueChange.set(false);
     }
     handleItemRemoveClick(item) {
         this._editors.forEach((e) => {
@@ -12503,6 +12509,9 @@ class AXSearchBarComponent {
         this._filterItems = this._filterItems.filter((el) => el.name != item.name);
     }
     search() {
+        if (this.isActiveValueChange()) {
+            return;
+        }
         this.form.validate().then((c) => {
             if (c.result) {
                 this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value === 0 || (el.value != null && el.value != ''))));
@@ -12676,11 +12685,11 @@ class AXSearchBarComponent {
         this.searchPopover.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      <ng-container *ngFor=\"let item of _items\">\n        @if (item?.groupTitle) {\n        <ax-fieldset [caption]=\"item?.groupTitle\">\n          <ng-container *ngFor=\"let item of item.rows\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let prop of item.items\">\n                <div\n                  *ngIf=\"prop.property.visible != false\"\n                  class=\"{{ renderCol(prop.property.col) }}\"\n                >\n                  <div\n                    [class.ax-search-bar-required-state]=\"\n                      prop.property.editorOptions?.validation?.rules?.length\n                    \"\n                  >\n                    <ax-label>{{ prop.property.title }}</ax-label>\n                    <ng-container\n                      ax-property-editor-renderer\n                      [validationForm]=\"form\"\n                      [property]=\"prop\"\n                      [context]=\"_context\"\n                      (onValueChange)=\"handleValueChange($event)\"\n                    ></ng-container>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ax-fieldset>\n        }@else {\n        <ng-container *ngFor=\"let item of item.rows\">\n          <div class=\"row\">\n            <ng-container *ngFor=\"let prop of item.items\">\n              <div\n                *ngIf=\"prop.property.visible != false\"\n                class=\"{{ renderCol(prop.property.col) }}\"\n              >\n                <div\n                  [class.ax-search-bar-required-state]=\"\n                    prop.property.editorOptions?.validation?.rules?.length\n                  \"\n                >\n                  <ax-label>{{ prop.property.title }}</ax-label>\n                  <ng-container\n                    ax-property-editor-renderer\n                    [validationForm]=\"form\"\n                    [property]=\"prop\"\n                    [context]=\"_context\"\n                    (onValueChange)=\"handleValueChange($event)\"\n                  ></ng-container>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        }\n      </ng-container>\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, sizeButton: { classPropertyName: "sizeButton", publicName: "sizeButton", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, popoverWidth: { classPropertyName: "popoverWidth", publicName: "popoverWidth", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, loadOnInit: { classPropertyName: "loadOnInit", publicName: "loadOnInit", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n  <ax-button\n    [block]=\"block\"\n    end\n    icon=\"far fa-sliders-h icon\"\n    [type]=\"'primary outline'\"\n    [disabled]=\"disabled\"\n    [size]=\"sizeButton\"\n    [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"\n  >\n  </ax-button>\n\n  @if (_searchCount) {\n\n  <span class=\"search-count\">\n    {{ _searchCount }}\n  </span>\n  }\n</div>\n\n}@else {\n<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n}\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      <ng-container *ngFor=\"let item of _items\">\n        @if (item?.groupTitle) {\n        <ax-fieldset [caption]=\"item?.groupTitle\">\n          <ng-container *ngFor=\"let item of item.rows\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let prop of item.items\">\n                <div\n                  *ngIf=\"prop.property.visible != false\"\n                  class=\"{{ renderCol(prop.property.col) }}\"\n                >\n                  <div\n                    [class.ax-search-bar-required-state]=\"\n                      prop.property.editorOptions?.validation?.rules?.length\n                    \"\n                  >\n                    <ax-label>{{ prop.property.title }}</ax-label>\n                    <ng-container\n                      ax-property-editor-renderer\n                      [validationForm]=\"form\"\n                      [property]=\"prop\"\n                      [context]=\"_context\"\n                      (onValueChange)=\"handleValueChange($event)\"\n                    ></ng-container>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ax-fieldset>\n        }@else {\n        <ng-container *ngFor=\"let item of item.rows\">\n          <div class=\"row\">\n            <ng-container *ngFor=\"let prop of item.items\">\n              <div\n                *ngIf=\"prop.property.visible != false\"\n                class=\"{{ renderCol(prop.property.col) }}\"\n              >\n                <div\n                  [class.ax-search-bar-required-state]=\"\n                    prop.property.editorOptions?.validation?.rules?.length\n                  \"\n                >\n                  <ax-label>{{ prop.property.title }}</ax-label>\n                  <ng-container\n                    ax-property-editor-renderer\n                    [validationForm]=\"form\"\n                    [property]=\"prop\"\n                    [context]=\"_context\"\n                    (onValueChange)=\"handleValueChange($event)\"\n                  ></ng-container>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        }\n      </ng-container>\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-bar', standalone: false, template: "<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      <ng-container *ngFor=\"let item of _items\">\n        @if (item?.groupTitle) {\n        <ax-fieldset [caption]=\"item?.groupTitle\">\n          <ng-container *ngFor=\"let item of item.rows\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let prop of item.items\">\n                <div\n                  *ngIf=\"prop.property.visible != false\"\n                  class=\"{{ renderCol(prop.property.col) }}\"\n                >\n                  <div\n                    [class.ax-search-bar-required-state]=\"\n                      prop.property.editorOptions?.validation?.rules?.length\n                    \"\n                  >\n                    <ax-label>{{ prop.property.title }}</ax-label>\n                    <ng-container\n                      ax-property-editor-renderer\n                      [validationForm]=\"form\"\n                      [property]=\"prop\"\n                      [context]=\"_context\"\n                      (onValueChange)=\"handleValueChange($event)\"\n                    ></ng-container>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ax-fieldset>\n        }@else {\n        <ng-container *ngFor=\"let item of item.rows\">\n          <div class=\"row\">\n            <ng-container *ngFor=\"let prop of item.items\">\n              <div\n                *ngIf=\"prop.property.visible != false\"\n                class=\"{{ renderCol(prop.property.col) }}\"\n              >\n                <div\n                  [class.ax-search-bar-required-state]=\"\n                    prop.property.editorOptions?.validation?.rules?.length\n                  \"\n                >\n                  <ax-label>{{ prop.property.title }}</ax-label>\n                  <ng-container\n                    ax-property-editor-renderer\n                    [validationForm]=\"form\"\n                    [property]=\"prop\"\n                    [context]=\"_context\"\n                    (onValueChange)=\"handleValueChange($event)\"\n                  ></ng-container>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        }\n      </ng-container>\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"] }]
+            args: [{ selector: 'ax-search-bar', standalone: false, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n  <ax-button\n    [block]=\"block\"\n    end\n    icon=\"far fa-sliders-h icon\"\n    [type]=\"'primary outline'\"\n    [disabled]=\"disabled\"\n    [size]=\"sizeButton\"\n    [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"\n  >\n  </ax-button>\n\n  @if (_searchCount) {\n\n  <span class=\"search-count\">\n    {{ _searchCount }}\n  </span>\n  }\n</div>\n\n}@else {\n<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n}\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      <ng-container *ngFor=\"let item of _items\">\n        @if (item?.groupTitle) {\n        <ax-fieldset [caption]=\"item?.groupTitle\">\n          <ng-container *ngFor=\"let item of item.rows\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let prop of item.items\">\n                <div\n                  *ngIf=\"prop.property.visible != false\"\n                  class=\"{{ renderCol(prop.property.col) }}\"\n                >\n                  <div\n                    [class.ax-search-bar-required-state]=\"\n                      prop.property.editorOptions?.validation?.rules?.length\n                    \"\n                  >\n                    <ax-label>{{ prop.property.title }}</ax-label>\n                    <ng-container\n                      ax-property-editor-renderer\n                      [validationForm]=\"form\"\n                      [property]=\"prop\"\n                      [context]=\"_context\"\n                      (onValueChange)=\"handleValueChange($event)\"\n                    ></ng-container>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ax-fieldset>\n        }@else {\n        <ng-container *ngFor=\"let item of item.rows\">\n          <div class=\"row\">\n            <ng-container *ngFor=\"let prop of item.items\">\n              <div\n                *ngIf=\"prop.property.visible != false\"\n                class=\"{{ renderCol(prop.property.col) }}\"\n              >\n                <div\n                  [class.ax-search-bar-required-state]=\"\n                    prop.property.editorOptions?.validation?.rules?.length\n                  \"\n                >\n                  <ax-label>{{ prop.property.title }}</ax-label>\n                  <ng-container\n                    ax-property-editor-renderer\n                    [validationForm]=\"form\"\n                    [property]=\"prop\"\n                    [context]=\"_context\"\n                    (onValueChange)=\"handleValueChange($event)\"\n                  ></ng-container>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        }\n      </ng-container>\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { searchPopover: [{
                 type: ViewChild,
                 args: ['searchPop']
@@ -16575,6 +16584,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class AXTabViewComponent {
     ref;
     _componentFactoryResolver;
+    get __hostClass() {
+        if (this.fitParent()) {
+            return [`ax-fit-parent-tab`];
+        }
+    }
     dynamicTabs = [];
     tabs;
     dynamicTabPlaceholder;
@@ -16658,12 +16672,15 @@ class AXTabViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXTabViewComponent, isStandalone: false, selector: "ax-tab-view", inputs: { fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, tabTemplate: { classPropertyName: "tabTemplate", publicName: "tabTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\" [class.ax-fit-parent-tab]=\"fitParent()\">\n  @for (tab of tabs; track $index) { @if (tabTemplate) {\n  <ng-container\n    [ngTemplateOutlet]=\"tabTemplate\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: tab,\n      selectTab: selectTab.bind(this)\n    }\"\n  >\n  </ng-container>\n  }@else{\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  } }\n  <!-- dynamic tabs -->\n  @for (tab of dynamicTabs; track $index) {\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n\n    <span>\n      {{ tab.caption }}\n      @if (tab.isCloseable) {\n\n      <i (click)=\"closeTab(tab)\" class=\"far fa-times\"> </i>\n      }\n    </span>\n  </li>\n  }\n</ul>\n<div class=\"ax-tab-container\">\n  <ng-content></ng-content>\n  <ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: [".ax-fit-parent-tab li{width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXTabViewComponent, isStandalone: false, selector: "ax-tab-view", inputs: { fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, tabTemplate: { classPropertyName: "tabTemplate", publicName: "tabTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTab: "onActiveTab" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\">\n  @for (tab of tabs; track $index) { @if (tabTemplate) {\n  <ng-container\n    [ngTemplateOutlet]=\"tabTemplate\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: tab,\n      selectTab: selectTab.bind(this)\n    }\"\n  >\n  </ng-container>\n  }@else{\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  } }\n  <!-- dynamic tabs -->\n  @for (tab of dynamicTabs; track $index) {\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n\n    <span>\n      {{ tab.caption }}\n      @if (tab.isCloseable) {\n\n      <i (click)=\"closeTab(tab)\" class=\"far fa-times\"> </i>\n      }\n    </span>\n  </li>\n  }\n</ul>\n<div class=\"ax-tab-container\">\n  <ng-content></ng-content>\n  <ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: ["ax-tab-view.ax-fit-parent-tab li{width:100%;text-align:center}ax-tab-view.ax-fit-parent-tab .nav-tabs{border-bottom:none}ax-tab-view.ax-fit-parent-tab .ax-tab-container{width:calc(100% - .5rem)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTabViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax nav-tabs\" [class.ax-fit-parent-tab]=\"fitParent()\">\n  @for (tab of tabs; track $index) { @if (tabTemplate) {\n  <ng-container\n    [ngTemplateOutlet]=\"tabTemplate\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: tab,\n      selectTab: selectTab.bind(this)\n    }\"\n  >\n  </ng-container>\n  }@else{\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  } }\n  <!-- dynamic tabs -->\n  @for (tab of dynamicTabs; track $index) {\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n\n    <span>\n      {{ tab.caption }}\n      @if (tab.isCloseable) {\n\n      <i (click)=\"closeTab(tab)\" class=\"far fa-times\"> </i>\n      }\n    </span>\n  </li>\n  }\n</ul>\n<div class=\"ax-tab-container\">\n  <ng-content></ng-content>\n  <ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: [".ax-fit-parent-tab li{width:100%;text-align:center}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }], propDecorators: { tabs: [{
+            args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax nav-tabs\">\n  @for (tab of tabs; track $index) { @if (tabTemplate) {\n  <ng-container\n    [ngTemplateOutlet]=\"tabTemplate\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: tab,\n      selectTab: selectTab.bind(this)\n    }\"\n  >\n  </ng-container>\n  }@else{\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  } }\n  <!-- dynamic tabs -->\n  @for (tab of dynamicTabs; track $index) {\n  <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n    <i class=\"{{ tab.icon }}\"></i>\n\n    <span>\n      {{ tab.caption }}\n      @if (tab.isCloseable) {\n\n      <i (click)=\"closeTab(tab)\" class=\"far fa-times\"> </i>\n      }\n    </span>\n  </li>\n  }\n</ul>\n<div class=\"ax-tab-container\">\n  <ng-content></ng-content>\n  <ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: ["ax-tab-view.ax-fit-parent-tab li{width:100%;text-align:center}ax-tab-view.ax-fit-parent-tab .nav-tabs{border-bottom:none}ax-tab-view.ax-fit-parent-tab .ax-tab-container{width:calc(100% - .5rem)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabs: [{
                 type: ContentChildren,
                 args: [AXTabComponent]
             }], dynamicTabPlaceholder: [{