herum-shared 0.1.37 → 0.1.39

package/fesm2022/herum-shared-atoms.mjs

@@ -1,20 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, EventEmitter, Output, Input, forwardRef, Inject, ViewChild, Directive, HostListener, Optional, Self, NgModule } from '@angular/core';
+import { Component, Pipe, EventEmitter, Output, Input, forwardRef, ViewChild, Directive, HostListener, Optional, Self, Inject, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/material/core';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from 'herum-shared/directives';
 import { DirectivesModule } from 'herum-shared/directives';
 import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, FormControlName, Validators, ControlContainer, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
+import { NG_VALUE_ACCESSOR, FormControlName, Validators, ControlContainer, ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
+import { checkboxTypes, calendarActiveColorCssVariable, calendarHoverColorCssVariable, calendarLibrarySelector, calendarLibraryBodyCellSelector, svgsStrings, defaultPlaceholder as defaultPlaceholder$1, keyboardAsciiCodes, types, formStatuses, regexExpressions, timerActiveColorCssVariable, timerHoverColorCssVariable, timerItemSizeColorCssVariable, resourcesFilesSuffixes, anySubFileTypeWildCard, radioButtonTypes, maleAvatarPath, femaleAvatarPath } from 'herum-shared/constants';
 import * as i2$1 from '@angular/cdk/bidi';
 import * as i4 from 'herum-shared/pipes';
 import { PipesModule } from 'herum-shared/pipes';
 import * as i3 from '@angular/material/datepicker';
 import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
-import { calendarActiveColorCssVariable, calendarHoverColorCssVariable, calendarLibrarySelector, calendarLibraryBodyCellSelector, svgsStrings, defaultPlaceholder as defaultPlaceholder$1, keyboardAsciiCodes, types, formStatuses, regexExpressions, timerActiveColorCssVariable, timerHoverColorCssVariable, timerItemSizeColorCssVariable, resourcesFilesSuffixes, anySubFileTypeWildCard, maleAvatarPath, femaleAvatarPath } from 'herum-shared/constants';
-import * as i1$1 from '@angular/material/core';
-import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { takeUntil, debounceTime, tap } from 'rxjs/operators';
 import { openClose } from 'herum-shared/animations';
@@ -22,7 +21,7 @@ import { getDropdownAnimationStates } from 'herum-shared/utils';
 import { v4 } from 'uuid';
 import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ResourceState, QuizHeaderState, TimeUnit, Gender } from 'herum-shared/herum-types';
+import { ResourceState, QuizHeaderState, Gender } from 'herum-types/Enums';
 import { MatMenuModule } from '@angular/material/menu';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -118,11 +117,11 @@ class HerumButtonComponent {
     isLoading = false;
     name;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumButtonComponent, isStandalone: false, selector: "herum-button", inputs: { type: "type", color: "color", size: "size", roundedCorners: "roundedCorners", disabled: "disabled", isLoading: "isLoading", name: "name" }, ngImport: i0, template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumButtonComponent, isStandalone: false, selector: "herum-button", inputs: { type: "type", color: "color", size: "size", roundedCorners: "roundedCorners", disabled: "disabled", isLoading: "isLoading", name: "name" }, ngImport: i0, template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important;stroke:var(--secondary-color)}.ghost:hover:not([disabled]){color:var(--lighter-secondary-color);stroke:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color);stroke:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-button', template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"] }]
+            args: [{ standalone: false, selector: 'herum-button', template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important;stroke:var(--secondary-color)}.ghost:hover:not([disabled]){color:var(--lighter-secondary-color);stroke:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color);stroke:var(--disabled-text-color)}.error{background:var(--error-color)}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], color: [{
@@ -145,32 +144,23 @@ const CUSTOM_CHECKBOX_VALUE_ACCESSOR = {
     multi: true,
 };
 class HerumCheckboxComponent {
-    environmentConfig;
     type;
     isChecked = false;
     isBlocked = false;
     checkedEmitter = new EventEmitter();
-    indeterminate;
-    checked;
-    error;
+    indeterminate = checkboxTypes.indeterminate;
+    checked = checkboxTypes.checked;
+    error = checkboxTypes.error;
     checkboxClasses = '';
     params;
-    constructor(environmentConfig) {
-        this.environmentConfig = environmentConfig;
-    }
-    ngOnInit() {
-        this.indeterminate = this.environmentConfig.checkboxTypes.indeterminate;
-        this.checked = this.environmentConfig.checkboxTypes.checked;
-        this.error = this.environmentConfig.checkboxTypes.error;
-    }
     _onClick() {
         if (this.isBlocked)
             return;
-        if (this.type === this.environmentConfig.checkboxTypes.indeterminate || this.type === this.environmentConfig.checkboxTypes.checked) {
+        if (this.type === checkboxTypes.indeterminate || this.type === checkboxTypes.checked) {
             this.type = undefined;
             this.isChecked = false;
         }
-        else if (this.type === this.environmentConfig.checkboxTypes.unchecked)
+        else if (this.type === checkboxTypes.unchecked)
             this.isChecked = false;
         else
             this.isChecked = !this.isChecked;
@@ -185,7 +175,7 @@ class HerumCheckboxComponent {
         let classes = ``;
         if (this.type)
             classes += `${this.type} `;
-        if (this.type !== this.environmentConfig.checkboxTypes.disabled)
+        if (this.type !== checkboxTypes.disabled)
             classes += 'full-opacity ';
         if (this.isChecked && !this.type)
             classes += `checked `;
@@ -209,16 +199,13 @@ class HerumCheckboxComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumCheckboxComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumCheckboxComponent, isStandalone: false, selector: "herum-checkbox", inputs: { type: "type", isChecked: "isChecked", isBlocked: "isBlocked" }, outputs: { checkedEmitter: "checkedEmitter" }, providers: [CUSTOM_CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "<label class=\"custom-checkbox-container\" [ngClass]=\"isBlocked ? 'not-clickable' : 'cursor-pointer'\"\r\n    (click)=\"_onClick()\">\r\n    <span class=\"unchecked\" [ngClass]=\"getCheckboxClasses()\">\r\n        <img *ngIf=\"(isChecked && !type) || type===checked\" class=\"custom-checkmark-image\"\r\n            src=\"assets/shared/icons/V.svg\" alt=\"Custom Checkmark\">\r\n\r\n        <img class=\"custom-checkmark-image d-block\" *ngIf=\"type===error\" src=\"assets/shared/icons/X.svg\"\r\n            alt=\"Custom Checkmark\">\r\n\r\n        <div *ngIf=\"type===indeterminate\" class=\"indeterminate-shape\"></div>\r\n    </span>\r\n</label>", styles: [".custom-checkbox-container{display:flex;justify-content:center;margin:0}.unchecked{position:relative;opacity:.5;top:0;left:0;height:var(--herum-checkbox-size);width:var(--herum-checkbox-size);border-radius:2px;border:1px solid var(--secondary-color)}.custom-checkmark-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px}.custom-checkmark-image,.indeterminate-shape{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.indeterminate-shape{background:var(--primary-color);height:60%;width:60%;border-radius:1px}.indeterminate{border:1px solid var(--icons-color)}.checked{background:var(--primary-color)}.disabled{background:var(--disabled-background-color);border-color:var(--disabled-border-color)}.error,.checked{border:none!important}.error{background-color:var(--error-color)}.full-opacity{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumCheckboxComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-checkbox', providers: [CUSTOM_CHECKBOX_VALUE_ACCESSOR], template: "<label class=\"custom-checkbox-container\" [ngClass]=\"isBlocked ? 'not-clickable' : 'cursor-pointer'\"\r\n    (click)=\"_onClick()\">\r\n    <span class=\"unchecked\" [ngClass]=\"getCheckboxClasses()\">\r\n        <img *ngIf=\"(isChecked && !type) || type===checked\" class=\"custom-checkmark-image\"\r\n            src=\"assets/shared/icons/V.svg\" alt=\"Custom Checkmark\">\r\n\r\n        <img class=\"custom-checkmark-image d-block\" *ngIf=\"type===error\" src=\"assets/shared/icons/X.svg\"\r\n            alt=\"Custom Checkmark\">\r\n\r\n        <div *ngIf=\"type===indeterminate\" class=\"indeterminate-shape\"></div>\r\n    </span>\r\n</label>", styles: [".custom-checkbox-container{display:flex;justify-content:center;margin:0}.unchecked{position:relative;opacity:.5;top:0;left:0;height:var(--herum-checkbox-size);width:var(--herum-checkbox-size);border-radius:2px;border:1px solid var(--secondary-color)}.custom-checkmark-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px}.custom-checkmark-image,.indeterminate-shape{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.indeterminate-shape{background:var(--primary-color);height:60%;width:60%;border-radius:1px}.indeterminate{border:1px solid var(--icons-color)}.checked{background:var(--primary-color)}.disabled{background:var(--disabled-background-color);border-color:var(--disabled-border-color)}.error,.checked{border:none!important}.error{background-color:var(--error-color)}.full-opacity{opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }], propDecorators: { type: [{
+        }], propDecorators: { type: [{
                 type: Input
             }], isChecked: [{
                 type: Input
@@ -300,8 +287,8 @@ class HerumCircularProgressBarComponent {
     displayedContent;
     displayedContentColorMatchesGradientColor = false;
     ngOnChanges(changes) {
-        if (changes['percentage'])
-            this.displayedContent = this.displayedContent || this.percentage;
+        if (changes['percentage'] && !changes['displayedContent']?.currentValue)
+            this.displayedContent = this.percentage;
         if (changes['firstGradient'])
             this.firstGradient = this.firstGradient || defaultFirstGradient;
     }
@@ -429,11 +416,11 @@ class HerumDatePickerComponent {
         return date >= this.minDate;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDatePickerComponent, isStandalone: false, selector: "herum-date-picker", inputs: { activeColor: "activeColor", hoverColor: "hoverColor", minDate: "minDate", rangeMode: "rangeMode", selectedDate: "selectedDate" }, outputs: { dateChange: "dateChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ 'height.px': matCalendarContainerHeight }\">\r\n    <mat-calendar #calendar [dateFilter]=\"_minDateFilter\" [selected]=\"selectedDate\"\r\n        (selectedChange)=\"_onSelectedDateChange($event)\">\r\n    </mat-calendar>\r\n</div>", styles: [":host{--active-calendar-color: var(--primary-color);--hover-calendar-color: var(--hovered-item-background-color)}::ng-deep .mat-calendar-body-selected{background:var(--active-calendar-color)!important;color:var(--light-text-color)!important}::ng-deep .mat-button{padding-inline:0!important}::ng-deep .mat-calendar-body-label{font-size:var(--standard-font-size)}::ng-deep .mat-calendar-content{padding-block-end:0px!important}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 #fff!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-calendar-body-in-range:before{background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-header{padding:0!important}::ng-deep .mat-calendar-controls{display:flex;margin:0!important;margin-block-end:20px!important}::ng-deep .mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important}::ng-deep .mat-button-wrapper{position:relative!important;z-index:1!important}::ng-deep .mat-button-focus-overlay,::ng-deep .mat-button-focus-overlay:active{background:transparent!important;background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-body-cell-content,::ng-deep .mat-calendar-table-header th,::ng-deep .mat-calendar-body-label,::ng-deep .mat-button-wrapper{color:var(--title-color)}::ng-deep .mat-calendar-body-cell-content{border-style:none!important;line-height:0!important;border-radius:var(--border-radius)!important}::ng-deep .mat-calendar-table-header-divider:after{background:var(--table-border-color)}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--disabled-text-color)}::ng-deep .mat-calendar-body-range-start:before,::ng-deep .mat-calendar-body-range-end:after{left:0%!important;background:var(--active-calendar-color)!important}::ng-deep .mat-calendar-body-range-start:before{border-top-right-radius:var(--border-radius)!important;border-bottom-right-radius:var(--border-radius)!important}::ng-deep .mat-calendar-body-range-end:after{border-top-left-radius:var(--border-radius)!important;border-bottom-left-radius:var(--border-radius)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDatePickerComponent, isStandalone: false, selector: "herum-date-picker", inputs: { activeColor: "activeColor", hoverColor: "hoverColor", minDate: "minDate", rangeMode: "rangeMode", selectedDate: "selectedDate" }, outputs: { dateChange: "dateChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ 'height.px': matCalendarContainerHeight }\">\r\n    <mat-calendar #calendar [dateFilter]=\"_minDateFilter\" [selected]=\"selectedDate\"\r\n        (selectedChange)=\"_onSelectedDateChange($event)\">\r\n    </mat-calendar>\r\n</div>", styles: [":host{--active-calendar-color: var(--primary-color);--hover-calendar-color: var(--hovered-item-background-color)}::ng-deep .mat-calendar-body-selected{background:var(--active-calendar-color)!important;color:var(--light-text-color)!important}::ng-deep .mat-button{padding-inline:0!important}::ng-deep .mat-calendar-body-label{font-size:var(--standard-font-size)}::ng-deep .mat-calendar-content{padding-block-end:0px!important}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 #fff!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-calendar-body-in-range:before{background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-header{padding:0!important}::ng-deep .mat-calendar-controls{display:flex;margin:0!important;margin-block-end:20px!important}::ng-deep .mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important}::ng-deep .mat-button-wrapper{position:relative!important;z-index:1!important}::ng-deep .mat-button-focus-overlay,::ng-deep .mat-button-focus-overlay:active{background:transparent!important;background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-body-cell-content,::ng-deep .mat-calendar-table-header th,::ng-deep .mat-calendar-body-label,::ng-deep .mat-button-wrapper{color:var(--text-color)}::ng-deep .mat-calendar-body-cell-content{border-style:none!important;line-height:0!important;border-radius:var(--border-radius)!important}::ng-deep .mat-calendar-table-header-divider:after{background:var(--table-border-color)}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--disabled-text-color)}::ng-deep .mat-calendar-body-range-start:before,::ng-deep .mat-calendar-body-range-end:after{left:0%!important;background:var(--active-calendar-color)!important}::ng-deep .mat-calendar-body-range-start:before{border-top-right-radius:var(--border-radius)!important;border-bottom-right-radius:var(--border-radius)!important}::ng-deep .mat-calendar-body-range-end:after{border-top-left-radius:var(--border-radius)!important;border-bottom-left-radius:var(--border-radius)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-date-picker', template: "<div [ngStyle]=\"{ 'height.px': matCalendarContainerHeight }\">\r\n    <mat-calendar #calendar [dateFilter]=\"_minDateFilter\" [selected]=\"selectedDate\"\r\n        (selectedChange)=\"_onSelectedDateChange($event)\">\r\n    </mat-calendar>\r\n</div>", styles: [":host{--active-calendar-color: var(--primary-color);--hover-calendar-color: var(--hovered-item-background-color)}::ng-deep .mat-calendar-body-selected{background:var(--active-calendar-color)!important;color:var(--light-text-color)!important}::ng-deep .mat-button{padding-inline:0!important}::ng-deep .mat-calendar-body-label{font-size:var(--standard-font-size)}::ng-deep .mat-calendar-content{padding-block-end:0px!important}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 #fff!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-calendar-body-in-range:before{background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-header{padding:0!important}::ng-deep .mat-calendar-controls{display:flex;margin:0!important;margin-block-end:20px!important}::ng-deep .mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important}::ng-deep .mat-button-wrapper{position:relative!important;z-index:1!important}::ng-deep .mat-button-focus-overlay,::ng-deep .mat-button-focus-overlay:active{background:transparent!important;background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-body-cell-content,::ng-deep .mat-calendar-table-header th,::ng-deep .mat-calendar-body-label,::ng-deep .mat-button-wrapper{color:var(--title-color)}::ng-deep .mat-calendar-body-cell-content{border-style:none!important;line-height:0!important;border-radius:var(--border-radius)!important}::ng-deep .mat-calendar-table-header-divider:after{background:var(--table-border-color)}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--disabled-text-color)}::ng-deep .mat-calendar-body-range-start:before,::ng-deep .mat-calendar-body-range-end:after{left:0%!important;background:var(--active-calendar-color)!important}::ng-deep .mat-calendar-body-range-start:before{border-top-right-radius:var(--border-radius)!important;border-bottom-right-radius:var(--border-radius)!important}::ng-deep .mat-calendar-body-range-end:after{border-top-left-radius:var(--border-radius)!important;border-bottom-left-radius:var(--border-radius)!important}\n"] }]
+            args: [{ standalone: false, selector: 'herum-date-picker', template: "<div [ngStyle]=\"{ 'height.px': matCalendarContainerHeight }\">\r\n    <mat-calendar #calendar [dateFilter]=\"_minDateFilter\" [selected]=\"selectedDate\"\r\n        (selectedChange)=\"_onSelectedDateChange($event)\">\r\n    </mat-calendar>\r\n</div>", styles: [":host{--active-calendar-color: var(--primary-color);--hover-calendar-color: var(--hovered-item-background-color)}::ng-deep .mat-calendar-body-selected{background:var(--active-calendar-color)!important;color:var(--light-text-color)!important}::ng-deep .mat-button{padding-inline:0!important}::ng-deep .mat-calendar-body-label{font-size:var(--standard-font-size)}::ng-deep .mat-calendar-content{padding-block-end:0px!important}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 #fff!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-calendar-body-in-range:before{background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-header{padding:0!important}::ng-deep .mat-calendar-controls{display:flex;margin:0!important;margin-block-end:20px!important}::ng-deep .mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important}::ng-deep .mat-button-wrapper{position:relative!important;z-index:1!important}::ng-deep .mat-button-focus-overlay,::ng-deep .mat-button-focus-overlay:active{background:transparent!important;background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-body-cell-content,::ng-deep .mat-calendar-table-header th,::ng-deep .mat-calendar-body-label,::ng-deep .mat-button-wrapper{color:var(--text-color)}::ng-deep .mat-calendar-body-cell-content{border-style:none!important;line-height:0!important;border-radius:var(--border-radius)!important}::ng-deep .mat-calendar-table-header-divider:after{background:var(--table-border-color)}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--disabled-text-color)}::ng-deep .mat-calendar-body-range-start:before,::ng-deep .mat-calendar-body-range-end:after{left:0%!important;background:var(--active-calendar-color)!important}::ng-deep .mat-calendar-body-range-start:before{border-top-right-radius:var(--border-radius)!important;border-bottom-right-radius:var(--border-radius)!important}::ng-deep .mat-calendar-body-range-end:after{border-top-left-radius:var(--border-radius)!important;border-bottom-left-radius:var(--border-radius)!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i0.ChangeDetectorRef }], propDecorators: { activeColor: [{
                 type: Input
             }], hoverColor: [{
@@ -470,11 +457,11 @@ class HerumDownloadFileComponent {
         return svgsStrings.downloadFile;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDownloadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDownloadFileComponent, isStandalone: false, selector: "herum-download-file", inputs: { fileId: "fileId", filePath: "filePath", linkText: "linkText" }, outputs: { downloadFile: "downloadFile" }, viewQueries: [{ propertyName: "downloadFileElement", first: true, predicate: ["downloadFile"], descendants: true }], ngImport: i0, template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color)}\n"], dependencies: [{ kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDownloadFileComponent, isStandalone: false, selector: "herum-download-file", inputs: { fileId: "fileId", filePath: "filePath", linkText: "linkText" }, outputs: { downloadFile: "downloadFile" }, viewQueries: [{ propertyName: "downloadFileElement", first: true, predicate: ["downloadFile"], descendants: true }], ngImport: i0, template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color);cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDownloadFileComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-download-file', template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color)}\n"] }]
+            args: [{ standalone: false, selector: 'herum-download-file', template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color);cursor:pointer}\n"] }]
         }], propDecorators: { fileId: [{
                 type: Input
             }], filePath: [{
@@ -497,28 +484,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{ standalone: false, selector: 'herum-ellipsis-loader', template: "<div class=\"herum-ellipsis\">\r\n    <div></div>\r\n    <div></div>\r\n    <div></div>\r\n    <div></div>\r\n</div>", styles: [".herum-ellipsis,.herum-ellipsis div{box-sizing:border-box}.herum-ellipsis{display:inline-block;position:relative;width:40px;height:40px;margin:auto}.herum-ellipsis div{position:absolute;top:18px;width:9.33333px;height:9.33333px;border-radius:50%;background:#fff;animation-timing-function:cubic-bezier(0,1,1,0)}.herum-ellipsis div:nth-child(1){left:8px;animation:herum-ellipsis1 .6s infinite}.herum-ellipsis div:nth-child(2){left:4px;animation:herum-ellipsis2 .6s infinite}.herum-ellipsis div:nth-child(3){left:16px;animation:herum-ellipsis2 .6s infinite}.herum-ellipsis div:nth-child(4){left:28px;animation:herum-ellipsis3 .6s infinite}@keyframes herum-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes herum-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes herum-ellipsis2{0%{transform:translate(0)}to{transform:translate(12px)}}\n"] }]
         }] });
 
-class HerumFormControl extends FormControl {
-    errorMessages = {};
-    currentErrorMessage = '';
-    destroySubject$ = new Subject();
-    /**
-     @comment The component that creates this class should have destroySubject$ so you can listen to its ngOnDestroy life cycle hook so you can unsubscribe statusChangesSubscription
-     */
-    constructor(formState, validatorOrOpts, asyncValidator, errorMessages, componentReference) {
-        super(formState, validatorOrOpts, asyncValidator);
-        if (errorMessages)
-            this.errorMessages = errorMessages;
-        this.statusChanges.pipe(takeUntil(this.destroySubject$)).subscribe(() => this.setCurrentErrorMessage());
-        componentReference.destroySubject$.pipe(takeUntil(this.destroySubject$)).subscribe(() => {
-            this.destroySubject$.next(null);
-            this.destroySubject$.complete();
-        });
-    }
-    setCurrentErrorMessage() {
-        this.currentErrorMessage = this.errors ? this.errorMessages[Object.keys(this.errors)[0]] : null;
-    }
-}
-
 class HerumIconLabelComponent {
     iconPath = '';
     isLoading = false;
@@ -582,7 +547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['appConditionalFormControlName']
             }] } });
 
-const emptyNumberInputValue = '0';
 const numericTextType = 'numeric-text';
 class HerumInputFieldComponent {
     ngControl;
@@ -638,10 +602,19 @@ class HerumInputFieldComponent {
         this.initInputSubject$();
         this.setInputsByFormControl();
     }
+    ngOnChanges(changes) {
+        if (changes['inputValue'])
+            this.resetState();
+    }
+    resetState() {
+        this.errorMsg = '';
+        this.isValid = true;
+    }
     initInputSubject$() {
         this.inputSubject$.pipe(takeUntil(this.destroySubject$), debounceTime(this.debounceTime), tap(value => {
-            this.inputValue = value;
-            const valueToEmit = this.type === types.number ? Number(value) : this.inputValue;
+            const isTypeNumber = this.type === types.number;
+            const valueToEmit = isTypeNumber && typeof value === types.string ? Number.parseFloat(value) : value;
+            this.inputValue = isTypeNumber && typeof value === types.number ? valueToEmit.toString() : value;
             this.onChange(valueToEmit);
             this.inputValueEmitter.emit(valueToEmit);
         })).subscribe();
@@ -662,18 +635,23 @@ class HerumInputFieldComponent {
     }
     clearInput() {
         const isTypeNumber = this.type === types.number;
-        this.inputValue = isTypeNumber ? this.minValue !== undefined ? this.minValue.toString() : emptyNumberInputValue : '';
-        const valueToEmit = isTypeNumber ? Number(this.inputValue) : this.inputValue;
-        this.inputValueEmitter.emit(valueToEmit);
-        this.onChange(valueToEmit);
+        const clearedValue = '';
+        if (isTypeNumber) {
+            this._onInput(clearedValue);
+            return;
+        }
+        this.inputValue = clearedValue;
+        this.inputValueEmitter.emit(clearedValue);
+        this.onChange(clearedValue);
     }
     _onInput(freeText) {
         this.touched = true;
+        this._setBlurred();
         let value = freeText;
         if (this.type == types.number) {
             if (!freeText) {
                 this.cdr.detectChanges();
-                this.inputValue = value = emptyNumberInputValue;
+                this.inputValue = value = null;
             }
             if (!freeText.match(regexExpressions.digitsOnly))
                 value = value.replace(/[^0-9]/g, '');
@@ -696,24 +674,28 @@ class HerumInputFieldComponent {
             delete this.ngControl.control.errors[inputNumberRangeValidatorName];
     }
     getRangeErrorMessage(freeText) {
-        const parsedValue = parseFloat(freeText);
         const hasMinValue = Number.isFinite(this.minValue);
         const hasMaxValue = Number.isFinite(this.maxValue);
         const insertValue = 'נא להזין ערך';
+        if (!freeText && (hasMinValue || hasMaxValue || this.ngControl?.control.hasValidator(Validators.required)))
+            return insertValue;
+        const parsedValue = parseFloat(freeText);
         if (hasMinValue && hasMaxValue && (parsedValue < this.minValue || parsedValue > this.maxValue))
-            return (this.minValue === this.maxValue) ? `הערך שניתן להזין הוא${this.maxValue}` : `${insertValue} מ ${this.minValue} עד ${this.maxValue}`;
+            return (this.minValue === this.maxValue) ? ` הערך שניתן להזין הוא${this.maxValue}` : `${insertValue} מ ${this.minValue} עד ${this.maxValue}`;
         else if (hasMinValue && !hasMaxValue && parsedValue <= this.minValue - 1)
             return `${insertValue} גדול מ${this.minValue - 1}`;
         else if (!hasMinValue && hasMaxValue && parsedValue >= this.maxValue + 1)
-            return `${insertValue} קטן מ${this.maxValue + 1}`;
+            return `${insertValue} עד ${this.maxValue}`;
         else
             return '';
     }
     onChange = () => { };
     onTouched = () => { };
     writeValue(value) {
-        if (this.inputValue !== value)
-            this.inputValue = value;
+        if (this.inputValue === value)
+            return;
+        this.inputValue = value;
+        this.resetState();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -777,11 +759,11 @@ class HerumInputFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumInputFieldComponent, isStandalone: false, selector: "herum-input-field", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", isBlocked: "isBlocked", isValid: "isValid", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", inputValue: "inputValue", isLoading: "isLoading", id: "id", debounceTime: "debounceTime", minValue: "minValue", maxValue: "maxValue", isBlurred: "isBlurred", touched: "touched", ltrMode: "ltrMode", preventMacroKeysPressEvent: "preventMacroKeysPressEvent" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" }, properties: { "class.required-control": "isRequired" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\"\r\n            (mousedown)=\"$event.preventDefault()\" (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{errorMsg}}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumInputFieldComponent, isStandalone: false, selector: "herum-input-field", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", isBlocked: "isBlocked", isValid: "isValid", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", inputValue: "inputValue", isLoading: "isLoading", id: "id", debounceTime: "debounceTime", minValue: "minValue", maxValue: "maxValue", isBlurred: "isBlurred", touched: "touched", ltrMode: "ltrMode", preventMacroKeysPressEvent: "preventMacroKeysPressEvent" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" }, properties: { "class.required-control": "isRequired" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\" (mousedown)=\"$event.preventDefault()\"\r\n            (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{ errorMsg }}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-input-field', host: { '[class.required-control]': 'isRequired' }, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\"\r\n            (mousedown)=\"$event.preventDefault()\" (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{errorMsg}}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"] }]
+            args: [{ standalone: false, selector: 'herum-input-field', host: { '[class.required-control]': 'isRequired' }, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\" (mousedown)=\"$event.preventDefault()\"\r\n            (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{ errorMsg }}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -1623,11 +1605,11 @@ class HerumSelectComponent {
         return dummySkeletonArray;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumSelectComponent, isStandalone: false, selector: "herum-select", inputs: { options: "options", displayBy: "displayBy", placeholder: "placeholder", selectedOption: "selectedOption", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", iconPath: "iconPath", isAutoComplete: "isAutoComplete", title: "title", size: "size", displayLoadingMode: "displayLoadingMode", isLoadingInput: "isLoadingInput", dropDownDirection: "dropDownDirection", filterPlaceholder: "filterPlaceholder", debounceTime: "debounceTime" }, outputs: { selectedOptionEmitter: "selectedOptionEmitter", filterTextEmitter: "filterTextEmitter" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onResize($event)" } }, providers: [CUSTOM_SELECT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "dropContainer", first: true, predicate: ["dropContainer"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\"\r\n    [ngClass]=\"{'w-100': size === 'responsive', 'fill-container':size === 'fill-container' }\"\r\n    (click)=\"toggleDropdown()\">\r\n    <button class=\"drop-button internal\" [class]=\"narrowSelect ? 'narrow' : size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\"\r\n        [ngStyle]=\" {'padding': iconPath ? '4px 12px 4px 4px' : null }\">\r\n        <div class=\"selected-option-container internal\" [ngClass]=\"{'skeleton-container':_isLoading()}\" *ngIf=\"iconPath\">\r\n            <span class=\"title internal\">\r\n                <img *ngIf=\"iconPath\" [src]=\"iconPath\" alt=\"icon\" class=\"icon\">\r\n\r\n                <span *ngIf=\"!narrowSelect\" [ngClass]=\"{'skeleton':_isLoading(), 'skeleton-text':_isLoading()}\">\r\n                    {{errorOccurred ? '\u05D4\u05EA\u05E8\u05D7\u05E9\u05D4 \u05E9\u05D2\u05D9\u05D0\u05D4' :title}}\r\n                </span>\r\n            </span>\r\n\r\n            <br *ngIf=\"!_isLoading()\">\r\n\r\n            <span class=\"selected-option internal\"\r\n                [ngClass]=\"{'skeleton':_isLoading(),'skeleton-text':_isLoading(), 'skeleton-selected-option':_isLoading()}\">\r\n                {{selectedOption ? selectedOption[displayBy] : title}}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"iconPath == ''\">\r\n            {{selectedOption ? selectedOption[displayBy] : placeholder }}\r\n        </ng-container>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\"\r\n                viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div #dropdown id=\"myDropdown\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"options?.length>2 || isAutoComplete\" class=\"input-filter\"\r\n            [type]=\"'search'\" [placeholder]=\"filterPlaceholder\" [debounceTime]=\"debounceTime\"\r\n            (click)=\"_onStopPropagation($event)\" (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n        <ng-container *ngFor=\"let option of isLoadingInput ? skeletonArray : filteredOptions; let index = index\">\r\n            <a (click)=\"_onSelectOption(option)\" id=\"select-{{index}}\"\r\n                [ngClass]=\"{'selected': isSelectedOption(option), 'skeleton skeleton-text m-3':isLoadingInput}\">\r\n                {{option[displayBy]}}</a>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"!filteredOptions?.length && !isLoadingInput\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".selected-option{color:var(--secondary-color);font-weight:lighter}.title{width:80%;font-weight:700}.skeleton-selected-option{width:80%}.skeleton-text{width:90%}.skeleton-container{gap:10px;display:flex;flex-direction:column;width:100%}.skeleton-container .title.internal{display:flex}.title.internal span{margin-top:5px;margin-right:5px}.narrow{max-width:unset!important;height:42px}.fill-container{display:flex;width:100%;height:100%}.fill-container .dropdown,.fill-container .dropdown button{width:100%;height:100%}:host:has(.fill-container){width:100%;display:flex}:host:has(.fill-container) #myDropdown{width:100%;position:absolute}:host:has(.fill-container) .drop-button{border-radius:0}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumSelectComponent, isStandalone: false, selector: "herum-select", inputs: { options: "options", displayBy: "displayBy", placeholder: "placeholder", selectedOption: "selectedOption", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", iconPath: "iconPath", isAutoComplete: "isAutoComplete", title: "title", size: "size", displayLoadingMode: "displayLoadingMode", isLoadingInput: "isLoadingInput", dropDownDirection: "dropDownDirection", filterPlaceholder: "filterPlaceholder", debounceTime: "debounceTime" }, outputs: { selectedOptionEmitter: "selectedOptionEmitter", filterTextEmitter: "filterTextEmitter" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onResize($event)" } }, providers: [CUSTOM_SELECT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "dropContainer", first: true, predicate: ["dropContainer"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\"\r\n    [ngClass]=\"{'w-100': size === 'responsive', 'fill-container':size === 'fill-container' }\"\r\n    (click)=\"toggleDropdown()\">\r\n    <button class=\"drop-button internal\" [class]=\"narrowSelect ? 'narrow' : size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\"\r\n        [ngStyle]=\" {'padding': iconPath ? '4px 12px 4px 4px' : null }\">\r\n        <div class=\"selected-option-container internal\" [ngClass]=\"{'skeleton-container':_isLoading()}\"\r\n            *ngIf=\"iconPath\">\r\n            <span class=\"title internal\">\r\n                <img *ngIf=\"iconPath\" [src]=\"iconPath\" alt=\"icon\" class=\"icon\">\r\n\r\n                <span *ngIf=\"!narrowSelect\" [ngClass]=\"{'skeleton':_isLoading(), 'skeleton-text':_isLoading()}\">\r\n                    {{errorOccurred ? '\u05D4\u05EA\u05E8\u05D7\u05E9\u05D4 \u05E9\u05D2\u05D9\u05D0\u05D4' :title}}\r\n                </span>\r\n            </span>\r\n\r\n            <br *ngIf=\"!_isLoading()\">\r\n\r\n            <span class=\"selected-option internal\"\r\n                [ngClass]=\"{'skeleton':_isLoading(),'skeleton-text':_isLoading(), 'skeleton-selected-option':_isLoading()}\">\r\n                {{selectedOption ? selectedOption[displayBy] : title}}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"iconPath == ''\">\r\n            {{selectedOption ? selectedOption[displayBy] : placeholder }}\r\n        </ng-container>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\"\r\n                viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div #dropdown id=\"myDropdown\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"options?.length>2 || isAutoComplete\" class=\"input-filter\"\r\n            [type]=\"'search'\" [placeholder]=\"filterPlaceholder\" [debounceTime]=\"debounceTime\"\r\n            (click)=\"_onStopPropagation($event)\" (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n        <ng-container *ngFor=\"let option of isLoadingInput ? skeletonArray : filteredOptions; let index = index\">\r\n            <a (click)=\"_onSelectOption(option)\" id=\"select-{{index}}\"\r\n                [ngClass]=\"{'selected': isSelectedOption(option), 'skeleton skeleton-text m-3':isLoadingInput}\">\r\n                {{option[displayBy]}}</a>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"!filteredOptions?.length && !isLoadingInput\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".selected-option{color:var(--secondary-color);font-weight:lighter}.title{width:80%;font-weight:700}.skeleton-selected-option{width:80%}.skeleton-text{width:90%}.skeleton-container{gap:10px;display:flex;flex-direction:column;width:100%}.skeleton-container .title.internal{display:flex}.title.internal span{margin-top:5px;margin-right:5px}.narrow{max-width:unset!important;height:42px}.fill-container{display:flex;width:100%;height:100%}.fill-container .dropdown,.fill-container .dropdown button{width:100%;height:100%}:host:has(.fill-container){width:100%;display:flex}:host:has(.fill-container) #myDropdown{width:100%;position:absolute}:host:has(.fill-container) .drop-button{border-radius:0}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-select', providers: [CUSTOM_SELECT_CONTROL_VALUE_ACCESSOR], animations: [openClose], template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\"\r\n    [ngClass]=\"{'w-100': size === 'responsive', 'fill-container':size === 'fill-container' }\"\r\n    (click)=\"toggleDropdown()\">\r\n    <button class=\"drop-button internal\" [class]=\"narrowSelect ? 'narrow' : size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\"\r\n        [ngStyle]=\" {'padding': iconPath ? '4px 12px 4px 4px' : null }\">\r\n        <div class=\"selected-option-container internal\" [ngClass]=\"{'skeleton-container':_isLoading()}\" *ngIf=\"iconPath\">\r\n            <span class=\"title internal\">\r\n                <img *ngIf=\"iconPath\" [src]=\"iconPath\" alt=\"icon\" class=\"icon\">\r\n\r\n                <span *ngIf=\"!narrowSelect\" [ngClass]=\"{'skeleton':_isLoading(), 'skeleton-text':_isLoading()}\">\r\n                    {{errorOccurred ? '\u05D4\u05EA\u05E8\u05D7\u05E9\u05D4 \u05E9\u05D2\u05D9\u05D0\u05D4' :title}}\r\n                </span>\r\n            </span>\r\n\r\n            <br *ngIf=\"!_isLoading()\">\r\n\r\n            <span class=\"selected-option internal\"\r\n                [ngClass]=\"{'skeleton':_isLoading(),'skeleton-text':_isLoading(), 'skeleton-selected-option':_isLoading()}\">\r\n                {{selectedOption ? selectedOption[displayBy] : title}}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"iconPath == ''\">\r\n            {{selectedOption ? selectedOption[displayBy] : placeholder }}\r\n        </ng-container>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\"\r\n                viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div #dropdown id=\"myDropdown\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"options?.length>2 || isAutoComplete\" class=\"input-filter\"\r\n            [type]=\"'search'\" [placeholder]=\"filterPlaceholder\" [debounceTime]=\"debounceTime\"\r\n            (click)=\"_onStopPropagation($event)\" (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n        <ng-container *ngFor=\"let option of isLoadingInput ? skeletonArray : filteredOptions; let index = index\">\r\n            <a (click)=\"_onSelectOption(option)\" id=\"select-{{index}}\"\r\n                [ngClass]=\"{'selected': isSelectedOption(option), 'skeleton skeleton-text m-3':isLoadingInput}\">\r\n                {{option[displayBy]}}</a>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"!filteredOptions?.length && !isLoadingInput\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".selected-option{color:var(--secondary-color);font-weight:lighter}.title{width:80%;font-weight:700}.skeleton-selected-option{width:80%}.skeleton-text{width:90%}.skeleton-container{gap:10px;display:flex;flex-direction:column;width:100%}.skeleton-container .title.internal{display:flex}.title.internal span{margin-top:5px;margin-right:5px}.narrow{max-width:unset!important;height:42px}.fill-container{display:flex;width:100%;height:100%}.fill-container .dropdown,.fill-container .dropdown button{width:100%;height:100%}:host:has(.fill-container){width:100%;display:flex}:host:has(.fill-container) #myDropdown{width:100%;position:absolute}:host:has(.fill-container) .drop-button{border-radius:0}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"] }]
+            args: [{ standalone: false, selector: 'herum-select', providers: [CUSTOM_SELECT_CONTROL_VALUE_ACCESSOR], animations: [openClose], template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\"\r\n    [ngClass]=\"{'w-100': size === 'responsive', 'fill-container':size === 'fill-container' }\"\r\n    (click)=\"toggleDropdown()\">\r\n    <button class=\"drop-button internal\" [class]=\"narrowSelect ? 'narrow' : size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\"\r\n        [ngStyle]=\" {'padding': iconPath ? '4px 12px 4px 4px' : null }\">\r\n        <div class=\"selected-option-container internal\" [ngClass]=\"{'skeleton-container':_isLoading()}\"\r\n            *ngIf=\"iconPath\">\r\n            <span class=\"title internal\">\r\n                <img *ngIf=\"iconPath\" [src]=\"iconPath\" alt=\"icon\" class=\"icon\">\r\n\r\n                <span *ngIf=\"!narrowSelect\" [ngClass]=\"{'skeleton':_isLoading(), 'skeleton-text':_isLoading()}\">\r\n                    {{errorOccurred ? '\u05D4\u05EA\u05E8\u05D7\u05E9\u05D4 \u05E9\u05D2\u05D9\u05D0\u05D4' :title}}\r\n                </span>\r\n            </span>\r\n\r\n            <br *ngIf=\"!_isLoading()\">\r\n\r\n            <span class=\"selected-option internal\"\r\n                [ngClass]=\"{'skeleton':_isLoading(),'skeleton-text':_isLoading(), 'skeleton-selected-option':_isLoading()}\">\r\n                {{selectedOption ? selectedOption[displayBy] : title}}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"iconPath == ''\">\r\n            {{selectedOption ? selectedOption[displayBy] : placeholder }}\r\n        </ng-container>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\"\r\n                viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div #dropdown id=\"myDropdown\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"options?.length>2 || isAutoComplete\" class=\"input-filter\"\r\n            [type]=\"'search'\" [placeholder]=\"filterPlaceholder\" [debounceTime]=\"debounceTime\"\r\n            (click)=\"_onStopPropagation($event)\" (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n        <ng-container *ngFor=\"let option of isLoadingInput ? skeletonArray : filteredOptions; let index = index\">\r\n            <a (click)=\"_onSelectOption(option)\" id=\"select-{{index}}\"\r\n                [ngClass]=\"{'selected': isSelectedOption(option), 'skeleton skeleton-text m-3':isLoadingInput}\">\r\n                {{option[displayBy]}}</a>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"!filteredOptions?.length && !isLoadingInput\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".selected-option{color:var(--secondary-color);font-weight:lighter}.title{width:80%;font-weight:700}.skeleton-selected-option{width:80%}.skeleton-text{width:90%}.skeleton-container{gap:10px;display:flex;flex-direction:column;width:100%}.skeleton-container .title.internal{display:flex}.title.internal span{margin-top:5px;margin-right:5px}.narrow{max-width:unset!important;height:42px}.fill-container{display:flex;width:100%;height:100%}.fill-container .dropdown,.fill-container .dropdown button{width:100%;height:100%}:host:has(.fill-container){width:100%;display:flex}:host:has(.fill-container) #myDropdown{width:100%;position:absolute}:host:has(.fill-container) .drop-button{border-radius:0}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], displayBy: [{
@@ -1875,11 +1857,11 @@ class HerumTextAreaComponent {
         return svgsStrings.X;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTextAreaComponent, isStandalone: false, selector: "herum-text-area", inputs: { placeholder: "placeholder", disabled: "disabled", formControlName: "formControlName", isValid: "isValid", isLoading: "isLoading", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", id: "id", preventMacroKeysPressEvent: "preventMacroKeysPressEvent", heightMode: "heightMode", fontSize: "fontSize", inputValue: "inputValue", maxLength: "maxLength" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [maxlength]=\"maxLength\"\r\n        [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HerumSpinnerComponent, selector: "herum-spinner", inputs: ["size", "borderColor", "borderWidth", "borderTopColor", "shape"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTextAreaComponent, isStandalone: false, selector: "herum-text-area", inputs: { placeholder: "placeholder", disabled: "disabled", formControlName: "formControlName", isValid: "isValid", isLoading: "isLoading", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", id: "id", preventMacroKeysPressEvent: "preventMacroKeysPressEvent", heightMode: "heightMode", fontSize: "fontSize", inputValue: "inputValue", maxLength: "maxLength" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\"\r\n        [maxlength]=\"maxLength\" [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HerumSpinnerComponent, selector: "herum-spinner", inputs: ["size", "borderColor", "borderWidth", "borderTopColor", "shape"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-text-area', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [maxlength]=\"maxLength\"\r\n        [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"] }]
+            args: [{ standalone: false, selector: 'herum-text-area', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\"\r\n        [maxlength]=\"maxLength\" [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], disabled: [{
@@ -1988,15 +1970,15 @@ class HerumTimePickerComponent {
     scrollToSelectedTime(type, index) {
         let column;
         switch (type) {
-            case TimeUnit.hours:
+            case 0 /* TimeUnit.hours */:
                 column = this.hoursColumn;
                 this.selectedHour = index;
                 break;
-            case TimeUnit.minutes:
+            case 1 /* TimeUnit.minutes */:
                 column = this.minutesColumn;
                 this.selectedMinute = index;
                 break;
-            case TimeUnit.seconds:
+            case 2 /* TimeUnit.seconds */:
                 column = this.secondsColumn;
                 this.selectedSecond = index;
                 break;
@@ -2010,10 +1992,10 @@ class HerumTimePickerComponent {
     }
     handleScrollToSelectedTime(selectedTime) {
         const [hours, minutes, seconds] = selectedTime.split(':').map(Number);
-        this.scrollToSelectedTime(TimeUnit.minutes, minutes);
-        this.scrollToSelectedTime(TimeUnit.hours, hours);
+        this.scrollToSelectedTime(1 /* TimeUnit.minutes */, minutes);
+        this.scrollToSelectedTime(0 /* TimeUnit.hours */, hours);
         if (this.showSeconds)
-            this.scrollToSelectedTime(TimeUnit.seconds, seconds);
+            this.scrollToSelectedTime(2 /* TimeUnit.seconds */, seconds);
     }
     calculateColumnHeight() {
         const randomColumnElement = this.hoursColumn?.nativeElement;
@@ -2097,11 +2079,11 @@ class HerumToggleButtonComponent {
         this.onTouched = fn;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumToggleButtonComponent, isStandalone: false, selector: "herum-toggle-button", inputs: { options: "options", selectedOption: "selectedOption", disabled: "disabled" }, outputs: { onSelectedOption: "onSelectedOption" }, providers: [CUSTOM_TOGGLE_BUTTON_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle-container\">\r\n    <div *ngFor=\"let option of options; let i = index\">\r\n        <button [value]=\"i\" (click)=\"toggleOption(i)\" class=\"small\" type=\"button\"\r\n            [class.primary]=\"isOptionSelected(i)\" [disabled]=\"disabled\">\r\n            {{option}}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".toggle-container{display:flex;background-color:var(--panels-fill-color);width:fit-content;padding:4px;border-radius:var(--border-radius);transition:background-color 4.3s ease-in-out;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button{padding:10px;cursor:pointer;color:var(--text-color);border:none;border-radius:var(--border-radius);background-color:transparent;transition:background-color 4.3s ease-in-out}button.primary{background-color:var(--primary-color);color:#fff}.small{box-shadow:none!important}.border-right{border-right:1px solid var(--chips-divider-color)}.hidden-input{display:none}\n", "button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumToggleButtonComponent, isStandalone: false, selector: "herum-toggle-button", inputs: { options: "options", selectedOption: "selectedOption", disabled: "disabled" }, outputs: { onSelectedOption: "onSelectedOption" }, providers: [CUSTOM_TOGGLE_BUTTON_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle-container\">\r\n    <div *ngFor=\"let option of options; let i = index\">\r\n        <button [value]=\"i\" (click)=\"toggleOption(i)\" class=\"small\" type=\"button\"\r\n            [class.primary]=\"isOptionSelected(i)\" [disabled]=\"disabled\">\r\n            {{option}}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".toggle-container{display:flex;background-color:var(--panels-fill-color);width:fit-content;padding:4px;border-radius:var(--border-radius);transition:background-color 4.3s ease-in-out;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button{padding:10px;cursor:pointer;color:var(--text-color);border:none;border-radius:var(--border-radius);background-color:transparent;transition:background-color 4.3s ease-in-out}button.primary{background-color:var(--primary-color);color:#fff}.small{box-shadow:none!important}.border-right{border-right:1px solid var(--chips-divider-color)}.hidden-input{display:none}\n", "button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important;stroke:var(--secondary-color)}.ghost:hover:not([disabled]){color:var(--lighter-secondary-color);stroke:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color);stroke:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-toggle-button', providers: [CUSTOM_TOGGLE_BUTTON_CONTROL_VALUE_ACCESSOR], template: "<div class=\"toggle-container\">\r\n    <div *ngFor=\"let option of options; let i = index\">\r\n        <button [value]=\"i\" (click)=\"toggleOption(i)\" class=\"small\" type=\"button\"\r\n            [class.primary]=\"isOptionSelected(i)\" [disabled]=\"disabled\">\r\n            {{option}}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".toggle-container{display:flex;background-color:var(--panels-fill-color);width:fit-content;padding:4px;border-radius:var(--border-radius);transition:background-color 4.3s ease-in-out;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button{padding:10px;cursor:pointer;color:var(--text-color);border:none;border-radius:var(--border-radius);background-color:transparent;transition:background-color 4.3s ease-in-out}button.primary{background-color:var(--primary-color);color:#fff}.small{box-shadow:none!important}.border-right{border-right:1px solid var(--chips-divider-color)}.hidden-input{display:none}\n", "button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"] }]
+            args: [{ standalone: false, selector: 'herum-toggle-button', providers: [CUSTOM_TOGGLE_BUTTON_CONTROL_VALUE_ACCESSOR], template: "<div class=\"toggle-container\">\r\n    <div *ngFor=\"let option of options; let i = index\">\r\n        <button [value]=\"i\" (click)=\"toggleOption(i)\" class=\"small\" type=\"button\"\r\n            [class.primary]=\"isOptionSelected(i)\" [disabled]=\"disabled\">\r\n            {{option}}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".toggle-container{display:flex;background-color:var(--panels-fill-color);width:fit-content;padding:4px;border-radius:var(--border-radius);transition:background-color 4.3s ease-in-out;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button{padding:10px;cursor:pointer;color:var(--text-color);border:none;border-radius:var(--border-radius);background-color:transparent;transition:background-color 4.3s ease-in-out}button.primary{background-color:var(--primary-color);color:#fff}.small{box-shadow:none!important}.border-right{border-right:1px solid var(--chips-divider-color)}.hidden-input{display:none}\n", "button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important;stroke:var(--secondary-color)}.ghost:hover:not([disabled]){color:var(--lighter-secondary-color);stroke:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color);stroke:var(--disabled-text-color)}.error{background:var(--error-color)}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], selectedOption: [{
@@ -2155,11 +2137,12 @@ class HerumUploadFileComponent {
     _onDrop(event) {
         this._onPreventDefault(event);
         event.stopPropagation();
-        const fileList = Array.from(event.dataTransfer.files);
+        const fileList = event.dataTransfer.files;
         this.uploadName = event.dataTransfer?.files[0]?.name;
         this._onUploadFile(fileList);
     }
-    _onUploadFile(files) {
+    _onUploadFile(fileList) {
+        let files = Array.from(fileList);
         if (!files.length)
             return;
         this.files = [];
@@ -2181,9 +2164,9 @@ class HerumUploadFileComponent {
                 this.uploadName = files[0]?.webkitRelativePath?.split('/')[0] || '';
         }
         this.getIconPath();
-        this.files = files;
-        this.uploadFile.emit(this.files);
-        this.onChange(this.files);
+        this.files = Array.from(files);
+        this.uploadFile.emit(files);
+        this.onChange(files);
         this.formControl?.setErrors(null);
     }
     setExistingFile() {
@@ -2275,11 +2258,11 @@ class HerumUploadFileComponent {
         return this.parentForm?.control.get(this.formControlName);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUploadFileComponent, deps: [{ token: ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUploadFileComponent, isStandalone: false, selector: "herum-upload-file", inputs: { size: "size", placeholder: "placeholder", isDirectoryMode: "isDirectoryMode", allowedFileTypes: "allowedFileTypes", selectedFile: "selectedFile", formControlName: "formControlName", isEditMode: "isEditMode" }, outputs: { uploadFile: "uploadFile" }, providers: [CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button svgOnHover class=\"upload-file-button upload-file-border\" [class]=\"size\" (click)=\"fileInput.click()\"\r\n    (drop)=\"_onDrop($event)\" (dragover)=\"_onPreventDefault($event)\">\r\n    <ng-container *ngIf=\"!hasTouched && !files\">\r\n        <div class=\"placeholder-container\">\r\n            <span class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n            <span dir=\"rtl\" class=\"button-placeholder\">{{placeholder}}</span>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <span class=\"error\" *ngIf=\"hasTouched && !files\">\r\n        \u05D7\u05D5\u05D1\u05D4 \u05DC\u05D4\u05E2\u05DC\u05D5\u05EA \u05E7\u05D5\u05D1\u05E5\r\n    </span>\r\n\r\n    <div svgOnHover *ngIf=\"files?.length>=0\" class=\"file-container\">\r\n        <span *ngIf=\"files?.length>0\" class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"!isDirectoryMode\">\r\n            <span #fileName class=\"file-name\" *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(fileName) ? uploadName : ''\">\r\n                {{uploadName | ellipsis:fileName}}\r\n            </span>\r\n\r\n            <img class=\"delete-button\" *ngIf=\"files?.length\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isFileTypeAllowed()\">\u05E1\u05D5\u05D2 \u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05DE\u05D5\u05E8\u05E9\u05D4/\u05EA\u05E7\u05D9\u05DF</span>\r\n        </ng-container>\r\n\r\n        <ng-container class=\"cursor-pointer\" *ngIf=\"isDirectoryMode\">\r\n            <span class=\"directory-name-upload\" #directoryNameUpload *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(directoryNameUpload) ? directoryName : ''\">\r\n                {{directoryName | ellipsis:directoryNameUpload}}\r\n            </span>\r\n\r\n            <img *ngIf=\"files?.length\" class=\"delete-button\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isValidirectory\">\u05D4\u05EA\u05D9\u05D9\u05E7\u05D9\u05D4 \u05D0\u05D9\u05E0\u05D4 \u05E1\u05D8\u05D5\u05E8\u05D9</span>\r\n        </ng-container>\r\n    </div>\r\n</button>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"getAcceptValue(allowedFileTypes)\"\r\n    [attr.webkitDirectory]=\"isDirectoryMode ? '' : null\" (change)=\"_onUploadFile($event.target.files)\"\r\n    (cancel)=\"_onCancelUploadFile()\">", styles: [":host{padding:0}.upload-file-button{height:var(--atom-input-height);cursor:pointer;position:relative;color:var(--title-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px)}.file-name{padding-left:12px}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUploadFileComponent, isStandalone: false, selector: "herum-upload-file", inputs: { size: "size", placeholder: "placeholder", isDirectoryMode: "isDirectoryMode", allowedFileTypes: "allowedFileTypes", selectedFile: "selectedFile", formControlName: "formControlName", isEditMode: "isEditMode" }, outputs: { uploadFile: "uploadFile" }, providers: [CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button svgOnHover class=\"upload-file-button upload-file-border\" [class]=\"size\" (click)=\"fileInput.click()\"\r\n    (drop)=\"_onDrop($event)\" (dragover)=\"_onPreventDefault($event)\">\r\n    <ng-container *ngIf=\"!hasTouched && !files\">\r\n        <div class=\"placeholder-container\">\r\n            <span class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n            <span dir=\"rtl\" class=\"button-placeholder\">{{ placeholder }}</span>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <span class=\"error\" *ngIf=\"hasTouched && !files\">\r\n        \u05D7\u05D5\u05D1\u05D4 \u05DC\u05D4\u05E2\u05DC\u05D5\u05EA \u05E7\u05D5\u05D1\u05E5\r\n    </span>\r\n\r\n    <div svgOnHover *ngIf=\"files?.length>=0\" class=\"file-container\">\r\n        <span *ngIf=\"files?.length>0\" class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"!isDirectoryMode\">\r\n            <span #fileName class=\"file-name\" *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(fileName) ? uploadName : ''\">\r\n                {{ uploadName | ellipsis:fileName }}\r\n            </span>\r\n\r\n            <img class=\"delete-button\" *ngIf=\"files?.length\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isFileTypeAllowed()\">\u05E1\u05D5\u05D2 \u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05DE\u05D5\u05E8\u05E9\u05D4/\u05EA\u05E7\u05D9\u05DF</span>\r\n        </ng-container>\r\n\r\n        <ng-container class=\"cursor-pointer\" *ngIf=\"isDirectoryMode\">\r\n            <span class=\"directory-name-upload\" #directoryNameUpload *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(directoryNameUpload) ? directoryName : ''\">\r\n                {{ directoryName | ellipsis:directoryNameUpload }}\r\n            </span>\r\n\r\n            <img *ngIf=\"files?.length\" class=\"delete-button\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isValidirectory\">\u05D4\u05EA\u05D9\u05D9\u05E7\u05D9\u05D4 \u05D0\u05D9\u05E0\u05D4 \u05E1\u05D8\u05D5\u05E8\u05D9</span>\r\n        </ng-container>\r\n    </div>\r\n</button>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"getAcceptValue(allowedFileTypes)\"\r\n    [attr.webkitDirectory]=\"isDirectoryMode ? '' : null\" (change)=\"_onUploadFile($event.target.files)\"\r\n    (cancel)=\"_onCancelUploadFile()\">", styles: [":host{padding:0}.upload-file-button{height:var(--atom-input-height);cursor:pointer;position:relative;color:var(--text-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px);white-space:nowrap}.file-name{padding-left:var(--standard-padding)}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUploadFileComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-upload-file', providers: [CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR], template: "<button svgOnHover class=\"upload-file-button upload-file-border\" [class]=\"size\" (click)=\"fileInput.click()\"\r\n    (drop)=\"_onDrop($event)\" (dragover)=\"_onPreventDefault($event)\">\r\n    <ng-container *ngIf=\"!hasTouched && !files\">\r\n        <div class=\"placeholder-container\">\r\n            <span class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n            <span dir=\"rtl\" class=\"button-placeholder\">{{placeholder}}</span>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <span class=\"error\" *ngIf=\"hasTouched && !files\">\r\n        \u05D7\u05D5\u05D1\u05D4 \u05DC\u05D4\u05E2\u05DC\u05D5\u05EA \u05E7\u05D5\u05D1\u05E5\r\n    </span>\r\n\r\n    <div svgOnHover *ngIf=\"files?.length>=0\" class=\"file-container\">\r\n        <span *ngIf=\"files?.length>0\" class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"!isDirectoryMode\">\r\n            <span #fileName class=\"file-name\" *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(fileName) ? uploadName : ''\">\r\n                {{uploadName | ellipsis:fileName}}\r\n            </span>\r\n\r\n            <img class=\"delete-button\" *ngIf=\"files?.length\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isFileTypeAllowed()\">\u05E1\u05D5\u05D2 \u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05DE\u05D5\u05E8\u05E9\u05D4/\u05EA\u05E7\u05D9\u05DF</span>\r\n        </ng-container>\r\n\r\n        <ng-container class=\"cursor-pointer\" *ngIf=\"isDirectoryMode\">\r\n            <span class=\"directory-name-upload\" #directoryNameUpload *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(directoryNameUpload) ? directoryName : ''\">\r\n                {{directoryName | ellipsis:directoryNameUpload}}\r\n            </span>\r\n\r\n            <img *ngIf=\"files?.length\" class=\"delete-button\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isValidirectory\">\u05D4\u05EA\u05D9\u05D9\u05E7\u05D9\u05D4 \u05D0\u05D9\u05E0\u05D4 \u05E1\u05D8\u05D5\u05E8\u05D9</span>\r\n        </ng-container>\r\n    </div>\r\n</button>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"getAcceptValue(allowedFileTypes)\"\r\n    [attr.webkitDirectory]=\"isDirectoryMode ? '' : null\" (change)=\"_onUploadFile($event.target.files)\"\r\n    (cancel)=\"_onCancelUploadFile()\">", styles: [":host{padding:0}.upload-file-button{height:var(--atom-input-height);cursor:pointer;position:relative;color:var(--title-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px)}.file-name{padding-left:12px}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"] }]
+            args: [{ standalone: false, selector: 'herum-upload-file', providers: [CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR], template: "<button svgOnHover class=\"upload-file-button upload-file-border\" [class]=\"size\" (click)=\"fileInput.click()\"\r\n    (drop)=\"_onDrop($event)\" (dragover)=\"_onPreventDefault($event)\">\r\n    <ng-container *ngIf=\"!hasTouched && !files\">\r\n        <div class=\"placeholder-container\">\r\n            <span class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n            <span dir=\"rtl\" class=\"button-placeholder\">{{ placeholder }}</span>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <span class=\"error\" *ngIf=\"hasTouched && !files\">\r\n        \u05D7\u05D5\u05D1\u05D4 \u05DC\u05D4\u05E2\u05DC\u05D5\u05EA \u05E7\u05D5\u05D1\u05E5\r\n    </span>\r\n\r\n    <div svgOnHover *ngIf=\"files?.length>=0\" class=\"file-container\">\r\n        <span *ngIf=\"files?.length>0\" class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"!isDirectoryMode\">\r\n            <span #fileName class=\"file-name\" *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(fileName) ? uploadName : ''\">\r\n                {{ uploadName | ellipsis:fileName }}\r\n            </span>\r\n\r\n            <img class=\"delete-button\" *ngIf=\"files?.length\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isFileTypeAllowed()\">\u05E1\u05D5\u05D2 \u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05DE\u05D5\u05E8\u05E9\u05D4/\u05EA\u05E7\u05D9\u05DF</span>\r\n        </ng-container>\r\n\r\n        <ng-container class=\"cursor-pointer\" *ngIf=\"isDirectoryMode\">\r\n            <span class=\"directory-name-upload\" #directoryNameUpload *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(directoryNameUpload) ? directoryName : ''\">\r\n                {{ directoryName | ellipsis:directoryNameUpload }}\r\n            </span>\r\n\r\n            <img *ngIf=\"files?.length\" class=\"delete-button\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isValidirectory\">\u05D4\u05EA\u05D9\u05D9\u05E7\u05D9\u05D4 \u05D0\u05D9\u05E0\u05D4 \u05E1\u05D8\u05D5\u05E8\u05D9</span>\r\n        </ng-container>\r\n    </div>\r\n</button>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"getAcceptValue(allowedFileTypes)\"\r\n    [attr.webkitDirectory]=\"isDirectoryMode ? '' : null\" (change)=\"_onUploadFile($event.target.files)\"\r\n    (cancel)=\"_onCancelUploadFile()\">", styles: [":host{padding:0}.upload-file-button{height:var(--atom-input-height);cursor:pointer;position:relative;color:var(--text-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px);white-space:nowrap}.file-name{padding-left:var(--standard-padding)}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -2353,11 +2336,11 @@ class HerumVideoSelectComponent {
         window.removeEventListener('click', (event) => this.closeDropup(event));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumVideoSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumVideoSelectComponent, isStandalone: false, selector: "herum-video-select", inputs: { currentVideoSpeed: "currentVideoSpeed", options: "options" }, outputs: { selectedOptionEmitter: "selectedOptionEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropup internal\" dir=\"rtl\" (click)=\"_onToggleDropup()\">\r\n    <button class=\"drop-button internal selected\"\r\n        [ngClass]=\"{'open-drop-button': show(), 'displayed-selected-option':selectedOption }\">\r\n        {{selectedOption ? selectedOption +'X' : '1X'}}\r\n    </button>\r\n\r\n    <div id=\"myDropup\" [ngClass]=\"{'dropup-content': true, 'show': show()}\">\r\n        <a *ngFor=\"let option of options; let i=index\" (click)=\"selectOption(i)\"\r\n            [ngClass]=\"{'selected': isSelectedOption(i)}\">\r\n            {{option}}X\r\n        </a>\r\n    </div>\r\n</div>", styles: [".drop-button{background-color:transparent;color:var(--disabled-text-color);border:none;cursor:pointer;text-align:center;font-size:var(--standard-font-size);width:40px;padding-block:4px}.dropup{position:relative;display:inline-block}.dropup-content{display:none;background-color:var(--tooltip-background-color);position:absolute;right:-3px;min-width:100%;overflow:auto;border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:0 1px 4px #0000002b;z-index:1;top:6%;transform:translateY(-100%)}.dropup-content a{color:var(--light-text-color);padding:8px 7px;text-decoration:none;display:block;font-size:var(--standard-font-size);text-align:center}.dropup-content a:hover{cursor:pointer}.show{display:block}.selected{color:var(--icons-color)!important;font-weight:bolder}.displayed-selected-option{color:var(--text-color)}.selected-option{color:var(--primary-color)}.title{width:80%;font-weight:700}#myDropup{z-index:10}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumVideoSelectComponent, isStandalone: false, selector: "herum-video-select", inputs: { currentVideoSpeed: "currentVideoSpeed", options: "options" }, outputs: { selectedOptionEmitter: "selectedOptionEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropup internal\" dir=\"rtl\" (click)=\"_onToggleDropup()\">\r\n    <button class=\"drop-button internal selected\"\r\n        [ngClass]=\"{'open-drop-button': show(), 'displayed-selected-option':selectedOption }\">\r\n        {{selectedOption ? selectedOption +'X' : '1X'}}\r\n    </button>\r\n\r\n    <div id=\"myDropup\" [ngClass]=\"{'dropup-content': true, 'show': show()}\">\r\n        <a *ngFor=\"let option of options; let i=index\" (click)=\"selectOption(i)\"\r\n            [ngClass]=\"{'selected': isSelectedOption(i)}\">\r\n            {{option}}X\r\n        </a>\r\n    </div>\r\n</div>", styles: [".drop-button{background-color:transparent;color:var(--disabled-text-color);border:none;cursor:pointer;text-align:center;font-size:var(--standard-font-size);width:40px;padding-block:4px}.dropup{position:relative;display:inline-block}.dropup-content{display:none;background-color:var(--tooltip-background-color);position:absolute;right:-3px;min-width:100%;overflow:auto;border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:0 1px 4px #0000002b;z-index:1;top:6%;transform:translateY(-100%)}.dropup-content a{color:var(--light-text-color);padding:8px 7px;text-decoration:none;display:block;font-size:var(--standard-font-size);text-align:center}.dropup-content a:hover{cursor:pointer}.show{display:block}.selected{color:var(--icons-color)!important;font-weight:bolder}.displayed-selected-option{color:var(--text-color)}.selected-option{color:var(--primary-color)}.title{width:80%;font-weight:700}#myDropup{z-index:10;overflow-y:auto;max-height:300px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumVideoSelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-video-select', template: "<div class=\"dropup internal\" dir=\"rtl\" (click)=\"_onToggleDropup()\">\r\n    <button class=\"drop-button internal selected\"\r\n        [ngClass]=\"{'open-drop-button': show(), 'displayed-selected-option':selectedOption }\">\r\n        {{selectedOption ? selectedOption +'X' : '1X'}}\r\n    </button>\r\n\r\n    <div id=\"myDropup\" [ngClass]=\"{'dropup-content': true, 'show': show()}\">\r\n        <a *ngFor=\"let option of options; let i=index\" (click)=\"selectOption(i)\"\r\n            [ngClass]=\"{'selected': isSelectedOption(i)}\">\r\n            {{option}}X\r\n        </a>\r\n    </div>\r\n</div>", styles: [".drop-button{background-color:transparent;color:var(--disabled-text-color);border:none;cursor:pointer;text-align:center;font-size:var(--standard-font-size);width:40px;padding-block:4px}.dropup{position:relative;display:inline-block}.dropup-content{display:none;background-color:var(--tooltip-background-color);position:absolute;right:-3px;min-width:100%;overflow:auto;border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:0 1px 4px #0000002b;z-index:1;top:6%;transform:translateY(-100%)}.dropup-content a{color:var(--light-text-color);padding:8px 7px;text-decoration:none;display:block;font-size:var(--standard-font-size);text-align:center}.dropup-content a:hover{cursor:pointer}.show{display:block}.selected{color:var(--icons-color)!important;font-weight:bolder}.displayed-selected-option{color:var(--text-color)}.selected-option{color:var(--primary-color)}.title{width:80%;font-weight:700}#myDropup{z-index:10}\n"] }]
+            args: [{ standalone: false, selector: 'herum-video-select', template: "<div class=\"dropup internal\" dir=\"rtl\" (click)=\"_onToggleDropup()\">\r\n    <button class=\"drop-button internal selected\"\r\n        [ngClass]=\"{'open-drop-button': show(), 'displayed-selected-option':selectedOption }\">\r\n        {{selectedOption ? selectedOption +'X' : '1X'}}\r\n    </button>\r\n\r\n    <div id=\"myDropup\" [ngClass]=\"{'dropup-content': true, 'show': show()}\">\r\n        <a *ngFor=\"let option of options; let i=index\" (click)=\"selectOption(i)\"\r\n            [ngClass]=\"{'selected': isSelectedOption(i)}\">\r\n            {{option}}X\r\n        </a>\r\n    </div>\r\n</div>", styles: [".drop-button{background-color:transparent;color:var(--disabled-text-color);border:none;cursor:pointer;text-align:center;font-size:var(--standard-font-size);width:40px;padding-block:4px}.dropup{position:relative;display:inline-block}.dropup-content{display:none;background-color:var(--tooltip-background-color);position:absolute;right:-3px;min-width:100%;overflow:auto;border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:0 1px 4px #0000002b;z-index:1;top:6%;transform:translateY(-100%)}.dropup-content a{color:var(--light-text-color);padding:8px 7px;text-decoration:none;display:block;font-size:var(--standard-font-size);text-align:center}.dropup-content a:hover{cursor:pointer}.show{display:block}.selected{color:var(--icons-color)!important;font-weight:bolder}.displayed-selected-option{color:var(--text-color)}.selected-option{color:var(--primary-color)}.title{width:80%;font-weight:700}#myDropup{z-index:10;overflow-y:auto;max-height:300px}\n"] }]
         }], propDecorators: { currentVideoSpeed: [{
                 type: Input
             }], options: [{
@@ -2372,7 +2355,6 @@ const CUSTOM_RADIO_BUTTON_CONTROL_VALUE_ACCESSOR = {
     multi: true,
 };
 class HerumRadioButtonComponent {
-    environmentConfig;
     options = [];
     isValid = false;
     errorMsg = '';
@@ -2388,14 +2370,11 @@ class HerumRadioButtonComponent {
     isSelectedOptionFocused = false;
     isOptionFocused = false;
     focusedIdOption;
-    constructor(environmentConfig) {
-        this.environmentConfig = environmentConfig;
-    }
     ngOnChanges(changes) {
         if (changes['selectedOption']?.currentValue)
             this.selectedOptionId = changes['selectedOption'].currentValue;
         if (changes['type']?.currentValue)
-            changes['type'].currentValue === this.environmentConfig?.radioButtonTypes?.disabled ? this.isBlocked = true : null;
+            changes['type'].currentValue === radioButtonTypes?.disabled ? this.isBlocked = true : null;
     }
     _onSelect(option) {
         if (this.isBlocked)
@@ -2406,7 +2385,7 @@ class HerumRadioButtonComponent {
     }
     getRadioButtonClasses(id) {
         let classes = this.isBlocked ? 'not-clickable ' : '';
-        if (this.type === this.environmentConfig?.radioButtonTypes?.disabled && !this.selectedOption)
+        if (this.type === radioButtonTypes?.disabled && !this.selectedOption)
             return classes += this.setAllButtonsToDisabled(classes, id);
         if (id === this.selectedOptionId)
             classes += this.setSelectedButton(classes);
@@ -2426,11 +2405,11 @@ class HerumRadioButtonComponent {
     }
     getRadioButtonInnerCircleClasses(id) {
         let classes = ``;
-        if (this.type === this.environmentConfig?.radioButtonTypes?.disabled && !this.selectedOption)
+        if (this.type === radioButtonTypes?.disabled && !this.selectedOption)
             return `${this.type}-background ${this.type}-inner-circle`;
         if (id === this.selectedOptionId)
             classes += this.type ? `${this.type}-background  ` : 'checked-background ';
-        classes += this.type === this.environmentConfig?.radioButtonTypes?.disabled || this.type === this.environmentConfig?.radioButtonTypes?.completed ? `${this.type}-inner-circle  ` : 'default-inner-circle ';
+        classes += this.type === radioButtonTypes?.disabled || this.type === radioButtonTypes?.completed ? `${this.type}-inner-circle  ` : 'default-inner-circle ';
         return classes.trim();
     }
     _isRadioButtonFocused(id, value) {
@@ -2459,16 +2438,13 @@ class HerumRadioButtonComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumRadioButtonComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumRadioButtonComponent, isStandalone: false, selector: "herum-radio-button", inputs: { options: "options", isValid: "isValid", errorMsg: "errorMsg", isVertical: "isVertical", isBlocked: "isBlocked", type: "type", selectedOption: "selectedOption", additionalOptionsText: "additionalOptionsText", showAdditionalOptionsText: "showAdditionalOptionsText", secondarySelectedOption: "secondarySelectedOption" }, outputs: { selectOptionEmitter: "selectOptionEmitter" }, providers: [CUSTOM_RADIO_BUTTON_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<div class=\"options-container\" [ngClass]=\"{'direction-column':isVertical}\">\r\n  <label class=\"label\" *ngFor=\"let option of options ;let i = index\">\r\n    <div class=\"option\" [attr.includes-additional-option-text]=\" additionalOptionsText[i] ? 'true' : 'false'\"\r\n      [attr.type]=\"selectedOptionId===option.id ? type+'-selected': secondarySelectedOption?.id===option.id ? 'checked' : ''\">\r\n      <div class=\"radio-container\" [ngClass]=\"getRadioButtonClasses(option.id)\" [tabindex]=\"'radio-' + i\"\r\n        id=\"radio-{{option.id}}\" (click)=\"_onSelect(option)\" (blur)=\"_isRadioButtonFocused(option.id,false)\">\r\n        <div class=\"inner-circle\" [ngClass]=\"getRadioButtonInnerCircleClasses(option.id)\">\r\n        </div>\r\n      </div>\r\n\r\n      <span class=\"option-name\" [attr.type]=\"type\" [ngClass]=\"{'cursor-pointer':type===undefined}\"\r\n        (click)=\"_onSelect(option)\">\r\n        {{option?.name }}\r\n      </span>\r\n    </div>\r\n\r\n    <span *ngIf=\"additionalOptionsText[i] && showAdditionalOptionsText\" class=\"additional-option-text\">\r\n      {{ additionalOptionsText[i] }}\r\n    </span>\r\n  </label>\r\n</div>", styles: [":host{width:100%}label{display:inline-flex;align-items:center;gap:8px;margin:0}label .option{display:flex;align-items:center;gap:8px}.options-container{display:flex;flex-direction:row;gap:8px}.radio-container{position:relative;--size: 14px;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;transition:.3s;cursor:pointer}.radio-container:focus{outline:none}.error-focused-radio{border-color:var(--error-color);box-shadow:0 0 5px var(--error-color)}.disabled-focused-radio{border-color:var(--disabled-border-color);box-shadow:0 0 5px var(--disabled-border-color)}.default-focused-radio{border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.inner-circle{position:absolute;border-radius:50%}.default-inner-circle{width:50%;height:50%;top:50%;transform:translate(-50%,-50%)}.disabled-inner-circle,.completed-inner-circle{width:100%;height:100%;top:0%}.checked-background{background-color:var(--icons-color)}.error-background{background-color:var(--error-color)}.completed-background{background-color:#00f;background-image:url(/assets/shared/icons/bigV.svg);background-repeat:no-repeat;background-position:center}.default-background{background-color:var(--error-color)}.disabled-background{background:var(--disabled-background-color);opacity:.5}.checked-border{border:calc(var(--size) / 10) solid var(--icons-color)}.error-border{border:calc(var(--size) / 10) solid var(--error-color)}.disabled-border{border:calc(var(--size) / 10) solid var(--disabled-border-color)}.completed-border{border:blue}input[type=radio]{--size: 16px;position:relative;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-size:inherit;transition:.3s}.direction-column{flex-direction:column}@media print{input[type=radio]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:none}}.additional-option-text{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumRadioButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-radio-button', providers: [CUSTOM_RADIO_BUTTON_CONTROL_VALUE_ACCESSOR], template: "<div class=\"options-container\" [ngClass]=\"{'direction-column':isVertical}\">\r\n  <label class=\"label\" *ngFor=\"let option of options ;let i = index\">\r\n    <div class=\"option\" [attr.includes-additional-option-text]=\" additionalOptionsText[i] ? 'true' : 'false'\"\r\n      [attr.type]=\"selectedOptionId===option.id ? type+'-selected': secondarySelectedOption?.id===option.id ? 'checked' : ''\">\r\n      <div class=\"radio-container\" [ngClass]=\"getRadioButtonClasses(option.id)\" [tabindex]=\"'radio-' + i\"\r\n        id=\"radio-{{option.id}}\" (click)=\"_onSelect(option)\" (blur)=\"_isRadioButtonFocused(option.id,false)\">\r\n        <div class=\"inner-circle\" [ngClass]=\"getRadioButtonInnerCircleClasses(option.id)\">\r\n        </div>\r\n      </div>\r\n\r\n      <span class=\"option-name\" [attr.type]=\"type\" [ngClass]=\"{'cursor-pointer':type===undefined}\"\r\n        (click)=\"_onSelect(option)\">\r\n        {{option?.name }}\r\n      </span>\r\n    </div>\r\n\r\n    <span *ngIf=\"additionalOptionsText[i] && showAdditionalOptionsText\" class=\"additional-option-text\">\r\n      {{ additionalOptionsText[i] }}\r\n    </span>\r\n  </label>\r\n</div>", styles: [":host{width:100%}label{display:inline-flex;align-items:center;gap:8px;margin:0}label .option{display:flex;align-items:center;gap:8px}.options-container{display:flex;flex-direction:row;gap:8px}.radio-container{position:relative;--size: 14px;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;transition:.3s;cursor:pointer}.radio-container:focus{outline:none}.error-focused-radio{border-color:var(--error-color);box-shadow:0 0 5px var(--error-color)}.disabled-focused-radio{border-color:var(--disabled-border-color);box-shadow:0 0 5px var(--disabled-border-color)}.default-focused-radio{border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.inner-circle{position:absolute;border-radius:50%}.default-inner-circle{width:50%;height:50%;top:50%;transform:translate(-50%,-50%)}.disabled-inner-circle,.completed-inner-circle{width:100%;height:100%;top:0%}.checked-background{background-color:var(--icons-color)}.error-background{background-color:var(--error-color)}.completed-background{background-color:#00f;background-image:url(/assets/shared/icons/bigV.svg);background-repeat:no-repeat;background-position:center}.default-background{background-color:var(--error-color)}.disabled-background{background:var(--disabled-background-color);opacity:.5}.checked-border{border:calc(var(--size) / 10) solid var(--icons-color)}.error-border{border:calc(var(--size) / 10) solid var(--error-color)}.disabled-border{border:calc(var(--size) / 10) solid var(--disabled-border-color)}.completed-border{border:blue}input[type=radio]{--size: 16px;position:relative;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-size:inherit;transition:.3s}.direction-column{flex-direction:column}@media print{input[type=radio]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:none}}.additional-option-text{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }], propDecorators: { options: [{
+        }], propDecorators: { options: [{
                 type: Input
             }], isValid: [{
                 type: Input
@@ -2528,11 +2504,11 @@ class RoundedVerticalMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RoundedVerticalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: RoundedVerticalMenuComponent, isStandalone: false, selector: "rounded-vertical-menu", inputs: { menuItems: "menuItems", currentItem: "currentItem", currentUser: "currentUser" }, outputs: { itemSelected: "itemSelected" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--title-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: RoundedVerticalMenuComponent, isStandalone: false, selector: "rounded-vertical-menu", inputs: { menuItems: "menuItems", currentItem: "currentItem", currentUser: "currentUser" }, outputs: { itemSelected: "itemSelected" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--text-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RoundedVerticalMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'rounded-vertical-menu', template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--title-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"] }]
+            args: [{ standalone: false, selector: 'rounded-vertical-menu', template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--text-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"] }]
         }], propDecorators: { menuItems: [{
                 type: Input
             }], currentItem: [{
@@ -2917,6 +2893,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }]
         }] });
 
+class HerumFormControl extends FormControl {
+    errorMessages = {};
+    currentErrorMessage = '';
+    destroySubject$ = new Subject();
+    /**
+     @comment The component that creates this class should have destroySubject$ so you can listen to its ngOnDestroy life cycle hook so you can unsubscribe statusChangesSubscription
+     */
+    constructor(formState, validatorOrOpts, asyncValidator, errorMessages, componentReference) {
+        super(formState, validatorOrOpts, asyncValidator);
+        if (errorMessages)
+            this.errorMessages = errorMessages;
+        this.statusChanges.pipe(takeUntil(this.destroySubject$)).subscribe(() => this.setCurrentErrorMessage());
+        componentReference.destroySubject$.pipe(takeUntil(this.destroySubject$)).subscribe(() => {
+            this.destroySubject$.next(null);
+            this.destroySubject$.complete();
+        });
+    }
+    setCurrentErrorMessage() {
+        this.currentErrorMessage = this.errors ? this.errorMessages[Object.keys(this.errors)[0]] : null;
+    }
+}
+
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */