@ngx-dummy/select-simple
Version:
A simple select component to use in Angular / Ionic projects .. (WIP) and sample app using it
521 lines • 88.8 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
import { BehaviorSubject, fromEvent, of } from 'rxjs';
import { debounceTime, shareReplay, switchMap, takeUntil } from 'rxjs/operators';
import { SelectItemComponent } from './select-item.component';
import { areEqual, getSvgSafeRes, isString, OptionKeyboardEventHandleKeys, resolveFieldData } from './settings/helpers';
import { arrow_down } from './theming/icons-base';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "./select-item.component";
import * as i3 from "@angular/common";
export const SELECT_VALUE_ACCESSOR_PROVIDER = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true,
};
export const NG_VALIDATORS_PROVIDER = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => SelectComponent),
multi: true,
};
export class SelectComponent {
constructor(
// @Self() @Optional() ngControl: NgControl,
el, renderer, cd, sanitizer, zone) {
this.el = el;
this.renderer = renderer;
this.cd = cd;
this.sanitizer = sanitizer;
this.zone = zone;
this.name = null;
/** set additional custom classList to the Select component's panel */
this.panelStyleClass = 'panel';
/** set additional custom classList to the Select component */
this.styleClass = '';
this.readonly = false;
this.required = false;
/** whether to display reset button in the end of the options */
this.resetBtn = false;
/** whether to display search field */
this.searchField = false;
/** whether to set auto focus to component */
this.autofocus = false;
/** default component caption (panel caption) */
this.placeholder = undefined;
/** string key of the Options input (in case of complex object) of kind: 'key' / 'key.subkey'... if set, would resolve the options' captions */
this.optionLabelKey = undefined;
this.selectIconClass = '';
this.tabindex = 0;
this.onChange = new EventEmitter();
this.onClick = new EventEmitter();
this.onShow = new EventEmitter();
this.onHide = new EventEmitter();
this.onFocus = new EventEmitter();
this.onBlur = new EventEmitter();
this.trigger_icon = getSvgSafeRes(arrow_down, this.sanitizer);
this._overlayVisible$$ = new BehaviorSubject(false);
this._optionsToDisplay$$ = new BehaviorSubject([]);
this._headerStyle = {};
this._options = [];
this._disabled = false;
this._panelStyle = {
backgroundColor: 'rgba(1, 1, 1, 0.45)',
color: '#fff',
border: '1px solid var(--ngxd-primary-color)',
borderRadius: '0.2rem',
boxShadow: '2px 5px 10px rgba(55, 55, 55, 0.8)',
};
this.overlayVisible$ = this._overlayVisible$$.asObservable().pipe(shareReplay({
refCount: true,
bufferSize: 1,
}));
this.optionsToDisplay$ = this._optionsToDisplay$$.asObservable().pipe(shareReplay({
refCount: true,
bufferSize: 1,
}));
this.selectedItemTemplate = null;
this.selectedOption = null;
this.selectedItemIndex = 0;
this.hover = false;
this.optionsChanged = false;
this.focused = false;
this.onModelChange = () => void 0;
this.onModelTouched = () => void 0;
// if (ngControl) {
// ngControl.valueAccessor = this;
// }
}
onHostFocus() {
console.log('Focus, prev value :: ', this.prevValue);
}
onHostBlur() {
this.prevValue = this.selectedOption || null;
console.log('BLUR, prev val :: ', this.prevValue);
}
/**
* @property
* @param {BasicStylesSet} headStyleObj - styles to override the defaults of Select component panel
*/
set headerStyle(headStyleObj) {
if (!!headStyleObj && !!Object.keys(headStyleObj).length) {
this._headerStyle = {
...this._headerStyle,
...headStyleObj,
};
}
}
get headerStyle() {
return this._headerStyle;
}
set panelStyle(stylesObj) {
if (!!stylesObj && !!Object.keys(stylesObj).length) {
this._panelStyle = {
...this._panelStyle,
...stylesObj,
};
}
}
get panelStyle() {
return this._panelStyle;
}
// get options(): IOption[] {
// return this._options;
// }
set options(val) {
this._options = val;
// this.optionsToDisplay = this._options;
this._optionsToDisplay$$.next(val);
this.updateSelectedOption();
}
get disabled() {
return this._disabled;
}
set disabled(_disabled) {
if (_disabled) {
this.focused = false;
if (this._overlayVisible$$.value)
this.hide();
}
this._disabled = _disabled;
if (!this.cd.destroyed) {
this.cd.detectChanges();
}
}
ngOnChanges(changes) {
Object.entries(changes).forEach(([changeKey, change]) => {
if (changeKey === 'templates') {
if (change.currentValue === change.previousValue)
return;
// if (!change.isFirstChange()) return;
this.openerBtnTemplate = change.currentValue['openerBtnTemplate'] || this.defaultOpenerTemplate;
this.itemsListDefaultTmpl = change.currentValue['itemslistTemplate'] || this.itemsListDefaultTmpl;
this.cd.markForCheck();
}
});
}
ngAfterContentInit() {
this.openerBtnTemplate = this.templates?.openerBtnTemplate ? this.templates.openerBtnTemplate : this.defaultOpenerTemplate;
this.itemsListDefaultTmpl = this.templates?.itemslistTemplate ? this.templates.itemslistTemplate : this.itemsListDefaultTmpl;
if (this.templates?.selectedItemTemplate) {
this.selectedItemTemplate = this.templates.selectedItemTemplate;
}
this.projectedItems?.forEach((itemCmp) => {
itemCmp.optionClick.subscribe((e) => this.onItemClick(e));
});
fromEvent(document, 'click')
.pipe(switchMap((ev) => {
const iconContainer = ev.target?.classList?.contains('select-trigger-icon');
if (this.isOutsideClicked(ev) && !iconContainer) {
this.cd.markForCheck();
this.hide();
}
return of(ev);
}))
.subscribe();
// this.updateSelectedOption();
}
onInputFocus($event) {
this.focused = true;
this.onFocus.emit($event);
}
onInputBlur($event) {
this.focused = false;
this.onBlur.emit($event);
}
get label() {
return this.selectedOption
? this.getOptionLabel(this.selectedOption)
: this.placeholder?.length
? this.placeholder
: this.options?.length
? this.getOptionLabel(this.options[0])
: null;
}
getOptionLabel(option) {
return resolveFieldData(option, this.optionLabelKey);
}
getOptionValue(option) {
if (!option)
return null;
return resolveFieldData(option);
}
isOptionDisabled(option) {
return isString(option) ? false : !!option?.disabled || false;
}
onItemClick({ option, baseEvent }) {
if (this.readonly) {
console.log('DropDown is READONLY');
return;
}
if (!option)
return;
if (!this.isOptionDisabled(option)) {
this.selectItem(baseEvent, option);
}
setTimeout(() => {
this.hide();
}, 150);
}
selectItem($event, option, update = true) {
// if (this.selectedOption != option) {
this.selectedOption = option;
if (update) {
this.value = this.getOptionValue(option);
this.onModelChange(this.value);
this.onChange.emit({
originalEvent: $event,
value: this.value,
});
}
// }
}
writeValue(value) {
this.value = value;
this.updateSelectedOption();
this.cd.markForCheck();
}
validate({ value }) {
if (this.required && !value)
return { invalid: true };
const isNotValid = this.required && !value && !!Validators.required(value);
return (isNotValid && {
invalid: true,
});
}
updateSelectedOption() {
// this.selectedOption = this.findOption(val, this.optionsToDisplay);
if (!this.placeholder && !this.selectedOption && this._optionsToDisplay$$.value?.length) {
this.selectedOption = this._optionsToDisplay$$.value[0];
}
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
setDisabledState(val) {
this.disabled = val;
this.cd.markForCheck();
}
onMouseclick($event) {
if (this.disabled) {
return;
}
if (!this.readonly) {
this.onClick.emit($event);
}
if (this._overlayVisible$$.value)
this.hide();
else
this.show();
this.cd.detectChanges();
}
reset() {
this.selectItem(new MouseEvent('click'), null);
}
isOutsideClicked(event) {
return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target));
}
show() {
this._overlayVisible$$.next(true);
this.onShow.emit(true);
if (!this.searchField || !this._optionsToDisplay$$.value?.length)
return;
setTimeout(() => {
const searchFieldInputEl = this.el.nativeElement?.querySelector('.search-term__container .search-term');
if (!searchFieldInputEl)
return;
searchFieldInputEl?.focus();
fromEvent(searchFieldInputEl, 'input')
.pipe(takeUntil(this.onHide), debounceTime(200), switchMap(($event) => of($event.target.value)))
.subscribe((searchTerm) => this._optionsToDisplay$$.next(searchTerm.length
? this._options?.filter((opt) => {
const optionValue = this.getOptionValue(opt);
const found = !!optionValue?.toLowerCase().includes(searchTerm.toLowerCase());
return found;
})
: this._options));
});
}
hide() {
this.onHide.emit(false);
this._overlayVisible$$.next(false);
this._optionsToDisplay$$.next(this._options);
}
onKeydown($event) {
if (this.isOutsideClicked($event)) {
console.log('Clicked outside of the component ...');
return;
}
if (this.readonly || !this._optionsToDisplay$$.value?.length) {
return;
}
switch ($event.key) {
case OptionKeyboardEventHandleKeys.ArrowDown:
case OptionKeyboardEventHandleKeys.Down: {
if (!this._overlayVisible$$.value && $event.altKey) {
this.show();
}
else {
this.selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this._optionsToDisplay$$.value) : -1;
const nextEnabledOption = this.findNextEnabledOption(this.selectedItemIndex);
if (nextEnabledOption) {
this.selectItem($event, nextEnabledOption, false);
}
}
$event.preventDefault();
break;
}
case OptionKeyboardEventHandleKeys.ArrowUp:
case OptionKeyboardEventHandleKeys.Up: {
this.selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this._optionsToDisplay$$.value) : -1;
const prevEnabledOption = this.findPrevEnabledOption(this.selectedItemIndex);
if (prevEnabledOption) {
this.selectItem($event, prevEnabledOption, false);
}
$event.preventDefault();
break;
}
case OptionKeyboardEventHandleKeys.Space: {
if (!this._overlayVisible$$.value) {
this.show();
}
else {
this.hide();
}
$event.preventDefault();
break;
}
case OptionKeyboardEventHandleKeys.Enter: {
this.hide();
this.prevValue = this.selectedOption;
this.selectItem($event, this.selectedOption, true);
$event.preventDefault();
break;
}
case OptionKeyboardEventHandleKeys.Escape:
case OptionKeyboardEventHandleKeys.Esc: {
this.selectItem($event, this.prevValue);
this.hide();
$event.preventDefault();
break;
}
case OptionKeyboardEventHandleKeys.Tab: {
this.hide();
break;
}
}
}
findOptionIndex(val, opts) {
if (!val?.trim().length)
return -1;
if (!opts?.length)
return -1;
let index = -1;
for (let i = 0; i < opts.length; i++) {
if (areEqual(val, this.getOptionValue(opts[i]))) {
index = i;
break;
}
}
return index;
}
findPrevEnabledOption(index) {
let prevEnabledOption;
if (this._optionsToDisplay$$.value?.length) {
for (let i = index - 1; 0 <= i; i--) {
const option = this._optionsToDisplay$$.value[i];
if (option?.disabled) {
continue;
}
else {
prevEnabledOption = option;
break;
}
}
if (!prevEnabledOption) {
for (let i = this._optionsToDisplay$$.value?.length - 1; i >= index; i--) {
const option = this._optionsToDisplay$$.value?.[i];
if (this.isOptionDisabled(option)) {
continue;
}
else {
prevEnabledOption = option;
break;
}
}
}
}
return prevEnabledOption;
}
findNextEnabledOption(index) {
let nextEnabledOption;
if (this._optionsToDisplay$$.value?.length) {
for (let i = index + 1; i < this._optionsToDisplay$$.value?.length; i++) {
const option = this._optionsToDisplay$$.value?.[i];
if (this.isOptionDisabled(option)) {
continue;
}
else {
nextEnabledOption = option;
break;
}
}
if (!nextEnabledOption) {
for (let i = 0; i < index; i++) {
const option = this._optionsToDisplay$$.value?.[i];
if (this.isOptionDisabled(option)) {
continue;
}
else {
nextEnabledOption = option;
break;
}
}
}
}
return nextEnabledOption;
}
}
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SelectComponent, selector: "ngxd-select", inputs: { templates: "templates", name: "name", panelStyleClass: "panelStyleClass", styleClass: "styleClass", readonly: "readonly", required: "required", resetBtn: "resetBtn", searchField: "searchField", autofocus: "autofocus", placeholder: "placeholder", optionLabelKey: "optionLabelKey", selectIconClass: "selectIconClass", tabindex: "tabindex", itemSize: "itemSize", headerStyle: "headerStyle", panelStyle: "panelStyle", options: "options", disabled: "disabled" }, outputs: { onChange: "onChange", onClick: "onClick", onShow: "onShow", onHide: "onHide", onFocus: "onFocus", onBlur: "onBlur" }, host: { listeners: { "blur": "onHostBlur($event)", "focus": "onHostFocus($event)", "keydown": "onKeydown($event)", "click": "onMouseclick($event)" }, properties: { "class": "styleClass", "style": "headerStyle", "class.wrapper-focus": "focused || overlayVisible", "class.select": "true", "class.disabled": "disabled", "class.focus": "focused || overlayVisible", "class.select-open": "overlayVisible", "attr.tabIndex": "tabindex", "attr.autofocus": "autofocus", "attr.name": "name" } }, providers: [SELECT_VALUE_ACCESSOR_PROVIDER, NG_VALIDATORS_PROVIDER], queries: [{ propertyName: "projectedItems", predicate: SelectItemComponent, descendants: true }], viewQueries: [{ propertyName: "defaultOpenerTemplate", first: true, predicate: ["defaultSelectIconTmpl"], descendants: true, read: TemplateRef, static: true }, { propertyName: "itemsListDefaultTmpl", first: true, predicate: ["itemsListDefaultTmpl"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"!!label; else NoLabelTmpl\">\n\t<ng-container *ngIf=\"!selectedItemTemplate; else selectedItemSelectedTmpl\">{{\n\t\tlabel\n\t}}</ng-container>\n</span>\n\n<div\n\tclass=\"select-trigger\"\n\trole=\"button\"\n\t[attr.aria-expanded]=\"overlayVisible$ | async\"\n>\n\t<ng-container *ngIf=\"openerBtnTemplate\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\topenerBtnTemplate;\n\t\t\t\tcontext: { $implicit: overlayVisible$ | async }\n\t\t\t\"\n\t\t></ng-container>\n\t</ng-container>\n</div>\n\n<div\n\t*ngIf=\"overlayVisible$ | async\"\n\tclass=\"select-panel\"\n\t[ngStyle]=\"panelStyle\"\n\t[class]=\"panelStyleClass\"\n>\n\t<ng-container *ngIf=\"searchField\">\n\t\t<ng-container *ngTemplateOutlet=\"searchTermTmpl\"></ng-container>\n\t</ng-container>\n\n\t<ng-container\n\t\t*ngIf=\"\n\t\t\t!!(optionsToDisplay$ | async)?.length;\n\t\t\tthen itemsListDefaultTmpl;\n\t\t\telse noInputOptionsTmpl\n\t\t\"\n\t>\n\t</ng-container>\n\n\t<button\n\t\t*ngIf=\"resetBtn\"\n\t\tclass=\"reset\"\n\t\t(click)=\"reset()\"\n\t>\n\t\t<span>Reset</span>\n\t</button>\n</div>\n\n<ng-template #NoLabelTmpl>\n\t<span\n\t\t[ngClass]=\"{\n\t\t\t'select-label': true,\n\t\t\t'select-label-empty': !!!placeholder?.length\n\t\t}\"\n\t>\n\t\t{{ placeholder || 'empty' }}\n\t</span>\n</ng-template>\n\n<ng-template #selectedItemSelectedTmpl>\n\t<ng-container\n\t\t*ngTemplateOutlet=\"\n\t\t\tselectedItemTemplate;\n\t\t\tcontext: { $implicit: label, selectedOption: selectedOption }\n\t\t\"\n\t>\n\t</ng-container>\n</ng-template>\n\n<ng-template\n\t#defaultSelectIconTmpl\n\tlet-overlayVisible\n>\n\t<span\n\t\tclass=\"select-trigger-icon\"\n\t\t[ngClass]=\"selectIconClass\"\n\t\t[ngClass]=\"{ open: overlayVisible, close: !overlayVisible }\"\n\t>\n\t\t<img\n\t\t\tclass=\"select-trigger__default-img\"\n\t\t\t[src]=\"trigger_icon\"\n\t\t/>\n\t</span>\n</ng-template>\n\n<ng-template #itemsListDefaultTmpl>\n\t<div class=\"select-items-wrapper\">\n\t\t<div class=\"select-items\">\n\t\t\t<ng-container *ngIf=\"optionsToDisplay$ | async as optionsToDisplay\">\n\t\t\t\t<ng-template\n\t\t\t\t\tngFor\n\t\t\t\t\tlet-option\n\t\t\t\t\tlet-i=\"index\"\n\t\t\t\t\t[ngForOf]=\"optionsToDisplay\"\n\t\t\t\t>\n\t\t\t\t\t<ngxd-select-item\n\t\t\t\t\t\t[id]=\"i\"\n\t\t\t\t\t\t[selected]=\"selectedOption === option\"\n\t\t\t\t\t\t[label]=\"getOptionLabel(option)\"\n\t\t\t\t\t\t[disabled]=\"isOptionDisabled(option)\"\n\t\t\t\t\t\t(optionClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t[template]=\"itemTemplate\"\n\t\t\t\t\t\t[itemSize]=\"itemSize\"\n\t\t\t\t\t></ngxd-select-item>\n\t\t\t\t</ng-template>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #noInputOptionsTmpl>\n\t<div class=\"select-items-wrapper\">\n\t\t<div class=\"select-items\">\n\t\t\t<ng-content select=\".simple-items\"></ng-content>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #searchTermTmpl>\n\t<div class=\"search-term__container\">\n\t\t<div class=\"search-term__sub-container\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"search-term\"\n\t\t\t\tplaceholder=\"search for an item ...\"\n\t\t\t\t(click)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t/>\n\t\t\t<svg\n\t\t\t\tclass=\"search-term__icon\"\n\t\t\t\twidth=\"20\"\n\t\t\t\theight=\"20\"\n\t\t\t\tviewBox=\"0 0 20 20\"\n\t\t\t\tfill=\"none\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t>\n\t\t\t\t<path\n\t\t\t\t\td=\"M18.8167 18.0154L12.15 11.8615\"\n\t\t\t\t\tstroke=\"#adc9cebf\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\td=\"M8.33335 13.8461C12.0153 13.8461 15 11.091 15 7.6923C15 4.29362 12.0153 1.53845 8.33335 1.53845C4.65146 1.53845 1.66669 4.29362 1.66669 7.6923C1.66669 11.091 4.65146 13.8461 8.33335 13.8461Z\"\n\t\t\t\t\tstroke=\"#adc9cebf\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: ["/*!\n * @ngx-dummy/select-Simple library\n * Simple select created for angular / ionic projects.\n * https://github.com/ngx-dummy/select-simple\n *\n * Copyright Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under MIT License\n */:root{--color-white: #fff;--ngxd-primary-color: #adc9cebf;--ngxd-secondary-color: #0b2424;--ngxd-primary-color-t50: #00556680;--ngxd-disabled: #8a8a8a80;--ngxd-primary-icon-color: #89a5aa40;--ngxd-primary-color--active: rgba(221, 233, 235, .7490196078);--ngxd-primary-color--opened: rgba(141, 180, 187, .7490196078)}:host,.select{width:max-content;box-sizing:border-box;min-height:2rem;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem;background:var(--ngxd-primary-color);border-radius:3px;border:1px solid var(--color-white);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host:not(.disabled):hover,.select:not(.disabled):hover{border-color:var(--ngxd-secondary-color)}:host:not(.disabled).focus,.select:not(.disabled).focus{outline-offset:0;box-shadow:0 0 0 .1rem var(--ngxd-secondary-color);border-color:var(--ngxd-primary-color)}:host:not(.disabled).wrapper-focus,.select:not(.disabled).wrapper-focus{box-shadow:none;background-color:var(--ngxd-primary-color-t50);border-color:var(--ngxd-secondary-color);background-size:100% 2px,100% 1px}:host.disabled,.select.disabled{cursor:not-allowed!important;pointer-events:none;color:var(--ngxd-disabled)}:host .select-trigger,.select .select-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .select-trigger-icon,.select .select-trigger-icon{display:grid;place-content:center;color:var(--ngxd-primary-color);border-radius:50%;background-color:var(--ngxd-primary-icon-color)}:host .select-trigger-icon.open,.select .select-trigger-icon.open{transform:rotate(180deg);transition:transform .1s ease-out}:host .select-trigger-icon.close,.select .select-trigger-icon.close{transform:rotate(0);transition:transform .1s ease-out}:host .select-trigger__default-img,.select .select-trigger__default-img{max-width:2rem}:host .select-label,.select .select-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}:host .select-label-empty,.select .select-label-empty{overflow:hidden;visibility:hidden}:host .select-panel,.select .select-panel{height:auto;min-width:100%;position:absolute;top:100%;left:0;padding:.5rem;transition:all .3s ease;z-index:1}:host .select-panel .select-items-wrapper,.select .select-panel .select-items-wrapper{overflow:auto;width:100%}:host .select-panel .select-items,.select .select-panel .select-items{margin:0;padding:0;list-style-type:none}:host .select-panel .select-items .select-item,.select .select-panel .select-items .select-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden;margin:.1rem}:host .select-panel .select-items .select-item.item-highlight,.select .select-panel .select-items .select-item.item-highlight{background-color:var(--ngxd-primary-color--opened);color:var(#0b2424)}:host .select-panel .select-items .select-item:hover,.select .select-panel .select-items .select-item:hover{background-color:var(-ngxd-primary-color-t50);color:var(--ngxd-secondary-color)}:host .select-panel .search-term__container,.select .select-panel .search-term__container{padding:.75rem 1.25rem;border:none;border-bottom:1px solid var(--color-white);color:var(--ngxd-secondary-color);background:transparent;margin:0;border-top-right-radius:6px;border-top-left-radius:6px}:host .select-panel .search-term__container .search-term__sub-container,.select .select-panel .search-term__container .search-term__sub-container{position:relative}:host .select-panel .search-term__container .search-term__sub-container .search-term,.select .select-panel .search-term__container .search-term__sub-container .search-term{margin:.1rem;background-color:transparent;font-size:1.2rem;background:transparent;padding:.75rem;border:1px solid #ced4da;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;border-radius:6px;color:var(--ngxd-primary-color)}:host .select-panel .search-term__container .search-term__sub-container .search-term__icon,.select .select-panel .search-term__container .search-term__sub-container .search-term__icon{position:absolute;top:50%;transform:translateY(-50%);right:1rem}:host .select-panel .reset,.select .select-panel .reset{border:none;outline:0;text-decoration:none;font-size:100%;list-style:none;margin-top:.5rem;padding:.4rem 2rem;width:100%;display:grid;place-content:center;border-radius:.2rem;background-color:var(--ngxd-primary-color)}@keyframes fadein{0%{opacity:0}to{opacity:1}}\n"], components: [{ type: i2.SelectItemComponent, selector: "ngxd-select-item", inputs: ["option", "selected", "disabled", "visible", "itemBg", "color", "itemSize", "label", "template"], outputs: ["optionClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ngxd-select', providers: [SELECT_VALUE_ACCESSOR_PROVIDER, NG_VALIDATORS_PROVIDER], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
'[class]': 'styleClass',
'[style]': 'headerStyle',
'[class.wrapper-focus]': 'focused || overlayVisible',
'[class.select]': 'true',
'[class.disabled]': 'disabled',
'[class.focus]': 'focused || overlayVisible',
'[class.select-open]': 'overlayVisible',
'[attr.tabIndex]': 'tabindex',
'[attr.autofocus]': 'autofocus',
'[attr.name]': 'name',
'(blur)': 'onHostBlur($event)',
'(focus)': 'onHostFocus($event)',
'(keydown)': 'onKeydown($event)',
'(click)': 'onMouseclick($event)',
}, template: "<span *ngIf=\"!!label; else NoLabelTmpl\">\n\t<ng-container *ngIf=\"!selectedItemTemplate; else selectedItemSelectedTmpl\">{{\n\t\tlabel\n\t}}</ng-container>\n</span>\n\n<div\n\tclass=\"select-trigger\"\n\trole=\"button\"\n\t[attr.aria-expanded]=\"overlayVisible$ | async\"\n>\n\t<ng-container *ngIf=\"openerBtnTemplate\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\topenerBtnTemplate;\n\t\t\t\tcontext: { $implicit: overlayVisible$ | async }\n\t\t\t\"\n\t\t></ng-container>\n\t</ng-container>\n</div>\n\n<div\n\t*ngIf=\"overlayVisible$ | async\"\n\tclass=\"select-panel\"\n\t[ngStyle]=\"panelStyle\"\n\t[class]=\"panelStyleClass\"\n>\n\t<ng-container *ngIf=\"searchField\">\n\t\t<ng-container *ngTemplateOutlet=\"searchTermTmpl\"></ng-container>\n\t</ng-container>\n\n\t<ng-container\n\t\t*ngIf=\"\n\t\t\t!!(optionsToDisplay$ | async)?.length;\n\t\t\tthen itemsListDefaultTmpl;\n\t\t\telse noInputOptionsTmpl\n\t\t\"\n\t>\n\t</ng-container>\n\n\t<button\n\t\t*ngIf=\"resetBtn\"\n\t\tclass=\"reset\"\n\t\t(click)=\"reset()\"\n\t>\n\t\t<span>Reset</span>\n\t</button>\n</div>\n\n<ng-template #NoLabelTmpl>\n\t<span\n\t\t[ngClass]=\"{\n\t\t\t'select-label': true,\n\t\t\t'select-label-empty': !!!placeholder?.length\n\t\t}\"\n\t>\n\t\t{{ placeholder || 'empty' }}\n\t</span>\n</ng-template>\n\n<ng-template #selectedItemSelectedTmpl>\n\t<ng-container\n\t\t*ngTemplateOutlet=\"\n\t\t\tselectedItemTemplate;\n\t\t\tcontext: { $implicit: label, selectedOption: selectedOption }\n\t\t\"\n\t>\n\t</ng-container>\n</ng-template>\n\n<ng-template\n\t#defaultSelectIconTmpl\n\tlet-overlayVisible\n>\n\t<span\n\t\tclass=\"select-trigger-icon\"\n\t\t[ngClass]=\"selectIconClass\"\n\t\t[ngClass]=\"{ open: overlayVisible, close: !overlayVisible }\"\n\t>\n\t\t<img\n\t\t\tclass=\"select-trigger__default-img\"\n\t\t\t[src]=\"trigger_icon\"\n\t\t/>\n\t</span>\n</ng-template>\n\n<ng-template #itemsListDefaultTmpl>\n\t<div class=\"select-items-wrapper\">\n\t\t<div class=\"select-items\">\n\t\t\t<ng-container *ngIf=\"optionsToDisplay$ | async as optionsToDisplay\">\n\t\t\t\t<ng-template\n\t\t\t\t\tngFor\n\t\t\t\t\tlet-option\n\t\t\t\t\tlet-i=\"index\"\n\t\t\t\t\t[ngForOf]=\"optionsToDisplay\"\n\t\t\t\t>\n\t\t\t\t\t<ngxd-select-item\n\t\t\t\t\t\t[id]=\"i\"\n\t\t\t\t\t\t[selected]=\"selectedOption === option\"\n\t\t\t\t\t\t[label]=\"getOptionLabel(option)\"\n\t\t\t\t\t\t[disabled]=\"isOptionDisabled(option)\"\n\t\t\t\t\t\t(optionClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t[template]=\"itemTemplate\"\n\t\t\t\t\t\t[itemSize]=\"itemSize\"\n\t\t\t\t\t></ngxd-select-item>\n\t\t\t\t</ng-template>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #noInputOptionsTmpl>\n\t<div class=\"select-items-wrapper\">\n\t\t<div class=\"select-items\">\n\t\t\t<ng-content select=\".simple-items\"></ng-content>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #searchTermTmpl>\n\t<div class=\"search-term__container\">\n\t\t<div class=\"search-term__sub-container\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"search-term\"\n\t\t\t\tplaceholder=\"search for an item ...\"\n\t\t\t\t(click)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t/>\n\t\t\t<svg\n\t\t\t\tclass=\"search-term__icon\"\n\t\t\t\twidth=\"20\"\n\t\t\t\theight=\"20\"\n\t\t\t\tviewBox=\"0 0 20 20\"\n\t\t\t\tfill=\"none\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t>\n\t\t\t\t<path\n\t\t\t\t\td=\"M18.8167 18.0154L12.15 11.8615\"\n\t\t\t\t\tstroke=\"#adc9cebf\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\td=\"M8.33335 13.8461C12.0153 13.8461 15 11.091 15 7.6923C15 4.29362 12.0153 1.53845 8.33335 1.53845C4.65146 1.53845 1.66669 4.29362 1.66669 7.6923C1.66669 11.091 4.65146 13.8461 8.33335 13.8461Z\"\n\t\t\t\t\tstroke=\"#adc9cebf\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: ["/*!\n * @ngx-dummy/select-Simple library\n * Simple select created for angular / ionic projects.\n * https://github.com/ngx-dummy/select-simple\n *\n * Copyright Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under MIT License\n */:root{--color-white: #fff;--ngxd-primary-color: #adc9cebf;--ngxd-secondary-color: #0b2424;--ngxd-primary-color-t50: #00556680;--ngxd-disabled: #8a8a8a80;--ngxd-primary-icon-color: #89a5aa40;--ngxd-primary-color--active: rgba(221, 233, 235, .7490196078);--ngxd-primary-color--opened: rgba(141, 180, 187, .7490196078)}:host,.select{width:max-content;box-sizing:border-box;min-height:2rem;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem;background:var(--ngxd-primary-color);border-radius:3px;border:1px solid var(--color-white);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host:not(.disabled):hover,.select:not(.disabled):hover{border-color:var(--ngxd-secondary-color)}:host:not(.disabled).focus,.select:not(.disabled).focus{outline-offset:0;box-shadow:0 0 0 .1rem var(--ngxd-secondary-color);border-color:var(--ngxd-primary-color)}:host:not(.disabled).wrapper-focus,.select:not(.disabled).wrapper-focus{box-shadow:none;background-color:var(--ngxd-primary-color-t50);border-color:var(--ngxd-secondary-color);background-size:100% 2px,100% 1px}:host.disabled,.select.disabled{cursor:not-allowed!important;pointer-events:none;color:var(--ngxd-disabled)}:host .select-trigger,.select .select-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .select-trigger-icon,.select .select-trigger-icon{display:grid;place-content:center;color:var(--ngxd-primary-color);border-radius:50%;background-color:var(--ngxd-primary-icon-color)}:host .select-trigger-icon.open,.select .select-trigger-icon.open{transform:rotate(180deg);transition:transform .1s ease-out}:host .select-trigger-icon.close,.select .select-trigger-icon.close{transform:rotate(0);transition:transform .1s ease-out}:host .select-trigger__default-img,.select .select-trigger__default-img{max-width:2rem}:host .select-label,.select .select-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}:host .select-label-empty,.select .select-label-empty{overflow:hidden;visibility:hidden}:host .select-panel,.select .select-panel{height:auto;min-width:100%;position:absolute;top:100%;left:0;padding:.5rem;transition:all .3s ease;z-index:1}:host .select-panel .select-items-wrapper,.select .select-panel .select-items-wrapper{overflow:auto;width:100%}:host .select-panel .select-items,.select .select-panel .select-items{margin:0;padding:0;list-style-type:none}:host .select-panel .select-items .select-item,.select .select-panel .select-items .select-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden;margin:.1rem}:host .select-panel .select-items .select-item.item-highlight,.select .select-panel .select-items .select-item.item-highlight{background-color:var(--ngxd-primary-color--opened);color:var(#0b2424)}:host .select-panel .select-items .select-item:hover,.select .select-panel .select-items .select-item:hover{background-color:var(-ngxd-primary-color-t50);color:var(--ngxd-secondary-color)}:host .select-panel .search-term__container,.select .select-panel .search-term__container{padding:.75rem 1.25rem;border:none;border-bottom:1px solid var(--color-white);color:var(--ngxd-secondary-color);background:transparent;margin:0;border-top-right-radius:6px;border-top-left-radius:6px}:host .select-panel .search-term__container .search-term__sub-container,.select .select-panel .search-term__container .search-term__sub-container{position:relative}:host .select-panel .search-term__container .search-term__sub-container .search-term,.select .select-panel .search-term__container .search-term__sub-container .search-term{margin:.1rem;background-color:transparent;font-size:1.2rem;background:transparent;padding:.75rem;border:1px solid #ced4da;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;border-radius:6px;color:var(--ngxd-primary-color)}:host .select-panel .search-term__container .search-term__sub-container .search-term__icon,.select .select-panel .search-term__container .search-term__sub-container .search-term__icon{position:absolute;top:50%;transform:translateY(-50%);right:1rem}:host .select-panel .reset,.select .select-panel .reset{border:none;outline:0;text-decoration:none;font-size:100%;list-style:none;margin-top:.5rem;padding:.4rem 2rem;width:100%;display:grid;place-content:center;border-radius:.2rem;background-color:var(--ngxd-primary-color)}@keyframes fadein{0%{opacity:0}to{opacity:1}}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }, { type: i0.NgZone }]; }, propDecorators: { defaultOpenerTemplate: [{
type: ViewChild,
args: ['defaultSelectIconTmpl', { read: TemplateRef, static: true }]
}], itemsListDefaultTmpl: [{
type: ViewChild,
args: ['itemsListDefaultTmpl', { read: TemplateRef, static: true }]
}], projectedItems: [{
type: ContentChildren,
args: [SelectItemComponent, { descendants: true }]
}], templates: [{
type: Input
}], name: [{
type: Input
}], panelStyleClass: [{
type: Input
}], styleClass: [{
type: Input
}], readonly: [{
type: Input
}], required: [{
type: Input
}], resetBtn: [{
type: Input
}], searchField: [{
type: Input
}], autofocus: [{
type: Input
}], placeholder: [{
type: Input
}], optionLabelKey: [{
type: Input
}], selectIconClass: [{
type: Input
}], tabindex: [{
type: Input
}], itemSize: [{
type: Input
}], onChange: [{
type: Output
}], onClick: [{
type: Output
}], onShow: [{
type: Output
}], onHide: [{
type: Output
}], onFocus: [{
type: Output
}], onBlur: [{
type: Output
}], headerStyle: [{
type: Input
}], panelStyle: [{
type: Input
}], options: [{
type: Input
}], disabled: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL3NlbGVjdC1zaW1wbGUvc3JjL2xpYi9zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvc2VsZWN0LXNpbXBsZS9zcmMvbGliL3NlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRU4sdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsZUFBZSxFQUNmLFVBQVUsRUFDVixZQUFZLEVBQ1osVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBRU4sTUFBTSxFQUdOLFNBQVMsRUFFVCxXQUFXLEVBQ1gsU0FBUyxFQUNULGlCQUFpQixHQUVqQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXlDLGFBQWEsRUFBRSxpQkFBaUIsRUFBRSxVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNySCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDekQsT0FBTyxFQUFFLGVBQWUsRUFBRSxTQUFTLEVBQWMsRUFBRSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsNkJBQTZCLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUV4SCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7Ozs7O0FBRWxELE1BQU0sQ0FBQyxNQUFNLDhCQUE4QixHQUFhO0lBQ3ZELE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsV0FBVyxF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