@biit-solutions/wizardry-theme 1.21.35 → 1.22.2

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

@@ -97,7 +97,7 @@ BiitInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             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"] }] });
+    ], 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:var(--main-background);color:var(--secondary-color)}.biit-input.readonly .input-object{color:var(--secondary-color)}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:var(--main-background)}.input-object:hover{background:var(--main-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);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:var(--secondary-color)}.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:var(--error-color);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:var(--main-background);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:var(--component-color)}.bottom-line.disabled,.bottom-line.readonly{background:var(--secondary-color)}.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: [
@@ -110,7 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--main-background);color:var(--secondary-color)}.biit-input.readonly .input-object{color:var(--secondary-color)}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:var(--main-background)}.input-object:hover{background:var(--main-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);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:var(--secondary-color)}.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:var(--error-color);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:var(--main-background);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:var(--component-color)}.bottom-line.disabled,.bottom-line.readonly{background:var(--secondary-color)}.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: [{
@@ -403,7 +403,7 @@ BiitDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             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"] }] });
+    ], 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:var(--component-color);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:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);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:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.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:var(--main-background)}.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:var(--main-background)}.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:var(--main-background);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:var(--hover-color);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:var(--main-background)}.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: [
@@ -414,7 +414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ], 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"] }]
+                    }, 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:var(--component-color);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:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);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:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.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:var(--main-background)}.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:var(--main-background)}.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:var(--main-background);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:var(--hover-color);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:var(--main-background)}.onwards{--origin: 1rem}.downwards{--origin: -1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { title: [{
                 type: Input
             }], label: [{
@@ -502,7 +502,7 @@ BiitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             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"] }] });
+    ], 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:var(--main-background)}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 var(--component-color);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 var(--main-color)}label input[type=checkbox]:checked{border:.2em solid var(--main-color);background:var(--main-color)}label input[type=checkbox]:disabled:not(:checked){border:.2em solid var(--main-background)}label input[type=checkbox]:checked:disabled{border:.2em solid var(--main-background);background:var(--main-background)}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: [
@@ -511,7 +511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--main-background)}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 var(--component-color);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 var(--main-color)}label input[type=checkbox]:checked{border:.2em solid var(--main-color);background:var(--main-color)}label input[type=checkbox]:disabled:not(:checked){border:.2em solid var(--main-background)}label input[type=checkbox]:checked:disabled{border:.2em solid var(--main-background);background:var(--main-background)}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: [{
@@ -786,7 +786,7 @@ BiitMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             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"] }] });
+    ], 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:var(--component-color);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:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);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:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.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:var(--main-background)}.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:var(--main-background)}.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:var(--hover-color);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:var(--main-background)}.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: [
@@ -797,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ], 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"] }]
+                    }, 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:var(--component-color);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:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);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:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.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:var(--main-background)}.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:var(--main-background)}.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:var(--hover-color);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:var(--main-background)}.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: [{
@@ -917,7 +917,7 @@ BiitToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             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"] }] });
+    ], 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 var(--main-color)}.toggle-base:has(input:checked) .toggle-trail{background:var(--selected-color)}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:var(--trail-color)}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid var(--main-background);background:none}.toggle-base:has(input:disabled) .toggle-label{color:var(--main-background)}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:var(--main-background)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--trail-color);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 var(--component-color);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:var(--selected-color)}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid var(--main-color);background:var(--main-color)}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:var(--trail-color)}input:disabled~.toggle-switch .toggle-box{border:.25em solid var(--main-background);background:none}input:disabled~.toggle-switch .toggle-label{color:var(--main-background)}input:checked:disabled~.toggle-switch .toggle-box{background:var(--main-background)}}\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: [
@@ -926,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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 var(--main-color)}.toggle-base:has(input:checked) .toggle-trail{background:var(--selected-color)}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:var(--trail-color)}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid var(--main-background);background:none}.toggle-base:has(input:disabled) .toggle-label{color:var(--main-background)}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:var(--main-background)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--trail-color);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 var(--component-color);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:var(--selected-color)}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid var(--main-color);background:var(--main-color)}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:var(--trail-color)}input:disabled~.toggle-switch .toggle-box{border:.25em solid var(--main-background);background:none}input:disabled~.toggle-switch .toggle-label{color:var(--main-background)}input:checked:disabled~.toggle-switch .toggle-box{background:var(--main-background)}}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }] } });
@@ -1002,7 +1002,7 @@ BiitTernaryToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             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"] });
+    ], 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 var(--main-color)}.toggle-base:hover .toggle-box.checked{transform:translate(2.2em) rotate(45deg);border:.25em solid var(--main-color)}.toggle-base:hover .toggle-box.unchecked{transform:translate(.1em) rotate(45deg);border:.25em solid var(--main-color);background:var(--component-color)}.checked.toggle-trail{background:var(--selected-color)}.checked.toggle-box{transform:translate(2.2em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.unchecked.toggle-box{transform:translate(.1em) rotate(45deg);background:var(--main-color)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--hover-color);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 var(--component-color);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: [
@@ -1011,7 +1011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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 var(--main-color)}.toggle-base:hover .toggle-box.checked{transform:translate(2.2em) rotate(45deg);border:.25em solid var(--main-color)}.toggle-base:hover .toggle-box.unchecked{transform:translate(.1em) rotate(45deg);border:.25em solid var(--main-color);background:var(--component-color)}.checked.toggle-trail{background:var(--selected-color)}.checked.toggle-box{transform:translate(2.2em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.unchecked.toggle-box{transform:translate(.1em) rotate(45deg);background:var(--main-color)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--hover-color);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 var(--component-color);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
             }] } });
