@apexara/ng-components 1.0.5 → 1.0.6-test.1

package/fesm2022/apexara-ng-components-listbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-listbox.mjs","sources":["../../../../projects/apexara/ng-components/listbox/src/listbox.component.ts","../../../../projects/apexara/ng-components/listbox/src/listbox.component.html","../../../../projects/apexara/ng-components/listbox/apexara-ng-components-listbox.ts"],"sourcesContent":["import { Component, SimpleChanges, ViewChild, ElementRef, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { FormGroup, AbstractControl } from '@angular/forms';\n\nimport { Subscription, debounceTime, fromEvent, tap } from 'rxjs';\n\nimport { ApexSelectData } from '@apexara/ng-components/select';\nimport { ApexControlErrors } from '@apexara/ng-components/input';\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexListBoxOptions {\n  data: ApexSelectData[];\n  label?: string;\n  tooltip?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n}\n\n@Component({\n  standalone: true,\n  selector: 'apex-listbox',\n  templateUrl: './listbox.component.html',\n  styleUrls: ['./listbox.component.css'],\n  imports: [\n    ScrollingModule,\n    ApexTooltipDirective,\n  ]\n})\n\nexport class ApexListboxComponent {\n\n  constructor (\n    private elementRef: ElementRef,\n    private changeDetectorRef: ChangeDetectorRef) {\n  }\n\n  @ViewChild('listbox') listbox: ElementRef<HTMLDivElement> | null = null;\n  @ViewChild(CdkVirtualScrollViewport) cdkViewport?: CdkVirtualScrollViewport;\n\n  @Input() options!: ApexListBoxOptions;\n\n  @Input() virtualScroll: boolean = false;\n  @Input() itemSize: number = 28; // Must match CSS row height of an item\n\n  @Output() selectChange = new EventEmitter<ApexSelectData[]>();\n\n  public tooltipPosition = TooltipPosition;\n\n  public controlError!: string;\n  public controlInvalid = false;\n  public control: AbstractControl | null = null;  \n  public controlSubscription: Subscription | null = null;\n\n  private documentKeyupValue = '';\n  private documentKeyupValueResetTime = 1000;\n  private documentKeyDownSubscription!: Subscription;\n\n  private isMetaHold = false;\n  private isShiftHold = false;\n\n  private listHeight: number = 224; // Default matches CSS\n\n  private lastSelectedItemIndex = 0;\n  private lastSelectedItemIndexOnShiftHold = 0;\n\n  // Drag selection state\n  private dragSelecting = false;\n  private dragAnchorIndex = 0;\n\n  private selectedItems!: (ApexSelectData | null)[];\n\n  public ngOnInit(): void {\n    this.control = this.getControl();\n  \n    this.selectedItems = new Array(this.options.data.length).fill(null);\n\n    if (!this.virtualScroll) {\n      this.changeDetectorRef.detach();\n    }\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public ngAfterViewInit(): void {\n    this.documentKeyDownSubscription = fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')\n      .pipe(\n        tap(event => { this.keydown(event) }),\n        debounceTime(this.documentKeyupValueResetTime))\n      .subscribe(() => { this.documentKeyupValue = '' });\n  }\n\n  public ngOnDestroy(): void {\n    this.documentKeyDownSubscription.unsubscribe();\n\n    if (this.controlSubscription) {\n      this.controlSubscription?.unsubscribe();\n    }\n  }\n\n  public ngOnChanges(changes: SimpleChanges): void {\n    if (changes['options'] && changes['options'].currentValue['data'] && this.selectedItems) {\n      this.selectedItems.length = 0;\n\n      // Refresh virtual viewport if enabled\n      setTimeout(() => {\n        this.cdkViewport?.checkViewportSize();\n        this.changeDetectorRef.detectChanges();\n      });\n    }\n  }\n\n  public mousedown(index: number): void {\n    this.dragSelecting = true;\n    this.dragAnchorIndex = index;\n\n    if (this.isShiftHold) {\n      const max = Math.max(index, this.lastSelectedItemIndexOnShiftHold);\n      const min = Math.min(index, this.lastSelectedItemIndexOnShiftHold);\n\n      const indices = [] as number[];\n\n      for (let i = min; i <= max; i++) { indices.push(i); }\n\n      this.clearAllSelections();\n      this.addSelectedItems(indices);\n      return;\n    }\n\n    if (this.isMetaHold) {\n      if (this.isIndexSelected(index)) {\n        this.removeSelectedItems(index);\n      } else {\n        this.addSelectedItems(index);\n      }\n      return;\n    }\n\n    this.clearAllSelections();\n    this.addSelectedItems(index);\n  }\n\n  @HostListener('document:mouseup')\n  public mouseup(): void {\n    this.dragSelecting = false;\n  }\n\n  @HostListener('keyup', ['$event'])\n  public keyup(event: KeyboardEvent): void {\n    if (event.code.toLowerCase().includes('shift')) {\n      this.isShiftHold = false;\n\n      return;\n    }\n\n    if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n      this.isMetaHold = false;\n    }\n  }\n\n  public mouseover(index: number): void {\n    if (!this.dragSelecting || this.isMetaHold || this.isShiftHold) {\n      return;\n    }\n\n    const min = Math.min(this.dragAnchorIndex, index);\n    const max = Math.max(this.dragAnchorIndex, index);\n\n    const indices: number[] = [];\n    for (let i = min; i <= max; i++) { indices.push(i); }\n\n    this.clearAllSelections();\n    this.addSelectedItems(indices);\n  }\n\n  private keydown(event: KeyboardEvent): void {\n    if ((document.activeElement !== this.listbox?.nativeElement) && (document.activeElement !== this.listbox?.nativeElement.childNodes[0])) {\n      return;\n    }\n\n    if (event.code.toLowerCase().includes('shift')) {\n      this.isShiftHold = true;\n      this.lastSelectedItemIndexOnShiftHold = this.lastSelectedItemIndex;\n    }\n\n    if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n      this.isMetaHold = true;\n    }\n\n    if (event.code.toLowerCase().includes('arrowdown')) {\n      event.preventDefault();\n\n      this.documentArrowsKeyup(true);\n\n      return;\n    }\n\n    if (event.code.toLowerCase().includes('arrowup')) {\n      event.preventDefault();\n\n      this.documentArrowsKeyup(false);\n\n      return;\n    }\n\n    this.documentKeyup(event);\n  }\n\n  private documentArrowsKeyup(isDownArrow: boolean): void {\n    const dataLength = this.options.data.length;\n\n    let newIndex = isDownArrow ? this.lastSelectedItemIndex + 1 : this.lastSelectedItemIndex - 1;\n\n    if (this.isShiftHold) {\n      if (newIndex < 0 || newIndex === dataLength) {\n        return;\n      }\n\n      if (this.isIndexSelected(newIndex)) {\n        const indexForDeselect = isDownArrow ? newIndex - 1 : newIndex + 1;\n        this.removeSelectedItems(indexForDeselect);\n      } else {\n        this.addSelectedItems(newIndex);\n      }\n\n      this.lastSelectedItemIndex = newIndex;\n      this.scrollIndexIntoView(newIndex);\n\n      return;\n    }\n\n    this.clearAllSelections();\n\n    newIndex = newIndex < 0 ? 0 : newIndex;\n    newIndex = newIndex >= dataLength ? dataLength - 1 : newIndex;\n\n    this.addSelectedItems(newIndex);\n    this.scrollIndexIntoView(newIndex);\n  }\n\n  private documentKeyup(event: KeyboardEvent): void {\n    if (this.isMetaHold && event.key.toLowerCase() === 'a') {\n      event.preventDefault();\n\n      const itemsToAdd = [...this.options.data.keys()];\n      this.addSelectedItems(itemsToAdd);\n\n      return;\n    }\n\n    this.documentKeyupValue = this.documentKeyupValue + event.key.toLowerCase();\n\n    let newIndex: number | null = null;\n\n    for (let i = 0; i < this.options.data.length; i++) {\n      const subLabel = this.options.data[i].label.substring(0, this.documentKeyupValue.length).toLowerCase();\n\n      if (subLabel === this.documentKeyupValue) {\n        newIndex = i;\n\n        break;\n      }\n    }\n\n    if (newIndex !== null) {\n      this.clearAllSelections();\n      this.addSelectedItems(newIndex);\n      this.scrollIndexIntoView(newIndex);\n    }\n  }\n\n  private addSelectedItems(index: number | number[]) {\n    const isIndexNumber = typeof index === 'number';\n\n    this.lastSelectedItemIndex = isIndexNumber ? index : index.slice(-1)[0];\n\n    if (isIndexNumber) {\n      this.selectedItems[index] = this.options.data[index];\n    } else {\n      for (let i of index) {\n        this.selectedItems[i] = this.options.data[i];\n      }\n    }\n\n    if (this.control) {\n      this.control.setValue(this.selectedItems.filter(value => value !== null));\n    }\n\n    this.selectChange.emit(this.selectedItems.filter(Boolean) as ApexSelectData[]);\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private removeSelectedItems(index: number | number[]) {\n    const isIndexNumber = typeof index === 'number';\n\n    if (isIndexNumber) {\n      this.selectedItems[index] = null;\n    } else {\n      for (let i of index) {\n        this.selectedItems[i] = null;\n      }\n    }\n\n    if (this.control) {\n      this.control?.setValue(this.selectedItems.filter(value => value !== null));\n    }\n\n    this.selectChange.emit(this.selectedItems.filter(Boolean) as ApexSelectData[]);\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private clearAllSelections(): void {\n    this.selectedItems = new Array(this.options.data.length).fill(null);\n\n    if (this.control) {\n      this.control.setValue([]);\n    }\n\n    this.selectChange.emit([]);\n  }\n\n  public isIndexSelected(index: number): boolean {\n    return !!this.selectedItems[index];\n  }\n\n  public trackByIndex(index: number): number { return index; }\n\n  private scrollIndexIntoView(index: number): void {\n    if (this.virtualScroll && this.cdkViewport) {\n      this.cdkViewport.scrollToIndex(index, 'smooth');\n      return;\n    }\n\n    const container = this.listbox?.nativeElement;\n\n    if (!container) {\n      return;\n    }\n\n    const target = container.querySelector(`.item[value=\"${index}\"]`);\n    target?.scrollIntoView({ block: 'nearest' });\n  }\n\n  public shouldShowViewportScroll(): boolean {\n    if (!this.virtualScroll) {\n      return false;\n    }\n\n    const renderedCount = this.options?.data ? this.options.data.length : 0;\n\n    const rowsHeight = this.itemSize * renderedCount;\n\n    return rowsHeight > this.listHeight;\n  }\n\n  private getControl(): AbstractControl | null {\n    if (this.options.formGroup && this.options.formControlName) {\n      this.controlSubscription = this.options.formGroup.controls[this.options.formControlName].valueChanges.subscribe(() => {\n        if (!this.control) {\n          return;\n        }\n  \n        this.checkIfControlInvalid(this.control);\n\n        this.getControlError(this.control);\n      });\n\n      return this.options.formGroup.get(this.options.formControlName);\n    }\n  \n    return null;\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.invalid;\n  }\n\n  private getControlError(control: AbstractControl): void {\n    this.controlError = '';\n\n    const options = this.options!;\n\n    if (options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (control.hasError(error)) {\n          this.controlError = options.errors[error];\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    <div class=\"listbox-header\">\n        @if (options.label) {\n            <label>{{ options.label }}</label>\n        }\n\n        @if (options.tooltip) {\n            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g>\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        }\n    </div>\n\n    <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n        @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n                <div class=\"item\"\n                     *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n                     [attr.value]=\"i\"\n                     [style.height.px]=\"itemSize\"\n                     [style.line-height.px]=\"itemSize\"\n                     [class.selected]=\"isIndexSelected(i)\"\n                     (mousedown)=\"mousedown(i)\"\n                     (mouseover)=\"mouseover(i)\">\n                    {{ data.label }}\n                </div>\n            </cdk-virtual-scroll-viewport>\n        } @else {\n            <div class=\"container-inner\">\n                @for (data of options.data; track data.value) {\n                    <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n                        {{ data.label }}\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div class=\"footer\" [class.error]=\"controlInvalid\">\n        {{ controlError }}\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-listbox.mjs","sources":["../../../../projects/apexara/ng-components/listbox/src/listbox.component.ts","../../../../projects/apexara/ng-components/listbox/src/listbox.component.html","../../../../projects/apexara/ng-components/listbox/apexara-ng-components-listbox.ts"],"sourcesContent":["import { Component, SimpleChanges, ViewChild, ElementRef, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { FormGroup, AbstractControl } from '@angular/forms';\n\nimport { Subscription, debounceTime, fromEvent, tap } from 'rxjs';\n\nimport { ApexSelectData } from '@apexara/ng-components/select';\nimport { ApexControlErrors } from '@apexara/ng-components/input';\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexListBoxOptions {\n  data: ApexSelectData[];\n  label?: string;\n  tooltip?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n}\n\n@Component({\n  standalone: true,\n  selector: 'apex-listbox',\n  templateUrl: './listbox.component.html',\n  styleUrls: ['./listbox.component.css'],\n  imports: [\n    ScrollingModule,\n    ApexTooltipDirective,\n  ]\n})\n\nexport class ApexListboxComponent {\n\n  constructor (\n    private elementRef: ElementRef,\n    private changeDetectorRef: ChangeDetectorRef) {\n  }\n\n  @ViewChild('listbox') listbox: ElementRef<HTMLDivElement> | null = null;\n  @ViewChild(CdkVirtualScrollViewport) cdkViewport?: CdkVirtualScrollViewport;\n\n  @Input() options!: ApexListBoxOptions;\n\n  @Input() virtualScroll: boolean = false;\n  @Input() itemSize: number = 28; // Must match CSS row height of an item\n\n  @Output() selectChange = new EventEmitter<ApexSelectData[]>();\n\n  public tooltipPosition = TooltipPosition;\n\n  public controlError!: string;\n  public controlInvalid = false;\n  public control: AbstractControl | null = null;  \n  public controlSubscription: Subscription | null = null;\n\n  private documentKeyupValue = '';\n  private documentKeyupValueResetTime = 1000;\n  private documentKeyDownSubscription!: Subscription;\n\n  private isMetaHold = false;\n  private isShiftHold = false;\n\n  private listHeight: number = 224; // Default matches CSS\n\n  private lastSelectedItemIndex = 0;\n  private lastSelectedItemIndexOnShiftHold = 0;\n\n  // Drag selection state\n  private dragSelecting = false;\n  private dragAnchorIndex = 0;\n\n  private selectedItems!: (ApexSelectData | null)[];\n\n  public ngOnInit(): void {\n    this.control = this.getControl();\n  \n    this.selectedItems = new Array(this.options.data.length).fill(null);\n\n    if (!this.virtualScroll) {\n      this.changeDetectorRef.detach();\n    }\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public ngAfterViewInit(): void {\n    this.documentKeyDownSubscription = fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')\n      .pipe(\n        tap(event => { this.keydown(event) }),\n        debounceTime(this.documentKeyupValueResetTime))\n      .subscribe(() => { this.documentKeyupValue = '' });\n  }\n\n  public ngOnDestroy(): void {\n    this.documentKeyDownSubscription.unsubscribe();\n\n    if (this.controlSubscription) {\n      this.controlSubscription?.unsubscribe();\n    }\n  }\n\n  public ngOnChanges(changes: SimpleChanges): void {\n    if (changes['options'] && changes['options'].currentValue['data'] && this.selectedItems) {\n      this.selectedItems.length = 0;\n\n      // Refresh virtual viewport if enabled\n      setTimeout(() => {\n        this.cdkViewport?.checkViewportSize();\n        this.changeDetectorRef.detectChanges();\n      });\n    }\n  }\n\n  public mousedown(index: number): void {\n    this.dragSelecting = true;\n    this.dragAnchorIndex = index;\n\n    if (this.isShiftHold) {\n      const max = Math.max(index, this.lastSelectedItemIndexOnShiftHold);\n      const min = Math.min(index, this.lastSelectedItemIndexOnShiftHold);\n\n      const indices = [] as number[];\n\n      for (let i = min; i <= max; i++) { indices.push(i); }\n\n      this.clearAllSelections();\n      this.addSelectedItems(indices);\n      return;\n    }\n\n    if (this.isMetaHold) {\n      if (this.isIndexSelected(index)) {\n        this.removeSelectedItems(index);\n      } else {\n        this.addSelectedItems(index);\n      }\n      return;\n    }\n\n    this.clearAllSelections();\n    this.addSelectedItems(index);\n  }\n\n  @HostListener('document:mouseup')\n  public mouseup(): void {\n    this.dragSelecting = false;\n  }\n\n  @HostListener('keyup', ['$event'])\n  public keyup(event: KeyboardEvent): void {\n    if (event.code.toLowerCase().includes('shift')) {\n      this.isShiftHold = false;\n\n      return;\n    }\n\n    if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n      this.isMetaHold = false;\n    }\n  }\n\n  public mouseover(index: number): void {\n    if (!this.dragSelecting || this.isMetaHold || this.isShiftHold) {\n      return;\n    }\n\n    const min = Math.min(this.dragAnchorIndex, index);\n    const max = Math.max(this.dragAnchorIndex, index);\n\n    const indices: number[] = [];\n    for (let i = min; i <= max; i++) { indices.push(i); }\n\n    this.clearAllSelections();\n    this.addSelectedItems(indices);\n  }\n\n  private keydown(event: KeyboardEvent): void {\n    if ((document.activeElement !== this.listbox?.nativeElement) && (document.activeElement !== this.listbox?.nativeElement.childNodes[0])) {\n      return;\n    }\n\n    if (event.code.toLowerCase().includes('shift')) {\n      this.isShiftHold = true;\n      this.lastSelectedItemIndexOnShiftHold = this.lastSelectedItemIndex;\n    }\n\n    if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n      this.isMetaHold = true;\n    }\n\n    if (event.code.toLowerCase().includes('arrowdown')) {\n      event.preventDefault();\n\n      this.documentArrowsKeyup(true);\n\n      return;\n    }\n\n    if (event.code.toLowerCase().includes('arrowup')) {\n      event.preventDefault();\n\n      this.documentArrowsKeyup(false);\n\n      return;\n    }\n\n    this.documentKeyup(event);\n  }\n\n  private documentArrowsKeyup(isDownArrow: boolean): void {\n    const dataLength = this.options.data.length;\n\n    let newIndex = isDownArrow ? this.lastSelectedItemIndex + 1 : this.lastSelectedItemIndex - 1;\n\n    if (this.isShiftHold) {\n      if (newIndex < 0 || newIndex === dataLength) {\n        return;\n      }\n\n      if (this.isIndexSelected(newIndex)) {\n        const indexForDeselect = isDownArrow ? newIndex - 1 : newIndex + 1;\n        this.removeSelectedItems(indexForDeselect);\n      } else {\n        this.addSelectedItems(newIndex);\n      }\n\n      this.lastSelectedItemIndex = newIndex;\n      this.scrollIndexIntoView(newIndex);\n\n      return;\n    }\n\n    this.clearAllSelections();\n\n    newIndex = newIndex < 0 ? 0 : newIndex;\n    newIndex = newIndex >= dataLength ? dataLength - 1 : newIndex;\n\n    this.addSelectedItems(newIndex);\n    this.scrollIndexIntoView(newIndex);\n  }\n\n  private documentKeyup(event: KeyboardEvent): void {\n    if (this.isMetaHold && event.key.toLowerCase() === 'a') {\n      event.preventDefault();\n\n      const itemsToAdd = [...this.options.data.keys()];\n      this.addSelectedItems(itemsToAdd);\n\n      return;\n    }\n\n    this.documentKeyupValue = this.documentKeyupValue + event.key.toLowerCase();\n\n    let newIndex: number | null = null;\n\n    for (let i = 0; i < this.options.data.length; i++) {\n      const subLabel = this.options.data[i].label.substring(0, this.documentKeyupValue.length).toLowerCase();\n\n      if (subLabel === this.documentKeyupValue) {\n        newIndex = i;\n\n        break;\n      }\n    }\n\n    if (newIndex !== null) {\n      this.clearAllSelections();\n      this.addSelectedItems(newIndex);\n      this.scrollIndexIntoView(newIndex);\n    }\n  }\n\n  private addSelectedItems(index: number | number[]) {\n    const isIndexNumber = typeof index === 'number';\n\n    this.lastSelectedItemIndex = isIndexNumber ? index : index.slice(-1)[0];\n\n    if (isIndexNumber) {\n      this.selectedItems[index] = this.options.data[index];\n    } else {\n      for (let i of index) {\n        this.selectedItems[i] = this.options.data[i];\n      }\n    }\n\n    if (this.control) {\n      this.control.setValue(this.selectedItems.filter(value => value !== null));\n    }\n\n    this.selectChange.emit(this.selectedItems.filter(Boolean) as ApexSelectData[]);\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private removeSelectedItems(index: number | number[]) {\n    const isIndexNumber = typeof index === 'number';\n\n    if (isIndexNumber) {\n      this.selectedItems[index] = null;\n    } else {\n      for (let i of index) {\n        this.selectedItems[i] = null;\n      }\n    }\n\n    if (this.control) {\n      this.control?.setValue(this.selectedItems.filter(value => value !== null));\n    }\n\n    this.selectChange.emit(this.selectedItems.filter(Boolean) as ApexSelectData[]);\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private clearAllSelections(): void {\n    this.selectedItems = new Array(this.options.data.length).fill(null);\n\n    if (this.control) {\n      this.control.setValue([]);\n    }\n\n    this.selectChange.emit([]);\n  }\n\n  public isIndexSelected(index: number): boolean {\n    return !!this.selectedItems[index];\n  }\n\n  public trackByIndex(index: number): number { return index; }\n\n  private scrollIndexIntoView(index: number): void {\n    if (this.virtualScroll && this.cdkViewport) {\n      this.cdkViewport.scrollToIndex(index, 'smooth');\n      return;\n    }\n\n    const container = this.listbox?.nativeElement;\n\n    if (!container) {\n      return;\n    }\n\n    const target = container.querySelector(`.item[value=\"${index}\"]`);\n    target?.scrollIntoView({ block: 'nearest' });\n  }\n\n  public shouldShowViewportScroll(): boolean {\n    if (!this.virtualScroll) {\n      return false;\n    }\n\n    const renderedCount = this.options?.data ? this.options.data.length : 0;\n\n    const rowsHeight = this.itemSize * renderedCount;\n\n    return rowsHeight > this.listHeight;\n  }\n\n  private getControl(): AbstractControl | null {\n    if (this.options.formGroup && this.options.formControlName) {\n      this.controlSubscription = this.options.formGroup.controls[this.options.formControlName].valueChanges.subscribe(() => {\n        if (!this.control) {\n          return;\n        }\n  \n        this.checkIfControlInvalid(this.control);\n\n        this.getControlError(this.control);\n      });\n\n      return this.options.formGroup.get(this.options.formControlName);\n    }\n  \n    return null;\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.invalid;\n  }\n\n  private getControlError(control: AbstractControl): void {\n    this.controlError = '';\n\n    const options = this.options!;\n\n    if (options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (control.hasError(error)) {\n          this.controlError = options.errors[error];\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    <div class=\"listbox-header\">\n        @if (options.label) {\n            <label>{{ options.label }}</label>\n        }\n\n        @if (options.tooltip) {\n            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g>\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        }\n    </div>\n\n    <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n        @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n                <div class=\"item\"\n                     *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n                     [attr.value]=\"i\"\n                     [style.height.px]=\"itemSize\"\n                     [style.line-height.px]=\"itemSize\"\n                     [class.selected]=\"isIndexSelected(i)\"\n                     (mousedown)=\"mousedown(i)\"\n                     (mouseover)=\"mouseover(i)\">\n                    {{ data.label }}\n                </div>\n            </cdk-virtual-scroll-viewport>\n        } @else {\n            <div class=\"container-inner\">\n                @for (data of options.data; track data.value) {\n                    <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n                        {{ data.label }}\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <div class=\"footer\" [class.error]=\"controlInvalid\">\n        {{ controlError }}\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/apexara-ng-components-more-options.mjs

@@ -0,0 +1,132 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, afterNextRender, HostListener, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { ApexImageComponent } from '@apexara/ng-components/image';
+
+class ApexMoreOptionsComponent {
+    constructor(elementRef, injector) {
+        this.elementRef = elementRef;
+        this.injector = injector;
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : []));
+        this.itemClick = output();
+        this.dropdownRef = viewChild('dropdown', ...(ngDevMode ? [{ debugName: "dropdownRef" }] : []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.scrollBlockersAttached = false;
+        this.wheelListener = (event) => this.blockScroll(event);
+    }
+    ngOnDestroy() {
+        this.detachScrollBlockers();
+    }
+    toggle(event) {
+        this.isOpen.update(v => !v);
+        if (this.isOpen()) {
+            afterNextRender(() => {
+                this.positionDropdown();
+                this.attachScrollBlockers();
+            }, { injector: this.injector });
+        }
+        else {
+            this.detachScrollBlockers();
+        }
+    }
+    onItemClick(item, event) {
+        if (item.disabled) {
+            return;
+        }
+        if (item.execute) {
+            item.execute();
+        }
+        this.itemClick.emit(item);
+        this.isOpen.set(false);
+        this.detachScrollBlockers();
+    }
+    onDocumentClick(event) {
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        const dropdownEl = this.dropdownRef()?.nativeElement;
+        const clickedDropdown = dropdownEl?.contains(event.target);
+        if (!clickedInside && !clickedDropdown && this.isOpen()) {
+            this.isOpen.set(false);
+            this.detachScrollBlockers();
+        }
+    }
+    positionDropdown() {
+        const dropdown = this.dropdownRef();
+        if (!dropdown) {
+            return;
+        }
+        const trigger = this.elementRef.nativeElement.querySelector('.trigger');
+        const rect = trigger.getBoundingClientRect();
+        const dropdownEl = dropdown.nativeElement;
+        // Position below trigger initially
+        dropdownEl.style.top = `${rect.bottom + 4}px`;
+        dropdownEl.style.bottom = 'unset';
+        // Check if dropdown overflows viewport bottom — if so, open upward
+        if (dropdownEl.getBoundingClientRect().bottom > window.innerHeight) {
+            dropdownEl.style.top = 'unset';
+            dropdownEl.style.bottom = `${window.innerHeight - rect.top + 4}px`;
+        }
+        // Horizontal positioning
+        const dropdownWidth = dropdownEl.offsetWidth;
+        const left = rect.left + rect.width / 2;
+        if (left + dropdownWidth / 2 > window.innerWidth - 10) {
+            dropdownEl.style.left = `${window.innerWidth - 10 - dropdownWidth}px`;
+            dropdownEl.style.transform = '';
+        }
+        else {
+            dropdownEl.style.left = `${left}px`;
+            dropdownEl.style.transform = 'translateX(-50%)';
+        }
+    }
+    blockScroll(event) {
+        const dropdown = this.dropdownRef();
+        if (!dropdown) {
+            return;
+        }
+        const dropdownEl = dropdown.nativeElement;
+        const isInsideDropdown = dropdownEl.contains(event.target);
+        if (isInsideDropdown) {
+            const canScroll = dropdownEl.scrollHeight > dropdownEl.clientHeight;
+            if (!canScroll) {
+                event.preventDefault();
+            }
+            return;
+        }
+        event.preventDefault();
+    }
+    attachScrollBlockers() {
+        if (this.scrollBlockersAttached) {
+            return;
+        }
+        window.addEventListener('wheel', this.wheelListener, { passive: false });
+        window.addEventListener('touchmove', this.wheelListener, { passive: false });
+        this.scrollBlockersAttached = true;
+    }
+    detachScrollBlockers() {
+        if (!this.scrollBlockersAttached) {
+            return;
+        }
+        window.removeEventListener('wheel', this.wheelListener);
+        window.removeEventListener('touchmove', this.wheelListener);
+        this.scrollBlockersAttached = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexMoreOptionsComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexMoreOptionsComponent, isStandalone: true, selector: "apex-more-options", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"trigger\" [ngClass]=\"{ opened: isOpen(), vertical: vertical() }\" (click)=\"toggle($event)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.75 8C4.75 8.14834 4.70601 8.29334 4.6236 8.41668C4.54119 8.54001 4.42406 8.63614 4.28701 8.69291C4.14997 8.74967 3.99917 8.76453 3.85368 8.73559C3.7082 8.70665 3.57456 8.63522 3.46967 8.53033C3.36478 8.42544 3.29335 8.2918 3.26441 8.14632C3.23547 8.00083 3.25032 7.85003 3.30709 7.71299C3.36386 7.57594 3.45999 7.45881 3.58332 7.3764C3.70666 7.29399 3.85166 7.25 4 7.25C4.19884 7.25023 4.38948 7.32932 4.53008 7.46992C4.67068 7.61052 4.74977 7.80116 4.75 8ZM12 7.25C11.8517 7.25 11.7067 7.29399 11.5833 7.3764C11.46 7.45881 11.3639 7.57594 11.3071 7.71299C11.2503 7.85003 11.2355 8.00083 11.2644 8.14632C11.2933 8.2918 11.3648 8.42544 11.4697 8.53033C11.5746 8.63522 11.7082 8.70665 11.8537 8.73559C11.9992 8.76453 12.15 8.74967 12.287 8.69291C12.4241 8.63614 12.5412 8.54001 12.6236 8.41668C12.706 8.29334 12.75 8.14834 12.75 8C12.7498 7.80116 12.6707 7.61052 12.5301 7.46992C12.3895 7.32932 12.1988 7.25023 12 7.25ZM8 7.25C7.85166 7.25 7.70666 7.29399 7.58332 7.3764C7.45999 7.45881 7.36386 7.57594 7.30709 7.71299C7.25033 7.85003 7.23547 8.00083 7.26441 8.14632C7.29335 8.2918 7.36478 8.42544 7.46967 8.53033C7.57456 8.63522 7.7082 8.70665 7.85368 8.73559C7.99917 8.76453 8.14997 8.74967 8.28701 8.69291C8.42406 8.63614 8.54119 8.54001 8.6236 8.41668C8.70601 8.29334 8.75 8.14834 8.75 8C8.74977 7.80116 8.67068 7.61052 8.53008 7.46992C8.38948 7.32932 8.19884 7.25023 8 7.25Z\"/>\n    </svg>\n</div>\n\n@if (isOpen()) {\n    <div class=\"dropdown\" #dropdown>\n        @if (items().length > 0) {\n            @for (item of items(); track $index) {\n                <div class=\"dropdown-item\"\n                     [ngClass]=\"{ disabled: item.disabled }\"\n                     (click)=\"onItemClick(item, $event)\">\n                    @if (item.icon) {\n                        <div class=\"item-icon\">\n                            <apex-img [src]=\"'assets/img/' + item.icon\" [alt]=\"'Action icon.'\"></apex-img>\n                        </div>\n                    }\n                    <span>{{ item.label }}</span>\n                </div>\n            }\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n", styles: [":host{display:inline-block}.trigger{width:var(--apex-more-options-trigger-size, 32px);height:var(--apex-more-options-trigger-size, 32px);display:flex;justify-content:center;align-items:center;background:var(--apex-more-options-trigger-background, transparent);border:1px solid var(--apex-more-options-trigger-border-color, #E9E9E9);border-radius:var(--apex-more-options-trigger-border-radius, 8px);box-sizing:border-box;cursor:pointer}.trigger:hover,.trigger.opened{background:var(--apex-more-options-trigger-hover-background, #F7F8FB)}.trigger.vertical svg{transform:rotate(90deg)}.trigger svg path{fill:var(--apex-more-options-icon-fill, #000000)}.dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-more-options-dropdown-background, #FFFFFF);border-radius:var(--apex-more-options-dropdown-border-radius, 8px);box-shadow:var(--apex-more-options-dropdown-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35));overflow:hidden;z-index:10}.dropdown-item{height:var(--apex-more-options-item-height, 44px);display:flex;align-items:center;justify-content:flex-start;color:var(--apex-more-options-item-color, #0B1222);font-size:14px;font-weight:500;cursor:pointer;padding:0 12px}.dropdown-item:hover{background-color:var(--apex-more-options-item-hover-background, #F3F3F3)}.dropdown-item.disabled{opacity:.5;pointer-events:none}.dropdown-item span{white-space:nowrap;margin:0 12px}.item-icon{width:20px;height:20px;min-width:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img path{fill:var(--apex-more-options-item-icon-fill, #5D6068);stroke:var(--apex-more-options-item-icon-stroke, #ffffff00)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexMoreOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apex-more-options', imports: [
+                        NgClass,
+                        ApexImageComponent
+                    ], template: "<div class=\"trigger\" [ngClass]=\"{ opened: isOpen(), vertical: vertical() }\" (click)=\"toggle($event)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.75 8C4.75 8.14834 4.70601 8.29334 4.6236 8.41668C4.54119 8.54001 4.42406 8.63614 4.28701 8.69291C4.14997 8.74967 3.99917 8.76453 3.85368 8.73559C3.7082 8.70665 3.57456 8.63522 3.46967 8.53033C3.36478 8.42544 3.29335 8.2918 3.26441 8.14632C3.23547 8.00083 3.25032 7.85003 3.30709 7.71299C3.36386 7.57594 3.45999 7.45881 3.58332 7.3764C3.70666 7.29399 3.85166 7.25 4 7.25C4.19884 7.25023 4.38948 7.32932 4.53008 7.46992C4.67068 7.61052 4.74977 7.80116 4.75 8ZM12 7.25C11.8517 7.25 11.7067 7.29399 11.5833 7.3764C11.46 7.45881 11.3639 7.57594 11.3071 7.71299C11.2503 7.85003 11.2355 8.00083 11.2644 8.14632C11.2933 8.2918 11.3648 8.42544 11.4697 8.53033C11.5746 8.63522 11.7082 8.70665 11.8537 8.73559C11.9992 8.76453 12.15 8.74967 12.287 8.69291C12.4241 8.63614 12.5412 8.54001 12.6236 8.41668C12.706 8.29334 12.75 8.14834 12.75 8C12.7498 7.80116 12.6707 7.61052 12.5301 7.46992C12.3895 7.32932 12.1988 7.25023 12 7.25ZM8 7.25C7.85166 7.25 7.70666 7.29399 7.58332 7.3764C7.45999 7.45881 7.36386 7.57594 7.30709 7.71299C7.25033 7.85003 7.23547 8.00083 7.26441 8.14632C7.29335 8.2918 7.36478 8.42544 7.46967 8.53033C7.57456 8.63522 7.7082 8.70665 7.85368 8.73559C7.99917 8.76453 8.14997 8.74967 8.28701 8.69291C8.42406 8.63614 8.54119 8.54001 8.6236 8.41668C8.70601 8.29334 8.75 8.14834 8.75 8C8.74977 7.80116 8.67068 7.61052 8.53008 7.46992C8.38948 7.32932 8.19884 7.25023 8 7.25Z\"/>\n    </svg>\n</div>\n\n@if (isOpen()) {\n    <div class=\"dropdown\" #dropdown>\n        @if (items().length > 0) {\n            @for (item of items(); track $index) {\n                <div class=\"dropdown-item\"\n                     [ngClass]=\"{ disabled: item.disabled }\"\n                     (click)=\"onItemClick(item, $event)\">\n                    @if (item.icon) {\n                        <div class=\"item-icon\">\n                            <apex-img [src]=\"'assets/img/' + item.icon\" [alt]=\"'Action icon.'\"></apex-img>\n                        </div>\n                    }\n                    <span>{{ item.label }}</span>\n                </div>\n            }\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n", styles: [":host{display:inline-block}.trigger{width:var(--apex-more-options-trigger-size, 32px);height:var(--apex-more-options-trigger-size, 32px);display:flex;justify-content:center;align-items:center;background:var(--apex-more-options-trigger-background, transparent);border:1px solid var(--apex-more-options-trigger-border-color, #E9E9E9);border-radius:var(--apex-more-options-trigger-border-radius, 8px);box-sizing:border-box;cursor:pointer}.trigger:hover,.trigger.opened{background:var(--apex-more-options-trigger-hover-background, #F7F8FB)}.trigger.vertical svg{transform:rotate(90deg)}.trigger svg path{fill:var(--apex-more-options-icon-fill, #000000)}.dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-more-options-dropdown-background, #FFFFFF);border-radius:var(--apex-more-options-dropdown-border-radius, 8px);box-shadow:var(--apex-more-options-dropdown-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35));overflow:hidden;z-index:10}.dropdown-item{height:var(--apex-more-options-item-height, 44px);display:flex;align-items:center;justify-content:flex-start;color:var(--apex-more-options-item-color, #0B1222);font-size:14px;font-weight:500;cursor:pointer;padding:0 12px}.dropdown-item:hover{background-color:var(--apex-more-options-item-hover-background, #F3F3F3)}.dropdown-item.disabled{opacity:.5;pointer-events:none}.dropdown-item span{white-space:nowrap;margin:0 12px}.item-icon{width:20px;height:20px;min-width:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img path{fill:var(--apex-more-options-item-icon-fill, #5D6068);stroke:var(--apex-more-options-item-icon-stroke, #ffffff00)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApexMoreOptionsComponent };
+//# sourceMappingURL=apexara-ng-components-more-options.mjs.map

package/fesm2022/apexara-ng-components-more-options.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"apexara-ng-components-more-options.mjs","sources":["../../../../projects/apexara/ng-components/more-options/src/more-options.component.ts","../../../../projects/apexara/ng-components/more-options/src/more-options.component.html","../../../../projects/apexara/ng-components/more-options/apexara-ng-components-more-options.ts"],"sourcesContent":["import {\n  Component, ElementRef, HostListener,\n  input, output, signal, viewChild, Injector, afterNextRender\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexMoreOptionsItem {\n  icon?: string;\n  label: string;\n  execute?: () => void;\n  disabled?: boolean;\n}\n\n@Component({\n  selector: 'apex-more-options',\n  templateUrl: './more-options.component.html',\n  styleUrls: ['./more-options.component.css'],\n  imports: [\n    NgClass,\n    ApexImageComponent\n  ],\n})\n\nexport class ApexMoreOptionsComponent {\n\n  constructor(\n    private elementRef: ElementRef,\n    private injector: Injector) { }\n\n  public items = input<ApexMoreOptionsItem[]>([]);\n  public vertical = input(false);\n\n  public itemClick = output<ApexMoreOptionsItem>();\n\n  public dropdownRef = viewChild<ElementRef>('dropdown');\n\n  public isOpen = signal(false);\n\n  private scrollBlockersAttached = false;\n  private wheelListener = (event: WheelEvent | TouchEvent) => this.blockScroll(event);\n\n\n  public ngOnDestroy(): void {\n    this.detachScrollBlockers();\n  }\n\n  public toggle(event: MouseEvent): void {\n    this.isOpen.update(v => !v);\n\n    if (this.isOpen()) {\n      afterNextRender(() => {\n        this.positionDropdown();\n        this.attachScrollBlockers();\n      }, { injector: this.injector });\n    } else {\n      this.detachScrollBlockers();\n    }\n  }\n\n  public onItemClick(item: ApexMoreOptionsItem, event: MouseEvent): void {\n    if (item.disabled) {\n      return;\n    }\n\n    if (item.execute) {\n      item.execute();\n    }\n\n    this.itemClick.emit(item);\n    this.isOpen.set(false);\n    this.detachScrollBlockers();\n  }\n\n  @HostListener('document:click', ['$event'])\n  public onDocumentClick(event: Event): void {\n    const clickedInside = this.elementRef.nativeElement.contains(event.target);\n    const dropdownEl = this.dropdownRef()?.nativeElement;\n    const clickedDropdown = dropdownEl?.contains(event.target);\n\n    if (!clickedInside && !clickedDropdown && this.isOpen()) {\n      this.isOpen.set(false);\n      this.detachScrollBlockers();\n    }\n  }\n\n  private positionDropdown(): void {\n    const dropdown = this.dropdownRef();\n\n    if (!dropdown) {\n      return;\n    }\n\n    const trigger = this.elementRef.nativeElement.querySelector('.trigger');\n    const rect = trigger.getBoundingClientRect();\n    const dropdownEl = dropdown.nativeElement;\n\n    // Position below trigger initially\n    dropdownEl.style.top = `${rect.bottom + 4}px`;\n    dropdownEl.style.bottom = 'unset';\n\n    // Check if dropdown overflows viewport bottom — if so, open upward\n    if (dropdownEl.getBoundingClientRect().bottom > window.innerHeight) {\n      dropdownEl.style.top = 'unset';\n      dropdownEl.style.bottom = `${window.innerHeight - rect.top + 4}px`;\n    }\n\n    // Horizontal positioning\n    const dropdownWidth = dropdownEl.offsetWidth;\n    const left = rect.left + rect.width / 2;\n\n    if (left + dropdownWidth / 2 > window.innerWidth - 10) {\n      dropdownEl.style.left = `${window.innerWidth - 10 - dropdownWidth}px`;\n      dropdownEl.style.transform = '';\n    } else {\n      dropdownEl.style.left = `${left}px`;\n      dropdownEl.style.transform = 'translateX(-50%)';\n    }\n  }\n\n  private blockScroll(event: WheelEvent | TouchEvent): void {\n    const dropdown = this.dropdownRef();\n    if (!dropdown) {\n      return;\n    }\n\n    const dropdownEl = dropdown.nativeElement;\n    const isInsideDropdown = dropdownEl.contains(event.target as HTMLElement);\n\n    if (isInsideDropdown) {\n      const canScroll = dropdownEl.scrollHeight > dropdownEl.clientHeight;\n      if (!canScroll) {\n        event.preventDefault();\n      }\n      return;\n    }\n\n    event.preventDefault();\n  }\n\n  private attachScrollBlockers(): void {\n    if (this.scrollBlockersAttached) {\n      return;\n    }\n\n    window.addEventListener('wheel', this.wheelListener, { passive: false });\n    window.addEventListener('touchmove', this.wheelListener, { passive: false });\n\n    this.scrollBlockersAttached = true;\n  }\n\n  private detachScrollBlockers(): void {\n    if (!this.scrollBlockersAttached) {\n      return;\n    }\n\n    window.removeEventListener('wheel', this.wheelListener as EventListener);\n    window.removeEventListener('touchmove', this.wheelListener as EventListener);\n\n    this.scrollBlockersAttached = false;\n  }\n\n}\n","<div class=\"trigger\" [ngClass]=\"{ opened: isOpen(), vertical: vertical() }\" (click)=\"toggle($event)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.75 8C4.75 8.14834 4.70601 8.29334 4.6236 8.41668C4.54119 8.54001 4.42406 8.63614 4.28701 8.69291C4.14997 8.74967 3.99917 8.76453 3.85368 8.73559C3.7082 8.70665 3.57456 8.63522 3.46967 8.53033C3.36478 8.42544 3.29335 8.2918 3.26441 8.14632C3.23547 8.00083 3.25032 7.85003 3.30709 7.71299C3.36386 7.57594 3.45999 7.45881 3.58332 7.3764C3.70666 7.29399 3.85166 7.25 4 7.25C4.19884 7.25023 4.38948 7.32932 4.53008 7.46992C4.67068 7.61052 4.74977 7.80116 4.75 8ZM12 7.25C11.8517 7.25 11.7067 7.29399 11.5833 7.3764C11.46 7.45881 11.3639 7.57594 11.3071 7.71299C11.2503 7.85003 11.2355 8.00083 11.2644 8.14632C11.2933 8.2918 11.3648 8.42544 11.4697 8.53033C11.5746 8.63522 11.7082 8.70665 11.8537 8.73559C11.9992 8.76453 12.15 8.74967 12.287 8.69291C12.4241 8.63614 12.5412 8.54001 12.6236 8.41668C12.706 8.29334 12.75 8.14834 12.75 8C12.7498 7.80116 12.6707 7.61052 12.5301 7.46992C12.3895 7.32932 12.1988 7.25023 12 7.25ZM8 7.25C7.85166 7.25 7.70666 7.29399 7.58332 7.3764C7.45999 7.45881 7.36386 7.57594 7.30709 7.71299C7.25033 7.85003 7.23547 8.00083 7.26441 8.14632C7.29335 8.2918 7.36478 8.42544 7.46967 8.53033C7.57456 8.63522 7.7082 8.70665 7.85368 8.73559C7.99917 8.76453 8.14997 8.74967 8.28701 8.69291C8.42406 8.63614 8.54119 8.54001 8.6236 8.41668C8.70601 8.29334 8.75 8.14834 8.75 8C8.74977 7.80116 8.67068 7.61052 8.53008 7.46992C8.38948 7.32932 8.19884 7.25023 8 7.25Z\"/>\n    </svg>\n</div>\n\n@if (isOpen()) {\n    <div class=\"dropdown\" #dropdown>\n        @if (items().length > 0) {\n            @for (item of items(); track $index) {\n                <div class=\"dropdown-item\"\n                     [ngClass]=\"{ disabled: item.disabled }\"\n                     (click)=\"onItemClick(item, $event)\">\n                    @if (item.icon) {\n                        <div class=\"item-icon\">\n                            <apex-img [src]=\"'assets/img/' + item.icon\" [alt]=\"'Action icon.'\"></apex-img>\n                        </div>\n                    }\n                    <span>{{ item.label }}</span>\n                </div>\n            }\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/apexara-ng-components-radiobutton.mjs

@@ -16,7 +16,7 @@ class ApexRadioButtonComponent {
         this.selectChange.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexRadioButtonComponent, isStandalone: true, selector: "apex-radio-button", inputs: { options: "options" }, outputs: { selectChange: "selectChange" }, ngImport: i0, template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item) {\n                <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n                    <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n        \n                    <span>{{ item.label }}</span>\n                </label>\n            }\n        </div>\n    } @else {\n        <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item; let i = $index) {\n                <label class=\"radio-button\">\n                    <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n                    <span>{{ item.label }}</span>\n\n                    @if (item.tooltip) {\n                        <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <g>\n                                <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                            </g>\n                        </svg>\n                    }\n                </label>\n            }\n        </div>\n    }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--apex-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--apex-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--apex-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--apex-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--apex-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--apex-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-radio-button-tooltip-icon-fill, transparent);stroke:var(--apex-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexRadioButtonComponent, isStandalone: true, selector: "apex-radio-button", inputs: { options: "options" }, outputs: { selectChange: "selectChange" }, ngImport: i0, template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item) {\n                <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n                    <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n        \n                    <span>{{ item.label }}</span>\n                </label>\n            }\n        </div>\n    } @else {\n        <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item; let i = $index) {\n                <label class=\"radio-button\">\n                    <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n                    <span>{{ item.label }}</span>\n\n                    @if (item.tooltip) {\n                        <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <g>\n                                <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                            </g>\n                        </svg>\n                    }\n                </label>\n            }\n        </div>\n    }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--apex-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--apex-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--apex-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--apex-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--apex-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--apex-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-radio-button-tooltip-icon-fill, transparent);stroke:var(--apex-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexRadioButtonComponent, decorators: [{
             type: Component,
@@ -25,7 +25,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         ApexTooltipDirective,
-                    ], template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item) {\n                <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n                    <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n        \n                    <span>{{ item.label }}</span>\n                </label>\n            }\n        </div>\n    } @else {\n        <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item; let i = $index) {\n                <label class=\"radio-button\">\n                    <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n                    <span>{{ item.label }}</span>\n\n                    @if (item.tooltip) {\n                        <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <g>\n                                <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                            </g>\n                        </svg>\n                    }\n                </label>\n            }\n        </div>\n    }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--apex-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--apex-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--apex-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--apex-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--apex-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--apex-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-radio-button-tooltip-icon-fill, transparent);stroke:var(--apex-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"] }]
+                    ], template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item) {\n                <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n                    <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n        \n                    <span>{{ item.label }}</span>\n                </label>\n            }\n        </div>\n    } @else {\n        <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item; let i = $index) {\n                <label class=\"radio-button\">\n                    <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n                    <span>{{ item.label }}</span>\n\n                    @if (item.tooltip) {\n                        <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <g>\n                                <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                            </g>\n                        </svg>\n                    }\n                </label>\n            }\n        </div>\n    }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--apex-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--apex-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--apex-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--apex-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--apex-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--apex-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-radio-button-tooltip-icon-fill, transparent);stroke:var(--apex-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], selectChange: [{

package/fesm2022/apexara-ng-components-radiobutton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-radiobutton.mjs","sources":["../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.ts","../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.html","../../../../projects/apexara/ng-components/radiobutton/apexara-ng-components-radiobutton.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexRadioData {\n  label: string;\n  value: any;\n  tooltip?: string;\n  isHover?: boolean;\n}\n\nexport interface ApexRadioButtonOptions {\n  checked?: number;\n  inline?: boolean;\n  data: ApexRadioData[];\n  formGroup?: FormGroup;\n  formControlName?: string;\n}\n\n@Component({\n  selector: 'apex-radio-button',\n  templateUrl: './radio-button.component.html',\n  styleUrls: ['./radio-button.component.css'],\n  imports: [\n    NgClass,\n    FormsModule,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n  ]\n})\n\nexport class ApexRadioButtonComponent {\n\n  @Input() options!: ApexRadioButtonOptions;\n\n  @Output() selectChange = new EventEmitter<ApexRadioData>();\n\n  // random ID for name of the radiobutton so no collision happen with other radio components\n  public buttonGroupId = Math.random();\n\n  public tooltipPositionAbove = TooltipPosition.Above;\n\n  public onChange(item: ApexRadioData): void {\n    this.selectChange.emit(item);\n  }\n\n}\n","@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item) {\n                <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n                    <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n        \n                    <span>{{ item.label }}</span>\n                </label>\n            }\n        </div>\n    } @else {\n        <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item; let i = $index) {\n                <label class=\"radio-button\">\n                    <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n                    <span>{{ item.label }}</span>\n\n                    @if (item.tooltip) {\n                        <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <g>\n                                <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                            </g>\n                        </svg>\n                    }\n                </label>\n            }\n        </div>\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAiCa,wBAAwB,CAAA;AAZrC,IAAA,WAAA,GAAA;AAgBY,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAiB;;AAGnD,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE;AAE7B,QAAA,IAAA,CAAA,oBAAoB,GAAG,eAAe,CAAC,KAAK;AAMpD,IAAA;AAJQ,IAAA,QAAQ,CAAC,IAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;IAC9B;8GAbW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCrC,gvDAgCA,EAAA,MAAA,EAAA,CAAA,glCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNI,OAAO,mFACP,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,8FAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,iBAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIX,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAZpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EAGpB;wBACP,OAAO;wBACP,WAAW;wBACX,mBAAmB;wBACnB,oBAAoB;AACrB,qBAAA,EAAA,QAAA,EAAA,gvDAAA,EAAA,MAAA,EAAA,CAAA,glCAAA,CAAA,EAAA;;sBAKA;;sBAEA;;;AErCH;;AAEG;;;;"}
+{"version":3,"file":"apexara-ng-components-radiobutton.mjs","sources":["../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.ts","../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.html","../../../../projects/apexara/ng-components/radiobutton/apexara-ng-components-radiobutton.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexRadioData {\n  label: string;\n  value: any;\n  tooltip?: string;\n  isHover?: boolean;\n}\n\nexport interface ApexRadioButtonOptions {\n  checked?: number;\n  inline?: boolean;\n  data: ApexRadioData[];\n  formGroup?: FormGroup;\n  formControlName?: string;\n}\n\n@Component({\n  selector: 'apex-radio-button',\n  templateUrl: './radio-button.component.html',\n  styleUrls: ['./radio-button.component.css'],\n  imports: [\n    NgClass,\n    FormsModule,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n  ]\n})\n\nexport class ApexRadioButtonComponent {\n\n  @Input() options!: ApexRadioButtonOptions;\n\n  @Output() selectChange = new EventEmitter<ApexRadioData>();\n\n  // random ID for name of the radiobutton so no collision happen with other radio components\n  public buttonGroupId = Math.random();\n\n  public tooltipPositionAbove = TooltipPosition.Above;\n\n  public onChange(item: ApexRadioData): void {\n    this.selectChange.emit(item);\n  }\n\n}\n","@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item) {\n                <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n                    <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n        \n                    <span>{{ item.label }}</span>\n                </label>\n            }\n        </div>\n    } @else {\n        <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n            @for (item of options.data; track item; let i = $index) {\n                <label class=\"radio-button\">\n                    <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n                    <span>{{ item.label }}</span>\n\n                    @if (item.tooltip) {\n                        <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <g>\n                                <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                            </g>\n                        </svg>\n                    }\n                </label>\n            }\n        </div>\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAiCa,wBAAwB,CAAA;AAZrC,IAAA,WAAA,GAAA;AAgBY,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAiB;;AAGnD,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE;AAE7B,QAAA,IAAA,CAAA,oBAAoB,GAAG,eAAe,CAAC,KAAK;AAMpD,IAAA;AAJQ,IAAA,QAAQ,CAAC,IAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;IAC9B;8GAbW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCrC,swDAgCA,EAAA,MAAA,EAAA,CAAA,glCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNI,OAAO,mFACP,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,8FAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,iBAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIX,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAZpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EAGpB;wBACP,OAAO;wBACP,WAAW;wBACX,mBAAmB;wBACnB,oBAAoB;AACrB,qBAAA,EAAA,QAAA,EAAA,swDAAA,EAAA,MAAA,EAAA,CAAA,glCAAA,CAAA,EAAA;;sBAKA;;sBAEA;;;AErCH;;AAEG;;;;"}

package/fesm2022/apexara-ng-components-select.mjs

@@ -574,7 +574,7 @@ class ApexSelectComponent {
         this.scrollBlockersAttached = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, deps: [{ token: i1.OSService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexSelectComponent, isStandalone: true, selector: "apex-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData;\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </apex-checkbox>\n                            } @else {\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData.length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexSelectComponent, isStandalone: true, selector: "apex-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData;\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </apex-checkbox>\n                            } @else {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData.length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.option-icon{width:var(--apex-select-option-icon-size, 16px);height:var(--apex-select-option-icon-size, 16px);min-width:var(--apex-select-option-icon-size, 16px);display:flex;justify-content:center;align-items:center;margin-right:var(--apex-select-option-icon-spacing, 10px)}.option-icon apex-img{max-width:var(--apex-select-option-icon-size, 20px);max-height:var(--apex-select-option-icon-size, 20px);display:flex;justify-content:center;align-items:center}.option-icon apex-img path{fill:var(--apex-select-option-icon-fill, #5D6068);stroke:var(--apex-select-option-icon-stroke, #ffffff00)}.dropdown .option.selected .option-icon apex-img path{fill:var(--apex-select-option-icon-selected-fill, #F96138);stroke:var(--apex-select-option-icon-selected-stroke, #ffffff00)}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon", "options"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, decorators: [{
             type: Component,
@@ -588,7 +588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ApexTooltipDirective,
                         ReactiveFormsModule,
                         ApexCheckboxComponent,
-                    ], template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData;\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </apex-checkbox>\n                            } @else {\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData.length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData;\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </apex-checkbox>\n                            } @else {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData.length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.option-icon{width:var(--apex-select-option-icon-size, 16px);height:var(--apex-select-option-icon-size, 16px);min-width:var(--apex-select-option-icon-size, 16px);display:flex;justify-content:center;align-items:center;margin-right:var(--apex-select-option-icon-spacing, 10px)}.option-icon apex-img{max-width:var(--apex-select-option-icon-size, 20px);max-height:var(--apex-select-option-icon-size, 20px);display:flex;justify-content:center;align-items:center}.option-icon apex-img path{fill:var(--apex-select-option-icon-fill, #5D6068);stroke:var(--apex-select-option-icon-stroke, #ffffff00)}.dropdown .option.selected .option-icon apex-img path{fill:var(--apex-select-option-icon-selected-fill, #F96138);stroke:var(--apex-select-option-icon-selected-stroke, #ffffff00)}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i1.OSService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']