@ipi-soft/ng-components
Version:
Custom Angular Components
546 lines (542 loc) • 47.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, inject, PLATFORM_ID, Component, ViewChild, Input, Output, HostListener } 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 { fromEvent, tap, debounceTime } from 'rxjs';
import { IpiChipComponent } from '@ipi-soft/ng-components/chip';
import { IpiImageComponent } from '@ipi-soft/ng-components/image';
import { IpiCheckboxComponent } from '@ipi-soft/ng-components/checkbox';
import * as i1 from '@ipi-soft/ng-components/services';
import { MobileOS } from '@ipi-soft/ng-components/services';
import { TooltipPosition, IpiTooltipDirective } from '@ipi-soft/ng-components/tooltip';
class IpiSelectComponent {
constructor(osService, elementRef, changeDetectorRef) {
this.osService = osService;
this.elementRef = elementRef;
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.changeDetectorRef.detach();
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 = ''; });
}
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) {
this.changeDetectorRef.detectChanges();
}
}
ngOnDestroy() {
if (isPlatformServer(this.platformId)) {
return;
}
window.removeEventListener('wheel', this.wheelListener);
window.removeEventListener('keydown', this.keyListener);
window.removeEventListener('touchmove', this.wheelListener);
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();
}
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.onSearch(this.lastSearch, false);
}
deactivateControl(event) {
if (event instanceof KeyboardEvent) {
this.removeDropdown();
return;
}
if (!this.dropdown || !this.inputWrapper) {
return;
}
const dropdownRect = this.dropdown.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.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';
}
this.changeDetectorRef.detectChanges();
}
removeDropdown() {
this.isDropdown = false;
this.isDropdownReversed = false;
this.firstDropdown = 0;
this.changeDetectorRef.detectChanges();
this.input.nativeElement.blur();
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];
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;
}
}
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('wheel', this.wheelListener, { passive: false });
window.addEventListener('touchmove', this.wheelListener, { passive: false });
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.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;
const element = this.dropdown.nativeElement.children[newIndex];
element.scrollIntoView({ block: 'nearest' });
}
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;
const element = this.dropdown?.nativeElement.children[newIndex];
element.scrollIntoView({ block: 'start' });
}
}
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;
}
if (this.isDescendant(this.dropdown.nativeElement, event.target)) {
if (this.dropdown.nativeElement.scrollHeight === this.dropdown.nativeElement.clientHeight) {
event.preventDefault();
}
return;
}
event.preventDefault();
}
isDescendant(parent, child) {
while (child !== null) {
if (child === parent) {
return true;
}
child = child.parentElement;
}
return false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiSelectComponent, deps: [{ token: i1.OSService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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 <div #dropdown class=\"dropdown\">\n\n @if (filteredData.length) {\n @for (data of filteredData; track $index) {\n @if (options.multiple) {\n <div class=\"option checkbox\" [ngClass]=\"{ selected: isMultipleSelected(data), preselected: data.isHover}\" (click)=\"setMultipleValue(data, $event)\">\n <ipi-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n\n @if (data.description) {\n <span>{{ data.description }}</span>\n }\n </div>\n </ipi-checkbox>\n </div>\n\n @if (data.description && filteredData.length - 1 !== $index) {\n <div class=\"options-divider\"></div>\n }\n } @else {\n <div class=\"option\" [ngClass]=\"{ selected: isValueSelected(data), preselected: data.isHover}\" (click)=\"setValue(data)\">\n {{ data.label }}\n </div>\n }\n }\n } @else {\n <div class=\"option disabled\">\n No options to select from.\n </div>\n }\n </div>\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;max-height:var(--ipi-select-dropdown-max-height, 240px);position:fixed;overflow-y:auto;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}.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],form:not([ngNoForm]),[ngForm]" }, { 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: "19.1.4", ngImport: i0, type: IpiSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-select', imports: [
NgClass,
RouterLink,
FormsModule,
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 <div #dropdown class=\"dropdown\">\n\n @if (filteredData.length) {\n @for (data of filteredData; track $index) {\n @if (options.multiple) {\n <div class=\"option checkbox\" [ngClass]=\"{ selected: isMultipleSelected(data), preselected: data.isHover}\" (click)=\"setMultipleValue(data, $event)\">\n <ipi-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n\n @if (data.description) {\n <span>{{ data.description }}</span>\n }\n </div>\n </ipi-checkbox>\n </div>\n\n @if (data.description && filteredData.length - 1 !== $index) {\n <div class=\"options-divider\"></div>\n }\n } @else {\n <div class=\"option\" [ngClass]=\"{ selected: isValueSelected(data), preselected: data.isHover}\" (click)=\"setValue(data)\">\n {{ data.label }}\n </div>\n }\n }\n } @else {\n <div class=\"option disabled\">\n No options to select from.\n </div>\n }\n </div>\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;max-height:var(--ipi-select-dropdown-max-height, 240px);position:fixed;overflow-y:auto;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}.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.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=ipi-soft-ng-components-select.mjs.map