@biit-solutions/wizardry-theme 1.22.14 → 1.22.16

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

@@ -98,7 +98,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: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"] }] });
+    ], 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 ? 'var(--main-color)' : 'var(--component-color)'}\"\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: [
@@ -111,7 +111,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: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"] }]
+                    ], 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 ? 'var(--main-color)' : 'var(--component-color)'}\"\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: [{
@@ -405,7 +405,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: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"] }] });
+    ], 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 ? 'var(--main-color)' : 'var(--component-color)'}\"\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:var(--component-color)}.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: [
@@ -416,7 +416,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: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"] }]
+                    }, 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 ? 'var(--main-color)' : 'var(--component-color)'}\"\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:var(--component-color)}.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: [{
@@ -796,7 +796,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: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"], outputs: ["onValueChange"] }, { 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 ? 'var(--main-color)' : 'var(--component-color)'}\"\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:var(--component-color)}.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:var(--main-color);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"], outputs: ["onValueChange"] }, { 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: [
@@ -807,7 +807,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: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"] }]
+                    }, 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 ? 'var(--main-color)' : 'var(--component-color)'}\"\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:var(--component-color)}.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:var(--main-color);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: [{
@@ -1117,7 +1117,7 @@ BiitToggleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             useExisting: forwardRef(() => BiitToggleGroupComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "buttons", predicate: BiitToggleButtonComponent }], ngImport: i0, template: "<div class=\"toggle-group\">\n  <button\n    *ngFor=\"let button of buttons\"\n    [class.active]=\"multiple ? value && value.includes(button.value) : value == button.value\"\n    [disabled]=\"disabled || button.disabled\"\n    (click)=\"onToggle(button.value)\"\n  >\n    <biit-icon\n      *ngIf=\"button.icon\"\n      [name]=\"button.icon\"\n      [pathStyle]=\"{fill: '#262626'}\"\n      style=\"display: block; height: 1em; width: 1em;\"\n    ></biit-icon>\n    <span\n      *ngIf=\"button.text\"\n      style=\"display: block\"\n    >\n      {{button.text}}\n    </span>\n  </button>\n</div>\n", styles: ["button{background:none;color:inherit;border:none;font:inherit;outline:inherit;box-sizing:border-box;font-size:1em;line-height:100%;padding:.625em;cursor:pointer;color:#262626;display:flex;gap:.375em}button:not(:last-child){border-right:2px solid #EDEDED}button:disabled{pointer-events:none;color:#d9d9d9}button:disabled ::ng-deep biit-icon svg *{fill:#d9d9d9!important}button:disabled:active,button:disabled.active{color:gray}button:disabled:active ::ng-deep biit-icon svg *,button:disabled.active ::ng-deep biit-icon svg *{fill:gray!important}button:active,button.active{background:#EDEDED;color:#f20d5e}button:active ::ng-deep biit-icon svg *,button.active ::ng-deep biit-icon svg *{fill:#f20d5e!important}button:hover{background:#D9D9D9}.toggle-group{display:flex;flex-wrap:wrap;border:2px solid #EDEDED;width:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
+    ], queries: [{ propertyName: "buttons", predicate: BiitToggleButtonComponent }], ngImport: i0, template: "<div class=\"toggle-group\">\n  <button\n    *ngFor=\"let button of buttons\"\n    [class.active]=\"multiple ? value && value.includes(button.value) : value == button.value\"\n    [disabled]=\"disabled || button.disabled\"\n    (click)=\"onToggle(button.value)\"\n  >\n    <biit-icon\n      *ngIf=\"button.icon\"\n      [name]=\"button.icon\"\n      [pathStyle]=\"{fill: 'var(--component-color)'}\"\n      style=\"display: block; height: 1em; width: 1em;\"\n    ></biit-icon>\n    <span\n      *ngIf=\"button.text\"\n      style=\"display: block\"\n    >\n      {{button.text}}\n    </span>\n  </button>\n</div>\n", styles: ["button{background:none;color:inherit;border:none;font:inherit;outline:inherit;box-sizing:border-box;font-size:1em;line-height:100%;padding:.625em;cursor:pointer;color:var(--component-color);display:flex;gap:.375em}button:not(:last-child){border-right:2px solid #EDEDED}button:disabled{pointer-events:none;color:#d9d9d9}button:disabled ::ng-deep biit-icon svg *{fill:#d9d9d9!important}button:disabled:active,button:disabled.active{color:gray}button:disabled:active ::ng-deep biit-icon svg *,button:disabled.active ::ng-deep biit-icon svg *{fill:gray!important}button:active,button.active{background:#EDEDED;color:var(--main-color)}button:active ::ng-deep biit-icon svg *,button.active ::ng-deep biit-icon svg *{fill:var(--main-color)!important}button:hover{background:#D9D9D9}.toggle-group{display:flex;flex-wrap:wrap;border:2px solid #EDEDED;width:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'biit-toggle-group', providers: [
@@ -1126,7 +1126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => BiitToggleGroupComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"toggle-group\">\n  <button\n    *ngFor=\"let button of buttons\"\n    [class.active]=\"multiple ? value && value.includes(button.value) : value == button.value\"\n    [disabled]=\"disabled || button.disabled\"\n    (click)=\"onToggle(button.value)\"\n  >\n    <biit-icon\n      *ngIf=\"button.icon\"\n      [name]=\"button.icon\"\n      [pathStyle]=\"{fill: '#262626'}\"\n      style=\"display: block; height: 1em; width: 1em;\"\n    ></biit-icon>\n    <span\n      *ngIf=\"button.text\"\n      style=\"display: block\"\n    >\n      {{button.text}}\n    </span>\n  </button>\n</div>\n", styles: ["button{background:none;color:inherit;border:none;font:inherit;outline:inherit;box-sizing:border-box;font-size:1em;line-height:100%;padding:.625em;cursor:pointer;color:#262626;display:flex;gap:.375em}button:not(:last-child){border-right:2px solid #EDEDED}button:disabled{pointer-events:none;color:#d9d9d9}button:disabled ::ng-deep biit-icon svg *{fill:#d9d9d9!important}button:disabled:active,button:disabled.active{color:gray}button:disabled:active ::ng-deep biit-icon svg *,button:disabled.active ::ng-deep biit-icon svg *{fill:gray!important}button:active,button.active{background:#EDEDED;color:#f20d5e}button:active ::ng-deep biit-icon svg *,button.active ::ng-deep biit-icon svg *{fill:#f20d5e!important}button:hover{background:#D9D9D9}.toggle-group{display:flex;flex-wrap:wrap;border:2px solid #EDEDED;width:-moz-fit-content;width:fit-content}\n"] }]
+                    ], template: "<div class=\"toggle-group\">\n  <button\n    *ngFor=\"let button of buttons\"\n    [class.active]=\"multiple ? value && value.includes(button.value) : value == button.value\"\n    [disabled]=\"disabled || button.disabled\"\n    (click)=\"onToggle(button.value)\"\n  >\n    <biit-icon\n      *ngIf=\"button.icon\"\n      [name]=\"button.icon\"\n      [pathStyle]=\"{fill: 'var(--component-color)'}\"\n      style=\"display: block; height: 1em; width: 1em;\"\n    ></biit-icon>\n    <span\n      *ngIf=\"button.text\"\n      style=\"display: block\"\n    >\n      {{button.text}}\n    </span>\n  </button>\n</div>\n", styles: ["button{background:none;color:inherit;border:none;font:inherit;outline:inherit;box-sizing:border-box;font-size:1em;line-height:100%;padding:.625em;cursor:pointer;color:var(--component-color);display:flex;gap:.375em}button:not(:last-child){border-right:2px solid #EDEDED}button:disabled{pointer-events:none;color:#d9d9d9}button:disabled ::ng-deep biit-icon svg *{fill:#d9d9d9!important}button:disabled:active,button:disabled.active{color:gray}button:disabled:active ::ng-deep biit-icon svg *,button:disabled.active ::ng-deep biit-icon svg *{fill:gray!important}button:active,button.active{background:#EDEDED;color:var(--main-color)}button:active ::ng-deep biit-icon svg *,button.active ::ng-deep biit-icon svg *{fill:var(--main-color)!important}button:hover{background:#D9D9D9}.toggle-group{display:flex;flex-wrap:wrap;border:2px solid #EDEDED;width:-moz-fit-content;width:fit-content}\n"] }]
         }], propDecorators: { buttons: [{
                 type: ContentChildren,
                 args: [BiitToggleButtonComponent]
@@ -1197,7 +1197,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: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"] }] });
+    ], 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) ? 'var(--main-color)' : 'var(--component-color)'}\"\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: [
@@ -1206,7 +1206,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: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"] }]
+                    ], 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) ? 'var(--main-color)' : 'var(--component-color)'}\"\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: [{
@@ -1302,7 +1302,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: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"] }] });
+    ], 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:var(--component-color)}.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: [
@@ -1311,7 +1311,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: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"] }]
+                    ], 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:var(--component-color)}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], error: [{
@@ -1652,7 +1652,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 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" }] });
+    ], 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 ? 'var(--main-color)' : 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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:var(--chart-component-color)}.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: [
@@ -1667,7 +1667,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 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"] }]
+                    }, 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 ? 'var(--main-color)' : 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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: 'var(--chart-component-color)'}\"\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:var(--chart-component-color)}.onwards{--origin: 1em}.downwards{--origin: -1em}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.TranslocoService }]; }, propDecorators: { disabled: [{
                 type: Input
             }], readonly: [{
@@ -1808,7 +1808,7 @@ class BiitSliderComponent {
         const tooltip = this.tooltip.nativeElement;
         const progress = ((slider.value - slider.min) * 100) / (slider.max - slider.min);
         // Set slider bar background colors according to progress
-        this.slider.nativeElement.style.background = `linear-gradient(to right, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+        this.slider.nativeElement.style.background = `linear-gradient(to right, var(--main-color) ${progress}%, #D7D7D7 ${progress}%)`;
         // Set slider tooltip position
         const tooltipPosition = (parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.15) - (progress * 0.2);
         tooltip.innerHTML = `<span>${slider.value}</span>`;
@@ -1827,7 +1827,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: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 });
+    ], 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:var(--component-color);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 var(--component-color);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: [
@@ -1836,7 +1836,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: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"] }]
+                    ], 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:var(--component-color);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 var(--component-color);height:.7em;display:block;line-height:.7em;position:relative;left:-15%}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -1932,7 +1932,7 @@ class BiitSliderRangeComponent {
         const progress1 = ((slider1.value - this.min) * 100) / (this.max - this.min);
         const progress2 = ((slider2.value - this.min) * 100) / (this.max - this.min);
         // Set slider bar background colors according to progress
-        this.slider1.nativeElement.style.background = `linear-gradient(to right, #D7D7D7 ${progress1}%, #F20D5E ${progress1}%, #F20D5E ${progress2}%, #D7D7D7 ${progress2}%)`;
+        this.slider1.nativeElement.style.background = `linear-gradient(to right, #D7D7D7 ${progress1}%, var(--main-color) ${progress1}%, var(--main-color) ${progress2}%, #D7D7D7 ${progress2}%)`;
         // Set slider tooltip position
         if (activeSlider == 'ranger1') {
             const tooltipPosition = (parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.15) - (progress1 * 0.2);
@@ -1953,7 +1953,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: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 });
+    ], 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:var(--component-color);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 var(--component-color);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: [
@@ -1962,7 +1962,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: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"] }]
+                    ], 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:var(--component-color);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 var(--component-color);height:.7em;display:block;line-height:.7em;position:relative;left:-15%}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -2052,10 +2052,10 @@ class BiitSliderOptionComponent {
         const progress = ((slider.value - slider.min) * 100) / (slider.max - slider.min);
         // Set slider bar background colors according to progress
         if (!this.inverted) {
-            this.slider.nativeElement.style.background = `linear-gradient(to right, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+            this.slider.nativeElement.style.background = `linear-gradient(to right, var(--main-color) ${progress}%, #D7D7D7 ${progress}%)`;
         }
         else {
-            this.slider.nativeElement.style.background = `linear-gradient(to left, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+            this.slider.nativeElement.style.background = `linear-gradient(to left, var(--main-color) ${progress}%, #D7D7D7 ${progress}%)`;
         }
         // Set tooltip text
         tooltip.innerHTML = `<span>${this.data[slider.value].value}</span>`;
@@ -2078,7 +2078,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: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"] }] });
+    ], 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:var(--component-color);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 var(--component-color);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: [
@@ -2087,7 +2087,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: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"] }]
+                    ], 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:var(--component-color);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 var(--component-color);display:block;position:relative;min-width:max-content}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input
             }], inverted: [{
@@ -2174,10 +2174,10 @@ class BiitSliderOptionVerticalComponent {
         const progress = ((slider.value - slider.min) * 100) / (slider.max - slider.min);
         // Set slider bar background colors according to progress
         if (!this.inverted) {
-            this.slider.nativeElement.style.background = `linear-gradient(to top, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+            this.slider.nativeElement.style.background = `linear-gradient(to top, var(--main-color) ${progress}%, #D7D7D7 ${progress}%)`;
         }
         else {
-            this.slider.nativeElement.style.background = `linear-gradient(to bottom, #F20D5E ${progress}%, #D7D7D7 ${progress}%)`;
+            this.slider.nativeElement.style.background = `linear-gradient(to bottom, var(--main-color) ${progress}%, #D7D7D7 ${progress}%)`;
         }
         // Set tooltip text
         tooltip.innerHTML = `<span>${this.data[slider.value].value}</span>`;