@acorex/components 7.20.0 → 7.21.0

package/fesm2022/acorex-components-select-box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-select-box.mjs","sources":["../../../../libs/components/select-box/src/lib/select-box.component.ts","../../../../libs/components/select-box/src/lib/select-box.component.html","../../../../libs/components/select-box/src/lib/select-box.module.ts","../../../../libs/components/select-box/src/acorex-components-select-box.ts"],"sourcesContent":["import {\n  AXClearableComponent,\n  AXClosbaleComponent,\n  AXComponent,\n  AXDataSource,\n  AXFocusableComponent,\n  AXHotkeysService,\n  AXSearchableComponent,\n  AXValuableComponent,\n  AXValueChangedEvent,\n  AX_SELECTION_DATA_TOKEN,\n  MXLookComponent,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n  convertArrayToDataSource,\n} from '@acorex/components/common';\nimport { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';\nimport { AXListComponent } from '@acorex/components/list';\nimport { AXSearchBoxComponent } from '@acorex/components/search-box';\nimport { AXUnsubscriber } from '@acorex/core/utils';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostListener,\n  Input,\n  OnDestroy,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n  inject,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { findLastIndex, last, nth } from 'lodash-es';\nimport { classes } from 'polytype';\nimport { Observable } from 'rxjs';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-select-box',\n  templateUrl: './select-box.component.html',\n  styleUrls: ['./select-box.component.scss'],\n  inputs: [\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'placeholder',\n    'minValue',\n    'maxValue',\n    'value',\n    'state',\n    'name',\n    'id',\n    'type',\n    'look',\n    'multiple',\n    'valueField',\n    'textField',\n  ],\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'readonlyChange',\n    'disabledChange',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSelectBoxComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useClass: MXSelectionBridgeService,\n    },\n    AXUnsubscriber,\n  ],\n})\nexport class AXSelectBoxComponent\n  extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent)\n  implements AfterViewInit, OnDestroy {\n  private hotKeyService: AXHotkeysService = inject(AXHotkeysService);\n  isLoading = false;\n  protected renderList = false;\n\n  protected dropdownSizes: { width: string; height: string } = { width: '100%', height: 'auto' };\n\n  protected _listDataSource: AXDataSource<unknown> = convertArrayToDataSource([], {\n    key: this.valueField,\n    pageSize: 10,\n  });\n\n  private _dataSource: AXDataSource<unknown> | unknown[];\n  public get dataSource(): AXDataSource<unknown> | unknown[] {\n    return this._dataSource;\n  }\n  @Input()\n  public set dataSource(v: AXDataSource<unknown> | unknown[]) {\n    this._dataSource = v;\n    if (Array.isArray(v)) {\n      this._listDataSource = convertArrayToDataSource(v, { key: this.valueField, pageSize: 10 });\n    } else {\n      this._listDataSource = this.dataSource as AXDataSource<unknown>;\n    }\n    this._listDataSource.onChanged.subscribe((data) => {\n      this.setDropdownSize(data.totalCount);\n    });\n  }\n\n  @Input()\n  placeholder: string;\n\n  @Input()\n  itemTemplate: TemplateRef<unknown>;\n\n  @Input()\n  emptyTemplate: TemplateRef<unknown>;\n\n  @Input()\n  loadingTemplate: TemplateRef<unknown>;\n\n  @ViewChild('panel') panel!: ElementRef<HTMLDivElement>;\n\n  @ViewChild(AXListComponent)\n  list: AXListComponent;\n\n  @ContentChild(AXSearchBoxComponent, { static: true })\n  searchBox: AXSearchBoxComponent;\n\n  @ViewChild(AXDropdownBoxComponent, { static: true })\n  protected dropdown: AXDropdownBoxComponent;\n\n  protected autoHeight = false;\n\n\n  public selectionService = inject(AX_SELECTION_DATA_TOKEN);\n\n  searchEvent: Observable<unknown>;\n\n  private _unsubscriber = inject(AXUnsubscriber);\n\n  ngAfterViewInit() {\n    this.setDropdownSize();\n  }\n\n  ngOnDestroy(): void {\n    this.searchBox?.onKeyDown.unsubscribe();\n  }\n\n  getItemByKey(key: unknown): Promise<unknown> | unknown {\n    return this._listDataSource.find(key);\n  }\n\n  protected _handleOnOpenedEvent() {\n    this.renderList = true;\n    this.list?.render();\n    this._handleFocus();\n  }\n\n  protected _handleOnClosedEvent() {\n    //this.input.focus();\n    this._unsubscriber.unsubscribe();\n  }\n\n  protected _handleFocus() {\n    setTimeout(() => {\n      if (this.searchBox) {\n        this.searchBox.focus();\n        //TODO: unsubscribe\n        this.hotKeyService\n          .addShortcut({ keys: 'Control.f', element: this.panel.nativeElement })\n          .pipe(this._unsubscriber.takeUntilDestroy)\n          .subscribe(() => {\n            this.searchBox.focus();\n          });\n        this.searchBox.onKeyDown.pipe(this._unsubscriber.takeUntilDestroy).subscribe((e) => {\n          if (e.nativeEvent.code === 'ArrowDown' || e.nativeEvent.key === 'ArrowDown') {\n            this.list?.focus();\n            e.nativeEvent.preventDefault();\n          }\n        });\n      } else {\n        this.list?.focus();\n      }\n    });\n  }\n\n  protected _handleBadgeRemove(e: MouseEvent, item) {\n    this.unselectItems(item);\n    e.stopPropagation();\n  }\n\n  protected _handleValueChanged(e: AXValueChangedEvent) {\n    if (e.isUserInteraction) {\n      this.commitValue(e.component.selectedItems, true);\n    }\n  }\n\n  override internalValueChanged(): void {\n    if (!this.multiple) this.close();\n    setTimeout(() => {\n      this.detectAutoHeight();\n    }, 100);\n  }\n\n  private detectAutoHeight() {\n    const containerWidth: number =\n      this.getHostElement().querySelector<HTMLDivElement>('.ax-select-box-selection').clientWidth;\n    const itemsWidth: number = Array.from(\n      this.getHostElement().querySelectorAll<HTMLDivElement>('.ax-selected-token'),\n    ).reduce((a, i) => a + i.clientWidth, 0);\n    this.autoHeight = containerWidth - itemsWidth <= 8;\n    this.dropdown.updatePosition();\n    this.cdr.markForCheck();\n  }\n\n  private setDropdownSize(count = 0) {\n    if (this.dropdown.isActionsheetStyle) {\n      this.dropdownSizes = {\n        width: '100%',\n        height: ['auto', '0px'].includes(this.dropdownSizes.height)\n          ? `${Math.min(15, count) * 40}px`\n          : this.dropdownSizes.height,\n      };\n    } else {\n      //TODO: calc min-with from formula or config\n      const hostWidth = Math.max(this.getHostElement().offsetWidth, 200);\n      this.dropdownSizes = {\n        width: `${hostWidth}px`,\n        height: count == 0 ? 'auto' : `${Math.min(5, count) * 40}px`,\n      };\n    }\n    setTimeout(() => {\n      this.dropdown.updatePosition();\n    });\n  }\n\n  @HostListener('keydown', ['$event'])\n  _handleKeydown(e: KeyboardEvent) {\n    if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {\n      this.selectItemByNav(e.code === 'ArrowDown' ? 1 : -1);\n      e.preventDefault();\n    } else if (e.code === 'Backspace') {\n      this.unselectItems(this.selectedItems.pop());\n      e.preventDefault();\n    }\n    // if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {\n    //     if (this.readonly || this.disabled) {\n    //         e.preventDefault();\n    //         e.stopPropagation();\n    //         return;\n    //     }\n    //     const id = document.activeElement?.closest('li')?.dataset?.id;\n    //     this.toggleSelect(id);\n    //     e.preventDefault();\n    //     e.stopPropagation()\n    // }\n  }\n\n  private selectItemByNav(sign: 1 | -1) {\n    if (Array.isArray(this.dataSource) && !this.multiple) {\n      const items = this.normalizeItemsList(this.dataSource);\n      const _last: unknown = last(this.selectedItems);\n      let i = -1;\n      if (_last) {\n        i = findLastIndex(items, [this.valueField, _last[this.valueField]]);\n      }\n      i += sign;\n      if (i < 0 || i >= items.length) return;\n      const next = nth<unknown>(items, i);\n      if (next) {\n        this.selectItems(next);\n      }\n    } else {\n      this.open();\n    }\n  }\n\n  search(term: string) {\n    if (term) {\n      this._listDataSource.filter({ field: this.textField, value: term, operator: { type: 'contains' } });\n    } else {\n      this._listDataSource.clearFilter();\n    }\n    this._listDataSource.refresh();\n  }\n\n  refresh() {\n    this.clear(false);\n    this.clearSelectionCache();\n    this.list?.refresh();\n    this.close();\n  }\n}\n","<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection\" [class.ax-multiple]=\"multiple\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n\n      @if(selectedItems.length === 0){\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n      }\n      @for(item of selectedItems; track $index){\n      <div class=\"ax-selected-token\">\n        {{ getDisplayText(item) }}\n        @if(!disabled && !readonly && multiple)\n        {\n        <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\">\n        </span>\n        }\n      </div>\n      }\n\n    </div>\n    @if(selectedItems?.length && !disabled && !readonly)\n    {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      @if(isLoading && !isOpen){\n      <ax-loading type=\"spinner\"></ax-loading>\n      }@else{\n      <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"></span>\n      }\n\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n\n      @if(dropdown.isActionsheetStyle){\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      }\n      @if(searchBox){\n      <div class=\"ax-search-container\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      }\n      @if(renderList){\n      <ax-list [dataSource]=\"_listDataSource\" [multiple]=\"multiple\" [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\" [textField]=\"textField\" [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\" [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\" [selectionMode]=\"'item'\">\n        <ng-template #empty> No Items! </ng-template>\n      </ax-list>\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>","import { AXBadgeModule } from '@acorex/components/badge';\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AXCommonModule } from '@acorex/components/common';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXListModule } from '@acorex/components/list';\nimport { AXTextBoxModule } from '@acorex/components/text-box';\nimport { AXSelectBoxComponent } from './select-box.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    AXCommonModule,\n    FormsModule,\n    AXCheckBoxModule,\n    AXBadgeModule,\n    AXDecoratorModule,\n    AXTranslationModule,\n    AXPopoverModule,\n    AXLoadingModule,\n    A11yModule,\n    AXTextBoxModule,\n    AXDropdownModule,\n    AXListModule,\n  ],\n  exports: [AXSelectBoxComponent],\n  declarations: [AXSelectBoxComponent],\n  providers: [],\n})\nexport class AXSelectBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-select-box.mjs","sources":["../../../../libs/components/select-box/src/lib/select-box.component.ts","../../../../libs/components/select-box/src/lib/select-box.component.html","../../../../libs/components/select-box/src/lib/select-box.module.ts","../../../../libs/components/select-box/src/acorex-components-select-box.ts"],"sourcesContent":["import {\n  AXClearableComponent,\n  AXClosbaleComponent,\n  AXComponent,\n  AXDataSource,\n  AXFocusableComponent,\n  AXHotkeysService,\n  AXSearchableComponent,\n  AXValuableComponent,\n  AXValueChangedEvent,\n  AX_SELECTION_DATA_TOKEN,\n  MXLookComponent,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n  convertArrayToDataSource,\n} from '@acorex/components/common';\nimport { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';\nimport { AXListComponent } from '@acorex/components/list';\nimport { AXSearchBoxComponent } from '@acorex/components/search-box';\nimport { AXUnsubscriber } from '@acorex/core/utils';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostListener,\n  Input,\n  OnDestroy,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  WritableSignal,\n  forwardRef,\n  inject,\n  signal,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { findLastIndex, last, nth } from 'lodash-es';\nimport { classes } from 'polytype';\nimport { Observable } from 'rxjs';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-select-box',\n  templateUrl: './select-box.component.html',\n  styleUrls: ['./select-box.component.scss'],\n  inputs: [\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'placeholder',\n    'minValue',\n    'maxValue',\n    'value',\n    'state',\n    'name',\n    'id',\n    'type',\n    'look',\n    'multiple',\n    'valueField',\n    'textField',\n  ],\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'readonlyChange',\n    'disabledChange',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },\n    { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSelectBoxComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useClass: MXSelectionBridgeService,\n    },\n    AXUnsubscriber,\n  ],\n})\nexport class AXSelectBoxComponent\n  extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent)\n  implements AfterViewInit, OnDestroy\n{\n  private hotKeyService: AXHotkeysService = inject(AXHotkeysService);\n  protected isLoading: WritableSignal<boolean> = signal(false);\n  protected renderList = false;\n\n  protected dropdownSizes: { width: string; height: string } = { width: '100%', height: 'auto' };\n\n  protected _listDataSource: AXDataSource<unknown> = convertArrayToDataSource([], {\n    key: this.valueField,\n    pageSize: 10,\n  });\n\n  private _dataSource: AXDataSource<unknown> | unknown[];\n  public get dataSource(): AXDataSource<unknown> | unknown[] {\n    return this._dataSource;\n  }\n  @Input()\n  public set dataSource(v: AXDataSource<unknown> | unknown[]) {\n    this._dataSource = v;\n    if (Array.isArray(v)) {\n      this._listDataSource = convertArrayToDataSource(v, { key: this.valueField, pageSize: 10 });\n    } else {\n      this._listDataSource = this.dataSource as AXDataSource<unknown>;\n    }\n    this._listDataSource.onChanged.subscribe((data) => {\n      this.setDropdownSize(data.totalCount);\n    });\n    this._listDataSource.onLoadingChanged.subscribe((loading) => {\n      this.isLoading.set(loading);\n    });\n  }\n\n  @Input()\n  placeholder: string;\n\n  @Input()\n  itemTemplate: TemplateRef<unknown>;\n\n  @Input()\n  emptyTemplate: TemplateRef<unknown>;\n\n  @Input()\n  loadingTemplate: TemplateRef<unknown>;\n\n  @ViewChild('panel') panel!: ElementRef<HTMLDivElement>;\n\n  @ViewChild(AXListComponent)\n  list: AXListComponent;\n\n  @ContentChild(AXSearchBoxComponent, { static: true })\n  searchBox: AXSearchBoxComponent;\n\n  @ViewChild(AXDropdownBoxComponent, { static: true })\n  protected dropdown: AXDropdownBoxComponent;\n\n  protected autoHeight = false;\n\n  public selectionService = inject(AX_SELECTION_DATA_TOKEN);\n\n  searchEvent: Observable<unknown>;\n\n  private _unsubscriber = inject(AXUnsubscriber);\n\n  protected ngOnInit(): void {\n    super.ngOnInit();\n    //\n    this.registerValidation();\n  }\n\n  ngAfterViewInit() {\n    this.setDropdownSize();\n  }\n\n  ngOnDestroy(): void {\n    this.searchBox?.onKeyDown.unsubscribe();\n  }\n\n  getItemByKey(key: unknown): Promise<unknown> | unknown {\n    return this._listDataSource.find(key);\n  }\n\n  protected _handleOnOpenedEvent() {\n    this.renderList = true;\n    this.list?.render();\n    this._handleFocus();\n  }\n\n  protected _handleOnClosedEvent() {\n    //this.input.focus();\n    this._unsubscriber.unsubscribe();\n  }\n\n  protected _handleFocus() {\n    setTimeout(() => {\n      if (this.searchBox) {\n        this.searchBox.focus();\n        //TODO: unsubscribe\n        this.hotKeyService\n          .addShortcut({ keys: 'Control.f', element: this.panel.nativeElement })\n          .pipe(this._unsubscriber.takeUntilDestroy)\n          .subscribe(() => {\n            this.searchBox.focus();\n          });\n        this.searchBox.onKeyDown.pipe(this._unsubscriber.takeUntilDestroy).subscribe((e) => {\n          if (e.nativeEvent.code === 'ArrowDown' || e.nativeEvent.key === 'ArrowDown') {\n            this.list?.focus();\n            e.nativeEvent.preventDefault();\n          }\n        });\n      } else {\n        this.list?.focus();\n      }\n    });\n  }\n\n  protected _handleBadgeRemove(e: MouseEvent, item) {\n    this.unselectItems(item);\n    e.stopPropagation();\n  }\n\n  protected _handleValueChanged(e: AXValueChangedEvent) {\n    if (e.isUserInteraction) {\n      this.commitValue(e.component.selectedItems, true);\n    }\n  }\n\n  override internalValueChanged(): void {\n    if (!this.multiple) this.close();\n    setTimeout(() => {\n      this.detectAutoHeight();\n    }, 100);\n  }\n\n  private detectAutoHeight() {\n    const containerWidth: number =\n      this.getHostElement().querySelector<HTMLDivElement>('.ax-select-box-selection').clientWidth;\n    const itemsWidth: number = Array.from(\n      this.getHostElement().querySelectorAll<HTMLDivElement>('.ax-selected-token'),\n    ).reduce((a, i) => a + i.clientWidth, 0);\n    this.autoHeight = containerWidth - itemsWidth <= 8;\n    this.dropdown.updatePosition();\n    this.cdr.markForCheck();\n  }\n\n  private setDropdownSize(count = 0) {\n    if (this.dropdown.isActionsheetStyle) {\n      this.dropdownSizes = {\n        width: '100%',\n        height: ['auto', '0px'].includes(this.dropdownSizes.height)\n          ? `${Math.min(15, count) * 40}px`\n          : this.dropdownSizes.height,\n      };\n    } else {\n      //TODO: calc min-with from formula or config\n      const hostWidth = Math.max(this.getHostElement().offsetWidth, 200);\n      this.dropdownSizes = {\n        width: `${hostWidth}px`,\n        height: count == 0 ? 'auto' : `${Math.min(5, count) * 40}px`,\n      };\n    }\n    setTimeout(() => {\n      this.dropdown.updatePosition();\n    });\n  }\n\n  @HostListener('keydown', ['$event'])\n  _handleKeydown(e: KeyboardEvent) {\n    if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {\n      this.selectItemByNav(e.code === 'ArrowDown' ? 1 : -1);\n      e.preventDefault();\n    } else if (e.code === 'Backspace') {\n      this.unselectItems(this.selectedItems.pop());\n      e.preventDefault();\n    }\n    // if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {\n    //     if (this.readonly || this.disabled) {\n    //         e.preventDefault();\n    //         e.stopPropagation();\n    //         return;\n    //     }\n    //     const id = document.activeElement?.closest('li')?.dataset?.id;\n    //     this.toggleSelect(id);\n    //     e.preventDefault();\n    //     e.stopPropagation()\n    // }\n  }\n\n  private selectItemByNav(sign: 1 | -1) {\n    if (Array.isArray(this.dataSource) && !this.multiple) {\n      const items = this.normalizeItemsList(this.dataSource);\n      const _last: unknown = last(this.selectedItems);\n      let i = -1;\n      if (_last) {\n        i = findLastIndex(items, [this.valueField, _last[this.valueField]]);\n      }\n      i += sign;\n      if (i < 0 || i >= items.length) return;\n      const next = nth<unknown>(items, i);\n      if (next) {\n        this.selectItems(next);\n      }\n    } else {\n      this.open();\n    }\n  }\n\n  search(term: string) {\n    if (term) {\n      this._listDataSource.filter({ field: this.textField, value: term, operator: { type: 'contains' } });\n    } else {\n      this._listDataSource.clearFilter();\n    }\n    this._listDataSource.refresh();\n  }\n\n  refresh() {\n    this.clear(false);\n    this.clearSelectionCache();\n    this.list?.refresh();\n    this.close();\n  }\n}\n","<ax-dropdown-box\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent()\"\n  (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\"\n  [class.ax-auto-height]=\"autoHeight\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-select-box-selection\"\n      [class.ax-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n      (click)=\"toggle()\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        <div class=\"ax-selected-token\">\n          {{ getDisplayText(item) }}\n          @if (!disabled && !readonly && multiple) {\n            <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n          }\n        </div>\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\"\n    >\n      <!-- @if (isLoading() && !isOpen) {\n        <ax-loading type=\"spinner\"></ax-loading>\n      } @else { -->\n      <span\n        class=\"ax-icon ax-icon-chevron-left ax-arrow-button\"\n        [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"\n      ></span>\n      <!-- } -->\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button\n            [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"\n          ></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList) {\n        <ax-list\n          [dataSource]=\"_listDataSource\"\n          [multiple]=\"multiple\"\n          [style.height]=\"dropdownSizes.height\"\n          [valueField]=\"valueField\"\n          [textField]=\"textField\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          [itemTemplate]=\"itemTemplate\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [ngModel]=\"value\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          [selectionMode]=\"'item'\"\n        >\n          <ng-template #empty> No Items! </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { AXBadgeModule } from '@acorex/components/badge';\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AXCommonModule } from '@acorex/components/common';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXListModule } from '@acorex/components/list';\nimport { AXTextBoxModule } from '@acorex/components/text-box';\nimport { AXSelectBoxComponent } from './select-box.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    AXCommonModule,\n    FormsModule,\n    AXCheckBoxModule,\n    AXBadgeModule,\n    AXDecoratorModule,\n    AXTranslationModule,\n    AXPopoverModule,\n    AXLoadingModule,\n    A11yModule,\n    AXTextBoxModule,\n    AXDropdownModule,\n    AXListModule,\n  ],\n  exports: [AXSelectBoxComponent],\n  declarations: [AXSelectBoxComponent],\n  providers: [],\n})\nexport class AXSelectBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-selection-list.mjs

@@ -2,6 +2,7 @@ import { MXSelectionValueComponent, AXComponent, AXFocusableComponent, AXValuabl
 import * as i0 from '@angular/core';
 import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import { AXFormModule } from '@acorex/components/form';
@@ -75,8 +76,8 @@ class AXSelectionListComponent extends MXSelectionValueComponent {
             `${this.readonly ? 'ax-state-readonly' : ''}`,
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { id: "id", name: "name", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", hintField: "hintField", disabledField: "disabledField", readonlyField: "readonlyField", multiple: "multiple", direction: "direction", showControl: "showControl", items: "items", look: "look" }, outputs: { onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { id: "id", name: "name", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", hintField: "hintField", disabledField: "disabledField", readonlyField: "readonlyField", multiple: "multiple", direction: "direction", customTemplate: "customTemplate", showControl: "showControl", items: "items", look: "look" }, outputs: { onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXSelectionListComponent },
             { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },
             { provide: AXValuableComponent, useExisting: AXSelectionListComponent },
@@ -89,9 +90,9 @@ class AXSelectionListComponent extends MXSelectionValueComponent {
                 provide: AX_SELECTION_DATA_TOKEN,
                 useClass: MXSelectionBridgeService,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-{{ direction }}\">\n  @for(item of items; let i = $index; track i ){\n  <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n    <label [class.ax-hide-control]=\"!showControl\">\n      @if(multiple){\n      <input #ic [id]=\"id + '-' + i\" class=\"ax-checkbox\" type=\"checkbox\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      } @else{\n      <input #ir [id]=\"id + '-' + i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      }\n\n      <div>\n        {{ getDisplayText(item) }}\n        @if(item[hintField]){\n        <p class=\"ax-hint-text\">\n          {{ item[hintField] }}\n        </p>\n        }\n\n      </div>\n    </label>\n  </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: [".ax-dark ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-color-primary-900),.25)}ax-selection-list.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding-bottom:.875rem}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul{gap:.75rem}ax-selection-list.ax-look-card ul.ax-vertical>li label,ax-selection-list.ax-look-card ul.ax-horizontal>li label{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{-webkit-margin-start:0px;margin-inline-start:0px}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:.25rem}ax-selection-list ul li label>div{-webkit-margin-start:.75rem;margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-selection-list ul li label>div .ax-hint-text{margin-top:.25rem;font-weight:400;color:rgb(var(--ax-color-text-default),.75)}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-color-danger-500))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-color-danger-500))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-{{ direction }}\">\n  @for(item of items; let i = $index; track i ){\n  <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n\n\n    <label [class.ax-hide-control]=\"!showControl\">\n      @if(multiple){\n      <input [id]=\"id + '-' + i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\"\n        [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      } @else{\n      <input [id]=\"id + '-' + i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      }\n\n      @if(customTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"customTemplate; context: { $implicit: { data:item } }\">\n        </ng-container>\n      </div>\n      } @else {\n      <div>\n        {{ getDisplayText(item) }}\n        @if(item[hintField]){\n        <p class=\"ax-hint-text\">\n          {{ item[hintField] }}\n        </p>\n        }\n      </div>\n      }\n\n\n    </label>\n\n\n  </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: [".ax-dark ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-color-primary-900),.25)}ax-selection-list.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding-bottom:.875rem}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul{gap:.75rem}ax-selection-list.ax-look-card ul.ax-vertical>li label,ax-selection-list.ax-look-card ul.ax-horizontal>li label{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{-webkit-margin-start:0px;margin-inline-start:0px}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:.25rem}ax-selection-list ul li label>div{-webkit-margin-start:.75rem;margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-selection-list ul li label>div .ax-hint-text{margin-top:.25rem;font-weight:400;color:rgb(var(--ax-color-text-default),.75)}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-color-danger-500))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-color-danger-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectionListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-selection-list', inputs: [
                         'id',
@@ -120,9 +121,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             provide: AX_SELECTION_DATA_TOKEN,
                             useClass: MXSelectionBridgeService,
                         },
-                    ], template: "<ul class=\"ax-{{ direction }}\">\n  @for(item of items; let i = $index; track i ){\n  <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n    <label [class.ax-hide-control]=\"!showControl\">\n      @if(multiple){\n      <input #ic [id]=\"id + '-' + i\" class=\"ax-checkbox\" type=\"checkbox\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      } @else{\n      <input #ir [id]=\"id + '-' + i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      }\n\n      <div>\n        {{ getDisplayText(item) }}\n        @if(item[hintField]){\n        <p class=\"ax-hint-text\">\n          {{ item[hintField] }}\n        </p>\n        }\n\n      </div>\n    </label>\n  </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: [".ax-dark ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-color-primary-900),.25)}ax-selection-list.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding-bottom:.875rem}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul{gap:.75rem}ax-selection-list.ax-look-card ul.ax-vertical>li label,ax-selection-list.ax-look-card ul.ax-horizontal>li label{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{-webkit-margin-start:0px;margin-inline-start:0px}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:.25rem}ax-selection-list ul li label>div{-webkit-margin-start:.75rem;margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-selection-list ul li label>div .ax-hint-text{margin-top:.25rem;font-weight:400;color:rgb(var(--ax-color-text-default),.75)}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-color-danger-500))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-color-danger-500))}\n"] }]
+                    ], template: "<ul class=\"ax-{{ direction }}\">\n  @for(item of items; let i = $index; track i ){\n  <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n\n\n    <label [class.ax-hide-control]=\"!showControl\">\n      @if(multiple){\n      <input [id]=\"id + '-' + i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\"\n        [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      } @else{\n      <input [id]=\"id + '-' + i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      }\n\n      @if(customTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"customTemplate; context: { $implicit: { data:item } }\">\n        </ng-container>\n      </div>\n      } @else {\n      <div>\n        {{ getDisplayText(item) }}\n        @if(item[hintField]){\n        <p class=\"ax-hint-text\">\n          {{ item[hintField] }}\n        </p>\n        }\n      </div>\n      }\n\n\n    </label>\n\n\n  </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: [".ax-dark ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-color-primary-900),.25)}ax-selection-list.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding-bottom:.875rem}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul{gap:.75rem}ax-selection-list.ax-look-card ul.ax-vertical>li label,ax-selection-list.ax-look-card ul.ax-horizontal>li label{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{-webkit-margin-start:0px;margin-inline-start:0px}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:.25rem}ax-selection-list ul li label>div{-webkit-margin-start:.75rem;margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-selection-list ul li label>div .ax-hint-text{margin-top:.25rem;font-weight:400;color:rgb(var(--ax-color-text-default),.75)}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-color-danger-500))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-color-danger-500))}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
+            }], customTemplate: [{
+                type: Input
             }], showControl: [{
                 type: Input
             }], items: [{
@@ -135,11 +138,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 
 class AXSelectionListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule], exports: [AXSelectionListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectionListModule, imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule], exports: [AXSelectionListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectionListModule, imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectionListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectionListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSelectionListComponent],

package/fesm2022/acorex-components-selection-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-selection-list.mjs","sources":["../../../../libs/components/selection-list/src/lib/selection-list.component.ts","../../../../libs/components/selection-list/src/lib/selection-list.component.html","../../../../libs/components/selection-list/src/lib/selection-list.module.ts","../../../../libs/components/selection-list/src/acorex-components-selection-list.ts"],"sourcesContent":["import {\n  AXComponent,\n  AXDirection,\n  AXFocusableComponent,\n  AXValuableComponent,\n  AX_SELECTION_DATA_TOKEN,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n} from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type AXSelectionListLook = 'solid' | 'divided' | 'card';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-selection-list',\n  templateUrl: './selection-list.component.html',\n  styleUrls: ['./selection-list.component.scss'],\n  inputs: [\n    'id',\n    'name',\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'size',\n    'value',\n    'valueField',\n    'textField',\n    'hintField',\n    'disabledField',\n    'readonlyField',\n    'multiple',\n  ],\n  outputs: ['onValueChanged', 'onBlur', 'onFocus'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: AXComponent, useExisting: AXSelectionListComponent },\n    { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },\n    { provide: AXValuableComponent, useExisting: AXSelectionListComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSelectionListComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useClass: MXSelectionBridgeService,\n    },\n  ],\n})\n\n//TODO: on parent click (card style) -> checkbox or radio change value\nexport class AXSelectionListComponent extends MXSelectionValueComponent {\n  private _direction: AXDirection = 'horizontal';\n  @Input()\n  public get direction(): AXDirection {\n    return this._direction;\n  }\n  public set direction(v: AXDirection) {\n    this._direction = v;\n  }\n\n  private _showControl = true;\n  @Input()\n  public get showControl(): boolean {\n    return this._showControl;\n  }\n  public set showControl(v: boolean) {\n    this.setOption({\n      name: 'showControl',\n      value: v,\n    });\n  }\n\n  private _items: any[] = [];\n  @Input()\n  public get items(): any[] {\n    return this._items;\n  }\n  public set items(v: any[]) {\n    this.setOption({\n      name: 'items',\n      value: v,\n    });\n  }\n\n  private _hintField = 'hint';\n  public get hintField(): string {\n    return this._hintField;\n  }\n  public set hintField(v: string) {\n    this.setOption({\n      name: 'hintField',\n      value: v,\n    });\n  }\n\n  getItemByKey(key: unknown): unknown {\n    return this.items.find((c) => c == this.value || c[this.valueField] == key);\n  }\n\n  @Input() look: AXSelectionListLook = 'solid';\n\n  protected _handleOnItemValueChange(item: any, e: Event) {\n    if (this.readonly || this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n    } else {\n      (e.target as any).checked ? this.selectItems(item) : this.unselectItems(item);\n    }\n  }\n\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    return [\n      `ax-look-${this.look}`,\n      `${this.disabled ? 'ax-state-disabled' : ''}`,\n      `${this.readonly ? 'ax-state-readonly' : ''}`,\n    ];\n  }\n}\n","<ul class=\"ax-{{ direction }}\">\n  @for(item of items; let i = $index; track i ){\n  <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n    <label [class.ax-hide-control]=\"!showControl\">\n      @if(multiple){\n      <input #ic [id]=\"id + '-' + i\" class=\"ax-checkbox\" type=\"checkbox\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      } @else{\n      <input #ir [id]=\"id + '-' + i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      }\n\n      <div>\n        {{ getDisplayText(item) }}\n        @if(item[hintField]){\n        <p class=\"ax-hint-text\">\n          {{ item[hintField] }}\n        </p>\n        }\n\n      </div>\n    </label>\n  </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSelectionListComponent } from './selection-list.component';\n\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXRadioModule } from '@acorex/components/radio';\n\n@NgModule({\n  declarations: [AXSelectionListComponent],\n  imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule],\n  exports: [AXSelectionListComponent],\n  providers: [],\n})\nexport class AXSelectionListModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-selection-list.mjs","sources":["../../../../libs/components/selection-list/src/lib/selection-list.component.ts","../../../../libs/components/selection-list/src/lib/selection-list.component.html","../../../../libs/components/selection-list/src/lib/selection-list.module.ts","../../../../libs/components/selection-list/src/acorex-components-selection-list.ts"],"sourcesContent":["import {\n  AXComponent,\n  AXDirection,\n  AXFocusableComponent,\n  AXValuableComponent,\n  AX_SELECTION_DATA_TOKEN,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n} from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n  TemplateRef,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type AXSelectionListLook = 'solid' | 'divided' | 'card';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-selection-list',\n  templateUrl: './selection-list.component.html',\n  styleUrls: ['./selection-list.component.scss'],\n  inputs: [\n    'id',\n    'name',\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'size',\n    'value',\n    'valueField',\n    'textField',\n    'hintField',\n    'disabledField',\n    'readonlyField',\n    'multiple',\n  ],\n  outputs: ['onValueChanged', 'onBlur', 'onFocus'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: AXComponent, useExisting: AXSelectionListComponent },\n    { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },\n    { provide: AXValuableComponent, useExisting: AXSelectionListComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSelectionListComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useClass: MXSelectionBridgeService,\n    },\n  ],\n})\n\n//TODO: on parent click (card style) -> checkbox or radio change value\nexport class AXSelectionListComponent extends MXSelectionValueComponent {\n  private _direction: AXDirection = 'horizontal';\n  @Input()\n  public get direction(): AXDirection {\n    return this._direction;\n  }\n  public set direction(v: AXDirection) {\n    this._direction = v;\n  }\n\n  @Input()\n  customTemplate: TemplateRef<unknown>;\n\n  private _showControl = true;\n  @Input()\n  public get showControl(): boolean {\n    return this._showControl;\n  }\n  public set showControl(v: boolean) {\n    this.setOption({\n      name: 'showControl',\n      value: v,\n    });\n  }\n\n  private _items: any[] = [];\n  @Input()\n  public get items(): any[] {\n    return this._items;\n  }\n  public set items(v: any[]) {\n    this.setOption({\n      name: 'items',\n      value: v,\n    });\n  }\n\n  private _hintField = 'hint';\n  public get hintField(): string {\n    return this._hintField;\n  }\n  public set hintField(v: string) {\n    this.setOption({\n      name: 'hintField',\n      value: v,\n    });\n  }\n\n  getItemByKey(key: unknown): unknown {\n    return this.items.find((c) => c == this.value || c[this.valueField] == key);\n  }\n\n  @Input() look: AXSelectionListLook = 'solid';\n\n  protected _handleOnItemValueChange(item: any, e: Event) {\n    if (this.readonly || this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n    } else {\n      (e.target as any).checked ? this.selectItems(item) : this.unselectItems(item);\n    }\n  }\n\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    return [\n      `ax-look-${this.look}`,\n      `${this.disabled ? 'ax-state-disabled' : ''}`,\n      `${this.readonly ? 'ax-state-readonly' : ''}`,\n    ];\n  }\n}\n","<ul class=\"ax-{{ direction }}\">\n  @for(item of items; let i = $index; track i ){\n  <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n\n\n    <label [class.ax-hide-control]=\"!showControl\">\n      @if(multiple){\n      <input [id]=\"id + '-' + i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\"\n        [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      } @else{\n      <input [id]=\"id + '-' + i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\"\n        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\n        [disabled]=\"disabled || item[disabledField]\" [readOnly]=\"readonly\" />\n      }\n\n      @if(customTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"customTemplate; context: { $implicit: { data:item } }\">\n        </ng-container>\n      </div>\n      } @else {\n      <div>\n        {{ getDisplayText(item) }}\n        @if(item[hintField]){\n        <p class=\"ax-hint-text\">\n          {{ item[hintField] }}\n        </p>\n        }\n      </div>\n      }\n\n\n    </label>\n\n\n  </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSelectionListComponent } from './selection-list.component';\n\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXRadioModule } from '@acorex/components/radio';\n\n@NgModule({\n  declarations: [AXSelectionListComponent],\n  imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule],\n  exports: [AXSelectionListComponent],\n  providers: [],\n})\nexport class AXSelectionListModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-side-menu.mjs

