novo-elements
Version:
657 lines (652 loc) • 36.1 kB
JavaScript
import * as i0 from '@angular/core';
import { forwardRef, EventEmitter, Input, Output, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { ReplaySubject } from 'rxjs';
import * as i1 from 'novo-elements/services';
import { Helpers } from 'novo-elements/utils';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'novo-elements/elements/picker';
import { NovoPickerModule } from 'novo-elements/elements/picker';
import * as i4 from 'novo-elements/elements/chips';
import { NovoChipsModule } from 'novo-elements/elements/chips';
// NG2
// Value accessor for the component (supports ngModel)
const CHIPS_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NovoMultiPickerElement),
multi: true,
};
class NovoMultiPickerElement {
get value() {
return this._value;
}
set value(selectedItems) {
if (selectedItems) {
this.types.forEach((x) => (this._value[x.value] = selectedItems[x.value]));
}
else {
this._value = {};
this.types.forEach((x) => (this._value[x.value] = []));
}
this.changed.emit(selectedItems);
this.onModelChange(selectedItems);
}
constructor(element, labels) {
this.element = element;
this.labels = labels;
this.placeholder = '';
this.changed = new EventEmitter();
this.focus = new EventEmitter();
this.blur = new EventEmitter();
this.items = [];
this._items = new ReplaySubject(1);
this.selected = null;
this.config = {};
// private data model
this._value = {};
this.notShown = {};
this.onModelChange = () => { };
this.onModelTouched = () => { };
this.chipsCount = 4;
}
ngOnInit() {
this.selectAllOption = this.source.selectAllOption || false;
this.chipsCount = this.source.chipsCount || 4;
this.strictRelationship = this.source.strictRelationship || false;
this.setupOptions();
}
clearValue() {
this.types.forEach((type) => this.modifyAllOfType(type.value, 'unselect'));
this.items = [];
this._items.next(this.items);
this.setInitialValue(null);
this.onModelChange(this.value);
}
removeFromDisplay(event, item) {
this.remove(true, item);
this.modifyAffectedParentsOrChildren(false, item);
}
setupOptions() {
this.options = this.source.options || [];
this._options = [];
if (this.options) {
this.options.forEach((option) => {
const formattedOption = this.setupOptionsByType(option);
this._options.push(formattedOption);
});
}
this.source.options = this._options;
}
setupOptionsByType(section) {
const formattedSection = {
type: section.type,
label: section.label || section.type,
};
formattedSection.data = section.data.map((item) => {
return this.formatOption(section, item);
});
if (this.selectAllOption) {
const selectAll = this.createSelectAllOption(section);
formattedSection.data.splice(0, 0, selectAll);
}
formattedSection.originalData = formattedSection.data.slice();
return formattedSection;
}
formatOption(section, item) {
const obj = {
value: section.field ? item[section.field] : item.value || item,
label: section.format ? Helpers.interpolate(section.format, item) : item.label || String(item.value || item),
type: section.type,
checked: undefined,
isParentOf: section.isParentOf,
isChildOf: section.isChildOf,
};
if (obj.isChildOf) {
obj[section.isChildOf] = item[section.isChildOf];
}
return obj;
}
createSelectAllOption(section) {
const selectAll = {
value: 'ALL',
label: `All ${section.type}`,
type: section.type,
checked: this.model && this.model.length && this.model.indexOf('ALL') !== -1,
isParentOf: section.isParentOf,
isChildOf: section.isChildOf,
};
if (section.isChildOf) {
const allParents = section.data.reduce((accum, next) => {
return accum.concat(next[section.isChildOf]);
}, []);
selectAll[section.isChildOf] = allParents;
}
return selectAll;
}
deselectAll() {
this.selected = null;
}
select(event, item) {
this.blur.emit(event);
this.deselectAll();
this.selected = item;
}
onFocus(e) {
this.element.nativeElement.classList.add('selected');
this.focus.emit(e);
}
clickOption(event) {
if (event && !(event instanceof Event)) {
if (event.checked === false) {
this.remove(null, event);
}
else {
this.add(event);
}
this.modifyAffectedParentsOrChildren(event.checked, event);
// Set focus on the picker
const input = this.element.nativeElement.querySelector('novo-picker > input');
if (input) {
input.focus();
}
}
}
add(event) {
if (event.value === 'ALL') {
this.modifyAllOfType(event.type, 'select');
}
else {
this.updateDisplayItems(event, 'add');
this.value[event.type].push(event.value);
this.updateAllItemState(event.type);
this.triggerValueUpdate();
}
this.updateParentOrChildren(event, 'select');
this.select(null, event);
}
updateAllItemState(type) {
const allOfType = this.getAllOfType(type);
const allOfTypeSelected = this.allItemsSelected(allOfType, type);
if (allOfTypeSelected) {
this.selectAll(allOfType, type);
}
return { allOfType, allOfTypeSelected };
}
setIndeterminateState(allOfType, status) {
if (!this.selectAllOption) {
return;
}
const allItem = allOfType[0];
allItem.indeterminate = status;
}
updateDisplayItems(item, action) {
const adding = action === 'add';
if (adding) {
this.items.push(item);
}
else {
if (this.items.indexOf(item) > -1) {
this.items.splice(this.items.indexOf(item), 1);
}
}
this.updateDisplayText(this.items);
this._items.next(this.items);
}
updateDisplayText(items) {
this.notShown = [];
const notShown = items.slice(this.chipsCount);
if (notShown.length > 0) {
this.types.forEach((type) => {
let count;
const selectedOfType = notShown.filter((x) => x.type === type.value);
if (selectedOfType.length === 1 && selectedOfType[0].value === 'ALL') {
count = this.getAllOfType(type.value).length - 1;
}
else {
count = selectedOfType.length;
}
const displayType = count === 1 ? type.singular : type.plural || type.value;
if (count > 0) {
this.notShown.push({ type: displayType, count });
}
});
}
}
remove(event, item) {
let triggeredByEvent;
if (event) {
triggeredByEvent = true;
}
const itemToRemove = item;
if (itemToRemove.value === 'ALL') {
triggeredByEvent = false;
this.modifyAllOfType(itemToRemove.type, 'unselect');
}
else if (this.allOfTypeSelected(itemToRemove.type)) {
this.handleRemoveItemIfAllSelected(itemToRemove);
}
this.removeItem(item, triggeredByEvent);
}
removeItem(item, triggeredByEvent) {
item.checked = false;
this.deselectAll();
this.removeValue(item);
if (item.value !== 'ALL') {
this.updateParentOrChildren(item, 'unselect');
}
if (triggeredByEvent) {
this.modifyAffectedParentsOrChildren(false, item);
}
}
removeValue(item) {
const updatedValues = this.value[item.type].filter((x) => x !== item.value);
this.value[item.type] = updatedValues;
this.triggerValueUpdate();
this.updateDisplayItems(item, 'remove');
}
onKeyDown(event) {
if (event.key === "Backspace" /* Key.Backspace */) {
if (event.target && event.target.value.length === 0 && this.items.length) {
if (event) {
event.stopPropagation();
event.preventDefault();
}
if (this.selected) {
this.remove(null, this.selected);
}
else {
this.select(event, this.items[this.items.length - 1]);
}
}
}
}
allOfTypeSelected(type) {
return this.items.filter((x) => x.type === type && x.value === 'ALL').length > 0;
}
modifyAllOfType(type, action) {
const selecting = action === 'select';
const allOfType = this.getAllOfType(type);
allOfType.forEach((item) => {
item.checked = selecting;
item.indeterminate = false;
});
if (selecting) {
this.selectAll(allOfType, type);
}
else {
this.items = [...this.items.filter((x) => x.type !== type)];
this._items.next(this.items);
this.value[type] = [];
}
if (this.selectAllOption) {
this.updateAllParentsOrChildren(allOfType[0], action);
}
this.triggerValueUpdate();
}
triggerValueUpdate() {
const updatedObject = {};
this.types.forEach((x) => (updatedObject[x.value] = this.value[x.value]));
this.value = updatedObject;
}
selectAll(allOfType, type) {
if (!this.selectAllOption) {
return;
}
allOfType[0].checked = true;
const values = allOfType.map((i) => {
return i.value;
});
// remove 'ALL' value
values.splice(0, 1);
this.value[type] = values;
const updatedItems = this.items.filter((x) => x.type !== type);
this.items = updatedItems;
this.updateDisplayItems(allOfType[0], 'add');
}
handleRemoveItemIfAllSelected(item) {
if (!this.selectAllOption) {
return;
}
const type = item.type;
const allOfType = this.getAllOfType(type);
const allItem = allOfType[0];
this.removeItem(allItem);
allItem.indeterminate = true;
const selectedItems = allOfType.filter((i) => i.checked === true);
this.items = [...this.items, ...selectedItems];
const values = selectedItems.map((i) => {
return i.value;
});
this.value[type] = [...values];
}
handleOutsideClick(event) {
// If the elements doesn't contain the target element, it is an outside click
if (!this.element.nativeElement.contains(event.target)) {
this.blur.emit(event);
this.deselectAll();
}
}
getAllOfType(type) {
return this._options.filter((x) => x.type === type)[0].originalData;
}
updateParentOrChildren(item, action) {
if (this.strictRelationship && item.isParentOf) {
this.updateChildrenValue(item, action);
}
else if (item.isChildOf && this.selectAllOption) {
this.updateParentValue(item, action);
}
}
modifyAffectedParentsOrChildren(selecting, itemChanged) {
if (!itemChanged.isChildOf && !itemChanged.isParentOf) {
return;
}
const parent = this.types.filter((x) => !!x.isParentOf)[0];
const parentType = parent.value;
const allParentType = this.getAllOfType(parentType);
const childType = allParentType[0].isParentOf;
const allChildren = this.getAllOfType(childType);
const allCheckedChildren = allChildren.filter((x) => !!x.checked);
allParentType.forEach((obj) => {
if (obj.value === 'ALL') {
return;
}
const selectedChildrenOfParent = allCheckedChildren.filter((x) => {
return x[parentType].filter((y) => y === obj.value).length > 0;
});
if (selecting) {
if (obj.checked) {
return;
}
obj.indeterminate = selectedChildrenOfParent.length > 0;
}
else {
const allChildrenOfParent = allChildren.filter((x) => {
return x.value !== 'ALL' && x[parentType].filter((y) => y === obj.value).length > 0;
});
if (selectedChildrenOfParent.length > 0) {
if (obj.checked) {
if (this.strictRelationship && allChildrenOfParent.length !== selectedChildrenOfParent.length) {
obj.indeterminate = true;
obj.checked = false;
this.removeValue(obj);
this.addIndividualChildren(selectedChildrenOfParent);
}
}
else {
obj.indeterminate = true;
}
if (this.strictRelationship && itemChanged.type !== parentType) {
if (obj.checked) {
obj.checked = false;
this.removeValue(obj);
this.addIndividualChildren(selectedChildrenOfParent);
}
}
}
else {
obj.indeterminate = false;
if (allChildrenOfParent.length === 0) {
// if it has no children and is checked, it should stay checked
return;
}
else if (this.strictRelationship && itemChanged.type !== parentType) {
this.remove(null, obj);
}
}
}
});
if (this.selectAllOption) {
this.updateIndeterminateStates(allParentType, allChildren, allCheckedChildren);
}
}
updateAllParentsOrChildren(allItem, action) {
if (allItem.isParentOf) {
this.updateAllChildrenValue(allItem, action);
}
else if (allItem.isChildOf) {
this.updateAllParentValue(allItem, action);
}
}
updateAllChildrenValue(item, action) {
const selecting = action === 'select';
const childType = item.isParentOf;
const potentialChildren = this.getAllOfType(childType);
if (this.selectAllOption && this.allOfTypeSelected(childType) && !selecting) {
this.remove(null, potentialChildren[0]);
return;
}
potentialChildren.forEach((x) => {
if (x.value === 'ALL' && !x.checked) {
if (selecting) {
x.checked = true;
}
x.indeterminate = selecting;
}
else {
if (x.checked && !selecting) {
this.remove(null, x);
}
x.checked = selecting;
}
});
}
updateAllParentValue(item, action) {
const selecting = action === 'select';
const parentType = item.isChildOf;
const potentialParents = this.getAllOfType(parentType);
potentialParents.forEach((x) => {
if (!x.checked) {
x.indeterminate = selecting;
}
});
}
updateIndeterminateStates(allParentType, allChildren, allCheckedChildren) {
const allCheckedOrIndeterminateParents = allParentType.filter((x) => (!!x.checked || !!x.indeterminate) && x.value !== 'ALL');
const isParentIndeterminate = !!allParentType[0].checked ? false : allCheckedOrIndeterminateParents.length > 0;
const isChildIndeterminate = !!allChildren[0].checked ? false : allCheckedChildren.length > 0;
this.setIndeterminateState(allParentType, isParentIndeterminate);
this.setIndeterminateState(allChildren, isChildIndeterminate);
}
updateChildrenValue(parent, action) {
const selecting = action === 'select';
const childType = parent.isParentOf;
const potentialChildren = this.getAllOfType(childType);
potentialChildren.forEach((x) => {
if (x.value === 'ALL') {
return;
}
if (x[parent.type].filter((y) => y === parent.value).length > 0) {
if (x.checked && !selecting) {
x.checked = false;
if (this.allOfTypeSelected(childType)) {
this.handleRemoveItemIfAllSelected(x);
}
else {
this.removeValue(x);
}
}
x.checked = selecting;
}
});
}
updateParentValue(child, action) {
const allParentType = this.getAllOfType(child.isChildOf);
if (allParentType[0].checked && action !== 'select') {
this.handleRemoveItemIfAllSelected(allParentType[0]);
}
}
addIndividualChildren(children) {
let parentAlreadySelected = false;
children.forEach((x) => {
if (x.isChildOf) {
// only add children if their parents are not already selected
x[x.isChildOf].forEach((parent) => {
if (this.value[x.isChildOf].filter((p) => p === parent).length > 0) {
parentAlreadySelected = true;
}
});
}
if (this.value[x.type].filter((item) => item === x.value).length === 0 && !parentAlreadySelected) {
this.add(x);
}
});
}
setInitialValue(model) {
this.items = [];
this.value = model || {};
if (!this.types) {
return;
}
this.types.forEach((typeObj) => {
const type = typeObj.value;
if (this.value[type]) {
let indeterminateIsSet = false;
const options = this.updateAllItemState(type);
const optionsByType = options.allOfType;
const allSelected = options.allOfTypeSelected;
this.value[type].forEach((item) => {
if (!allSelected && !indeterminateIsSet) {
indeterminateIsSet = true;
this.setIndeterminateState(optionsByType, true);
}
const value = optionsByType.filter((x) => x.value === item)[0];
value.checked = true;
if (!allSelected) {
this.updateDisplayItems(value, 'add');
}
if (this.strictRelationship && value.isParentOf) {
this.updateChildrenValue(value, 'select');
}
});
if (typeObj.isChildOf) {
this.modifyAffectedParentsOrChildren(true, { value: type, isChildOf: true });
}
}
else {
this.value[type] = [];
}
});
}
allItemsSelected(optionsByType, type) {
return this.value[type].length === optionsByType.length - 1;
}
// Set touched on blur
onTouched(e) {
this.element.nativeElement.classList.remove('selected');
this.onModelTouched();
this.blur.emit(e);
}
writeValue(model) {
this.model = model;
this.setInitialValue(model);
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoMultiPickerElement, deps: [{ token: i0.ElementRef }, { token: i1.NovoLabelService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoMultiPickerElement, isStandalone: false, selector: "multi-picker", inputs: { source: "source", placeholder: "placeholder", types: "types", value: "value" }, outputs: { changed: "changed", focus: "focus", blur: "blur" }, host: { properties: { "class.with-value": "items.length > 0" } }, providers: [CHIPS_VALUE_ACCESSOR], ngImport: i0, template: `
<novo-chip
*ngFor="let item of _items | async | slice: 0:chipsCount"
[type]="item.type"
[class.selected]="item == selected"
(removed)="removeFromDisplay($event, item)"
(selectionChange)="select($event, item)"
>
{{ item.label }}
</novo-chip>
<div *ngIf="items.length > chipsCount">
<ul class="summary">
<li *ngFor="let type of notShown">+ {{ type.count }} {{ labels.more }} {{ type.type }}</li>
</ul>
</div>
<div class="chip-input-container">
<novo-picker
clearValueOnSelect="true"
[config]="source"
[placeholder]="placeholder"
(select)="clickOption($event)"
(keydown)="onKeyDown($event)"
(focus)="onFocus($event)"
(blur)="onTouched($event)"
[overrideElement]="element"
>
</novo-picker>
</div>
<i class="bhi-search" [class.has-value]="items.length"></i>
<label class="clear-all" *ngIf="items.length" (click)="clearValue()">{{ labels.clearAll }} <i class="bhi-times"></i></label>
`, isInline: true, styles: [":host{width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid rgb(175.4891304348,184.7826086957,192.0108695652);transition:all .2s ease-in-out;position:relative;padding:2px 0}:host .hidden-chips-toggle{cursor:pointer;padding-left:.5rem;line-height:2.7rem}:host.with-value{margin-bottom:20px}:host:hover{border-bottom:1px solid rgb(94.8152173913,108.8043478261,119.6847826087)}:host.selected,:host.selected:hover{border-bottom:1px solid #4a89dc}:host.selected+i,:host.selected:hover+i{color:#4a89dc}:host.disabled{border-bottom-style:dashed!important}:host .novo-chip-container{flex:1;display:flex;flex-flow:row wrap;gap:.4rem;align-items:center}:host .chip-input-container{flex:1 15rem;padding-left:1rem}:host .chip-input-container input{padding-top:0;border:none;background:transparent!important;width:100%}:host .chip-input-container input:focus{outline:none}:host .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host label.clear-all{flex:1 100%;position:absolute;right:0;bottom:-20px;font-size:.9rem;color:#da4453;cursor:pointer;display:flex;align-items:center}:host label.clear-all i{font-size:.7rem;padding-bottom:2px;margin-left:5px}:host i.bhi-search{position:absolute;bottom:8px;right:0;font-size:1.1em;color:#3d464d}:host+i{position:absolute;right:0;bottom:7px}:host.with-value{margin-bottom:0}:host novo-picker{position:inherit;padding-bottom:0}:host novo-picker>::ng-deep input{border:none;border-bottom:none!important}:host novo-picker>::ng-deep input:disabled{border-bottom:none!important}:host novo-picker>::ng-deep i{display:none}:host novo-picker div.picker-results-container{left:0}:host picker-results{position:absolute;color:#000}:host picker-results novo-list{max-height:49vh;overflow:auto}:host picker-results novo-list novo-list-item{flex:0 0;transition:background-color .25s}:host picker-results novo-list novo-list-item>div{width:100%}:host picker-results novo-list novo-list-item.active{background-color:#e0ebf9}:host picker-results novo-list novo-list-item:hover{background-color:#e0ebf9}:host picker-results novo-list novo-list-item item-content{flex-flow:row wrap}:host picker-results novo-list novo-list-item item-content>*{flex:0 0 33%;white-space:nowrap}:host picker-results .error-results,:host picker-results .no-recents,:host picker-results .null-results{text-align:center;padding:1em 0 4em}:host picker-results .error-results>i,:host picker-results .no-recents>i,:host picker-results .null-results>i{font-size:3em;margin:.5em;color:#0000004d}:host picker-results .error-results>h4,:host picker-results .error-results>p,:host picker-results .no-recents>h4,:host picker-results .no-recents>p,:host picker-results .null-results>h4,:host picker-results .null-results>p{margin:0;max-width:none;padding:0}:host picker-results .error-results>h4,:host picker-results .no-recents>h4,:host picker-results .null-results>h4{font-weight:500}:host picker-results section{box-shadow:.1em .1em 1em #00000040;z-index:9;position:absolute;width:100%;background-color:#fff;color:#000}:host .preview-container entity-picker-result{background:#fff;position:absolute;top:100%;left:0;width:100%;min-width:180px;max-height:49vh;overflow:auto;z-index:9001;border:1px solid #4a89dc;transition:all .2s ease-in-out}:host .preview-container entity-picker-result .novo-list-item{flex:0 0}:host .preview-container entity-picker-result .novo-list-item>div{width:100%}:host .preview-container entity-picker-result .novo-list-item .novo-item-content{flex-flow:row wrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>*{flex:0 0 33%;white-space:nowrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>p{min-width:15em;font-size:.9em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-right:1em}entity-chip-results{max-width:none!important}:host .chip-input-container{padding-top:10px}:host ul.summary{display:inline;list-style:none;color:#868686;padding:0 10px}:host ul.summary li{display:inline;padding:0 3px}:host ul.summary li:after{content:\", \"}:host ul.summary li:last-child:after{content:\" \"}:host novo-picker li.header{text-transform:uppercase;font-weight:400;border-top:1px solid #e8e8e8;padding-bottom:0}:host novo-picker li label{color:#9e9e9e;text-transform:capitalize}:host novo-picker li label:hover i.bhi-checkbox-empty,:host novo-picker li label:hover i.bhi-checkbox-indeterminate{color:#4a89dc}:host novo-picker li.checked label{color:#393939}:host novo-picker i{margin-right:5px}:host novo-picker i.bhi-checkbox-empty{color:#d2d2d2}:host novo-picker i.bhi-checkbox-filled,:host novo-picker i.bhi-checkbox-indeterminate{color:#4a89dc}:host chip span{text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.NovoPickerElement, selector: "novo-picker", inputs: ["config", "placeholder", "clearValueOnSelect", "closeOnSelect", "selected", "appendToBody", "parentScrollSelector", "parentScrollAction", "containerClass", "side", "autoSelectFirstOption", "overrideElement", "maxlength", "allowCustomValues", "width", "minWidth", "allowTabNavigation", "disablePickerInput"], outputs: ["changed", "select", "focus", "blur", "typing", "tab"] }, { kind: "component", type: i4.NovoChipElement, selector: "novo-chip, [novo-chip]", inputs: ["color", "tabIndex", "size", "type", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoMultiPickerElement, decorators: [{
type: Component,
args: [{ selector: 'multi-picker', providers: [CHIPS_VALUE_ACCESSOR], template: `
<novo-chip
*ngFor="let item of _items | async | slice: 0:chipsCount"
[type]="item.type"
[class.selected]="item == selected"
(removed)="removeFromDisplay($event, item)"
(selectionChange)="select($event, item)"
>
{{ item.label }}
</novo-chip>
<div *ngIf="items.length > chipsCount">
<ul class="summary">
<li *ngFor="let type of notShown">+ {{ type.count }} {{ labels.more }} {{ type.type }}</li>
</ul>
</div>
<div class="chip-input-container">
<novo-picker
clearValueOnSelect="true"
[config]="source"
[placeholder]="placeholder"
(select)="clickOption($event)"
(keydown)="onKeyDown($event)"
(focus)="onFocus($event)"
(blur)="onTouched($event)"
[overrideElement]="element"
>
</novo-picker>
</div>
<i class="bhi-search" [class.has-value]="items.length"></i>
<label class="clear-all" *ngIf="items.length" (click)="clearValue()">{{ labels.clearAll }} <i class="bhi-times"></i></label>
`, host: {
'[class.with-value]': 'items.length > 0',
}, standalone: false, styles: [":host{width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid rgb(175.4891304348,184.7826086957,192.0108695652);transition:all .2s ease-in-out;position:relative;padding:2px 0}:host .hidden-chips-toggle{cursor:pointer;padding-left:.5rem;line-height:2.7rem}:host.with-value{margin-bottom:20px}:host:hover{border-bottom:1px solid rgb(94.8152173913,108.8043478261,119.6847826087)}:host.selected,:host.selected:hover{border-bottom:1px solid #4a89dc}:host.selected+i,:host.selected:hover+i{color:#4a89dc}:host.disabled{border-bottom-style:dashed!important}:host .novo-chip-container{flex:1;display:flex;flex-flow:row wrap;gap:.4rem;align-items:center}:host .chip-input-container{flex:1 15rem;padding-left:1rem}:host .chip-input-container input{padding-top:0;border:none;background:transparent!important;width:100%}:host .chip-input-container input:focus{outline:none}:host .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host label.clear-all{flex:1 100%;position:absolute;right:0;bottom:-20px;font-size:.9rem;color:#da4453;cursor:pointer;display:flex;align-items:center}:host label.clear-all i{font-size:.7rem;padding-bottom:2px;margin-left:5px}:host i.bhi-search{position:absolute;bottom:8px;right:0;font-size:1.1em;color:#3d464d}:host+i{position:absolute;right:0;bottom:7px}:host.with-value{margin-bottom:0}:host novo-picker{position:inherit;padding-bottom:0}:host novo-picker>::ng-deep input{border:none;border-bottom:none!important}:host novo-picker>::ng-deep input:disabled{border-bottom:none!important}:host novo-picker>::ng-deep i{display:none}:host novo-picker div.picker-results-container{left:0}:host picker-results{position:absolute;color:#000}:host picker-results novo-list{max-height:49vh;overflow:auto}:host picker-results novo-list novo-list-item{flex:0 0;transition:background-color .25s}:host picker-results novo-list novo-list-item>div{width:100%}:host picker-results novo-list novo-list-item.active{background-color:#e0ebf9}:host picker-results novo-list novo-list-item:hover{background-color:#e0ebf9}:host picker-results novo-list novo-list-item item-content{flex-flow:row wrap}:host picker-results novo-list novo-list-item item-content>*{flex:0 0 33%;white-space:nowrap}:host picker-results .error-results,:host picker-results .no-recents,:host picker-results .null-results{text-align:center;padding:1em 0 4em}:host picker-results .error-results>i,:host picker-results .no-recents>i,:host picker-results .null-results>i{font-size:3em;margin:.5em;color:#0000004d}:host picker-results .error-results>h4,:host picker-results .error-results>p,:host picker-results .no-recents>h4,:host picker-results .no-recents>p,:host picker-results .null-results>h4,:host picker-results .null-results>p{margin:0;max-width:none;padding:0}:host picker-results .error-results>h4,:host picker-results .no-recents>h4,:host picker-results .null-results>h4{font-weight:500}:host picker-results section{box-shadow:.1em .1em 1em #00000040;z-index:9;position:absolute;width:100%;background-color:#fff;color:#000}:host .preview-container entity-picker-result{background:#fff;position:absolute;top:100%;left:0;width:100%;min-width:180px;max-height:49vh;overflow:auto;z-index:9001;border:1px solid #4a89dc;transition:all .2s ease-in-out}:host .preview-container entity-picker-result .novo-list-item{flex:0 0}:host .preview-container entity-picker-result .novo-list-item>div{width:100%}:host .preview-container entity-picker-result .novo-list-item .novo-item-content{flex-flow:row wrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>*{flex:0 0 33%;white-space:nowrap}:host .preview-container entity-picker-result .novo-list-item .novo-item-content>p{min-width:15em;font-size:.9em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-right:1em}entity-chip-results{max-width:none!important}:host .chip-input-container{padding-top:10px}:host ul.summary{display:inline;list-style:none;color:#868686;padding:0 10px}:host ul.summary li{display:inline;padding:0 3px}:host ul.summary li:after{content:\", \"}:host ul.summary li:last-child:after{content:\" \"}:host novo-picker li.header{text-transform:uppercase;font-weight:400;border-top:1px solid #e8e8e8;padding-bottom:0}:host novo-picker li label{color:#9e9e9e;text-transform:capitalize}:host novo-picker li label:hover i.bhi-checkbox-empty,:host novo-picker li label:hover i.bhi-checkbox-indeterminate{color:#4a89dc}:host novo-picker li.checked label{color:#393939}:host novo-picker i{margin-right:5px}:host novo-picker i.bhi-checkbox-empty{color:#d2d2d2}:host novo-picker i.bhi-checkbox-filled,:host novo-picker i.bhi-checkbox-indeterminate{color:#4a89dc}:host chip span{text-transform:capitalize}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NovoLabelService }], propDecorators: { source: [{
type: Input
}], placeholder: [{
type: Input
}], types: [{
type: Input
}], changed: [{
type: Output
}], focus: [{
type: Output
}], blur: [{
type: Output
}], value: [{
type: Input
}] } });
// NG2
class NovoMultiPickerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoMultiPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: NovoMultiPickerModule, declarations: [NovoMultiPickerElement], imports: [CommonModule, FormsModule, NovoPickerModule, NovoChipsModule], exports: [NovoMultiPickerElement] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoMultiPickerModule, imports: [CommonModule, FormsModule, NovoPickerModule, NovoChipsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoMultiPickerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, NovoPickerModule, NovoChipsModule],
declarations: [NovoMultiPickerElement],
exports: [NovoMultiPickerElement],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NovoMultiPickerElement, NovoMultiPickerModule };
//# sourceMappingURL=novo-elements-elements-multi-picker.mjs.map