@obliczeniowo/elementary
Version:
Library made in Angular version 20
335 lines (328 loc) • 36.6 kB
JavaScript
import * as i0 from '@angular/core';
import { input, EventEmitter, Output, Component, effect, HostBinding, Input, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i8 from '@angular/forms';
import { FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import * as i6 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i1 from '@obliczeniowo/elementary/input';
import { InputModule } from '@obliczeniowo/elementary/input';
import * as i7 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i5 from '@obliczeniowo/elementary/checkbox';
import { CheckboxModule } from '@obliczeniowo/elementary/checkbox';
import * as i4 from '@obliczeniowo/elementary/dropdown-select';
import { DropdownSelectModule } from '@obliczeniowo/elementary/dropdown-select';
import * as i11 from '@obliczeniowo/elementary/numeric-pipes';
import { UnitsPipe } from '@obliczeniowo/elementary/numeric-pipes';
import * as i12 from '@obliczeniowo/elementary/array-pipes';
import { TakePipe } from '@obliczeniowo/elementary/array-pipes';
import { ToAsyncPipe } from '@obliczeniowo/elementary/async-pipes';
import * as i9 from '@obliczeniowo/elementary/animations';
import { Animations, AnimationsModule } from '@obliczeniowo/elementary/animations';
import { DefaultSearchDomain } from '@obliczeniowo/elementary/classes';
import { debounceTime } from 'rxjs';
class SingleSelectItemComponent {
item = input.required();
templateSuffix = input();
remove = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SingleSelectItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: SingleSelectItemComponent, isStandalone: false, selector: "obl-single-select-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, templateSuffix: { classPropertyName: "templateSuffix", publicName: "templateSuffix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "@if (item()) {\n <div [class.template]=\"templateSuffix()\">\n {{ item().text }}\n </div>\n <button oblButton icon=\"cancel\" (click)=\"remove.emit()\"></button>\n @if (templateSuffix()) {\n <ng-container\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: item() }\"\n ></ng-container>\n }\n}", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{padding:5px 10px;background-color:var(--select-item-background-color);color:var(--select-item-text-color);display:flex;align-items:center;gap:5px;border-radius:5px;white-space:nowrap;cursor:pointer;font-size:var(--obl-font-size)}:host .template{margin-right:10px}:host>div{margin-top:3px;display:flex;align-items:center}:host button{--obl-default-button-padding: 5px}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SingleSelectItemComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-single-select-item', standalone: false, template: "@if (item()) {\n <div [class.template]=\"templateSuffix()\">\n {{ item().text }}\n </div>\n <button oblButton icon=\"cancel\" (click)=\"remove.emit()\"></button>\n @if (templateSuffix()) {\n <ng-container\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: item() }\"\n ></ng-container>\n }\n}", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{padding:5px 10px;background-color:var(--select-item-background-color);color:var(--select-item-text-color);display:flex;align-items:center;gap:5px;border-radius:5px;white-space:nowrap;cursor:pointer;font-size:var(--obl-font-size)}:host .template{margin-right:10px}:host>div{margin-top:3px;display:flex;align-items:center}:host button{--obl-default-button-padding: 5px}\n"] }]
}], propDecorators: { remove: [{
type: Output
}] } });
class DropdownMultiSelectComponent {
elementRef;
settings;
touchedDragBar = false;
value = [];
label = input();
items = [];
placeholder = input();
templateSuffix = input();
/** Define if search control should shows up */
search = false;
/**
* Enable type text animation for label
*/
labelAnimation = false;
disabled = false;
wrap = input(false);
regExp = input();
/**
* Control the select items data flow.
*
* If you want to override this one for getting data from BE source for example just create
* own class that extends AbstractSearchModel and do what you need to do to filter out items
* list
*/
model = new DefaultSearchDomain([]);
get error() {
return ((this.abstractControl &&
(!this.abstractControl.pristine || this.abstractControl.touched) &&
this.abstractControl.errors) ||
null);
}
changed = new EventEmitter();
itemClicked = new EventEmitter();
regChanged = new EventEmitter();
/** search control */
searchControl = new FormControl('');
abstractControl;
subscription;
selected = [];
isOpen = false;
onChange = (value) => { };
onTouched = () => { };
constructor(elementRef, settings) {
this.elementRef = elementRef;
this.settings = settings;
this.labelAnimation = this.settings.labelAnimation.select;
this.subscription = this.searchControl.valueChanges
.pipe(debounceTime(500))
.subscribe((value) => {
this.model.search(value);
});
effect(() => {
this.model.regExpOn = this.regExp()?.on || false;
this.model.search(this.searchControl.getRawValue());
});
}
ngOnChanges(changes) {
if ((changes.value && this.items) || (changes.items && this.value)) {
this.selected = this.items.filter((item) => {
item.selected = this.value.includes(item.id);
return item.selected;
});
}
if (changes.items) {
this.model.items = this.items;
this.model.filtered = this.items;
}
if (changes.search && !changes.search.firstChange) {
if (!this.search) {
this.searchControl.setValue('');
this.model.search(this.searchControl.getRawValue());
}
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
getWidth() {
return this.elementRef.nativeElement.clientWidth;
}
validate(control) {
this.abstractControl = control;
return null;
}
registerOnValidatorChange(fn) {
this.onChange = fn;
}
toggleReg() {
this.model.regExpOn = !this.model.regExpOn;
this.model.search(this.searchControl.getRawValue());
this.regChanged.emit(this.model.regExpOn);
}
writeValue(ids) {
(Array.isArray(ids) ? ids : ids.value).forEach((id) => {
const selected = this.items.find((item) => item.id === id);
if (selected) {
selected.selected = true;
this.selected.push(selected);
}
});
this.onChange(this.selected.map((i) => i.id));
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
ngOnInit() { }
close(touched = this.touchedDragBar) {
if (!touched) {
this.isOpen = false;
this.touchedDragBar = false;
}
else {
this.touchedDragBar = touched;
}
}
open() {
if (!this.isOpen) {
this.isOpen = true;
this.touchedDragBar = false;
}
}
toggle(event, touched = this.touchedDragBar) {
if (touched) {
return;
}
event.stopPropagation();
this.touchedDragBar = false;
this.isOpen = !this.isOpen;
}
onSelect(item, dragBar) {
if (this.disabled) {
return;
}
item.selected = !item.selected;
if (item.selected) {
this.selected = [...this.selected, item];
}
else {
this.selected = this.selected.filter((i) => i.id !== item.id);
}
this.onChange(this.selected.map((i) => i.id));
this.touchedDragBar = dragBar.touchedDragBar;
this.changed.emit([...this.selected]);
}
onTouchedDragBar(touched, element) {
this.touchedDragBar = touched;
element.parentElement.style.width = 0;
}
onItemClicked(event, item) {
this.itemClicked.emit({ event, data: item });
}
setDisabledState(disabled) {
this.disabled = disabled;
}
remove(item) {
this.selected = this.selected.filter((el) => el.id !== item.id);
item.selected = false;
this.changed.emit(this.selected);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownMultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.InputWrappersDefaultSettingsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: DropdownMultiSelectComponent, isStandalone: false, selector: "obl-dropdown-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, templateSuffix: { classPropertyName: "templateSuffix", publicName: "templateSuffix", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, labelAnimation: { classPropertyName: "labelAnimation", publicName: "labelAnimation", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, regExp: { classPropertyName: "regExp", publicName: "regExp", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", itemClicked: "itemClicked", regChanged: "regChanged" }, host: { properties: { "class.disabled": "this.disabled", "class.error": "this.error" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: DropdownMultiSelectComponent,
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: DropdownMultiSelectComponent,
},
], usesOnChanges: true, ngImport: i0, template: "<fieldset\n class=\"select-content\"\n [ngClass]=\"{ legend: label() }\"\n cdkOverlayOrigin\n #dropDown=\"cdkOverlayOrigin\"\n #parent\n>\n @if (label()) {\n <legend>\n @if (labelAnimation) {\n <obl-type-text [text]=\"label() || ''\" [interval]=\"40\"></obl-type-text>\n } @else {\n {{ label() }}\n }\n </legend>\n }\n <div class=\"selected\" [class.wrap]=\"wrap()\">\n @for (item of selected | oblTake : 50; track item.id) {\n <obl-single-select-item\n [item]=\"item\"\n [templateSuffix]=\"templateSuffix()\"\n (remove)=\"remove(item)\"\n (click)=\"onItemClicked($event, item)\"\n ></obl-single-select-item>\n }\n\n @if (selected.length > 50) {\n <span>... +{{ selected.length - 50 }}</span>\n } @else if (selected.length === 0) {\n <span>{{ placeholder() }}</span>\n }\n\n </div>\n <div class=\"suffix\" #suffix>\n <div class=\"count\">\n <sup>{{ selected.length | oblUnits }}</sup>\n </div>\n <obl-expand-button\n [isOpen]=\"isOpen\"\n (click)=\"toggle($event, false)\"\n ></obl-expand-button>\n </div>\n</fieldset>\n\n<ng-template\n #dropdownTmpl\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"toggle($event)\"\n>\n <div class=\"dropdown-list\" [style.min-width.px]=\"getWidth() - 5\" #list cdkDrag>\n <obl-drag-bar\n (onTouched)=\"onTouchedDragBar($event, list)\"\n (onClose)=\"close(false)\"\n cdkDragHandle\n #dragBar\n ></obl-drag-bar>\n @if (search) {\n <obl-input-wrapper\n [display]=\"'underlined'\"\n [cancellable]=\"true\"\n >\n <input oblInput type=\"search\" [formControl]=\"searchControl\" />\n @if (regExp()) {\n <button\n oblButton\n [selected]=\"model.regExpOn\"\n (click)=\"toggleReg()\"\n >\n Reg\n </button>\n }\n </obl-input-wrapper>\n }\n <div class=\"list\">\n @for (item of model.filtered; track item.id) {\n <div class=\"item-container\" (click)=\"onSelect(item, dragBar)\">\n <obl-checkbox\n [value]=\"!!item.selected\"\n (changed)=\"(item.selected)\"\n [disabled]=\"disabled\"\n >{{ item.text }}</obl-checkbox\n >\n @if (templateSuffix()) {\n <ng-container\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: item }\"\n ></ng-container>\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{display:flex;justify-content:stretch;width:100%;font-size:var(--obl-font-size)}:host .select-content{display:flex;justify-content:space-between;align-items:center;padding:5px;width:100%;max-width:100%;min-height:55px;border:1px solid var(--default-border-color);border-radius:5px;min-width:0px}:host .select-content.legend{padding:0 5px 5px}:host .select-content legend{font-size:12px}:host .select-content .suffix{display:flex;min-height:42px}:host .select-content .count{white-space:nowrap;margin:0 5px;display:flex;align-items:center}:host .select-content .count sup{background-color:#adadad;color:var(--default-background-color);border-radius:20px;padding:0 5px}:host .select-content:focus{border:1px dotted var(--default-focus-color)}:host.error .select-content{border:1px solid var(--obl-default-error-color)}:host.error .select-content .count sup{background-color:var(--obl-default-error-color)}:host.error .select-content legend{color:var(--obl-default-error-color)}:host .selected{display:flex;align-items:center;overflow:hidden;gap:5px;padding:0 1.25px;width:100%}:host .selected.wrap{flex-wrap:wrap}.dropdown-list{background-color:var(--default-background-color);border-radius:5px;border:1px solid var(--default-border-color);display:flex;flex-direction:column;width:100%;font-size:var(--obl-font-size)}.dropdown-list .list{display:flex;flex-direction:column;max-height:300px;overflow:auto;scrollbar-width:thin}.dropdown-list .list::-webkit-scrollbar{width:9px}.dropdown-list .list::-webkit-scrollbar-track{background:transparent}.dropdown-list .list::-webkit-scrollbar-thumb{background-color:#9b9b9b80;border-radius:20px;border:transparent}.dropdown-list .list .item-container{padding:5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.dropdown-list .list .item-container:hover{background-color:var(--default-hover-color)}.dropdown-list .list .item-container .item{width:100%}.dropdown-list obl-input-wrapper button{--obl-default-button-padding: 5.5px}.dropdown-list obl-input-wrapper::ng-deep button:first-of-type{border-top-left-radius:5px;border-bottom-left-radius:5px}.dropdown-list obl-input-wrapper::ng-deep button:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}::ng-deep .cdk-overlay-container{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i4.DragBarComponent, selector: "obl-drag-bar", outputs: ["onTouched", "onClose"] }, { kind: "component", type: i5.CheckboxComponent, selector: "obl-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i7.ExpandButtonComponent, selector: "obl-expand-button", inputs: ["isOpen"] }, { kind: "directive", type: i7.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "directive", type: i1.InputDirective, selector: "input[oblInput]", inputs: ["outlined"], exportAs: ["oblInput"] }, { kind: "component", type: i1.InputWrapperComponent, selector: "obl-input-wrapper", inputs: ["label", "display", "cancellable", "step", "errors", "translations", "labelAnimation", "small"], outputs: ["loaded"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.TypeTextComponent, selector: "obl-type-text", inputs: ["text", "interval"] }, { kind: "component", type: SingleSelectItemComponent, selector: "obl-single-select-item", inputs: ["item", "templateSuffix"], outputs: ["remove"] }, { kind: "pipe", type: i11.UnitsPipe, name: "oblUnits" }, { kind: "pipe", type: i12.TakePipe, name: "oblTake" }], animations: [Animations.rotate180deg] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownMultiSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-dropdown-multi-select', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: DropdownMultiSelectComponent,
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: DropdownMultiSelectComponent,
},
], animations: [Animations.rotate180deg], standalone: false, template: "<fieldset\n class=\"select-content\"\n [ngClass]=\"{ legend: label() }\"\n cdkOverlayOrigin\n #dropDown=\"cdkOverlayOrigin\"\n #parent\n>\n @if (label()) {\n <legend>\n @if (labelAnimation) {\n <obl-type-text [text]=\"label() || ''\" [interval]=\"40\"></obl-type-text>\n } @else {\n {{ label() }}\n }\n </legend>\n }\n <div class=\"selected\" [class.wrap]=\"wrap()\">\n @for (item of selected | oblTake : 50; track item.id) {\n <obl-single-select-item\n [item]=\"item\"\n [templateSuffix]=\"templateSuffix()\"\n (remove)=\"remove(item)\"\n (click)=\"onItemClicked($event, item)\"\n ></obl-single-select-item>\n }\n\n @if (selected.length > 50) {\n <span>... +{{ selected.length - 50 }}</span>\n } @else if (selected.length === 0) {\n <span>{{ placeholder() }}</span>\n }\n\n </div>\n <div class=\"suffix\" #suffix>\n <div class=\"count\">\n <sup>{{ selected.length | oblUnits }}</sup>\n </div>\n <obl-expand-button\n [isOpen]=\"isOpen\"\n (click)=\"toggle($event, false)\"\n ></obl-expand-button>\n </div>\n</fieldset>\n\n<ng-template\n #dropdownTmpl\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"toggle($event)\"\n>\n <div class=\"dropdown-list\" [style.min-width.px]=\"getWidth() - 5\" #list cdkDrag>\n <obl-drag-bar\n (onTouched)=\"onTouchedDragBar($event, list)\"\n (onClose)=\"close(false)\"\n cdkDragHandle\n #dragBar\n ></obl-drag-bar>\n @if (search) {\n <obl-input-wrapper\n [display]=\"'underlined'\"\n [cancellable]=\"true\"\n >\n <input oblInput type=\"search\" [formControl]=\"searchControl\" />\n @if (regExp()) {\n <button\n oblButton\n [selected]=\"model.regExpOn\"\n (click)=\"toggleReg()\"\n >\n Reg\n </button>\n }\n </obl-input-wrapper>\n }\n <div class=\"list\">\n @for (item of model.filtered; track item.id) {\n <div class=\"item-container\" (click)=\"onSelect(item, dragBar)\">\n <obl-checkbox\n [value]=\"!!item.selected\"\n (changed)=\"(item.selected)\"\n [disabled]=\"disabled\"\n >{{ item.text }}</obl-checkbox\n >\n @if (templateSuffix()) {\n <ng-container\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: item }\"\n ></ng-container>\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{display:flex;justify-content:stretch;width:100%;font-size:var(--obl-font-size)}:host .select-content{display:flex;justify-content:space-between;align-items:center;padding:5px;width:100%;max-width:100%;min-height:55px;border:1px solid var(--default-border-color);border-radius:5px;min-width:0px}:host .select-content.legend{padding:0 5px 5px}:host .select-content legend{font-size:12px}:host .select-content .suffix{display:flex;min-height:42px}:host .select-content .count{white-space:nowrap;margin:0 5px;display:flex;align-items:center}:host .select-content .count sup{background-color:#adadad;color:var(--default-background-color);border-radius:20px;padding:0 5px}:host .select-content:focus{border:1px dotted var(--default-focus-color)}:host.error .select-content{border:1px solid var(--obl-default-error-color)}:host.error .select-content .count sup{background-color:var(--obl-default-error-color)}:host.error .select-content legend{color:var(--obl-default-error-color)}:host .selected{display:flex;align-items:center;overflow:hidden;gap:5px;padding:0 1.25px;width:100%}:host .selected.wrap{flex-wrap:wrap}.dropdown-list{background-color:var(--default-background-color);border-radius:5px;border:1px solid var(--default-border-color);display:flex;flex-direction:column;width:100%;font-size:var(--obl-font-size)}.dropdown-list .list{display:flex;flex-direction:column;max-height:300px;overflow:auto;scrollbar-width:thin}.dropdown-list .list::-webkit-scrollbar{width:9px}.dropdown-list .list::-webkit-scrollbar-track{background:transparent}.dropdown-list .list::-webkit-scrollbar-thumb{background-color:#9b9b9b80;border-radius:20px;border:transparent}.dropdown-list .list .item-container{padding:5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.dropdown-list .list .item-container:hover{background-color:var(--default-hover-color)}.dropdown-list .list .item-container .item{width:100%}.dropdown-list obl-input-wrapper button{--obl-default-button-padding: 5.5px}.dropdown-list obl-input-wrapper::ng-deep button:first-of-type{border-top-left-radius:5px;border-bottom-left-radius:5px}.dropdown-list obl-input-wrapper::ng-deep button:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}::ng-deep .cdk-overlay-container{pointer-events:none}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.InputWrappersDefaultSettingsService }], propDecorators: { value: [{
type: Input
}], items: [{
type: Input
}], search: [{
type: Input
}], labelAnimation: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], model: [{
type: Input
}], error: [{
type: HostBinding,
args: ['class.error']
}], changed: [{
type: Output
}], itemClicked: [{
type: Output
}], regChanged: [{
type: Output
}] } });
class DropdownMultiSelectModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DropdownMultiSelectModule, declarations: [DropdownMultiSelectComponent,
SingleSelectItemComponent], imports: [CommonModule,
OverlayModule,
DropdownSelectModule,
CheckboxModule,
DragDropModule,
ButtonsModule,
InputModule,
ReactiveFormsModule,
UnitsPipe,
TakePipe,
ToAsyncPipe,
AnimationsModule], exports: [DropdownMultiSelectComponent,
SingleSelectItemComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownMultiSelectModule, imports: [CommonModule,
OverlayModule,
DropdownSelectModule,
CheckboxModule,
DragDropModule,
ButtonsModule,
InputModule,
ReactiveFormsModule,
AnimationsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownMultiSelectModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DropdownMultiSelectComponent,
SingleSelectItemComponent
],
imports: [
CommonModule,
OverlayModule,
DropdownSelectModule,
CheckboxModule,
DragDropModule,
ButtonsModule,
InputModule,
ReactiveFormsModule,
UnitsPipe,
TakePipe,
ToAsyncPipe,
AnimationsModule
],
exports: [
DropdownMultiSelectComponent,
SingleSelectItemComponent
]
}]
}] });
class MultiSelectValidators {
static min(min) {
return (control) => {
const arr = control.value && (Array.isArray(control.value) && control.value || control.value.value);
return arr?.length < min ? { min: true } : null;
};
}
static max(max) {
return (control) => {
const arr = control.value && (Array.isArray(control.value) && control.value || control.value.value);
return arr?.length > max ? { max: true } : null;
};
}
}
/**
* Generated bundle index. Do not edit.
*/
export { DropdownMultiSelectComponent, DropdownMultiSelectModule, MultiSelectValidators, SingleSelectItemComponent };
//# sourceMappingURL=obliczeniowo-elementary-dropdown-multi-select.mjs.map