@ngx-dummy/select-simple
Version:
A simple select component to use in Angular / Ionic projects .. (WIP) and sample app using it
754 lines • 51.9 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, SecurityContext, forwardRef, TemplateRef, ViewEncapsulation, ViewChild, ContentChildren, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormsModule } from '@angular/forms';
import { BehaviorSubject, fromEvent, of } from 'rxjs';
import { shareReplay, switchMap, takeUntil, debounceTime } from 'rxjs/operators';
import * as i1 from '@angular/platform-browser';
/* eslint-disable @angular-eslint/no-host-metadata-property */
class SelectItemComponent {
constructor() {
this.option = undefined;
this.selected = false;
this.disabled = false;
this.visible = true;
this.itemBg = 'transparent';
this.color = '#ddd';
this.itemSize = 25;
this.label = null;
this.optionClick = new EventEmitter();
this.height = '100%';
this.visibility = 'hidden';
this.caption = 'Empty';
}
ngOnChanges(changes) {
Object.entries(changes).forEach(([changeKey, changeVal]) => {
var _a, _b;
if (changeVal.currentValue === changeVal.previousValue)
return;
if (changeKey === 'itemSize') {
this.height = (_a = (typeof this.itemSize === 'number' ? `${this.itemSize}px` : this.itemSize)) !== null && _a !== void 0 ? _a : '100%';
}
if (changeKey === 'visible') {
this.visibility = this.visible ? 'visible' : 'hidden';
}
if (changeKey === 'option' || changeKey === 'label') {
this.caption = ((_b = this.label) === null || _b === void 0 ? void 0 : _b.trim().length) ? this.label : 'Empty';
}
});
}
onOptionClick($event) {
var _a;
this.optionClick.emit({
baseEvent: $event,
option: (_a = this.option) !== null && _a !== void 0 ? _a : (this.label || 'Nothing selected'),
});
}
}
SelectItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SelectItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SelectItemComponent, selector: "ngxd-select-item", inputs: { option: "option", selected: "selected", disabled: "disabled", visible: "visible", itemBg: "itemBg", color: "color", itemSize: "itemSize", label: "label", template: "template" }, outputs: { optionClick: "optionClick" }, host: { listeners: { "click": "onOptionClick($event)" }, properties: { "attr.role": "\"option\"", "attr.disabled": "disabled", "ngStyle": "{ \"height\": \"height\", \"visibility\": \"visibility\", \"background-color\": \"itemBg\", \"color\": \"color\" }", "class.select-item": "true", "class.item-highlight": "selected", "class.item-disabled": "disabled", "ngClass": "option?.styleClass" } }, usesOnChanges: true, ngImport: i0, template: `
<ng-container *ngIf="template; else simpleItemTmpl">
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
</ng-container>
<ng-template #simpleItemTmpl>{{ caption }}</ng-template>
`, isInline: true, styles: [":host{display:block;padding:.1rem;.item-disabled {cursor: not-allowed !important; pointer-events: none; color: var(--ngxd-disabled); -webkit-user-select: none; user-select: none;} .item-highlight:not(.item-disabled) {-webkit-user-select: none; user-select: none; cursor: pointer; pointer-events: all;}}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectItemComponent, decorators: [{
type: Component,
args: [{
selector: 'ngxd-select-item',
styles: [
`
:host {
display: block;
padding: 0.1rem;
.item-disabled {
cursor: not-allowed !important;
pointer-events: none;
color: var(--ngxd-disabled);
user-select: none;
}
.item-highlight:not(.item-disabled) {
user-select: none;
cursor: pointer;
pointer-events: all;
}
}
`,
],
template: `
<ng-container *ngIf="template; else simpleItemTmpl">
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
</ng-container>
<ng-template #simpleItemTmpl>{{ caption }}</ng-template>
`,
host: {
'[attr.role]': '"option"',
'[attr.disabled]': 'disabled',
'[ngStyle]': '{ "height": "height", "visibility": "visibility", "background-color": "itemBg", "color": "color" }',
'[class.select-item]': 'true',
'[class.item-highlight]': 'selected',
'[class.item-disabled]': 'disabled',
'[ngClass]': 'option?.styleClass',
'(click)': 'onOptionClick($event)',
},
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { option: [{
type: Input
}], selected: [{
type: Input
}], disabled: [{
type: Input
}], visible: [{
type: Input
}], itemBg: [{
type: Input
}], color: [{
type: Input
}], itemSize: [{
type: Input
}], label: [{
type: Input
}], template: [{
type: Input
}], optionClick: [{
type: Output
}] } });
/*!
* @ngx-dummy/select-Simple library
* Simple select created for angular / ionic projects.
* https://github.com/ngx-dummy/select-simple
*
* Copyright Vladimir Ovsyukov <ovsyukov@yandex.com>
* Published under MIT License
*/
const imgBase64ToBlob = (Base64Image, imageType = 'image/png') => {
const parts = Base64Image.split(';base64,');
const decodedData = window.atob(parts[1]);
const uInt8Array = new Uint8Array(decodedData.length);
for (let i = 0; i < decodedData.length; ++i) {
uInt8Array[i] = decodedData.charCodeAt(i);
}
return new Blob([uInt8Array], { type: imageType });
};
const svgToBase64src = (rawSvg) => 'data:image/svg+xml;base64,' + btoa(rawSvg);
const prepRes = (item, sanitizer) => sanitizer.bypassSecurityTrustResourceUrl(item);
const sanitizeHTML = (item, sanitizer) => sanitizer.sanitize(SecurityContext.HTML, item);
const getSvgSafeRes = (file, sanitizer) => prepRes(svgToBase64src(file), sanitizer);
const getPngSafeRes = (file, sanitizer) => prepRes(URL.createObjectURL(imgBase64ToBlob(file)), sanitizer);
const blobToSafeRes = (blob, sanitizer) => prepRes(URL.createObjectURL(blob), sanitizer);
/**
*
* @param data - option value (could be simple string or complex object to resolve)
* @param field - the key (or complex lookup object key) of data object to resolve value by
* @returns resolved single option value (Input for SelectItem)
*/
const resolveFieldData = (data, field) => {
if (isEmpty(data))
return null;
if (isString(data))
return data;
if (isSelectItem(data)) {
if (data['label'])
return data['label'];
if (data['value'])
data = data['value'];
}
if (field) {
if (isString(field) && field.indexOf('.') === -1) {
return data[field];
}
else if (isString(field)) {
const fields = field.split('.');
let value = data;
for (let i = 0, len = fields.length; i < len; ++i) {
if (value == null) {
return null;
}
value = value[fields[i]];
}
return resolveFieldData(value);
}
}
else {
return resolveFieldData(Object.values(data)[0]);
}
return null;
};
const isValue = (obj) => obj !== undefined && obj !== null;
const isEmpty = (obj) => !isValue(obj);
const isString = (obj) => typeof obj === 'string';
const isObject = (obj) => typeof obj !== 'string' && !Array.isArray(obj) && typeof obj === 'object';
const isSelectItem = (obj) => (isObject(obj) && !!obj.value) || !!obj.label;
const areEqual = (obj1, obj2, field) => {
if (isEmpty(obj1) || isEmpty(obj2))
return false;
if (isString(obj1) && isString(obj2))
return obj1 === obj2;
if (field)
return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
return JSON.stringify(obj1) === JSON.stringify(obj2);
};
var OptionKeyboardEventHandleKeys;
(function (OptionKeyboardEventHandleKeys) {
OptionKeyboardEventHandleKeys["ArrowDown"] = "ArrowDown";
OptionKeyboardEventHandleKeys["Down"] = "Down";
OptionKeyboardEventHandleKeys["ArrowUp"] = "ArrowUp";
OptionKeyboardEventHandleKeys["Enter"] = "Enter";
OptionKeyboardEventHandleKeys["Escape"] = "Escape";
OptionKeyboardEventHandleKeys["Esc"] = "Esc";
OptionKeyboardEventHandleKeys["Up"] = "Up";
OptionKeyboardEventHandleKeys["Tab"] = "Tab";
OptionKeyboardEventHandleKeys["Space"] = " ";
})(OptionKeyboardEventHandleKeys || (OptionKeyboardEventHandleKeys = {}));
/*!
* @ngx-dummy/select-Simple library
* Simple select created for angular / ionic projects.
* https://github.com/ngx-dummy/select-simple
*
* Copyright Vladimir Ovsyukov <ovsyukov@yandex.com>
* Published under MIT License
*/
const arrow_down = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#454" width="48px" height="48px"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>';
const SELECT_VALUE_ACCESSOR_PROVIDER = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true,
};
const NG_VALIDATORS_PROVIDER = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => SelectComponent),
multi: true,
};
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 = Object.assign(Object.assign({}, this._headerStyle), headStyleObj);
}
}
get headerStyle() {
return this._headerStyle;
}
set panelStyle(stylesObj) {
if (!!stylesObj && !!Object.keys(stylesObj).length) {
this._panelStyle = Object.assign(Object.assign({}, 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() {
var _a, _b, _c, _d;
this.openerBtnTemplate = ((_a = this.templates) === null || _a === void 0 ? void 0 : _a.openerBtnTemplate) ? this.templates.openerBtnTemplate : this.defaultOpenerTemplate;
this.itemsListDefaultTmpl = ((_b = this.templates) === null || _b === void 0 ? void 0 : _b.itemslistTemplate) ? this.templates.itemslistTemplate : this.itemsListDefaultTmpl;
if ((_c = this.templates) === null || _c === void 0 ? void 0 : _c.selectedItemTemplate) {
this.selectedItemTemplate = this.templates.selectedItemTemplate;
}
(_d = this.projectedItems) === null || _d === void 0 ? void 0 : _d.forEach((itemCmp) => {
itemCmp.optionClick.subscribe((e) => this.onItemClick(e));
});
fromEvent(document, 'click')
.pipe(switchMap((ev) => {
var _a, _b;
const iconContainer = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.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() {
var _a, _b;
return this.selectedOption
? this.getOptionLabel(this.selectedOption)
: ((_a = this.placeholder) === null || _a === void 0 ? void 0 : _a.length)
? this.placeholder
: ((_b = this.options) === null || _b === void 0 ? void 0 : _b.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 === null || option === void 0 ? void 0 : 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() {
var _a;
// this.selectedOption = this.findOption(val, this.optionsToDisplay);
if (!this.placeholder && !this.selectedOption && ((_a = this._optionsToDisplay$$.value) === null || _a === void 0 ? void 0 : _a.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() {
var _a;
this._overlayVisible$$.next(true);
this.onShow.emit(true);
if (!this.searchField || !((_a = this._optionsToDisplay$$.value) === null || _a === void 0 ? void 0 : _a.length))
return;
setTimeout(() => {
var _a;
const searchFieldInputEl = (_a = this.el.nativeElement) === null || _a === void 0 ? void 0 : _a.querySelector('.search-term__container .search-term');
if (!searchFieldInputEl)
return;
searchFieldInputEl === null || searchFieldInputEl === void 0 ? void 0 : searchFieldInputEl.focus();
fromEvent(searchFieldInputEl, 'input')
.pipe(takeUntil(this.onHide), debounceTime(200), switchMap(($event) => of($event.target.value)))
.subscribe((searchTerm) => {
var _a;
return this._optionsToDisplay$$.next(searchTerm.length
? (_a = this._options) === null || _a === void 0 ? void 0 : _a.filter((opt) => {
const optionValue = this.getOptionValue(opt);
const found = !!(optionValue === null || optionValue === void 0 ? void 0 : 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) {
var _a;
if (this.isOutsideClicked($event)) {
console.log('Clicked outside of the component ...');
return;
}
if (this.readonly || !((_a = this._optionsToDisplay$$.value) === null || _a === void 0 ? void 0 : _a.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 === null || val === void 0 ? void 0 : val.trim().length))
return -1;
if (!(opts === null || opts === void 0 ? void 0 : 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) {
var _a, _b, _c;
let prevEnabledOption;
if ((_a = this._optionsToDisplay$$.value) === null || _a === void 0 ? void 0 : _a.length) {
for (let i = index - 1; 0 <= i; i--) {
const option = this._optionsToDisplay$$.value[i];
if (option === null || option === void 0 ? void 0 : option.disabled) {
continue;
}
else {
prevEnabledOption = option;
break;
}
}
if (!prevEnabledOption) {
for (let i = ((_b = this._optionsToDisplay$$.value) === null || _b === void 0 ? void 0 : _b.length) - 1; i >= index; i--) {
const option = (_c = this._optionsToDisplay$$.value) === null || _c === void 0 ? void 0 : _c[i];
if (this.isOptionDisabled(option)) {
continue;
}
else {
prevEnabledOption = option;
break;
}
}
}
}
return prevEnabledOption;
}
findNextEnabledOption(index) {
var _a, _b, _c, _d;
let nextEnabledOption;
if ((_a = this._optionsToDisplay$$.value) === null || _a === void 0 ? void 0 : _a.length) {
for (let i = index + 1; i < ((_b = this._optionsToDisplay$$.value) === null || _b === void 0 ? void 0 : _b.length); i++) {
const option = (_c = this._optionsToDisplay$$.value) === null || _c === void 0 ? void 0 : _c[i];
if (this.isOptionDisabled(option)) {
continue;
}
else {
nextEnabledOption = option;
break;
}
}
if (!nextEnabledOption) {
for (let i = 0; i < index; i++) {
const option = (_d = this._optionsToDisplay$$.value) === null || _d === void 0 ? void 0 : _d[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: 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
}] } });
class SelectSimpleModule {
}
SelectSimpleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectSimpleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SelectSimpleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectSimpleModule, declarations: [SelectComponent, SelectItemComponent], imports: [CommonModule, FormsModule], exports: [SelectComponent, SelectItemComponent] });
SelectSimpleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectSimpleModule, imports: [[CommonModule, FormsModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectSimpleModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule],
declarations: [SelectComponent, SelectItemComponent],
exports: [SelectComponent, SelectItemComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SelectComponent, SelectItemComponent, SelectSimpleModule };
//# sourceMappingURL=ngx-dummy-select-simple.mjs.map