@biit-solutions/wizardry-theme 1.21.34

package/fesm2020/biit-solutions-wizardry-theme-inputs.mjs

@@ -0,0 +1,2313 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Component, Input, Output, NgModule, ContentChildren, Pipe, HostListener, ViewEncapsulation, ViewChild, HostBinding } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@ngneat/transloco';
+import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i3 from '@biit-solutions/wizardry-theme/icon';
+import { BiitIconModule } from '@biit-solutions/wizardry-theme/icon';
+import * as i3$1 from '@biit-solutions/wizardry-theme/info';
+import { BiitTooltipIconModule } from '@biit-solutions/wizardry-theme/info';
+import { TranslocoRootModule } from '@biit-solutions/wizardry-theme/i18n';
+import * as i4 from '@biit-solutions/wizardry-theme/button';
+import { BiitIconButtonModule, BiitButtonModule } from '@biit-solutions/wizardry-theme/button';
+import { isSameMonth, isToday, isSameDay, isWeekend, add, sub, parseISO, setDefaultOptions, startOfWeek, setDate, eachDayOfInterval } from 'date-fns';
+import { enGB, nl, es } from 'date-fns/locale';
+import * as i6 from '@ngneat/transloco-locale';
+import { TranslocoDatePipe } from '@ngneat/transloco-locale';
+import { LocalizedDatePipeModule } from '@biit-solutions/wizardry-theme/utils';
+
+class BiitInputTextComponent {
+    constructor() {
+        this._placeholder = '';
+        this.onActionPerformed = new EventEmitter();
+        this.reveal = false;
+        this.minLengthError = false;
+        this.regExError = false;
+        this.Type = Type;
+        this.onChange = (_) => { };
+        this.onTouch = () => { };
+    }
+    set placeholder(placeholder) {
+        this._placeholder = placeholder;
+    }
+    ngOnInit() {
+        this.disabled = coerceBooleanProperty(this.disabled);
+        this.required = coerceBooleanProperty(this.required);
+        this.readonly = coerceBooleanProperty(this.readonly);
+        if (this.type == Type.EMAIL) {
+            this.regEx = new RegExp("(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])");
+        }
+    }
+    validateInput() {
+        if (this.value !== undefined) {
+            if (this.regEx) {
+                this.regExError = !this.regEx.test(this.value);
+            }
+            if (this.minLength) {
+                this.minLengthError = this.value.length < this.minLength;
+            }
+        }
+        else {
+            this.regExError = false;
+            this.minLengthError = false;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    checkValue(event) {
+        if (this.type === Type.NUMBER) {
+            const input = event.target;
+            const cursorPos = input.selectionStart ?? 0;
+            const value = input.value;
+            // Allow digits and control keys
+            if (/[0-9]/.test(event.key) || ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete'].includes(event.key)) {
+                return;
+            }
+            // Allow '-' only at the start and if not already present
+            if (event.key === '-' && cursorPos === 0 && !value.startsWith('-')) {
+                return;
+            }
+            // Allow '.' or ',' only if neither is present
+            if ((event.key === '.' || event.key === ',') && !value.includes('.') && !value.includes(',')) {
+                return;
+            }
+            event.preventDefault();
+        }
+    }
+}
+BiitInputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitInputTextComponent, selector: "biit-input-text", inputs: { placeholder: "placeholder", error: "error", description: "description", info: "info", type: "type", icon: "icon", fieldName: "fieldName", disabled: "disabled", required: "required", readonly: "readonly", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", regEx: "regEx" }, outputs: { onActionPerformed: "onActionPerformed" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitInputTextComponent),
+            multi: true
+        },
+        {
+            provide: TRANSLOCO_SCOPE,
+            useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
+        }
+    ], ngImport: i0, template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <input\n           class=\"input-object\"\n           (keydown)=\"checkValue($event)\"\n           [(ngModel)]=\"value\"\n           (input)=\"value\"\n           (ngModelChange)=\"onChange($event); validateInput();\"\n           (keydown.enter)=\"onActionPerformed.emit(value)\"\n           [type]=\"reveal ? Type.TEXT : type\" required\n           [min]=\"min\"\n           [max]=\"max\"\n           [minlength]=\"minLength\"\n           [maxlength]=\"maxLength ? maxLength : 100\"\n           [attr.name]=\"fieldName\"\n           [class.error]=\"error || regExError || minLengthError\"\n           [class.reveal]=\"reveal\"\n    >\n    <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n         (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         tabindex=\"0\">\n      <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: reveal ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n      {{ _placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n               class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"disabled\"\n         [class.readonly]=\"readonly\"\n    ></div>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n      <a id=\"regex-message\">\n        {{ t('inputs.regex-error') }}\n      </a>\n    </div>\n    <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n      <a id=\"length-message\">\n        {{ t('inputs.minlength-error') }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:#D9D9D9;color:gray}.biit-input.readonly .input-object{color:gray}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:#D9D9D9}.input-object:hover{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:#a1093f;padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled,.bottom-line.readonly{background:#808080}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3$1.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitInputTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-input-text', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitInputTextComponent),
+                            multi: true
+                        },
+                        {
+                            provide: TRANSLOCO_SCOPE,
+                            useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
+                        }
+                    ], template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <input\n           class=\"input-object\"\n           (keydown)=\"checkValue($event)\"\n           [(ngModel)]=\"value\"\n           (input)=\"value\"\n           (ngModelChange)=\"onChange($event); validateInput();\"\n           (keydown.enter)=\"onActionPerformed.emit(value)\"\n           [type]=\"reveal ? Type.TEXT : type\" required\n           [min]=\"min\"\n           [max]=\"max\"\n           [minlength]=\"minLength\"\n           [maxlength]=\"maxLength ? maxLength : 100\"\n           [attr.name]=\"fieldName\"\n           [class.error]=\"error || regExError || minLengthError\"\n           [class.reveal]=\"reveal\"\n    >\n    <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n         (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         tabindex=\"0\">\n      <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: reveal ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n      {{ _placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n               class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"disabled\"\n         [class.readonly]=\"readonly\"\n    ></div>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n      <a id=\"regex-message\">\n        {{ t('inputs.regex-error') }}\n      </a>\n    </div>\n    <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n      <a id=\"length-message\">\n        {{ t('inputs.minlength-error') }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:#D9D9D9;color:gray}.biit-input.readonly .input-object{color:gray}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:#D9D9D9}.input-object:hover{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:#a1093f;padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled,.bottom-line.readonly{background:#808080}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], info: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], fieldName: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], regEx: [{
+                type: Input
+            }], onActionPerformed: [{
+                type: Output
+            }] } });
+var Type;
+(function (Type) {
+    Type["TEXT"] = "TEXT";
+    Type["NUMBER"] = "NUMBER";
+    Type["EMAIL"] = "EMAIL";
+    Type["PASSWORD"] = "PASSWORD";
+})(Type || (Type = {}));
+
+class BiitInputTextModule {
+}
+BiitInputTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitInputTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitInputTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitInputTextModule, declarations: [BiitInputTextComponent], imports: [CommonModule,
+        BiitIconModule,
+        FormsModule,
+        TranslocoRootModule,
+        BiitTooltipIconModule], exports: [BiitInputTextComponent] });
+BiitInputTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitInputTextModule, imports: [CommonModule,
+        BiitIconModule,
+        FormsModule,
+        TranslocoRootModule,
+        BiitTooltipIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitInputTextModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitInputTextComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BiitIconModule,
+                        FormsModule,
+                        TranslocoRootModule,
+                        BiitTooltipIconModule
+                    ],
+                    exports: [
+                        BiitInputTextComponent
+                    ]
+                }]
+        }] });
+
+class BiitDropdownComponent {
+    set primitive(primitive) {
+        this.isPrimitive = coerceBooleanProperty(primitive);
+    }
+    ;
+    set compact(compact) {
+        this.isCompact = coerceBooleanProperty(compact);
+    }
+    ;
+    set disabled(disabled) {
+        this.isDisabled = coerceBooleanProperty(disabled);
+    }
+    ;
+    set required(required) {
+        this.isRequired = coerceBooleanProperty(required);
+    }
+    ;
+    set sortAsc(sortAsc) {
+        this.isSortAsc = coerceBooleanProperty(sortAsc);
+    }
+    ;
+    set sortDesc(sortDesc) {
+        this.isSortDesc = coerceBooleanProperty(sortDesc);
+    }
+    ;
+    get dropdownElement() { return this.elem.nativeElement.querySelector('.dropdown-list'); }
+    get inputElement() { return this.elem.nativeElement.querySelector('.input-object'); }
+    constructor(elem, iDiff) {
+        this.elem = elem;
+        this.label = '';
+        this.value = '';
+        this.descriptionLabel = '';
+        this.description = '';
+        this.data = [];
+        this.filterText = '';
+        this.dropdownOpen = false;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+        this.differ = iDiff.find(this.data).create();
+    }
+    ngOnInit() {
+        this.handleFilter();
+    }
+    ngDoCheck() {
+        if (this.differ.diff(this.data)) {
+            this.handleFilter();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.currentValue = this.isPrimitive ? this.data.find(i => i[this.value] === value) : value;
+    }
+    onModelChange(value) {
+        this.currentValue = value;
+        this.closeDropdown();
+        this.onChange(this.isPrimitive ? value[this.value] : value);
+    }
+    handleMouseEvents($event) {
+        if (this.dropdownOpen && !this.elem.nativeElement.contains($event.target)) {
+            this.closeDropdown();
+        }
+    }
+    handleKeyboardEvents($event) {
+        switch ($event.key) {
+            case 'ArrowUp':
+                if (this.dropdownOpen) {
+                    if (document.activeElement.tagName == "BUTTON" && document.activeElement.previousElementSibling) {
+                        document.activeElement.previousElementSibling?.focus();
+                    }
+                    else if (document.activeElement !== this.inputElement) {
+                        this.inputElement.focus();
+                    }
+                }
+                else if (this.data.findIndex(i => i == this.currentValue) > 0) {
+                    this.onModelChange(this.data[this.data.findIndex(i => i == this.currentValue) - 1]);
+                }
+                break;
+            case 'ArrowDown':
+                if (this.dropdownOpen) {
+                    if (document.activeElement === this.inputElement && this.filteredData.length) {
+                        this.dropdownElement.firstChild.focus();
+                    }
+                    else {
+                        document.activeElement.nextElementSibling?.focus();
+                    }
+                }
+                else if (this.data.findIndex(i => i == this.currentValue) < this.data.length - 1) {
+                    this.onModelChange(this.data[this.data.findIndex(i => i == this.currentValue) + 1]);
+                }
+                break;
+            case 'Escape':
+                if (document.activeElement.tagName == "BUTTON") {
+                    this.inputElement.focus();
+                }
+                else {
+                    this.closeDropdown();
+                }
+                break;
+            default:
+                break;
+        }
+        $event.stopPropagation();
+    }
+    handleFilter() {
+        if (this.data) {
+            this.sortData();
+            if (this.filterText) {
+                if (this.isPrimitive) {
+                    this.filteredData = this.data.filter(item => item.toString().toLowerCase().includes(this.filterText.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase()));
+                }
+                else {
+                    this.filteredData = this.data.filter(item => item[this.label].toLowerCase().includes(this.filterText.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase()));
+                }
+            }
+            else {
+                this.filteredData = this.data;
+            }
+        }
+        else {
+            this.filteredData = [];
+        }
+    }
+    clearFilter() {
+        this.filterText = '';
+        this.handleFilter();
+    }
+    sortData() {
+        if (this.isPrimitive) {
+            if (this.isSortAsc || this.isSortDesc) {
+                this.data.sort((a, b) => this.isSortAsc ? (a > b ? 1 : (b > a ? -1 : 0)) : (a > b ? -1 : (b > a ? 1 : 0)));
+            }
+        }
+        else {
+            if (this.isSortAsc || this.isSortDesc) {
+                this.data.sort((a, b) => {
+                    if (a[this.label] < b[this.label]) {
+                        return this.isSortAsc ? -1 : 1;
+                    }
+                    else if (a[this.label] > b[this.label]) {
+                        return this.isSortAsc ? 1 : -1;
+                    }
+                    else {
+                        return 0;
+                    }
+                });
+            }
+        }
+    }
+    openDropdown() {
+        this.setTooltipComponentProperties();
+        if (!this.icon) {
+            this.inputElement.focus();
+        }
+        // Setting a timeout because it doesn't load upwards/downwards css classes on execution time
+        setTimeout(() => {
+            this.dropdownOpen = true;
+            this.dropdownElement.setAttribute('aria-expanded', "true");
+        }, 100);
+    }
+    closeDropdown() {
+        this.dropdownOpen = false;
+        this.dropdownElement.setAttribute('aria-expanded', "false");
+        setTimeout(() => { this.clearFilter(); }, 1000);
+    }
+    setTooltipComponentProperties() {
+        let button;
+        let dropdown = this.dropdownElement;
+        dropdown.style.display = 'block';
+        if (!this.icon) {
+            button = this.inputElement;
+        }
+        else {
+            button = this.elem.nativeElement.querySelector("button");
+        }
+        // Checking available screen space
+        const fitsBottom = bottomCheck();
+        const fitsRight = rightCheck();
+        const fitsLeft = leftCheck();
+        if (!fitsRight && fitsLeft) {
+            dropdown.style.marginLeft = button.offsetWidth - dropdown.offsetWidth + 'px';
+        }
+        else {
+            dropdown.style.marginLeft = null;
+        }
+        dropdown.classList.remove('onwards');
+        dropdown.classList.remove('downwards');
+        if (!fitsBottom) {
+            dropdown.classList.add('onwards');
+            dropdown.style.marginTop = -(dropdown.offsetHeight + button.offsetHeight) + 'px';
+        }
+        else {
+            dropdown.classList.add('downwards');
+            dropdown.style.marginTop = null;
+        }
+        // Support inner functions
+        function bottomCheck() {
+            return button.getBoundingClientRect().bottom + dropdown.offsetHeight <= window.innerHeight ||
+                button.getBoundingClientRect().top - dropdown.offsetHeight <= 0;
+        }
+        function rightCheck() {
+            return button.getBoundingClientRect().right + dropdown.offsetWidth <= window.innerWidth;
+        }
+        function leftCheck() {
+            return button.getBoundingClientRect().right - dropdown.offsetWidth >= 0;
+        }
+    }
+}
+BiitDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+BiitDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDropdownComponent, selector: "biit-dropdown", inputs: { title: "title", label: "label", value: "value", descriptionLabel: "descriptionLabel", description: "description", data: "data", primitive: "primitive", compact: "compact", disabled: "disabled", required: "required", sortAsc: ["sort-asc", "sortAsc"], sortDesc: ["sort-desc", "sortDesc"], icon: "icon" }, host: { listeners: { "document:pointerdown": "handleMouseEvents($event)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitDropdownComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"biit-input\" aria-haspopup=\"listbox\"\n     *ngIf=\"!icon\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValue && !label ? currentValue :\n                      currentValue && currentValue[label] ? currentValue[label] : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           [placeholder]=\"dropdownOpen && currentValue && !label ? currentValue :\n                          dropdownOpen && currentValue && currentValue[label] ? currentValue[label] : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || currentValue\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValue ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n<button biit-icon\n        *ngIf=\"icon\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"dropdown\"\n       [class.disabled]=\"isDisabled\"\n       [style.overflow]=\"dropdownOpen ? undefined : 'hidden'\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"handleKeyboardEvents($event)\"\n  >\n    <button\n      *ngFor=\"let item of filteredData; index as i\"\n      (click)=\"onModelChange(item)\"\n      [class.selected]=\"currentValue === item\"\n      class=\"dropdown-item\"\n      role=\"option\"\n      aria-selected=\"false\"\n      [id]=\"i\"\n      [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n      [disabled]=\"!dropdownOpen || isDisabled\"\n    >\n      <div id=\"content\">\n        <a>{{ label ?  item[label] : item }}</a>\n        <span *ngIf=\"descriptionLabel && item[descriptionLabel]\" class=\"description\">{{ item[descriptionLabel] }}</span>\n      </div>\n    </button>\n    <button *ngIf=\"!filteredData.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;height:2.1rem}.input-container{position:relative;width:100%}.input-container .description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:#262626;padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:#D9D9D9}.input-object:disabled{pointer-events:none;background-color:transparent;color:#d9d9d9}.default-cursor{cursor:auto}.input-placeholder{color:#262626;font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:gray}.input-placeholder.disabled{color:#d9d9d9}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:#D9D9D9}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-.175rem;margin-bottom:-.175rem;width:auto;height:.175rem;background:#262626}.bottom-line.disabled{background:#D9D9D9}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:.175rem solid black;margin-top:-.175rem;min-width:12.8rem;width:100%;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:120%;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem;text-align:left}.dropdown-item div{display:flex;flex-direction:column}.dropdown-item .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}.dropdown-item:not(.no-results).selected{background:#D9D9D9;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus,.dropdown-item:not(.no-results):focus-visible{outline:none;background:#EDEDED;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.passthrough{pointer-events:none}.grey-bg{background:#D9D9D9}.onwards{--origin: 1rem}.downwards{--origin: -1rem}\n"], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-dropdown', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitDropdownComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '(document:pointerdown)': 'handleMouseEvents($event)'
+                    }, template: "<div class=\"biit-input\" aria-haspopup=\"listbox\"\n     *ngIf=\"!icon\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValue && !label ? currentValue :\n                      currentValue && currentValue[label] ? currentValue[label] : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           [placeholder]=\"dropdownOpen && currentValue && !label ? currentValue :\n                          dropdownOpen && currentValue && currentValue[label] ? currentValue[label] : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || currentValue\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValue ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n<button biit-icon\n        *ngIf=\"icon\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"dropdown\"\n       [class.disabled]=\"isDisabled\"\n       [style.overflow]=\"dropdownOpen ? undefined : 'hidden'\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"handleKeyboardEvents($event)\"\n  >\n    <button\n      *ngFor=\"let item of filteredData; index as i\"\n      (click)=\"onModelChange(item)\"\n      [class.selected]=\"currentValue === item\"\n      class=\"dropdown-item\"\n      role=\"option\"\n      aria-selected=\"false\"\n      [id]=\"i\"\n      [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n      [disabled]=\"!dropdownOpen || isDisabled\"\n    >\n      <div id=\"content\">\n        <a>{{ label ?  item[label] : item }}</a>\n        <span *ngIf=\"descriptionLabel && item[descriptionLabel]\" class=\"description\">{{ item[descriptionLabel] }}</span>\n      </div>\n    </button>\n    <button *ngIf=\"!filteredData.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;height:2.1rem}.input-container{position:relative;width:100%}.input-container .description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:#262626;padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:#D9D9D9}.input-object:disabled{pointer-events:none;background-color:transparent;color:#d9d9d9}.default-cursor{cursor:auto}.input-placeholder{color:#262626;font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:gray}.input-placeholder.disabled{color:#d9d9d9}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:#D9D9D9}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-.175rem;margin-bottom:-.175rem;width:auto;height:.175rem;background:#262626}.bottom-line.disabled{background:#D9D9D9}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:.175rem solid black;margin-top:-.175rem;min-width:12.8rem;width:100%;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:120%;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem;text-align:left}.dropdown-item div{display:flex;flex-direction:column}.dropdown-item .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}.dropdown-item:not(.no-results).selected{background:#D9D9D9;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus,.dropdown-item:not(.no-results):focus-visible{outline:none;background:#EDEDED;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.passthrough{pointer-events:none}.grey-bg{background:#D9D9D9}.onwards{--origin: 1rem}.downwards{--origin: -1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { title: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], descriptionLabel: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], primitive: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], sortAsc: [{
+                type: Input,
+                args: ['sort-asc']
+            }], sortDesc: [{
+                type: Input,
+                args: ['sort-desc']
+            }], icon: [{
+                type: Input
+            }] } });
+
+class BiitDropdownModule {
+}
+BiitDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitDropdownModule, declarations: [BiitDropdownComponent], imports: [FormsModule,
+        CommonModule,
+        BiitIconModule,
+        BiitIconButtonModule], exports: [BiitDropdownComponent] });
+BiitDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDropdownModule, imports: [FormsModule,
+        CommonModule,
+        BiitIconModule,
+        BiitIconButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitDropdownComponent
+                    ],
+                    imports: [
+                        FormsModule,
+                        CommonModule,
+                        BiitIconModule,
+                        BiitIconButtonModule
+                    ],
+                    exports: [
+                        BiitDropdownComponent
+                    ]
+                }]
+        }] });
+
+class BiitCheckboxComponent {
+    constructor() {
+        this.disabled = false;
+        this.showAlwaysDescription = false;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(checked) {
+        this.checked = checked;
+    }
+    onModelChange(event) {
+        this.checked = event;
+        this.onChange(event);
+    }
+}
+BiitCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitCheckboxComponent, selector: "biit-checkbox", inputs: { disabled: "disabled", description: "description", showAlwaysDescription: "showAlwaysDescription" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitCheckboxComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<label [class.disabled]=\"disabled\" id=\"biit-checkbox\" class=\"biit-checkbox\">\n  <input [attr.id]=\"checked?'checked':'unchecked'\"\n         type=\"checkbox\"\n         class=\"checkbox-box\"\n         [ngModel]=\"checked\"\n         (ngModelChange)=\"onModelChange($event)\"\n         [disabled]=\"disabled\"/>\n  <div>\n    <div>\n      <a>\n        <ng-content></ng-content>\n      </a>\n      <biit-tooltip-icon *ngIf=\"description && !showAlwaysDescription\" inline [text]=\"description\"/>\n    </div>\n    <span class=\"description\" *ngIf=\"description && showAlwaysDescription\">{{ description }}</span>\n  </div>\n</label>\n", styles: ["label{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}label.disabled{pointer-events:none;color:#d9d9d9}label>div{display:flex;flex-direction:column;margin-left:.75em}label>div div{display:flex}label>div:has(div a:empty){display:none}label:has(div div a:empty) input{margin-top:0}label input[type=checkbox]{appearance:none;background-color:transparent;font:inherit;width:.75em;height:.75em;border:.2em solid #262626;box-sizing:border-box;margin:.25em 0 0;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}label input[type=checkbox]:hover{border:.2em solid #F20D5E}label input[type=checkbox]:checked{border:.2em solid #F20D5E;background:#F20D5E}label input[type=checkbox]:disabled:not(:checked){border:.2em solid #D9D9D9}label input[type=checkbox]:checked:disabled{border:.2em solid #D9D9D9;background:#D9D9D9}label input[type=checkbox] div:has(a:empty){display:none}label a{line-height:120%}label .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-checkbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitCheckboxComponent),
+                            multi: true
+                        }
+                    ], template: "<label [class.disabled]=\"disabled\" id=\"biit-checkbox\" class=\"biit-checkbox\">\n  <input [attr.id]=\"checked?'checked':'unchecked'\"\n         type=\"checkbox\"\n         class=\"checkbox-box\"\n         [ngModel]=\"checked\"\n         (ngModelChange)=\"onModelChange($event)\"\n         [disabled]=\"disabled\"/>\n  <div>\n    <div>\n      <a>\n        <ng-content></ng-content>\n      </a>\n      <biit-tooltip-icon *ngIf=\"description && !showAlwaysDescription\" inline [text]=\"description\"/>\n    </div>\n    <span class=\"description\" *ngIf=\"description && showAlwaysDescription\">{{ description }}</span>\n  </div>\n</label>\n", styles: ["label{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}label.disabled{pointer-events:none;color:#d9d9d9}label>div{display:flex;flex-direction:column;margin-left:.75em}label>div div{display:flex}label>div:has(div a:empty){display:none}label:has(div div a:empty) input{margin-top:0}label input[type=checkbox]{appearance:none;background-color:transparent;font:inherit;width:.75em;height:.75em;border:.2em solid #262626;box-sizing:border-box;margin:.25em 0 0;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}label input[type=checkbox]:hover{border:.2em solid #F20D5E}label input[type=checkbox]:checked{border:.2em solid #F20D5E;background:#F20D5E}label input[type=checkbox]:disabled:not(:checked){border:.2em solid #D9D9D9}label input[type=checkbox]:checked:disabled{border:.2em solid #D9D9D9;background:#D9D9D9}label input[type=checkbox] div:has(a:empty){display:none}label a{line-height:120%}label .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], showAlwaysDescription: [{
+                type: Input
+            }] } });
+
+var BiitMultiselectType;
+(function (BiitMultiselectType) {
+    BiitMultiselectType["DEFAULT"] = "default";
+    BiitMultiselectType["ICON"] = "icon";
+    BiitMultiselectType["CHIPS"] = "chips";
+})(BiitMultiselectType || (BiitMultiselectType = {}));
+class BiitMultiselectComponent {
+    set primitive(primitive) {
+        this.isPrimitive = coerceBooleanProperty(primitive);
+    }
+    ;
+    set compact(compact) {
+        this.isCompact = coerceBooleanProperty(compact);
+    }
+    ;
+    set disabled(disabled) {
+        this.isDisabled = coerceBooleanProperty(disabled);
+    }
+    ;
+    set required(required) {
+        this.isRequired = coerceBooleanProperty(required);
+    }
+    ;
+    set sortAsc(sortAsc) {
+        this.isSortAsc = coerceBooleanProperty(sortAsc);
+    }
+    ;
+    set sortDesc(sortDesc) {
+        this.isSortDesc = coerceBooleanProperty(sortDesc);
+    }
+    ;
+    get dropdownElement() {
+        return this.elem.nativeElement.querySelector('.dropdown-list');
+    }
+    ;
+    get inputElement() {
+        return this.elem.nativeElement.querySelector('.input-object');
+    }
+    ;
+    constructor(elem, iDiff) {
+        this.elem = elem;
+        this.type = BiitMultiselectType.DEFAULT;
+        this.icon = 'column_selection';
+        this.label = '';
+        this.value = '';
+        this.descriptionField = '';
+        this.description = '';
+        this.data = [];
+        this.onCreate = new EventEmitter();
+        this.currentValues = [];
+        this.filterText = '';
+        this.filteredData = [];
+        this.dropdownOpen = false;
+        this.hover = new MouseEvent('pointerover', { 'bubbles': true });
+        this.onChange = (values) => {
+        };
+        this.onTouched = () => {
+        };
+        this.BiitMultiselectType = BiitMultiselectType;
+        this.differ = iDiff.find(this.data).create();
+    }
+    ngOnInit() {
+        this.handleFilter();
+    }
+    ngDoCheck() {
+        if (this.differ.diff(this.data)) {
+            this.handleFilter();
+        }
+    }
+    checkBooleanInput(value) {
+        switch (value) {
+            case undefined:
+                return false;
+            case false:
+                return false;
+            default:
+                return true;
+        }
+    }
+    ngAfterViewInit() {
+        this.dropdownElement?.querySelectorAll('.disabled').forEach(i => {
+            i.classList.remove('disabled');
+        });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(values) {
+        if (values) {
+            this.currentValues = values;
+        }
+        else {
+            this.currentValues = [];
+        }
+    }
+    onModelChange(value) {
+        if (this.currentValues) {
+            if (!this.currentValues.includes(value)) {
+                this.currentValues.push(value);
+            }
+            else {
+                this.currentValues.splice(this.currentValues.indexOf(value), 1);
+            }
+        }
+        this.onChange(this.currentValues);
+    }
+    handleMouseEvents($event) {
+        if (!this.elem.nativeElement.contains($event.target)) {
+            this.closeDropdown();
+        }
+    }
+    handleKeyboardEvents($event) {
+        switch ($event.key) {
+            case 'ArrowUp':
+                if (document.activeElement.tagName == "BIIT-CHECKBOX") {
+                    document.activeElement.previousElementSibling?.focus();
+                }
+                break;
+            case 'ArrowDown':
+                if (document.activeElement.tagName == "BIIT-CHECKBOX") {
+                    document.activeElement.nextElementSibling?.focus();
+                }
+                break;
+            case 'Escape':
+                if (document.activeElement.tagName == "BIIT-CHECKBOX" && this.type == BiitMultiselectType.DEFAULT) {
+                    this.inputElement.focus();
+                }
+                else {
+                    this.closeDropdown();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    handleFilter() {
+        if (this.data) {
+            this.sortData();
+            if (this.filterText) {
+                if (this.isPrimitive) {
+                    this.filteredData = this.data.filter(item => item.toString().toLowerCase().includes(this.filterText.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase()));
+                }
+                else {
+                    this.filteredData = this.data.filter(item => item[this.label].toLowerCase().includes(this.filterText.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase()));
+                }
+            }
+            else {
+                this.filteredData = this.data;
+            }
+        }
+        else {
+            this.filteredData = [];
+        }
+    }
+    clearFilter() {
+        this.filterText = '';
+        this.handleFilter();
+    }
+    sortData() {
+        if (this.isPrimitive) {
+            if (this.isSortAsc || this.isSortDesc) {
+                this.data.sort((a, b) => this.isSortAsc ? (a > b ? 1 : (b > a ? -1 : 0)) : (a > b ? -1 : (b > a ? 1 : 0)));
+            }
+        }
+        else {
+            if (this.isSortAsc || this.isSortDesc) {
+                this.data.sort((a, b) => {
+                    if (this.currentValues.includes(a) && !this.currentValues.includes(b))
+                        return -1;
+                    if (!this.currentValues.includes(a) && this.currentValues.includes(b))
+                        return 1;
+                    if (a[this.label] < b[this.label]) {
+                        return this.isSortAsc ? -1 : 1;
+                    }
+                    else if (a[this.label] > b[this.label]) {
+                        return this.isSortAsc ? 1 : -1;
+                    }
+                    else {
+                        return 0;
+                    }
+                });
+            }
+            else {
+                this.data.sort((a, b) => {
+                    if (this.currentValues) {
+                        if (this.currentValues.includes(a) && !this.currentValues.includes(b))
+                            return -1;
+                        if (!this.currentValues.includes(a) && this.currentValues.includes(b))
+                            return 1;
+                    }
+                    return 0;
+                });
+            }
+        }
+    }
+    openDropdown() {
+        this.setTooltipComponentProperties();
+        if (this.type !== BiitMultiselectType.ICON) {
+            this.inputElement.focus();
+        }
+        // Setting a timeout because it doesn't load upwards/downwards css classes on execution time
+        setTimeout(() => {
+            this.dropdownOpen = true;
+            this.dropdownElement.setAttribute('aria-expanded', "true");
+        }, 100);
+    }
+    closeDropdown() {
+        this.dropdownOpen = false;
+        this.dropdownElement.setAttribute('aria-expanded', "false");
+        setTimeout(() => {
+            this.clearFilter();
+        }, 100);
+    }
+    setTooltipComponentProperties() {
+        let button;
+        let dropdown = this.dropdownElement;
+        dropdown.style.display = 'block';
+        if (this.type !== BiitMultiselectType.ICON) {
+            button = this.inputElement;
+        }
+        else {
+            button = this.elem.nativeElement.querySelector("button");
+        }
+        // Checking available screen space
+        const fitsBottom = bottomCheck();
+        const fitsRight = rightCheck();
+        const fitsLeft = leftCheck();
+        if (!fitsRight && fitsLeft) {
+            dropdown.style.marginLeft = button.offsetWidth - dropdown.offsetWidth + 'px';
+        }
+        else {
+            dropdown.style.marginLeft = null;
+        }
+        dropdown.classList.remove('onwards');
+        dropdown.classList.remove('downwards');
+        if (!fitsBottom) {
+            dropdown.classList.add('onwards');
+            dropdown.style.marginTop = -(dropdown.offsetHeight + button.offsetHeight) + 'px';
+        }
+        else {
+            dropdown.classList.add('downwards');
+            dropdown.style.marginTop = null;
+        }
+        // Support inner functions
+        function bottomCheck() {
+            return button.getBoundingClientRect().bottom + dropdown.offsetHeight <= window.innerHeight ||
+                button.getBoundingClientRect().top - dropdown.offsetHeight <= 0;
+        }
+        function rightCheck() {
+            return button.getBoundingClientRect().right + dropdown.offsetWidth <= window.innerWidth;
+        }
+        function leftCheck() {
+            return button.getBoundingClientRect().right - dropdown.offsetWidth >= 0;
+        }
+    }
+}
+BiitMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+BiitMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitMultiselectComponent, selector: "biit-multiselect", inputs: { title: "title", type: "type", icon: "icon", label: "label", value: "value", descriptionField: "descriptionField", description: "description", data: "data", primitive: "primitive", compact: "compact", disabled: "disabled", required: "required", sortAsc: ["sort-asc", "sortAsc"], sortDesc: ["sort-desc", "sortDesc"] }, outputs: { onCreate: "onCreate" }, host: { listeners: { "document:pointerdown": "handleMouseEvents($event)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitMultiselectComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n     class=\"biit-input\" aria-haspopup=\"listbox\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n     (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n           [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\" id=\"arrow\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"options\"\n       [class.disabled]=\"isDisabled\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n  >\n    <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n                   [attr.id]=\"'option-' +   (isPrimitive ? item : item[label])\"\n                   class=\"dropdown-item\"\n                   [class.selected]=\"currentValues && currentValues.includes(item)\"\n                   [ngModel]=\"currentValues && currentValues.includes(item)\"\n                   [description]=\"descriptionField && item[descriptionField]\"\n                   (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n                   (keydown.enter)=\"onModelChange(item)\"\n                   (keydown.space)=\"onModelChange(item)\"\n                   [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n                   role=\"option\"\n                   aria-selected=\"false\"\n                   [disabled]=\"false\">\n      {{ isPrimitive ? item : item[label] }}\n    </biit-checkbox>\n    <button *ngIf=\"!filteredData?.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n     class=\"chips\">\n  <span\n    *ngFor=\"let item of currentValues\"\n    (click)=\"onModelChange(item)\"\n    class=\"chips-item\"\n  >\n    {{ item[label] }}\n    <biit-icon\n      [name]=\"'cross_wide'\"\n      [pathStyle]=\"{fill: '#ffffff'}\"\n    ></biit-icon>\n  </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:#262626;padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:#D9D9D9}.input-object:disabled{pointer-events:none;background-color:transparent;color:#d9d9d9}.default-cursor{cursor:auto}.input-placeholder{color:#262626;font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:gray}.input-placeholder.disabled{color:#d9d9d9}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:#D9D9D9}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled{background:#D9D9D9}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:3px solid black;margin-top:-3px;min-width:100%;width:100%;cursor:pointer;transform-origin:top;opacity:0;display:none;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:1rem;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus-visible{outline:none;background:#EDEDED;width:calc(100% + 6px);margin-left:-3px;padding-left:calc(.7rem + 3px)}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.dropdown-item ::ng-deep label{width:100%;height:100%;cursor:pointer}.dropdown-item ::ng-deep label input[type=checkbox]{cursor:pointer;pointer-events:none}.passthrough{pointer-events:none}.grey-bg{background:#D9D9D9}.onwards{--origin: 1rem}.downwards{--origin: -1rem}.description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.chips .chips-item{font-size:.75rem;color:#fff;background:#f20D5e;padding:.25rem .75rem;position:relative;cursor:pointer}.chips .chips-item biit-icon{display:none}.chips .chips-item:hover biit-icon{display:block;height:100%;width:5px;position:absolute;top:0;right:4px}\n"], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-multiselect', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitMultiselectComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '(document:pointerdown)': 'handleMouseEvents($event)'
+                    }, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n     class=\"biit-input\" aria-haspopup=\"listbox\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n     (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n           [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\" id=\"arrow\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"options\"\n       [class.disabled]=\"isDisabled\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n  >\n    <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n                   [attr.id]=\"'option-' +   (isPrimitive ? item : item[label])\"\n                   class=\"dropdown-item\"\n                   [class.selected]=\"currentValues && currentValues.includes(item)\"\n                   [ngModel]=\"currentValues && currentValues.includes(item)\"\n                   [description]=\"descriptionField && item[descriptionField]\"\n                   (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n                   (keydown.enter)=\"onModelChange(item)\"\n                   (keydown.space)=\"onModelChange(item)\"\n                   [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n                   role=\"option\"\n                   aria-selected=\"false\"\n                   [disabled]=\"false\">\n      {{ isPrimitive ? item : item[label] }}\n    </biit-checkbox>\n    <button *ngIf=\"!filteredData?.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n     class=\"chips\">\n  <span\n    *ngFor=\"let item of currentValues\"\n    (click)=\"onModelChange(item)\"\n    class=\"chips-item\"\n  >\n    {{ item[label] }}\n    <biit-icon\n      [name]=\"'cross_wide'\"\n      [pathStyle]=\"{fill: '#ffffff'}\"\n    ></biit-icon>\n  </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:#262626;padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:#D9D9D9}.input-object:disabled{pointer-events:none;background-color:transparent;color:#d9d9d9}.default-cursor{cursor:auto}.input-placeholder{color:#262626;font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:gray}.input-placeholder.disabled{color:#d9d9d9}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:#D9D9D9}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled{background:#D9D9D9}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:3px solid black;margin-top:-3px;min-width:100%;width:100%;cursor:pointer;transform-origin:top;opacity:0;display:none;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:1rem;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus-visible{outline:none;background:#EDEDED;width:calc(100% + 6px);margin-left:-3px;padding-left:calc(.7rem + 3px)}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.dropdown-item ::ng-deep label{width:100%;height:100%;cursor:pointer}.dropdown-item ::ng-deep label input[type=checkbox]{cursor:pointer;pointer-events:none}.passthrough{pointer-events:none}.grey-bg{background:#D9D9D9}.onwards{--origin: 1rem}.downwards{--origin: -1rem}.description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.chips .chips-item{font-size:.75rem;color:#fff;background:#f20D5e;padding:.25rem .75rem;position:relative;cursor:pointer}.chips .chips-item biit-icon{display:none}.chips .chips-item:hover biit-icon{display:block;height:100%;width:5px;position:absolute;top:0;right:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { title: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], descriptionField: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], primitive: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], sortAsc: [{
+                type: Input,
+                args: ['sort-asc']
+            }], sortDesc: [{
+                type: Input,
+                args: ['sort-desc']
+            }], onCreate: [{
+                type: Output
+            }] } });
+
+class BiitCheckboxModule {
+}
+BiitCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitCheckboxModule, declarations: [BiitCheckboxComponent], imports: [CommonModule,
+        FormsModule,
+        BiitTooltipIconModule], exports: [BiitCheckboxComponent] });
+BiitCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitCheckboxModule, imports: [CommonModule,
+        FormsModule,
+        BiitTooltipIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitCheckboxComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitTooltipIconModule,
+                    ],
+                    exports: [
+                        BiitCheckboxComponent
+                    ]
+                }]
+        }] });
+
+class BiitMultiselectModule {
+}
+BiitMultiselectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitMultiselectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectModule, declarations: [BiitMultiselectComponent], imports: [FormsModule,
+        CommonModule,
+        BiitIconModule,
+        BiitCheckboxModule,
+        BiitIconButtonModule], exports: [BiitMultiselectComponent] });
+BiitMultiselectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectModule, imports: [FormsModule,
+        CommonModule,
+        BiitIconModule,
+        BiitCheckboxModule,
+        BiitIconButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitMultiselectComponent
+                    ],
+                    imports: [
+                        FormsModule,
+                        CommonModule,
+                        BiitIconModule,
+                        BiitCheckboxModule,
+                        BiitIconButtonModule
+                    ],
+                    exports: [
+                        BiitMultiselectComponent
+                    ]
+                }]
+        }] });
+
+class BiitToggleComponent {
+    constructor() {
+        this.disabled = false;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    onToggle(item) {
+        this.checked = item;
+        this.onChange(this.checked);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(obj) {
+        this.checked = obj;
+    }
+}
+BiitToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitToggleComponent, selector: "biit-toggle", inputs: { disabled: "disabled" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitToggleComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<label class=\"toggle-base\">\n  <input type=\"checkbox\" id=\"checkbox\"\n         [ngModel]=\"checked\"\n         (ngModelChange)=\"onToggle($event)\"\n         [disabled]=\"disabled\"/>\n  <div class=\"toggle-switch\" id=\"switch\">\n    <div class=\"toggle-trail\"></div>\n    <div class=\"toggle-box\"></div>\n  </div>\n  <a class=\"toggle-label\">\n    <ng-content></ng-content>\n  </a>\n</label>\n", styles: ["input[type=checkbox]{appearance:none;background-color:#fff;margin:0;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;cursor:pointer;font-size:inherit}.toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box{transform:rotate(15deg) translate(.1em);border:.25em solid #F20D5E}.toggle-base:has(input:checked) .toggle-trail{background:#FBAEC9}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid #F20D5E;background:#F20D5E}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:#EDEDED}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid #D9D9D9;background:none}.toggle-base:has(input:disabled) .toggle-label{color:#d9d9d9}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:#D9D9D9}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:#EDEDED;z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid #262626;box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}@-moz-document url-prefix(){input:checked~.toggle-switch .toggle-trail{background:#FBAEC9}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid #F20D5E;background:#F20D5E}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:#EDEDED}input:disabled~.toggle-switch .toggle-box{border:.25em solid #D9D9D9;background:none}input:disabled~.toggle-switch .toggle-label{color:#d9d9d9}input:checked:disabled~.toggle-switch .toggle-box{background:#D9D9D9}}\n"], dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-toggle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitToggleComponent),
+                            multi: true
+                        }
+                    ], template: "<label class=\"toggle-base\">\n  <input type=\"checkbox\" id=\"checkbox\"\n         [ngModel]=\"checked\"\n         (ngModelChange)=\"onToggle($event)\"\n         [disabled]=\"disabled\"/>\n  <div class=\"toggle-switch\" id=\"switch\">\n    <div class=\"toggle-trail\"></div>\n    <div class=\"toggle-box\"></div>\n  </div>\n  <a class=\"toggle-label\">\n    <ng-content></ng-content>\n  </a>\n</label>\n", styles: ["input[type=checkbox]{appearance:none;background-color:#fff;margin:0;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;cursor:pointer;font-size:inherit}.toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box{transform:rotate(15deg) translate(.1em);border:.25em solid #F20D5E}.toggle-base:has(input:checked) .toggle-trail{background:#FBAEC9}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid #F20D5E;background:#F20D5E}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:#EDEDED}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid #D9D9D9;background:none}.toggle-base:has(input:disabled) .toggle-label{color:#d9d9d9}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:#D9D9D9}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:#EDEDED;z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid #262626;box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}@-moz-document url-prefix(){input:checked~.toggle-switch .toggle-trail{background:#FBAEC9}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid #F20D5E;background:#F20D5E}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:#EDEDED}input:disabled~.toggle-switch .toggle-box{border:.25em solid #D9D9D9;background:none}input:disabled~.toggle-switch .toggle-label{color:#d9d9d9}input:checked:disabled~.toggle-switch .toggle-box{background:#D9D9D9}}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+class BiitToggleModule {
+}
+BiitToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleModule, declarations: [BiitToggleComponent], imports: [CommonModule,
+        FormsModule], exports: [BiitToggleComponent] });
+BiitToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleModule, imports: [CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitToggleComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                    ],
+                    exports: [
+                        BiitToggleComponent
+                    ]
+                }]
+        }] });
+
+class BiitTernaryToggleComponent {
+    constructor() {
+        this.disabled = false;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    onToggle() {
+        if (this.disabled) {
+            return;
+        }
+        switch (this.checked) {
+            case true:
+                this.checked = false;
+                break;
+            case false:
+                this.checked = undefined;
+                break;
+            case undefined:
+                this.checked = true;
+                break;
+        }
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+            this.clickTimer = undefined;
+        }
+        this.clickTimer = setTimeout(() => {
+            this.onChange(this.checked);
+            clearTimeout(this.clickTimer);
+            this.clickTimer = undefined;
+        }, 1000);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(obj) {
+        this.checked = obj;
+    }
+}
+BiitTernaryToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTernaryToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitTernaryToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitTernaryToggleComponent, selector: "biit-ternary-togle", inputs: { disabled: "disabled" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitTernaryToggleComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"ternary-toggle-container\">\n  <label><ng-content select=\"[appended-text]\"></ng-content></label>\n  <label class=\"toggle-base\">\n    <div class=\"toggle-switch\" (click)=\"onToggle()\">\n      <div class=\"toggle-trail\" [class.checked]=\"checked\" [class.unchecked]=\"checked === false\"></div>\n      <div class=\"toggle-box\" [class.checked]=\"checked\" [class.unchecked]=\"checked === false\"></div>\n      <div class=\"toggle-trail\" [class.checked]=\"checked\" [class.unchecked]=\"checked === false\"></div>\n    </div>\n    <a class=\"toggle-label\">\n      <ng-content></ng-content>\n    </a>\n  </label>\n</div>\n", styles: [".toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box:not(.checked):not(.unchecked){transform:translate(1.2em) rotate(15deg);border:.25em solid #F20D5E}.toggle-base:hover .toggle-box.checked{transform:translate(2.2em) rotate(45deg);border:.25em solid #F20D5E}.toggle-base:hover .toggle-box.unchecked{transform:translate(.1em) rotate(45deg);border:.25em solid #F20D5E;background:#262626}.checked.toggle-trail{background:#FBAEC9}.checked.toggle-box{transform:translate(2.2em) rotate(45deg);border:.25em solid #F20D5E;background:#F20D5E}.unchecked.toggle-box{transform:translate(.1em) rotate(45deg);background:#F20D5E}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:#EDEDED;z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid #262626;transform:translate(1.1em) rotate(0);box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}.ternary-toggle-container{display:flex;gap:.5rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTernaryToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-ternary-togle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitTernaryToggleComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"ternary-toggle-container\">\n  <label><ng-content select=\"[appended-text]\"></ng-content></label>\n  <label class=\"toggle-base\">\n    <div class=\"toggle-switch\" (click)=\"onToggle()\">\n      <div class=\"toggle-trail\" [class.checked]=\"checked\" [class.unchecked]=\"checked === false\"></div>\n      <div class=\"toggle-box\" [class.checked]=\"checked\" [class.unchecked]=\"checked === false\"></div>\n      <div class=\"toggle-trail\" [class.checked]=\"checked\" [class.unchecked]=\"checked === false\"></div>\n    </div>\n    <a class=\"toggle-label\">\n      <ng-content></ng-content>\n    </a>\n  </label>\n</div>\n", styles: [".toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box:not(.checked):not(.unchecked){transform:translate(1.2em) rotate(15deg);border:.25em solid #F20D5E}.toggle-base:hover .toggle-box.checked{transform:translate(2.2em) rotate(45deg);border:.25em solid #F20D5E}.toggle-base:hover .toggle-box.unchecked{transform:translate(.1em) rotate(45deg);border:.25em solid #F20D5E;background:#262626}.checked.toggle-trail{background:#FBAEC9}.checked.toggle-box{transform:translate(2.2em) rotate(45deg);border:.25em solid #F20D5E;background:#F20D5E}.unchecked.toggle-box{transform:translate(.1em) rotate(45deg);background:#F20D5E}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:#EDEDED;z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid #262626;transform:translate(1.1em) rotate(0);box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}.ternary-toggle-container{display:flex;gap:.5rem}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+class BiitTernaryToggleModule {
+}
+BiitTernaryToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTernaryToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitTernaryToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitTernaryToggleModule, declarations: [BiitTernaryToggleComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule], exports: [BiitTernaryToggleComponent] });
+BiitTernaryToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTernaryToggleModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTernaryToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitTernaryToggleComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ],
+                    exports: [
+                        BiitTernaryToggleComponent
+                    ]
+                }]
+        }] });
+
+class BiitToggleButtonComponent {
+    ngOnInit() {
+        this.disabled = coerceBooleanProperty(this.disabled);
+    }
+}
+BiitToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitToggleButtonComponent, selector: "biit-toggle-button", inputs: { text: "text", icon: "icon", value: "value", disabled: "disabled" }, ngImport: i0, template: '', isInline: true, styles: [".inner-content{display:contents;min-height:100%}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-toggle-button', template: '', styles: [".inner-content{display:contents;min-height:100%}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class BiitToggleGroupComponent {
+    constructor() {
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        this.disabled = coerceBooleanProperty(this.disabled);
+        this.multiple = coerceBooleanProperty(this.multiple);
+    }
+    onToggle(value) {
+        if (this.multiple && !this.value) {
+            this.value = [];
+        }
+        if (this.multiple) {
+            if (this.value.indexOf(value) === -1) {
+                this.value = [...this.value, value];
+            }
+            else {
+                this.value = this.value.filter(item => value != item);
+            }
+        }
+        else {
+            this.value = value;
+        }
+        this.onChange(this.value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+}
+BiitToggleGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitToggleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitToggleGroupComponent, selector: "biit-toggle-group", inputs: { disabled: "disabled", multiple: "multiple" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitToggleGroupComponent),
+            multi: true
+        }
+    ], queries: [{ propertyName: "buttons", predicate: BiitToggleButtonComponent }], ngImport: i0, template: "<div class=\"toggle-group\">\n  <button\n    *ngFor=\"let button of buttons\"\n    [class.active]=\"multiple ? value && value.includes(button.value) : value == button.value\"\n    [disabled]=\"disabled || button.disabled\"\n    (click)=\"onToggle(button.value)\"\n  >\n    <biit-icon\n      *ngIf=\"button.icon\"\n      [name]=\"button.icon\"\n      [pathStyle]=\"{fill: '#262626'}\"\n      style=\"display: block; height: 1em; width: 1em;\"\n    ></biit-icon>\n    <span\n      *ngIf=\"button.text\"\n      style=\"display: block\"\n    >\n      {{button.text}}\n    </span>\n  </button>\n</div>\n", styles: ["button{background:none;color:inherit;border:none;font:inherit;outline:inherit;box-sizing:border-box;font-size:1em;line-height:100%;padding:.625em;cursor:pointer;color:#262626;display:flex;gap:.375em}button:not(:last-child){border-right:2px solid #EDEDED}button:disabled{pointer-events:none;color:#d9d9d9}button:disabled ::ng-deep biit-icon svg *{fill:#d9d9d9!important}button:disabled:active,button:disabled.active{color:gray}button:disabled:active ::ng-deep biit-icon svg *,button:disabled.active ::ng-deep biit-icon svg *{fill:gray!important}button:active,button.active{background:#EDEDED;color:#f20d5e}button:active ::ng-deep biit-icon svg *,button.active ::ng-deep biit-icon svg *{fill:#f20d5e!important}button:hover{background:#D9D9D9}.toggle-group{display:flex;flex-wrap:wrap;border:2px solid #EDEDED;width:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-toggle-group', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitToggleGroupComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"toggle-group\">\n  <button\n    *ngFor=\"let button of buttons\"\n    [class.active]=\"multiple ? value && value.includes(button.value) : value == button.value\"\n    [disabled]=\"disabled || button.disabled\"\n    (click)=\"onToggle(button.value)\"\n  >\n    <biit-icon\n      *ngIf=\"button.icon\"\n      [name]=\"button.icon\"\n      [pathStyle]=\"{fill: '#262626'}\"\n      style=\"display: block; height: 1em; width: 1em;\"\n    ></biit-icon>\n    <span\n      *ngIf=\"button.text\"\n      style=\"display: block\"\n    >\n      {{button.text}}\n    </span>\n  </button>\n</div>\n", styles: ["button{background:none;color:inherit;border:none;font:inherit;outline:inherit;box-sizing:border-box;font-size:1em;line-height:100%;padding:.625em;cursor:pointer;color:#262626;display:flex;gap:.375em}button:not(:last-child){border-right:2px solid #EDEDED}button:disabled{pointer-events:none;color:#d9d9d9}button:disabled ::ng-deep biit-icon svg *{fill:#d9d9d9!important}button:disabled:active,button:disabled.active{color:gray}button:disabled:active ::ng-deep biit-icon svg *,button:disabled.active ::ng-deep biit-icon svg *{fill:gray!important}button:active,button.active{background:#EDEDED;color:#f20d5e}button:active ::ng-deep biit-icon svg *,button.active ::ng-deep biit-icon svg *{fill:#f20d5e!important}button:hover{background:#D9D9D9}.toggle-group{display:flex;flex-wrap:wrap;border:2px solid #EDEDED;width:-moz-fit-content;width:fit-content}\n"] }]
+        }], propDecorators: { buttons: [{
+                type: ContentChildren,
+                args: [BiitToggleButtonComponent]
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }] } });
+
+class BiitToggleGroupModule {
+}
+BiitToggleGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitToggleGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleGroupModule, declarations: [BiitToggleGroupComponent,
+        BiitToggleButtonComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule], exports: [BiitToggleGroupComponent,
+        BiitToggleButtonComponent] });
+BiitToggleGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleGroupModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitToggleGroupComponent,
+                        BiitToggleButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule,
+                    ],
+                    exports: [
+                        BiitToggleGroupComponent,
+                        BiitToggleButtonComponent
+                    ]
+                }]
+        }] });
+
+class BiitRadioButtonComponent {
+    constructor() {
+        this.showAlwaysDescription = false;
+        this.hover = false;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        this.disabled = !!this.disabled;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(selected) {
+        this.selected = selected;
+    }
+    onModelChange(selected) {
+        this.selected = selected;
+        this.onChange(selected);
+    }
+}
+BiitRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitRadioButtonComponent, selector: "biit-radio-button", inputs: { id: "id", name: "name", value: "value", description: "description", showAlwaysDescription: "showAlwaysDescription", disabled: "disabled" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitRadioButtonComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<label [class.disabled]=\"disabled\" (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\">\n  <input type=\"radio\"\n         [ngModel]=\"selected\"\n         (ngModelChange)=\"onModelChange($event)\"\n         [id]=\"id\"\n         [name]=\"name\"\n         [value]=\"value\"\n         [class.disabled]=\"disabled\"/>\n  <biit-icon [name]=\"value == selected ? 'radio_button_filled' : 'radio_button_empty'\"\n             [pathStyle]=\"{fill: disabled ? '#D9D9D9' : hover || (value == selected) ? '#F20D5E' : '#262626'}\"\n             class=\"biit-radio\"\n             [class.checked]=\"value == selected\"\n             [class.disabled]=\"disabled\"\n  ></biit-icon>\n  <div>\n    <div>\n      <a><ng-content></ng-content></a>\n      <biit-tooltip-icon *ngIf=\"description && !showAlwaysDescription\" inline [text]=\"description\"/>\n    </div>\n    <span class=\"description\" *ngIf=\"description && showAlwaysDescription\">{{ description }}</span>\n  </div>\n</label>\n", styles: ["label{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}label.disabled{pointer-events:none;color:#d9d9d9}label .biit-radio{transform:rotate(-30deg)}label .biit-radio.checked{transform:rotate(0)}label .biit-radio.disabled{transform:rotate(-30deg)}label:hover .biit-radio{transform:rotate(-15deg)}label:hover .biit-radio.checked{transform:rotate(15deg)}label>div{display:flex;flex-direction:column;margin-left:.75em}label>div div{display:flex}input[type=radio]{appearance:none;background-color:#fff;margin:0}.biit-radio{display:inline-flex;height:.9em;width:.9em;margin-top:.2em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.description{font-size:.75em;color:gray;line-height:120%;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i3$1.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-radio-button', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitRadioButtonComponent),
+                            multi: true
+                        }
+                    ], template: "<label [class.disabled]=\"disabled\" (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\">\n  <input type=\"radio\"\n         [ngModel]=\"selected\"\n         (ngModelChange)=\"onModelChange($event)\"\n         [id]=\"id\"\n         [name]=\"name\"\n         [value]=\"value\"\n         [class.disabled]=\"disabled\"/>\n  <biit-icon [name]=\"value == selected ? 'radio_button_filled' : 'radio_button_empty'\"\n             [pathStyle]=\"{fill: disabled ? '#D9D9D9' : hover || (value == selected) ? '#F20D5E' : '#262626'}\"\n             class=\"biit-radio\"\n             [class.checked]=\"value == selected\"\n             [class.disabled]=\"disabled\"\n  ></biit-icon>\n  <div>\n    <div>\n      <a><ng-content></ng-content></a>\n      <biit-tooltip-icon *ngIf=\"description && !showAlwaysDescription\" inline [text]=\"description\"/>\n    </div>\n    <span class=\"description\" *ngIf=\"description && showAlwaysDescription\">{{ description }}</span>\n  </div>\n</label>\n", styles: ["label{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}label.disabled{pointer-events:none;color:#d9d9d9}label .biit-radio{transform:rotate(-30deg)}label .biit-radio.checked{transform:rotate(0)}label .biit-radio.disabled{transform:rotate(-30deg)}label:hover .biit-radio{transform:rotate(-15deg)}label:hover .biit-radio.checked{transform:rotate(15deg)}label>div{display:flex;flex-direction:column;margin-left:.75em}label>div div{display:flex}input[type=radio]{appearance:none;background-color:#fff;margin:0}.biit-radio{display:inline-flex;height:.9em;width:.9em;margin-top:.2em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.description{font-size:.75em;color:gray;line-height:120%;font-style:italic}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], showAlwaysDescription: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class BiitRadioButtonModule {
+}
+BiitRadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitRadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitRadioButtonModule, declarations: [BiitRadioButtonComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule], exports: [BiitRadioButtonComponent] });
+BiitRadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitRadioButtonModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitRadioButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitRadioButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule,
+                        BiitTooltipIconModule
+                    ],
+                    exports: [
+                        BiitRadioButtonComponent
+                    ]
+                }]
+        }] });
+
+class BiitTextareaComponent {
+    constructor() {
+        this.placeholder = '';
+        this.onActionPerformed = new EventEmitter();
+        this.reveal = false;
+        this.resize = 'none';
+        this.onChange = (_) => { };
+        this.onTouch = () => { };
+    }
+    ngOnInit() {
+        this.readonly = this.checkBooleanInput(this.readonly);
+        this.resizeX = this.checkBooleanInput(this.resizeX);
+        this.resizeY = this.checkBooleanInput(this.resizeX);
+        this.disabled = this.checkBooleanInput(this.disabled);
+        this.required = this.checkBooleanInput(this.required);
+        if (this.resizeX && this.resizeY) {
+            this.resize = 'both';
+        }
+        else if (this.resizeX) {
+            this.resize = 'horizontal';
+        }
+        else if (this.resizeY) {
+            this.resize = 'vertical';
+        }
+    }
+    checkBooleanInput(value) {
+        switch (value) {
+            case undefined:
+                return false;
+            case false:
+                return false;
+            default:
+                return true;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+}
+BiitTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitTextareaComponent, selector: "biit-textarea", inputs: { placeholder: "placeholder", error: "error", description: "description", info: "info", icon: "icon", fieldName: "fieldName", maxLength: "maxLength", readonly: "readonly", resizeX: ["resize-x", "resizeX"], resizeY: ["resize-y", "resizeY"], disabled: "disabled", required: "required" }, outputs: { onActionPerformed: "onActionPerformed" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitTextareaComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <textarea\n      class=\"input-object\" required\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"this.onChange($event);\"\n      (keydown.enter)=\"onActionPerformed.emit(value)\"\n      [attr.name]=\"fieldName\"\n      [attr.maxlength]=\"maxLength\"\n      [class.error]=\"error\"\n      [class.reveal]=\"reveal\"\n      [style.resize]=\"resize\"\n    ></textarea>\n    <div class=\"input-placeholder\">\n      {{ placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error\" id=\"exclamation\" name=\"exclamation\" class=\"input-error-icon\"\n               [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;height:inherit;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:#D9D9D9}.biit-input.readonly .input-object{color:gray}.input-container{position:relative;height:inherit;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.45em .7em;height:inherit;min-height:2.25em;width:100%;min-width:2.1em;font-weight:400;border-bottom:3px solid #262626}.input-object:focus{outline:none;background:#D9D9D9}.input-object:hover{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:valid~.input-placeholder{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:#a1093f;padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i3$1.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-textarea', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitTextareaComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <textarea\n      class=\"input-object\" required\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"this.onChange($event);\"\n      (keydown.enter)=\"onActionPerformed.emit(value)\"\n      [attr.name]=\"fieldName\"\n      [attr.maxlength]=\"maxLength\"\n      [class.error]=\"error\"\n      [class.reveal]=\"reveal\"\n      [style.resize]=\"resize\"\n    ></textarea>\n    <div class=\"input-placeholder\">\n      {{ placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error\" id=\"exclamation\" name=\"exclamation\" class=\"input-error-icon\"\n               [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;height:inherit;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:#D9D9D9}.biit-input.readonly .input-object{color:gray}.input-container{position:relative;height:inherit;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.45em .7em;height:inherit;min-height:2.25em;width:100%;min-width:2.1em;font-weight:400;border-bottom:3px solid #262626}.input-object:focus{outline:none;background:#D9D9D9}.input-object:hover{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:valid~.input-placeholder{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:#a1093f;padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], info: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], fieldName: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], resizeX: [{
+                type: Input,
+                args: ['resize-x']
+            }], resizeY: [{
+                type: Input,
+                args: ['resize-y']
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], onActionPerformed: [{
+                type: Output
+            }] } });
+
+class BiitTextareaModule {
+}
+BiitTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitTextareaModule, declarations: [BiitTextareaComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule], exports: [BiitTextareaComponent] });
+BiitTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTextareaModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTextareaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitTextareaComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule,
+                        BiitTooltipIconModule
+                    ],
+                    exports: [
+                        BiitTextareaComponent,
+                    ]
+                }]
+        }] });
+
+class CalendarDatePipe {
+    constructor() {
+    }
+    transform(date) {
+        return date.getDate();
+    }
+}
+CalendarDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CalendarDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarDatePipe, name: "calendarDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'calendarDate'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class OutOfMonthPipe {
+    constructor() {
+    }
+    transform(date, viewerDate) {
+        return !isSameMonth(date, viewerDate);
+    }
+}
+OutOfMonthPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutOfMonthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+OutOfMonthPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OutOfMonthPipe, name: "outOfMonth" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutOfMonthPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'outOfMonth'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class IsTodayPipe {
+    constructor() {
+    }
+    transform(date) {
+        return isToday(date);
+    }
+}
+IsTodayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsTodayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsTodayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IsTodayPipe, name: "isToday" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsTodayPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isToday'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class IsSameDayPipe {
+    constructor() {
+    }
+    transform(date1, date2) {
+        return isSameDay(date1, date2);
+    }
+}
+IsSameDayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsSameDayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsSameDayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IsSameDayPipe, name: "isSameDay" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsSameDayPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isSameDay'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class IsDisabledPipe {
+    constructor() {
+    }
+    transform(date, disabledDates, disableWeekdays, disableWeekends, min, max) {
+        let disabled = false;
+        disabledDates.forEach(target => {
+            if (isSameDay(date, target)) {
+                disabled = true;
+            }
+        });
+        if (disableWeekdays && !isWeekend(date)) {
+            disabled = true;
+        }
+        if (disableWeekends && isWeekend(date)) {
+            disabled = true;
+        }
+        if (min && date?.getTime() < min?.getTime())
+            disabled = true;
+        if (max && date?.getTime() > max?.getTime())
+            disabled = true;
+        return disabled;
+    }
+}
+IsDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IsDisabledPipe, name: "isDisabled" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isDisabled'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class BiitDatePickerComponent {
+    set isCalendarMode(value) {
+        this.calendarMode = coerceBooleanProperty(value);
+    }
+    set placeholder(placeholder) {
+        this._placeholder = placeholder;
+    }
+    get inputElement() { return this.elem.nativeElement.querySelector('.input-object'); }
+    get dropdownElement() { return this.elem.nativeElement.querySelector('.popup'); }
+    onKeyDown(e) {
+        this.closeDropdown();
+    }
+    constructor(elem, transloco) {
+        this.elem = elem;
+        this.transloco = transloco;
+        this.calendarMode = false;
+        this.disabledDays = [];
+        this._placeholder = '';
+        this.error = "";
+        this.dropdownOpen = false;
+        this.monthSelector = false;
+        this.days = [];
+        this.headers = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+        this.viewerDate = new Date();
+        this.add = add;
+        this.sub = sub;
+        this.parseISO = parseISO;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    checkBooleanInput(value) {
+        switch (value) {
+            case undefined:
+                return false;
+            case false:
+                return false;
+            default:
+                return true;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        if (this.calendarMode && !value) {
+            this.value = new Date();
+        }
+        else {
+            this.value = value;
+        }
+    }
+    onModelChange(value) {
+        if (value) {
+            if (this.min && new Date(value).getTime() <= (new Date(this.min).getTime()))
+                value = add(this.min, { minutes: 1 });
+            if (this.max && new Date(value).getTime() > new Date(this.max).getTime())
+                value = sub(this.max, { minutes: 1 });
+            this.value = new Date(value);
+            this.viewerDate = new Date(value);
+            this.onChange(value);
+        }
+    }
+    ngOnInit() {
+        this.initLocalization();
+        this.disabled = this.checkBooleanInput(this.disabled);
+        this.readonly = this.checkBooleanInput(this.readonly);
+        this.required = this.checkBooleanInput(this.required);
+        this.disableWeekdays = this.checkBooleanInput(this.disableWeekdays);
+        this.disableWeekends = this.checkBooleanInput(this.disableWeekends);
+        this.timePicker = this.checkBooleanInput(this.timePicker);
+        this.drawCalendar();
+    }
+    initLocalization() {
+        switch (this.transloco.getActiveLang()) {
+            case 'es':
+                this.locale = es;
+                break;
+            case 'nl':
+                this.locale = nl;
+                break;
+            default:
+                this.locale = enGB;
+        }
+        setDefaultOptions({ locale: this.locale });
+    }
+    handleMouseEvents($event) {
+        if (this.dropdownOpen && !this.elem.nativeElement.contains($event.target)) {
+            this.closeDropdown();
+        }
+    }
+    changeView() {
+        this.monthSelector = !this.monthSelector;
+        this.setPopupComponentProperties();
+    }
+    openDropdown() {
+        if (!this.value)
+            this.onModelChange(new Date());
+        this.viewerDate = this.value;
+        this.monthSelector = false;
+        this.drawCalendar();
+        this.setPopupComponentProperties();
+        this.inputElement.focus();
+        // Setting a timeout because it doesn't load upwards/downwards css classes on execution time
+        setTimeout(() => {
+            this.dropdownOpen = true;
+            this.dropdownElement.setAttribute('aria-expanded', "true");
+        }, 100);
+    }
+    closeDropdown() {
+        this.dropdownOpen = false;
+        this.dropdownElement.setAttribute('aria-expanded', "false");
+        this.inputElement.focus();
+    }
+    setPopupComponentProperties() {
+        let dropdown = this.dropdownElement;
+        dropdown.style.display = 'block';
+        let input = this.inputElement;
+        // Checking available screen space
+        const fitsBottom = bottomCheck();
+        const fitsRight = rightCheck();
+        const fitsLeft = leftCheck();
+        if (!fitsRight && fitsLeft) {
+            dropdown.style.marginLeft = input.offsetWidth - dropdown.offsetWidth + 'px';
+        }
+        else {
+            dropdown.style.marginLeft = null;
+        }
+        dropdown.classList.remove('onwards');
+        dropdown.classList.remove('downwards');
+        if (!fitsBottom) {
+            dropdown.classList.add('onwards');
+            dropdown.style.marginTop = -(dropdown.offsetHeight + input.offsetHeight) + 'px';
+        }
+        else {
+            dropdown.classList.add('downwards');
+            dropdown.style.marginTop = null;
+        }
+        // Support inner functions
+        function bottomCheck() {
+            return input.getBoundingClientRect().bottom + dropdown.offsetHeight <= window.innerHeight ||
+                input.getBoundingClientRect().top - dropdown.offsetHeight <= 0;
+        }
+        function rightCheck() {
+            return input.getBoundingClientRect().right + dropdown.offsetWidth <= window.innerWidth;
+        }
+        function leftCheck() {
+            return input.getBoundingClientRect().right - dropdown.offsetWidth >= 0;
+        }
+    }
+    drawCalendar() {
+        const firstDay = startOfWeek(setDate(this.viewerDate, 1));
+        const lastDay = add(firstDay, { days: 41 });
+        this.days = eachDayOfInterval({ start: firstDay, end: lastDay });
+    }
+    prevMonth() {
+        this.viewerDate = sub(this.viewerDate, { months: 1 });
+        this.drawCalendar();
+    }
+    nextMonth() {
+        this.viewerDate = add(this.viewerDate, { months: 1 });
+        this.drawCalendar();
+    }
+    setToday() {
+        this.viewerDate = new Date();
+        this.drawCalendar();
+        this.onModelChange(new Date());
+    }
+    log(value) {
+        console.debug('DEVELOPMENT LOG: ', value);
+    }
+}
+BiitDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+BiitDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDatePickerComponent, selector: "biit-datepicker", inputs: { disabled: "disabled", readonly: "readonly", required: "required", isCalendarMode: ["calendar-mode", "isCalendarMode"], disabledDays: "disabledDays", disableWeekdays: "disableWeekdays", disableWeekends: "disableWeekends", timePicker: "timePicker", min: "min", max: "max", placeholder: "placeholder", error: "error", description: "description" }, host: { listeners: { "document:pointerdown": "handleMouseEvents($event)", "keydown.esc": "onKeyDown($event)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitDatePickerComponent),
+            multi: true
+        },
+        {
+            provide: TRANSLOCO_SCOPE,
+            useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
+        }
+    ], ngImport: i0, template: "<ng-container *ngIf=\"calendarMode; then calendarModeTemplate else datePickerTemplate\"></ng-container>\n\n<ng-template #datePickerTemplate>\n  <div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" >\n    <div class=\"input-container\">\n      <input class=\"input-object\"\n             [ngModel]=\"value && !timePicker ? (value | date: 'yyyy-MM-dd') :\n                        value && timePicker ? (value | date: 'yyyy-MM-dd\\THH:mm') :\n                        undefined\"\n             (ngModelChange)=\"onModelChange(parseISO($event))\"\n             [type]=\"timePicker ? 'datetime-local' : 'date'\" required\n             [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n             [min]=\"min ? (min | date: 'yyyy-MM-dd') : undefined\"\n             [max]=\"max ? (max | date: 'yyyy-MM-dd') : undefined\"\n             [disabled]=\"disabled\"\n      >\n      <div class=\"input-show-icon-container\"\n           [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n           (click)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           (keydown.enter)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           tabindex=\"0\">\n        <biit-icon [name]=\"'calendar'\"\n                   class=\"input-show-icon\"\n                   [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n        ></biit-icon>\n      </div>\n      <div class=\"input-placeholder input-filled\">\n        {{_placeholder}}\n        <a *ngIf=\"required\"\n           [style.color]=\"value ? null : 'red'\">*</a>\n      </div>\n      <biit-icon *ngIf=\"error || (value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max)\"\n                 name=\"exclamation\"\n                 class=\"input-error-icon\"\n                 [pathStyle]=\"{fill:'#A1093F'}\"\n      ></biit-icon>\n      <div *ngIf=\"description\" class=\"input-description\">\n        <a>\n          {{description}}\n        </a>\n      </div>\n\n      <div style=\"position: relative; height: 0;\">\n        <div class=\"popup\"\n             [class.dropdown-open]=\"dropdownOpen\"\n             [style.height]=\"!monthSelector && timePicker ? '29.1em + 3px)' : null\">\n          <div *ngIf=\"!monthSelector\"\n               class=\"month-view\">\n            <div class=\"month-selector\">\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      style=\"rotate: 180deg\"\n                      (click)=\"prevMonth()\"\n              ></button>\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      (click)=\"nextMonth()\"\n              ></button>\n            </div>\n\n            <div class=\"grid\">\n              <div *ngFor=\"let day of days | slice:0:7\"\n                   class=\"grid-element header\">\n                {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n              </div>\n              <button *ngFor=\"let day of days\"\n                      class=\"grid-element day\"\n                      [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                      [class.is-today]=\"day | isToday\"\n                      [class.selected]=\"day | isSameDay: value\"\n                      [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                      (click)=\"onModelChange(day)\"\n                      tabindex=\"0\"\n              >\n                {{day | calendarDate}}\n              </button>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      class=\"today-btn\"\n                      (click)=\"setToday()\">\n                {{'inputs.today' | transloco}}\n              </button>\n              <button biit-button tertiary\n                      (click)=\"closeDropdown()\">\n                {{'inputs.done' | transloco}}\n              </button>\n            </div>\n\n            <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n              <div class=\"selector\">\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"year-view\" *ngIf=\"monthSelector\">\n            <div class=\"month-selector\">\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n            </div>\n\n            <div class=\"selector\">\n              <div class=\"column\"\n                   style=\"min-width: 8em;\">\n                <div class=\"item arrow\"\n                     (click)=\"prevMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n                  {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"prevMonth()\">\n                  {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"nextMonth()\">\n                  {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n                  {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"nextMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n\n              <div class=\"column\"\n                   style=\"min-width: 5em;\">\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n                  {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n                  {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      (click)=\"drawCalendar(); changeView()\">\n                {{'inputs.back' | transloco}}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom-line\"></div>\n      <div *ngIf=\"error\" class=\"input-error-msg\">\n        <a>\n          {{error}}\n        </a>\n      </div>\n      <div *ngIf=\"value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max\" class=\"input-error-msg\">\n        <a>\n          {{'inputs.date-error' | transloco}}\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarModeTemplate>\n  <div class=\"popup calendar-mode\"\n       [style.height]=\"!monthSelector && timePicker ? 'calc(29.1em + 3px)' : null\">\n    <div *ngIf=\"!monthSelector\"\n         class=\"month-view\">\n      <div class=\"month-selector\">\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                style=\"rotate: 180deg\"\n                (click)=\"prevMonth()\"\n        ></button>\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                (click)=\"nextMonth()\"\n        ></button>\n      </div>\n\n      <div class=\"grid\">\n        <div *ngFor=\"let day of days | slice:0:7\"\n             class=\"grid-element header\">\n          {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n        </div>\n        <button *ngFor=\"let day of days\"\n                class=\"grid-element day\"\n                [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                [class.is-today]=\"day | isToday\"\n                [class.selected]=\"day | isSameDay: value\"\n                [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                (click)=\"onModelChange(day)\"\n                tabindex=\"0\"\n        >\n          {{day | calendarDate}}\n        </button>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                class=\"today-btn\"\n                (click)=\"setToday()\">\n          {{'inputs.today' | transloco}}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'H') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'mm') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"year-view\" *ngIf=\"monthSelector\">\n      <div class=\"month-selector\">\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n      </div>\n\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 8em;\">\n          <div class=\"item arrow\"\n               (click)=\"prevMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n            {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"prevMonth()\">\n            {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"nextMonth()\">\n            {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n            {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"nextMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n\n        <div class=\"column\"\n             style=\"min-width: 5em;\">\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n            {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n            {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                (click)=\"drawCalendar(); changeView()\">\n          {{'inputs.back' | transloco}}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}.popup{display:block;width:17.5em;border:3px solid #262626;background:white;padding:.45em;-webkit-user-select:none;user-select:none;opacity:0;pointer-events:none;transform-origin:top;margin-top:-3px;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.popup:not(.calendar-mode){position:absolute;z-index:2}.popup.calendar-mode{position:relative;opacity:1;pointer-events:all;margin-top:0}.popup.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.popup.disabled{visibility:hidden}.popup .month-view{display:flex;flex-direction:column;justify-content:space-between}.popup .month-view .month-selector{display:flex;justify-content:space-between;align-items:center}.popup .month-view .month-selector .month-label{width:12em}.popup .month-view .month-selector .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:#262626}.popup .month-view .month-selector ::ng-deep button .icon-button-svg{width:.8em;height:.8em}.popup .month-view .grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.popup .month-view .grid .grid-element{display:flex;align-items:center;justify-content:center;height:2.1em;width:2.1em}.popup .month-view .grid .grid-element.header{font-weight:800;cursor:default;text-transform:capitalize}.popup .month-view .grid .grid-element.day{cursor:pointer;background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}.popup .month-view .grid .grid-element.day.outer-day{color:#d9d9d9}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:#262626}.popup .month-view .grid .grid-element.day.is-today{border:3px solid #262626}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:#D9D9D9}.popup .month-view .grid .grid-element.day:active{color:#f20d5e}.popup .month-view .grid .grid-element.day.selected{background:#F20D5E}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:#F20D5E;color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:#a1093f;pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:#fbaec9}.popup .month-view .buttons{display:flex;justify-content:space-between;padding:.3em .85em}.popup .month-view .buttons .today-btn ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:#262626}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid #262626;margin-top:.45em;margin-bottom:-.45em}.popup .year-view{height:100%;display:flex;flex-direction:column;justify-content:space-between}.popup .year-view .month-label{width:100%;height:2.1em;align-items:center}.popup .year-view .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .year-view .month-label ::ng-deep .button-base .bar{background:#262626}.popup .year-view .buttons{display:flex;justify-content:flex-end;padding:.3em .85em}.popup .selector{display:flex;justify-content:center}.popup .selector .column{display:block}.popup .selector .column .item{width:100%;height:1.5em;display:flex;justify-content:center;align-items:center;cursor:pointer}.popup .selector .column .item.primary{height:1.8em;color:#262626;font-weight:500}.popup .selector .column .item.secondary{color:gray}.popup .selector .column .item.tertiary{color:#d9d9d9}.popup .selector .column .item.arrow{display:inline-flex;width:100%;height:1.8em}.popup .selector .column .item.arrow .up{height:.7em;rotate:-90deg}.popup .selector .column .item.arrow .down{height:.7em;rotate:90deg}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object,.biit-input.disabled .input-show-icon-container{background:#D9D9D9}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:#D9D9D9}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){.input-object{padding-top:.55em!important}}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.7em;color:#a1093f;padding-top:.2em;padding-bottom:.15em;min-height:1.05em}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:white}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.onwards{--origin: 1em}.downwards{--origin: -1em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "component", type: i4.BiitButtonComponent, selector: "button[biit-button]" }, { kind: "directive", type: i4.BiitButtonTertiaryDirective, selector: "[tertiary]" }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6.TranslocoDatePipe, name: "translocoDate" }, { kind: "pipe", type: CalendarDatePipe, name: "calendarDate" }, { kind: "pipe", type: OutOfMonthPipe, name: "outOfMonth" }, { kind: "pipe", type: IsTodayPipe, name: "isToday" }, { kind: "pipe", type: IsSameDayPipe, name: "isSameDay" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-datepicker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitDatePickerComponent),
+                            multi: true
+                        },
+                        {
+                            provide: TRANSLOCO_SCOPE,
+                            useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
+                        }
+                    ], host: {
+                        '(document:pointerdown)': 'handleMouseEvents($event)'
+                    }, template: "<ng-container *ngIf=\"calendarMode; then calendarModeTemplate else datePickerTemplate\"></ng-container>\n\n<ng-template #datePickerTemplate>\n  <div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" >\n    <div class=\"input-container\">\n      <input class=\"input-object\"\n             [ngModel]=\"value && !timePicker ? (value | date: 'yyyy-MM-dd') :\n                        value && timePicker ? (value | date: 'yyyy-MM-dd\\THH:mm') :\n                        undefined\"\n             (ngModelChange)=\"onModelChange(parseISO($event))\"\n             [type]=\"timePicker ? 'datetime-local' : 'date'\" required\n             [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n             [min]=\"min ? (min | date: 'yyyy-MM-dd') : undefined\"\n             [max]=\"max ? (max | date: 'yyyy-MM-dd') : undefined\"\n             [disabled]=\"disabled\"\n      >\n      <div class=\"input-show-icon-container\"\n           [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n           (click)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           (keydown.enter)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           tabindex=\"0\">\n        <biit-icon [name]=\"'calendar'\"\n                   class=\"input-show-icon\"\n                   [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n        ></biit-icon>\n      </div>\n      <div class=\"input-placeholder input-filled\">\n        {{_placeholder}}\n        <a *ngIf=\"required\"\n           [style.color]=\"value ? null : 'red'\">*</a>\n      </div>\n      <biit-icon *ngIf=\"error || (value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max)\"\n                 name=\"exclamation\"\n                 class=\"input-error-icon\"\n                 [pathStyle]=\"{fill:'#A1093F'}\"\n      ></biit-icon>\n      <div *ngIf=\"description\" class=\"input-description\">\n        <a>\n          {{description}}\n        </a>\n      </div>\n\n      <div style=\"position: relative; height: 0;\">\n        <div class=\"popup\"\n             [class.dropdown-open]=\"dropdownOpen\"\n             [style.height]=\"!monthSelector && timePicker ? '29.1em + 3px)' : null\">\n          <div *ngIf=\"!monthSelector\"\n               class=\"month-view\">\n            <div class=\"month-selector\">\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      style=\"rotate: 180deg\"\n                      (click)=\"prevMonth()\"\n              ></button>\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      (click)=\"nextMonth()\"\n              ></button>\n            </div>\n\n            <div class=\"grid\">\n              <div *ngFor=\"let day of days | slice:0:7\"\n                   class=\"grid-element header\">\n                {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n              </div>\n              <button *ngFor=\"let day of days\"\n                      class=\"grid-element day\"\n                      [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                      [class.is-today]=\"day | isToday\"\n                      [class.selected]=\"day | isSameDay: value\"\n                      [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                      (click)=\"onModelChange(day)\"\n                      tabindex=\"0\"\n              >\n                {{day | calendarDate}}\n              </button>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      class=\"today-btn\"\n                      (click)=\"setToday()\">\n                {{'inputs.today' | transloco}}\n              </button>\n              <button biit-button tertiary\n                      (click)=\"closeDropdown()\">\n                {{'inputs.done' | transloco}}\n              </button>\n            </div>\n\n            <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n              <div class=\"selector\">\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"year-view\" *ngIf=\"monthSelector\">\n            <div class=\"month-selector\">\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n            </div>\n\n            <div class=\"selector\">\n              <div class=\"column\"\n                   style=\"min-width: 8em;\">\n                <div class=\"item arrow\"\n                     (click)=\"prevMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n                  {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"prevMonth()\">\n                  {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"nextMonth()\">\n                  {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n                  {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"nextMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n\n              <div class=\"column\"\n                   style=\"min-width: 5em;\">\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n                  {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n                  {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      (click)=\"drawCalendar(); changeView()\">\n                {{'inputs.back' | transloco}}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom-line\"></div>\n      <div *ngIf=\"error\" class=\"input-error-msg\">\n        <a>\n          {{error}}\n        </a>\n      </div>\n      <div *ngIf=\"value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max\" class=\"input-error-msg\">\n        <a>\n          {{'inputs.date-error' | transloco}}\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarModeTemplate>\n  <div class=\"popup calendar-mode\"\n       [style.height]=\"!monthSelector && timePicker ? 'calc(29.1em + 3px)' : null\">\n    <div *ngIf=\"!monthSelector\"\n         class=\"month-view\">\n      <div class=\"month-selector\">\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                style=\"rotate: 180deg\"\n                (click)=\"prevMonth()\"\n        ></button>\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                (click)=\"nextMonth()\"\n        ></button>\n      </div>\n\n      <div class=\"grid\">\n        <div *ngFor=\"let day of days | slice:0:7\"\n             class=\"grid-element header\">\n          {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n        </div>\n        <button *ngFor=\"let day of days\"\n                class=\"grid-element day\"\n                [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                [class.is-today]=\"day | isToday\"\n                [class.selected]=\"day | isSameDay: value\"\n                [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                (click)=\"onModelChange(day)\"\n                tabindex=\"0\"\n        >\n          {{day | calendarDate}}\n        </button>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                class=\"today-btn\"\n                (click)=\"setToday()\">\n          {{'inputs.today' | transloco}}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'H') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'mm') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"year-view\" *ngIf=\"monthSelector\">\n      <div class=\"month-selector\">\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n      </div>\n\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 8em;\">\n          <div class=\"item arrow\"\n               (click)=\"prevMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n            {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"prevMonth()\">\n            {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"nextMonth()\">\n            {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n            {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"nextMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n\n        <div class=\"column\"\n             style=\"min-width: 5em;\">\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n            {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n            {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                (click)=\"drawCalendar(); changeView()\">\n          {{'inputs.back' | transloco}}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}.popup{display:block;width:17.5em;border:3px solid #262626;background:white;padding:.45em;-webkit-user-select:none;user-select:none;opacity:0;pointer-events:none;transform-origin:top;margin-top:-3px;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.popup:not(.calendar-mode){position:absolute;z-index:2}.popup.calendar-mode{position:relative;opacity:1;pointer-events:all;margin-top:0}.popup.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.popup.disabled{visibility:hidden}.popup .month-view{display:flex;flex-direction:column;justify-content:space-between}.popup .month-view .month-selector{display:flex;justify-content:space-between;align-items:center}.popup .month-view .month-selector .month-label{width:12em}.popup .month-view .month-selector .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:#262626}.popup .month-view .month-selector ::ng-deep button .icon-button-svg{width:.8em;height:.8em}.popup .month-view .grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.popup .month-view .grid .grid-element{display:flex;align-items:center;justify-content:center;height:2.1em;width:2.1em}.popup .month-view .grid .grid-element.header{font-weight:800;cursor:default;text-transform:capitalize}.popup .month-view .grid .grid-element.day{cursor:pointer;background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}.popup .month-view .grid .grid-element.day.outer-day{color:#d9d9d9}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:#262626}.popup .month-view .grid .grid-element.day.is-today{border:3px solid #262626}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:#D9D9D9}.popup .month-view .grid .grid-element.day:active{color:#f20d5e}.popup .month-view .grid .grid-element.day.selected{background:#F20D5E}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:#F20D5E;color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:#a1093f;pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:#fbaec9}.popup .month-view .buttons{display:flex;justify-content:space-between;padding:.3em .85em}.popup .month-view .buttons .today-btn ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:#262626}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid #262626;margin-top:.45em;margin-bottom:-.45em}.popup .year-view{height:100%;display:flex;flex-direction:column;justify-content:space-between}.popup .year-view .month-label{width:100%;height:2.1em;align-items:center}.popup .year-view .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .year-view .month-label ::ng-deep .button-base .bar{background:#262626}.popup .year-view .buttons{display:flex;justify-content:flex-end;padding:.3em .85em}.popup .selector{display:flex;justify-content:center}.popup .selector .column{display:block}.popup .selector .column .item{width:100%;height:1.5em;display:flex;justify-content:center;align-items:center;cursor:pointer}.popup .selector .column .item.primary{height:1.8em;color:#262626;font-weight:500}.popup .selector .column .item.secondary{color:gray}.popup .selector .column .item.tertiary{color:#d9d9d9}.popup .selector .column .item.arrow{display:inline-flex;width:100%;height:1.8em}.popup .selector .column .item.arrow .up{height:.7em;rotate:-90deg}.popup .selector .column .item.arrow .down{height:.7em;rotate:90deg}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object,.biit-input.disabled .input-show-icon-container{background:#D9D9D9}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:#D9D9D9}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){.input-object{padding-top:.55em!important}}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.7em;color:#a1093f;padding-top:.2em;padding-bottom:.15em;min-height:1.05em}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:white}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.onwards{--origin: 1em}.downwards{--origin: -1em}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.TranslocoService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], isCalendarMode: [{
+                type: Input,
+                args: ['calendar-mode']
+            }], disabledDays: [{
+                type: Input
+            }], disableWeekdays: [{
+                type: Input
+            }], disableWeekends: [{
+                type: Input
+            }], timePicker: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown.esc', ['$event']]
+            }] } });
+
+class MonthSelectorLabelPipe {
+    constructor(transloco) {
+        this.transloco = transloco;
+    }
+    transform(date) {
+        let month = 'inputs.month-' + (date.getMonth() + 1);
+        return this.transloco.selectTranslate(month);
+    }
+}
+MonthSelectorLabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthSelectorLabelPipe, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.Pipe });
+MonthSelectorLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MonthSelectorLabelPipe, name: "monthSelectorLabel", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthSelectorLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'monthSelectorLabel',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslocoService }]; } });
+
+class BiitDatePickerModule {
+}
+BiitDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitDatePickerModule, declarations: [BiitDatePickerComponent,
+        MonthSelectorLabelPipe,
+        CalendarDatePipe,
+        OutOfMonthPipe,
+        IsTodayPipe,
+        IsSameDayPipe,
+        IsDisabledPipe], imports: [CommonModule,
+        FormsModule,
+        BiitIconButtonModule,
+        BiitButtonModule,
+        TranslocoRootModule,
+        LocalizedDatePipeModule,
+        TranslocoDatePipe,
+        BiitIconModule], exports: [BiitDatePickerComponent] });
+BiitDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatePickerModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconButtonModule,
+        BiitButtonModule,
+        TranslocoRootModule,
+        LocalizedDatePipeModule,
+        BiitIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitDatePickerComponent,
+                        MonthSelectorLabelPipe,
+                        CalendarDatePipe,
+                        OutOfMonthPipe,
+                        IsTodayPipe,
+                        IsSameDayPipe,
+                        IsDisabledPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconButtonModule,
+                        BiitButtonModule,
+                        TranslocoRootModule,
+                        LocalizedDatePipeModule,
+                        TranslocoDatePipe,
+                        BiitIconModule
+                    ],
+                    exports: [
+                        BiitDatePickerComponent
+                    ]
+                }]
+        }] });
+
+var View;
+(function (View) {
+    View["MONTH"] = "MONTH";
+    View["YEAR"] = "YEAR";
+})(View || (View = {}));
+
+class BiitSliderComponent {
+    constructor() {
+        this.labels = [];
+        this.showTooltip = true;
+        this.disabled = false;
+        this.tooltipBoxVisible = false;
+        this.onChange = (_) => {
+        };
+        this.onTouch = () => {
+        };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    ngAfterViewChecked() {
+        this.progressScript();
+    }
+    progressScript() {
+        const slider = this.slider.nativeElement;
+        const tooltip = this.tooltip.nativeElement;
+        const progress = ((slider.value - slider.min) * 100) / (slider.max - slider.min);
+        // Set slider bar background colors according to progress
+        this.slider.nativeElement.style.background = `linear-gradient(to right, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+        // Set slider tooltip position
+        const tooltipPosition = (parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.15) - (progress * 0.2);
+        tooltip.innerHTML = `<span>${slider.value}</span>`;
+        tooltip.style.left = `calc(${progress}% + (${tooltipPosition}px))`;
+    }
+    updateValue(index) {
+        const result = this.min + ((this.max - this.min) / (this.ticks - 1) * index);
+        this.writeValue(result);
+        this.onChange(this.value);
+    }
+}
+BiitSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitSliderComponent, selector: "biit-slider", inputs: { min: "min", max: "max", step: "step", ticks: "ticks", labels: "labels", showTooltip: "showTooltip" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitSliderComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["ranger"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div class=\"slider\">\n  <input #ranger type=\"range\"\n         [(ngModel)]=\"value\"\n         (ngModelChange)=\"onChange(ranger.value);\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [step]=\"step\"\n         (input)=\"progressScript()\"\n         (pointerdown)=\"tooltipBoxVisible = true\"\n         (pointerup)=\"tooltipBoxVisible = false\"\n  >\n  <div #tooltip class=\"tooltip\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n  <div class=\"ticks\">\n    <span *ngFor=\"let tick of [].constructor(ticks); index as i\"\n          [class.no-labels]=\"!labels.length\"\n          (click)=\"updateValue(i)\">\n      {{labels[i]}}\n    </span>\n  </div>\n</div>\n", styles: [".slider{position:relative;flex:1}input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;width:100%;height:.3em;background:#D7D7D7;margin-left:0}input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.ticks{display:flex;justify-content:space-between;margin-top:5px}.ticks span{display:flex;justify-content:center;width:.75em;height:1.85em;padding:0 .3em 1.3em;background-color:#262626;line-height:2.4em;white-space:nowrap;font-weight:500;box-sizing:border-box;background-clip:content-box;cursor:pointer;font-size:1em}.ticks span.no-labels{height:.85em;padding-bottom:.3em}.tooltip{position:absolute;top:-30%;transition:opacity .2s ease-in-out;pointer-events:none}.tooltip span{font-size:1em;background:white;padding:.2em;border:.05em solid #262626;height:.7em;display:block;line-height:.7em;position:relative;left:-15%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitSliderComponent),
+                            multi: true
+                        }
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"slider\">\n  <input #ranger type=\"range\"\n         [(ngModel)]=\"value\"\n         (ngModelChange)=\"onChange(ranger.value);\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [step]=\"step\"\n         (input)=\"progressScript()\"\n         (pointerdown)=\"tooltipBoxVisible = true\"\n         (pointerup)=\"tooltipBoxVisible = false\"\n  >\n  <div #tooltip class=\"tooltip\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n  <div class=\"ticks\">\n    <span *ngFor=\"let tick of [].constructor(ticks); index as i\"\n          [class.no-labels]=\"!labels.length\"\n          (click)=\"updateValue(i)\">\n      {{labels[i]}}\n    </span>\n  </div>\n</div>\n", styles: [".slider{position:relative;flex:1}input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;width:100%;height:.3em;background:#D7D7D7;margin-left:0}input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.ticks{display:flex;justify-content:space-between;margin-top:5px}.ticks span{display:flex;justify-content:center;width:.75em;height:1.85em;padding:0 .3em 1.3em;background-color:#262626;line-height:2.4em;white-space:nowrap;font-weight:500;box-sizing:border-box;background-clip:content-box;cursor:pointer;font-size:1em}.ticks span.no-labels{height:.85em;padding-bottom:.3em}.tooltip{position:absolute;top:-30%;transition:opacity .2s ease-in-out;pointer-events:none}.tooltip span{font-size:1em;background:white;padding:.2em;border:.05em solid #262626;height:.7em;display:block;line-height:.7em;position:relative;left:-15%}\n"] }]
+        }], propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], ticks: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], showTooltip: [{
+                type: Input
+            }], slider: [{
+                type: ViewChild,
+                args: ['ranger']
+            }], tooltip: [{
+                type: ViewChild,
+                args: ['tooltip']
+            }] } });
+
+class BiitSliderModule {
+}
+BiitSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderModule, declarations: [BiitSliderComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule], exports: [BiitSliderComponent] });
+BiitSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitSliderComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule
+                    ],
+                    exports: [
+                        BiitSliderComponent,
+                    ]
+                }]
+        }] });
+
+class BiitSliderRangeComponent {
+    constructor() {
+        this.step = 1;
+        this.separator = 1;
+        this.labels = [];
+        this.disabled = false;
+        this.showTooltip = false;
+        this.onChange = (_) => { };
+        this.onTouch = () => { };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    ngAfterViewChecked() {
+        this.progressScript();
+    }
+    checkValues(activeSlider) {
+        const slider1 = this.slider1.nativeElement;
+        const slider2 = this.slider2.nativeElement;
+        const slider1steps = (slider1.value - this.min) / this.step;
+        const slider2steps = (slider2.value - this.min) / this.step;
+        const separatorSteps = Math.ceil(this.separator / this.step);
+        if (activeSlider == 'ranger1' &&
+            slider1.value > this.min + (slider2steps - separatorSteps) * this.step) {
+            slider1.value = this.min + (slider2steps - separatorSteps) * this.step;
+            this.value[0] = this.min + (slider2steps - separatorSteps) * this.step;
+        }
+        if (activeSlider == 'ranger2' &&
+            slider2.value < this.min + (slider1steps + separatorSteps) * this.step) {
+            slider2.value = this.min + (slider1steps + separatorSteps) * this.step;
+            this.value[1] = this.min + (slider1steps + separatorSteps) * this.step;
+        }
+    }
+    progressScript(activeSlider) {
+        const slider1 = this.slider1.nativeElement;
+        const slider2 = this.slider2.nativeElement;
+        const tooltip = this.tooltip.nativeElement;
+        const progress1 = ((slider1.value - this.min) * 100) / (this.max - this.min);
+        const progress2 = ((slider2.value - this.min) * 100) / (this.max - this.min);
+        // Set slider bar background colors according to progress
+        this.slider1.nativeElement.style.background = `linear-gradient(to right, #D7D7D7 ${progress1}%, #F20D5E ${progress1}%, #F20D5E ${progress2}%, #D7D7D7 ${progress2}%)`;
+        // Set slider tooltip position
+        if (activeSlider == 'ranger1') {
+            const tooltipPosition = (parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.15) - (progress1 * 0.2);
+            tooltip.innerHTML = `<span>${slider1.value}</span>`;
+            tooltip.style.left = `calc(${progress1}% + (${tooltipPosition}px))`;
+        }
+        else if (activeSlider == 'ranger2') {
+            const tooltipPosition = (parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.15) - (progress2 * 0.2);
+            tooltip.innerHTML = `<span>${slider2.value}</span>`;
+            tooltip.style.left = `calc(${progress2}% + (${tooltipPosition}px))`;
+        }
+    }
+}
+BiitSliderRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitSliderRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitSliderRangeComponent, selector: "biit-slider-range", inputs: { min: "min", max: "max", step: "step", separator: "separator", ticks: "ticks", labels: "labels" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitSliderRangeComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "slider1", first: true, predicate: ["ranger1"], descendants: true }, { propertyName: "slider2", first: true, predicate: ["ranger2"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div class=\"slider\">\n  <input #ranger1 type=\"range\"\n         [(ngModel)]=\"value[0]\"\n         (ngModelChange)=\"onChange(value);\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [step]=\"step\"\n         (input)=\"checkValues('ranger1'); progressScript('ranger1')\"\n         (pointerdown)=\"progressScript('ranger1'); showTooltip = true\"\n         (pointerup)=\"showTooltip = false\"\n  >\n  <input #ranger2 type=\"range\"\n         [(ngModel)]=\"value[1]\"\n         (ngModelChange)=\"onChange(value);\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [step]=\"step\"\n         (input)=\"checkValues('ranger2'); progressScript('ranger2')\"\n         (pointerdown)=\"progressScript('ranger2'); showTooltip = true\"\n         (pointerup)=\"showTooltip = false\"\n  >\n  <div #tooltip class=\"tooltip\" [style.opacity]=\"showTooltip ? '100%' : '0%'\"></div>\n  <div class=\"ticks\">\n    <span *ngFor=\"let tick of [].constructor(ticks); index as i\"\n          [class.no-labels]=\"!labels.length\">\n      {{labels[i]}}\n    </span>\n  </div>\n</div>\n", styles: [".slider{position:relative;flex:1}input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;width:100%;height:.3em;background:#D7D7D7;pointer-events:none;margin-left:0}input[type=range]:nth-child(2){position:absolute;left:0;top:.45em;background:transparent}input[type=range]:nth-child(2)::-webkit-slider-thumb{margin-top:.2em}input[type=range]::-webkit-slider-thumb{pointer-events:auto;appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]::-moz-range-thumb{pointer-events:auto;appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.ticks{display:flex;justify-content:space-between;margin-top:.25em}.ticks span{display:flex;justify-content:center;width:.75em;height:1.85em;padding:0 .3em 1.3em;background-color:#262626;line-height:2.4em;white-space:nowrap;font-weight:500;box-sizing:border-box;background-clip:content-box;font-size:1em}.ticks span.no-labels{height:.85em;padding-bottom:.3em}.tooltip{position:absolute;top:-30%;transition:opacity .2s ease-in-out;pointer-events:none}.tooltip span{font-size:1em;background:white;padding:.2em;border:.05em solid #262626;height:.7em;display:block;line-height:.7em;position:relative;left:-15%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-slider-range', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitSliderRangeComponent),
+                            multi: true
+                        }
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"slider\">\n  <input #ranger1 type=\"range\"\n         [(ngModel)]=\"value[0]\"\n         (ngModelChange)=\"onChange(value);\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [step]=\"step\"\n         (input)=\"checkValues('ranger1'); progressScript('ranger1')\"\n         (pointerdown)=\"progressScript('ranger1'); showTooltip = true\"\n         (pointerup)=\"showTooltip = false\"\n  >\n  <input #ranger2 type=\"range\"\n         [(ngModel)]=\"value[1]\"\n         (ngModelChange)=\"onChange(value);\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [step]=\"step\"\n         (input)=\"checkValues('ranger2'); progressScript('ranger2')\"\n         (pointerdown)=\"progressScript('ranger2'); showTooltip = true\"\n         (pointerup)=\"showTooltip = false\"\n  >\n  <div #tooltip class=\"tooltip\" [style.opacity]=\"showTooltip ? '100%' : '0%'\"></div>\n  <div class=\"ticks\">\n    <span *ngFor=\"let tick of [].constructor(ticks); index as i\"\n          [class.no-labels]=\"!labels.length\">\n      {{labels[i]}}\n    </span>\n  </div>\n</div>\n", styles: [".slider{position:relative;flex:1}input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;width:100%;height:.3em;background:#D7D7D7;pointer-events:none;margin-left:0}input[type=range]:nth-child(2){position:absolute;left:0;top:.45em;background:transparent}input[type=range]:nth-child(2)::-webkit-slider-thumb{margin-top:.2em}input[type=range]::-webkit-slider-thumb{pointer-events:auto;appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}input[type=range]::-moz-range-thumb{pointer-events:auto;appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.ticks{display:flex;justify-content:space-between;margin-top:.25em}.ticks span{display:flex;justify-content:center;width:.75em;height:1.85em;padding:0 .3em 1.3em;background-color:#262626;line-height:2.4em;white-space:nowrap;font-weight:500;box-sizing:border-box;background-clip:content-box;font-size:1em}.ticks span.no-labels{height:.85em;padding-bottom:.3em}.tooltip{position:absolute;top:-30%;transition:opacity .2s ease-in-out;pointer-events:none}.tooltip span{font-size:1em;background:white;padding:.2em;border:.05em solid #262626;height:.7em;display:block;line-height:.7em;position:relative;left:-15%}\n"] }]
+        }], propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], ticks: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], slider1: [{
+                type: ViewChild,
+                args: ['ranger1']
+            }], slider2: [{
+                type: ViewChild,
+                args: ['ranger2']
+            }], tooltip: [{
+                type: ViewChild,
+                args: ['tooltip']
+            }] } });
+
+class BiitSliderRangeModule {
+}
+BiitSliderRangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitSliderRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderRangeModule, declarations: [BiitSliderRangeComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule], exports: [BiitSliderRangeComponent] });
+BiitSliderRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderRangeModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderRangeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitSliderRangeComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule
+                    ],
+                    exports: [
+                        BiitSliderRangeComponent,
+                    ]
+                }]
+        }] });
+
+class BiitSliderOptionComponent {
+    get index() {
+        return this.data.findIndex(i => i.value == this.value);
+    }
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.inverted = false;
+        this.showTooltip = true;
+        this.disabled = false;
+        this.tooltipBoxVisible = false;
+        this.onChange = (_) => {
+        };
+        this.onTouch = () => {
+        };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    ngOnInit() {
+        this.labelPercent = (100 / this.data.filter(d => d.label).length) - 5 + '%';
+    }
+    ngAfterViewChecked() {
+        this.progressScript();
+        this.cdRef.detectChanges();
+    }
+    progressScript() {
+        const slider = this.slider.nativeElement;
+        const tooltip = this.tooltip.nativeElement;
+        const progress = ((slider.value - slider.min) * 100) / (slider.max - slider.min);
+        // Set slider bar background colors according to progress
+        if (!this.inverted) {
+            this.slider.nativeElement.style.background = `linear-gradient(to right, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+        }
+        else {
+            this.slider.nativeElement.style.background = `linear-gradient(to left, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+        }
+        // Set tooltip text
+        tooltip.innerHTML = `<span>${this.data[slider.value].value}</span>`;
+        // Set slider tooltip position
+        const tooltipPosition = (parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.5) - (progress * 0.16);
+        if (!this.inverted) {
+            tooltip.firstChild.style.left = '-50%';
+            tooltip.style.left = `calc(${progress}% + (${tooltipPosition}px))`;
+        }
+        else {
+            tooltip.firstChild.style.left = '50%';
+            tooltip.style.right = `calc(${progress}% + (${tooltipPosition}px))`;
+        }
+    }
+}
+BiitSliderOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BiitSliderOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitSliderOptionComponent, selector: "biit-slider-option", inputs: { data: "data", inverted: "inverted", showTooltip: "showTooltip" }, host: { properties: { "style.--label-percent": "this.labelPercent" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitSliderOptionComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["rangerHor"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div class=\"slider-option\">\n  <input #rangerHor type=\"range\"\n         orient=\"horizontal\"\n         [class.inverted]=\"inverted\"\n         [ngModel]=\"index\"\n         (ngModelChange)=\"onChange(this.data[rangerHor.value].value);\"\n         [min]=\"0\"\n         [max]=\"data.length - 1\"\n         [step]=\"1\"\n         (input)=\"progressScript()\"\n         (pointerdown)=\"tooltipBoxVisible = true\"\n         (pointerup)=\"tooltipBoxVisible = false\"\n  >\n\n  <div class=\"ticks\">\n    <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n    <span *ngFor=\"let tick of $any(data); index as i; count as c\"\n          [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\">\n      <span (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n        <span>\n          {{(!inverted ? data[i] : data[c-i-1]).label}}\n        </span>\n        <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description\"\n                           [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n        ></biit-tooltip-icon>\n      </span>\n    </span>\n  </div>\n</div>\n", styles: [".slider-option{position:relative;flex:1}.slider-option input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;width:100%;height:.3em;background:#D7D7D7;margin-left:0}.slider-option input[type=range].inverted{direction:rtl}.slider-option input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-option input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}.slider-option input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}.slider-option input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}.slider-option input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-option input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}.slider-option input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}.slider-option input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.slider-option .ticks{display:flex;justify-content:space-between;margin-top:5px;position:relative}.slider-option .ticks>span{display:flex;justify-content:center;width:14px;height:3.3em;padding:0 6px 2.7em;background-color:#262626;font-weight:500;box-sizing:border-box;background-clip:content-box;cursor:pointer;font-size:1em}.slider-option .ticks>span.hide-tick{display:none}.slider-option .ticks>span>span{position:absolute;width:var(--label-percent);top:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center;display:flex;justify-content:center;gap:5px}.slider-option .ticks>span>span>span{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.slider-option .ticks>span>span biit-tooltip-icon{margin:3px}.slider-option .ticks>span:nth-child(2)>span{left:0;text-align:left;justify-content:start}.slider-option .ticks>span:last-child>span{right:0;text-align:right;justify-content:end}.slider-option .tooltip-slider{position:absolute;bottom:4.7em;transition:opacity .2s ease-in-out;pointer-events:none}.slider-option .tooltip-slider ::ng-deep span{font-size:1em;background:white;padding:.1em .2em;border:1px solid #262626;display:block;position:relative;min-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-slider-option', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitSliderOptionComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"slider-option\">\n  <input #rangerHor type=\"range\"\n         orient=\"horizontal\"\n         [class.inverted]=\"inverted\"\n         [ngModel]=\"index\"\n         (ngModelChange)=\"onChange(this.data[rangerHor.value].value);\"\n         [min]=\"0\"\n         [max]=\"data.length - 1\"\n         [step]=\"1\"\n         (input)=\"progressScript()\"\n         (pointerdown)=\"tooltipBoxVisible = true\"\n         (pointerup)=\"tooltipBoxVisible = false\"\n  >\n\n  <div class=\"ticks\">\n    <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n    <span *ngFor=\"let tick of $any(data); index as i; count as c\"\n          [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\">\n      <span (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n        <span>\n          {{(!inverted ? data[i] : data[c-i-1]).label}}\n        </span>\n        <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description\"\n                           [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n        ></biit-tooltip-icon>\n      </span>\n    </span>\n  </div>\n</div>\n", styles: [".slider-option{position:relative;flex:1}.slider-option input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;width:100%;height:.3em;background:#D7D7D7;margin-left:0}.slider-option input[type=range].inverted{direction:rtl}.slider-option input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-option input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}.slider-option input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}.slider-option input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}.slider-option input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-option input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}.slider-option input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}.slider-option input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.slider-option .ticks{display:flex;justify-content:space-between;margin-top:5px;position:relative}.slider-option .ticks>span{display:flex;justify-content:center;width:14px;height:3.3em;padding:0 6px 2.7em;background-color:#262626;font-weight:500;box-sizing:border-box;background-clip:content-box;cursor:pointer;font-size:1em}.slider-option .ticks>span.hide-tick{display:none}.slider-option .ticks>span>span{position:absolute;width:var(--label-percent);top:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center;display:flex;justify-content:center;gap:5px}.slider-option .ticks>span>span>span{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.slider-option .ticks>span>span biit-tooltip-icon{margin:3px}.slider-option .ticks>span:nth-child(2)>span{left:0;text-align:left;justify-content:start}.slider-option .ticks>span:last-child>span{right:0;text-align:right;justify-content:end}.slider-option .tooltip-slider{position:absolute;bottom:4.7em;transition:opacity .2s ease-in-out;pointer-events:none}.slider-option .tooltip-slider ::ng-deep span{font-size:1em;background:white;padding:.1em .2em;border:1px solid #262626;display:block;position:relative;min-width:max-content}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], inverted: [{
+                type: Input
+            }], showTooltip: [{
+                type: Input
+            }], labelPercent: [{
+                type: HostBinding,
+                args: ['style.--label-percent']
+            }], slider: [{
+                type: ViewChild,
+                args: ['rangerHor']
+            }], tooltip: [{
+                type: ViewChild,
+                args: ['tooltip']
+            }] } });
+
+class BiitSliderOptionModule {
+}
+BiitSliderOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitSliderOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionModule, declarations: [BiitSliderOptionComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule], exports: [BiitSliderOptionComponent] });
+BiitSliderOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitSliderOptionComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule,
+                        BiitTooltipIconModule
+                    ],
+                    exports: [
+                        BiitSliderOptionComponent,
+                    ]
+                }]
+        }] });
+
+class BiitSliderOptionVerticalComponent {
+    get index() {
+        return this.data.findIndex(i => i.value == this.value);
+    }
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.inverted = false;
+        this.showDescription = true;
+        this.showTooltip = true;
+        this.disabled = false;
+        this.tooltipBoxVisible = false;
+        this.onChange = (_) => {
+        };
+        this.onTouch = () => {
+        };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewChecked() {
+        this.progressScript();
+        this.cdRef.detectChanges();
+    }
+    progressScript() {
+        const slider = this.slider.nativeElement;
+        const tooltip = this.tooltip.nativeElement;
+        const progress = ((slider.value - slider.min) * 100) / (slider.max - slider.min);
+        // Set slider bar background colors according to progress
+        if (!this.inverted) {
+            this.slider.nativeElement.style.background = `linear-gradient(to top, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+        }
+        else {
+            this.slider.nativeElement.style.background = `linear-gradient(to bottom, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+        }
+        // Set tooltip text
+        tooltip.innerHTML = `<span>${this.data[slider.value].value}</span>`;
+        // Set slider tooltip position
+        const tooltipPosition = (-parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.5) - (progress * 0.16);
+        tooltip.firstChild.style.left = 'calc(-6px + -50%)';
+        if (!this.inverted) {
+            tooltip.style.bottom = `calc(${progress}% + (${tooltipPosition}px) + 2rem)`;
+        }
+        else {
+            tooltip.style.top = `calc(${progress}% + (${tooltipPosition}px) - 1.5rem)`;
+        }
+    }
+}
+BiitSliderOptionVerticalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BiitSliderOptionVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitSliderOptionVerticalComponent, selector: "biit-slider-option-vertical", inputs: { data: "data", inverted: "inverted", showDescription: "showDescription", showTooltip: "showTooltip" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BiitSliderOptionVerticalComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["rangerVer"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div class=\"slider-vertical\">\n  <input #rangerVer type=\"range\"\n         orient=\"vertical\"\n         class=\"vertical\"\n         [class.inverted]=\"inverted\"\n         [ngModel]=\"index\"\n         (ngModelChange)=\"onChange(this.data[rangerVer.value].value);\"\n         [min]=\"0\"\n         [max]=\"data.length - 1\"\n         [step]=\"1\"\n         (input)=\"progressScript()\"\n         (pointerdown)=\"tooltipBoxVisible = true\"\n         (pointerup)=\"tooltipBoxVisible = false\"\n  >\n\n  <div class=\"ticks vertical\">\n    <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n    <div *ngFor=\"let tick of $any(data); index as i; count as c\"\n         class=\"tick\"\n         [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\"\n         >\n      <span></span>\n      <div class=\"label\" [class.show-desc]=\"showDescription\"\n           (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n        <span>\n          {{(!inverted ? data[i] : data[c-i-1]).label}}\n        </span>\n        <span class=\"description\" *ngIf=\"showDescription\">\n          {{(!inverted ? data[i] : data[c-i-1]).description}}\n        </span>\n        <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description && !showDescription\"\n                           [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n        ></biit-tooltip-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".slider-vertical{position:relative;flex:1;width:inherit;height:inherit;display:flex}.slider-vertical input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;background:#D7D7D7;height:inherit;width:.3em;writing-mode:vertical-lr;direction:rtl}.slider-vertical input[type=range].inverted{direction:ltr}.slider-vertical input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.slider-vertical .ticks{display:flex;justify-content:space-between;padding:0 0 0 3px;margin-top:5px;position:relative}.slider-vertical .ticks .tick{display:flex;flex:3.5;align-items:center;padding-left:5px;gap:3px}.slider-vertical .ticks .tick:nth-child(2){align-items:end;flex:2}.slider-vertical .ticks .tick:last-child{align-items:start;flex:2}.slider-vertical .ticks .tick.hide-tick{display:none}.slider-vertical .ticks .tick .label{display:flex;font-weight:500;flex:1;cursor:pointer;gap:.5em}.slider-vertical .ticks .tick .label.show-desc{flex-direction:column}.slider-vertical .ticks .tick .label span{line-height:120%}.slider-vertical .ticks .tick .label .description{font-size:.75em;color:gray;line-height:120%;font-style:italic;font-weight:400}.slider-vertical .ticks .tick>span{display:flex;justify-content:center;width:14px;height:16px;padding:7px 2px;background-color:#262626;font-weight:500;box-sizing:border-box;background-clip:content-box;font-size:1em}.slider-vertical .ticks .tick>span>span{position:absolute;top:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center;display:flex;justify-content:center;gap:5px}.slider-vertical .ticks .tick>span>span>span{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center}.slider-vertical .ticks .tick>span>span biit-tooltip-icon{margin:3px}.slider-vertical .ticks .tick>span:nth-child(2)>span{left:0;text-align:left;justify-content:start}.slider-vertical .ticks .tick>span:last-child>span{right:0;text-align:right;justify-content:end}.slider-vertical .ticks.vertical{flex-direction:column-reverse;flex:1;height:inherit;margin:2px;padding:0}.slider-vertical .ticks.vertical>span{width:20px;height:14px;padding:6px}.slider-vertical .tooltip-slider{position:absolute;bottom:4.7em;transition:opacity .2s ease-in-out;pointer-events:none}.slider-vertical .tooltip-slider ::ng-deep span{font-size:1em;background:white;padding:.1em .2em;border:1px solid #262626;display:block;position:relative;min-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-slider-option-vertical', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitSliderOptionVerticalComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"slider-vertical\">\n  <input #rangerVer type=\"range\"\n         orient=\"vertical\"\n         class=\"vertical\"\n         [class.inverted]=\"inverted\"\n         [ngModel]=\"index\"\n         (ngModelChange)=\"onChange(this.data[rangerVer.value].value);\"\n         [min]=\"0\"\n         [max]=\"data.length - 1\"\n         [step]=\"1\"\n         (input)=\"progressScript()\"\n         (pointerdown)=\"tooltipBoxVisible = true\"\n         (pointerup)=\"tooltipBoxVisible = false\"\n  >\n\n  <div class=\"ticks vertical\">\n    <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n    <div *ngFor=\"let tick of $any(data); index as i; count as c\"\n         class=\"tick\"\n         [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\"\n         >\n      <span></span>\n      <div class=\"label\" [class.show-desc]=\"showDescription\"\n           (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n        <span>\n          {{(!inverted ? data[i] : data[c-i-1]).label}}\n        </span>\n        <span class=\"description\" *ngIf=\"showDescription\">\n          {{(!inverted ? data[i] : data[c-i-1]).description}}\n        </span>\n        <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description && !showDescription\"\n                           [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n        ></biit-tooltip-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".slider-vertical{position:relative;flex:1;width:inherit;height:inherit;display:flex}.slider-vertical input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;background:#D7D7D7;height:inherit;width:.3em;writing-mode:vertical-lr;direction:rtl}.slider-vertical input[type=range].inverted{direction:ltr}.slider-vertical input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:#f20d5e}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:#f20d5e}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:#f20d5e}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:#d7d7d7;border:.3em solid #262626;border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-moz-range-thumb:hover{background-color:#f20d5e}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:#f20d5e}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:#f20d5e}.slider-vertical .ticks{display:flex;justify-content:space-between;padding:0 0 0 3px;margin-top:5px;position:relative}.slider-vertical .ticks .tick{display:flex;flex:3.5;align-items:center;padding-left:5px;gap:3px}.slider-vertical .ticks .tick:nth-child(2){align-items:end;flex:2}.slider-vertical .ticks .tick:last-child{align-items:start;flex:2}.slider-vertical .ticks .tick.hide-tick{display:none}.slider-vertical .ticks .tick .label{display:flex;font-weight:500;flex:1;cursor:pointer;gap:.5em}.slider-vertical .ticks .tick .label.show-desc{flex-direction:column}.slider-vertical .ticks .tick .label span{line-height:120%}.slider-vertical .ticks .tick .label .description{font-size:.75em;color:gray;line-height:120%;font-style:italic;font-weight:400}.slider-vertical .ticks .tick>span{display:flex;justify-content:center;width:14px;height:16px;padding:7px 2px;background-color:#262626;font-weight:500;box-sizing:border-box;background-clip:content-box;font-size:1em}.slider-vertical .ticks .tick>span>span{position:absolute;top:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center;display:flex;justify-content:center;gap:5px}.slider-vertical .ticks .tick>span>span>span{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center}.slider-vertical .ticks .tick>span>span biit-tooltip-icon{margin:3px}.slider-vertical .ticks .tick>span:nth-child(2)>span{left:0;text-align:left;justify-content:start}.slider-vertical .ticks .tick>span:last-child>span{right:0;text-align:right;justify-content:end}.slider-vertical .ticks.vertical{flex-direction:column-reverse;flex:1;height:inherit;margin:2px;padding:0}.slider-vertical .ticks.vertical>span{width:20px;height:14px;padding:6px}.slider-vertical .tooltip-slider{position:absolute;bottom:4.7em;transition:opacity .2s ease-in-out;pointer-events:none}.slider-vertical .tooltip-slider ::ng-deep span{font-size:1em;background:white;padding:.1em .2em;border:1px solid #262626;display:block;position:relative;min-width:max-content}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], inverted: [{
+                type: Input
+            }], showDescription: [{
+                type: Input
+            }], showTooltip: [{
+                type: Input
+            }], slider: [{
+                type: ViewChild,
+                args: ['rangerVer']
+            }], tooltip: [{
+                type: ViewChild,
+                args: ['tooltip']
+            }] } });
+
+class BiitSliderOptionVerticalModule {
+}
+BiitSliderOptionVerticalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitSliderOptionVerticalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalModule, declarations: [BiitSliderOptionVerticalComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule], exports: [BiitSliderOptionVerticalComponent] });
+BiitSliderOptionVerticalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitTooltipIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitSliderOptionVerticalComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule,
+                        BiitTooltipIconModule
+                    ],
+                    exports: [
+                        BiitSliderOptionVerticalComponent,
+                    ]
+                }]
+        }] });
+
+class BiitGroupComponent {
+    constructor() {
+        this.onPlusClick = new EventEmitter();
+        this.onMinusClick = new EventEmitter();
+    }
+    set enablePlus(enabled) {
+        this.isEnabledPlus = coerceBooleanProperty(enabled);
+    }
+    ;
+    set enableMinus(enabled) {
+        this.isEnabledMinus = coerceBooleanProperty(enabled);
+    }
+    ;
+}
+BiitGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitGroupComponent, selector: "biit-group", inputs: { legend: "legend", description: "description", enablePlus: "enablePlus", enableMinus: "enableMinus" }, outputs: { onPlusClick: "onPlusClick", onMinusClick: "onMinusClick" }, ngImport: i0, template: "<fieldset>\n  <legend *ngIf=\"legend\">\n    {{ legend }}\n  </legend>\n\n  <div class=\"grp-buttons\">\n    <button biit-icon\n            icon=\"plus\"\n            *ngIf=\"isEnabledPlus\"\n            (click)=\"onPlusClick.emit()\"\n    ></button>\n    <button biit-icon\n            icon=\"minus\"\n            *ngIf=\"isEnabledMinus\"\n            (click)=\"onMinusClick.emit()\"\n    ></button>\n  </div>\n\n  <ng-content></ng-content>\n</fieldset>\n<span *ngIf=\"description\"\n      class=\"grp-description\">\n  {{description}}\n</span>\n", styles: ["fieldset{position:relative;border:3px solid #262626;padding-inline-start:2.25em;padding-inline-end:2.25em;padding-block-start:1.75em;padding-block-end:2.75em}fieldset legend{padding:0 1.25em}fieldset button{right:0;top:-1.65em}fieldset .grp-buttons{position:absolute;right:0;top:-8px;display:flex}.grp-description{display:block;margin-top:.4rem;font-family:Cormorant Garamond,serif;font-size:.9rem;color:#262626;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-group', template: "<fieldset>\n  <legend *ngIf=\"legend\">\n    {{ legend }}\n  </legend>\n\n  <div class=\"grp-buttons\">\n    <button biit-icon\n            icon=\"plus\"\n            *ngIf=\"isEnabledPlus\"\n            (click)=\"onPlusClick.emit()\"\n    ></button>\n    <button biit-icon\n            icon=\"minus\"\n            *ngIf=\"isEnabledMinus\"\n            (click)=\"onMinusClick.emit()\"\n    ></button>\n  </div>\n\n  <ng-content></ng-content>\n</fieldset>\n<span *ngIf=\"description\"\n      class=\"grp-description\">\n  {{description}}\n</span>\n", styles: ["fieldset{position:relative;border:3px solid #262626;padding-inline-start:2.25em;padding-inline-end:2.25em;padding-block-start:1.75em;padding-block-end:2.75em}fieldset legend{padding:0 1.25em}fieldset button{right:0;top:-1.65em}fieldset .grp-buttons{position:absolute;right:0;top:-8px;display:flex}.grp-description{display:block;margin-top:.4rem;font-family:Cormorant Garamond,serif;font-size:.9rem;color:#262626;text-align:left}\n"] }]
+        }], propDecorators: { legend: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], enablePlus: [{
+                type: Input
+            }], enableMinus: [{
+                type: Input
+            }], onPlusClick: [{
+                type: Output
+            }], onMinusClick: [{
+                type: Output
+            }] } });
+
+class BiitGroupModule {
+}
+BiitGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupModule, declarations: [BiitGroupComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconButtonModule], exports: [BiitGroupComponent] });
+BiitGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitGroupComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconButtonModule
+                    ],
+                    exports: [
+                        BiitGroupComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of wizardry-theme/inputs
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BiitCheckboxComponent, BiitCheckboxModule, BiitDatePickerComponent, BiitDatePickerModule, BiitDropdownComponent, BiitDropdownModule, BiitGroupComponent, BiitGroupModule, BiitInputTextComponent, BiitInputTextModule, BiitMultiselectComponent, BiitMultiselectModule, BiitMultiselectType, BiitRadioButtonComponent, BiitRadioButtonModule, BiitSliderComponent, BiitSliderModule, BiitSliderOptionComponent, BiitSliderOptionModule, BiitSliderOptionVerticalComponent, BiitSliderOptionVerticalModule, BiitSliderRangeComponent, BiitSliderRangeModule, BiitTernaryToggleComponent, BiitTernaryToggleModule, BiitTextareaComponent, BiitTextareaModule, BiitToggleButtonComponent, BiitToggleComponent, BiitToggleGroupComponent, BiitToggleGroupModule, BiitToggleModule, Type, View };
+//# sourceMappingURL=biit-solutions-wizardry-theme-inputs.mjs.map