@@ -1185,7 +1185,7 @@ BiitRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             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"] }] });
+    ], 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:var(--disabled-primary-color)}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: [
@@ -1194,7 +1194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--disabled-primary-color)}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: [{
@@ -1290,7 +1290,7 @@ BiitTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             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"] }] });
+    ], 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:var(--main-background)}.biit-input.readonly .input-object{color:var(--disabled-primary-color)}.input-container{position:relative;height:inherit;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.45em .7em;height:inherit;min-height:2.25em;width:100%;min-width:2.1em;font-weight:400;border-bottom:3px solid var(--component-color)}.input-object:focus{outline:none;background:var(--main-background)}.input-object:hover{background:var(--main-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);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:var(--disabled-primary-color)}.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:var(--error-color);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:var(--main-background);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: [
@@ -1299,7 +1299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--main-background)}.biit-input.readonly .input-object{color:var(--disabled-primary-color)}.input-container{position:relative;height:inherit;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.45em .7em;height:inherit;min-height:2.25em;width:100%;min-width:2.1em;font-weight:400;border-bottom:3px solid var(--component-color)}.input-object:focus{outline:none;background:var(--main-background)}.input-object:hover{background:var(--main-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);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:var(--disabled-primary-color)}.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:var(--error-color);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:var(--main-background);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: [{
@@ -1640,7 +1640,7 @@ BiitDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             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" }] });
+    ], 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 var(--component-color);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:var(--component-color)}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.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:var(--main-background-color)}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:var(--component-color)}.popup .month-view .grid .grid-element.day.is-today{border:3px solid var(--component-color)}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:var(--main-background-color)}.popup .month-view .grid .grid-element.day:active{color:var(--main-color)}.popup .month-view .grid .grid-element.day.selected{background:var(--main-color)}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:var(--main-color);color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:var(--error-color);pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:var(--selected-color)}.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:var(--component-color)}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:var(--component-color)}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid var(--component-color);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:var(--component-color)}.popup .year-view .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.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:var(--component-color);font-weight:500}.popup .selector .column .item.secondary{color:var(--secondary-color)}.popup .selector .column .item.tertiary{color:var(--main-background-color)}.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:var(--main-background-color)}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:var(--main-background-color)}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:var(--main-background-color)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.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:var(--component-color);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:var(--secondary-color)}.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:var(--error-color);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:var(--main-background-color);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: [
@@ -1655,7 +1655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ], 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"] }]
+                    }, 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 var(--component-color);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:var(--component-color)}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.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:var(--main-background-color)}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:var(--component-color)}.popup .month-view .grid .grid-element.day.is-today{border:3px solid var(--component-color)}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:var(--main-background-color)}.popup .month-view .grid .grid-element.day:active{color:var(--main-color)}.popup .month-view .grid .grid-element.day.selected{background:var(--main-color)}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:var(--main-color);color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:var(--error-color);pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:var(--selected-color)}.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:var(--component-color)}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:var(--component-color)}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid var(--component-color);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:var(--component-color)}.popup .year-view .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.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:var(--component-color);font-weight:500}.popup .selector .column .item.secondary{color:var(--secondary-color)}.popup .selector .column .item.tertiary{color:var(--main-background-color)}.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:var(--main-background-color)}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:var(--main-background-color)}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:var(--main-background-color)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.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:var(--component-color);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:var(--secondary-color)}.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:var(--error-color);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:var(--main-background-color);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: [{
@@ -1815,7 +1815,7 @@ BiitSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             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 });
+    ], 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:var(--light-background);margin-left:0}input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [
@@ -1824,7 +1824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--light-background);margin-left:0}input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [{
@@ -1941,7 +1941,7 @@ BiitSliderRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             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 });
+    ], 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:var(--light-background);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:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]::-moz-range-thumb{pointer-events:auto;appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [
@@ -1950,7 +1950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--light-background);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:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}input[type=range]::-moz-range-thumb{pointer-events:auto;appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [{
@@ -2066,7 +2066,7 @@ BiitSliderOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             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"] }] });
+    ], 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:var(--light-background);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:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-option input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-option input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-option input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-option input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);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:var(--main-color)}.slider-option input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-option input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [
@@ -2075,7 +2075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--light-background);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:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-option input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-option input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-option input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-option input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);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:var(--main-color)}.slider-option input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-option input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [{
@@ -2187,7 +2187,7 @@ BiitSliderOptionVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             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"] }] });
+    ], 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:var(--light-background);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:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);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:var(--main-color)}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [
@@ -2196,7 +2196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], 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:var(--light-background);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:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);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:var(--main-color)}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.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: [{
@@ -2257,10 +2257,10 @@ class BiitGroupComponent {
     ;
 }
 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"] }] });
+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 var(--component-color);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:var(--component-color);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"] }]
+            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 var(--component-color);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:var(--component-color);text-align:left}\n"] }]
         }], propDecorators: { legend: [{
                 type: Input
             }], description: [{