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

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

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-input.mjs","sources":["../../../../projects/apexara/ng-components/input/src/input.component.ts","../../../../projects/apexara/ng-components/input/src/input.component.html","../../../../projects/apexara/ng-components/input/apexara-ng-components-input.ts"],"sourcesContent":["import { Component, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n}\n\nexport interface ApexControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    ApexImageComponent,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n    ApexTooltipDirective\n  ]\n})\n\nexport class ApexInputComponent {\n\n  constructor(private changeDetectorRef: ChangeDetectorRef) { \n    this.changeDetectorRef.detach();\n  }\n\n  @Input() options!: ApexInputOptions;\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label!: string;\n  public controlInvalid = false;\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n  \n    const sanitizedValue = input.value.replace(/([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|[\\uD83C-\\uDBFF\\uDC00-\\uDFFF])/g, '');\n  \n    input.value = sanitizedValue;\n  \n    this.inputChange.emit(sanitizedValue);\n  \n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  @HostListener('focusout')\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n  \n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.touched && control.invalid;\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n  \n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label = '';\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label = options.errors[error];\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\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    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\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-input.mjs","sources":["../../../../projects/apexara/ng-components/input/src/input.component.ts","../../../../projects/apexara/ng-components/input/src/input.component.html","../../../../projects/apexara/ng-components/input/apexara-ng-components-input.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, signal } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';\n\nimport { Subscription, filter } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n}\n\nexport interface ApexControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    ApexImageComponent,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n    ApexTooltipDirective\n  ]\n})\n\nexport class ApexInputComponent {\n\n  @Input() options!: ApexInputOptions;\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label = signal('');\n  public controlInvalid = signal(false);\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n\n    const sanitizedValue = input.value.replace(/([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|[\\uD83C-\\uDBFF\\uDC00-\\uDFFF])/g, '');\n\n    input.value = sanitizedValue;\n\n    this.inputChange.emit(sanitizedValue);\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n  }\n\n  @HostListener('focusout')\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n\n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n\n    this.controlSubscription.add(\n      this.control.events\n        .pipe(filter(event => event instanceof TouchedChangeEvent))\n        .subscribe(() => {\n          this.initChange();\n        })\n    );\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid.set(control.touched && control.invalid);\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n\n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label.set('');\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid()) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label.set(options.errors[error]);\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\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    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ label() }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\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-listbox.mjs

@@ -1,20 +1,21 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, ViewChild, Component } from '@angular/core';
+import { EventEmitter, signal, HostListener, Output, Input, ViewChild, Component } from '@angular/core';
 import * as i1 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { fromEvent, tap, debounceTime } from 'rxjs';
