herum-shared 0.1.32 → 0.1.34

package/atoms/index.d.ts

@@ -22,7 +22,8 @@ import * as i49 from '@angular/material/icon';
 import * as i50 from '@angular/material/checkbox';
 import * as i51 from '@angular/material/slider';
 import * as i52 from '@angular/cdk/drag-drop';
-import * as i55 from 'herum-shared/pipes';
+import * as i55 from 'herum-shared/directives';
+import * as i56 from 'herum-shared/pipes';
 
 declare class CollegeLoaderComponent implements OnInit {
     bars: any[];
@@ -829,7 +830,7 @@ declare class UsersProfilePreviewComponent {
 
 declare class AtomsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AtomsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AtomsModule, [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent], [typeof i39.CommonModule, typeof i40.ReactiveFormsModule, typeof i40.FormsModule, typeof i41.MatMenuModule, typeof i42.ClipboardModule, typeof i43.MatAutocompleteModule, typeof i44.MatChipsModule, typeof i45.MatFormFieldModule, typeof i46.MatTooltipModule, typeof i47.MatInputModule, typeof i48.MatSelectModule, typeof i49.MatIconModule, typeof i50.MatCheckboxModule, typeof i51.MatSliderModule, typeof i52.DragDropModule, typeof i53.MatDatepickerModule, typeof i54.MatNativeDateModule, typeof i55.PipesModule], [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AtomsModule, [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent], [typeof i39.CommonModule, typeof i40.ReactiveFormsModule, typeof i40.FormsModule, typeof i41.MatMenuModule, typeof i42.ClipboardModule, typeof i43.MatAutocompleteModule, typeof i44.MatChipsModule, typeof i45.MatFormFieldModule, typeof i46.MatTooltipModule, typeof i47.MatInputModule, typeof i48.MatSelectModule, typeof i49.MatIconModule, typeof i50.MatCheckboxModule, typeof i51.MatSliderModule, typeof i52.DragDropModule, typeof i53.MatDatepickerModule, typeof i54.MatNativeDateModule, typeof i55.DirectivesModule, typeof i56.PipesModule], [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AtomsModule>;
 }
 

package/directives/index.d.ts

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { ElementRef, Renderer2 } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { EnvironmentConfig } from 'herum-shared/environment';
+import * as i5 from '@angular/common';
 
 declare class HerumHighlightDirective {
     private el;
@@ -52,4 +53,10 @@ declare class UserActionDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<UserActionDirective, "[userAction]", never, { "description": { "alias": "userAction"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-export { HerumHighlightDirective, HerumToolTipDirective, SvgOnHoverDirective, UserActionDirective };
+declare class DirectivesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DirectivesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DirectivesModule, [typeof HerumHighlightDirective, typeof HerumToolTipDirective, typeof SvgOnHoverDirective, typeof UserActionDirective], [typeof i5.CommonModule], [typeof HerumHighlightDirective, typeof HerumToolTipDirective, typeof SvgOnHoverDirective, typeof UserActionDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DirectivesModule>;
+}
+
+export { DirectivesModule, HerumHighlightDirective, HerumToolTipDirective, SvgOnHoverDirective, UserActionDirective };

package/fesm2022/herum-shared-atoms.mjs

@@ -2,10 +2,12 @@ import * as i0 from '@angular/core';
 import { Component, Pipe, EventEmitter, Output, Input, forwardRef, Inject, ViewChild, Directive, HostListener, Optional, Self, NgModule } from '@angular/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 * as i2 from '@angular/cdk/bidi';
+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';
@@ -116,7 +118,7 @@ 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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumButtonComponent, decorators: [{
             type: Component,
@@ -266,7 +268,7 @@ class HerumChipComponent {
         return this.title?.includes(splitKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumChipComponent, isStandalone: false, selector: "herum-chip", inputs: { title: "title", isDeleteButtonNeeded: "isDeleteButtonNeeded", isActive: "isActive", isMenuMode: "isMenuMode", type: "type" }, outputs: { remove: "remove", chipsActivation: "chipsActivation" }, ngImport: i0, template: "<div class=\"herum-chip-container\" [class]=\"type\" [ngClass]=\"{'active':isActive, 'menu-chip':isMenuMode}\" (click)=\"_onChipsSelect()\"\r\n    dir=\"rtl\">\r\n\r\n    <ng-container *ngIf=\"isTitleToBeSplitted; else defaultTitle\">\r\n        <span [innerHTML]=\"splittedTitle | safeHtml\"></span>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultTitle>{{title}}</ng-template>\r\n\r\n    <img *ngIf=\"isDeleteButtonNeeded\" src=\"../../assets/general/secondary-x.svg\" (click)=\"_onRemove()\">\r\n</div>", styles: [".herum-chip-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;width:fit-content;gap:5px;padding:0 5px;background-color:transparent;color:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:32px;box-shadow:0 0 6px #61606029}.herum-chip-container:hover{background-color:var(--hover-background)}.active{background-color:var(--secondary-color);color:#fff}.active:hover{background-color:var(--darker-secondary-color);color:#fff}.positive,.negative{color:var(--icons-color);border:1px solid var(--icons-color)}.menu-chip{cursor:pointer;font-size:12px;height:24px;text-align:center;justify-content:center;display:flex;padding:0 7px}\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: i2.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: HerumChipComponent, isStandalone: false, selector: "herum-chip", inputs: { title: "title", isDeleteButtonNeeded: "isDeleteButtonNeeded", isActive: "isActive", isMenuMode: "isMenuMode", type: "type" }, outputs: { remove: "remove", chipsActivation: "chipsActivation" }, ngImport: i0, template: "<div class=\"herum-chip-container\" [class]=\"type\" [ngClass]=\"{'active':isActive, 'menu-chip':isMenuMode}\" (click)=\"_onChipsSelect()\"\r\n    dir=\"rtl\">\r\n\r\n    <ng-container *ngIf=\"isTitleToBeSplitted; else defaultTitle\">\r\n        <span [innerHTML]=\"splittedTitle | safeHtml\"></span>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultTitle>{{title}}</ng-template>\r\n\r\n    <img *ngIf=\"isDeleteButtonNeeded\" src=\"../../assets/general/secondary-x.svg\" (click)=\"_onRemove()\">\r\n</div>", styles: [".herum-chip-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;width:fit-content;gap:5px;padding:0 5px;background-color:transparent;color:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:32px;box-shadow:0 0 6px #61606029}.herum-chip-container:hover{background-color:var(--hover-background)}.active{background-color:var(--secondary-color);color:#fff}.active:hover{background-color:var(--darker-secondary-color);color:#fff}.positive,.negative{color:var(--icons-color);border:1px solid var(--icons-color)}.menu-chip{cursor:pointer;font-size:12px;height:24px;text-align:center;justify-content:center;display:flex;padding:0 7px}\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: 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: HerumChipComponent, decorators: [{
             type: Component,
@@ -645,6 +647,7 @@ class HerumInputFieldComponent {
         })).subscribe();
     }
     setInputsByFormControl() {
+        console.log(this.ngControl);
         if (!this.ngControl)
             return;
         if (this.ngControl instanceof FormControlName)
@@ -774,7 +777,7 @@ 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.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 }], 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, decorators: [{
             type: Component,
@@ -1084,7 +1087,7 @@ class HerumMultiSelectComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumMultiSelectComponent, isStandalone: false, selector: "herum-multi-select", inputs: { placeholder: "placeholder", options: "options", titledOptionsList: "titledOptionsList", recursiveTitledOption: "recursiveTitledOption", selectedOptionsInput: "selectedOptionsInput", maxChips: "maxChips", disabled: "disabled", size: "size", isDropDownInPositionFixed: "isDropDownInPositionFixed", dropDownDirection: "dropDownDirection", isMultiHeads: "isMultiHeads" }, outputs: { selectedOptions: "selectedOptions", selectedRecursiveOptions: "selectedRecursiveOptions" }, host: { listeners: { "window:click": "onClick($event)" } }, providers: [CUSTOM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "dropContainer", first: true, predicate: ["dropContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\" [ngClass]=\"{'w-100': size === 'responsive'}\">\r\n    <button class=\"drop-button internal\" [class]=\"size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\" (click)=\"toggleDropdown()\">\r\n        <span class=\"button-placeholder internal\" *ngIf=\"!selectedOptionsValue?.length\">{{placeholder}}</span>\r\n\r\n        <div class=\"herum-chips-container\">\r\n            <herum-chip *ngFor=\"let option of getLimitedList()\" [title]=\"option.name\"\r\n                (remove)=\"removeSelectedOption(option)\"></herum-chip>\r\n\r\n            <ng-container *ngIf=\"selectedOptionsValue && selectedOptionsValue.length > maxChips\">\r\n                <herum-chip class=\"last-chip\" [matTooltip]=\"_getHiddenOptions()\"\r\n                    [title]=\"(selectedOptionsValue.length - maxChips) + '+'\" [isDeleteButtonNeeded]=\"false\">\r\n                </herum-chip>\r\n            </ng-container>\r\n        </div>\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\" 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 id=\"myDropdown\" class=\"internal\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"optionsLength>2\" class=\"input-filter\" [type]=\"'search'\"\r\n            [placeholder]=\"'\u05D7\u05E4\u05E9/\u05D9 \u05E2\u05E8\u05DA \u05DE\u05D1\u05D5\u05E7\u05E9...'\" (click)=\"_onStopPropagation($event)\"\r\n            (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n\r\n        <ng-container *ngIf=\"options\">\r\n            <herum-options-list [options]=\"filteredOptions\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-options-list>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"titledOptionsList\">\r\n            <ng-container *ngFor=\"let filteredTitledOptions of filteredTitledOptionsList\">\r\n                <herum-expendable-panel [title]=\"filteredTitledOptions.title\" [isBoldTitle]=\"true\">\r\n                    <herum-options-list [options]=\"filteredTitledOptions.options\"\r\n                        [isContentInsideExpendablePanel]=\"true\" [selectedOptions]=\"selectedOptionsValue\"\r\n                        (selectedOptionsEmitter)=\"_select($event)\"></herum-options-list>\r\n                </herum-expendable-panel>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"recursiveTitledOption\">\r\n            <ng-container *ngIf=\"isMultiHeads\">\r\n                <herum-recursive-hierarchy-options-list *ngFor=\"let treeHead of recursiveTitledOption\"\r\n                    [recursiveTitledOption]=\"treeHead\" [selectedOptions]=\"selectedOptionsValue\"\r\n                    (selectedOptionsEmitter)=\"_select($event)\"\r\n                    (selectedRecursiveOptionsEmitter)=\"_selectRecursive($event)\">\r\n                </herum-recursive-hierarchy-options-list>\r\n            </ng-container>\r\n\r\n            <herum-recursive-hierarchy-options-list *ngIf=\"!isMultiHeads\"\r\n                [recursiveTitledOption]=\"recursiveTitledOption\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-recursive-hierarchy-options-list>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"hasNoResults()\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".drop-button{gap:8px}.button-placeholder{color:var(--disabled-text-color)}.last-chip{margin-inline-end:20px}.herum-chips-container{display:flex;gap:8px}.big-scroll-view{overflow-y:auto;max-height:600px}\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: i2.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: "component", type: HerumChipComponent, selector: "herum-chip", inputs: ["title", "isDeleteButtonNeeded", "isActive", "isMenuMode", "type"], outputs: ["remove", "chipsActivation"] }, { 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"] }, { kind: "component", type: HerumOptionsListComponent, selector: "herum-options-list", inputs: ["options", "selectedOptions", "isContentInsideExpendablePanel", "isInternalMode"], outputs: ["selectedOptionsEmitter"] }, { kind: "component", type: HerumRecursiveHierarchyOptionsListComponent, selector: "herum-recursive-hierarchy-options-list", inputs: ["options", "selectedOptions", "recursiveTitledOption"], outputs: ["selectedOptionsEmitter", "selectedRecursiveOptionsEmitter"] }], animations: [openClose] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumMultiSelectComponent, isStandalone: false, selector: "herum-multi-select", inputs: { placeholder: "placeholder", options: "options", titledOptionsList: "titledOptionsList", recursiveTitledOption: "recursiveTitledOption", selectedOptionsInput: "selectedOptionsInput", maxChips: "maxChips", disabled: "disabled", size: "size", isDropDownInPositionFixed: "isDropDownInPositionFixed", dropDownDirection: "dropDownDirection", isMultiHeads: "isMultiHeads" }, outputs: { selectedOptions: "selectedOptions", selectedRecursiveOptions: "selectedRecursiveOptions" }, host: { listeners: { "window:click": "onClick($event)" } }, providers: [CUSTOM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "dropContainer", first: true, predicate: ["dropContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\" [ngClass]=\"{'w-100': size === 'responsive'}\">\r\n    <button class=\"drop-button internal\" [class]=\"size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\" (click)=\"toggleDropdown()\">\r\n        <span class=\"button-placeholder internal\" *ngIf=\"!selectedOptionsValue?.length\">{{placeholder}}</span>\r\n\r\n        <div class=\"herum-chips-container\">\r\n            <herum-chip *ngFor=\"let option of getLimitedList()\" [title]=\"option.name\"\r\n                (remove)=\"removeSelectedOption(option)\"></herum-chip>\r\n\r\n            <ng-container *ngIf=\"selectedOptionsValue && selectedOptionsValue.length > maxChips\">\r\n                <herum-chip class=\"last-chip\" [matTooltip]=\"_getHiddenOptions()\"\r\n                    [title]=\"(selectedOptionsValue.length - maxChips) + '+'\" [isDeleteButtonNeeded]=\"false\">\r\n                </herum-chip>\r\n            </ng-container>\r\n        </div>\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\" 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 id=\"myDropdown\" class=\"internal\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"optionsLength>2\" class=\"input-filter\" [type]=\"'search'\"\r\n            [placeholder]=\"'\u05D7\u05E4\u05E9/\u05D9 \u05E2\u05E8\u05DA \u05DE\u05D1\u05D5\u05E7\u05E9...'\" (click)=\"_onStopPropagation($event)\"\r\n            (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n\r\n        <ng-container *ngIf=\"options\">\r\n            <herum-options-list [options]=\"filteredOptions\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-options-list>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"titledOptionsList\">\r\n            <ng-container *ngFor=\"let filteredTitledOptions of filteredTitledOptionsList\">\r\n                <herum-expendable-panel [title]=\"filteredTitledOptions.title\" [isBoldTitle]=\"true\">\r\n                    <herum-options-list [options]=\"filteredTitledOptions.options\"\r\n                        [isContentInsideExpendablePanel]=\"true\" [selectedOptions]=\"selectedOptionsValue\"\r\n                        (selectedOptionsEmitter)=\"_select($event)\"></herum-options-list>\r\n                </herum-expendable-panel>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"recursiveTitledOption\">\r\n            <ng-container *ngIf=\"isMultiHeads\">\r\n                <herum-recursive-hierarchy-options-list *ngFor=\"let treeHead of recursiveTitledOption\"\r\n                    [recursiveTitledOption]=\"treeHead\" [selectedOptions]=\"selectedOptionsValue\"\r\n                    (selectedOptionsEmitter)=\"_select($event)\"\r\n                    (selectedRecursiveOptionsEmitter)=\"_selectRecursive($event)\">\r\n                </herum-recursive-hierarchy-options-list>\r\n            </ng-container>\r\n\r\n            <herum-recursive-hierarchy-options-list *ngIf=\"!isMultiHeads\"\r\n                [recursiveTitledOption]=\"recursiveTitledOption\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-recursive-hierarchy-options-list>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"hasNoResults()\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".drop-button{gap:8px}.button-placeholder{color:var(--disabled-text-color)}.last-chip{margin-inline-end:20px}.herum-chips-container{display:flex;gap:8px}.big-scroll-view{overflow-y:auto;max-height:600px}\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: 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: "component", type: HerumChipComponent, selector: "herum-chip", inputs: ["title", "isDeleteButtonNeeded", "isActive", "isMenuMode", "type"], outputs: ["remove", "chipsActivation"] }, { 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"] }, { kind: "component", type: HerumOptionsListComponent, selector: "herum-options-list", inputs: ["options", "selectedOptions", "isContentInsideExpendablePanel", "isInternalMode"], outputs: ["selectedOptionsEmitter"] }, { kind: "component", type: HerumRecursiveHierarchyOptionsListComponent, selector: "herum-recursive-hierarchy-options-list", inputs: ["options", "selectedOptions", "recursiveTitledOption"], outputs: ["selectedOptionsEmitter", "selectedRecursiveOptionsEmitter"] }], animations: [openClose] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiSelectComponent, decorators: [{
             type: Component,
@@ -1620,7 +1623,7 @@ 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.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()}\" *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,
@@ -2272,7 +2275,7 @@ 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.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: "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(--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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUploadFileComponent, decorators: [{
             type: Component,
@@ -2350,7 +2353,7 @@ 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.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}\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,
@@ -2525,7 +2528,7 @@ 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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RoundedVerticalMenuComponent, decorators: [{
             type: Component,
@@ -2743,6 +2746,7 @@ class AtomsModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule,
             PipesModule], exports: [CollegeLoaderComponent,
             UsersProfilePreviewComponent,
             HerumBreadcrumbsComponent,
@@ -2800,6 +2804,7 @@ class AtomsModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule,
             PipesModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, decorators: [{
@@ -2903,6 +2908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         DragDropModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        DirectivesModule,
                         PipesModule
                     ],
                     providers: [