@obliczeniowo/elementary
Version:
Library made in Angular version 19
297 lines (291 loc) • 32.5 kB
JavaScript
import * as i1 from '@obliczeniowo/elementary/input';
import { InputModule } from '@obliczeniowo/elementary/input';
import * as i6 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i3 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import * as i4 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Output, HostListener, input, Input, HostBinding, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Animations } from '@obliczeniowo/elementary/animations';
import * as i5 from '@angular/forms';
import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { cloneDeep } from 'lodash';
import { DefaultSearchDomain } from '@obliczeniowo/elementary/classes';
class DragBarComponent {
touchedDragBar = false;
// tslint:disable-next-line: no-output-on-prefix
onTouched = new EventEmitter();
// tslint:disable-next-line: no-output-on-prefix
onClose = new EventEmitter();
click(event) {
this.touchedDragBar = true;
this.onTouched.emit(this.touchedDragBar);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DragBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: DragBarComponent, isStandalone: false, selector: "obl-drag-bar", outputs: { onTouched: "onTouched", onClose: "onClose" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0, template: "<div [class.touched]=\"touchedDragBar\"></div>\r\n@if (touchedDragBar) {\r\n <button (click)=\"onClose.emit()\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 6.3499999 6.3500002\">\r\n <path\r\n d=\"M 6 3 L 4 5 L 10.5 11.5 L 4 18 L 6 20 L 12.5 13.5 L 19 20 L 21 18 L 14.5 11.5 L 21 5 L 19 3 L 12.5 9.5 L 6 3 z \"\r\n transform=\"scale(0.26458333)\"\r\n />\r\n </svg>\r\n </button>\r\n}\r\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;align-items:center;height:15px;cursor:move;border-radius:5px 5px 0 0}:host div{margin:0 5px;border-top:1.5px solid var(--default-border-color);border-bottom:1.5px solid var(--default-border-color);width:100%;height:2px}:host div.touched{margin:0 0 0 5px}:host button{width:15px;height:15px;margin-left:5px}:host:hover{background-color:var(--default-hover-color)}path{fill:var(--default-text-color)}button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;display:flex;align-items:center}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DragBarComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-drag-bar', standalone: false, template: "<div [class.touched]=\"touchedDragBar\"></div>\r\n@if (touchedDragBar) {\r\n <button (click)=\"onClose.emit()\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 6.3499999 6.3500002\">\r\n <path\r\n d=\"M 6 3 L 4 5 L 10.5 11.5 L 4 18 L 6 20 L 12.5 13.5 L 19 20 L 21 18 L 14.5 11.5 L 21 5 L 19 3 L 12.5 9.5 L 6 3 z \"\r\n transform=\"scale(0.26458333)\"\r\n />\r\n </svg>\r\n </button>\r\n}\r\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;align-items:center;height:15px;cursor:move;border-radius:5px 5px 0 0}:host div{margin:0 5px;border-top:1.5px solid var(--default-border-color);border-bottom:1.5px solid var(--default-border-color);width:100%;height:2px}:host div.touched{margin:0 0 0 5px}:host button{width:15px;height:15px;margin-left:5px}:host:hover{background-color:var(--default-hover-color)}path{fill:var(--default-text-color)}button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;display:flex;align-items:center}\n"] }]
}], propDecorators: { onTouched: [{
type: Output
}], onClose: [{
type: Output
}], click: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class DropdownSelectComponent {
settings;
touchedDragBar = false;
/**
* 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 = input(new DefaultSearchDomain([]));
items;
/** Label to display over the field (default undefined so it will have no label at all) */
label = input();
/**
* Enable type text animation for label
*/
labelAnimation = false;
/** Template for suffix, if exist display after select item */
templateSuffix = input();
/** Template for prefix, if exist display before select item */
templatePrefix = input();
/** Define if search control should shows up */
search = false;
regExp;
/** */
select;
/** disable choosing element, search (if added) is available and dropdown list too */
disabled = false;
/** emit when selected item is changed by user */
changed = new EventEmitter();
/** search control */
searchControl = new FormControl('');
/** selected item */
selected;
/** define if list is opened */
isOpen = false;
/** define if element is touched */
touched = false;
subscription;
constructor(settings) {
this.settings = settings;
this.subscription = this.searchControl.valueChanges
.pipe(debounceTime(500))
.subscribe((value) => {
this.model().search(value);
});
this.labelAnimation = this.settings.labelAnimation.select;
}
onChange = (value) => { };
onTouched = () => { };
registerOnValidatorChange(fn) {
this.onChange = fn;
}
toggleReg() {
this.model().regExpOn = !this.model().regExpOn;
this.model().search(this.searchControl.getRawValue());
}
writeValue(id) {
const select = this.model().filtered.find((item) => item.id === id);
if (select) {
this.selected = select;
this.select = select.id;
}
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
markAsTouched() {
if (this.disabled) {
return;
}
if (!this.touched) {
this.onTouched();
this.touched = true;
}
}
ngOnInit() {
if (!this.selected && this.model().filtered.length) {
this.selected =
this.select !== undefined
// eslint-disable-next-line eqeqeq
? this.model().filtered.find((item) => item.id == this.select)
: this.model().filtered[0];
}
}
ngOnChanges(changes) {
if (changes.items) {
this.model().items = this.items;
this.model().filtered = this.items;
if (this.selected &&
!this.model().items.find((item) => item.id === this.selected?.id)) {
this.selected = undefined;
}
}
if (changes.select) {
this.selected =
this.select !== undefined
// eslint-disable-next-line eqeqeq
? this.model().filtered.find((item) => item.id == this.select)
: this.model().filtered[0];
}
if (changes.regExp) {
if (this.regExp) {
this.model().regExpOn = this.regExp.on || false;
this.model().search(this.searchControl.getRawValue());
}
}
if (changes.search && !changes.search.firstChange) {
if (!this.search) {
this.searchControl.setValue('');
this.model().search(this.searchControl.getRawValue());
}
}
}
ngOnDestroy() {
if (this.subscription?.closed) {
this.subscription.unsubscribe();
}
}
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;
}
this.selected = item;
this.onChange(this.selected.id);
this.close(dragBar.touchedDragBar);
this.changed.emit({
...this.selected,
templateData: this.selected.templateData
? cloneDeep(this.selected.templateData)
: undefined,
});
}
onTouchedDragBar(touched, element) {
this.touchedDragBar = touched;
element.parentElement.style.width = 0;
}
setDisabledState(disabled) {
this.disabled = disabled;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownSelectComponent, deps: [{ token: i1.InputWrappersDefaultSettingsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: DropdownSelectComponent, isStandalone: false, selector: "obl-dropdown-select", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelAnimation: { classPropertyName: "labelAnimation", publicName: "labelAnimation", isSignal: false, isRequired: false, transformFunction: null }, templateSuffix: { classPropertyName: "templateSuffix", publicName: "templateSuffix", isSignal: true, isRequired: false, transformFunction: null }, templatePrefix: { classPropertyName: "templatePrefix", publicName: "templatePrefix", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, regExp: { classPropertyName: "regExp", publicName: "regExp", isSignal: false, isRequired: false, transformFunction: null }, select: { classPropertyName: "select", publicName: "select", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: DropdownSelectComponent,
},
], usesOnChanges: true, ngImport: i0, template: "<obl-input-wrapper\r\n [label]=\"label() || ''\"\r\n [labelAnimation]=\"labelAnimation\"\r\n class=\"select-content\"\r\n cdkOverlayOrigin\r\n #dropDown=\"cdkOverlayOrigin\"\r\n #parent\r\n>\r\n @if (templatePrefix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templatePrefix()!; context: { $implicit: selected }\"\r\n ></ng-container>\r\n }\r\n <input\r\n type=\"text\"\r\n readonly\r\n oblInput\r\n [value]=\"(selected && selected.text) || ''\"\r\n (click)=\"toggle($event, false)\"\r\n />\r\n @if (templateSuffix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: selected }\"\r\n ></ng-container>\r\n }\r\n <ng-content select=\"[suffix]\"></ng-content>\r\n <obl-expand-button\r\n [isOpen]=\"isOpen\"\r\n class=\"dropdown\"\r\n (click)=\"toggle($event, false)\"\r\n ></obl-expand-button>\r\n</obl-input-wrapper>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"dropDown\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n [cdkConnectedOverlayOffsetX]=\"2\"\r\n (overlayOutsideClick)=\"toggle($event)\"\r\n>\r\n <div\r\n class=\"dropdown-list\"\r\n [class.disabled]=\"disabled\"\r\n [style.min-width.px]=\"parent.elementRef.nativeElement.clientWidth - 7\"\r\n #list\r\n cdkDrag\r\n >\r\n <obl-drag-bar\r\n (onTouched)=\"onTouchedDragBar($event, list)\"\r\n (onClose)=\"close(false)\"\r\n cdkDragHandle\r\n #dragBar\r\n ></obl-drag-bar>\r\n @if (search) {\r\n <obl-input-wrapper\r\n [display]=\"'underlined'\"\r\n [cancellable]=\"true\"\r\n >\r\n <input oblInput type=\"search\" [formControl]=\"searchControl\" />\r\n @if (regExp) {\r\n <button\r\n oblButton\r\n [selected]=\"model().regExpOn\"\r\n (click)=\"toggleReg()\"\r\n >\r\n Reg\r\n </button>\r\n }\r\n </obl-input-wrapper>\r\n }\r\n <div class=\"list\">\r\n @for (item of model().filtered; track item.id) {\r\n @if (item !== selected) {\r\n <div\r\n class=\"item-container\"\r\n (click)=\"onSelect(item, dragBar)\"\r\n >\r\n @if (templatePrefix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templatePrefix()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n <div class=\"item\">{{ item.text }}</div>\r\n @if(templateSuffix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\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{font-size:var(--obl-font-size);display:flex}:host.disabled{color:var(--disabled-color)}.select-content{display:flex;width:100%}.select-content input{width:100%;outline:none}.select-content :focus{border:1px dotted var(--default-focus-color)}.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.disabled{color:var(--disabled-color)}.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}.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}\n"], dependencies: [{ 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: "directive", type: i4.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: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i6.ExpandButtonComponent, selector: "obl-expand-button", inputs: ["isOpen"] }, { kind: "directive", type: i6.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: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DragBarComponent, selector: "obl-drag-bar", outputs: ["onTouched", "onClose"] }], animations: [Animations.rotate180deg] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-dropdown-select', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: DropdownSelectComponent,
},
], animations: [Animations.rotate180deg], standalone: false, template: "<obl-input-wrapper\r\n [label]=\"label() || ''\"\r\n [labelAnimation]=\"labelAnimation\"\r\n class=\"select-content\"\r\n cdkOverlayOrigin\r\n #dropDown=\"cdkOverlayOrigin\"\r\n #parent\r\n>\r\n @if (templatePrefix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templatePrefix()!; context: { $implicit: selected }\"\r\n ></ng-container>\r\n }\r\n <input\r\n type=\"text\"\r\n readonly\r\n oblInput\r\n [value]=\"(selected && selected.text) || ''\"\r\n (click)=\"toggle($event, false)\"\r\n />\r\n @if (templateSuffix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: selected }\"\r\n ></ng-container>\r\n }\r\n <ng-content select=\"[suffix]\"></ng-content>\r\n <obl-expand-button\r\n [isOpen]=\"isOpen\"\r\n class=\"dropdown\"\r\n (click)=\"toggle($event, false)\"\r\n ></obl-expand-button>\r\n</obl-input-wrapper>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"dropDown\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n [cdkConnectedOverlayOffsetX]=\"2\"\r\n (overlayOutsideClick)=\"toggle($event)\"\r\n>\r\n <div\r\n class=\"dropdown-list\"\r\n [class.disabled]=\"disabled\"\r\n [style.min-width.px]=\"parent.elementRef.nativeElement.clientWidth - 7\"\r\n #list\r\n cdkDrag\r\n >\r\n <obl-drag-bar\r\n (onTouched)=\"onTouchedDragBar($event, list)\"\r\n (onClose)=\"close(false)\"\r\n cdkDragHandle\r\n #dragBar\r\n ></obl-drag-bar>\r\n @if (search) {\r\n <obl-input-wrapper\r\n [display]=\"'underlined'\"\r\n [cancellable]=\"true\"\r\n >\r\n <input oblInput type=\"search\" [formControl]=\"searchControl\" />\r\n @if (regExp) {\r\n <button\r\n oblButton\r\n [selected]=\"model().regExpOn\"\r\n (click)=\"toggleReg()\"\r\n >\r\n Reg\r\n </button>\r\n }\r\n </obl-input-wrapper>\r\n }\r\n <div class=\"list\">\r\n @for (item of model().filtered; track item.id) {\r\n @if (item !== selected) {\r\n <div\r\n class=\"item-container\"\r\n (click)=\"onSelect(item, dragBar)\"\r\n >\r\n @if (templatePrefix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templatePrefix()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n <div class=\"item\">{{ item.text }}</div>\r\n @if(templateSuffix()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"templateSuffix()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\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{font-size:var(--obl-font-size);display:flex}:host.disabled{color:var(--disabled-color)}.select-content{display:flex;width:100%}.select-content input{width:100%;outline:none}.select-content :focus{border:1px dotted var(--default-focus-color)}.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.disabled{color:var(--disabled-color)}.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}.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}\n"] }]
}], ctorParameters: () => [{ type: i1.InputWrappersDefaultSettingsService }], propDecorators: { items: [{
type: Input
}], labelAnimation: [{
type: Input
}], search: [{
type: Input
}], regExp: [{
type: Input
}], select: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], changed: [{
type: Output
}] } });
class DropdownSelectModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: DropdownSelectModule, declarations: [DropdownSelectComponent,
DragBarComponent], imports: [CommonModule,
OverlayModule,
DragDropModule,
FormsModule,
ButtonsModule,
InputModule,
ReactiveFormsModule], exports: [DropdownSelectComponent,
DragBarComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownSelectModule, imports: [CommonModule,
OverlayModule,
DragDropModule,
FormsModule,
ButtonsModule,
InputModule,
ReactiveFormsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownSelectModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DropdownSelectComponent,
DragBarComponent
],
imports: [
CommonModule,
OverlayModule,
DragDropModule,
FormsModule,
ButtonsModule,
InputModule,
ReactiveFormsModule
],
exports: [
DropdownSelectComponent,
DragBarComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DragBarComponent, DropdownSelectComponent, DropdownSelectModule };
//# sourceMappingURL=obliczeniowo-elementary-dropdown-select.mjs.map