sdk-select
Version:
Simple to use (Angular) select option.
384 lines (378 loc) • 29.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, ViewChild, Output, Input, Component, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { fromEvent } from 'rxjs';
class SDKSelectComponent {
constructor() {
this.labelPosition = "left"; // Text located to the 'left' or 'top' position of dropdown.
this.forceOptionBottom = false; // Forces the dropdown below the value.
this.noValueLabel = "..."; // 'No Value' label.
this.noValueDisabled = true; // Prevent 'No Value' from being selected.
this.multiSelect = false; // Indicates single or multiple selections.
this.multiValues = true; // Show multiple values in the dropdown display or 'n selected' message after 2+ values selected.
this.resetLabel = "[clear]"; // Text to display for 'clearing/resetting' selected options.
this.selectChangeEvent = new EventEmitter(); // Event triggered on selections.
this._options = null;
this.showDropdown = false;
this.adjustedOptionValuesStyle = "";
this.allowClose = false;
this.scrollTop = null;
}
/**************************************************************************
* Component Lifecycle Methods
**************************************************************************/
ngOnInit() {
if (!this.multiSelect && this.selectedOptions !== undefined && this.selectedOptions !== "" && !Array.isArray(this.selectedOptions)) {
let tmp = [];
tmp.push(this.selectedOptions);
this.selectedOptions = tmp;
}
this._options = [];
if (this.options !== undefined) {
this.options.forEach((option) => {
let tmp;
if (typeof option === 'object') {
tmp = { ...option };
}
else {
tmp = option;
}
this._options.push(tmp);
});
}
if (this.selectedOptions !== undefined && Array.isArray(this.selectedOptions)) {
this.selectedOptions.forEach((option) => {
delete option._showGroup;
});
}
setTimeout(() => {
this.setStyle();
}, 1);
}
ngAfterViewInit() {
let dropdown = this.dropdown.nativeElement;
if (dropdown) {
this.mouseEnterSub = fromEvent(dropdown, 'mouseenter').subscribe(() => this.stopClose());
this.mouseLeaveSub = fromEvent(dropdown, 'mouseleave').subscribe(() => this.startClose());
}
}
ngOnDestroy() {
this.mouseEnterSub?.unsubscribe();
this.mouseLeaveSub?.unsubscribe();
}
/**************************************************************************
* Protected Methods
**************************************************************************/
startClose() {
this.allowClose = true;
this.closeTimer = setTimeout(() => {
if (this.allowClose) {
this.allowClose = false;
this.showDropdown = false;
}
}, 500);
}
stopClose() {
clearTimeout(this.closeTimer);
this.allowClose = false;
}
setDropdown() {
if (!this.optionValuesStyle || this.optionValuesStyle === "") {
this.adjustedOptionValuesStyle = "";
}
let top = this.dropdownValue?.nativeElement.getBoundingClientRect().top;
let height = this.dropdownValue?.nativeElement.getBoundingClientRect().height - 1;
if (top <= (window.innerHeight / 2)) {
this.adjustedOptionValuesStyle = `top: ${height}px; left: -0px;` + this.optionValuesStyle;
}
else {
this.adjustedOptionValuesStyle = `bottom: ${height}px; left: -0px;` + this.optionValuesStyle;
}
if (this.forceOptionBottom) {
this.adjustedOptionValuesStyle = `top: ${height}px; left: -0px;` + this.optionValuesStyle;
}
this.showDropdown = !this.showDropdown;
this.scrollTop = null;
if (this.displayGroup && this.displayGroup !== "") {
const grouped = this._options.reduce((acc, item) => {
if (!acc[item[this.displayGroup]]) {
acc[item[this.displayGroup]] = [];
}
acc[item[this.displayGroup]].push(item);
return acc;
}, {});
this._options = Object.keys(grouped)
.sort()
.reduce((acc, group) => {
return acc.concat(grouped[group]);
}, []);
let lastGroup = '';
this._options.forEach((item) => {
if (item[this.displayGroup] !== lastGroup) {
item._showGroup = true;
lastGroup = item[this.displayGroup];
}
else {
item._showGroup = false;
}
});
}
setTimeout(() => {
let singleHeight = this.singleSelect?.nativeElement.scrollHeight / this._options.length;
let multipleSelect = this.multipleSelect?.nativeElement.scrollHeight / (this._options.length + 1.5);
this._options.filter((option) => !option._showGroup).forEach((option, index) => {
if (this.selectedOptions && this.selectedOptions !== "") {
this.selectedOptions.forEach((item) => {
if (JSON.stringify(option) === JSON.stringify(item)) {
if (!this.scrollTop) {
this.scrollTop = index;
if (this.multipleSelect) {
this.scrollTop += 1.5;
}
}
}
});
}
});
if (this.singleSelect) {
this.singleSelect.nativeElement.scrollTop = (this.scrollTop * singleHeight);
}
if (this.multipleSelect) {
this.multipleSelect.nativeElement.scrollTop = (this.scrollTop * multipleSelect);
}
}, 10);
}
selectionBuilder() {
let selection = "";
if (this.multiSelect) {
if (this.multiValues) {
if (this.displayValue && this.displayValue !== "") {
let tmp = [];
this.selectedOptions.forEach((item) => {
tmp.push(this.valueBuilder(item));
});
selection = tmp.join(", ");
}
else {
selection = this.selectedOptions;
}
}
else {
if (this.selectedOptions.length === 1) {
selection = (this.displayValue && this.displayValue !== "") ? this.valueBuilder(this.selectedOptions[0]) : this.selectedOptions[0];
}
else {
selection = this.selectedOptions.length + ' selected';
}
}
}
else {
selection = (this.displayValue && this.displayValue !== "") ? this.valueBuilder(this.selectedOptions[0]) : this.selectedOptions[0];
}
return selection;
}
valueBuilder(option) {
let re = /\[([^\]]+)\]/g;
let x = this.displayValue.match(re);
let value = this.displayValue;
if (x) {
x.forEach((segment) => {
let z = option[segment.replace("[", "").replace("]", "")];
value = value.replaceAll(segment, z);
});
}
else {
value = option[value];
}
return value;
}
titleBuilder() {
let title = "";
let tmp = [];
if (this.selectedOptions && this.selectedOptions.length > 0) {
this.selectedOptions.forEach((item) => {
if (this.displayValue && this.displayValue !== "") {
tmp.push(this.valueBuilder(item));
}
else {
tmp.push(item);
}
});
title = `Selected value(s):\n${tmp.join("\n")}`;
}
return title;
}
isSelected(option) {
let tmpOption;
if (typeof option === 'object') {
tmpOption = { ...option };
}
else {
tmpOption = option;
}
delete tmpOption._showGroup;
let ndx = (this.selectedOptions && this.selectedOptions !== "") ? this.selectedOptions?.findIndex((item) => JSON.stringify(item) === JSON.stringify(tmpOption)) : -1;
return (ndx > -1) ? true : false;
}
selectItem(option) {
let tmpOption;
if (typeof option === 'object') {
tmpOption = { ...option };
}
else {
tmpOption = option;
}
delete tmpOption._showGroup;
let ndx = (this.selectedOptions && this.selectedOptions !== "") ? this.selectedOptions?.findIndex((item) => JSON.stringify(item) === JSON.stringify(tmpOption)) : -1;
if (ndx > -1) {
if (this.multiSelect || !this.noValueDisabled) {
this.selectedOptions.splice(ndx, 1);
}
}
else {
if (!this.multiSelect || !this.selectedOptions) {
this.selectedOptions = [];
}
this.selectedOptions.push(tmpOption);
}
if (!this.multiSelect && this.noValueDisabled) {
this.showDropdown = false;
}
if (this.selectedOptions !== undefined && Array.isArray(this.selectedOptions)) {
this.selectedOptions.forEach((option) => {
delete option._showGroup;
});
}
this.selectChangeEvent.emit(this.selectedOptions);
}
groupSelections(group) {
let tmpOptions = this._options.filter((option) => option[this.displayGroup] === group);
let isSelections = this.selectedOptions.filter((option) => option[this.displayGroup] === group);
if (isSelections.length === tmpOptions.length) {
this.selectedOptions = this.selectedOptions.filter((option) => option[this.displayGroup] !== group);
}
else {
this.selectedOptions = this.selectedOptions.filter((option) => option[this.displayGroup] !== group);
tmpOptions.forEach((option) => {
let tmpOption = { ...option };
delete tmpOption._showGroup;
this.selectedOptions.push(tmpOption);
});
}
this.selectChangeEvent.emit(this.selectedOptions);
}
clearSelections() {
this.selectedOptions = [];
this.selectChangeEvent.emit(this.selectedOptions);
}
allSelections() {
this.selectedOptions = [];
this._options.forEach((option) => {
let tmpOption;
if (typeof option === 'object') {
tmpOption = { ...option };
}
else {
tmpOption = option;
}
delete tmpOption._showGroup;
this.selectedOptions.push(tmpOption);
});
this.selectChangeEvent.emit(this.selectedOptions);
}
/**************************************************************************
* Protected Methods
**************************************************************************/
setStyle() {
let element = this.dropdown?.nativeElement;
if (element) {
element.style.setProperty("--hover-color", this.hoverColor);
element.style.setProperty("--selected-color", this.selectedColor);
element.style.setProperty("--selected-background", this.selectedBackground);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKSelectComponent, isStandalone: true, selector: "sdk-select", inputs: { label: "label", labelPosition: "labelPosition", labelStyle: "labelStyle", options: "options", optionStyle: "optionStyle", optionValuesStyle: "optionValuesStyle", forceOptionBottom: "forceOptionBottom", noValueLabel: "noValueLabel", noValueDisabled: "noValueDisabled", displayValue: "displayValue", displayGroup: "displayGroup", multiSelect: "multiSelect", multiValues: "multiValues", selectedOptions: "selectedOptions", resetLabel: "resetLabel", hoverColor: "hoverColor", selectedColor: "selectedColor", selectedBackground: "selectedBackground" }, outputs: { selectChangeEvent: "selectChangeEvent" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownValue", first: true, predicate: ["dropdownValue"], descendants: true }, { propertyName: "singleSelect", first: true, predicate: ["singleSelect"], descendants: true }, { propertyName: "multipleSelect", first: true, predicate: ["multipleSelect"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"sdk-select\" [ngStyle]=\"{ display: (labelPosition === 'top') ? 'unset' : 'flex' }\">\n <div *ngIf=\"label\" class=\"label\" [style]=\"labelStyle\">{{ label }}</div>\n\n <!-- Single Selection -->\n <div *ngIf=\"!multiSelect\" class=\"box\" [style]=\"optionStyle\">\n <div class=\"selectbox\" [title]=\"titleBuilder()\">\n <div #dropdownValue class=\"dropdown\" (click)=\"setDropdown()\">\n <div class=\"value\" *ngIf=\"!selectedOptions || selectedOptions.length === 0\">{{ noValueLabel }}</div>\n <div class=\"value\" *ngIf=\"selectedOptions && selectedOptions.length > 0\">{{ (displayValue) ? selectionBuilder() : selectedOptions }}</div>\n <div class=\"sdk-icon\">expand_more</div>\n </div>\n <div #singleSelect class=\"values\" *ngIf=\"showDropdown\" [style]=\"adjustedOptionValuesStyle\">\n <label *ngFor=\"let option of _options\" [ngClass]=\"{ selected : isSelected(option) }\" [title]=\"(displayValue) ? valueBuilder(option) : option\">\n <div *ngIf=\"option._showGroup\" class=\"group-label\">{{ option.group }}</div>\n <div class=\"value\" (click)=\"selectItem(option)\">\n <div class=\"value-text\">{{ (displayValue) ? valueBuilder(option) : option }}</div>\n <div *ngIf=\"!noValueDisabled && isSelected(option)\" class=\"sdk-icon right\">check</div>\n </div>\n </label>\n </div>\n </div>\n </div>\n\n <!-- Multi Selection -->\n <div *ngIf=\"multiSelect\" class=\"box\" [style]=\"optionStyle\">\n <div class=\"selectbox\" [title]=\"titleBuilder()\">\n <div #dropdownValue class=\"dropdown\" (click)=\"setDropdown()\">\n <div class=\"value\" *ngIf=\"!selectedOptions || selectedOptions.length === 0\">{{ noValueLabel }}</div>\n <div class=\"value\" *ngIf=\"selectedOptions && selectedOptions.length > 0\">{{ selectionBuilder() }}</div>\n <div class=\"sdk-icon\">expand_more</div>\n </div>\n <div #multipleSelect class=\"values\" *ngIf=\"showDropdown\" [style]=\"adjustedOptionValuesStyle\">\n <label class=\"value-clear-all\" (click)=\"clearSelections()\">{{ resetLabel }}</label>\n <label class=\"value-clear-all\" (click)=\"allSelections()\">[all]</label>\n <label *ngFor=\"let option of _options\"[ngClass]=\"{ selected : isSelected(option) }\" [title]=\"(displayValue) ? valueBuilder(option) : option\">\n <div *ngIf=\"option._showGroup\" class=\"group-label click\" (click)=\"groupSelections(option.group)\">{{ option.group }}</div>\n <div class=\"sdk-icon left\" (click)=\"selectItem(option)\" >{{ isSelected(option) ? 'check_box' : 'check_box_outline_blank' }}</div>\n <div class=\"value adjust\" (click)=\"selectItem(option)\" >\n <div class=\"value-text\">{{ (displayValue) ? valueBuilder(option) : option }}</div>\n </div>\n </label>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sdk-select{position:relative;display:flex;flex-direction:row;align-items:center;min-height:32px;min-width:50px;max-width:100%;margin:0;padding:0;font-family:inherit;font-size:inherit}.sdk-select .label{margin-right:10px}.sdk-select .box{position:relative;background-color:#fff;border:1px solid #BABABA;width:100%;min-height:inherit;min-width:inherit;max-width:inherit;margin:0;padding:0;font-family:inherit;font-size:inherit}.sdk-select .box .selectbox{position:relative;height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-width:inherit;margin:0;padding:0;font-family:inherit;font-size:inherit}.sdk-select .box .selectbox *{cursor:pointer}.sdk-select .box .selectbox .dropdown{position:relative;background-color:transparent;border:none;height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-width:inherit;margin:0;padding:0;font-family:inherit;font-size:inherit;text-align:left}.sdk-select .box .selectbox .dropdown .value{position:absolute;inset:40% 25px 0 5px;display:block;margin:0;padding:0;transform:translateY(-30%);font-family:inherit;font-size:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sdk-select .box .selectbox .dropdown .sdk-icon{position:absolute;top:50%;right:0;bottom:0;display:flex;flex-direction:row;align-items:center;width:25px;min-width:25px;max-width:25px;transform:translateY(-50%)}.sdk-select .box .selectbox .values{position:absolute;left:0;right:0;width:inherit;min-width:inherit;max-width:inherit;z-index:1;background-color:#fff;border:1px solid #BABABA;font-family:inherit;font-size:inherit;overflow:auto}.sdk-select .box .selectbox .values *{cursor:pointer}.sdk-select .box .selectbox .values .group-label{font-style:italic;color:var(--gray);cursor:default}.sdk-select .box .selectbox .values .group-label.click{cursor:pointer}.sdk-select .box .selectbox .values .value-clear-all{font-family:inherit;font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--selected-color, rgb(25, 100, 141))}.sdk-select .box .selectbox .values label{padding:5px 10px 5px 5px;display:block;min-width:inherit;max-width:inherit;white-space:nowrap;font-family:inherit;font-size:inherit}.sdk-select .box .selectbox .values label .sdk-icon{display:inline-flex;vertical-align:middle;font-size:1.3em}.sdk-select .box .selectbox .values label .sdk-icon.left{margin:0 10px 0 0;padding:0}.sdk-select .box .selectbox .values label .sdk-icon.right{font-size:.9em;padding:0;margin:0 0 0 10px}.sdk-select .box .selectbox .values label .value{position:relative;display:inline-flex;vertical-align:middle;font-family:inherit;font-size:inherit;width:inherit;min-width:inherit;max-width:inherit}.sdk-select .box .selectbox .values label .value.adjust{width:calc(100% - 25px)}.sdk-select .box .selectbox .values label .value .value-text{font-family:inherit;font-size:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sdk-select .box .selectbox .values label.selected{color:var(--selected-color, rgb(25, 100, 141));background-color:var(--selected-background, rgb(225, 245, 255))}.sdk-select .box .selectbox .values label:hover{background-color:var(--hover-color, rgb(240, 240, 240))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-select', standalone: true, imports: [CommonModule], template: "<div #dropdown class=\"sdk-select\" [ngStyle]=\"{ display: (labelPosition === 'top') ? 'unset' : 'flex' }\">\n <div *ngIf=\"label\" class=\"label\" [style]=\"labelStyle\">{{ label }}</div>\n\n <!-- Single Selection -->\n <div *ngIf=\"!multiSelect\" class=\"box\" [style]=\"optionStyle\">\n <div class=\"selectbox\" [title]=\"titleBuilder()\">\n <div #dropdownValue class=\"dropdown\" (click)=\"setDropdown()\">\n <div class=\"value\" *ngIf=\"!selectedOptions || selectedOptions.length === 0\">{{ noValueLabel }}</div>\n <div class=\"value\" *ngIf=\"selectedOptions && selectedOptions.length > 0\">{{ (displayValue) ? selectionBuilder() : selectedOptions }}</div>\n <div class=\"sdk-icon\">expand_more</div>\n </div>\n <div #singleSelect class=\"values\" *ngIf=\"showDropdown\" [style]=\"adjustedOptionValuesStyle\">\n <label *ngFor=\"let option of _options\" [ngClass]=\"{ selected : isSelected(option) }\" [title]=\"(displayValue) ? valueBuilder(option) : option\">\n <div *ngIf=\"option._showGroup\" class=\"group-label\">{{ option.group }}</div>\n <div class=\"value\" (click)=\"selectItem(option)\">\n <div class=\"value-text\">{{ (displayValue) ? valueBuilder(option) : option }}</div>\n <div *ngIf=\"!noValueDisabled && isSelected(option)\" class=\"sdk-icon right\">check</div>\n </div>\n </label>\n </div>\n </div>\n </div>\n\n <!-- Multi Selection -->\n <div *ngIf=\"multiSelect\" class=\"box\" [style]=\"optionStyle\">\n <div class=\"selectbox\" [title]=\"titleBuilder()\">\n <div #dropdownValue class=\"dropdown\" (click)=\"setDropdown()\">\n <div class=\"value\" *ngIf=\"!selectedOptions || selectedOptions.length === 0\">{{ noValueLabel }}</div>\n <div class=\"value\" *ngIf=\"selectedOptions && selectedOptions.length > 0\">{{ selectionBuilder() }}</div>\n <div class=\"sdk-icon\">expand_more</div>\n </div>\n <div #multipleSelect class=\"values\" *ngIf=\"showDropdown\" [style]=\"adjustedOptionValuesStyle\">\n <label class=\"value-clear-all\" (click)=\"clearSelections()\">{{ resetLabel }}</label>\n <label class=\"value-clear-all\" (click)=\"allSelections()\">[all]</label>\n <label *ngFor=\"let option of _options\"[ngClass]=\"{ selected : isSelected(option) }\" [title]=\"(displayValue) ? valueBuilder(option) : option\">\n <div *ngIf=\"option._showGroup\" class=\"group-label click\" (click)=\"groupSelections(option.group)\">{{ option.group }}</div>\n <div class=\"sdk-icon left\" (click)=\"selectItem(option)\" >{{ isSelected(option) ? 'check_box' : 'check_box_outline_blank' }}</div>\n <div class=\"value adjust\" (click)=\"selectItem(option)\" >\n <div class=\"value-text\">{{ (displayValue) ? valueBuilder(option) : option }}</div>\n </div>\n </label>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sdk-select{position:relative;display:flex;flex-direction:row;align-items:center;min-height:32px;min-width:50px;max-width:100%;margin:0;padding:0;font-family:inherit;font-size:inherit}.sdk-select .label{margin-right:10px}.sdk-select .box{position:relative;background-color:#fff;border:1px solid #BABABA;width:100%;min-height:inherit;min-width:inherit;max-width:inherit;margin:0;padding:0;font-family:inherit;font-size:inherit}.sdk-select .box .selectbox{position:relative;height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-width:inherit;margin:0;padding:0;font-family:inherit;font-size:inherit}.sdk-select .box .selectbox *{cursor:pointer}.sdk-select .box .selectbox .dropdown{position:relative;background-color:transparent;border:none;height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-width:inherit;margin:0;padding:0;font-family:inherit;font-size:inherit;text-align:left}.sdk-select .box .selectbox .dropdown .value{position:absolute;inset:40% 25px 0 5px;display:block;margin:0;padding:0;transform:translateY(-30%);font-family:inherit;font-size:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sdk-select .box .selectbox .dropdown .sdk-icon{position:absolute;top:50%;right:0;bottom:0;display:flex;flex-direction:row;align-items:center;width:25px;min-width:25px;max-width:25px;transform:translateY(-50%)}.sdk-select .box .selectbox .values{position:absolute;left:0;right:0;width:inherit;min-width:inherit;max-width:inherit;z-index:1;background-color:#fff;border:1px solid #BABABA;font-family:inherit;font-size:inherit;overflow:auto}.sdk-select .box .selectbox .values *{cursor:pointer}.sdk-select .box .selectbox .values .group-label{font-style:italic;color:var(--gray);cursor:default}.sdk-select .box .selectbox .values .group-label.click{cursor:pointer}.sdk-select .box .selectbox .values .value-clear-all{font-family:inherit;font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--selected-color, rgb(25, 100, 141))}.sdk-select .box .selectbox .values label{padding:5px 10px 5px 5px;display:block;min-width:inherit;max-width:inherit;white-space:nowrap;font-family:inherit;font-size:inherit}.sdk-select .box .selectbox .values label .sdk-icon{display:inline-flex;vertical-align:middle;font-size:1.3em}.sdk-select .box .selectbox .values label .sdk-icon.left{margin:0 10px 0 0;padding:0}.sdk-select .box .selectbox .values label .sdk-icon.right{font-size:.9em;padding:0;margin:0 0 0 10px}.sdk-select .box .selectbox .values label .value{position:relative;display:inline-flex;vertical-align:middle;font-family:inherit;font-size:inherit;width:inherit;min-width:inherit;max-width:inherit}.sdk-select .box .selectbox .values label .value.adjust{width:calc(100% - 25px)}.sdk-select .box .selectbox .values label .value .value-text{font-family:inherit;font-size:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sdk-select .box .selectbox .values label.selected{color:var(--selected-color, rgb(25, 100, 141));background-color:var(--selected-background, rgb(225, 245, 255))}.sdk-select .box .selectbox .values label:hover{background-color:var(--hover-color, rgb(240, 240, 240))}\n"] }]
}], propDecorators: { label: [{
type: Input
}], labelPosition: [{
type: Input
}], labelStyle: [{
type: Input
}], options: [{
type: Input
}], optionStyle: [{
type: Input
}], optionValuesStyle: [{
type: Input
}], forceOptionBottom: [{
type: Input
}], noValueLabel: [{
type: Input
}], noValueDisabled: [{
type: Input
}], displayValue: [{
type: Input
}], displayGroup: [{
type: Input
}], multiSelect: [{
type: Input
}], multiValues: [{
type: Input
}], selectedOptions: [{
type: Input
}], resetLabel: [{
type: Input
}], hoverColor: [{
type: Input
}], selectedColor: [{
type: Input
}], selectedBackground: [{
type: Input
}], selectChangeEvent: [{
type: Output
}], dropdown: [{
type: ViewChild,
args: ["dropdown"]
}], dropdownValue: [{
type: ViewChild,
args: ["dropdownValue"]
}], singleSelect: [{
type: ViewChild,
args: ["singleSelect"]
}], multipleSelect: [{
type: ViewChild,
args: ["multipleSelect"]
}] } });
class SDKSelectModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SDKSelectModule, imports: [SDKSelectComponent], exports: [SDKSelectComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKSelectModule, imports: [SDKSelectComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKSelectModule, decorators: [{
type: NgModule,
args: [{
imports: [
SDKSelectComponent,
],
exports: [
SDKSelectComponent,
],
schemas: [
NO_ERRORS_SCHEMA,
]
}]
}] });
/*
* Public API Surface of sdk-loading
*/
/**
* Generated bundle index. Do not edit.
*/
export { SDKSelectComponent, SDKSelectModule };
//# sourceMappingURL=sdk-select.mjs.map