@biit-solutions/wizardry-theme 1.21.35 → 1.22.1

package/esm2020/inputs/biit-datepicker/biit-datepicker.component.mjs

@@ -201,7 +201,7 @@ BiitDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             provide: TRANSLOCO_SCOPE,
             useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
         }
-    ], ngImport: i0, template: "<ng-container *ngIf=\"calendarMode; then calendarModeTemplate else datePickerTemplate\"></ng-container>\n\n<ng-template #datePickerTemplate>\n  <div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" >\n    <div class=\"input-container\">\n      <input class=\"input-object\"\n             [ngModel]=\"value && !timePicker ? (value | date: 'yyyy-MM-dd') :\n                        value && timePicker ? (value | date: 'yyyy-MM-dd\\THH:mm') :\n                        undefined\"\n             (ngModelChange)=\"onModelChange(parseISO($event))\"\n             [type]=\"timePicker ? 'datetime-local' : 'date'\" required\n             [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n             [min]=\"min ? (min | date: 'yyyy-MM-dd') : undefined\"\n             [max]=\"max ? (max | date: 'yyyy-MM-dd') : undefined\"\n             [disabled]=\"disabled\"\n      >\n      <div class=\"input-show-icon-container\"\n           [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n           (click)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           (keydown.enter)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           tabindex=\"0\">\n        <biit-icon [name]=\"'calendar'\"\n                   class=\"input-show-icon\"\n                   [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n        ></biit-icon>\n      </div>\n      <div class=\"input-placeholder input-filled\">\n        {{_placeholder}}\n        <a *ngIf=\"required\"\n           [style.color]=\"value ? null : 'red'\">*</a>\n      </div>\n      <biit-icon *ngIf=\"error || (value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max)\"\n                 name=\"exclamation\"\n                 class=\"input-error-icon\"\n                 [pathStyle]=\"{fill:'#A1093F'}\"\n      ></biit-icon>\n      <div *ngIf=\"description\" class=\"input-description\">\n        <a>\n          {{description}}\n        </a>\n      </div>\n\n      <div style=\"position: relative; height: 0;\">\n        <div class=\"popup\"\n             [class.dropdown-open]=\"dropdownOpen\"\n             [style.height]=\"!monthSelector && timePicker ? '29.1em + 3px)' : null\">\n          <div *ngIf=\"!monthSelector\"\n               class=\"month-view\">\n            <div class=\"month-selector\">\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      style=\"rotate: 180deg\"\n                      (click)=\"prevMonth()\"\n              ></button>\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      (click)=\"nextMonth()\"\n              ></button>\n            </div>\n\n            <div class=\"grid\">\n              <div *ngFor=\"let day of days | slice:0:7\"\n                   class=\"grid-element header\">\n                {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n              </div>\n              <button *ngFor=\"let day of days\"\n                      class=\"grid-element day\"\n                      [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                      [class.is-today]=\"day | isToday\"\n                      [class.selected]=\"day | isSameDay: value\"\n                      [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                      (click)=\"onModelChange(day)\"\n                      tabindex=\"0\"\n              >\n                {{day | calendarDate}}\n              </button>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      class=\"today-btn\"\n                      (click)=\"setToday()\">\n                {{'inputs.today' | transloco}}\n              </button>\n              <button biit-button tertiary\n                      (click)=\"closeDropdown()\">\n                {{'inputs.done' | transloco}}\n              </button>\n            </div>\n\n            <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n              <div class=\"selector\">\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"year-view\" *ngIf=\"monthSelector\">\n            <div class=\"month-selector\">\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n            </div>\n\n            <div class=\"selector\">\n              <div class=\"column\"\n                   style=\"min-width: 8em;\">\n                <div class=\"item arrow\"\n                     (click)=\"prevMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n                  {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"prevMonth()\">\n                  {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"nextMonth()\">\n                  {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n                  {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"nextMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n\n              <div class=\"column\"\n                   style=\"min-width: 5em;\">\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n                  {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n                  {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      (click)=\"drawCalendar(); changeView()\">\n                {{'inputs.back' | transloco}}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom-line\"></div>\n      <div *ngIf=\"error\" class=\"input-error-msg\">\n        <a>\n          {{error}}\n        </a>\n      </div>\n      <div *ngIf=\"value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max\" class=\"input-error-msg\">\n        <a>\n          {{'inputs.date-error' | transloco}}\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarModeTemplate>\n  <div class=\"popup calendar-mode\"\n       [style.height]=\"!monthSelector && timePicker ? 'calc(29.1em + 3px)' : null\">\n    <div *ngIf=\"!monthSelector\"\n         class=\"month-view\">\n      <div class=\"month-selector\">\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                style=\"rotate: 180deg\"\n                (click)=\"prevMonth()\"\n        ></button>\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                (click)=\"nextMonth()\"\n        ></button>\n      </div>\n\n      <div class=\"grid\">\n        <div *ngFor=\"let day of days | slice:0:7\"\n             class=\"grid-element header\">\n          {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n        </div>\n        <button *ngFor=\"let day of days\"\n                class=\"grid-element day\"\n                [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                [class.is-today]=\"day | isToday\"\n                [class.selected]=\"day | isSameDay: value\"\n                [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                (click)=\"onModelChange(day)\"\n                tabindex=\"0\"\n        >\n          {{day | calendarDate}}\n        </button>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                class=\"today-btn\"\n                (click)=\"setToday()\">\n          {{'inputs.today' | transloco}}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'H') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'mm') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"year-view\" *ngIf=\"monthSelector\">\n      <div class=\"month-selector\">\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n      </div>\n\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 8em;\">\n          <div class=\"item arrow\"\n               (click)=\"prevMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n            {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"prevMonth()\">\n            {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"nextMonth()\">\n            {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n            {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"nextMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n\n        <div class=\"column\"\n             style=\"min-width: 5em;\">\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n            {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n            {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                (click)=\"drawCalendar(); changeView()\">\n          {{'inputs.back' | transloco}}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}.popup{display:block;width:17.5em;border:3px solid #262626;background:white;padding:.45em;-webkit-user-select:none;user-select:none;opacity:0;pointer-events:none;transform-origin:top;margin-top:-3px;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.popup:not(.calendar-mode){position:absolute;z-index:2}.popup.calendar-mode{position:relative;opacity:1;pointer-events:all;margin-top:0}.popup.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.popup.disabled{visibility:hidden}.popup .month-view{display:flex;flex-direction:column;justify-content:space-between}.popup .month-view .month-selector{display:flex;justify-content:space-between;align-items:center}.popup .month-view .month-selector .month-label{width:12em}.popup .month-view .month-selector .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:#262626}.popup .month-view .month-selector ::ng-deep button .icon-button-svg{width:.8em;height:.8em}.popup .month-view .grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.popup .month-view .grid .grid-element{display:flex;align-items:center;justify-content:center;height:2.1em;width:2.1em}.popup .month-view .grid .grid-element.header{font-weight:800;cursor:default;text-transform:capitalize}.popup .month-view .grid .grid-element.day{cursor:pointer;background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}.popup .month-view .grid .grid-element.day.outer-day{color:#d9d9d9}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:#262626}.popup .month-view .grid .grid-element.day.is-today{border:3px solid #262626}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:#D9D9D9}.popup .month-view .grid .grid-element.day:active{color:#f20d5e}.popup .month-view .grid .grid-element.day.selected{background:#F20D5E}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:#F20D5E;color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:#a1093f;pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:#fbaec9}.popup .month-view .buttons{display:flex;justify-content:space-between;padding:.3em .85em}.popup .month-view .buttons .today-btn ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:#262626}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid #262626;margin-top:.45em;margin-bottom:-.45em}.popup .year-view{height:100%;display:flex;flex-direction:column;justify-content:space-between}.popup .year-view .month-label{width:100%;height:2.1em;align-items:center}.popup .year-view .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .year-view .month-label ::ng-deep .button-base .bar{background:#262626}.popup .year-view .buttons{display:flex;justify-content:flex-end;padding:.3em .85em}.popup .selector{display:flex;justify-content:center}.popup .selector .column{display:block}.popup .selector .column .item{width:100%;height:1.5em;display:flex;justify-content:center;align-items:center;cursor:pointer}.popup .selector .column .item.primary{height:1.8em;color:#262626;font-weight:500}.popup .selector .column .item.secondary{color:gray}.popup .selector .column .item.tertiary{color:#d9d9d9}.popup .selector .column .item.arrow{display:inline-flex;width:100%;height:1.8em}.popup .selector .column .item.arrow .up{height:.7em;rotate:-90deg}.popup .selector .column .item.arrow .down{height:.7em;rotate:90deg}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object,.biit-input.disabled .input-show-icon-container{background:#D9D9D9}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:#D9D9D9}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){.input-object{padding-top:.55em!important}}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.7em;color:#a1093f;padding-top:.2em;padding-bottom:.15em;min-height:1.05em}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:white}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.onwards{--origin: 1em}.downwards{--origin: -1em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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: i5.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6.TranslocoDatePipe, name: "translocoDate" }, { kind: "pipe", type: i7.CalendarDatePipe, name: "calendarDate" }, { kind: "pipe", type: i8.OutOfMonthPipe, name: "outOfMonth" }, { kind: "pipe", type: i9.IsTodayPipe, name: "isToday" }, { kind: "pipe", type: i10.IsSameDayPipe, name: "isSameDay" }, { kind: "pipe", type: i11.IsDisabledPipe, name: "isDisabled" }] });
+    ], ngImport: i0, template: "<ng-container *ngIf=\"calendarMode; then calendarModeTemplate else datePickerTemplate\"></ng-container>\n\n<ng-template #datePickerTemplate>\n  <div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" >\n    <div class=\"input-container\">\n      <input class=\"input-object\"\n             [ngModel]=\"value && !timePicker ? (value | date: 'yyyy-MM-dd') :\n                        value && timePicker ? (value | date: 'yyyy-MM-dd\\THH:mm') :\n                        undefined\"\n             (ngModelChange)=\"onModelChange(parseISO($event))\"\n             [type]=\"timePicker ? 'datetime-local' : 'date'\" required\n             [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n             [min]=\"min ? (min | date: 'yyyy-MM-dd') : undefined\"\n             [max]=\"max ? (max | date: 'yyyy-MM-dd') : undefined\"\n             [disabled]=\"disabled\"\n      >\n      <div class=\"input-show-icon-container\"\n           [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n           (click)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           (keydown.enter)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           tabindex=\"0\">\n        <biit-icon [name]=\"'calendar'\"\n                   class=\"input-show-icon\"\n                   [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n        ></biit-icon>\n      </div>\n      <div class=\"input-placeholder input-filled\">\n        {{_placeholder}}\n        <a *ngIf=\"required\"\n           [style.color]=\"value ? null : 'red'\">*</a>\n      </div>\n      <biit-icon *ngIf=\"error || (value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max)\"\n                 name=\"exclamation\"\n                 class=\"input-error-icon\"\n                 [pathStyle]=\"{fill:'#A1093F'}\"\n      ></biit-icon>\n      <div *ngIf=\"description\" class=\"input-description\">\n        <a>\n          {{description}}\n        </a>\n      </div>\n\n      <div style=\"position: relative; height: 0;\">\n        <div class=\"popup\"\n             [class.dropdown-open]=\"dropdownOpen\"\n             [style.height]=\"!monthSelector && timePicker ? '29.1em + 3px)' : null\">\n          <div *ngIf=\"!monthSelector\"\n               class=\"month-view\">\n            <div class=\"month-selector\">\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      style=\"rotate: 180deg\"\n                      (click)=\"prevMonth()\"\n              ></button>\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      (click)=\"nextMonth()\"\n              ></button>\n            </div>\n\n            <div class=\"grid\">\n              <div *ngFor=\"let day of days | slice:0:7\"\n                   class=\"grid-element header\">\n                {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n              </div>\n              <button *ngFor=\"let day of days\"\n                      class=\"grid-element day\"\n                      [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                      [class.is-today]=\"day | isToday\"\n                      [class.selected]=\"day | isSameDay: value\"\n                      [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                      (click)=\"onModelChange(day)\"\n                      tabindex=\"0\"\n              >\n                {{day | calendarDate}}\n              </button>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      class=\"today-btn\"\n                      (click)=\"setToday()\">\n                {{'inputs.today' | transloco}}\n              </button>\n              <button biit-button tertiary\n                      (click)=\"closeDropdown()\">\n                {{'inputs.done' | transloco}}\n              </button>\n            </div>\n\n            <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n              <div class=\"selector\">\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"year-view\" *ngIf=\"monthSelector\">\n            <div class=\"month-selector\">\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n            </div>\n\n            <div class=\"selector\">\n              <div class=\"column\"\n                   style=\"min-width: 8em;\">\n                <div class=\"item arrow\"\n                     (click)=\"prevMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n                  {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"prevMonth()\">\n                  {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"nextMonth()\">\n                  {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n                  {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"nextMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n\n              <div class=\"column\"\n                   style=\"min-width: 5em;\">\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n                  {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n                  {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      (click)=\"drawCalendar(); changeView()\">\n                {{'inputs.back' | transloco}}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom-line\"></div>\n      <div *ngIf=\"error\" class=\"input-error-msg\">\n        <a>\n          {{error}}\n        </a>\n      </div>\n      <div *ngIf=\"value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max\" class=\"input-error-msg\">\n        <a>\n          {{'inputs.date-error' | transloco}}\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarModeTemplate>\n  <div class=\"popup calendar-mode\"\n       [style.height]=\"!monthSelector && timePicker ? 'calc(29.1em + 3px)' : null\">\n    <div *ngIf=\"!monthSelector\"\n         class=\"month-view\">\n      <div class=\"month-selector\">\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                style=\"rotate: 180deg\"\n                (click)=\"prevMonth()\"\n        ></button>\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                (click)=\"nextMonth()\"\n        ></button>\n      </div>\n\n      <div class=\"grid\">\n        <div *ngFor=\"let day of days | slice:0:7\"\n             class=\"grid-element header\">\n          {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n        </div>\n        <button *ngFor=\"let day of days\"\n                class=\"grid-element day\"\n                [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                [class.is-today]=\"day | isToday\"\n                [class.selected]=\"day | isSameDay: value\"\n                [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                (click)=\"onModelChange(day)\"\n                tabindex=\"0\"\n        >\n          {{day | calendarDate}}\n        </button>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                class=\"today-btn\"\n                (click)=\"setToday()\">\n          {{'inputs.today' | transloco}}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'H') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'mm') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"year-view\" *ngIf=\"monthSelector\">\n      <div class=\"month-selector\">\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n      </div>\n\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 8em;\">\n          <div class=\"item arrow\"\n               (click)=\"prevMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n            {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"prevMonth()\">\n            {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"nextMonth()\">\n            {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n            {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"nextMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n\n        <div class=\"column\"\n             style=\"min-width: 5em;\">\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n            {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n            {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                (click)=\"drawCalendar(); changeView()\">\n          {{'inputs.back' | transloco}}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}.popup{display:block;width:17.5em;border:3px solid var(--component-color);background:white;padding:.45em;-webkit-user-select:none;user-select:none;opacity:0;pointer-events:none;transform-origin:top;margin-top:-3px;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.popup:not(.calendar-mode){position:absolute;z-index:2}.popup.calendar-mode{position:relative;opacity:1;pointer-events:all;margin-top:0}.popup.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.popup.disabled{visibility:hidden}.popup .month-view{display:flex;flex-direction:column;justify-content:space-between}.popup .month-view .month-selector{display:flex;justify-content:space-between;align-items:center}.popup .month-view .month-selector .month-label{width:12em}.popup .month-view .month-selector .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:var(--component-color)}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.popup .month-view .month-selector ::ng-deep button .icon-button-svg{width:.8em;height:.8em}.popup .month-view .grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.popup .month-view .grid .grid-element{display:flex;align-items:center;justify-content:center;height:2.1em;width:2.1em}.popup .month-view .grid .grid-element.header{font-weight:800;cursor:default;text-transform:capitalize}.popup .month-view .grid .grid-element.day{cursor:pointer;background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}.popup .month-view .grid .grid-element.day.outer-day{color:var(--main-background-color)}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:var(--component-color)}.popup .month-view .grid .grid-element.day.is-today{border:3px solid var(--component-color)}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:var(--main-background-color)}.popup .month-view .grid .grid-element.day:active{color:var(--main-color)}.popup .month-view .grid .grid-element.day.selected{background:var(--main-color)}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:var(--main-color);color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:var(--error-color);pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:var(--selected-color)}.popup .month-view .buttons{display:flex;justify-content:space-between;padding:.3em .85em}.popup .month-view .buttons .today-btn ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:var(--component-color)}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:var(--component-color)}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid var(--component-color);margin-top:.45em;margin-bottom:-.45em}.popup .year-view{height:100%;display:flex;flex-direction:column;justify-content:space-between}.popup .year-view .month-label{width:100%;height:2.1em;align-items:center}.popup .year-view .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:var(--component-color)}.popup .year-view .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.popup .year-view .buttons{display:flex;justify-content:flex-end;padding:.3em .85em}.popup .selector{display:flex;justify-content:center}.popup .selector .column{display:block}.popup .selector .column .item{width:100%;height:1.5em;display:flex;justify-content:center;align-items:center;cursor:pointer}.popup .selector .column .item.primary{height:1.8em;color:var(--component-color);font-weight:500}.popup .selector .column .item.secondary{color:var(--secondary-color)}.popup .selector .column .item.tertiary{color:var(--main-background-color)}.popup .selector .column .item.arrow{display:inline-flex;width:100%;height:1.8em}.popup .selector .column .item.arrow .up{height:.7em;rotate:-90deg}.popup .selector .column .item.arrow .down{height:.7em;rotate:90deg}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object,.biit-input.disabled .input-show-icon-container{background:var(--main-background-color)}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:var(--main-background-color)}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:var(--main-background-color)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){.input-object{padding-top:.55em!important}}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.input-placeholder{color:var(--component-color);font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:var(--secondary-color)}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.7em;color:var(--error-color);padding-top:.2em;padding-bottom:.15em;min-height:1.05em}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:white}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:var(--main-background-color);border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.onwards{--origin: 1em}.downwards{--origin: -1em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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: i5.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6.TranslocoDatePipe, name: "translocoDate" }, { kind: "pipe", type: i7.CalendarDatePipe, name: "calendarDate" }, { kind: "pipe", type: i8.OutOfMonthPipe, name: "outOfMonth" }, { kind: "pipe", type: i9.IsTodayPipe, name: "isToday" }, { kind: "pipe", type: i10.IsSameDayPipe, name: "isSameDay" }, { kind: "pipe", type: i11.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: [
@@ -216,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ], host: {
                         '(document:pointerdown)': 'handleMouseEvents($event)'
-                    }, template: "<ng-container *ngIf=\"calendarMode; then calendarModeTemplate else datePickerTemplate\"></ng-container>\n\n<ng-template #datePickerTemplate>\n  <div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" >\n    <div class=\"input-container\">\n      <input class=\"input-object\"\n             [ngModel]=\"value && !timePicker ? (value | date: 'yyyy-MM-dd') :\n                        value && timePicker ? (value | date: 'yyyy-MM-dd\\THH:mm') :\n                        undefined\"\n             (ngModelChange)=\"onModelChange(parseISO($event))\"\n             [type]=\"timePicker ? 'datetime-local' : 'date'\" required\n             [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n             [min]=\"min ? (min | date: 'yyyy-MM-dd') : undefined\"\n             [max]=\"max ? (max | date: 'yyyy-MM-dd') : undefined\"\n             [disabled]=\"disabled\"\n      >\n      <div class=\"input-show-icon-container\"\n           [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n           (click)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           (keydown.enter)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           tabindex=\"0\">\n        <biit-icon [name]=\"'calendar'\"\n                   class=\"input-show-icon\"\n                   [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n        ></biit-icon>\n      </div>\n      <div class=\"input-placeholder input-filled\">\n        {{_placeholder}}\n        <a *ngIf=\"required\"\n           [style.color]=\"value ? null : 'red'\">*</a>\n      </div>\n      <biit-icon *ngIf=\"error || (value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max)\"\n                 name=\"exclamation\"\n                 class=\"input-error-icon\"\n                 [pathStyle]=\"{fill:'#A1093F'}\"\n      ></biit-icon>\n      <div *ngIf=\"description\" class=\"input-description\">\n        <a>\n          {{description}}\n        </a>\n      </div>\n\n      <div style=\"position: relative; height: 0;\">\n        <div class=\"popup\"\n             [class.dropdown-open]=\"dropdownOpen\"\n             [style.height]=\"!monthSelector && timePicker ? '29.1em + 3px)' : null\">\n          <div *ngIf=\"!monthSelector\"\n               class=\"month-view\">\n            <div class=\"month-selector\">\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      style=\"rotate: 180deg\"\n                      (click)=\"prevMonth()\"\n              ></button>\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      (click)=\"nextMonth()\"\n              ></button>\n            </div>\n\n            <div class=\"grid\">\n              <div *ngFor=\"let day of days | slice:0:7\"\n                   class=\"grid-element header\">\n                {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n              </div>\n              <button *ngFor=\"let day of days\"\n                      class=\"grid-element day\"\n                      [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                      [class.is-today]=\"day | isToday\"\n                      [class.selected]=\"day | isSameDay: value\"\n                      [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                      (click)=\"onModelChange(day)\"\n                      tabindex=\"0\"\n              >\n                {{day | calendarDate}}\n              </button>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      class=\"today-btn\"\n                      (click)=\"setToday()\">\n                {{'inputs.today' | transloco}}\n              </button>\n              <button biit-button tertiary\n                      (click)=\"closeDropdown()\">\n                {{'inputs.done' | transloco}}\n              </button>\n            </div>\n\n            <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n              <div class=\"selector\">\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"year-view\" *ngIf=\"monthSelector\">\n            <div class=\"month-selector\">\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n            </div>\n\n            <div class=\"selector\">\n              <div class=\"column\"\n                   style=\"min-width: 8em;\">\n                <div class=\"item arrow\"\n                     (click)=\"prevMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n                  {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"prevMonth()\">\n                  {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"nextMonth()\">\n                  {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n                  {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"nextMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n\n              <div class=\"column\"\n                   style=\"min-width: 5em;\">\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n                  {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n                  {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      (click)=\"drawCalendar(); changeView()\">\n                {{'inputs.back' | transloco}}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom-line\"></div>\n      <div *ngIf=\"error\" class=\"input-error-msg\">\n        <a>\n          {{error}}\n        </a>\n      </div>\n      <div *ngIf=\"value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max\" class=\"input-error-msg\">\n        <a>\n          {{'inputs.date-error' | transloco}}\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarModeTemplate>\n  <div class=\"popup calendar-mode\"\n       [style.height]=\"!monthSelector && timePicker ? 'calc(29.1em + 3px)' : null\">\n    <div *ngIf=\"!monthSelector\"\n         class=\"month-view\">\n      <div class=\"month-selector\">\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                style=\"rotate: 180deg\"\n                (click)=\"prevMonth()\"\n        ></button>\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                (click)=\"nextMonth()\"\n        ></button>\n      </div>\n\n      <div class=\"grid\">\n        <div *ngFor=\"let day of days | slice:0:7\"\n             class=\"grid-element header\">\n          {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n        </div>\n        <button *ngFor=\"let day of days\"\n                class=\"grid-element day\"\n                [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                [class.is-today]=\"day | isToday\"\n                [class.selected]=\"day | isSameDay: value\"\n                [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                (click)=\"onModelChange(day)\"\n                tabindex=\"0\"\n        >\n          {{day | calendarDate}}\n        </button>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                class=\"today-btn\"\n                (click)=\"setToday()\">\n          {{'inputs.today' | transloco}}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'H') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'mm') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"year-view\" *ngIf=\"monthSelector\">\n      <div class=\"month-selector\">\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n      </div>\n\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 8em;\">\n          <div class=\"item arrow\"\n               (click)=\"prevMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n            {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"prevMonth()\">\n            {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"nextMonth()\">\n            {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n            {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"nextMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n\n        <div class=\"column\"\n             style=\"min-width: 5em;\">\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n            {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n            {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                (click)=\"drawCalendar(); changeView()\">\n          {{'inputs.back' | transloco}}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}.popup{display:block;width:17.5em;border:3px solid #262626;background:white;padding:.45em;-webkit-user-select:none;user-select:none;opacity:0;pointer-events:none;transform-origin:top;margin-top:-3px;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.popup:not(.calendar-mode){position:absolute;z-index:2}.popup.calendar-mode{position:relative;opacity:1;pointer-events:all;margin-top:0}.popup.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.popup.disabled{visibility:hidden}.popup .month-view{display:flex;flex-direction:column;justify-content:space-between}.popup .month-view .month-selector{display:flex;justify-content:space-between;align-items:center}.popup .month-view .month-selector .month-label{width:12em}.popup .month-view .month-selector .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:#262626}.popup .month-view .month-selector ::ng-deep button .icon-button-svg{width:.8em;height:.8em}.popup .month-view .grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.popup .month-view .grid .grid-element{display:flex;align-items:center;justify-content:center;height:2.1em;width:2.1em}.popup .month-view .grid .grid-element.header{font-weight:800;cursor:default;text-transform:capitalize}.popup .month-view .grid .grid-element.day{cursor:pointer;background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}.popup .month-view .grid .grid-element.day.outer-day{color:#d9d9d9}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:#262626}.popup .month-view .grid .grid-element.day.is-today{border:3px solid #262626}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:#D9D9D9}.popup .month-view .grid .grid-element.day:active{color:#f20d5e}.popup .month-view .grid .grid-element.day.selected{background:#F20D5E}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:#F20D5E;color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:#a1093f;pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:#fbaec9}.popup .month-view .buttons{display:flex;justify-content:space-between;padding:.3em .85em}.popup .month-view .buttons .today-btn ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:#262626}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid #262626;margin-top:.45em;margin-bottom:-.45em}.popup .year-view{height:100%;display:flex;flex-direction:column;justify-content:space-between}.popup .year-view .month-label{width:100%;height:2.1em;align-items:center}.popup .year-view .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:#262626}.popup .year-view .month-label ::ng-deep .button-base .bar{background:#262626}.popup .year-view .buttons{display:flex;justify-content:flex-end;padding:.3em .85em}.popup .selector{display:flex;justify-content:center}.popup .selector .column{display:block}.popup .selector .column .item{width:100%;height:1.5em;display:flex;justify-content:center;align-items:center;cursor:pointer}.popup .selector .column .item.primary{height:1.8em;color:#262626;font-weight:500}.popup .selector .column .item.secondary{color:gray}.popup .selector .column .item.tertiary{color:#d9d9d9}.popup .selector .column .item.arrow{display:inline-flex;width:100%;height:1.8em}.popup .selector .column .item.arrow .up{height:.7em;rotate:-90deg}.popup .selector .column .item.arrow .down{height:.7em;rotate:90deg}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object,.biit-input.disabled .input-show-icon-container{background:#D9D9D9}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:#D9D9D9}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){.input-object{padding-top:.55em!important}}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.7em;color:#a1093f;padding-top:.2em;padding-bottom:.15em;min-height:1.05em}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:white}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.onwards{--origin: 1em}.downwards{--origin: -1em}\n"] }]
+                    }, template: "<ng-container *ngIf=\"calendarMode; then calendarModeTemplate else datePickerTemplate\"></ng-container>\n\n<ng-template #datePickerTemplate>\n  <div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" >\n    <div class=\"input-container\">\n      <input class=\"input-object\"\n             [ngModel]=\"value && !timePicker ? (value | date: 'yyyy-MM-dd') :\n                        value && timePicker ? (value | date: 'yyyy-MM-dd\\THH:mm') :\n                        undefined\"\n             (ngModelChange)=\"onModelChange(parseISO($event))\"\n             [type]=\"timePicker ? 'datetime-local' : 'date'\" required\n             [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n             [min]=\"min ? (min | date: 'yyyy-MM-dd') : undefined\"\n             [max]=\"max ? (max | date: 'yyyy-MM-dd') : undefined\"\n             [disabled]=\"disabled\"\n      >\n      <div class=\"input-show-icon-container\"\n           [style.background]=\"dropdownOpen ? '#D9D9D9' : null\"\n           (click)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           (keydown.enter)=\"dropdownOpen ? closeDropdown(): openDropdown()\"\n           tabindex=\"0\">\n        <biit-icon [name]=\"'calendar'\"\n                   class=\"input-show-icon\"\n                   [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n        ></biit-icon>\n      </div>\n      <div class=\"input-placeholder input-filled\">\n        {{_placeholder}}\n        <a *ngIf=\"required\"\n           [style.color]=\"value ? null : 'red'\">*</a>\n      </div>\n      <biit-icon *ngIf=\"error || (value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max)\"\n                 name=\"exclamation\"\n                 class=\"input-error-icon\"\n                 [pathStyle]=\"{fill:'#A1093F'}\"\n      ></biit-icon>\n      <div *ngIf=\"description\" class=\"input-description\">\n        <a>\n          {{description}}\n        </a>\n      </div>\n\n      <div style=\"position: relative; height: 0;\">\n        <div class=\"popup\"\n             [class.dropdown-open]=\"dropdownOpen\"\n             [style.height]=\"!monthSelector && timePicker ? '29.1em + 3px)' : null\">\n          <div *ngIf=\"!monthSelector\"\n               class=\"month-view\">\n            <div class=\"month-selector\">\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      style=\"rotate: 180deg\"\n                      (click)=\"prevMonth()\"\n              ></button>\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n              <button biit-icon\n                      [icon]=\"'right_arrow'\"\n                      (click)=\"nextMonth()\"\n              ></button>\n            </div>\n\n            <div class=\"grid\">\n              <div *ngFor=\"let day of days | slice:0:7\"\n                   class=\"grid-element header\">\n                {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n              </div>\n              <button *ngFor=\"let day of days\"\n                      class=\"grid-element day\"\n                      [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                      [class.is-today]=\"day | isToday\"\n                      [class.selected]=\"day | isSameDay: value\"\n                      [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                      (click)=\"onModelChange(day)\"\n                      tabindex=\"0\"\n              >\n                {{day | calendarDate}}\n              </button>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      class=\"today-btn\"\n                      (click)=\"setToday()\">\n                {{'inputs.today' | transloco}}\n              </button>\n              <button biit-button tertiary\n                      (click)=\"closeDropdown()\">\n                {{'inputs.done' | transloco}}\n              </button>\n            </div>\n\n            <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n              <div class=\"selector\">\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {hours: 1}))\">\n                    {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {hours: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n                <div class=\"column\"\n                     style=\"min-width: 2em;\">\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"up\"\n                    ></biit-icon>\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n                    {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item primary\">\n                    {{ value ? (value | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item secondary\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n                  </div>\n                  <div class=\"item arrow\"\n                       (click)=\"onModelChange(add(value, {minutes: 1}))\">\n                    <biit-icon [name]=\"'right_arrow'\"\n                               [pathStyle]=\"{fill: '#262626'}\"\n                               class=\"down\"\n                    ></biit-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"year-view\" *ngIf=\"monthSelector\">\n            <div class=\"month-selector\">\n              <button biit-button tertiary\n                      class=\"month-label\"\n                      (click)=\"changeView()\">\n                {{viewerDate | translocoDate: {month: 'long'} }}\n                {{viewerDate | translocoDate: {year: 'numeric'} }}\n              </button>\n            </div>\n\n            <div class=\"selector\">\n              <div class=\"column\"\n                   style=\"min-width: 8em;\">\n                <div class=\"item arrow\"\n                     (click)=\"prevMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n                  {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"prevMonth()\">\n                  {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"nextMonth()\">\n                  {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n                  {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"nextMonth()\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n\n              <div class=\"column\"\n                   style=\"min-width: 5em;\">\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"up\"\n                  ></biit-icon>\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n                  {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n                  {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item primary\">\n                  {{viewerDate | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item secondary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item tertiary\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n                  {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n                </div>\n                <div class=\"item arrow\"\n                     (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n                  <biit-icon [name]=\"'right_arrow'\"\n                             [pathStyle]=\"{fill: '#262626'}\"\n                             class=\"down\"\n                  ></biit-icon>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <button biit-button tertiary\n                      (click)=\"drawCalendar(); changeView()\">\n                {{'inputs.back' | transloco}}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom-line\"></div>\n      <div *ngIf=\"error\" class=\"input-error-msg\">\n        <a>\n          {{error}}\n        </a>\n      </div>\n      <div *ngIf=\"value | isDisabled: disabledDays: disableWeekdays: disableWeekends: min: max\" class=\"input-error-msg\">\n        <a>\n          {{'inputs.date-error' | transloco}}\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarModeTemplate>\n  <div class=\"popup calendar-mode\"\n       [style.height]=\"!monthSelector && timePicker ? 'calc(29.1em + 3px)' : null\">\n    <div *ngIf=\"!monthSelector\"\n         class=\"month-view\">\n      <div class=\"month-selector\">\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                style=\"rotate: 180deg\"\n                (click)=\"prevMonth()\"\n        ></button>\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n        <button biit-icon\n                [icon]=\"'right_arrow'\"\n                (click)=\"nextMonth()\"\n        ></button>\n      </div>\n\n      <div class=\"grid\">\n        <div *ngFor=\"let day of days | slice:0:7\"\n             class=\"grid-element header\">\n          {{(day | translocoDate: {weekday: 'short'}).substring(0,2) }}\n        </div>\n        <button *ngFor=\"let day of days\"\n                class=\"grid-element day\"\n                [class.outer-day]=\"day | outOfMonth: viewerDate\"\n                [class.is-today]=\"day | isToday\"\n                [class.selected]=\"day | isSameDay: value\"\n                [class.disabled]=\"day | isDisabled: disabledDays: disableWeekdays: disableWeekends: sub(min, {days: 1}): add(max, {days: 1})\"\n                (click)=\"onModelChange(day)\"\n                tabindex=\"0\"\n        >\n          {{day | calendarDate}}\n        </button>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                class=\"today-btn\"\n                (click)=\"setToday()\">\n          {{'inputs.today' | transloco}}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"time-picker\" *ngIf=\"!monthSelector && timePicker\">\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'H') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {hours: 1}) | date: 'H') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n        <div class=\"column\"\n             style=\"min-width: 2em;\">\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(sub(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(sub(value, {hours: 1}))\">\n            {{ value ? (sub(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item primary\">\n            {{ value ? (value | date: 'mm') : '' }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"onModelChange(add(value, {hours: 1}))\">\n            {{ value ? (add(value, {minutes: 1}) | date: 'mm') : '' }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"onModelChange(add(value, {minutes: 1}))\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"year-view\" *ngIf=\"monthSelector\">\n      <div class=\"month-selector\">\n        <button biit-button tertiary\n                class=\"month-label\"\n                (click)=\"changeView()\">\n          {{viewerDate | translocoDate: {month: 'long'} }}\n          {{viewerDate | translocoDate: {year: 'numeric'} }}\n        </button>\n      </div>\n\n      <div class=\"selector\">\n        <div class=\"column\"\n             style=\"min-width: 8em;\">\n          <div class=\"item arrow\"\n               (click)=\"prevMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {months: 2})\">\n            {{sub(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"prevMonth()\">\n            {{sub(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"nextMonth()\">\n            {{add(viewerDate, {months: 1}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {months: 2})\">\n            {{add(viewerDate, {months: 2}) | translocoDate: {month: 'long'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"nextMonth()\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n\n        <div class=\"column\"\n             style=\"min-width: 5em;\">\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"up\"\n            ></biit-icon>\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 2})\">\n            {{sub(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = sub(viewerDate, {years: 1})\">\n            {{sub(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item primary\">\n            {{viewerDate | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item secondary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            {{add(viewerDate, {years: 1}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item tertiary\"\n               (click)=\"viewerDate = add(viewerDate, {years: 2})\">\n            {{add(viewerDate, {years: 2}) | translocoDate: {year: 'numeric'} }}\n          </div>\n          <div class=\"item arrow\"\n               (click)=\"viewerDate = add(viewerDate, {years: 1})\">\n            <biit-icon [name]=\"'right_arrow'\"\n                       [pathStyle]=\"{fill: '#262626'}\"\n                       class=\"down\"\n            ></biit-icon>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"buttons\">\n        <button biit-button tertiary\n                (click)=\"drawCalendar(); changeView()\">\n          {{'inputs.back' | transloco}}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}.popup{display:block;width:17.5em;border:3px solid var(--component-color);background:white;padding:.45em;-webkit-user-select:none;user-select:none;opacity:0;pointer-events:none;transform-origin:top;margin-top:-3px;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.popup:not(.calendar-mode){position:absolute;z-index:2}.popup.calendar-mode{position:relative;opacity:1;pointer-events:all;margin-top:0}.popup.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.popup.disabled{visibility:hidden}.popup .month-view{display:flex;flex-direction:column;justify-content:space-between}.popup .month-view .month-selector{display:flex;justify-content:space-between;align-items:center}.popup .month-view .month-selector .month-label{width:12em}.popup .month-view .month-selector .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:var(--component-color)}.popup .month-view .month-selector .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.popup .month-view .month-selector ::ng-deep button .icon-button-svg{width:.8em;height:.8em}.popup .month-view .grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.popup .month-view .grid .grid-element{display:flex;align-items:center;justify-content:center;height:2.1em;width:2.1em}.popup .month-view .grid .grid-element.header{font-weight:800;cursor:default;text-transform:capitalize}.popup .month-view .grid .grid-element.day{cursor:pointer;background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}.popup .month-view .grid .grid-element.day.outer-day{color:var(--main-background-color)}.popup .month-view .grid .grid-element.day.outer-day:hover,.popup .month-view .grid .grid-element.day.outer-day:focus-visible{color:var(--component-color)}.popup .month-view .grid .grid-element.day.is-today{border:3px solid var(--component-color)}.popup .month-view .grid .grid-element.day:hover,.popup .month-view .grid .grid-element.day:focus-visible{background:var(--main-background-color)}.popup .month-view .grid .grid-element.day:active{color:var(--main-color)}.popup .month-view .grid .grid-element.day.selected{background:var(--main-color)}.popup .month-view .grid .grid-element.day.selected:hover,.popup .month-view .grid .grid-element.day.selected:focus-visible{background:var(--main-color);color:#fff}.popup .month-view .grid .grid-element.day.disabled{color:var(--error-color);pointer-events:none}.popup .month-view .grid .grid-element.day.disabled.outer-day{color:var(--selected-color)}.popup .month-view .buttons{display:flex;justify-content:space-between;padding:.3em .85em}.popup .month-view .buttons .today-btn ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:var(--component-color)}.popup .month-view .buttons .today-btn ::ng-deep .button-base .bar{background:var(--component-color)}.popup .time-picker{width:17.5em;margin-left:calc(-.45em - 3px);box-sizing:border-box;border-top:3px solid var(--component-color);margin-top:.45em;margin-bottom:-.45em}.popup .year-view{height:100%;display:flex;flex-direction:column;justify-content:space-between}.popup .year-view .month-label{width:100%;height:2.1em;align-items:center}.popup .year-view .month-label ::ng-deep .button-base{width:100%;display:flex;justify-content:center;color:var(--component-color)}.popup .year-view .month-label ::ng-deep .button-base .bar{background:var(--component-color)}.popup .year-view .buttons{display:flex;justify-content:flex-end;padding:.3em .85em}.popup .selector{display:flex;justify-content:center}.popup .selector .column{display:block}.popup .selector .column .item{width:100%;height:1.5em;display:flex;justify-content:center;align-items:center;cursor:pointer}.popup .selector .column .item.primary{height:1.8em;color:var(--component-color);font-weight:500}.popup .selector .column .item.secondary{color:var(--secondary-color)}.popup .selector .column .item.tertiary{color:var(--main-background-color)}.popup .selector .column .item.arrow{display:inline-flex;width:100%;height:1.8em}.popup .selector .column .item.arrow .up{height:.7em;rotate:-90deg}.popup .selector .column .item.arrow .down{height:.7em;rotate:90deg}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object,.biit-input.disabled .input-show-icon-container{background:var(--main-background-color)}.biit-input.readonly{pointer-events:none}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus,.input-object:hover{outline:none;background:var(--main-background-color)}.input-object:focus~.input-show-icon-container,.input-object:hover~.input-show-icon-container{background:var(--main-background-color)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){.input-object{padding-top:.55em!important}}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.input-placeholder{color:var(--component-color);font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:var(--secondary-color)}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.7em;color:var(--error-color);padding-top:.2em;padding-bottom:.15em;min-height:1.05em}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:white}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:var(--main-background-color);border:none;outline:none}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.onwards{--origin: 1em}.downwards{--origin: -1em}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.TranslocoService }]; }, propDecorators: { disabled: [{
                 type: Input
             }], readonly: [{

package/esm2020/inputs/biit-dropdown/biit-dropdown.component.mjs

@@ -225,7 +225,7 @@ BiitDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => BiitDropdownComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"biit-input\" aria-haspopup=\"listbox\"\n     *ngIf=\"!icon\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValue && !label ? currentValue :\n                      currentValue && currentValue[label] ? currentValue[label] : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           [placeholder]=\"dropdownOpen && currentValue && !label ? currentValue :\n                          dropdownOpen && currentValue && currentValue[label] ? currentValue[label] : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || currentValue\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValue ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n<button biit-icon\n        *ngIf=\"icon\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"dropdown\"\n       [class.disabled]=\"isDisabled\"\n       [style.overflow]=\"dropdownOpen ? undefined : 'hidden'\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"handleKeyboardEvents($event)\"\n  >\n    <button\n      *ngFor=\"let item of filteredData; index as i\"\n      (click)=\"onModelChange(item)\"\n      [class.selected]=\"currentValue === item\"\n      class=\"dropdown-item\"\n      role=\"option\"\n      aria-selected=\"false\"\n      [id]=\"i\"\n      [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n      [disabled]=\"!dropdownOpen || isDisabled\"\n    >\n      <div id=\"content\">\n        <a>{{ label ?  item[label] : item }}</a>\n        <span *ngIf=\"descriptionLabel && item[descriptionLabel]\" class=\"description\">{{ item[descriptionLabel] }}</span>\n      </div>\n    </button>\n    <button *ngIf=\"!filteredData.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;height:2.1rem}.input-container{position:relative;width:100%}.input-container .description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:#262626;padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:#D9D9D9}.input-object:disabled{pointer-events:none;background-color:transparent;color:#d9d9d9}.default-cursor{cursor:auto}.input-placeholder{color:#262626;font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:gray}.input-placeholder.disabled{color:#d9d9d9}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:#D9D9D9}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-.175rem;margin-bottom:-.175rem;width:auto;height:.175rem;background:#262626}.bottom-line.disabled{background:#D9D9D9}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:.175rem solid black;margin-top:-.175rem;min-width:12.8rem;width:100%;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:120%;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem;text-align:left}.dropdown-item div{display:flex;flex-direction:column}.dropdown-item .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}.dropdown-item:not(.no-results).selected{background:#D9D9D9;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus,.dropdown-item:not(.no-results):focus-visible{outline:none;background:#EDEDED;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.passthrough{pointer-events:none}.grey-bg{background:#D9D9D9}.onwards{--origin: 1rem}.downwards{--origin: -1rem}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
+    ], ngImport: i0, template: "<div class=\"biit-input\" aria-haspopup=\"listbox\"\n     *ngIf=\"!icon\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValue && !label ? currentValue :\n                      currentValue && currentValue[label] ? currentValue[label] : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           [placeholder]=\"dropdownOpen && currentValue && !label ? currentValue :\n                          dropdownOpen && currentValue && currentValue[label] ? currentValue[label] : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || currentValue\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValue ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n<button biit-icon\n        *ngIf=\"icon\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"dropdown\"\n       [class.disabled]=\"isDisabled\"\n       [style.overflow]=\"dropdownOpen ? undefined : 'hidden'\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"handleKeyboardEvents($event)\"\n  >\n    <button\n      *ngFor=\"let item of filteredData; index as i\"\n      (click)=\"onModelChange(item)\"\n      [class.selected]=\"currentValue === item\"\n      class=\"dropdown-item\"\n      role=\"option\"\n      aria-selected=\"false\"\n      [id]=\"i\"\n      [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n      [disabled]=\"!dropdownOpen || isDisabled\"\n    >\n      <div id=\"content\">\n        <a>{{ label ?  item[label] : item }}</a>\n        <span *ngIf=\"descriptionLabel && item[descriptionLabel]\" class=\"description\">{{ item[descriptionLabel] }}</span>\n      </div>\n    </button>\n    <button *ngIf=\"!filteredData.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;height:2.1rem}.input-container{position:relative;width:100%}.input-container .description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-.175rem;margin-bottom:-.175rem;width:auto;height:.175rem;background:#262626}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:.175rem solid black;margin-top:-.175rem;min-width:12.8rem;width:100%;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:120%;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem;text-align:left}.dropdown-item div{display:flex;flex-direction:column}.dropdown-item .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}.dropdown-item:not(.no-results).selected{background:var(--main-background);width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus,.dropdown-item:not(.no-results):focus-visible{outline:none;background:var(--hover-color);width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.passthrough{pointer-events:none}.grey-bg{background:var(--main-background)}.onwards{--origin: 1rem}.downwards{--origin: -1rem}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: [
@@ -236,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ], host: {
                         '(document:pointerdown)': 'handleMouseEvents($event)'
-                    }, template: "<div class=\"biit-input\" aria-haspopup=\"listbox\"\n     *ngIf=\"!icon\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValue && !label ? currentValue :\n                      currentValue && currentValue[label] ? currentValue[label] : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           [placeholder]=\"dropdownOpen && currentValue && !label ? currentValue :\n                          dropdownOpen && currentValue && currentValue[label] ? currentValue[label] : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || currentValue\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValue ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n<button biit-icon\n        *ngIf=\"icon\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"dropdown\"\n       [class.disabled]=\"isDisabled\"\n       [style.overflow]=\"dropdownOpen ? undefined : 'hidden'\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"handleKeyboardEvents($event)\"\n  >\n    <button\n      *ngFor=\"let item of filteredData; index as i\"\n      (click)=\"onModelChange(item)\"\n      [class.selected]=\"currentValue === item\"\n      class=\"dropdown-item\"\n      role=\"option\"\n      aria-selected=\"false\"\n      [id]=\"i\"\n      [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n      [disabled]=\"!dropdownOpen || isDisabled\"\n    >\n      <div id=\"content\">\n        <a>{{ label ?  item[label] : item }}</a>\n        <span *ngIf=\"descriptionLabel && item[descriptionLabel]\" class=\"description\">{{ item[descriptionLabel] }}</span>\n      </div>\n    </button>\n    <button *ngIf=\"!filteredData.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;height:2.1rem}.input-container{position:relative;width:100%}.input-container .description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:#262626;padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:#D9D9D9}.input-object:disabled{pointer-events:none;background-color:transparent;color:#d9d9d9}.default-cursor{cursor:auto}.input-placeholder{color:#262626;font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:gray}.input-placeholder.disabled{color:#d9d9d9}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:#D9D9D9}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-.175rem;margin-bottom:-.175rem;width:auto;height:.175rem;background:#262626}.bottom-line.disabled{background:#D9D9D9}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:.175rem solid black;margin-top:-.175rem;min-width:12.8rem;width:100%;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:120%;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem;text-align:left}.dropdown-item div{display:flex;flex-direction:column}.dropdown-item .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}.dropdown-item:not(.no-results).selected{background:#D9D9D9;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus,.dropdown-item:not(.no-results):focus-visible{outline:none;background:#EDEDED;width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.passthrough{pointer-events:none}.grey-bg{background:#D9D9D9}.onwards{--origin: 1rem}.downwards{--origin: -1rem}\n"] }]
+                    }, template: "<div class=\"biit-input\" aria-haspopup=\"listbox\"\n     *ngIf=\"!icon\"\n     [class.compact]=\"isCompact\"\n     [class.disabled]=\"isDisabled\"\n     (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n     (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n  <div class=\"input-container\" #input>\n    <input [ngModel]=\"dropdownOpen ? filterText :\n                      currentValue && !label ? currentValue :\n                      currentValue && currentValue[label] ? currentValue[label] : ''\"\n           (ngModelChange)=\"filterText = $event; handleFilter()\"\n           (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n           [placeholder]=\"dropdownOpen && currentValue && !label ? currentValue :\n                          dropdownOpen && currentValue && currentValue[label] ? currentValue[label] : ''\"\n           tabindex=\"0\"\n           class=\"input-object\"\n           [class.grey-bg]=\"dropdownOpen\"\n           [class.default-cursor]=\"dropdownOpen\"\n           [disabled]=\"isDisabled\"\n           [readonly]=\"!dropdownOpen\"/>\n    <div class=\"input-show-icon-container\"\n         [class.passthrough]=\"!dropdownOpen\"\n         [class.rotate-90]=\"dropdownOpen\"\n         (click)=\"dropdownOpen && closeDropdown()\">\n      <biit-icon [name]=\"'right_arrow'\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div id=\"dropdown-label\"\n         class=\"input-placeholder\"\n         [class.disabled]=\"isDisabled\"\n         [class.compact]=\"dropdownOpen || currentValue\">\n      {{ title }}\n      <a *ngIf=\"isRequired\"\n         [style.color]=\"currentValue ? null : 'red'\">*</a>\n    </div>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"isDisabled\"\n    ></div>\n    <span class=\"description\">{{ description }}</span>\n  </div>\n</div>\n<button biit-icon\n        *ngIf=\"icon\"\n        [icon]=\"icon\"\n        (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n        [checked]=\"dropdownOpen\"\n        [disabled]=\"isDisabled\"\n></button>\n<div style=\"position: relative; height: 0; width: 100%\">\n  <div #dropdown id=\"dropdown\"\n       [class.disabled]=\"isDisabled\"\n       [style.overflow]=\"dropdownOpen ? undefined : 'hidden'\"\n       class=\"dropdown-list\"\n       role=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"dropdown-label\"\n       [class.dropdown-open]=\"dropdownOpen\"\n       [class.compact]=\"isCompact\"\n       (keydown)=\"handleKeyboardEvents($event)\"\n  >\n    <button\n      *ngFor=\"let item of filteredData; index as i\"\n      (click)=\"onModelChange(item)\"\n      [class.selected]=\"currentValue === item\"\n      class=\"dropdown-item\"\n      role=\"option\"\n      aria-selected=\"false\"\n      [id]=\"i\"\n      [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n      [disabled]=\"!dropdownOpen || isDisabled\"\n    >\n      <div id=\"content\">\n        <a>{{ label ?  item[label] : item }}</a>\n        <span *ngIf=\"descriptionLabel && item[descriptionLabel]\" class=\"description\">{{ item[descriptionLabel] }}</span>\n      </div>\n    </button>\n    <button *ngIf=\"!filteredData.length\"\n            class=\"dropdown-item no-results\"\n            disabled\n    >\n      <a>No results found</a>\n    </button>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;height:2.1rem}.input-container{position:relative;width:100%}.input-container .description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-.175rem;margin-bottom:-.175rem;width:auto;height:.175rem;background:#262626}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:.175rem solid black;margin-top:-.175rem;min-width:12.8rem;width:100%;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:120%;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem;text-align:left}.dropdown-item div{display:flex;flex-direction:column}.dropdown-item .description{font-size:.75em;color:gray;line-height:120%;font-style:italic}.dropdown-item:not(.no-results).selected{background:var(--main-background);width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus,.dropdown-item:not(.no-results):focus-visible{outline:none;background:var(--hover-color);width:calc(100% + .3rem);margin-left:-.15rem;padding-left:.85rem}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.passthrough{pointer-events:none}.grey-bg{background:var(--main-background)}.onwards{--origin: 1rem}.downwards{--origin: -1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { title: [{
                 type: Input
             }], label: [{

package/esm2020/inputs/biit-group/biit-group.component.mjs

@@ -18,10 +18,10 @@ export class BiitGroupComponent {
     ;
 }
 BiitGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BiitGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitGroupComponent, selector: "biit-group", inputs: { legend: "legend", description: "description", enablePlus: "enablePlus", enableMinus: "enableMinus" }, outputs: { onPlusClick: "onPlusClick", onMinusClick: "onMinusClick" }, ngImport: i0, template: "<fieldset>\n  <legend *ngIf=\"legend\">\n    {{ legend }}\n  </legend>\n\n  <div class=\"grp-buttons\">\n    <button biit-icon\n            icon=\"plus\"\n            *ngIf=\"isEnabledPlus\"\n            (click)=\"onPlusClick.emit()\"\n    ></button>\n    <button biit-icon\n            icon=\"minus\"\n            *ngIf=\"isEnabledMinus\"\n            (click)=\"onMinusClick.emit()\"\n    ></button>\n  </div>\n\n  <ng-content></ng-content>\n</fieldset>\n<span *ngIf=\"description\"\n      class=\"grp-description\">\n  {{description}}\n</span>\n", styles: ["fieldset{position:relative;border:3px solid #262626;padding-inline-start:2.25em;padding-inline-end:2.25em;padding-block-start:1.75em;padding-block-end:2.75em}fieldset legend{padding:0 1.25em}fieldset button{right:0;top:-1.65em}fieldset .grp-buttons{position:absolute;right:0;top:-8px;display:flex}.grp-description{display:block;margin-top:.4rem;font-family:Cormorant Garamond,serif;font-size:.9rem;color:#262626;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
+BiitGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitGroupComponent, selector: "biit-group", inputs: { legend: "legend", description: "description", enablePlus: "enablePlus", enableMinus: "enableMinus" }, outputs: { onPlusClick: "onPlusClick", onMinusClick: "onMinusClick" }, ngImport: i0, template: "<fieldset>\n  <legend *ngIf=\"legend\">\n    {{ legend }}\n  </legend>\n\n  <div class=\"grp-buttons\">\n    <button biit-icon\n            icon=\"plus\"\n            *ngIf=\"isEnabledPlus\"\n            (click)=\"onPlusClick.emit()\"\n    ></button>\n    <button biit-icon\n            icon=\"minus\"\n            *ngIf=\"isEnabledMinus\"\n            (click)=\"onMinusClick.emit()\"\n    ></button>\n  </div>\n\n  <ng-content></ng-content>\n</fieldset>\n<span *ngIf=\"description\"\n      class=\"grp-description\">\n  {{description}}\n</span>\n", styles: ["fieldset{position:relative;border:3px solid var(--component-color);padding-inline-start:2.25em;padding-inline-end:2.25em;padding-block-start:1.75em;padding-block-end:2.75em}fieldset legend{padding:0 1.25em}fieldset button{right:0;top:-1.65em}fieldset .grp-buttons{position:absolute;right:0;top:-8px;display:flex}.grp-description{display:block;margin-top:.4rem;font-family:Cormorant Garamond,serif;font-size:.9rem;color:var(--component-color);text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'biit-group', template: "<fieldset>\n  <legend *ngIf=\"legend\">\n    {{ legend }}\n  </legend>\n\n  <div class=\"grp-buttons\">\n    <button biit-icon\n            icon=\"plus\"\n            *ngIf=\"isEnabledPlus\"\n            (click)=\"onPlusClick.emit()\"\n    ></button>\n    <button biit-icon\n            icon=\"minus\"\n            *ngIf=\"isEnabledMinus\"\n            (click)=\"onMinusClick.emit()\"\n    ></button>\n  </div>\n\n  <ng-content></ng-content>\n</fieldset>\n<span *ngIf=\"description\"\n      class=\"grp-description\">\n  {{description}}\n</span>\n", styles: ["fieldset{position:relative;border:3px solid #262626;padding-inline-start:2.25em;padding-inline-end:2.25em;padding-block-start:1.75em;padding-block-end:2.75em}fieldset legend{padding:0 1.25em}fieldset button{right:0;top:-1.65em}fieldset .grp-buttons{position:absolute;right:0;top:-8px;display:flex}.grp-description{display:block;margin-top:.4rem;font-family:Cormorant Garamond,serif;font-size:.9rem;color:#262626;text-align:left}\n"] }]
+            args: [{ selector: 'biit-group', template: "<fieldset>\n  <legend *ngIf=\"legend\">\n    {{ legend }}\n  </legend>\n\n  <div class=\"grp-buttons\">\n    <button biit-icon\n            icon=\"plus\"\n            *ngIf=\"isEnabledPlus\"\n            (click)=\"onPlusClick.emit()\"\n    ></button>\n    <button biit-icon\n            icon=\"minus\"\n            *ngIf=\"isEnabledMinus\"\n            (click)=\"onMinusClick.emit()\"\n    ></button>\n  </div>\n\n  <ng-content></ng-content>\n</fieldset>\n<span *ngIf=\"description\"\n      class=\"grp-description\">\n  {{description}}\n</span>\n", styles: ["fieldset{position:relative;border:3px solid var(--component-color);padding-inline-start:2.25em;padding-inline-end:2.25em;padding-block-start:1.75em;padding-block-end:2.75em}fieldset legend{padding:0 1.25em}fieldset button{right:0;top:-1.65em}fieldset .grp-buttons{position:absolute;right:0;top:-8px;display:flex}.grp-description{display:block;margin-top:.4rem;font-family:Cormorant Garamond,serif;font-size:.9rem;color:var(--component-color);text-align:left}\n"] }]
         }], propDecorators: { legend: [{
                 type: Input
             }], description: [{

package/esm2020/inputs/biit-input-text/biit-input-text.component.mjs

@@ -85,7 +85,7 @@ BiitInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             provide: TRANSLOCO_SCOPE,
             useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
         }
-    ], ngImport: i0, template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <input\n           class=\"input-object\"\n           (keydown)=\"checkValue($event)\"\n           [(ngModel)]=\"value\"\n           (input)=\"value\"\n           (ngModelChange)=\"onChange($event); validateInput();\"\n           (keydown.enter)=\"onActionPerformed.emit(value)\"\n           [type]=\"reveal ? Type.TEXT : type\" required\n           [min]=\"min\"\n           [max]=\"max\"\n           [minlength]=\"minLength\"\n           [maxlength]=\"maxLength ? maxLength : 100\"\n           [attr.name]=\"fieldName\"\n           [class.error]=\"error || regExError || minLengthError\"\n           [class.reveal]=\"reveal\"\n    >\n    <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n         (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         tabindex=\"0\">\n      <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: reveal ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n      {{ _placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n               class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"disabled\"\n         [class.readonly]=\"readonly\"\n    ></div>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n      <a id=\"regex-message\">\n        {{ t('inputs.regex-error') }}\n      </a>\n    </div>\n    <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n      <a id=\"length-message\">\n        {{ t('inputs.minlength-error') }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:#D9D9D9;color:gray}.biit-input.readonly .input-object{color:gray}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:#D9D9D9}.input-object:hover{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:#a1093f;padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled,.bottom-line.readonly{background:#808080}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i5.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
+    ], ngImport: i0, template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <input\n           class=\"input-object\"\n           (keydown)=\"checkValue($event)\"\n           [(ngModel)]=\"value\"\n           (input)=\"value\"\n           (ngModelChange)=\"onChange($event); validateInput();\"\n           (keydown.enter)=\"onActionPerformed.emit(value)\"\n           [type]=\"reveal ? Type.TEXT : type\" required\n           [min]=\"min\"\n           [max]=\"max\"\n           [minlength]=\"minLength\"\n           [maxlength]=\"maxLength ? maxLength : 100\"\n           [attr.name]=\"fieldName\"\n           [class.error]=\"error || regExError || minLengthError\"\n           [class.reveal]=\"reveal\"\n    >\n    <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n         (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         tabindex=\"0\">\n      <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: reveal ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n      {{ _placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n               class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"disabled\"\n         [class.readonly]=\"readonly\"\n    ></div>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n      <a id=\"regex-message\">\n        {{ t('inputs.regex-error') }}\n      </a>\n    </div>\n    <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n      <a id=\"length-message\">\n        {{ t('inputs.minlength-error') }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:var(--main-background);color:var(--secondary-color)}.biit-input.readonly .input-object{color:var(--secondary-color)}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:var(--main-background)}.input-object:hover{background:var(--main-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:var(--secondary-color)}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:var(--error-color);padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:var(--main-background);border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled,.bottom-line.readonly{background:var(--secondary-color)}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i5.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: [
@@ -98,7 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: TRANSLOCO_SCOPE,
                             useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
                         }