+import { TouchedChangeEvent } from '@angular/forms';
+import { fromEvent, tap, debounceTime, filter } from 'rxjs';
 import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
 
 class ApexListboxComponent {
-    constructor(elementRef, changeDetectorRef) {
+    constructor(elementRef) {
         this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
         this.listbox = null;
         this.virtualScroll = false;
         this.itemSize = 28; // Must match CSS row height of an item
         this.selectChange = new EventEmitter();
         this.tooltipPosition = TooltipPosition;
-        this.controlInvalid = false;
+        this.controlError = signal('', ...(ngDevMode ? [{ debugName: "controlError" }] : []));
+        this.controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : []));
         this.control = null;
         this.controlSubscription = null;
         this.documentKeyupValue = '';
@@ -27,14 +28,11 @@ class ApexListboxComponent {
         // Drag selection state
         this.dragSelecting = false;
         this.dragAnchorIndex = 0;
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     }
     ngOnInit() {
         this.control = this.getControl();
-        this.selectedItems = new Array(this.options.data.length).fill(null);
-        if (!this.virtualScroll) {
-            this.changeDetectorRef.detach();
-        }
-        this.changeDetectorRef.detectChanges();
+        this.selectedItems.set(new Array(this.options.data.length).fill(null));
     }
     ngAfterViewInit() {
         this.documentKeyDownSubscription = fromEvent(this.elementRef.nativeElement, 'keydown')
@@ -48,12 +46,11 @@ class ApexListboxComponent {
         }
     }
     ngOnChanges(changes) {
-        if (changes['options'] && changes['options'].currentValue['data'] && this.selectedItems) {
-            this.selectedItems.length = 0;
+        if (changes['options'] && changes['options'].currentValue['data'] && this.selectedItems()) {
+            this.selectedItems.set([]);
             // Refresh virtual viewport if enabled
             setTimeout(() => {
                 this.cdkViewport?.checkViewportSize();
-                this.changeDetectorRef.detectChanges();
             });
         }
     }
@@ -180,45 +177,47 @@ class ApexListboxComponent {
     addSelectedItems(index) {
         const isIndexNumber = typeof index === 'number';
         this.lastSelectedItemIndex = isIndexNumber ? index : index.slice(-1)[0];
+        const items = [...this.selectedItems()];
         if (isIndexNumber) {
-            this.selectedItems[index] = this.options.data[index];
+            items[index] = this.options.data[index];
         }
         else {
             for (let i of index) {
-                this.selectedItems[i] = this.options.data[i];
+                items[i] = this.options.data[i];
             }
         }
+        this.selectedItems.set(items);
         if (this.control) {
-            this.control.setValue(this.selectedItems.filter(value => value !== null));
+            this.control.setValue(items.filter(value => value !== null));
         }
-        this.selectChange.emit(this.selectedItems.filter(Boolean));
-        this.changeDetectorRef.detectChanges();
+        this.selectChange.emit(items.filter(Boolean));
     }
     removeSelectedItems(index) {
         const isIndexNumber = typeof index === 'number';
+        const items = [...this.selectedItems()];
         if (isIndexNumber) {
-            this.selectedItems[index] = null;
+            items[index] = null;
         }
         else {
             for (let i of index) {
-                this.selectedItems[i] = null;
+                items[i] = null;
             }
         }
+        this.selectedItems.set(items);
         if (this.control) {
-            this.control?.setValue(this.selectedItems.filter(value => value !== null));
+            this.control?.setValue(items.filter(value => value !== null));
         }
-        this.selectChange.emit(this.selectedItems.filter(Boolean));
-        this.changeDetectorRef.detectChanges();
+        this.selectChange.emit(items.filter(Boolean));
     }
     clearAllSelections() {
-        this.selectedItems = new Array(this.options.data.length).fill(null);
+        this.selectedItems.set(new Array(this.options.data.length).fill(null));
         if (this.control) {
             this.control.setValue([]);
         }
         this.selectChange.emit([]);
     }
     isIndexSelected(index) {
-        return !!this.selectedItems[index];
+        return !!this.selectedItems()[index];
     }
     trackByIndex(index) { return index; }
     scrollIndexIntoView(index) {
@@ -250,35 +249,44 @@ class ApexListboxComponent {
                 this.checkIfControlInvalid(this.control);
                 this.getControlError(this.control);
             });
+            this.controlSubscription.add(this.options.formGroup.controls[this.options.formControlName].events
+                .pipe(filter(event => event instanceof TouchedChangeEvent))
+                .subscribe(() => {
+                if (!this.control) {
+                    return;
+                }
+                this.checkIfControlInvalid(this.control);
+                this.getControlError(this.control);
+            }));
             return this.options.formGroup.get(this.options.formControlName);
         }
         return null;
     }
     checkIfControlInvalid(control) {
-        this.controlInvalid = control.invalid;
+        this.controlInvalid.set(control.invalid);
     }
     getControlError(control) {
-        this.controlError = '';
+        this.controlError.set('');
         const options = this.options;
-        if (options.errors && this.controlInvalid) {
+        if (options.errors && this.controlInvalid()) {
             for (const error in options.errors) {
                 if (control.hasError(error)) {
-                    this.controlError = options.errors[error];
+                    this.controlError.set(options.errors[error]);
                     return;
                 }
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexListboxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexListboxComponent, isStandalone: true, selector: "apex-listbox", inputs: { options: "options", virtualScroll: "virtualScroll", itemSize: "itemSize" }, outputs: { selectChange: "selectChange" }, host: { listeners: { "document:mouseup": "mouseup()", "keyup": "keyup($event)" } }, viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@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", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexListboxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexListboxComponent, isStandalone: true, selector: "apex-listbox", inputs: { options: "options", virtualScroll: "virtualScroll", itemSize: "itemSize" }, outputs: { selectChange: "selectChange" }, host: { listeners: { "document:mouseup": "mouseup()", "keyup": "keyup($event)" } }, viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@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", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexListboxComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'apex-listbox', imports: [
                         ScrollingModule,
                         ApexTooltipDirective,
-                    ], template: "@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", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { listbox: [{
+                    ], template: "@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", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { listbox: [{
                 type: ViewChild,
                 args: ['listbox']
             }], cdkViewport: [{

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":";;;;;;;MA8Ba,oBAAoB,CAAA;IAE/B,WAAA,CACU,UAAsB,EACtB,iBAAoC,EAAA;QADpC,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,iBAAiB,GAAjB,iBAAiB;QAGL,IAAA,CAAA,OAAO,GAAsC,IAAI;QAK9D,IAAA,CAAA,aAAa,GAAY,KAAK;AAC9B,QAAA,IAAA,CAAA,QAAQ,GAAW,EAAE,CAAC;AAErB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAoB;QAEtD,IAAA,CAAA,eAAe,GAAG,eAAe;QAGjC,IAAA,CAAA,cAAc,GAAG,KAAK;QACtB,IAAA,CAAA,OAAO,GAA2B,IAAI;QACtC,IAAA,CAAA,mBAAmB,GAAwB,IAAI;QAE9C,IAAA,CAAA,kBAAkB,GAAG,EAAE;QACvB,IAAA,CAAA,2BAA2B,GAAG,IAAI;QAGlC,IAAA,CAAA,UAAU,GAAG,KAAK;QAClB,IAAA,CAAA,WAAW,GAAG,KAAK;AAEnB,QAAA,IAAA,CAAA,UAAU,GAAW,GAAG,CAAC;QAEzB,IAAA,CAAA,qBAAqB,GAAG,CAAC;QACzB,IAAA,CAAA,gCAAgC,GAAG,CAAC;;QAGpC,IAAA,CAAA,aAAa,GAAG,KAAK;QACrB,IAAA,CAAA,eAAe,GAAG,CAAC;IAjC3B;IAqCO,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;AAEhC,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AAEnE,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE;QACjC;AAEA,QAAA,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE;IACxC;IAEO,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,2BAA2B,GAAG,SAAS,CAAgB,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,SAAS;aACjG,IAAI,CACH,GAAG,CAAC,KAAK,IAAG,EAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA,CAAC,CAAC,CAAC,EACrC,YAAY,CAAC,IAAI,CAAC,2BAA2B,CAAC;AAC/C,aAAA,SAAS,CAAC,MAAK,EAAG,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAA,CAAC,CAAC,CAAC;IACtD;IAEO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,2BAA2B,CAAC,WAAW,EAAE;AAE9C,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,mBAAmB,EAAE,WAAW,EAAE;QACzC;IACF;AAEO,IAAA,WAAW,CAAC,OAAsB,EAAA;AACvC,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;AACvF,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;;YAG7B,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,WAAW,EAAE,iBAAiB,EAAE;AACrC,gBAAA,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE;AACxC,YAAA,CAAC,CAAC;QACJ;IACF;AAEO,IAAA,SAAS,CAAC,KAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;AAE5B,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,gCAAgC,CAAC;AAClE,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,gCAAgC,CAAC;YAElE,MAAM,OAAO,GAAG,EAAc;AAE9B,YAAA,KAAK,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;AAAE,gBAAA,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YAAE;YAEpD,IAAI,CAAC,kBAAkB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;YAC9B;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;YACjC;iBAAO;AACL,gBAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAC9B;YACA;QACF;QAEA,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAC9B;IAGO,OAAO,GAAA;AACZ,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;IAC5B;AAGO,IAAA,KAAK,CAAC,KAAoB,EAAA;AAC/B,QAAA,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC9C,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;YAExB;QACF;QAEA,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AAC7F,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;QACzB;IACF;AAEO,IAAA,SAAS,CAAC,KAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;YAC9D;QACF;AAEA,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;AACjD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;QAEjD,MAAM,OAAO,GAAa,EAAE;AAC5B,QAAA,KAAK,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE;QAEpD,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;IAChC;AAEQ,IAAA,OAAO,CAAC,KAAoB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE,aAAa,MAAM,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;YACtI;QACF;AAEA,QAAA,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC9C,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,YAAA,IAAI,CAAC,gCAAgC,GAAG,IAAI,CAAC,qBAAqB;QACpE;QAEA,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AAC7F,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;QACxB;AAEA,QAAA,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YAClD,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;YAE9B;QACF;AAEA,QAAA,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;YAChD,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;YAE/B;QACF;AAEA,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAC3B;AAEQ,IAAA,mBAAmB,CAAC,WAAoB,EAAA;QAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM;AAE3C,QAAA,IAAI,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAC,qBAAqB,GAAG,CAAC,GAAG,IAAI,CAAC,qBAAqB,GAAG,CAAC;AAE5F,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,KAAK,UAAU,EAAE;gBAC3C;YACF;AAEA,YAAA,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE;AAClC,gBAAA,MAAM,gBAAgB,GAAG,WAAW,GAAG,QAAQ,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC;AAClE,gBAAA,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;YAC5C;iBAAO;AACL,gBAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;YACjC;AAEA,YAAA,IAAI,CAAC,qBAAqB,GAAG,QAAQ;AACrC,YAAA,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC;YAElC;QACF;QAEA,IAAI,CAAC,kBAAkB,EAAE;AAEzB,QAAA,QAAQ,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,QAAQ;AACtC,QAAA,QAAQ,GAAG,QAAQ,IAAI,UAAU,GAAG,UAAU,GAAG,CAAC,GAAG,QAAQ;AAE7D,QAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/B,QAAA,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC;IACpC;AAEQ,IAAA,aAAa,CAAC,KAAoB,EAAA;AACxC,QAAA,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;YACtD,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AAChD,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC;YAEjC;QACF;AAEA,QAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE;QAE3E,IAAI,QAAQ,GAAkB,IAAI;AAElC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE;AAEtG,YAAA,IAAI,QAAQ,KAAK,IAAI,CAAC,kBAAkB,EAAE;gBACxC,QAAQ,GAAG,CAAC;gBAEZ;YACF;QACF;AAEA,QAAA,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,IAAI,CAAC,kBAAkB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/B,YAAA,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC;QACpC;IACF;AAEQ,IAAA,gBAAgB,CAAC,KAAwB,EAAA;AAC/C,QAAA,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ;QAE/C,IAAI,CAAC,qBAAqB,GAAG,aAAa,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEvE,IAAI,aAAa,EAAE;AACjB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QACtD;aAAO;AACL,YAAA,KAAK,IAAI,CAAC,IAAI,KAAK,EAAE;AACnB,gBAAA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YAC9C;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QAC3E;AAEA,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAqB,CAAC;AAE9E,QAAA,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE;IACxC;AAEQ,IAAA,mBAAmB,CAAC,KAAwB,EAAA;AAClD,QAAA,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ;QAE/C,IAAI,aAAa,EAAE;AACjB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI;QAClC;aAAO;AACL,YAAA,KAAK,IAAI,CAAC,IAAI,KAAK,EAAE;AACnB,gBAAA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI;YAC9B;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QAC5E;AAEA,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAqB,CAAC;AAE9E,QAAA,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE;IACxC;IAEQ,kBAAkB,GAAA;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AAEnE,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC3B;AAEA,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;IAC5B;AAEO,IAAA,eAAe,CAAC,KAAa,EAAA;QAClC,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IACpC;AAEO,IAAA,YAAY,CAAC,KAAa,EAAA,EAAY,OAAO,KAAK,CAAC,CAAC;AAEnD,IAAA,mBAAmB,CAAC,KAAa,EAAA;QACvC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,EAAE;YAC1C,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;YAC/C;QACF;AAEA,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,aAAa;QAE7C,IAAI,CAAC,SAAS,EAAE;YACd;QACF;QAEA,MAAM,MAAM,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA,aAAA,EAAgB,KAAK,CAAA,EAAA,CAAI,CAAC;QACjE,MAAM,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAC9C;IAEO,wBAAwB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,OAAO,KAAK;QACd;QAEA,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;AAEvE,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,aAAa;AAEhD,QAAA,OAAO,UAAU,GAAG,IAAI,CAAC,UAAU;IACrC;IAEQ,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;YAC1D,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,MAAK;AACnH,gBAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;oBACjB;gBACF;AAEA,gBAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;AAExC,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;AACpC,YAAA,CAAC,CAAC;AAEF,YAAA,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;QACjE;AAEA,QAAA,OAAO,IAAI;IACb;AAEQ,IAAA,qBAAqB,CAAC,OAAwB,EAAA;AACpD,QAAA,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,OAAO;IACvC;AAEQ,IAAA,eAAe,CAAC,OAAwB,EAAA;AAC9C,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE;AAEtB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAQ;QAE7B,IAAI,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE;AACzC,YAAA,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE;AAClC,gBAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;oBAC3B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;oBAEzC;gBACF;YACF;QAEF;IACF;8GA5WW,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,+ZAQpB,wBAAwB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtCrC,srEA6CA,EAAA,MAAA,EAAA,CAAA,qhDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDpBI,eAAe,4jBACf,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAXhC,SAAS;iCACI,IAAI,EAAA,QAAA,EACN,cAAc,EAAA,OAAA,EAGf;wBACP,eAAe;wBACf,oBAAoB;AACrB,qBAAA,EAAA,QAAA,EAAA,srEAAA,EAAA,MAAA,EAAA,CAAA,qhDAAA,CAAA,EAAA;;sBAUA,SAAS;uBAAC,SAAS;;sBACnB,SAAS;uBAAC,wBAAwB;;sBAElC;;sBAEA;;sBACA;;sBAEA;;sBAiGA,YAAY;uBAAC,kBAAkB;;sBAK/B,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;;AEnJnC;;AAEG;;;;"}
+{"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, Input, Output, EventEmitter, HostListener, signal } from '@angular/core';\nimport { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { FormGroup, AbstractControl, TouchedChangeEvent } from '@angular/forms';\n\nimport { Subscription, debounceTime, filter, 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 (private elementRef: ElementRef) { }\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 = signal('');\n  public controlInvalid = signal(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 = signal<(ApexSelectData | null)[]>([]);\n\n  public ngOnInit(): void {\n    this.control = this.getControl();\n\n    this.selectedItems.set(new Array(this.options.data.length).fill(null));\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.set([]);\n\n      // Refresh virtual viewport if enabled\n      setTimeout(() => {\n        this.cdkViewport?.checkViewportSize();\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    const items = [...this.selectedItems()];\n\n    if (isIndexNumber) {\n      items[index] = this.options.data[index];\n    } else {\n      for (let i of index) {\n        items[i] = this.options.data[i];\n      }\n    }\n\n    this.selectedItems.set(items);\n\n    if (this.control) {\n      this.control.setValue(items.filter(value => value !== null));\n    }\n\n    this.selectChange.emit(items.filter(Boolean) as ApexSelectData[]);\n  }\n\n  private removeSelectedItems(index: number | number[]) {\n    const isIndexNumber = typeof index === 'number';\n\n    const items = [...this.selectedItems()];\n\n    if (isIndexNumber) {\n      items[index] = null;\n    } else {\n      for (let i of index) {\n        items[i] = null;\n      }\n    }\n\n    this.selectedItems.set(items);\n\n    if (this.control) {\n      this.control?.setValue(items.filter(value => value !== null));\n    }\n\n    this.selectChange.emit(items.filter(Boolean) as ApexSelectData[]);\n  }\n\n  private clearAllSelections(): void {\n    this.selectedItems.set(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      this.controlSubscription.add(\n        this.options.formGroup.controls[this.options.formControlName].events\n          .pipe(filter(event => event instanceof TouchedChangeEvent))\n          .subscribe(() => {\n            if (!this.control) {\n              return;\n            }\n\n            this.checkIfControlInvalid(this.control);\n            this.getControlError(this.control);\n          })\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.set(control.invalid);\n  }\n\n  private getControlError(control: AbstractControl): void {\n    this.controlError.set('');\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.set(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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"}