@@ -80,8 +80,8 @@ class AXSideMenuItemComponent extends classes(MXInteractiveComponent, MXColorCom
     ngAfterContentInit() {
         this.hasChild = this.elem.nativeElement.getElementsByTagName('ax-side-menu-item').length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: { disabled: "disabled", color: "color", text: "text", isCollapsed: "isCollapsed", active: "active" }, outputs: { textChange: "textChange", isCollapsedChange: "isCollapsedChange", activeChange: "activeChange", onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n<div [axRipple] class=\"ax-side-item\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-active]=\"active\"\n  (click)=\"_handleClickEvent($event)\">\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if(hasChild){\n    <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed\"></span>\n    }\n  </div>\n</div>\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed\">\n  <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>", dependencies: [{ kind: "directive", type: i1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: { disabled: "disabled", color: "color", text: "text", isCollapsed: "isCollapsed", active: "active" }, outputs: { textChange: "textChange", isCollapsedChange: "isCollapsedChange", activeChange: "activeChange", onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n<div [axRipple] class=\"ax-side-item\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-active]=\"active\"\n  (click)=\"_handleClickEvent($event)\">\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if(hasChild){\n    <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed\"></span>\n    }\n  </div>\n</div>\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed\">\n  <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>", dependencies: [{ kind: "directive", type: i1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -90,7 +90,7 @@ class AXSideMenuItemComponent extends classes(MXInteractiveComponent, MXColorCom
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu-item', inputs: ['disabled', 'color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [
@@ -117,10 +117,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 
 class AXSideMenuComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXSideMenuComponent, selector: "ax-side-menu", usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>", styles: ["ax-side-menu{display:flex;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-direction:column;font-size:.875rem;line-height:1.25rem;color:inherit}ax-side-menu>ax-title{margin-bottom:.5rem;display:block;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-bottom:.5rem;margin-top:.5rem;display:block;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{margin-top:.25rem;margin-bottom:.25rem;display:block;height:1px;width:100%;background-color:rgba(var(--ax-color-border-default))}ax-side-menu ax-side-menu-item .ax-side-item{padding:.75em 1em;margin-bottom:.25em;font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;border-radius:var(--ax-rounded-border-default);font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5!important}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-color-primary-200))!important;color:rgba(var(--ax-color-primary-fore-tint))!important}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;line-height:1;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(90deg)}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-color-primary-500),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-left:1.25rem;padding-right:1.25rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXSideMenuComponent, selector: "ax-side-menu", usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>", styles: ["ax-side-menu{display:flex;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-direction:column;font-size:.875rem;line-height:1.25rem;color:inherit}ax-side-menu>ax-title{margin-bottom:.5rem;display:block;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-bottom:.5rem;margin-top:.5rem;display:block;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{margin-top:.25rem;margin-bottom:.25rem;display:block;height:1px;width:100%;background-color:rgba(var(--ax-color-border-default))}ax-side-menu ax-side-menu-item .ax-side-item{padding:.75em 1em;margin-bottom:.25em;font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;border-radius:var(--ax-rounded-border-default);font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5!important}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-color-primary-200))!important;color:rgba(var(--ax-color-primary-fore-tint))!important}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;line-height:1;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(90deg)}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-color-primary-500),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-left:1.25rem;padding-right:1.25rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>", styles: ["ax-side-menu{display:flex;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-direction:column;font-size:.875rem;line-height:1.25rem;color:inherit}ax-side-menu>ax-title{margin-bottom:.5rem;display:block;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-bottom:.5rem;margin-top:.5rem;display:block;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{margin-top:.25rem;margin-bottom:.25rem;display:block;height:1px;width:100%;background-color:rgba(var(--ax-color-border-default))}ax-side-menu ax-side-menu-item .ax-side-item{padding:.75em 1em;margin-bottom:.25em;font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;border-radius:var(--ax-rounded-border-default);font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5!important}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-color-primary-200))!important;color:rgba(var(--ax-color-primary-fore-tint))!important}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;line-height:1;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(90deg)}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-color-primary-500),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-left:1.25rem;padding-right:1.25rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"] }]
         }] });