-                    ], template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <input\n           class=\"input-object\"\n           (keydown)=\"checkValue($event)\"\n           [(ngModel)]=\"value\"\n           (input)=\"value\"\n           (ngModelChange)=\"onChange($event); validateInput();\"\n           (keydown.enter)=\"onActionPerformed.emit(value)\"\n           [type]=\"reveal ? Type.TEXT : type\" required\n           [min]=\"min\"\n           [max]=\"max\"\n           [minlength]=\"minLength\"\n           [maxlength]=\"maxLength ? maxLength : 100\"\n           [attr.name]=\"fieldName\"\n           [class.error]=\"error || regExError || minLengthError\"\n           [class.reveal]=\"reveal\"\n    >\n    <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n         (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         tabindex=\"0\">\n      <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: reveal ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n      {{ _placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n               class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"disabled\"\n         [class.readonly]=\"readonly\"\n    ></div>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n      <a id=\"regex-message\">\n        {{ t('inputs.regex-error') }}\n      </a>\n    </div>\n    <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n      <a id=\"length-message\">\n        {{ t('inputs.minlength-error') }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:#D9D9D9;color:gray}.biit-input.readonly .input-object{color:gray}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:#262626;padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:#D9D9D9}.input-object:hover{background:#D9D9D9}.input-object.error{color:#a1093f;border-color:#a1093f}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:#262626;font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:gray}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:#a1093f;padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:#d9d9d9;border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled,.bottom-line.readonly{background:#808080}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"] }]
+                    ], template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n  <div class=\"input-container\">\n    <biit-tooltip-icon *ngIf=\"info\"\n                       class=\"tooltip-icon\"\n                       [text]=\"info\"></biit-tooltip-icon>\n    <input\n           class=\"input-object\"\n           (keydown)=\"checkValue($event)\"\n           [(ngModel)]=\"value\"\n           (input)=\"value\"\n           (ngModelChange)=\"onChange($event); validateInput();\"\n           (keydown.enter)=\"onActionPerformed.emit(value)\"\n           [type]=\"reveal ? Type.TEXT : type\" required\n           [min]=\"min\"\n           [max]=\"max\"\n           [minlength]=\"minLength\"\n           [maxlength]=\"maxLength ? maxLength : 100\"\n           [attr.name]=\"fieldName\"\n           [class.error]=\"error || regExError || minLengthError\"\n           [class.reveal]=\"reveal\"\n    >\n    <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n         (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n         tabindex=\"0\">\n      <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n                 class=\"input-show-icon\"\n                 [pathStyle]=\"{fill: reveal ? '#F20D5E' : '#262626'}\"\n      ></biit-icon>\n    </div>\n    <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n      {{ _placeholder }}\n      <a *ngIf=\"required\"\n         [style.color]=\"value ? null : 'red'\">*</a>\n    </div>\n    <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n               class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n    <div class=\"bottom-line\"\n         [class.disabled]=\"disabled\"\n         [class.readonly]=\"readonly\"\n    ></div>\n    <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n      <a id=\"message\">\n        {{ error }}\n      </a>\n    </div>\n    <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n      <a id=\"regex-message\">\n        {{ t('inputs.regex-error') }}\n      </a>\n    </div>\n    <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n      <a id=\"length-message\">\n        {{ t('inputs.minlength-error') }}\n      </a>\n    </div>\n    <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n      {{ description }}\n    </span>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:var(--main-background);color:var(--secondary-color)}.biit-input.readonly .input-object{color:var(--secondary-color)}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400}.input-object:focus{outline:none;background:var(--main-background)}.input-object:hover{background:var(--main-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:var(--secondary-color)}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:var(--error-color);padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:var(--main-background);border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled,.bottom-line.readonly{background:var(--secondary-color)}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], error: [{