@apexara/ng-components 1.0.0

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

@@ -0,0 +1,620 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, PLATFORM_ID, HostListener, Output, Input, ViewChild, Component } from '@angular/core';
+import { isPlatformServer, NgClass } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import * as i3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { fromEvent, tap, debounceTime } from 'rxjs';
+import { IpiChipComponent } from '@apexara/ng-components/chip';
+import { IpiImageComponent } from '@apexara/ng-components/image';
+import { IpiCheckboxComponent } from '@apexara/ng-components/checkbox';
+import * as i1 from '@apexara/ng-components/services';
+import { MobileOS } from '@apexara/ng-components/services';
+import { TooltipPosition, IpiTooltipDirective } from '@apexara/ng-components/tooltip';
+
+class IpiSelectComponent {
+    constructor(osService, elementRef, iterableDiffers, changeDetectorRef) {
+        this.osService = osService;
+        this.elementRef = elementRef;
+        this.iterableDiffers = iterableDiffers;
+        this.changeDetectorRef = changeDetectorRef;
+        this.input = null;
+        this.label = null;
+        this.dropdown = null;
+        this.inputWrapper = null;
+        this.selectChange = new EventEmitter();
+        this.helperTextChange = new EventEmitter();
+        this.firstDropdown = 0;
+        this.isDropdown = false;
+        this.tooltipPosition = TooltipPosition;
+        this.platformId = inject(PLATFORM_ID);
+        this.isDropdownReversed = false;
+        this.shouldPreventEvents = false;
+        this.documentKeyupValue = '';
+        this.documentKeyupValueResetTime = 1000;
+        this.documentKeyUpSubscription = null;
+        this.controlSubscription = null;
+        this.filteredData = [];
+        this.lastSearch = '';
+        this.keyListener = (event) => this.blockArrowScroll(event);
+        this.wheelListener = (event) => this.blockScroll(event);
+        this.scrollBlockersAttached = false;
+        // Virtual scroll config for options list
+        this.optionItemSizePx = 48; // must match .dropdown .option height in CSS
+        this.maxVisibleOptions = 8;
+        this.dropdownHeightPx = this.optionItemSizePx;
+        this.changeDetectorRef.detach();
+        this.dataDiffer = this.iterableDiffers.find([]).create();
+        this.handleEvents();
+    }
+    ngOnInit() {
+        this.control = this.getControl();
+        this.changeDetectorRef.detectChanges();
+        if (isPlatformServer(this.platformId)) {
+            return;
+        }
+        this.documentKeyUpSubscription = fromEvent(this.elementRef.nativeElement, 'keydown')
+            .pipe(tap(event => { this.keyup(event); }), debounceTime(this.documentKeyupValueResetTime))
+            .subscribe(() => { this.documentKeyupValue = ''; });
+    }
+    ngDoCheck() {
+        const data = this.options?.data || [];
+        const diff = this.dataDiffer.diff(data);
+        if (!diff) {
+            return;
+        }
+        this.filteredData = [...data];
+        this.changeDetectorRef.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.filteredData = [...this.options.data];
+        setTimeout(() => {
+            if (this.options.formGroup && this.options.formControlName) {
+                this.setVisibleValue(this.options.formGroup.controls[this.options.formControlName].value);
+            }
+        });
+        if (this.options.searchable) {
+            this.controlSubscription = this.control.valueChanges.subscribe((value) => {
+                this.setVisibleValue(value);
+                setTimeout(() => {
+                    this.changeDetectorRef.detectChanges();
+                });
+            });
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    ngOnChanges(changes) {
+        if (!changes['options'] || changes['options'].firstChange) {
+            return;
+        }
+        this.updateDropdownHeight();
+        this.changeDetectorRef.detectChanges();
+    }
+    ngOnDestroy() {
+        if (isPlatformServer(this.platformId)) {
+            return;
+        }
+        this.detachGlobalScrollBlockers();
+        window.removeEventListener('keydown', this.keyListener);
+        if (this.documentKeyUpSubscription) {
+            this.documentKeyUpSubscription.unsubscribe();
+        }
+        if (this.controlSubscription) {
+            this.controlSubscription.unsubscribe();
+        }
+    }
+    onHelperText() {
+        this.helperTextChange.emit();
+    }
+    setValue(value) {
+        this.changeDetectorRef.detectChanges();
+        if (!this.options.multiple) {
+            value = this.removeProperty(value, 'isHover');
+        }
+        this.control.setValue(value);
+        this.input.nativeElement.value = value.label ? value.label : '';
+        this.selectChange.emit(value);
+        if (value.value == null) {
+            return;
+        }
+        setTimeout(() => {
+            this.removeDropdown();
+            if (!this.options.multiple) {
+                this.lastSearch = '';
+            }
+        });
+    }
+    setMultipleValue(data, event) {
+        if (event) {
+            event.preventDefault();
+        }
+        const newValue = this.control.value;
+        let indexOfValue = -1;
+        for (let i = 0; i < newValue.length; i++) {
+            if (newValue[i].value === data.value) {
+                indexOfValue = i;
+            }
+            if (JSON.stringify(newValue[i].value) === JSON.stringify(data.value)) {
+                indexOfValue = i;
+            }
+        }
+        if (indexOfValue === -1) {
+            newValue.push({ label: data.label, value: data.value });
+        }
+        else {
+            newValue.splice(indexOfValue, 1);
+        }
+        this.lastSearch = '';
+        this.input.nativeElement.value = '';
+        this.filteredData = this.options.data;
+        this.control.setValue(newValue);
+        this.selectChange.emit(newValue);
+    }
+    setVisibleValue(newValue) {
+        if (newValue === null) {
+            this.input.nativeElement.value = '';
+            return;
+        }
+        if (this.options.counterAsValue) {
+            if (this.options.searchable) {
+                return;
+            }
+            if (this.showMultipleCount() > 0) {
+                this.input.nativeElement.value = this.showMultipleCount() + ' selected';
+            }
+            return;
+        }
+        let visibleValue = '';
+        for (let data of this.filteredData) {
+            // when newValue is object and not array
+            if (data.value === newValue.value) {
+                visibleValue = data.label;
+                break;
+            }
+            if (this.options.multiple && !this.options.searchable) {
+                // when newValue is array
+                for (let item of newValue) {
+                    if (data.value === item.value) {
+                        visibleValue += item.label + ', ';
+                        break;
+                    }
+                }
+            }
+            if (newValue.value) {
+                // Edge case for when we use { label, value } pattern as value
+                if (newValue.value.value && this.getControl()?.value.value.value === newValue.value.value) {
+                    visibleValue = data.label;
+                    break;
+                }
+            }
+        }
+        this.input.nativeElement.value = visibleValue;
+        this.changeDetectorRef.detectChanges();
+    }
+    updateDropdownHeight() {
+        if (!this.isDropdown) {
+            return;
+        }
+        setTimeout(() => {
+            const count = this.filteredData.length;
+            const maxRows = this.maxVisibleOptions;
+            let next = this.optionItemSizePx;
+            if (count > 0 && count <= maxRows && this.dropdown) {
+                const options = this.dropdown.elementRef.nativeElement.querySelectorAll('.option');
+                let total = 0;
+                options.forEach((option) => {
+                    const height = option.getBoundingClientRect().height;
+                    total += isFinite(height) ? height : 0;
+                });
+                next = total;
+            }
+            else {
+                const rows = Math.min(count, maxRows);
+                next = Math.max(rows * this.optionItemSizePx, this.optionItemSizePx);
+            }
+            const maxHeight = this.options.maxDropdownHeightPx;
+            if (maxHeight) {
+                next = Math.min(next, Math.max(this.optionItemSizePx, maxHeight));
+            }
+            this.dropdownHeightPx = next;
+            this.changeDetectorRef.detectChanges();
+            setTimeout(() => {
+                this.dropdown?.checkViewportSize();
+            }, 100);
+        });
+    }
+    showMultipleCount() {
+        if (!this.control.value.length) {
+            return 0;
+        }
+        return this.control.value.length;
+    }
+    isValueSelected(value) {
+        if (value.value == null || this.control.value == null) {
+            return false;
+        }
+        return value.value === this.control.value.value;
+    }
+    isMultipleSelected(value) {
+        for (let i = 0; i < this.control.value.length; i++) {
+            if (value.value === this.control.value[i]) {
+                return true;
+            }
+            if (this.control.value[i].value === value.value) {
+                return true;
+            }
+            if (JSON.stringify(this.control.value[i].value) === JSON.stringify(value.value)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    activateDropdown() {
+        if (this.checkIfControlDisabled()) {
+            return;
+        }
+        this.isDropdown = true;
+        this.input.nativeElement.focus();
+        if (this.firstDropdown === 0) {
+            this.firstDropdown += 1;
+            setTimeout(() => this.generateDropdownPosition(true));
+            // Reattaching is needed to properly update the hovered options by KeyboardEvents
+            this.changeDetectorRef.reattach();
+        }
+        this.attachGlobalScrollBlockers();
+        this.onSearch(this.lastSearch, false);
+    }
+    deactivateControl(event) {
+        if (event instanceof KeyboardEvent) {
+            this.removeDropdown();
+            return;
+        }
+        if (!this.dropdown || !this.inputWrapper) {
+            return;
+        }
+        const dropdownRect = this.dropdown.elementRef.nativeElement.getBoundingClientRect();
+        const inputWrapperRect = this.inputWrapper.nativeElement.getBoundingClientRect();
+        const isClickInsideDropdown = this.isWithinBounds(event, dropdownRect);
+        const isClickInsideInputWrapper = this.isWithinBounds(event, inputWrapperRect);
+        if (isClickInsideDropdown || isClickInsideInputWrapper) {
+            return;
+        }
+        this.removeDropdown();
+    }
+    onFocusIn() {
+        this.shouldPreventEvents = true;
+        this.activateDropdown();
+        setTimeout(() => {
+            this.shouldPreventEvents = false;
+        }, 200);
+    }
+    onFocusOut() {
+        this.shouldPreventEvents = true;
+        setTimeout(() => {
+            this.shouldPreventEvents = false;
+        }, 200);
+        this.removeDropdown();
+    }
+    toggleDropdown() {
+        if (this.shouldPreventEvents) {
+            return;
+        }
+        if (this.isDropdown) {
+            this.removeDropdown();
+        }
+        else {
+            this.activateDropdown();
+        }
+    }
+    generateDropdownPosition(checkRevserse = false) {
+        if (!this.dropdown) {
+            // method will keep executing until dropdown is rendered
+            setTimeout(() => this.generateDropdownPosition(true));
+            return;
+        }
+        const dropdownEl = this.dropdown.elementRef.nativeElement;
+        const elementRefRect = this.elementRef.nativeElement.getBoundingClientRect();
+        if (this.osService.mobileOS === MobileOS.iOS) {
+            elementRefRect.y += window.visualViewport.offsetTop;
+            elementRefRect.x += window.visualViewport.offsetLeft;
+        }
+        dropdownEl.style.left = elementRefRect.x + 'px';
+        dropdownEl.style.width = elementRefRect.width + 'px';
+        dropdownEl.style.top = elementRefRect.y + elementRefRect.height + 'px';
+        if (checkRevserse) {
+            if (window.innerHeight < dropdownEl.getBoundingClientRect().bottom) {
+                dropdownEl.style.top = 'unset';
+                dropdownEl.style.bottom = window.innerHeight - elementRefRect.y + 10 + 'px';
+                this.isDropdownReversed = true;
+            }
+        }
+        if (this.isDropdownReversed) {
+            dropdownEl.style.top = 'unset';
+            dropdownEl.style.bottom = window.innerHeight - elementRefRect.y + 10 + 'px';
+        }
+        setTimeout(() => {
+            this.updateDropdownHeight();
+        }, 100);
+        this.changeDetectorRef.detectChanges();
+    }
+    removeDropdown() {
+        this.isDropdown = false;
+        this.isDropdownReversed = false;
+        this.firstDropdown = 0;
+        this.changeDetectorRef.detectChanges();
+        this.input.nativeElement.blur();
+        this.detachGlobalScrollBlockers();
+        this.changeDetectorRef.detach();
+    }
+    handleKeydown(event) {
+        if (event.code === 'Backspace') {
+            this.onSearch('', true);
+        }
+    }
+    preventFocusChange(event) {
+        if (this.input?.nativeElement === document.activeElement) {
+            event.preventDefault();
+            return;
+        }
+    }
+    onSearch(value, shouldResetHover) {
+        this.lastSearch = value;
+        if (!value) {
+            // Reset to original data if input is empty
+            this.filteredData = [...this.options.data];
+            this.updateDropdownHeight();
+            return;
+        }
+        const searchTerm = value.toLowerCase();
+        this.filteredData = this.options.data.filter(item => item.label.toLowerCase().includes(searchTerm));
+        if (this.filteredData.length && shouldResetHover) {
+            for (let i = 0; i < this.filteredData.length; i++) {
+                this.filteredData[i].isHover = false;
+            }
+            this.filteredData[0].isHover = true;
+        }
+        this.updateDropdownHeight();
+    }
+    getPlaceholder() {
+        const options = this.options;
+        const formGroup = options.formGroup;
+        const formControlName = options.formControlName;
+        let placeholder = '';
+        if (options.placeholder) {
+            placeholder = options.placeholder;
+        }
+        if (formGroup && formControlName && options.errors && this.checkIfControlInvalid()) {
+            for (const error in options.errors) {
+                if (formGroup.controls[formControlName].hasError(error)) {
+                    placeholder = options.errors[error];
+                }
+            }
+        }
+        if ((this.control.value instanceof Array && this.control.value.length) || (this.control.value && !(this.control.value instanceof Array))) {
+            return '';
+        }
+        return placeholder;
+    }
+    checkIfControlInvalid() {
+        return this.control.touched && this.control.invalid;
+    }
+    checkIfControlDisabled() {
+        return this.control.disabled;
+    }
+    getControl() {
+        if (this.options && this.options.formGroup && this.options.formControlName) {
+            return this.options.formGroup.controls[this.options.formControlName];
+        }
+        return null;
+    }
+    isWithinBounds(event, rect) {
+        return (event.clientX >= rect.left &&
+            event.clientX <= rect.right &&
+            event.clientY >= rect.top &&
+            event.clientY <= rect.bottom);
+    }
+    handleEvents() {
+        if (isPlatformServer(this.platformId)) {
+            return;
+        }
+        window.addEventListener('keydown', this.keyListener);
+    }
+    keyup(event) {
+        if (document.activeElement !== this.input?.nativeElement) {
+            this.deactivateControl(event);
+            return;
+        }
+        if (document.activeElement === this.input?.nativeElement) {
+            if (document.activeElement !== this.input?.nativeElement) {
+                return;
+            }
+            switch (event.code) {
+                case 'Enter':
+                    this.documentEnterKeyup(event);
+                    return;
+                case 'Space':
+                    if (!this.options.searchable) {
+                        this.documentEnterKeyup(event);
+                    }
+                    return;
+                case 'Backspace':
+                    if (!this.options.multiple && this.options.searchable && this.control.value.value != null) {
+                        this.onSearch('', false);
+                        this.setValue('');
+                    }
+                    return;
+                case 'Escape':
+                    this.deactivateControl(event);
+                    return;
+                case 'ArrowDown':
+                    this.documentArrowsKeyup(true);
+                    return;
+                case 'ArrowUp':
+                    this.documentArrowsKeyup(false);
+                    return;
+            }
+            this.documentKeyup(event);
+        }
+    }
+    documentEnterKeyup(event) {
+        for (let i = 0; i < this.filteredData.length; i++) {
+            if (this.filteredData[i].isHover) {
+                switch (this.options.multiple) {
+                    case true:
+                        this.setMultipleValue(this.filteredData[i], event);
+                        this.updateDropdownHeight();
+                        this.changeDetectorRef.detectChanges();
+                        return;
+                    default:
+                        this.setValue(this.filteredData[i]);
+                        this.removeDropdown();
+                }
+            }
+        }
+    }
+    documentArrowsKeyup(isDownArrow) {
+        if (!this.dropdown || !this.filteredData.length) {
+            return;
+        }
+        const dataLength = this.filteredData.length;
+        const controlValue = this.control.getRawValue();
+        const isControlValue = controlValue && controlValue !== '';
+        let hoverIndex = null;
+        let valueIndex = null;
+        for (let i = 0; i < dataLength; i++) {
+            if (this.filteredData[i].isHover) {
+                hoverIndex = i;
+            }
+            if (isControlValue && this.filteredData[i].value === controlValue) {
+                valueIndex = i;
+            }
+            this.filteredData[i].isHover = false;
+        }
+        const currentIndex = hoverIndex ? hoverIndex : valueIndex ? valueIndex : 0;
+        let newIndex = isDownArrow ? currentIndex + 1 : currentIndex - 1;
+        newIndex = newIndex < 0 ? 0 : newIndex;
+        newIndex = newIndex >= dataLength ? dataLength - 1 : newIndex;
+        this.filteredData[newIndex].isHover = true;
+        this.dropdown?.scrollToIndex(newIndex, 'auto');
+    }
+    documentKeyup(event) {
+        if (!this.isDropdown || this.options.searchable) {
+            return;
+        }
+        for (let i = 0; i < this.filteredData.length; i++) {
+            this.filteredData[i].isHover = false;
+        }
+        this.documentKeyupValue = this.documentKeyupValue + event.key.toLowerCase();
+        let newIndex = null;
+        for (let i = 0; i < this.filteredData.length; i++) {
+            const subLabel = this.filteredData[i].label.substring(0, this.documentKeyupValue.length).toLowerCase();
+            if (subLabel === this.documentKeyupValue) {
+                newIndex = i;
+                break;
+            }
+            this.filteredData[i].isHover = false;
+        }
+        if (newIndex !== null) {
+            this.filteredData[newIndex].isHover = true;
+            this.dropdown?.scrollToIndex(newIndex, 'auto');
+        }
+    }
+    removeProperty(obj, propertyName) {
+        let { [propertyName]: removedProperty, ...data } = obj;
+        return data;
+    }
+    blockArrowScroll(event) {
+        if (!this.dropdown) {
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+        }
+    }
+    blockScroll(event) {
+        if (!this.dropdown) {
+            return;
+        }
+        const dropdownEl = this.dropdown.elementRef.nativeElement;
+        const isInsideDropdown = this.isDescendant(dropdownEl, event.target);
+        if (isInsideDropdown) {
+            const canScroll = dropdownEl.scrollHeight > dropdownEl.clientHeight;
+            if (!canScroll) {
+                event.preventDefault();
+            }
+            return;
+        }
+        event.preventDefault();
+    }
+    isDescendant(parent, child) {
+        while (child !== null) {
+            if (child === parent) {
+                return true;
+            }
+            child = child.parentElement;
+        }
+        return false;
+    }
+    attachGlobalScrollBlockers() {
+        if (this.scrollBlockersAttached) {
+            return;
+        }
+        window.addEventListener('wheel', this.wheelListener, { passive: false });
+        window.addEventListener('touchmove', this.wheelListener, { passive: false });
+        this.scrollBlockersAttached = true;
+    }
+    detachGlobalScrollBlockers() {
+        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: IpiSelectComponent, deps: [{ token: i1.OSService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiSelectComponent, isStandalone: true, selector: "ipi-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <ipi-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></ipi-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <ipi-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</ipi-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData;\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                <ipi-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </ipi-checkbox>\n                            } @else {\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData.length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--ipi-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--ipi-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--ipi-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-select-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--ipi-select-input-background-color, #ffffff00);border:solid var(--ipi-select-input-border-color, #E9E9E9);border-width:var(--ipi-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--ipi-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--ipi-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}ipi-img{width:16px;height:16px}ipi-img.prefix path{fill:var(--ipi-select-icon-prefix-fill, #C6C6C6);stroke:var(--ipi-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--ipi-chip-font-size: var(--ipi-select-chip-font-size, 10px);--ipi-chip-color: var(--ipi-select-chip-color, #FFFFFF);--ipi-chip-background-color: var(--ipi-select-chip-background-color, #0B1222);--ipi-chip-icon-color: var(--ipi-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--ipi-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--ipi-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--ipi-select-arrow-color, #5D6068);border-left:2px solid var(--ipi-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--ipi-select-arrow-checked-color, #F96138);border-left:2px solid var(--ipi-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--ipi-select-invalid-color, #F96138);border-width:var(--ipi-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--ipi-select-invalid-color, #F96138)}.input-field-wrapper ipi-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--ipi-select-dropdown-border-color, #E9E9E9);background-color:var(--ipi-select-dropdown-background-color, #FFFFFF);box-shadow:var(--ipi-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--ipi-checkbox-text-color: var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values ipi-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--ipi-select-options-divider-height, 1px);background-color:var(--ipi-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: IpiChipComponent, selector: "ipi-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: IpiImageComponent, selector: "ipi-img", inputs: ["src", "ariaLabel"] }, { kind: "directive", type: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IpiCheckboxComponent, selector: "ipi-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-select', imports: [
+                        NgClass,
+                        RouterLink,
+                        FormsModule,
+                        ScrollingModule,
+                        IpiChipComponent,
+                        IpiImageComponent,
+                        IpiTooltipDirective,
+                        ReactiveFormsModule,
+                        IpiCheckboxComponent,
+                    ], template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <ipi-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></ipi-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <ipi-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</ipi-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData;\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                <ipi-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </ipi-checkbox>\n                            } @else {\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData.length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--ipi-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--ipi-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--ipi-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-select-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--ipi-select-input-background-color, #ffffff00);border:solid var(--ipi-select-input-border-color, #E9E9E9);border-width:var(--ipi-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--ipi-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--ipi-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}ipi-img{width:16px;height:16px}ipi-img.prefix path{fill:var(--ipi-select-icon-prefix-fill, #C6C6C6);stroke:var(--ipi-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--ipi-chip-font-size: var(--ipi-select-chip-font-size, 10px);--ipi-chip-color: var(--ipi-select-chip-color, #FFFFFF);--ipi-chip-background-color: var(--ipi-select-chip-background-color, #0B1222);--ipi-chip-icon-color: var(--ipi-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--ipi-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--ipi-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--ipi-select-arrow-color, #5D6068);border-left:2px solid var(--ipi-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--ipi-select-arrow-checked-color, #F96138);border-left:2px solid var(--ipi-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--ipi-select-invalid-color, #F96138);border-width:var(--ipi-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--ipi-select-invalid-color, #F96138)}.input-field-wrapper ipi-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--ipi-select-dropdown-border-color, #E9E9E9);background-color:var(--ipi-select-dropdown-background-color, #FFFFFF);box-shadow:var(--ipi-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--ipi-checkbox-text-color: var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values ipi-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--ipi-select-options-divider-height, 1px);background-color:var(--ipi-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.OSService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input']
+            }], label: [{
+                type: ViewChild,
+                args: ['label']
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], inputWrapper: [{
+                type: ViewChild,
+                args: ['inputWrapper']
+            }], options: [{
+                type: Input
+            }], selectChange: [{
+                type: Output
+            }], helperTextChange: [{
+                type: Output
+            }], deactivateControl: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiSelectComponent };
+//# sourceMappingURL=apexara-ng-components-select.mjs.map