@@ -128,11 +128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
 const COMPONENT = [AXSideMenuComponent, AXSideMenuItemComponent];
 const MODULES = [CommonModule, AXCommonModule, AXRippleDirective];
 class AXSideMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuModule, declarations: [AXSideMenuComponent, AXSideMenuItemComponent], imports: [CommonModule, AXCommonModule, AXRippleDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule, AXCommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuModule, declarations: [AXSideMenuComponent, AXSideMenuItemComponent], imports: [CommonModule, AXCommonModule, AXRippleDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule, AXCommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSideMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-skeleton.mjs

@@ -11,10 +11,10 @@ class AXSkeletonComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-skeleton ${this.animated ? 'ax-skeleton-animate' : ''}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: { animated: "animated" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-color-black),.1)}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:14rem;content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-color-black),20%) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}.ax-dark ax-skeleton.ax-skeleton{background-color:rgba(var(--ax-color-white),.1)}.ax-dark ax-skeleton.ax-skeleton-animate:before{background:linear-gradient(to right,transparent 0%,rgba(var(--ax-color-white),20%) 50%,transparent 100%)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: { animated: "animated" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-color-black),.1)}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:14rem;content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-color-black),20%) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}.ax-dark ax-skeleton.ax-skeleton{background-color:rgba(var(--ax-color-white),.1)}.ax-dark ax-skeleton.ax-skeleton-animate:before{background:linear-gradient(to right,transparent 0%,rgba(var(--ax-color-white),20%) 50%,transparent 100%)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-skeleton', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-color-black),.1)}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:14rem;content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-color-black),20%) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}.ax-dark ax-skeleton.ax-skeleton{background-color:rgba(var(--ax-color-white),.1)}.ax-dark ax-skeleton.ax-skeleton-animate:before{background:linear-gradient(to right,transparent 0%,rgba(var(--ax-color-white),20%) 50%,transparent 100%)}\n"] }]
         }], propDecorators: { animated: [{
@@ -25,11 +25,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 
 class AXSkeletonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXSkeletonModule, declarations: [AXSkeletonComponent], imports: [CommonModule], exports: [AXSkeletonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSkeletonModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXSkeletonModule, declarations: [AXSkeletonComponent], imports: [CommonModule], exports: [AXSkeletonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSkeletonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSkeletonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSkeletonComponent],

package/fesm2022/acorex-components-switch.mjs

@@ -9,10 +9,10 @@ class AXSwitchContentComponent extends MXBaseComponent {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXSwitchContentComponent, selector: "ax-switch-handler-content,ax-switch-handler-on-content,ax-switch-handler-off-content,ax-switch-off-content,ax-switch-on-content", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXSwitchContentComponent, selector: "ax-switch-handler-content,ax-switch-handler-on-content,ax-switch-handler-off-content,ax-switch-off-content,ax-switch-on-content", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-switch-handler-content,ax-switch-handler-on-content,ax-switch-handler-off-content,ax-switch-off-content,ax-switch-on-content',
@@ -34,16 +34,16 @@ class AXSwitchComponent extends classes((MXValueComponent), MXColorComponent) {
     get __hostClass() {
         return `ax-${this.color ? this.color : 'primary'}-solid`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", color: "color", tabIndex: "tabIndex", value: "value", name: "name", loading: "loading" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", color: "color", tabIndex: "tabIndex", value: "value", name: "name", isLoading: "isLoading" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXSwitchComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n  (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n  (click)=\"_handleOnClickEvent($event)\">\n  <div class=\"ax-switch-handle\">\n    @if(loading){\n    <span class=\"ax-loader\"></span>\n    }\n    @if(!loading){\n    <ng-content select=\"ax-switch-handler-content\"></ng-content>\n    }\n    @if(!loading && value){\n    <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n    }\n    @if(!loading && !value){\n    <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n    }\n  </div>\n  @if(!value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-off-content\"></ng-content>\n  </span>\n  }\n  @if(value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-on-content\"></ng-content>\n  </span>\n  }\n</button>", styles: [".ax-dark ax-switch button{background-color:rgba(var(--ax-color-white),.3)!important}ax-switch{line-height:initial}ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm button .ax-switch-handle .ax-loader{min-height:10px!important;min-width:10px!important}ax-switch.ax-sm .ax-switch-handle{height:.75rem;width:.75rem}ax-switch.ax-lg button{min-width:2.5rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{height:1.25rem;width:1.25rem}ax-switch button{position:relative;display:inline-block;height:1.25rem;min-width:2.25rem;cursor:pointer;border-radius:9999px;vertical-align:middle;line-height:1.25rem;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-color-black),.3)!important}ax-switch button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-start:.375rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{transition:width .3s;position:absolute;inset-inline-start:.125rem;top:.125rem;display:flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;background-color:rgba(var(--ax-color-white));font-size:100%;color:rgba(var(--ax-color-black),.5);--ax-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle .ax-loader{animation:rotation .5s linear infinite;box-sizing:border-box;display:inline-block;min-height:12px;min-width:12px;transform:translateY(-50%);border-radius:9999px;border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ax-switch button .ax-switch-handle:before{content:\"\";position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-switch button .ax-switch-inner{transition:margin .2s;-webkit-margin-end:.375rem;margin-inline-end:.375rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}ax-switch.ax-primary-solid button:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-primary-fore))}ax-switch.ax-primary-solid button .ax-switch-handle{color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}ax-switch.ax-secondary-solid button:focus-visible{outline-color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-solid button .ax-switch-handle{color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-secondary-500));border-bottom-color:transparent}ax-switch.ax-success-solid button:focus-visible{outline-color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-success-500))!important}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-success-fore))}ax-switch.ax-success-solid button .ax-switch-handle{color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-success-500));border-bottom-color:transparent}ax-switch.ax-warning-solid button:focus-visible{outline-color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-warning-500))!important}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-warning-fore))}ax-switch.ax-warning-solid button .ax-switch-handle{color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-warning-500));border-bottom-color:transparent}ax-switch.ax-danger-solid button:focus-visible{outline-color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-danger-500))!important}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-danger-fore))}ax-switch.ax-danger-solid button .ax-switch-handle{color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-danger-500));border-bottom-color:transparent}ax-switch.ax-info-solid button:focus-visible{outline-color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-info-500))!important}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-info-fore))}ax-switch.ax-info-solid button .ax-switch-handle{color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-info-500));border-bottom-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n  (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n  (click)=\"_handleOnClickEvent($event)\">\n  <div class=\"ax-switch-handle\">\n    @if(isLoading){\n    <span class=\"ax-loader\"></span>\n    }\n    @if(!isLoading){\n    <ng-content select=\"ax-switch-handler-content\"></ng-content>\n    }\n    @if(!isLoading && value){\n    <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n    }\n    @if(!isLoading && !value){\n    <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n    }\n  </div>\n  @if(!value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-off-content\"></ng-content>\n  </span>\n  }\n  @if(value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-on-content\"></ng-content>\n  </span>\n  }\n</button>", styles: [".ax-dark ax-switch button{background-color:rgba(var(--ax-color-white),.3)!important}ax-switch{line-height:initial}ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm button .ax-switch-handle .ax-loader{min-height:10px!important;min-width:10px!important}ax-switch.ax-sm .ax-switch-handle{height:.75rem;width:.75rem}ax-switch.ax-lg button{min-width:2.5rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{height:1.25rem;width:1.25rem}ax-switch button{position:relative;display:inline-block;height:1.25rem;min-width:2.25rem;cursor:pointer;border-radius:9999px;vertical-align:middle;line-height:1.25rem;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-color-black),.3)!important}ax-switch button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-start:.375rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{transition:width .3s;position:absolute;inset-inline-start:.125rem;top:.125rem;display:flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;background-color:rgba(var(--ax-color-white));font-size:80%;color:rgba(var(--ax-color-black),.5);--ax-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle .ax-loader{animation:rotation .5s linear infinite;box-sizing:border-box;display:inline-block;min-height:12px;min-width:12px;transform:translateY(-50%);border-radius:9999px;border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ax-switch button .ax-switch-handle:before{content:\"\";position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-switch button .ax-switch-inner{transition:margin .2s;-webkit-margin-end:.375rem;margin-inline-end:.375rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}ax-switch.ax-primary-solid button:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-primary-fore))}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}ax-switch.ax-primary-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-primary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-secondary-solid button:focus-visible{outline-color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-secondary-500));border-bottom-color:transparent}ax-switch.ax-secondary-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-secondary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-success-solid button:focus-visible{outline-color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-success-500))!important}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-success-fore))}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-success-500));border-bottom-color:transparent}ax-switch.ax-success-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-success-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-warning-solid button:focus-visible{outline-color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-warning-500))!important}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-warning-fore))}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-warning-500));border-bottom-color:transparent}ax-switch.ax-warning-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-warning-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-danger-solid button:focus-visible{outline-color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-danger-500))!important}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-danger-fore))}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-danger-500));border-bottom-color:transparent}ax-switch.ax-danger-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-danger-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-info-solid button:focus-visible{outline-color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-info-500))!important}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-info-fore))}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-info-500));border-bottom-color:transparent}ax-switch.ax-info-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-info-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-switch', inputs: ['disabled', 'readonly', 'color', 'tabIndex', 'value', 'name'], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged', 'readonlyChange', 'disabledChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -51,8 +51,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             useExisting: forwardRef(() => AXSwitchComponent),
                             multi: true,
                         },
-                    ], template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n  (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n  (click)=\"_handleOnClickEvent($event)\">\n  <div class=\"ax-switch-handle\">\n    @if(loading){\n    <span class=\"ax-loader\"></span>\n    }\n    @if(!loading){\n    <ng-content select=\"ax-switch-handler-content\"></ng-content>\n    }\n    @if(!loading && value){\n    <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n    }\n    @if(!loading && !value){\n    <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n    }\n  </div>\n  @if(!value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-off-content\"></ng-content>\n  </span>\n  }\n  @if(value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-on-content\"></ng-content>\n  </span>\n  }\n</button>", styles: [".ax-dark ax-switch button{background-color:rgba(var(--ax-color-white),.3)!important}ax-switch{line-height:initial}ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm button .ax-switch-handle .ax-loader{min-height:10px!important;min-width:10px!important}ax-switch.ax-sm .ax-switch-handle{height:.75rem;width:.75rem}ax-switch.ax-lg button{min-width:2.5rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{height:1.25rem;width:1.25rem}ax-switch button{position:relative;display:inline-block;height:1.25rem;min-width:2.25rem;cursor:pointer;border-radius:9999px;vertical-align:middle;line-height:1.25rem;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-color-black),.3)!important}ax-switch button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-start:.375rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{transition:width .3s;position:absolute;inset-inline-start:.125rem;top:.125rem;display:flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;background-color:rgba(var(--ax-color-white));font-size:100%;color:rgba(var(--ax-color-black),.5);--ax-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle .ax-loader{animation:rotation .5s linear infinite;box-sizing:border-box;display:inline-block;min-height:12px;min-width:12px;transform:translateY(-50%);border-radius:9999px;border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ax-switch button .ax-switch-handle:before{content:\"\";position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-switch button .ax-switch-inner{transition:margin .2s;-webkit-margin-end:.375rem;margin-inline-end:.375rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}ax-switch.ax-primary-solid button:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-primary-fore))}ax-switch.ax-primary-solid button .ax-switch-handle{color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}ax-switch.ax-secondary-solid button:focus-visible{outline-color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-solid button .ax-switch-handle{color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-secondary-500));border-bottom-color:transparent}ax-switch.ax-success-solid button:focus-visible{outline-color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-success-500))!important}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-success-fore))}ax-switch.ax-success-solid button .ax-switch-handle{color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-success-500));border-bottom-color:transparent}ax-switch.ax-warning-solid button:focus-visible{outline-color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-warning-500))!important}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-warning-fore))}ax-switch.ax-warning-solid button .ax-switch-handle{color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-warning-500));border-bottom-color:transparent}ax-switch.ax-danger-solid button:focus-visible{outline-color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-danger-500))!important}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-danger-fore))}ax-switch.ax-danger-solid button .ax-switch-handle{color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-danger-500));border-bottom-color:transparent}ax-switch.ax-info-solid button:focus-visible{outline-color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-info-500))!important}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-info-fore))}ax-switch.ax-info-solid button .ax-switch-handle{color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-info-500));border-bottom-color:transparent}\n"] }]
-        }], propDecorators: { loading: [{
+                    ], template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n  (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n  (click)=\"_handleOnClickEvent($event)\">\n  <div class=\"ax-switch-handle\">\n    @if(isLoading){\n    <span class=\"ax-loader\"></span>\n    }\n    @if(!isLoading){\n    <ng-content select=\"ax-switch-handler-content\"></ng-content>\n    }\n    @if(!isLoading && value){\n    <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n    }\n    @if(!isLoading && !value){\n    <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n    }\n  </div>\n  @if(!value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-off-content\"></ng-content>\n  </span>\n  }\n  @if(value){\n  <span class=\"ax-switch-inner\">\n    <ng-content select=\"ax-switch-on-content\"></ng-content>\n  </span>\n  }\n</button>", styles: [".ax-dark ax-switch button{background-color:rgba(var(--ax-color-white),.3)!important}ax-switch{line-height:initial}ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm button .ax-switch-handle .ax-loader{min-height:10px!important;min-width:10px!important}ax-switch.ax-sm .ax-switch-handle{height:.75rem;width:.75rem}ax-switch.ax-lg button{min-width:2.5rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{height:1.25rem;width:1.25rem}ax-switch button{position:relative;display:inline-block;height:1.25rem;min-width:2.25rem;cursor:pointer;border-radius:9999px;vertical-align:middle;line-height:1.25rem;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-color-black),.3)!important}ax-switch button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-start:.375rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{transition:width .3s;position:absolute;inset-inline-start:.125rem;top:.125rem;display:flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;background-color:rgba(var(--ax-color-white));font-size:80%;color:rgba(var(--ax-color-black),.5);--ax-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle .ax-loader{animation:rotation .5s linear infinite;box-sizing:border-box;display:inline-block;min-height:12px;min-width:12px;transform:translateY(-50%);border-radius:9999px;border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ax-switch button .ax-switch-handle:before{content:\"\";position:absolute;border-radius:9999px;background-color:rgba(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-switch button .ax-switch-inner{transition:margin .2s;-webkit-margin-end:.375rem;margin-inline-end:.375rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}ax-switch.ax-primary-solid button:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-primary-fore))}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent}ax-switch.ax-primary-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-primary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-secondary-solid button:focus-visible{outline-color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-secondary-500));border-bottom-color:transparent}ax-switch.ax-secondary-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-secondary-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-success-solid button:focus-visible{outline-color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-success-500))!important}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-success-fore))}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-success-500));border-bottom-color:transparent}ax-switch.ax-success-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-success-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-warning-solid button:focus-visible{outline-color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-warning-500))!important}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-warning-fore))}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-warning-500));border-bottom-color:transparent}ax-switch.ax-warning-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-warning-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-danger-solid button:focus-visible{outline-color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-danger-500))!important}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-danger-fore))}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-danger-500));border-bottom-color:transparent}ax-switch.ax-danger-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-danger-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}ax-switch.ax-info-solid button:focus-visible{outline-color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button.ax-switch-checked{background-color:rgba(var(--ax-color-info-500))!important}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-info-fore))}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-handle{color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-solid button.ax-switch-checked .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-info-500));border-bottom-color:transparent}ax-switch.ax-info-solid button .ax-switch-handle{color:rgba(var(--ax-color-black),.3)}ax-switch.ax-info-solid button .ax-switch-handle .ax-loader{border-color:rgba(var(--ax-color-black),.3);border-bottom-color:transparent}\n"] }]
+        }], propDecorators: { isLoading: [{
                 type: Input
             }], __hostClass: [{
                 type: HostBinding,
@@ -60,11 +60,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 
 class AXSwitchModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent, AXSwitchContentComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent, AXSwitchContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchModule, imports: [CommonModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent, AXSwitchContentComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent, AXSwitchContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchModule, imports: [CommonModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSwitchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSwitchComponent, AXSwitchContentComponent],