ngx-bimplus-components
Version:
bim+ angular components library
230 lines (222 loc) • 1.85 MB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, inject, signal, Input, ViewEncapsulation, input, computed, booleanAttribute, EventEmitter, Output, model, HostBinding, ElementRef, Directive, ChangeDetectorRef, HostListener, DestroyRef, Pipe, effect, ViewChild, Renderer2, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, InjectionToken, ChangeDetectionStrategy } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, NgTemplateOutlet, AsyncPipe, NgStyle, NgIf, NgForOf, NgClass, APP_BASE_HREF, DecimalPipe, formatDate, DatePipe, NgFor } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import * as i3 from '@ng-select/ng-select';
import { NgSelectModule } from '@ng-select/ng-select';
import * as i1$1 from '@ngx-translate/core';
import { TranslateService, TranslateModule, TranslatePipe } from '@ngx-translate/core';
import { Subject, take, BehaviorSubject, from, concatMap, map, forkJoin, switchMap, of, defaultIfEmpty, first, catchError } from 'rxjs';
import SimpleBar from 'simplebar';
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
import { MatIconModule } from '@angular/material/icon';
import * as i2$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i1$2 from '@angular/material/tree';
import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
import { SelectionModel } from '@angular/cdk/collections';
import * as i3$1 from '@angular/cdk/tree';
import { FlatTreeControl, CdkTreeModule } from '@angular/cdk/tree';
import * as i5 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import moment from 'moment';
import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
import 'moment/min/locales';
import isURL from 'validator/lib/isURL';
import { MatNativeDateModule, MAT_DATE_LOCALE, MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
import { MomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';
import * as i2$2 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import * as Renderer from 'bimplus-renderer';
import * as THREE from 'three';
import { concatMap as concatMap$1 } from 'rxjs/operators';
import * as WebClient from 'bimplus-webclient';
class NgxBimplusComponentsService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxBimplusComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxBimplusComponentsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxBimplusComponentsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class NgxBimplusComponentsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxBimplusComponentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: NgxBimplusComponentsComponent, isStandalone: true, selector: "lib-ngx-bimplus-components", ngImport: i0, template: `
<p>
ngx-bimplus-components works!
</p>
`, isInline: true, styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxBimplusComponentsComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-ngx-bimplus-components', imports: [], template: `
<p>
ngx-bimplus-components works!
</p>
` }]
}] });
class BimplusConnectionDesignerService {
set activeStep(activeStep) {
this._activeStep = activeStep;
this.activeStepChange$.next(this._activeStep);
}
get activeStep() {
return this._activeStep;
}
constructor() {
this._activeStep = 0;
this.activeStepChange$ = new Subject();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusConnectionDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusConnectionDesignerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusConnectionDesignerService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [] });
class BimplusLocalizedWidgetComponent {
constructor() {
this.translateService = inject(TranslateService);
this._selectedLanguage = signal('en');
this._localizedStrings = signal({});
}
get selectedLanguage() {
return this._selectedLanguage();
}
set selectedLanguage(value) {
this._selectedLanguage.set(value);
this.translateService.use(value);
try {
this.translateService.setTranslation(this.selectedLanguage, this._localizedStrings());
}
catch (error) {
console.error(error);
}
}
get localizedStrings() {
return this._localizedStrings();
}
set localizedStrings(value) {
this._localizedStrings.set(value);
this.translateService.use(this.selectedLanguage);
try {
this.translateService.setTranslation(this.selectedLanguage, value);
}
catch (error) {
console.error(error);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusLocalizedWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BimplusLocalizedWidgetComponent, isStandalone: true, selector: "lib-bimplus-localized-widget", inputs: { selectedLanguage: "selectedLanguage", localizedStrings: "localizedStrings" }, providers: [TranslateService], ngImport: i0, template: `
<p>
localized widget works!
</p>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusLocalizedWidgetComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-bimplus-localized-widget', imports: [CommonModule, TranslateModule], providers: [TranslateService], template: `
<p>
localized widget works!
</p>
`, encapsulation: ViewEncapsulation.ShadowDom }]
}], propDecorators: { selectedLanguage: [{
type: Input
}], localizedStrings: [{
type: Input
}] } });
class LoadingSpinnerComponent {
constructor() {
this.spinnerSpinActive = false;
this.spinnerHoverEnabled = false;
this.spinnerDisabled = false;
this.spinnerText = input(undefined);
this.spinnerTexts = input(undefined);
this.isSpinnerTextsArray = computed(() => {
const spinnerTexts = this.spinnerTexts();
return !!(spinnerTexts && typeof spinnerTexts === 'object' && Array.isArray(spinnerTexts) && Boolean(spinnerTexts.length));
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: LoadingSpinnerComponent, isStandalone: true, selector: "lib-loading-spinner", inputs: { spinnerSpinActive: { classPropertyName: "spinnerSpinActive", publicName: "spinnerSpinActive", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, spinnerHoverEnabled: { classPropertyName: "spinnerHoverEnabled", publicName: "spinnerHoverEnabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, spinnerDisabled: { classPropertyName: "spinnerDisabled", publicName: "spinnerDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, spinnerText: { classPropertyName: "spinnerText", publicName: "spinnerText", isSignal: true, isRequired: false, transformFunction: null }, spinnerTexts: { classPropertyName: "spinnerTexts", publicName: "spinnerTexts", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loading-spinner\">\n <div class=\"spinner-conatiner\">\n <div\n class=\"spinner-icon\"\n [class.spinner-spin-active]=\"spinnerSpinActive\"\n [class.spinner-disabled]=\"spinnerDisabled\"\n [class.hover-enabled]=\"spinnerHoverEnabled && !spinnerDisabled\"\n ></div>\n @if (spinnerText(); as spinnerText) {\n <div class=\"spinner-text\" data-test=\"spinner-text\">\n {{ spinnerText }}\n </div>\n }\n @if (isSpinnerTextsArray()) {\n <div class=\"spinner-texts\" data-test=\"spinner-texts\">\n @for (_spinnerText of spinnerTexts(); track _spinnerText) {\n <div class=\"spinner-text\">\n {{ _spinnerText }}\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".loading-spinner{font-family:var(--font-family, \"Source Sans Pro\", Helvetica, Arial, tahoma, sans-serif);font-size:var(--font-size, 1.4rem);font-weight:var(--font-weight, 400);color:var(--loading-spinner-text-color-enabled);position:absolute;min-width:100%;min-height:100%;background-color:var(--loading-spinner-background-color-enabled);display:flex;justify-content:center;align-items:center}.loading-spinner .spinner-conatiner{display:flex;flex-direction:column}@keyframes spin_icon{to{transform:rotate(360deg)}}.loading-spinner .spinner-conatiner>.spinner-icon{min-width:var(--loading-spinner-size, 1rem);min-height:var(--loading-spinner-size, 1rem);background-image:var(--loading-spinner-icon, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M8.9 14.3c-1.8 0-3.5-.9-4.5-2.4L6.3 10H2v4.2l1.3-1.1C4.5 14.9 6.6 16 9 16c3.6 0 6.7-2.5 7-5.9h-1.8c-.3 2.3-2.7 4.2-5.3 4.2zM14.8 5C13.6 3.1 11.4 2 9 2 5.4 2 2.4 4.6 2.1 8h1.7C4.3 5.6 6.5 3.7 9 3.7c1.8 0 3.6 1 4.6 2.4l-2 1.9H16V3.7L14.8 5z\" fill=\"%23444\"/></svg>'));background-size:var(--loading-spinner-size, 1rem);background-repeat:no-repeat;background-position:center center}.loading-spinner .spinner-conatiner>.spinner-icon.hover-enabled:hover{background-image:var(--loading-spinner-hover-icon, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M8.9 14.3c-1.8 0-3.5-.9-4.5-2.4L6.3 10H2v4.2l1.3-1.1C4.5 14.9 6.6 16 9 16c3.6 0 6.7-2.5 7-5.9h-1.8c-.3 2.3-2.7 4.2-5.3 4.2zM14.8 5C13.6 3.1 11.4 2 9 2 5.4 2 2.4 4.6 2.1 8h1.7C4.3 5.6 6.5 3.7 9 3.7c1.8 0 3.6 1 4.6 2.4l-2 1.9H16V3.7L14.8 5z\" fill=\"%23fe5000\"/></svg>'));background-size:var(--loading-spinner-size, 1rem)}.loading-spinner .spinner-conatiner>.spinner-icon.spinner-disabled{background-image:var(--loading-spinner-disabled-icon, url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->%0A<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 18 18\" style=\"enable-background:new 0 0 18 18;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:%23BBBBBB;}%0A<\\/style>%0A<g>%0A%09<g>%0A%09%09<path class=\"st0\" d=\"M8.9,14.3c-1.8,0-3.5-0.9-4.5-2.4l1.9-1.9H2v4.2l1.3-1.1C4.5,14.9,6.6,16,9,16c3.6,0,6.7-2.5,7-5.9h-1.8%0A%09%09%09C13.9,12.4,11.5,14.3,8.9,14.3z M14.8,5C13.6,3.1,11.4,2,9,2C5.4,2,2.4,4.6,2.1,8h1.7C4.3,5.6,6.5,3.7,9,3.7c1.8,0,3.6,1,4.6,2.4%0A%09%09%09L11.6,8H16V3.7L14.8,5z\"/>%0A%09</g>%0A</g>%0A</svg>%0A'));background-size:var(--loading-spinner-size, 1rem)}.loading-spinner .spinner-conatiner>.spinner-spin-active{animation:spin_icon var(--loading-spinner-time, 1.8s) infinite linear}.loading-spinner .spinner-conatiner>.spinner-text{text-align:center}.loading-spinner .spinner-conatiner>.spinner-texts>.spinner-text{text-align:center}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-loading-spinner', template: "<div class=\"loading-spinner\">\n <div class=\"spinner-conatiner\">\n <div\n class=\"spinner-icon\"\n [class.spinner-spin-active]=\"spinnerSpinActive\"\n [class.spinner-disabled]=\"spinnerDisabled\"\n [class.hover-enabled]=\"spinnerHoverEnabled && !spinnerDisabled\"\n ></div>\n @if (spinnerText(); as spinnerText) {\n <div class=\"spinner-text\" data-test=\"spinner-text\">\n {{ spinnerText }}\n </div>\n }\n @if (isSpinnerTextsArray()) {\n <div class=\"spinner-texts\" data-test=\"spinner-texts\">\n @for (_spinnerText of spinnerTexts(); track _spinnerText) {\n <div class=\"spinner-text\">\n {{ _spinnerText }}\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".loading-spinner{font-family:var(--font-family, \"Source Sans Pro\", Helvetica, Arial, tahoma, sans-serif);font-size:var(--font-size, 1.4rem);font-weight:var(--font-weight, 400);color:var(--loading-spinner-text-color-enabled);position:absolute;min-width:100%;min-height:100%;background-color:var(--loading-spinner-background-color-enabled);display:flex;justify-content:center;align-items:center}.loading-spinner .spinner-conatiner{display:flex;flex-direction:column}@keyframes spin_icon{to{transform:rotate(360deg)}}.loading-spinner .spinner-conatiner>.spinner-icon{min-width:var(--loading-spinner-size, 1rem);min-height:var(--loading-spinner-size, 1rem);background-image:var(--loading-spinner-icon, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M8.9 14.3c-1.8 0-3.5-.9-4.5-2.4L6.3 10H2v4.2l1.3-1.1C4.5 14.9 6.6 16 9 16c3.6 0 6.7-2.5 7-5.9h-1.8c-.3 2.3-2.7 4.2-5.3 4.2zM14.8 5C13.6 3.1 11.4 2 9 2 5.4 2 2.4 4.6 2.1 8h1.7C4.3 5.6 6.5 3.7 9 3.7c1.8 0 3.6 1 4.6 2.4l-2 1.9H16V3.7L14.8 5z\" fill=\"%23444\"/></svg>'));background-size:var(--loading-spinner-size, 1rem);background-repeat:no-repeat;background-position:center center}.loading-spinner .spinner-conatiner>.spinner-icon.hover-enabled:hover{background-image:var(--loading-spinner-hover-icon, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M8.9 14.3c-1.8 0-3.5-.9-4.5-2.4L6.3 10H2v4.2l1.3-1.1C4.5 14.9 6.6 16 9 16c3.6 0 6.7-2.5 7-5.9h-1.8c-.3 2.3-2.7 4.2-5.3 4.2zM14.8 5C13.6 3.1 11.4 2 9 2 5.4 2 2.4 4.6 2.1 8h1.7C4.3 5.6 6.5 3.7 9 3.7c1.8 0 3.6 1 4.6 2.4l-2 1.9H16V3.7L14.8 5z\" fill=\"%23fe5000\"/></svg>'));background-size:var(--loading-spinner-size, 1rem)}.loading-spinner .spinner-conatiner>.spinner-icon.spinner-disabled{background-image:var(--loading-spinner-disabled-icon, url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->%0A<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 18 18\" style=\"enable-background:new 0 0 18 18;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:%23BBBBBB;}%0A<\\/style>%0A<g>%0A%09<g>%0A%09%09<path class=\"st0\" d=\"M8.9,14.3c-1.8,0-3.5-0.9-4.5-2.4l1.9-1.9H2v4.2l1.3-1.1C4.5,14.9,6.6,16,9,16c3.6,0,6.7-2.5,7-5.9h-1.8%0A%09%09%09C13.9,12.4,11.5,14.3,8.9,14.3z M14.8,5C13.6,3.1,11.4,2,9,2C5.4,2,2.4,4.6,2.1,8h1.7C4.3,5.6,6.5,3.7,9,3.7c1.8,0,3.6,1,4.6,2.4%0A%09%09%09L11.6,8H16V3.7L14.8,5z\"/>%0A%09</g>%0A</g>%0A</svg>%0A'));background-size:var(--loading-spinner-size, 1rem)}.loading-spinner .spinner-conatiner>.spinner-spin-active{animation:spin_icon var(--loading-spinner-time, 1.8s) infinite linear}.loading-spinner .spinner-conatiner>.spinner-text{text-align:center}.loading-spinner .spinner-conatiner>.spinner-texts>.spinner-text{text-align:center}\n"] }]
}], propDecorators: { spinnerSpinActive: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], spinnerHoverEnabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], spinnerDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class BimplusSidenavDrawerContentComponent {
constructor() {
this.header = input('');
this.isLoading = input(false);
this.loadingSpinnerText = "";
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusSidenavDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BimplusSidenavDrawerContentComponent, isStandalone: true, selector: "lib-bimplus-sidenav-drawer-content", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingSpinnerText: { classPropertyName: "loadingSpinnerText", publicName: "loadingSpinnerText", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sidenav-drawer-content-layout\">\n @if (header(); as header) {\n <div class=\"sidenav-drawer-header\">\n <div class=\"sidenav-drawer-header-title\">\n <span>{{ header }}</span>\n </div>\n </div>\n }\n\n <div class=\"sidenav-drawer-content-offset\">\n <ng-content></ng-content>\n </div>\n @if(isLoading()){\n <div class=\"sidenav-drawer-loading-overlay\">\n <lib-loading-spinner\n [spinnerHoverEnabled]=\"false\"\n [spinnerSpinActive]=\"true\"\n [spinnerDisabled]=\"false\"\n [spinnerText]=\"loadingSpinnerText\"\n >\n </lib-loading-spinner>\n </div>\n }\n</div>\n", styles: [".sidenav-drawer-content-layout{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;width:100%;max-height:100%;min-height:0}.sidenav-drawer-content-layout>.sidenav-drawer-header{flex:0;width:100%;background-color:var(--sidenav-drawer-content-header-background-color-enabled);transition:background-color .7s;display:inline-block}.sidenav-drawer-content-layout>.sidenav-drawer-header>.sidenav-drawer-header-title{font-size:1.8rem;flex-shrink:0;height:2.4rem;line-height:2.4rem;font-weight:600;padding-left:1.4rem;padding-bottom:0;margin-top:1rem;margin-bottom:1.2rem;overflow:hidden}.sidenav-drawer-content-layout>.sidenav-drawer-content-offset{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;max-height:100%;min-height:0;margin:var(--sidenav-drawer-content-offset, .8rem)}.sidenav-drawer-content-layout>.sidenav-drawer-loading-overlay{position:absolute;top:4.6rem;left:0;min-width:100%;min-height:100%;z-index:4}.sidenav-drawer-content-layout>.sidenav-drawer-loading-overlay>lib-loading-spinner{--background-color: var(--sidenav-drawer-loading-spinner-background-color-enabled);--loading-spinner-size: 6rem;--loading-spinner-time: 1.8s;--color: var(--sidenav-drawer-loading-spinner-text-color-enabled)}\n"], dependencies: [{ kind: "component", type: LoadingSpinnerComponent, selector: "lib-loading-spinner", inputs: ["spinnerSpinActive", "spinnerHoverEnabled", "spinnerDisabled", "spinnerText", "spinnerTexts"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusSidenavDrawerContentComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-bimplus-sidenav-drawer-content', imports: [
LoadingSpinnerComponent
], encapsulation: ViewEncapsulation.None, template: "<div class=\"sidenav-drawer-content-layout\">\n @if (header(); as header) {\n <div class=\"sidenav-drawer-header\">\n <div class=\"sidenav-drawer-header-title\">\n <span>{{ header }}</span>\n </div>\n </div>\n }\n\n <div class=\"sidenav-drawer-content-offset\">\n <ng-content></ng-content>\n </div>\n @if(isLoading()){\n <div class=\"sidenav-drawer-loading-overlay\">\n <lib-loading-spinner\n [spinnerHoverEnabled]=\"false\"\n [spinnerSpinActive]=\"true\"\n [spinnerDisabled]=\"false\"\n [spinnerText]=\"loadingSpinnerText\"\n >\n </lib-loading-spinner>\n </div>\n }\n</div>\n", styles: [".sidenav-drawer-content-layout{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;width:100%;max-height:100%;min-height:0}.sidenav-drawer-content-layout>.sidenav-drawer-header{flex:0;width:100%;background-color:var(--sidenav-drawer-content-header-background-color-enabled);transition:background-color .7s;display:inline-block}.sidenav-drawer-content-layout>.sidenav-drawer-header>.sidenav-drawer-header-title{font-size:1.8rem;flex-shrink:0;height:2.4rem;line-height:2.4rem;font-weight:600;padding-left:1.4rem;padding-bottom:0;margin-top:1rem;margin-bottom:1.2rem;overflow:hidden}.sidenav-drawer-content-layout>.sidenav-drawer-content-offset{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;max-height:100%;min-height:0;margin:var(--sidenav-drawer-content-offset, .8rem)}.sidenav-drawer-content-layout>.sidenav-drawer-loading-overlay{position:absolute;top:4.6rem;left:0;min-width:100%;min-height:100%;z-index:4}.sidenav-drawer-content-layout>.sidenav-drawer-loading-overlay>lib-loading-spinner{--background-color: var(--sidenav-drawer-loading-spinner-background-color-enabled);--loading-spinner-size: 6rem;--loading-spinner-time: 1.8s;--color: var(--sidenav-drawer-loading-spinner-text-color-enabled)}\n"] }]
}], propDecorators: { loadingSpinnerText: [{
type: Input
}] } });
const BimplusButtonType = {
FILE: 'file',
TEXT: 'text'
};
class BimplusButtonsRowComponent extends BimplusLocalizedWidgetComponent {
constructor() {
super(...arguments);
this.BimplusButtonType = BimplusButtonType;
this.isMultiple = false;
this.items = input([]);
this.canUpdateObject = input(false);
this.fileChanged = new EventEmitter();
this.buttonClicked = new EventEmitter();
}
onChange(event, inputElement) {
const files = event.target.files;
if (files) {
this.fileChanged.emit(files);
// reset value to be able select same value again
inputElement.value = '';
}
}
_buttonClicked(item) {
if (item.disabled && this.isObservable(item.disabled)) {
// evaluate observable once
item.disabled.pipe(take(1)).subscribe((disabled) => {
if (!disabled) {
this.buttonClicked.emit({ id: item.id });
}
});
return;
}
if (item.disabled) {
return;
}
this.buttonClicked.emit({ id: item.id });
}
isObservable(value) {
return typeof value === 'object' && 'subscribe' in value;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusButtonsRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BimplusButtonsRowComponent, isStandalone: true, selector: "lib-bimplus-buttons-row", inputs: { isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, canUpdateObject: { classPropertyName: "canUpdateObject", publicName: "canUpdateObject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChanged: "fileChanged", buttonClicked: "buttonClicked" }, usesInheritance: true, ngImport: i0, template: "<div class=\"button-row\">\n @for(item of items(); track item.id; let last=$last; let first=$first;) {\n @switch(item.type) {\n @case (BimplusButtonType.FILE) {\n <ng-container\n *ngTemplateOutlet=\"fileButton; context: { $implicit: item, last, first }\"\n ></ng-container>\n } @default {\n <ng-container\n *ngTemplateOutlet=\"button; context: { $implicit: item, last, first }\"\n ></ng-container>\n }\n }\n }\n</div>\n\n<ng-template #fileButton let-item let-last=\"last\" let-first=\"first\">\n <input\n #fileInput\n hidden\n type=\"file\"\n (change)=\"onChange($event, fileInput)\"\n [id]=\"item.id\"\n [attr.multiple]=\"isMultiple ? true : null\"\n />\n <ng-container\n *ngTemplateOutlet=\"\n button;\n context: { $implicit: item, last, first, fileInput }\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template\n #button\n let-item\n let-last=\"last\"\n let-first=\"first\"\n let-fileInput=\"fileInput\"\n>\n <button\n data-test=\"button\"\n [class.last]=\"last\"\n [class.first]=\"first\"\n [class.primary-button]=\"\n item.buttonStyle === undefined || item.buttonStyle === 'primary'\n \"\n [class.secondary-button]=\"item.buttonStyle === 'secondary'\"\n [class.text-button]=\"\n item.buttonType === undefined || item.buttonType === 'text'\n \"\n [class.icon-button]=\"item.buttonType === 'icon'\"\n [class.combined-button]=\"item.buttonType === 'combined'\"\n [class.disabled]=\"item.disabled === true\"\n (click)=\"fileInput ? fileInput.click() : _buttonClicked(item)\"\n title=\"{{ item.tooltip }}\"\n [disabled]=\"isObservable(item.disabled) ? !!(item.disabled | async) : !!item.disabled\"\n >\n {{ item.title }}\n </button>\n</ng-template>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:var(--select-container-open-background-color-enabled);border-color:var(--select-container-open-border-color-enabled)}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent var(--select-container-open-arrow-border-color-enabled);border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent var(--select-container-open-arrow-border-color-hovered)}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-disabled>.ng-select-container{background-color:var(--select-container-background-color-disabled)}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:var(--select-container-text-color-enabled);background-color:var(--select-container-background-color-enabled);border-radius:0;border:1px solid var(--select-container-border-color-enabled);min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px 0 var(--select-container-box-shadow-color-hovered);background-color:var(--select-container-background-color-hovered)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--select-container-placeholder-text-color-enabled)}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:var(--select-multiple-disabled-container-value-background-color-enabled);border:1px solid var(--select-multiple-disabled-container-value-border-color-enabled)}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:var(--select-multiple-container-value-text-color-enabled);background-color:var(--select-multiple-container-value-background-color-enabled);border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:var(--select-multiple-container-value-background-color-disabled)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:var(--select-multiple-container-value-icon-background-color-hovered)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid var(--select-multiple-container-value-icon-left-border-color-enbabled)}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid var(--select-multiple-container-value-icon-left-border-color-enbabled);border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid var(--select-multiple-container-value-icon-right-border-color-enbabled)}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid var(--select-multiple-container-value-icon-right-border-color-enbabled)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:var(--select-multiple-container-value-input-text-color-enabled)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:var(--select-clear-wrapper-text-color-enabled)}.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--select-clear-wrapper-text-color-hovered)}.ng-select .ng-clear-wrapper:focus .ng-clear{color:var(--select-clear-wrapper-text-color-focused)}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:var(--select-arrow-wrapper-border-color-hovored)}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--select-arrow-wrapper-border-color-enabled) transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:var(--dropdown-panel-background-color-enabled);border:1px solid var(--dropdown-panel-border-color-enabled);box-shadow:0 1px 0 var(--dropdown-panel-box-shadow-color-enabled);left:0}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:var(--dropdown-panel-select-top-border-color-enabled);margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel.ng-select-right{left:100%;top:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:var(--dropdown-panel-select-right-border-color-enabled);margin-bottom:-1px}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-color:var(--dropdown-panel-select-bottom-border-color-enabled);margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-dropdown-panel.ng-select-left{left:-100%;top:0;border-top-left-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:var(--dropdown-panel-select-left-border-color-enabled);margin-bottom:-1px}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid var(--dropdown-panel-header-border-color-enabled);padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid var(--dropdown-panel-footer-border-color-enabled);padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:var(--dropdown-panel-items-text-color-enabled);cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:var(--dropdown-panel-items-marked-background-color-enabled)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:var(--dropdown-panel-items-option-selected-text-color-enabled);background-color:var(--dropdown-panel-items-option-selected-background-color-enabled);font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:var(--dropdown-panel-items-option-background-color-enabled);color:var(--dropdown-panel-items-option-text-color-enabled);padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--dropdown-panel-items-option-selected2-text-color-enabled);background-color:var(--dropdown-panel-items-option-selected2-background-color-enabled)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--dropdown-panel-items-marked-background-color-enabled);color:var(--dropdown-panel-items-marked-text-color-enabled)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:var(--dropdown-panel-items-text-color-disabled)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}.button-row{display:flex;margin-left:var(--button-row-margin-left, 0);margin-right:var(--button-row-margin-right, 0);margin-top:var(--button-row-margin-top, .8rem);margin-bottom:var(--button-row-margin-bottom, .8rem);justify-content:flex-end}.button-row>.primary-button,.button-row>.secondary-button{padding:.2rem 1rem .4rem}.button-row>.primary-button{text-transform:uppercase;font-family:var(--font-family, \"Source Sans Pro\", Helvetica, Arial, tahoma, sans-serif);font-size:var(--font-size, 1.2rem);font-weight:var(--font-weight, 700);display:inline-block;height:var(--button-height, 2.4rem);white-space:nowrap;border-radius:var(--button-border-style, .2rem);vertical-align:middle;border-color:var(--primary-button-border-color-enabled);border-style:var(--button-border-style, solid);border-width:var(--button-border-style, .2rem);color:var(--primary-button-text-color-enabled);background-color:var(--primary-button-background-color-enabled);cursor:pointer;margin-right:var(--buttons-spacing, .8rem)}.button-row>.primary-button.last{margin-right:0}.button-row>.primary-button:hover{border-color:var(--primary-button-border-color-hovered);color:var(--primary-button-text-color-hovered);background-color:var(--primary-button-background-color-hovered);outline:0}.button-row>.primary-button:focus{border-color:var(--primary-button-border-color-focused);color:var(--primary-button-text-color-focused);background-color:var(--primary-button-background-color-focused);outline:0}.button-row>.primary-button.disabled,.button-row>.primary-button:disabled,.button-row>.primary-button:disabled:active,.button-row>.primary-button.disabled:active{border-color:var(--primary-button-border-color-disabled);color:var(--primary-button-text-color-disabled);background-color:var(--primary-button-background-color-disabled);cursor:default}.button-row>.primary-button:active{border-color:var(--primary-button-border-color-pressed);color:var(--primary-button-text-color-pressed);background-color:var(--primary-button-background-color-pressed);cursor:default}.button-row>.secondary-button{text-transform:uppercase;font-family:var(--font-family, \"Source Sans Pro\", Helvetica, Arial, tahoma, sans-serif);font-size:var(--font-size, 1.2rem);font-weight:var(--font-weight, 700);display:inline-block;height:var(--button-height, 2.4rem);white-space:nowrap;border-radius:var(--button-border-style, .2rem);vertical-align:middle;border-style:var(--button-border-style, solid);border-width:var(--button-border-style, .2rem);border-color:var(--secondary-button-border-color-enabled);color:var(--secondary-button-text-color-enabled);background-color:var(--secondary-button-background-color-enabled);cursor:pointer;margin-right:var(--buttons-spacing, .8rem)}.button-row>.secondary-button.last{margin-right:0}.button-row>.secondary-button:hover{border:.2rem solid;border-color:var(--secondary-button-border-color-hovered);color:var(--secondary-button-text-color-hovered);background-color:var(--secondary-button-background-color-hovered);outline:0}.button-row>.secondary-button:focus{border:.2rem solid;border-color:var(--secondary-button-border-color-focused);color:var(--secondary-button-text-color-focused);background-color:var(--secondary-button-background-color-focused);outline:0}.button-row>.secondary-button.disabled,.button-row>.secondary-button:disabled,.button-row>.secondary-button:disabled:active,.button-row>.secondary-button.disabled:active{border:solid .2rem;border-color:var(--secondary-button-border-color-disabled);color:var(--secondary-button-text-color-disabled);background-color:var(--secondary-button-background-color-disabled);cursor:default}.button-row>.secondary-button:active{border:solid .2rem;border-color:var(--secondary-button-border-color-pressed);color:var(--secondary-button-text-color-pressed);background-color:var(--secondary-button-background-color-pressed);cursor:default}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BimplusButtonsRowComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-bimplus-buttons-row', imports: [NgTemplateOutlet, AsyncPipe], encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"button-row\">\n @for(item of items(); track item.id; let last=$last; let first=$first;) {\n @switch(item.type) {\n @case (BimplusButtonType.FILE) {\n <ng-container\n *ngTemplateOutlet=\"fileButton; context: { $implicit: item, last, first }\"\n ></ng-container>\n } @default {\n <ng-container\n *ngTemplateOutlet=\"button; context: { $implicit: item, last, first }\"\n ></ng-container>\n }\n }\n }\n</div>\n\n<ng-template #fileButton let-item let-last=\"last\" let-first=\"first\">\n <input\n #fileInput\n hidden\n type=\"file\"\n (change)=\"onChange($event, fileInput)\"\n [id]=\"item.id\"\n [attr.multiple]=\"isMultiple ? true : null\"\n />\n <ng-container\n *ngTemplateOutlet=\"\n button;\n context: { $implicit: item, last, first, fileInput }\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template\n #button\n let-item\n let-last=\"last\"\n let-first=\"first\"\n let-fileInput=\"fileInput\"\n>\n <button\n data-test=\"button\"\n [class.last]=\"last\"\n [class.first]=\"first\"\n [class.primary-button]=\"\n item.buttonStyle === undefined || item.buttonStyle === 'primary'\n \"\n [class.secondary-button]=\"item.buttonStyle === 'secondary'\"\n [class.text-button]=\"\n item.buttonType === undefined || item.buttonType === 'text'\n \"\n [class.icon-button]=\"item.buttonType === 'icon'\"\n [class.combined-button]=\"item.buttonType === 'combined'\"\n [class.disabled]=\"item.disabled === true\"\n (click)=\"fileInput ? fileInput.click() : _buttonClicked(item)\"\n title=\"{{ item.tooltip }}\"\n [disabled]=\"isObservable(item.disabled) ? !!(item.disabled | async) : !!item.disabled\"\n >\n {{ item.title }}\n </button>\n</ng-template>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:var(--select-container-open-background-color-enabled);border-color:var(--select-container-open-border-color-enabled)}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent var(--select-container-open-arrow-border-color-enabled);border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent var(--select-container-open-arrow-border-color-hovered)}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-disabled>.ng-select-container{background-color:var(--select-container-background-color-disabled)}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:var(--select-container-text-color-enabled);background-color:var(--select-container-background-color-enabled);border-radius:0;border:1px solid var(--select-container-border-color-enabled);min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px 0 var(--select-container-box-shadow-color-hovered);background-color:var(--select-container-background-color-hovered)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--select-container-placeholder-text-color-enabled)}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:var(--select-multiple-disabled-container-value-background-color-enabled);border:1px solid var(--select-multiple-disabled-container-value-border-color-enabled)}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:var(--select-multiple-container-value-text-color-enabled);background-color:var(--select-multiple-container-value-background-color-enabled);border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:var(--select-multiple-container-value-background-color-disabled)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:var(--select-multiple-container-value-icon-background-color-hovered)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid var(--select-multiple-container-value-icon-left-border-color-enbabled)}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid var(--select-multiple-container-value-icon-left-border-color-enbabled);border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid var(--select-multiple-container-value-icon-right-border-color-enbabled)}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid var(--select-multiple-container-value-icon-right-border-color-enbabled)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:var(--select-multiple-container-value-input-text-color-enabled)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:var(--select-clear-wrapper-text-color-enabled)}.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--select-clear-wrapper-text-color-hovered)}.ng-select .ng-clear-wrapper:focus .ng-clear{color:var(--select-clear-wrapper-text-color-focused)}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{pa