herum-shared 0.1.49 → 0.1.51

package/fesm2022/herum-shared.mjs

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { EventEmitter, ViewChild, Output, Input, Component, Pipe, HostListener, Inject, forwardRef, ViewChildren, Optional, Self, Injectable, Directive, ViewEncapsulation, HostBinding, NgModule, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
 import { formatDate, CommonModule, DatePipe, DOCUMENT } from '@angular/common';
-import { Subject, BehaviorSubject, forkJoin, of, EMPTY, throwError, takeUntil as takeUntil$1 } from 'rxjs';
+import { Subject, takeUntil as takeUntil$1, BehaviorSubject, forkJoin, of, EMPTY, throwError } from 'rxjs';
 import { takeUntil, debounceTime, tap, shareReplay, map, catchError, switchMap } from 'rxjs/operators';
 import { keyboardAsciiCodes as keyboardAsciiCodes$1, regexExpressions as regexExpressions$1, svgsStrings as svgsStrings$1, system as system$1, radioButtonTypes as radioButtonTypes$1, defaultGrade as defaultGrade$1, checkboxTypes as checkboxTypes$1, defaultPlaceholder as defaultPlaceholder$2, types as types$1, formStatuses as formStatuses$1, structHierarchyTreeMaxHeight as structHierarchyTreeMaxHeight$1, startEndDateError as startEndDateError$1, minDateError as minDateError$1, formatError as formatError$1, timestampError as timestampError$1, timePattern as timePattern$1, dayInMilliSeconds as dayInMilliSeconds$1, dateRangeTimeRangePlaceHolder as dateRangeTimeRangePlaceHolder$1, dateRangeTimeRangeWithoutSecondsPlaceHolder as dateRangeTimeRangeWithoutSecondsPlaceHolder$1, dateRangePlaceHolder as dateRangePlaceHolder$1, dateTimePlaceHolder as dateTimePlaceHolder$1, dateTimeWithoutSecondsPlaceHolder as dateTimeWithoutSecondsPlaceHolder$1, datePlaceHolder as datePlaceHolder$1, timePlaceHolder as timePlaceHolder$1, timeWithoutSecondsPlaceHolder as timeWithoutSecondsPlaceHolder$1, calendarActiveColorCssVariable as calendarActiveColorCssVariable$1, calendarHoverColorCssVariable as calendarHoverColorCssVariable$1, calendarLibrarySelector as calendarLibrarySelector$1, calendarLibraryBodyCellSelector as calendarLibraryBodyCellSelector$1, timerActiveColorCssVariable as timerActiveColorCssVariable$1, timerHoverColorCssVariable as timerHoverColorCssVariable$1, timerItemSizeColorCssVariable as timerItemSizeColorCssVariable$1, resourcesFilesSuffixes as resourcesFilesSuffixes$1, anySubFileTypeWildCard as anySubFileTypeWildCard$1, maleAvatarPath as maleAvatarPath$1, femaleAvatarPath as femaleAvatarPath$1, signUpFormKeys as signUpFormKeys$1, maxImageHeight as maxImageHeight$1, maxImageWidth as maxImageWidth$1, filesSuffixes as filesSuffixes$1, uploadsProgressMetadataTypes as uploadsProgressMetadataTypes$1, tableRowHeights as tableRowHeights$1, generalKeys as generalKeys$1, attributes as attributes$1, defaultAuthorizationObject as defaultAuthorizationObject$1, resourceIdPlaceholder as resourceIdPlaceholder$1, getPublishAuthorization as getPublishAuthorization$1, toastsTemplates as toastsTemplates$1, toastContext as toastContext$1, toastStatuses as toastStatuses$1, toastStates as toastStates$1, defaultUserId as defaultUserId$1, assignmentMetadata as assignmentMetadata$1, validatorsNames as validatorsNames$1, formsErrorMessages as formsErrorMessages$1, getSignUpMethod as getSignUpMethod$1, globalErrorHandlingHeader as globalErrorHandlingHeader$1, dialogsDescriptions as dialogsDescriptions$1, dialogsTitles as dialogsTitles$1, uploadsManagerKeys as uploadsManagerKeys$1, uploadStatuses as uploadStatuses$1, skipToastHeader as skipToastHeader$1 } from 'herum-shared/constants';
-import * as i2$1 from 'herum-shared/services';
+import * as i1$2 from 'herum-shared/services';
 import { emptyValueFlagForCreationUniqListItem as emptyValueFlagForCreationUniqListItem$1, innerUniqListItemKey as innerUniqListItemKey$1 } from 'herum-shared/services';
 import * as i2 from '@angular/cdk/bidi';
 import * as i1$1 from '@angular/platform-browser';
@@ -17,37 +17,37 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import * as i2$2 from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$2 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, Validators, FormControlName, ControlContainer, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import lottie from 'lottie-web';
 import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
 import * as i4 from 'herum-shared/directives';
 import { DirectivesModule as DirectivesModule$1 } from 'herum-shared/directives';
 import { QuizHeaderState, ResourceState, Gender, QuizStatus, FeedPriority, SubscriptionStatus } from 'herum-types/Enums';
-import { isTruncatedTitleElement, convertToDate, updateFullYear, getDropdownAnimationStates, getAssignmentStateDisplayName, replaceInterpolateKeysWithObjectProperties, toHash, buildPath, getVersionPathParameter, setHeaders, remainJustWantedValueInDictionary } from 'herum-shared/utils';
-import * as i2$3 from 'herum-shared/atoms';
+import { isTruncatedTitleElement, convertToDate, updateFullYear, getDropdownAnimationStates, getAssignmentStateDisplayName, replaceInterpolateKeysWithObjectProperties, toHash, getVersionPathParameter, buildPath, setHeaders, remainJustWantedValueInDictionary } from 'herum-shared/utils';
+import * as i2$2 from 'herum-shared/atoms';
 import { HerumCheckboxComponent as HerumCheckboxComponent$1, AtomsModule as AtomsModule$1 } from 'herum-shared/atoms';
-import * as i1$6 from '@angular/cdk/clipboard';
+import * as i1$7 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i4$1 from 'herum-shared/pipes';
 import { PipesModule as PipesModule$1 } from 'herum-shared/pipes';
 import { openClose as openClose$1 } from 'herum-shared/animations';
-import * as i2$4 from '@angular/material/menu';
+import * as i2$3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i3 from '@angular/material/datepicker';
 import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1$5 from '@angular/material/core';
+import * as i1$6 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { v4 } from 'uuid';
 import { SYSTEM_AUDIO_VISUAL_CONFIGURATION as SYSTEM_AUDIO_VISUAL_CONFIGURATION$1, SYSTEM_TRACK_TEXT_CHANGES_SERVICE as SYSTEM_TRACK_TEXT_CHANGES_SERVICE$1 } from 'herum-shared/tokens';
-import * as i1$3 from '@angular/common/http';
+import * as i1$4 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
-import * as i1$4 from '@angular/material/dialog';
+import * as i1$5 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i2$5 from 'herum-shared/molecules';
+import * as i2$4 from 'herum-shared/molecules';
 import { MoleculesModule as MoleculesModule$1 } from 'herum-shared/molecules';
 import { StepStatus } from 'herum-types/Shared';
 import * as i3$1 from 'ag-grid-angular';
@@ -57,7 +57,7 @@ import { __decorate } from 'tslib';
 import { TableRowHeight as TableRowHeight$1 } from 'herum-shared/decorators';
 import { StorageService } from 'herum-shared/static-services';
 import { selfIsTeacherExample as selfIsTeacherExample$1, closedListExample as closedListExample$1, permissionsTemplatesExample as permissionsTemplatesExample$1 } from 'herum-shared/objectsExample';
-import * as i2$6 from '@angular/router';
+import * as i2$5 from '@angular/router';
 import { MicroResourceAuthorizationType } from 'herum-types/Resource';
 import { cloneDeep } from 'lodash';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -469,13 +469,13 @@ class HerumVideoPlayerComponent {
         this.destroySubject$.next(null);
         this.destroySubject$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumVideoPlayerComponent, deps: [{ token: i2$1.GlobalKeyboardListenerService }, { token: i2$1.KeyPressService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumVideoPlayerComponent, deps: [{ token: i1$2.GlobalKeyboardListenerService }, { token: i1$2.KeyPressService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumVideoPlayerComponent, isStandalone: false, selector: "herum-video-player", inputs: { resourceSubscription: "resourceSubscription", srcPath: "srcPath", resourceId: "resourceId", isResourceInWideMode: "isResourceInWideMode", format: "format", mediaSettings: "mediaSettings", isBlock: "isBlock", id: "id", getTimeUpdate: "getTimeUpdate" }, outputs: { onGradeUpdate: "onGradeUpdate", isLoadingChange: "isLoadingChange", mediaSettingsUpdate: "mediaSettingsUpdate", mediaSettingsUpdateByRequest: "mediaSettingsUpdateByRequest" }, host: { listeners: { "window:keydown": "_onKeyDown($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"video-player\"\r\n    [ngStyle]=\"{ 'height' : isResourceInWideMode ? '78vh' : (format == 'preview') ? '200px' : (format == 'no-height') ? 'unset' : '70vh' }\">\r\n    <div class=\"video-container\">\r\n        <video #videoPlayer id=\"videoPlayer\" [src]=\"srcPath | safe\" (loadedmetadata)=\"_videoLoad()\"\r\n            (canplay)=\"_canplay()\" (click)=\"_onPlayPause()\" (timeupdate)=\"_timeUpdate()\" (loadstart)=\"_loadStart()\">\r\n            Your browser does not support the video tag.\r\n        </video>\r\n    </div>\r\n\r\n    <div class=\"big-play-container\">\r\n        <span class=\"fade-loader\" *ngIf=\"!canPlay\"></span>\r\n\r\n        <span class=\"primary-play\"  *ngIf=\"videoPlayer.paused && canPlay && !isBlock\"\r\n            [innerHTML]=\"primaryPlaySvg | safeHtml\" (click)=\"_onPlayPause()\">\r\n        </span>\r\n    </div>\r\n\r\n    <div class=\"controls\" *ngIf=\"videoLoaded && !isBlock\">\r\n        <herum-slider class=\"video-slider\" [currentSliderValue]=\"videoPlayer.currentTime\"\r\n            [maxSliderValue]=\"videoPlayer.duration\" (isDraggingEmitter)=\"_setisDragging($event)\"\r\n            (updatedSliderValue)=\"_setVideoPlayerCurrentTime($event)\">\r\n        </herum-slider>\r\n\r\n        <div class=\"row w-100\">\r\n            <div class=\"col-6 right-controls\">\r\n                <button (click)=\"rewind()\" id=\"back\">\r\n                    <img class=\"control-icon\" src=\"assets/shared/icons/video/back10.svg\">\r\n                </button>\r\n\r\n                <button (click)=\"fastForward()\" id=\"forward\">\r\n                    <img class=\"control-icon\" src=\"assets/shared/icons/video/next10.svg\">\r\n                </button>\r\n\r\n                <herum-video-select class=\"video-speed-select\" [options]=\"videoSpeedOptions\"\r\n                    [currentVideoSpeed]=\"videoPlayer.playbackRate\" (selectedOptionEmitter)=\"_setVideoSpeed($event)\">\r\n                </herum-video-select>\r\n\r\n                <button (click)=\"_onTogglePictureInPictureMode()\">\r\n                    <img class=\"control-icon\" *ngIf=\"!isPictureInPictureMode \"\r\n                        src=\"assets/shared/icons/video/pictureInPicture.svg\">\r\n                    <img class=\"control-icon\" *ngIf=\"isPictureInPictureMode \"\r\n                        src=\"assets/shared/icons/video/pictureInPictureOff.svg\">\r\n                </button>\r\n\r\n                <button (click)=\"_onToggleFullScreen()\">\r\n                    <img class=\"control-icon\" src=\"assets/shared/icons/video/fullScreen.svg\">\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"col-6 left-controls p-0\">\r\n                <button (click)=\"_onPlayPause()\">\r\n                    <img class=\"control-icon\" *ngIf=\"videoPlayer.paused\" src=\"assets/shared/icons/video/play.svg\">\r\n                    <img class=\"control-icon\" *ngIf=\"!videoPlayer.paused\" src=\"assets/shared/icons/video/pause.svg\">\r\n                </button>\r\n\r\n                <span>{{duration}} / {{currentTime}} </span>\r\n\r\n                <ng-container *ngIf=\"format == 'regular'\">\r\n                    <img class=\"control-icon\" *ngIf=\"!videoPlayer.muted && videoPlayer.volume \"\r\n                        (click)=\"_onMuteUnmute()\" src=\"assets/shared/icons/video/sound.svg\">\r\n\r\n                    <img class=\"control-icon\" *ngIf=\"videoPlayer.muted || !videoPlayer.volume\" (click)=\"_onMuteUnmute()\"\r\n                        src=\"assets/shared/icons/video/mute.svg\">\r\n                </ng-container>\r\n\r\n                <herum-slider *ngIf=\"format == 'regular'\" class=\"volume-slider\"\r\n                    [currentSliderValue]=\"videoPlayer.muted ? 0 : videoPlayer.volume \" [maxSliderValue]=\"1\"\r\n                    [size]=\"'small'\" (updatedSliderValue)=\"_setVideoPlayerVolume($event)\"></herum-slider>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".video-player{position:relative;display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:12px;width:100%}.big-play-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;height:100%;width:100%}.video-container{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.video-container video{border-radius:12px;width:100%;height:100%}.video-player:hover .controls{opacity:1}.controls{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);display:flex;flex-direction:column;align-items:center;gap:15px;justify-content:space-between;padding:10px;color:#fff!important;opacity:0;transition:opacity .3s ease-in-out;border-radius:0 0 12px 12px}.controls .left-controls{justify-content:left;display:flex;align-items:center;gap:10px}.controls .left-controls span{color:#fff}.controls .right-controls{display:flex;justify-content:right;align-items:center;padding:0;gap:10px}.controls .right-controls,.controls .left-controls{flex-direction:row-reverse}.controls .right-controls button{padding:0}.controls .right-controls button:first-child{padding-inline-start:0px}.controls button{background:none;border:none}.rotate{transform:rotate(180deg)}::ng-deep .mat-accent .mat-slider-track-fill,.mat-accent .mat-slider-thumb,.mat-accent .mat-slider-thumb-label{background-color:var(--light-background-color)}::ng-deep .mat-accent .mat-slider-thumb{background-color:var(--light-background-color)}.control-icon{width:20px;cursor:pointer}.primary-play{height:184px;cursor:pointer;caret-color:transparent}.primary-play ::ng-deep .start-stop-color{stop-color:var(--icons-start-linear-gradient-color)}.primary-play ::ng-deep .middle-stop-color{stop-color:var(--icons-middle-linear-gradient-color)}.primary-play ::ng-deep .end-stop-color{stop-color:var(--icons-end-linear-gradient-color)}.volume-slider{width:45px}.video-speed-select{margin-inline:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HerumSliderComponent, selector: "herum-slider", inputs: ["size", "maxSliderValue", "currentSliderValue", "initSlider"], outputs: ["isDraggingEmitter", "updatedSliderValue"] }, { kind: "component", type: HerumVideoSelectComponent, selector: "herum-video-select", inputs: ["currentVideoSpeed", "options"], outputs: ["selectedOptionEmitter"] }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumVideoPlayerComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-video-player', template: "<div class=\"video-player\"\r\n    [ngStyle]=\"{ 'height' : isResourceInWideMode ? '78vh' : (format == 'preview') ? '200px' : (format == 'no-height') ? 'unset' : '70vh' }\">\r\n    <div class=\"video-container\">\r\n        <video #videoPlayer id=\"videoPlayer\" [src]=\"srcPath | safe\" (loadedmetadata)=\"_videoLoad()\"\r\n            (canplay)=\"_canplay()\" (click)=\"_onPlayPause()\" (timeupdate)=\"_timeUpdate()\" (loadstart)=\"_loadStart()\">\r\n            Your browser does not support the video tag.\r\n        </video>\r\n    </div>\r\n\r\n    <div class=\"big-play-container\">\r\n        <span class=\"fade-loader\" *ngIf=\"!canPlay\"></span>\r\n\r\n        <span class=\"primary-play\"  *ngIf=\"videoPlayer.paused && canPlay && !isBlock\"\r\n            [innerHTML]=\"primaryPlaySvg | safeHtml\" (click)=\"_onPlayPause()\">\r\n        </span>\r\n    </div>\r\n\r\n    <div class=\"controls\" *ngIf=\"videoLoaded && !isBlock\">\r\n        <herum-slider class=\"video-slider\" [currentSliderValue]=\"videoPlayer.currentTime\"\r\n            [maxSliderValue]=\"videoPlayer.duration\" (isDraggingEmitter)=\"_setisDragging($event)\"\r\n            (updatedSliderValue)=\"_setVideoPlayerCurrentTime($event)\">\r\n        </herum-slider>\r\n\r\n        <div class=\"row w-100\">\r\n            <div class=\"col-6 right-controls\">\r\n                <button (click)=\"rewind()\" id=\"back\">\r\n                    <img class=\"control-icon\" src=\"assets/shared/icons/video/back10.svg\">\r\n                </button>\r\n\r\n                <button (click)=\"fastForward()\" id=\"forward\">\r\n                    <img class=\"control-icon\" src=\"assets/shared/icons/video/next10.svg\">\r\n                </button>\r\n\r\n                <herum-video-select class=\"video-speed-select\" [options]=\"videoSpeedOptions\"\r\n                    [currentVideoSpeed]=\"videoPlayer.playbackRate\" (selectedOptionEmitter)=\"_setVideoSpeed($event)\">\r\n                </herum-video-select>\r\n\r\n                <button (click)=\"_onTogglePictureInPictureMode()\">\r\n                    <img class=\"control-icon\" *ngIf=\"!isPictureInPictureMode \"\r\n                        src=\"assets/shared/icons/video/pictureInPicture.svg\">\r\n                    <img class=\"control-icon\" *ngIf=\"isPictureInPictureMode \"\r\n                        src=\"assets/shared/icons/video/pictureInPictureOff.svg\">\r\n                </button>\r\n\r\n                <button (click)=\"_onToggleFullScreen()\">\r\n                    <img class=\"control-icon\" src=\"assets/shared/icons/video/fullScreen.svg\">\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"col-6 left-controls p-0\">\r\n                <button (click)=\"_onPlayPause()\">\r\n                    <img class=\"control-icon\" *ngIf=\"videoPlayer.paused\" src=\"assets/shared/icons/video/play.svg\">\r\n                    <img class=\"control-icon\" *ngIf=\"!videoPlayer.paused\" src=\"assets/shared/icons/video/pause.svg\">\r\n                </button>\r\n\r\n                <span>{{duration}} / {{currentTime}} </span>\r\n\r\n                <ng-container *ngIf=\"format == 'regular'\">\r\n                    <img class=\"control-icon\" *ngIf=\"!videoPlayer.muted && videoPlayer.volume \"\r\n                        (click)=\"_onMuteUnmute()\" src=\"assets/shared/icons/video/sound.svg\">\r\n\r\n                    <img class=\"control-icon\" *ngIf=\"videoPlayer.muted || !videoPlayer.volume\" (click)=\"_onMuteUnmute()\"\r\n                        src=\"assets/shared/icons/video/mute.svg\">\r\n                </ng-container>\r\n\r\n                <herum-slider *ngIf=\"format == 'regular'\" class=\"volume-slider\"\r\n                    [currentSliderValue]=\"videoPlayer.muted ? 0 : videoPlayer.volume \" [maxSliderValue]=\"1\"\r\n                    [size]=\"'small'\" (updatedSliderValue)=\"_setVideoPlayerVolume($event)\"></herum-slider>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".video-player{position:relative;display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:12px;width:100%}.big-play-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;height:100%;width:100%}.video-container{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.video-container video{border-radius:12px;width:100%;height:100%}.video-player:hover .controls{opacity:1}.controls{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);display:flex;flex-direction:column;align-items:center;gap:15px;justify-content:space-between;padding:10px;color:#fff!important;opacity:0;transition:opacity .3s ease-in-out;border-radius:0 0 12px 12px}.controls .left-controls{justify-content:left;display:flex;align-items:center;gap:10px}.controls .left-controls span{color:#fff}.controls .right-controls{display:flex;justify-content:right;align-items:center;padding:0;gap:10px}.controls .right-controls,.controls .left-controls{flex-direction:row-reverse}.controls .right-controls button{padding:0}.controls .right-controls button:first-child{padding-inline-start:0px}.controls button{background:none;border:none}.rotate{transform:rotate(180deg)}::ng-deep .mat-accent .mat-slider-track-fill,.mat-accent .mat-slider-thumb,.mat-accent .mat-slider-thumb-label{background-color:var(--light-background-color)}::ng-deep .mat-accent .mat-slider-thumb{background-color:var(--light-background-color)}.control-icon{width:20px;cursor:pointer}.primary-play{height:184px;cursor:pointer;caret-color:transparent}.primary-play ::ng-deep .start-stop-color{stop-color:var(--icons-start-linear-gradient-color)}.primary-play ::ng-deep .middle-stop-color{stop-color:var(--icons-middle-linear-gradient-color)}.primary-play ::ng-deep .end-stop-color{stop-color:var(--icons-end-linear-gradient-color)}.volume-slider{width:45px}.video-speed-select{margin-inline:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.GlobalKeyboardListenerService }, { type: i2$1.KeyPressService }], propDecorators: { resourceSubscription: [{
+        }], ctorParameters: () => [{ type: i1$2.GlobalKeyboardListenerService }, { type: i1$2.KeyPressService }], propDecorators: { resourceSubscription: [{
                 type: Input
             }], srcPath: [{
                 type: Input
@@ -987,7 +987,7 @@ class QuizTwoAnswersQuestionComponent {
         return this.question?.closedContent?.answers ?? [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizTwoAnswersQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizTwoAnswersQuestionComponent, isStandalone: false, selector: "quiz-two-answers-question", inputs: { question: "question", userAnswers: "userAnswers", isSubmitted: "isSubmitted" }, outputs: { onAnswersChange: "onAnswersChange" }, ngImport: i0, template: "<div class=\"answers-container\">\r\n    <div class=\"answer-item herum-card\" *ngFor=\"let answer of questionAnswers; let i=index\"\r\n        [ngClass]=\"_getAnswerClass(answer)\" (click)=\"_onAnswersChange(answer)\">\r\n        <p #answerText class=\"w-100 \" [matTooltip]=\"_isTruncatedTitleElement(answerText)? answer.content : ''\">\r\n            {{ answer.content | ellipsis:answerText }}\r\n        </p>\r\n    </div>\r\n</div>", styles: [".answers-container{display:flex;flex-direction:row;gap:48px;text-align:center;max-height:200px;justify-content:space-evenly}.answers-container .answer-item{display:flex;justify-content:center;transition:transform .3s ease;align-items:center;cursor:pointer;min-width:35%;min-height:90px;padding:20px;border-radius:20px}.answers-container .answer-item p{font-size:24px;font-weight:600;margin:0;-webkit-user-select:none;user-select:none}.answers-container .answer-item:active{transform:scale(.95);transition:transform .3s ease}.answers-container .selected-answer{outline:2px solid var(--icons-color);color:#fff;transform:scale(1.02);transition:transform .3s ease}.answers-container .correct{border:2px solid var(--icons-color)}.answers-container .wrong{border:2px solid var(--error-color)}.answers-container .submitted-quiz{cursor:auto;pointer-events:none}\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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizTwoAnswersQuestionComponent, isStandalone: false, selector: "quiz-two-answers-question", inputs: { question: "question", userAnswers: "userAnswers", isSubmitted: "isSubmitted" }, outputs: { onAnswersChange: "onAnswersChange" }, ngImport: i0, template: "<div class=\"answers-container\">\r\n    <div class=\"answer-item herum-card\" *ngFor=\"let answer of questionAnswers; let i=index\"\r\n        [ngClass]=\"_getAnswerClass(answer)\" (click)=\"_onAnswersChange(answer)\">\r\n        <p #answerText class=\"w-100 \" [matTooltip]=\"_isTruncatedTitleElement(answerText)? answer.content : ''\">\r\n            {{ answer.content | ellipsis:answerText }}\r\n        </p>\r\n    </div>\r\n</div>", styles: [".answers-container{display:flex;flex-direction:row;gap:48px;text-align:center;max-height:200px;justify-content:space-evenly}.answers-container .answer-item{display:flex;justify-content:center;transition:transform .3s ease;align-items:center;cursor:pointer;min-width:35%;min-height:90px;padding:20px;border-radius:20px}.answers-container .answer-item p{font-size:24px;font-weight:600;margin:0;-webkit-user-select:none;user-select:none}.answers-container .answer-item:active{transform:scale(.95);transition:transform .3s ease}.answers-container .selected-answer{outline:2px solid var(--icons-color);color:#fff;transform:scale(1.02);transition:transform .3s ease}.answers-container .correct{border:2px solid var(--icons-color)}.answers-container .wrong{border:2px solid var(--error-color)}.answers-container .submitted-quiz{cursor:auto;pointer-events:none}\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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizTwoAnswersQuestionComponent, decorators: [{
             type: Component,
@@ -1083,7 +1083,7 @@ class HerumRadioButtonComponent {
         }
         this.selectedOptionId = value.id;
         this.type = value.type;
-        this.isBlocked = value.hasOwnProperty('isBlocked') ? !!value.isBlocked : false;
+        this.isBlocked = value.isBlocked ?? this.isBlocked;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1133,83 +1133,66 @@ class QuizOneAnswerQuestionComponent {
     onAnswersChange = new EventEmitter();
     convertedOptions;
     selectedAnswer = new FormControl({ type: '', id: '' }, Validators.required);
+    destroySubject$ = new Subject();
     answerNotes = [];
     correctAnswer;
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
     ngOnChanges(changes) {
-        const shouldUpdateViewState = !!(changes['question'] ||
-            changes['userAnswers'] ||
-            changes['quizData'] ||
-            changes['areAnswersRevealed'] ||
-            changes['isCheckingMode'] ||
-            changes['areAnswersBlocked']);
-        if (!shouldUpdateViewState || !this.question)
-            return;
-        this.answerNotes = this.getAnswerNotes(this.question);
-        this.convertedOptions = this.convertToOptions();
-        this.correctAnswer = undefined;
-        this.changeDetectorRef.detectChanges();
-        const chosenAnswerId = this.getChosenAnswerId();
-        if (!chosenAnswerId) {
-            this.selectedAnswer.setValue({ id: '', type: '', isBlocked: this.isRadioBlocked }, { emitEvent: false });
-            return;
-        }
-        const isResultMode = !!(this.quizData?.isSubmitted || this.areAnswersRevealed || this.isCheckingMode);
-        if (!isResultMode) {
-            this.selectedAnswer.setValue({ id: chosenAnswerId, type: radioButtonTypes$1.checked, isBlocked: this.isRadioBlocked }, { emitEvent: false });
-            return;
-        }
-        const type = this.isCheckedAnswerCorrect(chosenAnswerId, this.quizData) ? radioButtonTypes$1.checked : radioButtonTypes$1.error;
-        if (type === radioButtonTypes$1.error && (this.areAnswersRevealed || this.isCheckingMode)) {
-            const correctAnswer = this.questionAnswers.find(answer => answer.isCorrect);
-            if (correctAnswer)
-                this.correctAnswer = { id: correctAnswer.id, name: correctAnswer.content };
+        if (changes['question']?.currentValue) {
+            this.answerNotes = this.getAnswerNotes(this.question);
+            this.convertedOptions = this.convertToOptions();
+            this.changeDetectorRef.detectChanges();
+            const chosenAnswer = this.userAnswers.find(userAnswer => userAnswer.isChosen);
+            if (chosenAnswer && !this.quizData.isSubmitted)
+                this.selectedAnswer.setValue({ id: chosenAnswer.id, type: radioButtonTypes$1.checked }, { emitEvent: false });
+            if (this.quizData.isSubmitted || this.areAnswersRevealed || this.isCheckingMode) {
+                const userAnswers = this.quizData.userAnswers.find((userAnswer) => userAnswer.id === this.question.id);
+                const chosenAnswerId = userAnswers.userAnswers.find((answer) => answer.isChosen)?.id;
+                const type = this.isCheckedAnswerCorrect(chosenAnswerId, this.quizData) ? radioButtonTypes$1.checked : radioButtonTypes$1.error;
+                if (type === radioButtonTypes$1.error && (this.areAnswersRevealed || this.isCheckingMode)) {
+                    const correctAnswer = this.question.closedContent?.answers.find(answer => answer.isCorrect);
+                    if (correctAnswer)
+                        this.correctAnswer = { id: correctAnswer.id, name: correctAnswer.content };
+                }
+                this.selectedAnswer.setValue({ id: chosenAnswerId, type, isBlocked: true }, { emitEvent: false });
+            }
         }
-        this.selectedAnswer.setValue({ id: chosenAnswerId, type, isBlocked: true }, { emitEvent: false });
-    }
-    get isRadioBlocked() {
-        return this.areAnswersBlocked || this.areAnswersRevealed || this.isCheckingMode;
     }
     getAnswerNotes(question) {
-        return (question.closedContent?.answers ?? []).map(answer => {
+        return question.closedContent?.answers.map(answer => {
             if (answer.note)
                 return answer.note;
         });
     }
     convertToOptions() {
-        return this.questionAnswers.map(answer => ({ id: answer.id, name: answer.content }));
-    }
-    getChosenAnswerId() {
-        const selectedAnswerByInput = (this.userAnswers ?? []).find(userAnswer => userAnswer?.isChosen !== false);
-        if (selectedAnswerByInput?.id)
-            return selectedAnswerByInput.id;
-        const selectedAnswerByQuizData = this.quizData?.userAnswers?.find((userAnswer) => userAnswer.id === this.question.id)
-            ?.userAnswers?.find(answer => answer?.isChosen !== false);
-        return selectedAnswerByQuizData?.id;
+        return this.question.closedContent?.answers.map(answer => ({ id: answer.id, name: answer.content }));
     }
     isCheckedAnswerCorrect(answerId, quizData) {
         return quizData.questions.find((question) => question.closedContent?.answers?.find((answer) => answer.id === answerId)?.isCorrect);
     }
-    _onAnswerSelected(answerId) {
-        if (!answerId)
-            return;
-        this.onAnswersChange.emit([{
-                id: answerId,
-                index: this.questionAnswers.findIndex(answer => answer.id === answerId),
-                isChosen: true
-            }]);
+    ngOnInit() {
+        this.selectedAnswer.valueChanges.pipe(takeUntil$1(this.destroySubject$))
+            .subscribe(result => {
+            if (result)
+                this.onAnswersChange.emit([{
+                        id: result.id,
+                        index: this.question.closedContent?.answers.findIndex(answer => answer.id == result.id),
+                        isChosen: true
+                    }]);
+        });
     }
-    get questionAnswers() {
-        return this.question?.closedContent?.answers ?? [];
+    ngOnDestroy() {
+        this.destroySubject$.next(null);
+        this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizOneAnswerQuestionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizOneAnswerQuestionComponent, isStandalone: false, selector: "quiz-one-answer-question", inputs: { instructionTitle: "instructionTitle", question: "question", userAnswers: "userAnswers", quizData: "quizData", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", isCheckingMode: "isCheckingMode" }, outputs: { onAnswersChange: "onAnswersChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"instructionTitle\" class=\"instruction-title\">{{ instructionTitle }}</div>\r\n\r\n<herum-radio-button [options]=\"convertedOptions\" [secondarySelectedOption]=\"correctAnswer\"\r\n    [showAdditionalOptionsText]=\"areAnswersRevealed || isCheckingMode\" [isBlocked]=\"areAnswersBlocked\"\r\n    [isVertical]=\"true\" [formControl]=\"selectedAnswer\" (selectOptionEmitter)=\"_onAnswerSelected($event)\"\r\n    [ngClass]=\"{'revealed-answers':areAnswersRevealed || isCheckingMode}\" [additionalOptionsText]=\"answerNotes\">\r\n</herum-radio-button>", styles: ["", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HerumRadioButtonComponent, selector: "herum-radio-button", inputs: ["options", "isValid", "errorMsg", "isVertical", "isBlocked", "type", "selectedOption", "additionalOptionsText", "showAdditionalOptionsText", "secondarySelectedOption"], outputs: ["selectOptionEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizOneAnswerQuestionComponent, isStandalone: false, selector: "quiz-one-answer-question", inputs: { instructionTitle: "instructionTitle", question: "question", userAnswers: "userAnswers", quizData: "quizData", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", isCheckingMode: "isCheckingMode" }, outputs: { onAnswersChange: "onAnswersChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"instructionTitle\" class=\"instruction-title\">{{ instructionTitle }}</div>\r\n\r\n<herum-radio-button [options]=\"convertedOptions\" [secondarySelectedOption]=\"correctAnswer\"\r\n    [showAdditionalOptionsText]=\"areAnswersRevealed || isCheckingMode\" [isBlocked]=\"areAnswersBlocked\"\r\n    [isVertical]=\"true\" [formControl]=\"selectedAnswer\"\r\n    [ngClass]=\"{'revealed-answers':areAnswersRevealed || isCheckingMode}\" [additionalOptionsText]=\"answerNotes\">\r\n</herum-radio-button>", styles: ["", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HerumRadioButtonComponent, selector: "herum-radio-button", inputs: ["options", "isValid", "errorMsg", "isVertical", "isBlocked", "type", "selectedOption", "additionalOptionsText", "showAdditionalOptionsText", "secondarySelectedOption"], outputs: ["selectOptionEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizOneAnswerQuestionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'quiz-one-answer-question', template: "<div *ngIf=\"instructionTitle\" class=\"instruction-title\">{{ instructionTitle }}</div>\r\n\r\n<herum-radio-button [options]=\"convertedOptions\" [secondarySelectedOption]=\"correctAnswer\"\r\n    [showAdditionalOptionsText]=\"areAnswersRevealed || isCheckingMode\" [isBlocked]=\"areAnswersBlocked\"\r\n    [isVertical]=\"true\" [formControl]=\"selectedAnswer\" (selectOptionEmitter)=\"_onAnswerSelected($event)\"\r\n    [ngClass]=\"{'revealed-answers':areAnswersRevealed || isCheckingMode}\" [additionalOptionsText]=\"answerNotes\">\r\n</herum-radio-button>", styles: [".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\n"] }]
+            args: [{ standalone: false, selector: 'quiz-one-answer-question', template: "<div *ngIf=\"instructionTitle\" class=\"instruction-title\">{{ instructionTitle }}</div>\r\n\r\n<herum-radio-button [options]=\"convertedOptions\" [secondarySelectedOption]=\"correctAnswer\"\r\n    [showAdditionalOptionsText]=\"areAnswersRevealed || isCheckingMode\" [isBlocked]=\"areAnswersBlocked\"\r\n    [isVertical]=\"true\" [formControl]=\"selectedAnswer\"\r\n    [ngClass]=\"{'revealed-answers':areAnswersRevealed || isCheckingMode}\" [additionalOptionsText]=\"answerNotes\">\r\n</herum-radio-button>", styles: [".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { instructionTitle: [{
                 type: Input
             }], question: [{
@@ -1422,37 +1405,30 @@ class QuizMultiAnswerQuestionComponent {
         this.answersForm = this.fb.group({});
     }
     ngOnChanges(changes) {
-        if (!this.question)
-            return;
-        if (changes['question']?.currentValue)
-            this.initQuestionFormControls();
-        else if (changes['userAnswers'] || changes['quizData'] || changes['areAnswersRevealed'] || changes['isCheckingMode'])
-            this.syncQuestionFormControls();
-        if (this.areAnswersRevealed || this.isCheckingMode)
-            this.setAnswerTypeAttributes();
-        else
-            this.answerTypeAttributes = [];
-        if (this.correctAnswerCount === null || this.correctAnswerCount === undefined)
-            this.correctAnswerCount = this.questionAnswers.filter(answer => answer.isCorrect).length;
-    }
-    initQuestionFormControls() {
-        this.answersForm = this.fb.group({});
-        this.questionAnswers.forEach((answer, index) => {
-            const controlName = `${this.controlNamePrefix}${index}`;
-            this.answersForm.addControl(controlName, new FormControl(this.getFormControlValue(index)));
-            this.answersForm.get(controlName).valueChanges
-                .pipe(takeUntil(this.destroySubject$))
-                .subscribe((value) => this._onAnswersChange(this.questionAnswers[index], this.toIsChosen(value)));
-        });
-    }
-    syncQuestionFormControls() {
-        this.questionAnswers.forEach((answer, index) => {
-            const controlName = `${this.controlNamePrefix}${index}`;
-            this.answersForm.get(controlName)?.setValue(this.getFormControlValue(index), { emitEvent: false });
-        });
+        if (changes['question'] && this.question) {
+            if (!Object.keys(this.answersForm.controls).length) {
+                this.question.closedContent.answers.forEach((answer, index) => {
+                    const controlName = `${this.controlNamePrefix}${index}`;
+                    this.answersForm.addControl(controlName, new FormControl(this.getFormControlValue(index)));
+                    this.answersForm.get(controlName).valueChanges
+                        .pipe(takeUntil(this.destroySubject$))
+                        .subscribe((isChosen) => this._onAnswersChange(this.question.closedContent.answers[index], isChosen));
+                });
+            }
+            else {
+                this.question.closedContent.answers.forEach((answer, index) => {
+                    const controlName = `${this.controlNamePrefix}${index}`;
+                    this.answersForm.controls[controlName].setValue(this.getFormControlValue(index), { emitEvent: false });
+                });
+            }
+            if (this.areAnswersRevealed || this.isCheckingMode)
+                this.setAnswerTypeAttributes();
+            if (this.correctAnswerCount === null || this.correctAnswerCount === undefined)
+                this.correctAnswerCount = this.question.closedContent.answers.filter(answer => answer.isCorrect).length;
+        }
     }
     setAnswerTypeAttributes() {
-        this.answerTypeAttributes = this.questionAnswers.map((answer, index) => {
+        this.answerTypeAttributes = this.question.closedContent.answers.map((answer, index) => {
             const answerForm = this.answersForm.value[`${this.controlNamePrefix}` + index];
             return (!answerForm.type && this.iAnswerCorrect(answer.id, this.quizData)) ?
                 'correct-not-selected' :
@@ -1464,8 +1440,7 @@ class QuizMultiAnswerQuestionComponent {
         currentCheckbox._onClick();
     }
     _isAnswerChecked(answerId) {
-        const answer = this.userAnswers.find(userAnswer => userAnswer.id == answerId);
-        return answer ? answer.isChosen !== false : false;
+        return this.userAnswers.find(userAnswer => userAnswer.id == answerId)?.isChosen;
     }
     getTypeCheckbox(answerId) {
         if (!this._isAnswerChecked(answerId))
@@ -1476,36 +1451,27 @@ class QuizMultiAnswerQuestionComponent {
             return this.iAnswerCorrect(answerId, this.quizData) ? checkboxTypes$1.checked : checkboxTypes$1.error;
     }
     iAnswerCorrect(answerId, quizData) {
-        return quizData.questions.find((question) => question.closedContent?.answers?.find((answer) => answer.id === answerId)?.isCorrect);
+        return quizData.questions.find((question) => question.closedContent.answers?.find((answer) => answer.id === answerId)?.isCorrect);
     }
     _onAnswersChange(answer, isChosen) {
-        const selectedUserAnswers = [...(this.userAnswers ?? [])].filter(userAnswer => userAnswer?.isChosen !== false);
-        const userAnswer = selectedUserAnswers.find(currentUserAnswer => currentUserAnswer.id == answer.id);
-        if (userAnswer)
-            userAnswer.isChosen = isChosen;
-        else {
-            selectedUserAnswers.push({
+        let userAnswer = this.userAnswers.find(userAnswer => userAnswer.id == answer.id);
+        userAnswer ? (userAnswer.isChosen = isChosen) :
+            this.userAnswers.push({
                 id: answer.id,
                 index: answer.index,
                 isChosen
             });
-        }
-        const normalizedUserAnswers = selectedUserAnswers.filter(currentUserAnswer => currentUserAnswer?.isChosen !== false);
-        this.isValid = normalizedUserAnswers.length == this.correctAnswerCount;
-        this.onAnswersChange.emit(normalizedUserAnswers);
+        this.isValid = this.userAnswers.length == this.correctAnswerCount;
+        this.onAnswersChange.emit(this.userAnswers);
         this.onValidationChange.emit(this.isValid);
     }
     getFormControlValue(index) {
+        const id = this.question.closedContent.answers[index].id;
         return {
-            type: this.getTypeCheckbox(this.questionAnswers[index].id),
-            isChecked: this._isAnswerChecked(this.questionAnswers[index].id)
+            type: this.getTypeCheckbox(id),
+            isChecked: this._isAnswerChecked(id)
         };
     }
-    toIsChosen(value) {
-        if (typeof value === 'boolean')
-            return value;
-        return !!value?.isChecked;
-    }
     get controlNamePrefix() {
         return 'controlName';
     }
@@ -1513,20 +1479,17 @@ class QuizMultiAnswerQuestionComponent {
     get isBlocked() {
         return this.quizData?.isSubmitted || this.areAnswersBlocked || this.areAnswersRevealed;
     }
-    get questionAnswers() {
-        return this.question?.closedContent?.answers ?? [];
-    }
     ngOnDestroy() {
         this.destroySubject$.next(null);
         this.destroySubject$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizMultiAnswerQuestionComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizMultiAnswerQuestionComponent, isStandalone: false, selector: "quiz-multi-answer-question", inputs: { question: "question", quizData: "quizData", userAnswers: "userAnswers", isCheckingMode: "isCheckingMode", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", correctAnswerCount: "correctAnswerCount" }, outputs: { onAnswersChange: "onAnswersChange", onValidationChange: "onValidationChange" }, viewQueries: [{ propertyName: "checkboxes", predicate: HerumCheckboxComponent$1, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n    <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n    <form *ngIf=\"questionAnswers.length\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n        <div class=\"answer-item\" *ngFor=\"let answer of questionAnswers;let i=index\">\r\n            <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n                [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n                [attr.includes-additional-option-text]=\"(additionalOptionsText && additionalOptionsText[i]) ? 'true' : 'false'\">\r\n                <herum-checkbox [isBlocked]=\"isBlocked\" [formControlName]=\"controlNamePrefix + i\"\r\n                    [id]=\"controlNamePrefix + i\">\r\n                </herum-checkbox>\r\n\r\n                <p class=\"answer-text cursor-pointer\" [ngClass]=\"{'cursor-pointer':!isBlocked}\"\r\n                    (click)=\"_onAnswerClicked(i)\">{{ answer.content }}</p>\r\n            </div>\r\n\r\n            <span *ngIf=\"answer.note && (areAnswersRevealed || isCheckingMode)\" class=\"answer-note\">\r\n                {{ answer.note }}\r\n            </span>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".answer-text{line-height:1;font-size:14px;font-weight:700}.correct-answer-count{margin-block-end:0;font-size:14px}.answers-container,.main-container{display:flex;flex-direction:column;gap:8px;width:100%}.answer-container{display:flex;align-items:center;gap:8px}.answer-container,.answer-note{flex:1}\n", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizMultiAnswerQuestionComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizMultiAnswerQuestionComponent, isStandalone: false, selector: "quiz-multi-answer-question", inputs: { question: "question", quizData: "quizData", userAnswers: "userAnswers", isCheckingMode: "isCheckingMode", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", correctAnswerCount: "correctAnswerCount" }, outputs: { onAnswersChange: "onAnswersChange", onValidationChange: "onValidationChange" }, viewQueries: [{ propertyName: "checkboxes", predicate: HerumCheckboxComponent$1, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n    <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n    <form *ngIf=\"question.closedContent.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n        <div class=\"answer-item\" *ngFor=\"let answer of question.closedContent.answers;let i=index\">\r\n            <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n                [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n                [attr.includes-additional-option-text]=\"(additionalOptionsText && additionalOptionsText[i]) ? 'true' : 'false'\">\r\n                <herum-checkbox [isBlocked]=\"isBlocked\" [formControlName]=\"controlNamePrefix + i\"\r\n                    [id]=\"controlNamePrefix + i\">\r\n                </herum-checkbox>\r\n\r\n                <p class=\"answer-text cursor-pointer\" [ngClass]=\"{'cursor-pointer':!isBlocked}\"\r\n                    (click)=\"_onAnswerClicked(i)\">{{ answer.content }}</p>\r\n            </div>\r\n\r\n            <span *ngIf=\"answer.note && (areAnswersRevealed || isCheckingMode)\" class=\"answer-note\">\r\n                {{ answer.note }}\r\n            </span>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".answer-text{line-height:1;font-size:14px;font-weight:700}.correct-answer-count{margin-block-end:0;font-size:14px}.answers-container,.main-container{display:flex;flex-direction:column;gap:8px;width:100%}.answer-container{display:flex;align-items:center;gap:8px}.answer-container,.answer-note{flex:1}\n", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizMultiAnswerQuestionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'quiz-multi-answer-question', template: "<div class=\"main-container\">\r\n    <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n    <form *ngIf=\"questionAnswers.length\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n        <div class=\"answer-item\" *ngFor=\"let answer of questionAnswers;let i=index\">\r\n            <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n                [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n                [attr.includes-additional-option-text]=\"(additionalOptionsText && additionalOptionsText[i]) ? 'true' : 'false'\">\r\n                <herum-checkbox [isBlocked]=\"isBlocked\" [formControlName]=\"controlNamePrefix + i\"\r\n                    [id]=\"controlNamePrefix + i\">\r\n                </herum-checkbox>\r\n\r\n                <p class=\"answer-text cursor-pointer\" [ngClass]=\"{'cursor-pointer':!isBlocked}\"\r\n                    (click)=\"_onAnswerClicked(i)\">{{ answer.content }}</p>\r\n            </div>\r\n\r\n            <span *ngIf=\"answer.note && (areAnswersRevealed || isCheckingMode)\" class=\"answer-note\">\r\n                {{ answer.note }}\r\n            </span>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".answer-text{line-height:1;font-size:14px;font-weight:700}.correct-answer-count{margin-block-end:0;font-size:14px}.answers-container,.main-container{display:flex;flex-direction:column;gap:8px;width:100%}.answer-container{display:flex;align-items:center;gap:8px}.answer-container,.answer-note{flex:1}\n", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { question: [{
+            args: [{ standalone: false, selector: 'quiz-multi-answer-question', template: "<div class=\"main-container\">\r\n    <p class=\"correct-answer-count\">\u05D9\u05E9 \u05DC\u05E1\u05DE\u05DF {{ correctAnswerCount }} \u05EA\u05E9\u05D5\u05D1\u05D5\u05EA</p>\r\n\r\n    <form *ngIf=\"question.closedContent.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n        <div class=\"answer-item\" *ngFor=\"let answer of question.closedContent.answers;let i=index\">\r\n            <div class=\"answer-container\" [ngClass]=\"{'revealed-answers':(areAnswersRevealed || isCheckingMode)}\"\r\n                [attr.type]=\"(areAnswersRevealed || isCheckingMode) ? answerTypeAttributes[i] : ''\"\r\n                [attr.includes-additional-option-text]=\"(additionalOptionsText && additionalOptionsText[i]) ? 'true' : 'false'\">\r\n                <herum-checkbox [isBlocked]=\"isBlocked\" [formControlName]=\"controlNamePrefix + i\"\r\n                    [id]=\"controlNamePrefix + i\">\r\n                </herum-checkbox>\r\n\r\n                <p class=\"answer-text cursor-pointer\" [ngClass]=\"{'cursor-pointer':!isBlocked}\"\r\n                    (click)=\"_onAnswerClicked(i)\">{{ answer.content }}</p>\r\n            </div>\r\n\r\n            <span *ngIf=\"answer.note && (areAnswersRevealed || isCheckingMode)\" class=\"answer-note\">\r\n                {{ answer.note }}\r\n            </span>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".answer-text{line-height:1;font-size:14px;font-weight:700}.correct-answer-count{margin-block-end:0;font-size:14px}.answers-container,.main-container{display:flex;flex-direction:column;gap:8px;width:100%}.answer-container{display:flex;align-items:center;gap:8px}.answer-container,.answer-note{flex:1}\n", ".quiz-container{display:flex;flex-direction:column;gap:16px}.quiz-container p,.quiz-container b{font-size:16px;margin-bottom:.25rem}.quiz-container .quiz-title{font-weight:700}.quiz-container .error-message{color:var(--error-color);font-weight:700}.quiz-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container{display:flex;flex-direction:column;gap:16px}.answers-container .answer-item{display:flex;flex-direction:row;gap:8px}.answers-container .answer-note{background-color:var(--light-text-color);border-radius:var(border-radius);font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { question: [{
                 type: Input
             }], quizData: [{
                 type: Input
@@ -1587,8 +1550,7 @@ class HerumQuizComponent {
                             isCorrect: true,
                             index: 1
                         }
-                    ],
-                    numberOfCorrectAnswers: 1
+                    ]
                 }
             }
         ]
@@ -1598,7 +1560,7 @@ class HerumQuizComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         this.mergeQuizUserDataIntoQuizData();
         this.quizData.currentQuestion = this.quizData.isSubmitted ? this.quizData.questions.length + 2 : this.quizData.currentQuestion ? this.quizData.currentQuestion : 0;
     }
@@ -1610,7 +1572,7 @@ class HerumQuizComponent {
             return true;
         if (this.currentQuestionIndex >= this.quizData.questions.length)
             return this.isValidQuiz;
-        return this._getUserAnswers(this.quizData.questions[this.currentQuestionIndex]?.id).length === this.getCorrectAnswersCount(this.quizData.questions?.find((userAnswer) => userAnswer.id === this.quizData.questions[this.currentQuestionIndex]?.id));
+        return this._getUserAnswers(this.quizData.questions[this.currentQuestionIndex]?.id).length == this.getCorrectAnswersCount(this.quizData.questions?.find((userAnswer) => userAnswer.id == this.quizData.questions[this.currentQuestionIndex]?.id));
     }
     get nextButtonText() {
         switch (this.quizData.currentQuestion) {
@@ -1640,13 +1602,12 @@ class HerumQuizComponent {
             .filter(userQuestionAnswer => userQuestionAnswer.userAnswers.some(userAnswer => userAnswer.isChosen)).length;
     }
     get isLastQuestion() {
-        return this.quizData.currentQuestion === this.quizData.questions.length + 1;
+        return this.quizData.currentQuestion == this.quizData.questions.length + 1;
     }
     getCorrectAnswersCount(question) {
         if (!question?.closedContent?.answers?.length)
             return 0;
-        return question.closedContent.numberOfCorrectAnswers ??
-            question.closedContent.answers.filter((answer) => answer.isCorrect).length;
+        return question.closedContent.answers.filter((answer) => answer.isCorrect).length;
     }
     _nextQuestion(isSkipped = false) {
         this.isCurrentQuestionValid = false;
@@ -1970,13 +1931,13 @@ class HerumInputFieldComponent {
             this.destroySubject$.complete();
         }
     }
-    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 }], 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.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, deps: [{ token: i1$3.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 }], 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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$1.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\" (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: [{
+        }], ctorParameters: () => [{ type: i1$3.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -2038,7 +1999,7 @@ class HerumUserProgressComponent {
             'כשירות טובה מאוד' : 'כשירות מושלמת! כל הכבוד!';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProgressComponent, isStandalone: false, selector: "app-herum-user-progress", inputs: { title: "title", percentage: "percentage", type: "type" }, ngImport: i0, template: "<div class=\"user-progress-container\" [ngClass]=\"{'p-0':type == 'solid'}\">\r\n    <div class=\"mb-2 row\">\r\n        <div class=\"col-7 section-title\">{{ title }}</div>\r\n        <div class=\"col-5 section-title left\">{{ percentageLabel }}</div>\r\n    </div>\r\n\r\n    <herum-progress-bar [percentage]=\"percentage\" [type]=\"'solid'\"></herum-progress-bar>\r\n</div>", styles: [".user-progress-container{padding:10px;gap:10px;display:flex;flex-direction:column}.left{text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProgressComponent, isStandalone: false, selector: "app-herum-user-progress", inputs: { title: "title", percentage: "percentage", type: "type" }, ngImport: i0, template: "<div class=\"user-progress-container\" [ngClass]=\"{'p-0':type == 'solid'}\">\r\n    <div class=\"mb-2 row\">\r\n        <div class=\"col-7 section-title\">{{ title }}</div>\r\n        <div class=\"col-5 section-title left\">{{ percentageLabel }}</div>\r\n    </div>\r\n\r\n    <herum-progress-bar [percentage]=\"percentage\" [type]=\"'solid'\"></herum-progress-bar>\r\n</div>", styles: [".user-progress-container{padding:10px;gap:10px;display:flex;flex-direction:column}.left{text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProgressComponent, decorators: [{
             type: Component,
@@ -2378,7 +2339,7 @@ class HerumHierarchyTreeNodeComponent {
         return this.environmentConfig?.environment?.systemIdentifier == system$1.hadracha;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumHierarchyTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumHierarchyTreeNodeComponent, isStandalone: false, selector: "herum-hierarchy-tree-node", inputs: { treeNodeData: "treeNodeData", size: "size", expandedMode: "expandedMode", showArrow: "showArrow", showAssignmentsDetails: "showAssignmentsDetails", nodeMenuItems: "nodeMenuItems" }, outputs: { onNodeSelected: "onNodeSelected", onMenuItemSelected: "onMenuItemSelected", onExpand: "onExpand" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0 && treeNodeData.loggedUserPermissions?.edit\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\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: "component", type: i2$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "component", type: i2$3.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumHierarchyTreeNodeComponent, isStandalone: false, selector: "herum-hierarchy-tree-node", inputs: { treeNodeData: "treeNodeData", size: "size", expandedMode: "expandedMode", showArrow: "showArrow", showAssignmentsDetails: "showAssignmentsDetails", nodeMenuItems: "nodeMenuItems" }, outputs: { onNodeSelected: "onNodeSelected", onMenuItemSelected: "onMenuItemSelected", onExpand: "onExpand" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0 && treeNodeData.loggedUserPermissions?.edit\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\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: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "component", type: i2$2.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumHierarchyTreeNodeComponent, decorators: [{
             type: Component,
@@ -2635,7 +2596,7 @@ class HerumDateTimeInputComponent {
         return isValidDate && isValidTime;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n    [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n    (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2$3.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n    [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n    (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2$2.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, decorators: [{
             type: Component,
@@ -2697,7 +2658,7 @@ class HerumDateTimePickerComponent {
         this.dateChange.emit(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimePickerComponent, isStandalone: false, selector: "herum-date-time-picker", inputs: { showDatePicker: "showDatePicker", showTimePicker: "showTimePicker", showTimeSelect: "showTimeSelect", selectedTime: "selectedTime", selectedDate: "selectedDate", rangeMode: "rangeMode", minDate: "minDate", timePickerHoverColor: "timePickerHoverColor", timePickerActiveColor: "timePickerActiveColor", widthDatePicker: "widthDatePicker", heightTimePicker: "heightTimePicker", datePickerHoverColor: "datePickerHoverColor", datePickerActiveColor: "datePickerActiveColor", showSeconds: "showSeconds", timePickerItemSize: "timePickerItemSize" }, outputs: { timeChange: "timeChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"date-time-picker\" [ngClass]=\"{'flex-column':showTimeSelect && rangeMode}\">\r\n    <herum-date-picker *ngIf=\"showDatePicker\" [rangeMode]=\"rangeMode\" [minDate]=\"minDate\"\r\n        [hoverColor]=\"datePickerHoverColor\" [activeColor]=\"datePickerActiveColor\" [selectedDate]=\"selectedDate\"\r\n        (dateChange)=\"_dateChange($event)\"></herum-date-picker>\r\n\r\n    <herum-time-picker *ngIf=\"showTimePicker\" [ngClass]=\"{'me-5':showDatePicker}\" [selectedTime]=\"selectedTime\"\r\n        [showSeconds]=\"showSeconds\" [itemSize]=\"timePickerItemSize\" [hoverColor]=\"timePickerHoverColor\"\r\n        [activeColor]=\"timePickerActiveColor\" (timeChange)=\"_timeChange($event)\"></herum-time-picker>\r\n</div>", styles: [":host{--width-date-picker: 320px;--height-time-picker: 325px}.date-time-picker{display:flex;justify-content:center}herum-date-picker{width:var(--width-date-picker)}herum-time-picker{height:var(--height-time-picker)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.HerumDatePickerComponent, selector: "herum-date-picker", inputs: ["activeColor", "hoverColor", "minDate", "rangeMode", "selectedDate"], outputs: ["dateChange"] }, { kind: "component", type: i2$3.HerumTimePickerComponent, selector: "herum-time-picker", inputs: ["activeColor", "hoverColor", "itemSize", "selectedTime", "showSeconds"], outputs: ["timeChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimePickerComponent, isStandalone: false, selector: "herum-date-time-picker", inputs: { showDatePicker: "showDatePicker", showTimePicker: "showTimePicker", showTimeSelect: "showTimeSelect", selectedTime: "selectedTime", selectedDate: "selectedDate", rangeMode: "rangeMode", minDate: "minDate", timePickerHoverColor: "timePickerHoverColor", timePickerActiveColor: "timePickerActiveColor", widthDatePicker: "widthDatePicker", heightTimePicker: "heightTimePicker", datePickerHoverColor: "datePickerHoverColor", datePickerActiveColor: "datePickerActiveColor", showSeconds: "showSeconds", timePickerItemSize: "timePickerItemSize" }, outputs: { timeChange: "timeChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"date-time-picker\" [ngClass]=\"{'flex-column':showTimeSelect && rangeMode}\">\r\n    <herum-date-picker *ngIf=\"showDatePicker\" [rangeMode]=\"rangeMode\" [minDate]=\"minDate\"\r\n        [hoverColor]=\"datePickerHoverColor\" [activeColor]=\"datePickerActiveColor\" [selectedDate]=\"selectedDate\"\r\n        (dateChange)=\"_dateChange($event)\"></herum-date-picker>\r\n\r\n    <herum-time-picker *ngIf=\"showTimePicker\" [ngClass]=\"{'me-5':showDatePicker}\" [selectedTime]=\"selectedTime\"\r\n        [showSeconds]=\"showSeconds\" [itemSize]=\"timePickerItemSize\" [hoverColor]=\"timePickerHoverColor\"\r\n        [activeColor]=\"timePickerActiveColor\" (timeChange)=\"_timeChange($event)\"></herum-time-picker>\r\n</div>", styles: [":host{--width-date-picker: 320px;--height-time-picker: 325px}.date-time-picker{display:flex;justify-content:center}herum-date-picker{width:var(--width-date-picker)}herum-time-picker{height:var(--height-time-picker)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.HerumDatePickerComponent, selector: "herum-date-picker", inputs: ["activeColor", "hoverColor", "minDate", "rangeMode", "selectedDate"], outputs: ["dateChange"] }, { kind: "component", type: i2$2.HerumTimePickerComponent, selector: "herum-time-picker", inputs: ["activeColor", "hoverColor", "itemSize", "selectedTime", "showSeconds"], outputs: ["timeChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimePickerComponent, decorators: [{
             type: Component,
@@ -2787,7 +2748,7 @@ class HerumTimeSelectComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTimeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTimeSelectComponent, isStandalone: false, selector: "herum-time-select", inputs: { showSeconds: "showSeconds", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder", hoursPlaceholder: "hoursPlaceholder", selectedTime: "selectedTime", label: "label" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <label class=\"input-title\">{{label}}</label>\r\n\r\n    <div class=\"time-container\">\r\n        <ng-container *ngIf=\"showSeconds\">\r\n            <herum-select [options]=\"seconds\" [selectedOption]=\"selectedSecond\" size='min'\r\n                [placeholder]=\"secondsPlaceholder\" [label]=\"start\"\r\n                (selectedOptionEmitter)=\"_selectedSecondOptionChange($event)\"></herum-select>\r\n\r\n            <span class=\"seperator\">:</span>\r\n        </ng-container>\r\n\r\n        <herum-select [options]=\"minutes\" size='min' [selectedOption]=\"selectedMinute\"\r\n            [placeholder]=\"minutesPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedMinuteOptionChange($event)\"></herum-select>\r\n\r\n        <span class=\"seperator\">:</span>\r\n\r\n        <herum-select [options]=\"hours\" size='min' [selectedOption]=\"selectedHour\" [placeholder]=\"hoursPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedHourOptionChange($event)\"></herum-select>\r\n    </div>\r\n</div>", styles: [".time-container{display:flex;align-items:center;justify-content:center;gap:8px}label{font-size:var(--standard-font-size)}.seperator{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTimeSelectComponent, isStandalone: false, selector: "herum-time-select", inputs: { showSeconds: "showSeconds", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder", hoursPlaceholder: "hoursPlaceholder", selectedTime: "selectedTime", label: "label" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <label class=\"input-title\">{{label}}</label>\r\n\r\n    <div class=\"time-container\">\r\n        <ng-container *ngIf=\"showSeconds\">\r\n            <herum-select [options]=\"seconds\" [selectedOption]=\"selectedSecond\" size='min'\r\n                [placeholder]=\"secondsPlaceholder\" [label]=\"start\"\r\n                (selectedOptionEmitter)=\"_selectedSecondOptionChange($event)\"></herum-select>\r\n\r\n            <span class=\"seperator\">:</span>\r\n        </ng-container>\r\n\r\n        <herum-select [options]=\"minutes\" size='min' [selectedOption]=\"selectedMinute\"\r\n            [placeholder]=\"minutesPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedMinuteOptionChange($event)\"></herum-select>\r\n\r\n        <span class=\"seperator\">:</span>\r\n\r\n        <herum-select [options]=\"hours\" size='min' [selectedOption]=\"selectedHour\" [placeholder]=\"hoursPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedHourOptionChange($event)\"></herum-select>\r\n    </div>\r\n</div>", styles: [".time-container{display:flex;align-items:center;justify-content:center;gap:8px}label{font-size:var(--standard-font-size)}.seperator{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTimeSelectComponent, decorators: [{
             type: Component,
@@ -3400,7 +3361,7 @@ class UserActionDirective {
         };
         this.http.post(this.environmentConfig?.environment?.userAction, obj).subscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserActionDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserActionDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: UserActionDirective, isStandalone: false, selector: "[userAction]", inputs: { description: ["userAction", "description"] }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserActionDirective, decorators: [{
@@ -3409,7 +3370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     standalone: false,
                     selector: '[userAction]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$4.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }], propDecorators: { description: [{
@@ -3464,7 +3425,7 @@ class AudioSliderComponent {
             this.sliderChange.emit(this.sliderValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AudioSliderComponent, isStandalone: false, selector: "audio-slider", inputs: { sliderValue: "sliderValue", maxValue: "maxValue", color: "color", id: "id" }, outputs: { sliderChange: "sliderChange" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"wrapper\">\r\n    <div class=\"range\">\r\n        <input [style.background]=\"'linear-gradient(to right, #f50 100%, #ccc 0%);'\" type=\"range\" [id]=\"id\" [min]=\"0\" [max]=\"maxValue\" [value]=\"100\" [(ngModel)]=\"sliderValue\"\r\n            (input)=\"updateSliderBackground()\" />\r\n    </div>\r\n</div>", styles: [".wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;direction:ltr}.wrapper .range{position:relative}.wrapper input[type=range]{-webkit-appearance:none;width:100%;direction:ltr;height:4px;border-radius:5px;outline:none;transition:background .3s ease}.wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;width:14px!important;height:14px!important;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))!important;border-radius:50%!important;cursor:pointer!important}.wrapper input[type=range]::-moz-range-thumb{background:#fff;width:14px!important;height:14px!important;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))!important;border-radius:50%!important;cursor:pointer!important}.wrapper .value{margin-top:10px;font-size:16px;color:#333;text-align:center}\n"], dependencies: [{ 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AudioSliderComponent, isStandalone: false, selector: "audio-slider", inputs: { sliderValue: "sliderValue", maxValue: "maxValue", color: "color", id: "id" }, outputs: { sliderChange: "sliderChange" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"wrapper\">\r\n    <div class=\"range\">\r\n        <input [style.background]=\"'linear-gradient(to right, #f50 100%, #ccc 0%);'\" type=\"range\" [id]=\"id\" [min]=\"0\" [max]=\"maxValue\" [value]=\"100\" [(ngModel)]=\"sliderValue\"\r\n            (input)=\"updateSliderBackground()\" />\r\n    </div>\r\n</div>", styles: [".wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;direction:ltr}.wrapper .range{position:relative}.wrapper input[type=range]{-webkit-appearance:none;width:100%;direction:ltr;height:4px;border-radius:5px;outline:none;transition:background .3s ease}.wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;width:14px!important;height:14px!important;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))!important;border-radius:50%!important;cursor:pointer!important}.wrapper input[type=range]::-moz-range-thumb{background:#fff;width:14px!important;height:14px!important;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))!important;border-radius:50%!important;cursor:pointer!important}.wrapper .value{margin-top:10px;font-size:16px;color:#333;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$3.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$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioSliderComponent, decorators: [{
             type: Component,
@@ -3883,13 +3844,13 @@ class AudioPlayerComponent {
         this.pauseAudio();
         this.removeAudioElementEventListeners();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioPlayerComponent, deps: [{ token: AudioVisualizationService }, { token: i2$1.GlobalKeyboardListenerService }, { token: i2$1.KeyPressService }, { token: i2$1.UtilsService }, { token: SYSTEM_AUDIO_VISUAL_CONFIGURATION$1 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioPlayerComponent, deps: [{ token: AudioVisualizationService }, { token: i1$2.GlobalKeyboardListenerService }, { token: i1$2.KeyPressService }, { token: i1$2.UtilsService }, { token: SYSTEM_AUDIO_VISUAL_CONFIGURATION$1 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AudioPlayerComponent, isStandalone: false, selector: "herum-audio-player", inputs: { showVolumeSliders: "showVolumeSliders", isPreview: "isPreview", getTimeUpdate: "getTimeUpdate", playbackSpeed: "playbackSpeed", isBlock: "isBlock", currentTime: "currentTime", isAudioPlaying: "isAudioPlaying", width: "width", id: "id", audioFile: "audioFile", mediaSettings: "mediaSettings", bucketName: "bucketName", theme: "theme" }, outputs: { periodicCurrentTime: "periodicCurrentTime", isLoadingChange: "isLoadingChange", timingUpdateByRequest: "timingUpdateByRequest", mediaSettingsUpdate: "mediaSettingsUpdate" }, host: { listeners: { "window:resize": "onWindowResize()", "document:keyup": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "audioCanvas", first: true, predicate: ["audioCanvas"], descendants: true }, { propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "audioContainer", first: true, predicate: ["audioContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"audio-container\" #audioContainer>\r\n    <p class=\"current-time\" *ngIf=\"!errorMessage\">{{ currentTimeLabel }}</p>\r\n\r\n    <p *ngIf=\"errorMessage\" class=\"m-0 d-flex gap-2 align-items-center\">\r\n        <img src=\"/assets/college/learningArea/error.svg\">\r\n        {{ errorMessage }}\r\n    </p>\r\n\r\n    <div class=\"audio-loader-container\" [userAction]=\"'currentTime: ' + currentTime\">\r\n        <canvas [class.transparent]=\"isLoading\" #audioCanvas (click)=\"_onCanvasClick($event)\"> </canvas>\r\n    </div>\r\n\r\n    <div class=\"audio-controls\">\r\n        <div *ngIf=\"showVolumeSliders\" class=\"volume-container\">\r\n            <div class=\"right slider-container\">\r\n                <label>R</label>\r\n                <audio-slider color=\"var(--audio-player-right-slider)\" [id]=\"'right'\" userAction [sliderValue]=\"rightVolume*100\"\r\n                    (sliderChange)=\"rightVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n\r\n            <div class=\"left slider-container\">\r\n                <label>L</label>\r\n                <audio-slider color=\"var(--audio-player-left-slider)\" [id]=\"'left'\" userAction [sliderValue]=\"leftVolume*100\"\r\n                    (sliderChange)=\"leftVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n        </div>\r\n\r\n        <button class=\"control-button\" [userAction]=\"'currentTime: ' + currentTime\" (click)=\"_skipForward(15)\" userAction>\r\n            <img src=\"assets/shared/audio-images/next15.svg\" alt=\"Fast Forward\" />\r\n        </button>\r\n\r\n        <button class=\"control-button play-button\" [userAction]=\"isAudioPlaying ? 'play' : 'pause'\"\r\n            (click)=\"_onTogglePlay()\">\r\n            <ng-container *ngIf=\"!isLoading\">\r\n                <img *ngIf=\"!isBlock\"\r\n                    [src]=\"isAudioPlaying ? pauseIcon : playIcon\"\r\n                    alt=\"Play/Pause\" />\r\n                <img *ngIf=\"isBlock\"\r\n                    [src]=\"isAudioPlaying ? 'assets/shared/audio-images/gray-pause.svg' : 'assets/shared/audio-images/gray-play.svg'\"\r\n                    alt=\"Play/Pause\" />\r\n            </ng-container>\r\n            <herum-spinner *ngIf=\"isLoading\"></herum-spinner>\r\n        </button>\r\n\r\n        <button class=\"control-button\" (click)=\"_skipBackward(15)\" [userAction]=\"'currentTime: ' + currentTime\">\r\n            <img src=\"assets/shared/audio-images/previous15.svg\" alt=\"Rewind\" />\r\n        </button>\r\n\r\n        <div class=\"speed-control\">\r\n            <herum-video-select class=\"video-speed-select\" userAction [options]=\"speedOptions\"\r\n                [currentVideoSpeed]=\"playbackSpeed\" (selectedOptionEmitter)=\"_updatePlaybackSpeed($event)\">\r\n            </herum-video-select>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":root{--background-color: #f2f2f2;background-color:var(--background-color)}*{box-sizing:border-box}.audio-container{text-align:center;flex:1}.time-control{margin:20px}canvas{width:100%;height:116px;border-radius:8px;margin-top:4px;opacity:1}.transparent{opacity:0!important}.audio-loader-container{position:relative;display:flex;align-items:center;justify-content:center}.audio-loader-container .d-flex{position:absolute;z-index:2}.audio-controls{padding:12px;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--background-color);height:calc(100% - 160px)}.control-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:12px;cursor:pointer;transition:background .3s ease;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.control-button img{width:20px;height:20px}.control-button:hover{background:#f0f0f0}.play-button{width:50px;height:50px;border:none;border-radius:50%}.play-button img{width:25px;height:25px}.speed-control{display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:5px;padding:5px 10px;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.current-time{font-weight:400;font-size:14px;text-align:left;margin:0}.speed-control select{border:none;background:transparent;font-size:14px;outline:none;cursor:pointer}.volume-sliders{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:10px}.volume-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.slider-container{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:10px}.slider-container label{margin:0;background:#d18a8a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff}.left label{background-color:var(--audio-player-left-slider)}.right label{background-color:var(--audio-player-right-slider)}audio-slider{width:90px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "component", type: HerumSpinnerComponent, selector: "herum-spinner", inputs: ["size", "borderColor", "borderWidth", "borderTopColor", "shape"] }, { kind: "component", type: HerumVideoSelectComponent, selector: "herum-video-select", inputs: ["currentVideoSpeed", "options"], outputs: ["selectedOptionEmitter"] }, { kind: "component", type: AudioSliderComponent, selector: "audio-slider", inputs: ["sliderValue", "maxValue", "color", "id"], outputs: ["sliderChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioPlayerComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-audio-player', template: "<div class=\"audio-container\" #audioContainer>\r\n    <p class=\"current-time\" *ngIf=\"!errorMessage\">{{ currentTimeLabel }}</p>\r\n\r\n    <p *ngIf=\"errorMessage\" class=\"m-0 d-flex gap-2 align-items-center\">\r\n        <img src=\"/assets/college/learningArea/error.svg\">\r\n        {{ errorMessage }}\r\n    </p>\r\n\r\n    <div class=\"audio-loader-container\" [userAction]=\"'currentTime: ' + currentTime\">\r\n        <canvas [class.transparent]=\"isLoading\" #audioCanvas (click)=\"_onCanvasClick($event)\"> </canvas>\r\n    </div>\r\n\r\n    <div class=\"audio-controls\">\r\n        <div *ngIf=\"showVolumeSliders\" class=\"volume-container\">\r\n            <div class=\"right slider-container\">\r\n                <label>R</label>\r\n                <audio-slider color=\"var(--audio-player-right-slider)\" [id]=\"'right'\" userAction [sliderValue]=\"rightVolume*100\"\r\n                    (sliderChange)=\"rightVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n\r\n            <div class=\"left slider-container\">\r\n                <label>L</label>\r\n                <audio-slider color=\"var(--audio-player-left-slider)\" [id]=\"'left'\" userAction [sliderValue]=\"leftVolume*100\"\r\n                    (sliderChange)=\"leftVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n        </div>\r\n\r\n        <button class=\"control-button\" [userAction]=\"'currentTime: ' + currentTime\" (click)=\"_skipForward(15)\" userAction>\r\n            <img src=\"assets/shared/audio-images/next15.svg\" alt=\"Fast Forward\" />\r\n        </button>\r\n\r\n        <button class=\"control-button play-button\" [userAction]=\"isAudioPlaying ? 'play' : 'pause'\"\r\n            (click)=\"_onTogglePlay()\">\r\n            <ng-container *ngIf=\"!isLoading\">\r\n                <img *ngIf=\"!isBlock\"\r\n                    [src]=\"isAudioPlaying ? pauseIcon : playIcon\"\r\n                    alt=\"Play/Pause\" />\r\n                <img *ngIf=\"isBlock\"\r\n                    [src]=\"isAudioPlaying ? 'assets/shared/audio-images/gray-pause.svg' : 'assets/shared/audio-images/gray-play.svg'\"\r\n                    alt=\"Play/Pause\" />\r\n            </ng-container>\r\n            <herum-spinner *ngIf=\"isLoading\"></herum-spinner>\r\n        </button>\r\n\r\n        <button class=\"control-button\" (click)=\"_skipBackward(15)\" [userAction]=\"'currentTime: ' + currentTime\">\r\n            <img src=\"assets/shared/audio-images/previous15.svg\" alt=\"Rewind\" />\r\n        </button>\r\n\r\n        <div class=\"speed-control\">\r\n            <herum-video-select class=\"video-speed-select\" userAction [options]=\"speedOptions\"\r\n                [currentVideoSpeed]=\"playbackSpeed\" (selectedOptionEmitter)=\"_updatePlaybackSpeed($event)\">\r\n            </herum-video-select>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":root{--background-color: #f2f2f2;background-color:var(--background-color)}*{box-sizing:border-box}.audio-container{text-align:center;flex:1}.time-control{margin:20px}canvas{width:100%;height:116px;border-radius:8px;margin-top:4px;opacity:1}.transparent{opacity:0!important}.audio-loader-container{position:relative;display:flex;align-items:center;justify-content:center}.audio-loader-container .d-flex{position:absolute;z-index:2}.audio-controls{padding:12px;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--background-color);height:calc(100% - 160px)}.control-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:12px;cursor:pointer;transition:background .3s ease;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.control-button img{width:20px;height:20px}.control-button:hover{background:#f0f0f0}.play-button{width:50px;height:50px;border:none;border-radius:50%}.play-button img{width:25px;height:25px}.speed-control{display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:5px;padding:5px 10px;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.current-time{font-weight:400;font-size:14px;text-align:left;margin:0}.speed-control select{border:none;background:transparent;font-size:14px;outline:none;cursor:pointer}.volume-sliders{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:10px}.volume-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.slider-container{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:10px}.slider-container label{margin:0;background:#d18a8a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff}.left label{background-color:var(--audio-player-left-slider)}.right label{background-color:var(--audio-player-right-slider)}audio-slider{width:90px}\n"] }]
-        }], ctorParameters: () => [{ type: AudioVisualizationService }, { type: i2$1.GlobalKeyboardListenerService }, { type: i2$1.KeyPressService }, { type: i2$1.UtilsService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: AudioVisualizationService }, { type: i1$2.GlobalKeyboardListenerService }, { type: i1$2.KeyPressService }, { type: i1$2.UtilsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SYSTEM_AUDIO_VISUAL_CONFIGURATION$1]
                 }] }], propDecorators: { showVolumeSliders: [{
@@ -4111,7 +4072,7 @@ class HerumTextAreaComponent {
         return svgsStrings$1.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\"\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$1.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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.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$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTextAreaComponent, decorators: [{
             type: Component,
@@ -4978,13 +4939,13 @@ class TrackTextChangesComponent {
         const actions = this.allowedActions?.length ? this.allowedActions : this.defaultAllowedActions;
         return actions.includes(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesComponent, deps: [{ token: i2$1.TrackTextChangesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TrackTextChangesComponent, isStandalone: false, selector: "track-text-changes", inputs: { changes: "changes", selectedChange: "selectedChange", currentUser: "currentUser", baseContent: "baseContent", isReadOnly: "isReadOnly", fontSize: "fontSize", showComments: "showComments", allowedActions: "allowedActions" }, outputs: { changesEmitter: "changesEmitter" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"editor-container\" class=\"editor-container\" dir=\"rtl\" [ngClass]=\"{'editor-container-with-grid':showComments}\">\r\n  <div #editor class=\"text-editor\" [attr.contenteditable]=\"!isReadOnly\" (keydown)=\"_onKeyDown($event)\"\r\n    (mouseup)=\"_onTextSelection()\" (drop)=\"_onDropTextSelection($event)\">\r\n  </div>\r\n\r\n  <div *ngIf=\"showComments\" class=\"comments-panel\">\r\n    <h3>\u05D4\u05E2\u05E8\u05D5\u05EA:</h3>\r\n    <div *ngFor=\"let change of changes\">\r\n      <div class=\"comment\">\r\n        <div class=\"comment-header align-items-center\">\r\n          <strong><img [src]=\"change?.creatingUser?.pictureUrl\">{{ change?.creatingUser?.firstName + ' ' +\r\n            change?.creatingUser?.lastName }}</strong>\r\n          <span>{{ change.timestamp | date:'dd/MM/yy' }}</span>\r\n        </div>\r\n\r\n        <p #commentRef class=\"reference-text\" appHerumToolTip\r\n          [matTooltip]=\"_isTruncatedElement(commentRef) ? change.note : ''\">\r\n          <img src=\"assets/shared/trackChanges/text-reference.svg\">\r\n          {{ change.note | ellipsis:commentRef }}\r\n        </p>\r\n\r\n        <div class=\"d-flex flex-cloumn justify-content-between w-100\">\r\n          <span class=\"d-flex gap-3 align-items-center w-100\">\r\n\r\n            <p class=\"comment-text m-0\">\r\n              {{ change.commentText }}\r\n            </p>\r\n          </span>\r\n\r\n          <button class=\"cancel-deletion\" (click)=\"deleteChange(change)\" *ngIf=\"!isReadOnly\">\r\n            <img src=\"assets/shared/trackChanges/trash.svg\">\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"showTooltip && !isReadOnly\" class=\"comment-tooltip\" [style.top.px]=\"tooltipPosition.top\"\r\n    [style.left.px]=\"tooltipPosition.left\">\r\n    <button (click)=\"openCommentBox()\">\r\n      <span class=\"icon\" [innerHTML]=\"messagePlusIconSvgString | safeHtml\"></span>\r\n      \u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"showNotAllowedActionTooltip && !isReadOnly\" class=\"comment-tooltip\"\r\n    [style.top.px]=\"showNotAllowedActionTooltipPosition.top\" [style.left.px]=\"showNotAllowedActionTooltipPosition.left\">\r\n    <span>\r\n      <span class=\"icon\" [innerHTML]=\"informationIconSvgString | safeHtml\"></span>\r\n      \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D1\u05E6\u05E2 \u05E4\u05E2\u05D5\u05DC\u05D4 \u05E2\u05DC \u05D4\u05E2\u05E8\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA\r\n    </span>\r\n  </div>\r\n\r\n  <div *ngIf=\"showCommentBox && !isReadOnly\" class=\"comment-box\" [style.top.px]=\"commentBoxPosition.top\"\r\n    [style.left.px]=\"commentBoxPosition.left\">\r\n    <herum-text-area [(ngModel)]=\"newCommentText\" placeholder=\"\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\">\r\n    </herum-text-area>\r\n\r\n    <div class=\"comment-actions\">\r\n      <button class=\"cancel\" (click)=\"cancelComment()\">\u05D1\u05D8\u05DC</button>\r\n      <button class=\"save\" (click)=\"saveComment()\">\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4</button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"editCommentBox && !isReadOnly\" class=\"comment-box\" [style.top.px]=\"commentBoxPosition.top\"\r\n    [style.left.px]=\"commentBoxPosition.left\">\r\n    <herum-text-area [(ngModel)]=\"newCommentText\" placeholder=\"\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\">\r\n    </herum-text-area>\r\n\r\n    <div class=\"comment-actions\">\r\n      <button class=\"cancel\" (click)=\"cancelComment()\">\u05D1\u05D8\u05DC</button>\r\n      <button class=\"save\" (click)=\"saveComment()\">\u05E9\u05DE\u05D5\u05E8</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [":host{height:100%}.editor-container{padding:0 20px 20px;height:100%}.text-editor:focus-visible{outline:none;border-color:var(--icons-color-light-1)}.editor-container-with-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.text-editor{border:1px solid #ccc;padding:10px;min-height:300px;line-height:1.5;position:relative;border-radius:8px;white-space:pre-wrap;width:90%;overflow-y:auto}.text-editor *{font-size:inherit}::selection{background-color:var(--hover-background);box-shadow:0 0 0 1px var(--hover-background)}.text-editor del{color:red;text-decoration:line-through;background-color:#ffd7d7;border-radius:8px}.text-editor ins{color:#00f;text-decoration:none;border-radius:4px}.comment-marker{background-color:var(--comment-marker-background);border-radius:4px;width:100%}.comments-panel{overflow-y:auto;padding:10px;width:100%;height:100%}.comment{margin-bottom:10px;padding:10px;background-color:#f5f5f5;border-radius:4px;position:relative;width:100%}.comment .comment-text{width:90%;word-break:break-word}.comment-header{display:flex;justify-content:space-between;margin-bottom:8px}.comment-header strong img{margin-left:4px;width:24px;height:24px;border-radius:50%}.toolbar{grid-column:1/-1;padding:10px 0}.comment-tooltip{position:fixed;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0003;z-index:1000;padding:6px 12px}.comment-tooltip .icon{stroke:var(--icons-color)}.comment-tooltip button{background:#fff;color:#1a2d4c;border:none;border-radius:8px;cursor:pointer}.reference-text{opacity:.7}.comment-view-container{width:250px;display:flex;flex-direction:row;justify-content:space-between}.comment-box{display:flex;gap:12px;flex-direction:column;position:fixed;background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 8px #0003;z-index:1000;width:250px}.comment-box textarea{width:100%;min-height:100px;padding:8px;border:1px solid #ddd;border-radius:8px}.cancel-deletion{background:transparent;color:#fff;border:none;border-radius:4px;padding-inline:4px 0px}.comment-actions{display:flex;gap:10px;justify-content:space-between}.comment-actions .save{background:var(--icons-color);color:#fff;border:none}.comment-actions .cancel{color:var(--icons-color);background:none;border:none}.comment-actions button{padding:6px 12px;border-radius:4px;cursor:pointer}\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$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: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "component", type: HerumTextAreaComponent, selector: "herum-text-area", inputs: ["placeholder", "disabled", "formControlName", "isValid", "isLoading", "errorMsg", "showErrorMsgGap", "id", "preventMacroKeysPressEvent", "heightMode", "fontSize", "inputValue", "maxLength"], outputs: ["inputValueEmitter"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesComponent, deps: [{ token: i1$2.TrackTextChangesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TrackTextChangesComponent, isStandalone: false, selector: "track-text-changes", inputs: { changes: "changes", selectedChange: "selectedChange", currentUser: "currentUser", baseContent: "baseContent", isReadOnly: "isReadOnly", fontSize: "fontSize", showComments: "showComments", allowedActions: "allowedActions" }, outputs: { changesEmitter: "changesEmitter" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"editor-container\" class=\"editor-container\" dir=\"rtl\" [ngClass]=\"{'editor-container-with-grid':showComments}\">\r\n  <div #editor class=\"text-editor\" [attr.contenteditable]=\"!isReadOnly\" (keydown)=\"_onKeyDown($event)\"\r\n    (mouseup)=\"_onTextSelection()\" (drop)=\"_onDropTextSelection($event)\">\r\n  </div>\r\n\r\n  <div *ngIf=\"showComments\" class=\"comments-panel\">\r\n    <h3>\u05D4\u05E2\u05E8\u05D5\u05EA:</h3>\r\n    <div *ngFor=\"let change of changes\">\r\n      <div class=\"comment\">\r\n        <div class=\"comment-header align-items-center\">\r\n          <strong><img [src]=\"change?.creatingUser?.pictureUrl\">{{ change?.creatingUser?.firstName + ' ' +\r\n            change?.creatingUser?.lastName }}</strong>\r\n          <span>{{ change.timestamp | date:'dd/MM/yy' }}</span>\r\n        </div>\r\n\r\n        <p #commentRef class=\"reference-text\" appHerumToolTip\r\n          [matTooltip]=\"_isTruncatedElement(commentRef) ? change.note : ''\">\r\n          <img src=\"assets/shared/trackChanges/text-reference.svg\">\r\n          {{ change.note | ellipsis:commentRef }}\r\n        </p>\r\n\r\n        <div class=\"d-flex flex-cloumn justify-content-between w-100\">\r\n          <span class=\"d-flex gap-3 align-items-center w-100\">\r\n\r\n            <p class=\"comment-text m-0\">\r\n              {{ change.commentText }}\r\n            </p>\r\n          </span>\r\n\r\n          <button class=\"cancel-deletion\" (click)=\"deleteChange(change)\" *ngIf=\"!isReadOnly\">\r\n            <img src=\"assets/shared/trackChanges/trash.svg\">\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"showTooltip && !isReadOnly\" class=\"comment-tooltip\" [style.top.px]=\"tooltipPosition.top\"\r\n    [style.left.px]=\"tooltipPosition.left\">\r\n    <button (click)=\"openCommentBox()\">\r\n      <span class=\"icon\" [innerHTML]=\"messagePlusIconSvgString | safeHtml\"></span>\r\n      \u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"showNotAllowedActionTooltip && !isReadOnly\" class=\"comment-tooltip\"\r\n    [style.top.px]=\"showNotAllowedActionTooltipPosition.top\" [style.left.px]=\"showNotAllowedActionTooltipPosition.left\">\r\n    <span>\r\n      <span class=\"icon\" [innerHTML]=\"informationIconSvgString | safeHtml\"></span>\r\n      \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D1\u05E6\u05E2 \u05E4\u05E2\u05D5\u05DC\u05D4 \u05E2\u05DC \u05D4\u05E2\u05E8\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA\r\n    </span>\r\n  </div>\r\n\r\n  <div *ngIf=\"showCommentBox && !isReadOnly\" class=\"comment-box\" [style.top.px]=\"commentBoxPosition.top\"\r\n    [style.left.px]=\"commentBoxPosition.left\">\r\n    <herum-text-area [(ngModel)]=\"newCommentText\" placeholder=\"\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\">\r\n    </herum-text-area>\r\n\r\n    <div class=\"comment-actions\">\r\n      <button class=\"cancel\" (click)=\"cancelComment()\">\u05D1\u05D8\u05DC</button>\r\n      <button class=\"save\" (click)=\"saveComment()\">\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4</button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"editCommentBox && !isReadOnly\" class=\"comment-box\" [style.top.px]=\"commentBoxPosition.top\"\r\n    [style.left.px]=\"commentBoxPosition.left\">\r\n    <herum-text-area [(ngModel)]=\"newCommentText\" placeholder=\"\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\">\r\n    </herum-text-area>\r\n\r\n    <div class=\"comment-actions\">\r\n      <button class=\"cancel\" (click)=\"cancelComment()\">\u05D1\u05D8\u05DC</button>\r\n      <button class=\"save\" (click)=\"saveComment()\">\u05E9\u05DE\u05D5\u05E8</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [":host{height:100%}.editor-container{padding:0 20px 20px;height:100%}.text-editor:focus-visible{outline:none;border-color:var(--icons-color-light-1)}.editor-container-with-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.text-editor{border:1px solid #ccc;padding:10px;min-height:300px;line-height:1.5;position:relative;border-radius:8px;white-space:pre-wrap;width:90%;overflow-y:auto}.text-editor *{font-size:inherit}::selection{background-color:var(--hover-background);box-shadow:0 0 0 1px var(--hover-background)}.text-editor del{color:red;text-decoration:line-through;background-color:#ffd7d7;border-radius:8px}.text-editor ins{color:#00f;text-decoration:none;border-radius:4px}.comment-marker{background-color:var(--comment-marker-background);border-radius:4px;width:100%}.comments-panel{overflow-y:auto;padding:10px;width:100%;height:100%}.comment{margin-bottom:10px;padding:10px;background-color:#f5f5f5;border-radius:4px;position:relative;width:100%}.comment .comment-text{width:90%;word-break:break-word}.comment-header{display:flex;justify-content:space-between;margin-bottom:8px}.comment-header strong img{margin-left:4px;width:24px;height:24px;border-radius:50%}.toolbar{grid-column:1/-1;padding:10px 0}.comment-tooltip{position:fixed;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0003;z-index:1000;padding:6px 12px}.comment-tooltip .icon{stroke:var(--icons-color)}.comment-tooltip button{background:#fff;color:#1a2d4c;border:none;border-radius:8px;cursor:pointer}.reference-text{opacity:.7}.comment-view-container{width:250px;display:flex;flex-direction:row;justify-content:space-between}.comment-box{display:flex;gap:12px;flex-direction:column;position:fixed;background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 8px #0003;z-index:1000;width:250px}.comment-box textarea{width:100%;min-height:100px;padding:8px;border:1px solid #ddd;border-radius:8px}.cancel-deletion{background:transparent;color:#fff;border:none;border-radius:4px;padding-inline:4px 0px}.comment-actions{display:flex;gap:10px;justify-content:space-between}.comment-actions .save{background:var(--icons-color);color:#fff;border:none}.comment-actions .cancel{color:var(--icons-color);background:none;border:none}.comment-actions button{padding:6px 12px;border-radius:4px;cursor:pointer}\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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "component", type: HerumTextAreaComponent, selector: "herum-text-area", inputs: ["placeholder", "disabled", "formControlName", "isValid", "isLoading", "errorMsg", "showErrorMsgGap", "id", "preventMacroKeysPressEvent", "heightMode", "fontSize", "inputValue", "maxLength"], outputs: ["inputValueEmitter"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'track-text-changes', encapsulation: ViewEncapsulation.None, template: "<div id=\"editor-container\" class=\"editor-container\" dir=\"rtl\" [ngClass]=\"{'editor-container-with-grid':showComments}\">\r\n  <div #editor class=\"text-editor\" [attr.contenteditable]=\"!isReadOnly\" (keydown)=\"_onKeyDown($event)\"\r\n    (mouseup)=\"_onTextSelection()\" (drop)=\"_onDropTextSelection($event)\">\r\n  </div>\r\n\r\n  <div *ngIf=\"showComments\" class=\"comments-panel\">\r\n    <h3>\u05D4\u05E2\u05E8\u05D5\u05EA:</h3>\r\n    <div *ngFor=\"let change of changes\">\r\n      <div class=\"comment\">\r\n        <div class=\"comment-header align-items-center\">\r\n          <strong><img [src]=\"change?.creatingUser?.pictureUrl\">{{ change?.creatingUser?.firstName + ' ' +\r\n            change?.creatingUser?.lastName }}</strong>\r\n          <span>{{ change.timestamp | date:'dd/MM/yy' }}</span>\r\n        </div>\r\n\r\n        <p #commentRef class=\"reference-text\" appHerumToolTip\r\n          [matTooltip]=\"_isTruncatedElement(commentRef) ? change.note : ''\">\r\n          <img src=\"assets/shared/trackChanges/text-reference.svg\">\r\n          {{ change.note | ellipsis:commentRef }}\r\n        </p>\r\n\r\n        <div class=\"d-flex flex-cloumn justify-content-between w-100\">\r\n          <span class=\"d-flex gap-3 align-items-center w-100\">\r\n\r\n            <p class=\"comment-text m-0\">\r\n              {{ change.commentText }}\r\n            </p>\r\n          </span>\r\n\r\n          <button class=\"cancel-deletion\" (click)=\"deleteChange(change)\" *ngIf=\"!isReadOnly\">\r\n            <img src=\"assets/shared/trackChanges/trash.svg\">\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"showTooltip && !isReadOnly\" class=\"comment-tooltip\" [style.top.px]=\"tooltipPosition.top\"\r\n    [style.left.px]=\"tooltipPosition.left\">\r\n    <button (click)=\"openCommentBox()\">\r\n      <span class=\"icon\" [innerHTML]=\"messagePlusIconSvgString | safeHtml\"></span>\r\n      \u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"showNotAllowedActionTooltip && !isReadOnly\" class=\"comment-tooltip\"\r\n    [style.top.px]=\"showNotAllowedActionTooltipPosition.top\" [style.left.px]=\"showNotAllowedActionTooltipPosition.left\">\r\n    <span>\r\n      <span class=\"icon\" [innerHTML]=\"informationIconSvgString | safeHtml\"></span>\r\n      \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D1\u05E6\u05E2 \u05E4\u05E2\u05D5\u05DC\u05D4 \u05E2\u05DC \u05D4\u05E2\u05E8\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA\r\n    </span>\r\n  </div>\r\n\r\n  <div *ngIf=\"showCommentBox && !isReadOnly\" class=\"comment-box\" [style.top.px]=\"commentBoxPosition.top\"\r\n    [style.left.px]=\"commentBoxPosition.left\">\r\n    <herum-text-area [(ngModel)]=\"newCommentText\" placeholder=\"\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\">\r\n    </herum-text-area>\r\n\r\n    <div class=\"comment-actions\">\r\n      <button class=\"cancel\" (click)=\"cancelComment()\">\u05D1\u05D8\u05DC</button>\r\n      <button class=\"save\" (click)=\"saveComment()\">\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4</button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"editCommentBox && !isReadOnly\" class=\"comment-box\" [style.top.px]=\"commentBoxPosition.top\"\r\n    [style.left.px]=\"commentBoxPosition.left\">\r\n    <herum-text-area [(ngModel)]=\"newCommentText\" placeholder=\"\u05D4\u05D5\u05E1\u05E3 \u05D4\u05E2\u05E8\u05D4\">\r\n    </herum-text-area>\r\n\r\n    <div class=\"comment-actions\">\r\n      <button class=\"cancel\" (click)=\"cancelComment()\">\u05D1\u05D8\u05DC</button>\r\n      <button class=\"save\" (click)=\"saveComment()\">\u05E9\u05DE\u05D5\u05E8</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [":host{height:100%}.editor-container{padding:0 20px 20px;height:100%}.text-editor:focus-visible{outline:none;border-color:var(--icons-color-light-1)}.editor-container-with-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.text-editor{border:1px solid #ccc;padding:10px;min-height:300px;line-height:1.5;position:relative;border-radius:8px;white-space:pre-wrap;width:90%;overflow-y:auto}.text-editor *{font-size:inherit}::selection{background-color:var(--hover-background);box-shadow:0 0 0 1px var(--hover-background)}.text-editor del{color:red;text-decoration:line-through;background-color:#ffd7d7;border-radius:8px}.text-editor ins{color:#00f;text-decoration:none;border-radius:4px}.comment-marker{background-color:var(--comment-marker-background);border-radius:4px;width:100%}.comments-panel{overflow-y:auto;padding:10px;width:100%;height:100%}.comment{margin-bottom:10px;padding:10px;background-color:#f5f5f5;border-radius:4px;position:relative;width:100%}.comment .comment-text{width:90%;word-break:break-word}.comment-header{display:flex;justify-content:space-between;margin-bottom:8px}.comment-header strong img{margin-left:4px;width:24px;height:24px;border-radius:50%}.toolbar{grid-column:1/-1;padding:10px 0}.comment-tooltip{position:fixed;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0003;z-index:1000;padding:6px 12px}.comment-tooltip .icon{stroke:var(--icons-color)}.comment-tooltip button{background:#fff;color:#1a2d4c;border:none;border-radius:8px;cursor:pointer}.reference-text{opacity:.7}.comment-view-container{width:250px;display:flex;flex-direction:row;justify-content:space-between}.comment-box{display:flex;gap:12px;flex-direction:column;position:fixed;background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 8px #0003;z-index:1000;width:250px}.comment-box textarea{width:100%;min-height:100px;padding:8px;border:1px solid #ddd;border-radius:8px}.cancel-deletion{background:transparent;color:#fff;border:none;border-radius:4px;padding-inline:4px 0px}.comment-actions{display:flex;gap:10px;justify-content:space-between}.comment-actions .save{background:var(--icons-color);color:#fff;border:none}.comment-actions .cancel{color:var(--icons-color);background:none;border:none}.comment-actions button{padding:6px 12px;border-radius:4px;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.TrackTextChangesService }], propDecorators: { changes: [{
+        }], ctorParameters: () => [{ type: i1$2.TrackTextChangesService }], propDecorators: { changes: [{
                 type: Input
             }], selectedChange: [{
                 type: Input
@@ -5016,9 +4977,9 @@ class QuizOpenAnswerQuestionComponent {
     areAnswersBlocked;
     isCheckingMode;
     selectedTextChange;
-    correctAnswerChange = new EventEmitter();
+    answerChange = new EventEmitter();
     notesChange = new EventEmitter();
-    correctAnswerControl = new FormControl('');
+    freeTextControl = new FormControl('');
     notes;
     destroySubject$ = new Subject();
     constructor(answerNotesToTextChangesPipe) {
@@ -5026,14 +4987,14 @@ class QuizOpenAnswerQuestionComponent {
     }
     ngOnChanges(changes) {
         if (changes['userQuestion']?.currentValue) {
-            this.correctAnswerControl.setValue(this.userQuestion.freeTextAnswer ?? '', { emitEvent: false });
+            this.freeTextControl.setValue(this.userQuestion.freeTextAnswer ?? '', { emitEvent: false });
             if (this.isCheckingMode || this.areAnswersRevealed)
                 this.notes = this.answerNotesToTextChangesPipe.transform(this.userQuestion.answerNotes ?? []);
         }
     }
     ngOnInit() {
-        this.correctAnswerControl.valueChanges.pipe(takeUntil(this.destroySubject$))
-            .subscribe(freeText => this.correctAnswerChange.emit(freeText));
+        this.freeTextControl.valueChanges.pipe(takeUntil(this.destroySubject$))
+            .subscribe(freeText => this.answerChange.emit(freeText));
     }
     _notesChange(notes) {
         this.notesChange.emit(notes);
@@ -5043,11 +5004,11 @@ class QuizOpenAnswerQuestionComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizOpenAnswerQuestionComponent, deps: [{ token: i4$1.AnswerNotesToTextChangesPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizOpenAnswerQuestionComponent, isStandalone: false, selector: "quiz-open-answer-question", inputs: { previewMode: "previewMode", question: "question", userQuestion: "userQuestion", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", isCheckingMode: "isCheckingMode", selectedTextChange: "selectedTextChange" }, outputs: { correctAnswerChange: "correctAnswerChange", notesChange: "notesChange" }, usesOnChanges: true, ngImport: i0, template: "<span class=\"answer-title\">{{ isCheckingMode ? '\u05EA\u05E9\u05D5\u05D1\u05EA \u05D4\u05D7\u05E0\u05D9\u05DA' : '\u05DB\u05EA\u05D5\u05D1 \u05EA\u05E9\u05D5\u05D1\u05EA\u05DA' }}\r\n    <span *ngIf=\"!isCheckingMode && question?.freeAnswerContent?.charactersLimit > 0\">\r\n        (\u05E2\u05D3 {{ question?.freeAnswerContent?.charactersLimit }} \u05EA\u05D5\u05D5\u05D9\u05DD)\r\n    </span>\r\n</span>\r\n\r\n<herum-text-area *ngIf=\"!areAnswersRevealed && !isCheckingMode\" [disabled]=\"previewMode || areAnswersBlocked\"\r\n    [maxLength]=\"question?.freeAnswerContent?.charactersLimit\" [formControl]=\"correctAnswerControl\" heightMode=\"max\">\r\n</herum-text-area>\r\n\r\n<track-text-changes *ngIf=\"isCheckingMode || areAnswersRevealed\"\r\n    [isReadOnly]=\"areAnswersRevealed && !isCheckingMode || !isCheckingMode\" [fontSize]=\"14\"\r\n    [selectedChange]=\"selectedTextChange\" [showComments]=\"false\" [baseContent]=\"correctAnswerControl.value\"\r\n    [changes]=\"notes\" (changesEmitter)=\"_notesChange($event)\">\r\n</track-text-changes>", styles: [".answer-title{font-size:14px;margin-block-end:8px}herum-text-area,track-text-changes{height:100%;width:100%}::ng-deep track-text-changes .editor-container{padding:0}::ng-deep track-text-changes .text-editor{min-height:180px;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HerumTextAreaComponent, selector: "herum-text-area", inputs: ["placeholder", "disabled", "formControlName", "isValid", "isLoading", "errorMsg", "showErrorMsgGap", "id", "preventMacroKeysPressEvent", "heightMode", "fontSize", "inputValue", "maxLength"], outputs: ["inputValueEmitter"] }, { kind: "component", type: TrackTextChangesComponent, selector: "track-text-changes", inputs: ["changes", "selectedChange", "currentUser", "baseContent", "isReadOnly", "fontSize", "showComments", "allowedActions"], outputs: ["changesEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QuizOpenAnswerQuestionComponent, isStandalone: false, selector: "quiz-open-answer-question", inputs: { previewMode: "previewMode", question: "question", userQuestion: "userQuestion", areAnswersRevealed: "areAnswersRevealed", areAnswersBlocked: "areAnswersBlocked", isCheckingMode: "isCheckingMode", selectedTextChange: "selectedTextChange" }, outputs: { answerChange: "answerChange", notesChange: "notesChange" }, usesOnChanges: true, ngImport: i0, template: "<span class=\"answer-title\">{{ isCheckingMode ? '\u05EA\u05E9\u05D5\u05D1\u05EA \u05D4\u05D7\u05E0\u05D9\u05DA' : '\u05DB\u05EA\u05D5\u05D1 \u05EA\u05E9\u05D5\u05D1\u05EA\u05DA' }}\r\n    <span *ngIf=\"!isCheckingMode && question?.freeAnswerContent?.charactersLimit > 0\">\r\n        (\u05E2\u05D3 {{ question?.freeAnswerContent?.charactersLimit }} \u05EA\u05D5\u05D5\u05D9\u05DD)\r\n    </span>\r\n</span>\r\n\r\n<herum-text-area *ngIf=\"!areAnswersRevealed && !isCheckingMode\" [disabled]=\"previewMode || areAnswersBlocked\"\r\n    [maxLength]=\"question?.freeAnswerContent?.charactersLimit\" [formControl]=\"freeTextControl\" heightMode=\"max\">\r\n</herum-text-area>\r\n\r\n<track-text-changes *ngIf=\"isCheckingMode || areAnswersRevealed\"\r\n    [isReadOnly]=\"areAnswersRevealed && !isCheckingMode || !isCheckingMode\" [fontSize]=\"14\"\r\n    [selectedChange]=\"selectedTextChange\" [showComments]=\"false\" [baseContent]=\"freeTextControl.value\"\r\n    [changes]=\"notes\" (changesEmitter)=\"_notesChange($event)\">\r\n</track-text-changes>", styles: [".answer-title{font-size:14px;margin-block-end:8px}herum-text-area,track-text-changes{height:100%;width:100%}::ng-deep track-text-changes .editor-container{padding:0}::ng-deep track-text-changes .text-editor{min-height:180px;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HerumTextAreaComponent, selector: "herum-text-area", inputs: ["placeholder", "disabled", "formControlName", "isValid", "isLoading", "errorMsg", "showErrorMsgGap", "id", "preventMacroKeysPressEvent", "heightMode", "fontSize", "inputValue", "maxLength"], outputs: ["inputValueEmitter"] }, { kind: "component", type: TrackTextChangesComponent, selector: "track-text-changes", inputs: ["changes", "selectedChange", "currentUser", "baseContent", "isReadOnly", "fontSize", "showComments", "allowedActions"], outputs: ["changesEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizOpenAnswerQuestionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'quiz-open-answer-question', template: "<span class=\"answer-title\">{{ isCheckingMode ? '\u05EA\u05E9\u05D5\u05D1\u05EA \u05D4\u05D7\u05E0\u05D9\u05DA' : '\u05DB\u05EA\u05D5\u05D1 \u05EA\u05E9\u05D5\u05D1\u05EA\u05DA' }}\r\n    <span *ngIf=\"!isCheckingMode && question?.freeAnswerContent?.charactersLimit > 0\">\r\n        (\u05E2\u05D3 {{ question?.freeAnswerContent?.charactersLimit }} \u05EA\u05D5\u05D5\u05D9\u05DD)\r\n    </span>\r\n</span>\r\n\r\n<herum-text-area *ngIf=\"!areAnswersRevealed && !isCheckingMode\" [disabled]=\"previewMode || areAnswersBlocked\"\r\n    [maxLength]=\"question?.freeAnswerContent?.charactersLimit\" [formControl]=\"correctAnswerControl\" heightMode=\"max\">\r\n</herum-text-area>\r\n\r\n<track-text-changes *ngIf=\"isCheckingMode || areAnswersRevealed\"\r\n    [isReadOnly]=\"areAnswersRevealed && !isCheckingMode || !isCheckingMode\" [fontSize]=\"14\"\r\n    [selectedChange]=\"selectedTextChange\" [showComments]=\"false\" [baseContent]=\"correctAnswerControl.value\"\r\n    [changes]=\"notes\" (changesEmitter)=\"_notesChange($event)\">\r\n</track-text-changes>", styles: [".answer-title{font-size:14px;margin-block-end:8px}herum-text-area,track-text-changes{height:100%;width:100%}::ng-deep track-text-changes .editor-container{padding:0}::ng-deep track-text-changes .text-editor{min-height:180px;height:100%;width:100%}\n"] }]
+            args: [{ standalone: false, selector: 'quiz-open-answer-question', template: "<span class=\"answer-title\">{{ isCheckingMode ? '\u05EA\u05E9\u05D5\u05D1\u05EA \u05D4\u05D7\u05E0\u05D9\u05DA' : '\u05DB\u05EA\u05D5\u05D1 \u05EA\u05E9\u05D5\u05D1\u05EA\u05DA' }}\r\n    <span *ngIf=\"!isCheckingMode && question?.freeAnswerContent?.charactersLimit > 0\">\r\n        (\u05E2\u05D3 {{ question?.freeAnswerContent?.charactersLimit }} \u05EA\u05D5\u05D5\u05D9\u05DD)\r\n    </span>\r\n</span>\r\n\r\n<herum-text-area *ngIf=\"!areAnswersRevealed && !isCheckingMode\" [disabled]=\"previewMode || areAnswersBlocked\"\r\n    [maxLength]=\"question?.freeAnswerContent?.charactersLimit\" [formControl]=\"freeTextControl\" heightMode=\"max\">\r\n</herum-text-area>\r\n\r\n<track-text-changes *ngIf=\"isCheckingMode || areAnswersRevealed\"\r\n    [isReadOnly]=\"areAnswersRevealed && !isCheckingMode || !isCheckingMode\" [fontSize]=\"14\"\r\n    [selectedChange]=\"selectedTextChange\" [showComments]=\"false\" [baseContent]=\"freeTextControl.value\"\r\n    [changes]=\"notes\" (changesEmitter)=\"_notesChange($event)\">\r\n</track-text-changes>", styles: [".answer-title{font-size:14px;margin-block-end:8px}herum-text-area,track-text-changes{height:100%;width:100%}::ng-deep track-text-changes .editor-container{padding:0}::ng-deep track-text-changes .text-editor{min-height:180px;height:100%;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i4$1.AnswerNotesToTextChangesPipe }], propDecorators: { previewMode: [{
                 type: Input
             }], question: [{
@@ -5062,7 +5023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], selectedTextChange: [{
                 type: Input
-            }], correctAnswerChange: [{
+            }], answerChange: [{
                 type: Output
             }], notesChange: [{
                 type: Output
@@ -5231,13 +5192,13 @@ class InsuranceDialogComponent {
     get isWarning() {
         return this.data.type == 'warning';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InsuranceDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: InsuranceDialogComponent, isStandalone: false, selector: "app-insurance-dialog", ngImport: i0, template: "<div class=\"dialog-container cubes-background\" [class]=\"systemIdentifier\" [class.warning-dialog]=\"isWarning\">\r\n    <div class=\"title-container\">\r\n        <img class=\"warning-icon\" *ngIf=\"isWarning\" src=\"assets/hadracha/general/warningDialog.svg\" alt=\"close-icon\">\r\n        <p class=\"section-title\">{{data.title}}</p>\r\n        <img class=\"close-button\" src=\"assets/shared/icons/secondary-x.svg\" alt=\"close-icon\" (click)=\"_onClose()\">\r\n    </div>\r\n\r\n    <p class=\"description\">{{ data.description }}</p>\r\n\r\n    <p *ngIf=\"data.note\" class=\"note\">{{ data.note }}</p>\r\n\r\n    <div class=\"dialog-buttons-actions-container\" *ngIf=\"!!data.submitActionButton\">\r\n        <herum-button (click)=\"_onClose()\" [type]=\"'ghost'\">{{ data.closeActionButton ?? '\u05D1\u05D8\u05DC' }}</herum-button>\r\n        <herum-button [color]=\"isWarning ? 'error' : 'regular'\"  (click)=\"_onSubmit()\">{{ data.submitActionButton }}</herum-button>\r\n    </div>\r\n</div>", styles: [".dialog-container{background-size:auto}.dialog-container .title-container{position:relative;flex-direction:column}.dialog-container .title-container .close-button{position:absolute;top:12px;left:12px}.dialog-container .note{font-weight:700}.warning-icon{height:44px;margin-bottom:24px}.warning-dialog .title-container{position:relative;flex-direction:column}.warning-dialog .title-container .section-title{font-size:22px}.warning-dialog .title-container .close-button{position:absolute;top:12px;left:12px}.warning-dialog .description{font-size:18px;text-align:center;margin-bottom:12px}.warning-dialog .note{font-size:18px;text-align:center}.description{text-align:center}\n", ".dialog-container,form{display:flex;flex-direction:column;gap:16px;position:relative;padding:16px;max-height:80vh;width:30vw}.title{font-size:18px;font-weight:600}p{margin:0}.dialog-buttons-actions-container{width:100%;gap:16px;display:flex;flex-direction:row}.close-dialog{position:absolute;top:20px;left:20px}.title-container{display:flex;align-items:center;justify-content:space-between}.close-button{cursor:pointer;height:11px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InsuranceDialogComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: InsuranceDialogComponent, isStandalone: false, selector: "app-insurance-dialog", ngImport: i0, template: "<div class=\"dialog-container cubes-background\" [class]=\"systemIdentifier\" [class.warning-dialog]=\"isWarning\">\r\n    <div class=\"title-container\">\r\n        <img class=\"warning-icon\" *ngIf=\"isWarning\" src=\"assets/hadracha/general/warningDialog.svg\" alt=\"close-icon\">\r\n        <p class=\"section-title\">{{data.title}}</p>\r\n        <img class=\"close-button\" src=\"assets/shared/icons/secondary-x.svg\" alt=\"close-icon\" (click)=\"_onClose()\">\r\n    </div>\r\n\r\n    <p class=\"description\">{{ data.description }}</p>\r\n\r\n    <p *ngIf=\"data.note\" class=\"note\">{{ data.note }}</p>\r\n\r\n    <div class=\"dialog-buttons-actions-container\" *ngIf=\"!!data.submitActionButton\">\r\n        <herum-button (click)=\"_onClose()\" [type]=\"'ghost'\">{{ data.closeActionButton ?? '\u05D1\u05D8\u05DC' }}</herum-button>\r\n        <herum-button [color]=\"isWarning ? 'error' : 'regular'\"  (click)=\"_onSubmit()\">{{ data.submitActionButton }}</herum-button>\r\n    </div>\r\n</div>", styles: [".dialog-container{background-size:auto}.dialog-container .title-container{position:relative;flex-direction:column}.dialog-container .title-container .close-button{position:absolute;top:12px;left:12px}.dialog-container .note{font-weight:700}.warning-icon{height:44px;margin-bottom:24px}.warning-dialog .title-container{position:relative;flex-direction:column}.warning-dialog .title-container .section-title{font-size:22px}.warning-dialog .title-container .close-button{position:absolute;top:12px;left:12px}.warning-dialog .description{font-size:18px;text-align:center;margin-bottom:12px}.warning-dialog .note{font-size:18px;text-align:center}.description{text-align:center}\n", ".dialog-container,form{display:flex;flex-direction:column;gap:16px;position:relative;padding:16px;max-height:80vh;width:30vw}.title{font-size:18px;font-weight:600}p{margin:0}.dialog-buttons-actions-container{width:100%;gap:16px;display:flex;flex-direction:row}.close-dialog{position:absolute;top:20px;left:20px}.title-container{display:flex;align-items:center;justify-content:space-between}.close-button{cursor:pointer;height:11px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InsuranceDialogComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'app-insurance-dialog', template: "<div class=\"dialog-container cubes-background\" [class]=\"systemIdentifier\" [class.warning-dialog]=\"isWarning\">\r\n    <div class=\"title-container\">\r\n        <img class=\"warning-icon\" *ngIf=\"isWarning\" src=\"assets/hadracha/general/warningDialog.svg\" alt=\"close-icon\">\r\n        <p class=\"section-title\">{{data.title}}</p>\r\n        <img class=\"close-button\" src=\"assets/shared/icons/secondary-x.svg\" alt=\"close-icon\" (click)=\"_onClose()\">\r\n    </div>\r\n\r\n    <p class=\"description\">{{ data.description }}</p>\r\n\r\n    <p *ngIf=\"data.note\" class=\"note\">{{ data.note }}</p>\r\n\r\n    <div class=\"dialog-buttons-actions-container\" *ngIf=\"!!data.submitActionButton\">\r\n        <herum-button (click)=\"_onClose()\" [type]=\"'ghost'\">{{ data.closeActionButton ?? '\u05D1\u05D8\u05DC' }}</herum-button>\r\n        <herum-button [color]=\"isWarning ? 'error' : 'regular'\"  (click)=\"_onSubmit()\">{{ data.submitActionButton }}</herum-button>\r\n    </div>\r\n</div>", styles: [".dialog-container{background-size:auto}.dialog-container .title-container{position:relative;flex-direction:column}.dialog-container .title-container .close-button{position:absolute;top:12px;left:12px}.dialog-container .note{font-weight:700}.warning-icon{height:44px;margin-bottom:24px}.warning-dialog .title-container{position:relative;flex-direction:column}.warning-dialog .title-container .section-title{font-size:22px}.warning-dialog .title-container .close-button{position:absolute;top:12px;left:12px}.warning-dialog .description{font-size:18px;text-align:center;margin-bottom:12px}.warning-dialog .note{font-size:18px;text-align:center}.description{text-align:center}\n", ".dialog-container,form{display:flex;flex-direction:column;gap:16px;position:relative;padding:16px;max-height:80vh;width:30vw}.title{font-size:18px;font-weight:600}p{margin:0}.dialog-buttons-actions-container{width:100%;gap:16px;display:flex;flex-direction:row}.close-dialog{position:absolute;top:20px;left:20px}.title-container{display:flex;align-items:center;justify-content:space-between}.close-button{cursor:pointer;height:11px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: undefined, decorators: [{
@@ -5259,13 +5220,13 @@ class HerumFilesViewerDialogComponent {
     _downloadFile() {
         this.dialogRef.close(this.fileData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerDialogComponent, isStandalone: false, selector: "herum-files-viewer-dialog", ngImport: i0, template: "<herum-files-viewer [fileData]=\"fileData\" (downloadFile)=\"_downloadFile()\">\r\n</herum-files-viewer>", styles: ["::ng-deep .mat-mdc-dialog-container{padding:0!important;display:block}:host{height:100%;width:100%;display:flex}\n"], dependencies: [{ kind: "component", type: i2$5.HerumFilesViewerComponent, selector: "herum-files-viewer", inputs: ["fileData", "showDeleteFileButton"], outputs: ["downloadFile", "deleteFile"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerDialogComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerDialogComponent, isStandalone: false, selector: "herum-files-viewer-dialog", ngImport: i0, template: "<herum-files-viewer [fileData]=\"fileData\" (downloadFile)=\"_downloadFile()\">\r\n</herum-files-viewer>", styles: ["::ng-deep .mat-mdc-dialog-container{padding:0!important;display:block}:host{height:100%;width:100%;display:flex}\n"], dependencies: [{ kind: "component", type: i2$4.HerumFilesViewerComponent, selector: "herum-files-viewer", inputs: ["fileData", "showDeleteFileButton"], outputs: ["downloadFile", "deleteFile"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerDialogComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-files-viewer-dialog', template: "<herum-files-viewer [fileData]=\"fileData\" (downloadFile)=\"_downloadFile()\">\r\n</herum-files-viewer>", styles: ["::ng-deep .mat-mdc-dialog-container{padding:0!important;display:block}:host{height:100%;width:100%;display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -5577,13 +5538,13 @@ class HerumDatePickerComponent {
             return true;
         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$5.DateAdapter }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.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(--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(--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$5.DateAdapter }, { type: i0.ChangeDetectorRef }], propDecorators: { activeColor: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$6.DateAdapter }, { type: i0.ChangeDetectorRef }], propDecorators: { activeColor: [{
                 type: Input
             }], hoverColor: [{
                 type: Input
@@ -5695,7 +5656,7 @@ class ConditionalFormControlNameDirective {
             this.renderer.removeAttribute(this.el.nativeElement, 'formControlName');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConditionalFormControlNameDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConditionalFormControlNameDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: ConditionalFormControlNameDirective, isStandalone: false, selector: "[appConditionalFormControlName]", inputs: { formControlName: ["appConditionalFormControlName", "formControlName"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConditionalFormControlNameDirective, decorators: [{
@@ -5704,7 +5665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     standalone: false,
                     selector: '[appConditionalFormControlName]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.NgControl }], propDecorators: { formControlName: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.NgControl }], propDecorators: { formControlName: [{
                 type: Input,
                 args: ['appConditionalFormControlName']
             }] } });
@@ -5963,7 +5924,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: i2$2.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$1] });
+    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: i2$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$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiSelectComponent, decorators: [{
             type: Component,
@@ -6817,12 +6778,12 @@ 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(--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.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4$1.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.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4$1.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(--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: [{
+        }], ctorParameters: () => [{ type: i1$3.ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -6884,7 +6845,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(--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: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.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: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RoundedVerticalMenuComponent, decorators: [{
             type: Component,
@@ -7611,7 +7572,7 @@ class HerumActiveMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveMenuComponent, isStandalone: false, selector: "herum-active-menu", inputs: { useIcons: "useIcons", view: "view", activeColor: "activeColor", activeTextColor: "activeTextColor", secondaryTextColor: "secondaryTextColor", menuItems: "menuItems", selectedItem: "selectedItem", selectById: "selectById", isBlock: "isBlock", dragEvent: "dragEvent" }, outputs: { selectionIndex: "selectionIndex" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true }, { propertyName: "tabsElement", predicate: ["tabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%;border-radius:8px 0 0}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:var(--standard-padding);justify-content:flex-start;display:flex}\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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveMenuComponent, isStandalone: false, selector: "herum-active-menu", inputs: { useIcons: "useIcons", view: "view", activeColor: "activeColor", activeTextColor: "activeTextColor", secondaryTextColor: "secondaryTextColor", menuItems: "menuItems", selectedItem: "selectedItem", selectById: "selectById", isBlock: "isBlock", dragEvent: "dragEvent" }, outputs: { selectionIndex: "selectionIndex" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true }, { propertyName: "tabsElement", predicate: ["tabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%;border-radius:8px 0 0}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:var(--standard-padding);justify-content:flex-start;display:flex}\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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, decorators: [{
             type: Component,
@@ -7759,13 +7720,13 @@ class HerumAutocompleteComponent {
             return normalizedOptionText.includes(normalizedSearchText);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2$3.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$1] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2$2.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$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-autocomplete', animations: [openClose$1], template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -7861,13 +7822,13 @@ class HerumClosedListMultiSelectComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListMultiSelectComponent, deps: [{ token: i2$1.CommonGraphqlRequestsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListMultiSelectComponent, isStandalone: false, selector: "herum-closed-list-multi-select", inputs: { closedListName: "closedListName", placeholder: "placeholder", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", size: "size", dropDownDirection: "dropDownDirection", selectedClosedListOptionalValues: "selectedClosedListOptionalValues" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter" }, providers: [CUSTOM_CLOSED_LIST_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-multi-select [placeholder]=\"placeholder\" [options]=\"closedListValues\"\r\n    [selectedOptionsInput]=\"selectedClosedListOptionalValues\" [disabled]=\"disabled\"\r\n    [isDropDownInPositionFixed]=\"isDropDownInPositionFixed\" [size]=\"size\" [dropDownDirection]=\"dropDownDirection\"\r\n    (selectedOptions)=\"_selectedOptionsEmitter($event)\">\r\n</herum-multi-select>", styles: [""], dependencies: [{ kind: "component", type: i2$3.HerumMultiSelectComponent, selector: "herum-multi-select", inputs: ["placeholder", "options", "titledOptionsList", "recursiveTitledOption", "selectedOptionsInput", "maxChips", "disabled", "size", "isDropDownInPositionFixed", "dropDownDirection", "isMultiHeads"], outputs: ["selectedOptions", "selectedRecursiveOptions"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListMultiSelectComponent, deps: [{ token: i1$2.CommonGraphqlRequestsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListMultiSelectComponent, isStandalone: false, selector: "herum-closed-list-multi-select", inputs: { closedListName: "closedListName", placeholder: "placeholder", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", size: "size", dropDownDirection: "dropDownDirection", selectedClosedListOptionalValues: "selectedClosedListOptionalValues" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter" }, providers: [CUSTOM_CLOSED_LIST_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-multi-select [placeholder]=\"placeholder\" [options]=\"closedListValues\"\r\n    [selectedOptionsInput]=\"selectedClosedListOptionalValues\" [disabled]=\"disabled\"\r\n    [isDropDownInPositionFixed]=\"isDropDownInPositionFixed\" [size]=\"size\" [dropDownDirection]=\"dropDownDirection\"\r\n    (selectedOptions)=\"_selectedOptionsEmitter($event)\">\r\n</herum-multi-select>", styles: [""], dependencies: [{ kind: "component", type: i2$2.HerumMultiSelectComponent, selector: "herum-multi-select", inputs: ["placeholder", "options", "titledOptionsList", "recursiveTitledOption", "selectedOptionsInput", "maxChips", "disabled", "size", "isDropDownInPositionFixed", "dropDownDirection", "isMultiHeads"], outputs: ["selectedOptions", "selectedRecursiveOptions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-closed-list-multi-select', providers: [CUSTOM_CLOSED_LIST_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], template: "<herum-multi-select [placeholder]=\"placeholder\" [options]=\"closedListValues\"\r\n    [selectedOptionsInput]=\"selectedClosedListOptionalValues\" [disabled]=\"disabled\"\r\n    [isDropDownInPositionFixed]=\"isDropDownInPositionFixed\" [size]=\"size\" [dropDownDirection]=\"dropDownDirection\"\r\n    (selectedOptions)=\"_selectedOptionsEmitter($event)\">\r\n</herum-multi-select>" }]
-        }], ctorParameters: () => [{ type: i2$1.CommonGraphqlRequestsService }], propDecorators: { closedListName: [{
+        }], ctorParameters: () => [{ type: i1$2.CommonGraphqlRequestsService }], propDecorators: { closedListName: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -7953,13 +7914,13 @@ class HerumClosedListSelectComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListSelectComponent, deps: [{ token: i2$1.CommonGraphqlRequestsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListSelectComponent, isStandalone: false, selector: "herum-closed-list-select", inputs: { closedListName: ["formControlName", "closedListName"], placeholder: "placeholder", closedListOptionalValueName: "closedListOptionalValueName", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", iconPath: "iconPath", isAutoComplete: "isAutoComplete", title: "title", size: "size", displayLoadingMode: "displayLoadingMode", isLoadingInput: "isLoadingInput", dropDownDirection: "dropDownDirection", filterPlaceholder: "filterPlaceholder" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter", filterTextEmitter: "filterTextEmitter" }, providers: [CUSTOM_CLOSED_LIST_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-select\r\n[options]=\"closedListValues\"\r\n[placeholder]=\"placeholder\"\r\n[selectedOption]=\"selectedClosedListOptionalValue\"\r\n[disabled]=\"disabled\"\r\n[isDropDownInPositionFixed]=\"isDropDownInPositionFixed\"\r\n[iconPath]=\"iconPath\"\r\n[isAutoComplete]=\"isAutoComplete\"\r\n[title]=\"title\"\r\n[size]=\"size\"\r\n[displayLoadingMode]=\"displayLoadingMode\"\r\n[isLoadingInput]=\"isLoadingInput\"\r\n[dropDownDirection]=\"dropDownDirection\"\r\n[filterPlaceholder]=\"filterPlaceholder\"\r\n(selectedOptionEmitter)=\"_selectedOptionEmitter($event)\"\r\n(filterTextEmitter)=\"_filterTextEmitter($event)\"\r\n>\r\n</herum-select>", dependencies: [{ kind: "component", type: i2$3.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListSelectComponent, deps: [{ token: i1$2.CommonGraphqlRequestsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListSelectComponent, isStandalone: false, selector: "herum-closed-list-select", inputs: { closedListName: ["formControlName", "closedListName"], placeholder: "placeholder", closedListOptionalValueName: "closedListOptionalValueName", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", iconPath: "iconPath", isAutoComplete: "isAutoComplete", title: "title", size: "size", displayLoadingMode: "displayLoadingMode", isLoadingInput: "isLoadingInput", dropDownDirection: "dropDownDirection", filterPlaceholder: "filterPlaceholder" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter", filterTextEmitter: "filterTextEmitter" }, providers: [CUSTOM_CLOSED_LIST_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-select\r\n[options]=\"closedListValues\"\r\n[placeholder]=\"placeholder\"\r\n[selectedOption]=\"selectedClosedListOptionalValue\"\r\n[disabled]=\"disabled\"\r\n[isDropDownInPositionFixed]=\"isDropDownInPositionFixed\"\r\n[iconPath]=\"iconPath\"\r\n[isAutoComplete]=\"isAutoComplete\"\r\n[title]=\"title\"\r\n[size]=\"size\"\r\n[displayLoadingMode]=\"displayLoadingMode\"\r\n[isLoadingInput]=\"isLoadingInput\"\r\n[dropDownDirection]=\"dropDownDirection\"\r\n[filterPlaceholder]=\"filterPlaceholder\"\r\n(selectedOptionEmitter)=\"_selectedOptionEmitter($event)\"\r\n(filterTextEmitter)=\"_filterTextEmitter($event)\"\r\n>\r\n</herum-select>", dependencies: [{ kind: "component", type: i2$2.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-closed-list-select', providers: [CUSTOM_CLOSED_LIST_SELECT_CONTROL_VALUE_ACCESSOR], template: "<herum-select\r\n[options]=\"closedListValues\"\r\n[placeholder]=\"placeholder\"\r\n[selectedOption]=\"selectedClosedListOptionalValue\"\r\n[disabled]=\"disabled\"\r\n[isDropDownInPositionFixed]=\"isDropDownInPositionFixed\"\r\n[iconPath]=\"iconPath\"\r\n[isAutoComplete]=\"isAutoComplete\"\r\n[title]=\"title\"\r\n[size]=\"size\"\r\n[displayLoadingMode]=\"displayLoadingMode\"\r\n[isLoadingInput]=\"isLoadingInput\"\r\n[dropDownDirection]=\"dropDownDirection\"\r\n[filterPlaceholder]=\"filterPlaceholder\"\r\n(selectedOptionEmitter)=\"_selectedOptionEmitter($event)\"\r\n(filterTextEmitter)=\"_filterTextEmitter($event)\"\r\n>\r\n</herum-select>" }]
-        }], ctorParameters: () => [{ type: i2$1.CommonGraphqlRequestsService }], propDecorators: { closedListName: [{
+        }], ctorParameters: () => [{ type: i1$2.CommonGraphqlRequestsService }], propDecorators: { closedListName: [{
                 type: Input,
                 args: ['formControlName']
             }], placeholder: [{
@@ -7997,6 +7958,7 @@ const defaultFileIconPath = iconsFolderPath + 'generic-file.svg';
 const requiredFieldMessage = 'חובה לעלות קובץ';
 class HerumDropZoneComponent {
     environmentConfig;
+    utilsService;
     selectedFiles = [];
     placeholder = 'העלה או גרור לכאן קובץ';
     numberOfAllowedFiles = 1;
@@ -8034,8 +7996,9 @@ class HerumDropZoneComponent {
             message: `אין להעלות תמונות בגודל של מעל ${maxImageHeight$1} על ${maxImageWidth$1}`
         },
     ];
-    constructor(environmentConfig) {
+    constructor(environmentConfig, utilsService) {
         this.environmentConfig = environmentConfig;
+        this.utilsService = utilsService;
     }
     ngOnChanges(changes) {
         if (changes['selectedFiles'] && Array.isArray(this.selectedFiles))
@@ -8148,7 +8111,10 @@ class HerumDropZoneComponent {
         return filePath ? filePath : defaultFileIconPath;
     }
     get convertorMediaPath() {
-        return `${this.environmentConfig?.environment?.s3ServerPath}${this.environmentConfig?.buckets?.GeneralFiles}XMediaRecode.exe`;
+        return this.utilsService.getUrlFromFileData({
+            bucket: this.environmentConfig?.buckets?.GeneralFiles,
+            key: 'XMediaRecode.exe'
+        });
     }
     parseAllowedFileTypes(allowedFileTypes) {
         if (!allowedFileTypes || !allowedFileTypes?.length)
@@ -8165,8 +8131,8 @@ class HerumDropZoneComponent {
         }
         this.errorMessages = this.errorMessages.filter(errorMessage => errorMessage.message !== requiredFieldMessage);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDropZoneComponent, isStandalone: false, selector: "herum-drop-zone", inputs: { selectedFiles: "selectedFiles", placeholder: "placeholder", numberOfAllowedFiles: "numberOfAllowedFiles", allowedFileTypes: "allowedFileTypes", supportedFilesMimes: "supportedFilesMimes", supportedFilesTypes: "supportedFilesTypes", requiredField: "requiredField", directionPreview: "directionPreview", type: "type", grow: "grow", fillContainer: "fillContainer", uploadFileSvg: "uploadFileSvg", previewImageUrl: "previewImageUrl", allowToDeleteImage: "allowToDeleteImage" }, outputs: { filesDataEvent: "filesDataEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button class=\"dropzone\" type=\"button\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\">{{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-button\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone:focus-visible{outline:none}.dropzone:focus-visible .dropzone-content{border-color:var(--icons-color-light-1)}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent;padding:0}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-button{position:absolute;top:8px;left:8px;background:transparent;border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-button:hover{opacity:1}.preview-wrapper .image-container .remove-button .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "component", type: i2$3.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }, { token: i1$2.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDropZoneComponent, isStandalone: false, selector: "herum-drop-zone", inputs: { selectedFiles: "selectedFiles", placeholder: "placeholder", numberOfAllowedFiles: "numberOfAllowedFiles", allowedFileTypes: "allowedFileTypes", supportedFilesMimes: "supportedFilesMimes", supportedFilesTypes: "supportedFilesTypes", requiredField: "requiredField", directionPreview: "directionPreview", type: "type", grow: "grow", fillContainer: "fillContainer", uploadFileSvg: "uploadFileSvg", previewImageUrl: "previewImageUrl", allowToDeleteImage: "allowToDeleteImage" }, outputs: { filesDataEvent: "filesDataEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button class=\"dropzone\" type=\"button\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\">{{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-button\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone:focus-visible{outline:none}.dropzone:focus-visible .dropzone-content{border-color:var(--icons-color-light-1)}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent;padding:0}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-button{position:absolute;top:8px;left:8px;background:transparent;border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-button:hover{opacity:1}.preview-wrapper .image-container .remove-button .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "component", type: i2$2.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, decorators: [{
             type: Component,
@@ -8174,7 +8140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }], propDecorators: { selectedFiles: [{
+                }] }, { type: i1$2.UtilsService }], propDecorators: { selectedFiles: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -8230,30 +8196,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             }] } });
 
 class HerumFilesViewerComponent {
-    environmentConfig;
+    utilsService;
+    static imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg'];
+    static videoExtensions = ['mp4', 'm4v', 'mov', 'avi', 'mkv', 'wmv', 'flv', 'webm'];
+    static audioExtensions = ['mp3', 'wav', 'ogg', 'oga', 'm4a', 'aac', 'mpeg'];
     fileData;
     showDeleteFileButton = false;
     downloadFile = new EventEmitter();
     deleteFile = new EventEmitter();
     srcPath;
     fileType;
-    constructor(environmentConfig) {
-        this.environmentConfig = environmentConfig;
+    constructor(utilsService) {
+        this.utilsService = utilsService;
     }
     ngOnChanges(changes) {
         if (changes['fileData']?.currentValue) {
-            const fileToDisplay = this.fileData.file?.size === 0;
-            if (this.fileData.file && !fileToDisplay) {
-                const type = this.fileData.file.type;
-                const typeIndex = type.includes('pdf') ? 1 : 0;
-                this.fileType = type.split("/")[typeIndex];
+            const hasLocalFileToPreview = Boolean(this.fileData.file && this.fileData.file.size > 0);
+            if (hasLocalFileToPreview) {
+                this.fileType = this.resolveFileType(this.fileData.file?.type, this.fileData.file?.name);
                 this.srcPath = URL.createObjectURL(this.fileData.file);
                 return;
             }
-            const type = this.fileData.type;
-            const typeIndex = type?.includes('pdf') ? 1 : 0;
-            this.fileType = type?.split("/")[typeIndex];
-            this.srcPath = this.environmentConfig?.environment?.s3ServerPath + this.fileData.bucket + "/" + this.fileData.key;
+            this.fileType = this.resolveFileType(this.fileData.type, this.fileData.name || this.fileData.key);
+            this.srcPath = this.resolveRemoteSourcePath();
         }
     }
     _onDeleteFile() {
@@ -8262,16 +8227,50 @@ class HerumFilesViewerComponent {
     _downloadFile() {
         this.downloadFile.emit(this.fileData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerComponent, isStandalone: false, selector: "herum-files-viewer", inputs: { fileData: "fileData", showDeleteFileButton: "showDeleteFileButton" }, outputs: { downloadFile: "downloadFile", deleteFile: "deleteFile" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$3.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }] });
+    resolveRemoteSourcePath() {
+        const hasRemoteIdentity = Boolean(this.fileData?.bucket && this.fileData?.key);
+        if (hasRemoteIdentity)
+            return this.utilsService.getUrlFromFileData(this.fileData) || this.fileData.previewFilePath || '';
+        return this.fileData.previewFilePath || '';
+    }
+    resolveFileType(mimeType, fileName) {
+        return this.resolveFileTypeFromMime(mimeType) || this.resolveFileTypeFromExtension(fileName) || '';
+    }
+    resolveFileTypeFromMime(mimeType) {
+        if (!mimeType)
+            return undefined;
+        const normalizedMimeType = mimeType.toLowerCase();
+        if (normalizedMimeType.includes('pdf'))
+            return 'pdf';
+        if (normalizedMimeType.startsWith('image/'))
+            return 'image';
+        if (normalizedMimeType.startsWith('video/'))
+            return 'video';
+        if (normalizedMimeType.startsWith('audio/'))
+            return 'audio';
+        return undefined;
+    }
+    resolveFileTypeFromExtension(fileName) {
+        const extension = fileName?.split('.').pop()?.toLowerCase();
+        if (!extension)
+            return undefined;
+        if (extension === 'pdf')
+            return 'pdf';
+        if (HerumFilesViewerComponent.imageExtensions.includes(extension))
+            return 'image';
+        if (HerumFilesViewerComponent.videoExtensions.includes(extension))
+            return 'video';
+        if (HerumFilesViewerComponent.audioExtensions.includes(extension))
+            return 'audio';
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, deps: [{ token: i1$2.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerComponent, isStandalone: false, selector: "herum-files-viewer", inputs: { fileData: "fileData", showDeleteFileButton: "showDeleteFileButton" }, outputs: { downloadFile: "downloadFile", deleteFile: "deleteFile" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-files-viewer', template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }], propDecorators: { fileData: [{
+        }], ctorParameters: () => [{ type: i1$2.UtilsService }], propDecorators: { fileData: [{
                 type: Input
             }], showDeleteFileButton: [{
                 type: Input
@@ -8299,7 +8298,7 @@ class HerumMultiProgressBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumMultiProgressBarComponent, isStandalone: false, selector: "herum-multi-progress-bar", inputs: { progressBarsSections: "progressBarsSections" }, ngImport: i0, template: "<div class=\"sections-bars-container\">\r\n    <div class=\"progress-bars-container\" *ngFor=\"let section of progressBarsSections; let sectionIndex = index\"\r\n        [ngStyle]=\"{'width':(section.percentage + '%')}\">\r\n        <herum-progress-bar *ngFor=\"let progressBar of section.progressBars; let progressBarIndex = index\"\r\n            [color]=\"progressBar.color\" [percentage]=\"progressBar.value\" [borderRadius]=\"getBorderRadius(sectionIndex,progressBarIndex)\"\r\n            [ngStyle]=\"{'width':(progressBar.percentage + '%')}\"></herum-progress-bar>\r\n    </div>\r\n</div>", styles: [".sections-bars-container,.sections-bars-container .progress-bars-container{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumMultiProgressBarComponent, isStandalone: false, selector: "herum-multi-progress-bar", inputs: { progressBarsSections: "progressBarsSections" }, ngImport: i0, template: "<div class=\"sections-bars-container\">\r\n    <div class=\"progress-bars-container\" *ngFor=\"let section of progressBarsSections; let sectionIndex = index\"\r\n        [ngStyle]=\"{'width':(section.percentage + '%')}\">\r\n        <herum-progress-bar *ngFor=\"let progressBar of section.progressBars; let progressBarIndex = index\"\r\n            [color]=\"progressBar.color\" [percentage]=\"progressBar.value\" [borderRadius]=\"getBorderRadius(sectionIndex,progressBarIndex)\"\r\n            [ngStyle]=\"{'width':(progressBar.percentage + '%')}\"></herum-progress-bar>\r\n    </div>\r\n</div>", styles: [".sections-bars-container,.sections-bars-container .progress-bars-container{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiProgressBarComponent, decorators: [{
             type: Component,
@@ -8324,7 +8323,7 @@ class HerumNavigatorComponent {
         this.updatedItemIndex.emit(++currentItemIndex);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNavigatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumNavigatorComponent, isStandalone: false, selector: "herum-navigator", inputs: { isFirstItem: "isFirstItem", isLastItem: "isLastItem", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", isNextButtonDisable: "isNextButtonDisable", isBackButtonDisable: "isBackButtonDisable", currentItemIndex: "currentItemIndex" }, outputs: { updatedItemIndex: "updatedItemIndex" }, ngImport: i0, template: "<div class=\"buttons-container\">\r\n    <herum-button *ngIf=\"!isFirstItem\" [size]=\"'medium'\" [type]=\"'ghost'\" [disabled]=\"isBackButtonDisable\" id=\"prev\"\r\n        (click)=\"_onPreviousItem(currentItemIndex)\">\r\n        {{previousButtonText}}\r\n    </herum-button>\r\n\r\n    <herum-button *ngIf=\"!isLastItem\" [size]=\"'medium'\" [disabled]=\"isNextButtonDisable\" id=\"next\"\r\n        (click)=\"_onNextItem(currentItemIndex)\">\r\n        {{nextButtonText}}\r\n    </herum-button>\r\n</div>", styles: [".buttons-container{display:flex;gap:10px;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumNavigatorComponent, isStandalone: false, selector: "herum-navigator", inputs: { isFirstItem: "isFirstItem", isLastItem: "isLastItem", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", isNextButtonDisable: "isNextButtonDisable", isBackButtonDisable: "isBackButtonDisable", currentItemIndex: "currentItemIndex" }, outputs: { updatedItemIndex: "updatedItemIndex" }, ngImport: i0, template: "<div class=\"buttons-container\">\r\n    <herum-button *ngIf=\"!isFirstItem\" [size]=\"'medium'\" [type]=\"'ghost'\" [disabled]=\"isBackButtonDisable\" id=\"prev\"\r\n        (click)=\"_onPreviousItem(currentItemIndex)\">\r\n        {{previousButtonText}}\r\n    </herum-button>\r\n\r\n    <herum-button *ngIf=\"!isLastItem\" [size]=\"'medium'\" [disabled]=\"isNextButtonDisable\" id=\"next\"\r\n        (click)=\"_onNextItem(currentItemIndex)\">\r\n        {{nextButtonText}}\r\n    </herum-button>\r\n</div>", styles: [".buttons-container{display:flex;gap:10px;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNavigatorComponent, decorators: [{
             type: Component,
@@ -8350,7 +8349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class HerumStepNavigatorComponent {
     steps;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumStepNavigatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumStepNavigatorComponent, isStandalone: false, selector: "herum-step-navigator", inputs: { steps: "steps" }, ngImport: i0, template: "<div class=\"steps\">\r\n    <div *ngFor=\"let step of steps\" class=\"stepper-item\"\r\n        [ngClass]=\"{'completed-step': step.status === 0, 'active-step': step.status === 1}\">\r\n        <herum-radio-button [options]=\"[{id:step.index, name:step.label}]\" [selectedOption]=\"step.index\"\r\n            [isBlocked]=\"true\" [type]=\"step.status === 0 ? 'completed' : step.status === 2 ? 'disabled' :'checked'\">\r\n        </herum-radio-button>\r\n    </div>\r\n</div>", styles: [".steps{display:flex;gap:8px;position:relative}.steps .stepper-item{margin-block-end:8px;width:168px}.steps .stepper-item ::ng-deep herum-radio-button .option-name{font-size:14px}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=disabled]{color:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=completed]{color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=checked]{color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-border{border-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-background{background-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .completed-background{background-color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-background{background:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-border{border-color:var(--disabled-border-color)}.steps .stepper-item:before{content:\"\";display:block;border:4px solid var(--disabled-border-color);border-radius:var(--border-radius);width:100%}.steps .stepper-item.completed-step:before{border-color:var(--icons-color)}.steps .stepper-item.active-step:before{border-color:var(--secondary-color)}\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: "component", type: i2$3.HerumRadioButtonComponent, selector: "herum-radio-button", inputs: ["options", "isValid", "errorMsg", "isVertical", "isBlocked", "type", "selectedOption", "additionalOptionsText", "showAdditionalOptionsText", "secondarySelectedOption"], outputs: ["selectOptionEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumStepNavigatorComponent, isStandalone: false, selector: "herum-step-navigator", inputs: { steps: "steps" }, ngImport: i0, template: "<div class=\"steps\">\r\n    <div *ngFor=\"let step of steps\" class=\"stepper-item\"\r\n        [ngClass]=\"{'completed-step': step.status === 0, 'active-step': step.status === 1}\">\r\n        <herum-radio-button [options]=\"[{id:step.index, name:step.label}]\" [selectedOption]=\"step.index\"\r\n            [isBlocked]=\"true\" [type]=\"step.status === 0 ? 'completed' : step.status === 2 ? 'disabled' :'checked'\">\r\n        </herum-radio-button>\r\n    </div>\r\n</div>", styles: [".steps{display:flex;gap:8px;position:relative}.steps .stepper-item{margin-block-end:8px;width:168px}.steps .stepper-item ::ng-deep herum-radio-button .option-name{font-size:14px}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=disabled]{color:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=completed]{color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=checked]{color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-border{border-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-background{background-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .completed-background{background-color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-background{background:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-border{border-color:var(--disabled-border-color)}.steps .stepper-item:before{content:\"\";display:block;border:4px solid var(--disabled-border-color);border-radius:var(--border-radius);width:100%}.steps .stepper-item.completed-step:before{border-color:var(--icons-color)}.steps .stepper-item.active-step:before{border-color:var(--secondary-color)}\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: "component", type: i2$2.HerumRadioButtonComponent, selector: "herum-radio-button", inputs: ["options", "isValid", "errorMsg", "isVertical", "isBlocked", "type", "selectedOption", "additionalOptionsText", "showAdditionalOptionsText", "secondarySelectedOption"], outputs: ["selectOptionEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumStepNavigatorComponent, decorators: [{
             type: Component,
@@ -8428,7 +8427,7 @@ class HerumUserProfileComponent {
         return getAssignmentStateDisplayName(this.userData.assignments[0].assignmentMetadata.state);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProfileComponent, isStandalone: false, selector: "herum-user-profile", inputs: { userData: "userData", mode: "mode", titleSize: "titleSize", imageSize: "imageSize" }, ngImport: i0, template: "<div class=\"profile-top-conatiner\" [ngClass]=\"mode\" *ngIf=\"userData\">\r\n    <user-profile-image [user]=\"userData\" [imageSize]=\"imageSize\" [mode]=\"mode\"></user-profile-image>\r\n\r\n    <div class=\"profile-name-container\">\r\n        <p\r\n            [ngClass]=\"{'section-header-title': titleSize === 'medium','profile-title': titleSize === 'big','section-title': titleSize === 'small'}\">\r\n            {{userFullName}}\r\n\r\n            <herum-chip *ngIf=\"userData.assignments?.length > 0\"\r\n                [type]=\"userData.assignments[0].assignmentMetadata?.state == 2 ? 'negative':'positive'\"\r\n                [title]=\"assignmentStateDisplayName\" [isDeleteButtonNeeded]=\"false\"></herum-chip>\r\n        </p>\r\n        <p class=\"profile-subtitle\">{{fullHierarchyName}}</p>\r\n        <p class=\"profile-description\" *ngIf=\"mode=='horizontal'\">{{userData.profession}}</p>\r\n    </div>\r\n</div>", styles: [".profile-top-conatiner{display:flex;gap:24px;align-items:center;flex-direction:column;text-align:center}.profile-top-conatiner .profile-title{font-size:22px;font-weight:700;margin:0;width:fit-content}.profile-top-conatiner .profile-subtitle{font-size:14px;margin:0;width:fit-content}.vertical{flex-direction:column}.vertical .profile-title{width:unset;display:flex;justify-content:center;align-items:center;gap:12px}.vertical .profile-subtitle{width:unset}.horizontal{flex-direction:row;padding-bottom:8px}.horizontal .profile-subtitle{width:fit-content}.horizontal .profile-description{width:fit-content;color:gray}.profile-image-for-fallback{display:none;width:0px;height:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.HerumChipComponent, selector: "herum-chip", inputs: ["title", "isDeleteButtonNeeded", "isActive", "isMenuMode", "type"], outputs: ["remove", "chipsActivation"] }, { kind: "component", type: i2$3.UserProfileImageComponent, selector: "user-profile-image", inputs: ["imageSize", "mode", "user", "isLoadingUser", "isUserClickAble"], outputs: ["userClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProfileComponent, isStandalone: false, selector: "herum-user-profile", inputs: { userData: "userData", mode: "mode", titleSize: "titleSize", imageSize: "imageSize" }, ngImport: i0, template: "<div class=\"profile-top-conatiner\" [ngClass]=\"mode\" *ngIf=\"userData\">\r\n    <user-profile-image [user]=\"userData\" [imageSize]=\"imageSize\" [mode]=\"mode\"></user-profile-image>\r\n\r\n    <div class=\"profile-name-container\">\r\n        <p\r\n            [ngClass]=\"{'section-header-title': titleSize === 'medium','profile-title': titleSize === 'big','section-title': titleSize === 'small'}\">\r\n            {{userFullName}}\r\n\r\n            <herum-chip *ngIf=\"userData.assignments?.length > 0\"\r\n                [type]=\"userData.assignments[0].assignmentMetadata?.state == 2 ? 'negative':'positive'\"\r\n                [title]=\"assignmentStateDisplayName\" [isDeleteButtonNeeded]=\"false\"></herum-chip>\r\n        </p>\r\n        <p class=\"profile-subtitle\">{{fullHierarchyName}}</p>\r\n        <p class=\"profile-description\" *ngIf=\"mode=='horizontal'\">{{userData.profession}}</p>\r\n    </div>\r\n</div>", styles: [".profile-top-conatiner{display:flex;gap:24px;align-items:center;flex-direction:column;text-align:center}.profile-top-conatiner .profile-title{font-size:22px;font-weight:700;margin:0;width:fit-content}.profile-top-conatiner .profile-subtitle{font-size:14px;margin:0;width:fit-content}.vertical{flex-direction:column}.vertical .profile-title{width:unset;display:flex;justify-content:center;align-items:center;gap:12px}.vertical .profile-subtitle{width:unset}.horizontal{flex-direction:row;padding-bottom:8px}.horizontal .profile-subtitle{width:fit-content}.horizontal .profile-description{width:fit-content;color:gray}.profile-image-for-fallback{display:none;width:0px;height:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.HerumChipComponent, selector: "herum-chip", inputs: ["title", "isDeleteButtonNeeded", "isActive", "isMenuMode", "type"], outputs: ["remove", "chipsActivation"] }, { kind: "component", type: i2$2.UserProfileImageComponent, selector: "user-profile-image", inputs: ["imageSize", "mode", "user", "isLoadingUser", "isUserClickAble"], outputs: ["userClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProfileComponent, decorators: [{
             type: Component,
@@ -8446,7 +8445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class KeyValueListComponent {
     items = [];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: KeyValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: KeyValueListComponent, isStandalone: false, selector: "key-value-list", inputs: { items: "items" }, ngImport: i0, template: "\r\n<div class=\"item-contianer mb-1\" *ngFor=\"let item of items\">\r\n    <div *ngIf=\"item.iconPath\" class=\"col-1\">\r\n        <img *ngIf=\"item.iconPath\" [src]=\"item.iconPath\">\r\n    </div>\r\n    <div class=\"key col-4 bold\">{{item.key}}</div>\r\n    <div class=\"value col-7 truncate\" [matTooltip]=\"item.value\">{{item.value}}</div>\r\n</div>", styles: [".item-contianer{display:flex;gap:8px}.bold{font-weight:700}img{width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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: KeyValueListComponent, isStandalone: false, selector: "key-value-list", inputs: { items: "items" }, ngImport: i0, template: "\r\n<div class=\"item-contianer mb-1\" *ngFor=\"let item of items\">\r\n    <div *ngIf=\"item.iconPath\" class=\"col-1\">\r\n        <img *ngIf=\"item.iconPath\" [src]=\"item.iconPath\">\r\n    </div>\r\n    <div class=\"key col-4 bold\">{{item.key}}</div>\r\n    <div class=\"value col-7 truncate\" [matTooltip]=\"item.value\">{{item.value}}</div>\r\n</div>", styles: [".item-contianer{display:flex;gap:8px}.bold{font-weight:700}img{width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: KeyValueListComponent, decorators: [{
             type: Component,
@@ -8474,7 +8473,7 @@ class ProgressesOverViewComponent {
     progressOverViewDirection = 'row';
     containerProgressesOverViewDirection = 'column';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProgressesOverViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ProgressesOverViewComponent, isStandalone: false, selector: "progresses-over-view", inputs: { titleSize: "titleSize", circularProgressSize: "circularProgressSize", progressesOverView: "progressesOverView", progressOverViewDirection: "progressOverViewDirection", containerProgressesOverViewDirection: "containerProgressesOverViewDirection" }, ngImport: i0, template: "<div class=\"layout\">\r\n    <div class=\"progresses-container\"\r\n        [ngClass]=\"{'row-progresses-container':containerProgressesOverViewDirection === 'row'}\">\r\n        <div class=\"progress-over-view\" [ngClass]=\"{'flex-direction-column':progressOverViewDirection === 'column'}\"\r\n            *ngFor=\"let progressOverView of progressesOverView\">\r\n            <herum-circular-progress-bar [fill]=\"false\" [showPercentage]=\"progressOverView.showPercentage\"\r\n                [percentage]=\"progressOverView.progress\" [displayedContent]=\"progressOverView.displayedContent\"\r\n                [displayedContentColorMatchesGradientColor]=\"progressOverView.displayedContentColorMatchesGradientColor\"\r\n                [firstGradient]=\"progressOverView.firstGradient\" [size]=\"circularProgressSize\">\r\n            </herum-circular-progress-bar>\r\n\r\n            <div class=\"progress-labels\" [ngClass]=\"{'align-items-center':progressOverViewDirection === 'column'}\">\r\n                <h2 class=\"section-header-title m-0 p-0\" [ngClass]=\"[titleSize]\">\r\n                    {{ progressOverView.title }}\r\n                </h2>\r\n\r\n                <span *ngIf=\"progressOverView.description\" class=\"w-100 text-align-right\">\r\n                    {{ progressOverView.description }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".progresses-container.row-progresses-container{flex-direction:row;justify-content:space-between}.progresses-container{display:flex;flex-direction:column}.progresses-container .progress-over-view{display:flex;align-items:center;gap:var(--standard-medium-padding)}.progresses-container .progress-over-view .progress-labels{display:flex;flex-direction:column;gap:4px}.flex-direction-column{flex-direction:column}\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: "component", type: i2$3.HerumCircularProgressBarComponent, selector: "herum-circular-progress-bar", inputs: ["percentage", "fill", "size", "firstGradient", "fillColor", "showPercentage", "displayedContent", "displayedContentColorMatchesGradientColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ProgressesOverViewComponent, isStandalone: false, selector: "progresses-over-view", inputs: { titleSize: "titleSize", circularProgressSize: "circularProgressSize", progressesOverView: "progressesOverView", progressOverViewDirection: "progressOverViewDirection", containerProgressesOverViewDirection: "containerProgressesOverViewDirection" }, ngImport: i0, template: "<div class=\"layout\">\r\n    <div class=\"progresses-container\"\r\n        [ngClass]=\"{'row-progresses-container':containerProgressesOverViewDirection === 'row'}\">\r\n        <div class=\"progress-over-view\" [ngClass]=\"{'flex-direction-column':progressOverViewDirection === 'column'}\"\r\n            *ngFor=\"let progressOverView of progressesOverView\">\r\n            <herum-circular-progress-bar [fill]=\"false\" [showPercentage]=\"progressOverView.showPercentage\"\r\n                [percentage]=\"progressOverView.progress\" [displayedContent]=\"progressOverView.displayedContent\"\r\n                [displayedContentColorMatchesGradientColor]=\"progressOverView.displayedContentColorMatchesGradientColor\"\r\n                [firstGradient]=\"progressOverView.firstGradient\" [size]=\"circularProgressSize\">\r\n            </herum-circular-progress-bar>\r\n\r\n            <div class=\"progress-labels\" [ngClass]=\"{'align-items-center':progressOverViewDirection === 'column'}\">\r\n                <h2 class=\"section-header-title m-0 p-0\" [ngClass]=\"[titleSize]\">\r\n                    {{ progressOverView.title }}\r\n                </h2>\r\n\r\n                <span *ngIf=\"progressOverView.description\" class=\"w-100 text-align-right\">\r\n                    {{ progressOverView.description }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".progresses-container.row-progresses-container{flex-direction:row;justify-content:space-between}.progresses-container{display:flex;flex-direction:column}.progresses-container .progress-over-view{display:flex;align-items:center;gap:var(--standard-medium-padding)}.progresses-container .progress-over-view .progress-labels{display:flex;flex-direction:column;gap:4px}.flex-direction-column{flex-direction:column}\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: "component", type: i2$2.HerumCircularProgressBarComponent, selector: "herum-circular-progress-bar", inputs: ["percentage", "fill", "size", "firstGradient", "fillColor", "showPercentage", "displayedContent", "displayedContentColorMatchesGradientColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProgressesOverViewComponent, decorators: [{
             type: Component,
@@ -8676,13 +8675,13 @@ class ErrorMessageDialogComponent {
     _onClose() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ErrorMessageDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ErrorMessageDialogComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ErrorMessageDialogComponent, isStandalone: false, selector: "error-message-dialog", ngImport: i0, template: "<div class=\"error-dialog-container\">\r\n    <div class=\"w-100 d-flex justify-content-center\">\r\n        <img [src]=\"errorImagePath\">\r\n    </div>\r\n\r\n    <p class=\"title\">{{ data.title }}</p>\r\n    <p class=\"description\">{{ data.description }}</p>\r\n</div>", styles: [".error-dialog-container{display:flex;justify-content:center;align-items:stretch;flex-direction:column;padding:16px}.error-dialog-container img{max-width:55%}.error-dialog-container p{text-align:center}.error-dialog-container .title{font-size:16px;font-weight:700}.error-dialog-container .description{font-size:14px;font-weight:700}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ErrorMessageDialogComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'error-message-dialog', template: "<div class=\"error-dialog-container\">\r\n    <div class=\"w-100 d-flex justify-content-center\">\r\n        <img [src]=\"errorImagePath\">\r\n    </div>\r\n\r\n    <p class=\"title\">{{ data.title }}</p>\r\n    <p class=\"description\">{{ data.description }}</p>\r\n</div>", styles: [".error-dialog-container{display:flex;justify-content:center;align-items:stretch;flex-direction:column;padding:16px}.error-dialog-container img{max-width:55%}.error-dialog-container p{text-align:center}.error-dialog-container .title{font-size:16px;font-weight:700}.error-dialog-container .description{font-size:14px;font-weight:700}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: undefined, decorators: [{
@@ -8728,13 +8727,13 @@ class FetchedMessageDialog {
     _onCloseDialog() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageDialog, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: FetchedMessageDialog, isStandalone: false, selector: "fetched-message-dialog", ngImport: i0, template: "<div class=\"fetched-message-dialog-container\">\r\n    <div class=\"message-content\">\r\n        <div [innerHTML]=\"message?.image | safeHtml\"></div>\r\n\r\n        <div>\r\n            <div [innerHTML]=\"message?.title | safeHtml\"></div>\r\n            <div [innerHTML]=\"message?.subTitle | safeHtml\"></div>\r\n            <div [innerHTML]=\"message?.content | safeHtml\"></div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"dialog-buttons-actions-container\">\r\n        <herum-button [name]=\"'fetched-messsage-dialog-submission'\" (click)=\"_onCloseDialog()\">\r\n            {{message?.actionButtonText}}\r\n        </herum-button>\r\n    </div>\r\n</div>", styles: [".fetched-message-dialog-container{width:50vw;min-width:710px}.message-content{display:flex;gap:16px}\n", ".dialog-container,form{display:flex;flex-direction:column;gap:16px;position:relative;padding:16px;max-height:80vh;width:30vw}.title{font-size:18px;font-weight:600}p{margin:0}.dialog-buttons-actions-container{width:100%;gap:16px;display:flex;flex-direction:row}.close-dialog{position:absolute;top:20px;left:20px}.title-container{display:flex;align-items:center;justify-content:space-between}.close-button{cursor:pointer;height:11px}\n"], dependencies: [{ kind: "component", type: i2$3.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageDialog, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: FetchedMessageDialog, isStandalone: false, selector: "fetched-message-dialog", ngImport: i0, template: "<div class=\"fetched-message-dialog-container\">\r\n    <div class=\"message-content\">\r\n        <div [innerHTML]=\"message?.image | safeHtml\"></div>\r\n\r\n        <div>\r\n            <div [innerHTML]=\"message?.title | safeHtml\"></div>\r\n            <div [innerHTML]=\"message?.subTitle | safeHtml\"></div>\r\n            <div [innerHTML]=\"message?.content | safeHtml\"></div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"dialog-buttons-actions-container\">\r\n        <herum-button [name]=\"'fetched-messsage-dialog-submission'\" (click)=\"_onCloseDialog()\">\r\n            {{message?.actionButtonText}}\r\n        </herum-button>\r\n    </div>\r\n</div>", styles: [".fetched-message-dialog-container{width:50vw;min-width:710px}.message-content{display:flex;gap:16px}\n", ".dialog-container,form{display:flex;flex-direction:column;gap:16px;position:relative;padding:16px;max-height:80vh;width:30vw}.title{font-size:18px;font-weight:600}p{margin:0}.dialog-buttons-actions-container{width:100%;gap:16px;display:flex;flex-direction:row}.close-dialog{position:absolute;top:20px;left:20px}.title-container{display:flex;align-items:center;justify-content:space-between}.close-button{cursor:pointer;height:11px}\n"], dependencies: [{ kind: "component", type: i2$2.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageDialog, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'fetched-message-dialog', template: "<div class=\"fetched-message-dialog-container\">\r\n    <div class=\"message-content\">\r\n        <div [innerHTML]=\"message?.image | safeHtml\"></div>\r\n\r\n        <div>\r\n            <div [innerHTML]=\"message?.title | safeHtml\"></div>\r\n            <div [innerHTML]=\"message?.subTitle | safeHtml\"></div>\r\n            <div [innerHTML]=\"message?.content | safeHtml\"></div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"dialog-buttons-actions-container\">\r\n        <herum-button [name]=\"'fetched-messsage-dialog-submission'\" (click)=\"_onCloseDialog()\">\r\n            {{message?.actionButtonText}}\r\n        </herum-button>\r\n    </div>\r\n</div>", styles: [".fetched-message-dialog-container{width:50vw;min-width:710px}.message-content{display:flex;gap:16px}\n", ".dialog-container,form{display:flex;flex-direction:column;gap:16px;position:relative;padding:16px;max-height:80vh;width:30vw}.title{font-size:18px;font-weight:600}p{margin:0}.dialog-buttons-actions-container{width:100%;gap:16px;display:flex;flex-direction:row}.close-dialog{position:absolute;top:20px;left:20px}.title-container{display:flex;align-items:center;justify-content:space-between}.close-button{cursor:pointer;height:11px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -8788,7 +8787,7 @@ class CheckboxCellComponent {
         this.params = params;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CheckboxCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CheckboxCellComponent, isStandalone: false, selector: "app-checkbox-cell", ngImport: i0, template: "<div class=\"checkbox-container\" [ngClass]=\"align\">\r\n    <herum-checkbox [isChecked]=\"isChecked\" [isBlocked]=\"blocked\" (checkedEmitter)=\"_checked($event)\"></herum-checkbox>\r\n</div>", styles: [".checkbox-container{width:100%;height:100%}.checkbox-container.center,.checkbox-container.right,.checkbox-container.left,.checkbox-container.top,.checkbox-container.bottom{height:100%;display:flex}.checkbox-container.center,.checkbox-container.right,.checkbox-container.left{align-items:center}.checkbox-container.center,.checkbox-container.top,.checkbox-container.bottom{justify-content:center}.checkbox-container.right{justify-content:flex-start}.checkbox-container.left{justify-content:flex-end}.checkbox-container.top{align-items:flex-start}.checkbox-container.bottom{align-items:flex-end}.checkbox-container herum-checkbox{display:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CheckboxCellComponent, isStandalone: false, selector: "app-checkbox-cell", ngImport: i0, template: "<div class=\"checkbox-container\" [ngClass]=\"align\">\r\n    <herum-checkbox [isChecked]=\"isChecked\" [isBlocked]=\"blocked\" (checkedEmitter)=\"_checked($event)\"></herum-checkbox>\r\n</div>", styles: [".checkbox-container{width:100%;height:100%}.checkbox-container.center,.checkbox-container.right,.checkbox-container.left,.checkbox-container.top,.checkbox-container.bottom{height:100%;display:flex}.checkbox-container.center,.checkbox-container.right,.checkbox-container.left{align-items:center}.checkbox-container.center,.checkbox-container.top,.checkbox-container.bottom{justify-content:center}.checkbox-container.right{justify-content:flex-start}.checkbox-container.left{justify-content:flex-end}.checkbox-container.top{align-items:flex-start}.checkbox-container.bottom{align-items:flex-end}.checkbox-container herum-checkbox{display:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CheckboxCellComponent, decorators: [{
             type: Component,
@@ -8825,7 +8824,7 @@ class CopyableCellComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CopyableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CopyableCellComponent, isStandalone: false, selector: "app-copyable-cell", ngImport: i0, template: "<span class=\"text\" [cdkCopyToClipboard]=\"value\" matTooltip=\"\u05DC\u05D7\u05E5 \u05DC\u05D4\u05E2\u05EA\u05E7\u05D4\" matTooltipShowDelay=\"300\">\r\n    {{value}}\r\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$6.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CopyableCellComponent, isStandalone: false, selector: "app-copyable-cell", ngImport: i0, template: "<span class=\"text\" [cdkCopyToClipboard]=\"value\" matTooltip=\"\u05DC\u05D7\u05E5 \u05DC\u05D4\u05E2\u05EA\u05E7\u05D4\" matTooltipShowDelay=\"300\">\r\n    {{value}}\r\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CopyableCellComponent, decorators: [{
             type: Component,
@@ -8856,7 +8855,7 @@ class DeleteRowComponent {
         this.params?.context.componentParent.deleteChildComponentReference(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeleteRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: DeleteRowComponent, isStandalone: false, selector: "delete-row", inputs: { isRowHovered: "isRowHovered", params: "params" }, ngImport: i0, template: "<div class=\"cell-container\">\r\n    <div #cellValue class=\"cell-value\" [matTooltip]=\"_isTruncatedTitleElement(cellValue)? value : ''\">\r\n        {{value | ellipsis:cellValue}}\r\n    </div>\r\n\r\n    <img class=\"cursor-pointer\" *ngIf=\"isRowHovered\" src=\"assets/feed/icons/garbage.svg\"\r\n        (click)=\"_onDelete($event)\" alt=\"delete\">\r\n</div>", styles: [".cell-container{display:flex;justify-content:space-between;align-items:center;gap:10px}.cell-value{width:250px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: DeleteRowComponent, isStandalone: false, selector: "delete-row", inputs: { isRowHovered: "isRowHovered", params: "params" }, ngImport: i0, template: "<div class=\"cell-container\">\r\n    <div #cellValue class=\"cell-value\" [matTooltip]=\"_isTruncatedTitleElement(cellValue)? value : ''\">\r\n        {{value | ellipsis:cellValue}}\r\n    </div>\r\n\r\n    <img class=\"cursor-pointer\" *ngIf=\"isRowHovered\" src=\"assets/feed/icons/garbage.svg\"\r\n        (click)=\"_onDelete($event)\" alt=\"delete\">\r\n</div>", styles: [".cell-container{display:flex;justify-content:space-between;align-items:center;gap:10px}.cell-value{width:250px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeleteRowComponent, decorators: [{
             type: Component,
@@ -8905,13 +8904,13 @@ class EditRowComponent {
     ngOnDestroy() {
         this.params?.context.componentParent.deleteChildComponentReference(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EditRowComponent, deps: [{ token: i1$6.Clipboard }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: EditRowComponent, isStandalone: false, selector: "edit-row", inputs: { isRowHovered: "isRowHovered", params: "params" }, ngImport: i0, template: "<div class=\"cell-container\">\r\n    <span class=\"text\" (click)=\"_onCopyToClipboard($event)\" [matTooltip]=\"isCopyableToClipboard? '\u05DC\u05D7\u05E5 \u05DC\u05D4\u05E2\u05EA\u05E7\u05D4' : ''\"\r\n        matTooltipShowDelay=\"600\">{{value}}</span>\r\n\r\n    <span class=\"edit-button\" *ngIf=\"isRowHovered\" [innerHTML]=\"editIcon | safeHtml\" (click)=\"_onEdit($event)\"\r\n        alt=\"edit\"></span>\r\n</div>", styles: [":host{width:100%}.cell-container{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}.edit-button{cursor:pointer;stroke:var(--icons-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EditRowComponent, deps: [{ token: i1$7.Clipboard }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: EditRowComponent, isStandalone: false, selector: "edit-row", inputs: { isRowHovered: "isRowHovered", params: "params" }, ngImport: i0, template: "<div class=\"cell-container\">\r\n    <span class=\"text\" (click)=\"_onCopyToClipboard($event)\" [matTooltip]=\"isCopyableToClipboard? '\u05DC\u05D7\u05E5 \u05DC\u05D4\u05E2\u05EA\u05E7\u05D4' : ''\"\r\n        matTooltipShowDelay=\"600\">{{value}}</span>\r\n\r\n    <span class=\"edit-button\" *ngIf=\"isRowHovered\" [innerHTML]=\"editIcon | safeHtml\" (click)=\"_onEdit($event)\"\r\n        alt=\"edit\"></span>\r\n</div>", styles: [":host{width:100%}.cell-container{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}.edit-button{cursor:pointer;stroke:var(--icons-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EditRowComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'edit-row', template: "<div class=\"cell-container\">\r\n    <span class=\"text\" (click)=\"_onCopyToClipboard($event)\" [matTooltip]=\"isCopyableToClipboard? '\u05DC\u05D7\u05E5 \u05DC\u05D4\u05E2\u05EA\u05E7\u05D4' : ''\"\r\n        matTooltipShowDelay=\"600\">{{value}}</span>\r\n\r\n    <span class=\"edit-button\" *ngIf=\"isRowHovered\" [innerHTML]=\"editIcon | safeHtml\" (click)=\"_onEdit($event)\"\r\n        alt=\"edit\"></span>\r\n</div>", styles: [":host{width:100%}.cell-container{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}.edit-button{cursor:pointer;stroke:var(--icons-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.Clipboard }], propDecorators: { isRowHovered: [{
+        }], ctorParameters: () => [{ type: i1$7.Clipboard }], propDecorators: { isRowHovered: [{
                 type: Input
             }], params: [{
                 type: Input
@@ -8939,7 +8938,7 @@ let InputCellComponent = class InputCellComponent {
         this.align = params.align;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InputCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: InputCellComponent, isStandalone: false, selector: "input-cell", ngImport: i0, template: "<div class=\"input-cell-container\" [ngClass]=\"align\">\r\n    <herum-input-field type=\"number\" (inputValueEmitter)=\"_input($event)\" [inputValue]=\"inputValue\" placeholder=\"\"></herum-input-field>\r\n</div>", styles: [".input-cell-container{height:100%;line-height:normal}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left,.input-cell-container.top,.input-cell-container.bottom{height:100%;display:flex}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left{align-items:center}.input-cell-container.center,.input-cell-container.top,.input-cell-container.bottom{justify-content:center}.input-cell-container.right{justify-content:flex-start}.input-cell-container.left{justify-content:flex-end}.input-cell-container.top{align-items:flex-start}.input-cell-container.bottom{align-items:flex-end}.input-cell-container herum-input-field{width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: InputCellComponent, isStandalone: false, selector: "input-cell", ngImport: i0, template: "<div class=\"input-cell-container\" [ngClass]=\"align\">\r\n    <herum-input-field type=\"number\" (inputValueEmitter)=\"_input($event)\" [inputValue]=\"inputValue\" placeholder=\"\"></herum-input-field>\r\n</div>", styles: [".input-cell-container{height:100%;line-height:normal}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left,.input-cell-container.top,.input-cell-container.bottom{height:100%;display:flex}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left{align-items:center}.input-cell-container.center,.input-cell-container.top,.input-cell-container.bottom{justify-content:center}.input-cell-container.right{justify-content:flex-start}.input-cell-container.left{justify-content:flex-end}.input-cell-container.top{align-items:flex-start}.input-cell-container.bottom{align-items:flex-end}.input-cell-container herum-input-field{width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.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"] }] });
 };
 InputCellComponent = __decorate([
     TableRowHeight$1(tableRowHeights$1.switchCell)
@@ -8988,7 +8987,7 @@ let SwitchCellComponent = class SwitchCellComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SwitchCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SwitchCellComponent, isStandalone: false, selector: "switch-cell", inputs: { isChecked: "isChecked", align: "align", disabled: "disabled" }, ngImport: i0, template: "<div class=\"switch-container\" [ngClass]=\"align\">\r\n    <herum-switch [isChecked]=\"isChecked\" (checked)=\"_checked($event)\" [disabled]=\"disabled\"></herum-switch>\r\n</div>", styles: [".switch-container{width:100%}.switch-container.center,.switch-container.right,.switch-container.left,.switch-container.top,.switch-container.bottom{height:100%;display:flex}.switch-container.center,.switch-container.right,.switch-container.left{align-items:center}.switch-container.center,.switch-container.top,.switch-container.bottom{justify-content:center}.switch-container.right{justify-content:flex-start}.switch-container.left{justify-content:flex-end}.switch-container.top{align-items:flex-start}.switch-container.bottom{align-items:flex-end}.switch-container herum-switch{display:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.HerumSwitchComponent, selector: "herum-switch", inputs: ["isChecked", "disabled"], outputs: ["checked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SwitchCellComponent, isStandalone: false, selector: "switch-cell", inputs: { isChecked: "isChecked", align: "align", disabled: "disabled" }, ngImport: i0, template: "<div class=\"switch-container\" [ngClass]=\"align\">\r\n    <herum-switch [isChecked]=\"isChecked\" (checked)=\"_checked($event)\" [disabled]=\"disabled\"></herum-switch>\r\n</div>", styles: [".switch-container{width:100%}.switch-container.center,.switch-container.right,.switch-container.left,.switch-container.top,.switch-container.bottom{height:100%;display:flex}.switch-container.center,.switch-container.right,.switch-container.left{align-items:center}.switch-container.center,.switch-container.top,.switch-container.bottom{justify-content:center}.switch-container.right{justify-content:flex-start}.switch-container.left{justify-content:flex-end}.switch-container.top{align-items:flex-start}.switch-container.bottom{align-items:flex-end}.switch-container herum-switch{display:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.HerumSwitchComponent, selector: "herum-switch", inputs: ["isChecked", "disabled"], outputs: ["checked"] }] });
 };
 SwitchCellComponent = __decorate([
     TableRowHeight$1(tableRowHeights$1.switchCell)
@@ -9196,7 +9195,7 @@ class HerumAgGridFilterComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAgGridFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAgGridFilterComponent, isStandalone: false, selector: "app-herum-ag-grid-filter", ngImport: i0, template: "<div class=\"ag-filter\">\r\n    <herum-input-field [type]=\"'search'\" [placeholder]=\"'\u05D7\u05E4\u05E9 \u05E2\u05E8\u05DA \u05DC\u05E4\u05D9\u05DC\u05D8\u05D5\u05E8'\" [showErrorMsgGap]=\"false\"\r\n        [formControl]=\"selectedFilter\"></herum-input-field>\r\n    <div>\r\n        <div class=\"ag-filter-body-wrapper\">\r\n            <div ref=\"ag-filter-loading\" class=\"loading-filter ag-hidden\">\r\n                Loading...\r\n            </div>\r\n            <div>\r\n                <div id=\"richList\" class=\"ag-set-filter-list\">\r\n                    <div class=\"ag-virtual-list-viewport\">\r\n                        <div class=\"ag-virtual-list-container\" [attr.style.height]=\"containerHeight\">\r\n                            <div style=\"line-height: 28px;\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox [isChecked]=\"isEverythingSelected\" [type]=\"checkBoxType\"\r\n                                            [isBlocked]=\"isToggleAllCheckBoxBlocked\"\r\n                                            (checkedEmitter)=\"toggleEverything()\"></herum-checkbox>\r\n                                    </div>\r\n                                    <span class=\"ag-filter-value select-all-bold\">\u05D1\u05D7\u05E8 \u05D4\u05DB\u05DC</span>\r\n                                </label>\r\n                            </div>\r\n\r\n                            <div style=\"line-height: 28px;\" *ngFor=\"let item of (onFilterValuesChanged$ | async)\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox (checkedEmitter)=\"toggleItem(item)\"\r\n                                            [isChecked]=\"selectedValuesMap.hasOwnProperty(item)\"></herum-checkbox>\r\n                                    </div>\r\n\r\n                                    <span #agFilterValue appHerumToolTip class=\"ag-filter-value w-100\"\r\n                                        [matTooltip]=\"isTruncatedTitleElement(agFilterValue)? item : ''\">\r\n                                        {{item === '' ? '(\u05E8\u05D9\u05E7)': item | ellipsis:agFilterValue}}\r\n                                    </span>\r\n                                </label>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ag-set-filter-item{gap:8px}::ng-deep .ag-menu{border-radius:var(--border-radius)!important}.select-all-bold{font-weight:700}::ng-deep .ag-theme-alpine .ag-popup-child:not(.ag-tooltip-custom){width:136px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }, { kind: "component", type: i2$3.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: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAgGridFilterComponent, isStandalone: false, selector: "app-herum-ag-grid-filter", ngImport: i0, template: "<div class=\"ag-filter\">\r\n    <herum-input-field [type]=\"'search'\" [placeholder]=\"'\u05D7\u05E4\u05E9 \u05E2\u05E8\u05DA \u05DC\u05E4\u05D9\u05DC\u05D8\u05D5\u05E8'\" [showErrorMsgGap]=\"false\"\r\n        [formControl]=\"selectedFilter\"></herum-input-field>\r\n    <div>\r\n        <div class=\"ag-filter-body-wrapper\">\r\n            <div ref=\"ag-filter-loading\" class=\"loading-filter ag-hidden\">\r\n                Loading...\r\n            </div>\r\n            <div>\r\n                <div id=\"richList\" class=\"ag-set-filter-list\">\r\n                    <div class=\"ag-virtual-list-viewport\">\r\n                        <div class=\"ag-virtual-list-container\" [attr.style.height]=\"containerHeight\">\r\n                            <div style=\"line-height: 28px;\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox [isChecked]=\"isEverythingSelected\" [type]=\"checkBoxType\"\r\n                                            [isBlocked]=\"isToggleAllCheckBoxBlocked\"\r\n                                            (checkedEmitter)=\"toggleEverything()\"></herum-checkbox>\r\n                                    </div>\r\n                                    <span class=\"ag-filter-value select-all-bold\">\u05D1\u05D7\u05E8 \u05D4\u05DB\u05DC</span>\r\n                                </label>\r\n                            </div>\r\n\r\n                            <div style=\"line-height: 28px;\" *ngFor=\"let item of (onFilterValuesChanged$ | async)\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox (checkedEmitter)=\"toggleItem(item)\"\r\n                                            [isChecked]=\"selectedValuesMap.hasOwnProperty(item)\"></herum-checkbox>\r\n                                    </div>\r\n\r\n                                    <span #agFilterValue appHerumToolTip class=\"ag-filter-value w-100\"\r\n                                        [matTooltip]=\"isTruncatedTitleElement(agFilterValue)? item : ''\">\r\n                                        {{item === '' ? '(\u05E8\u05D9\u05E7)': item | ellipsis:agFilterValue}}\r\n                                    </span>\r\n                                </label>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ag-set-filter-item{gap:8px}::ng-deep .ag-menu{border-radius:var(--border-radius)!important}.select-all-bold{font-weight:700}::ng-deep .ag-theme-alpine .ag-popup-child:not(.ag-tooltip-custom){width:136px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }, { kind: "component", type: i2$2.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: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAgGridFilterComponent, decorators: [{
             type: Component,
@@ -9442,7 +9441,7 @@ class HerumTableComponent {
         return maxHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTableComponent, isStandalone: false, selector: "herum-table", inputs: { rowData: "rowData", columnDefs: "columnDefs", selectedRowsIds: "selectedRowsIds", noResults: "noResults", overlayNoRowsTemplate: "overlayNoRowsTemplate", rowsSelectionType: "rowsSelectionType", usePagination: "usePagination", suppressRowClickSelection: "suppressRowClickSelection", showExportToExcel: "showExportToExcel" }, outputs: { onCheckedRow: "onCheckedRow", onUncheckedRow: "onUncheckedRow", selectedRowByChild: "selectedRowByChild", cellValueChangeByChild: "cellValueChangeByChild", cellMouseOver: "cellMouseOver", onPaginationChanged: "onPaginationChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [HerumAgGridFilterComponent], viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout-container\" [class.show-export-button]=\"showExportToExcel\">\r\n  <div #tableContainer class=\"table-container\">\r\n    <ag-grid-angular style=\"height: 100% ;width: 100%\" class=\"ag-theme-alpine ag-rtl\" [rowData]=\"rowData\"\r\n      [rowSelection]=\"rowsSelectionType\" [rowMultiSelectWithClick]=\"true\" [columnDefs]=\"columnDefs\"\r\n      [defaultColDef]=\"defaultColDef\" [context]=\"context\" [components]=\"frameworkComponents\"\r\n      [overlayNoRowsTemplate]=\"overlayNoRowsTemplate\" [enableRtl]=\"true\" [rowHeight]=\"rowHeight\"\r\n      [pagination]=\"usePagination\" [paginationAutoPageSize]=\"usePagination\" [tooltipShowDelay]=\"0\"\r\n      [gridOptions]=\"gridOptions\" [suppressRowClickSelection]=\"suppressRowClickSelection\"\r\n      (cellMouseOver)=\"_onCellMouseOver($event)\" (paginationChanged)=\"_onPaginationChanged($event)\"\r\n      (rowSelected)=\"_onRowSelected($event)\" (firstDataRendered)=\"_onFirstDataRendered($event)\"\r\n      (filterChanged)=\"_onFilterChanged($event)\" (gridReady)=\"_onGridReady($event)\"\r\n      (modelUpdated)=\"_onModelUpdated($event)\" (mouseleave)=\"_onGridMouseLeave()\">\r\n    </ag-grid-angular>\r\n    <ng-container *ngIf=\"isLoading\"><herum-loader></herum-loader></ng-container>\r\n  </div>\r\n\r\n  <div class=\"export-button-container\">\r\n    <herum-button [type]=\"'secondary'\" (click)=\"_onExportCsv()\">\u05D9\u05D9\u05E6\u05D5\u05D0 \u05DC\u05D0\u05E7\u05E1\u05DC</herum-button>\r\n  </div>\r\n</div>", styles: [":host{--export-buttons-margin: 0px;--export-buttons-container-height: 0px}.table-layout-container{height:100%;width:100%}.table-layout-container .table-container{position:relative;width:100%;--table-border-color: transparent}.table-layout-container .table-container .img-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;position:absolute;top:10px;left:10px;z-index:1;background-color:#fff;border-radius:var(--border-radius);padding:5px;cursor:pointer}.table-layout-container .export-button-container{display:flex;justify-content:left;margin-top:var(--export-buttons-margin);margin-left:var(--export-buttons-margin);height:var(--export-buttons-container-height);overflow:hidden}.table-layout-container.show-export-button{--export-buttons-margin: 12px;--export-buttons-container-height: 32px}::ng-deep .hadracha .ag-header{border-radius:var(--border-radius)}::ng-deep .hadracha .ag-header .ag-header-viewport,::ng-deep .hadracha .ag-header .ag-pinned-right-header{background-color:var(--icons-color)}::ng-deep .hadracha .ag-header *{color:#fff;font-size:16px}::ng-deep .hadracha .ag-header ::ng-deep .ag-icon-menu:before{color:#fff!important}::ng-deep .hadracha .ag-header-cell:not(:first-child),::ng-deep .hadracha .ag-header-group-cell{border:none!important}::ng-deep .hadracha ::ng-deep .ag-header-cell-label,::ng-deep .hadracha .ag-cell{text-align:center;padding:0!important;justify-content:center;font-size:14px;border:none!important}::ng-deep .hadracha ::ng-deep .ag-cell:not(:first-child){border:none!important}::ng-deep .hadracha ::ng-deep .ag-row:not(:last-child){border-bottom:2px solid var(--divider-color)}::ng-deep .hadracha ::ng-deep .ag-header-cell-text{font-size:14px}::ng-deep .ag-theme-alpine .ag-body-viewport{overflow-y:scroll}.ag-theme-alpine{--ag-checkbox-unchecked-color: var(--secondary-color);--ag-active-color: transparent;--ag-border-color: var(--table-border-color)}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper{height:var(--herum-checkbox-size)!important;width:var(--herum-checkbox-size)!important;font-size:0px;line-height:0px}::ng-deep .ag-checkbox-input-wrapper input{cursor:pointer;border:1px solid var(--secondary-color);opacity:1!important;border-radius:2px!important;height:var(--herum-checkbox-size)!important;width:var(--herum-checkbox-size)!important}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper:after{content:\"\"}::ng-deep .ag-checkbox-input-wrapper input:checked{background:var(--primary-color)!important;border:0px solid var(--secondary-color)!important}::ng-deep .ag-unselectable{-webkit-user-select:text;user-select:text}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked:after{content:url(/assets/shared/icons/bigV.svg)!important;pointer-events:none;border-color:transparent;position:absolute;top:52%!important;left:51%!important;transform:translate(-50%,-50%)!important}::ng-deep .ag-indeterminate{outline:.5px solid var(--icons-color)!important}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-indeterminate:after{content:\"\"!important;background:var(--primary-color);height:50%;width:50%;border-radius:1px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep .ag-tooltip{background-color:var(--tooltip-background-color)!important;color:var(--light-background-color)!important;border-radius:var(--border-radius)!important;font-size:var(--standard-font-size)!important;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}::ng-deep .ag-header-cell-sortable{padding-right:9px!important}::ng-deep .ag-theme-alpine .ag-row{border-bottom:none}::ng-deep .ag-theme-alpine .ag-body-viewport{border-bottom:none}::ng-deep .ag-theme-alpine .ag-row{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}.ag-theme-alpine .ag-body-viewport{margin-top:0!important;margin-bottom:0!important}::ng-deep .ag-theme-quartz{--ag-grid-size: 5px;--ag-list-item-height: 20px}::ng-deep .ag-row:hover{background-color:var(--item-hover-color)!important}::ng-deep .ag-header{background:var(--notebook-header);color:#333;font-weight:700;height:20px;border-bottom:none}::ng-deep .ag-theme-alpine{--ag-cell-horizontal-border: \"#333\";--ag-header-column-separator-display: block}::ng-deep .ag-header-cell:not(:first-child),::ng-deep .ag-header-group-cell{border-right:1px solid var(--table-border-color);height:50px!important}::ng-deep .ag-rtl .ag-cell{border-left:1px solid var(--table-border-color);line-height:var(--table-row-line-height)}::ng-deep .ag-header-cell-label,::ng-deep .ag-cell-value{padding-right:8px}::ng-deep .ag-cell{padding-right:8px!important}::ng-deep .ag-theme-alpine .ag-row-selected{background-color:var(--item-hover-color)}::ng-deep .ag-theme-alpine .ag-row-even.selected-row,::ng-deep .ag-theme-alpine .ag-row-odd.selected-row{background-color:var(--item-hover-color)}::ng-deep .ag-cell:not(:first-child){border:none!important;border-right:1px solid var(--table-border-color)!important}::ng-deep .ag-header-cell:before{background:transparent}::ng-deep .ag-header-cell:not(:first-child){padding:0}::ng-deep .ag-header-cell.ag-column-first{border:none!important}::ng-deep .ag-cell-value.ag-cell.ag-column-last{border:none!important}::ng-deep .ag-wrapper.ag-picker-field-wrapper.ag-picker-collapsed:focus-within{border-color:var(--icons-color)!important;box-shadow:none!important}::ng-deep .ag-picker-field-wrapper.ag-picker-has-focus,.ag-picker-field-wrapper:focus-within{border-color:var(--icons-color)!important;box-shadow:none!important}::ng-deep .ag-icon-small-down:before{color:var(--icons-color)!important}::ng-deep .ag-checkbox-input-wrapper:after{top:0;left:0;border-radius:4px;transition:background .3s ease}::ng-deep .ag-checkbox-input-wrapper.ag-checked:after{color:var(--secondary-color)}::ng-deep .ag-root-wrapper.ag-layout-normal{border-radius:8px}.edit-row-cell{width:100%!important}::ng-deep edit-row{width:100%!important}::ng-deep .ag-icon-menu:before{color:var(--icons-color)!important}::ng-deep .ag-cell-inline-editing{padding:0}::ng-deep .ag-theme-alpine .ag-header{border-bottom:none;background-color:transparent!important}::ng-deep .ag-theme-alpine .ag-rtl .ag-cell{align-items:center}::ng-deep .mat-tooltip-trigger{overflow:hidden;text-overflow:ellipsis}::ng-deep .text-to-right.ag-header-cell-label,::ng-deep .text-to-right.ag-cell{text-align:start;padding-right:20px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }, { kind: "component", type: i3$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTableComponent, isStandalone: false, selector: "herum-table", inputs: { rowData: "rowData", columnDefs: "columnDefs", selectedRowsIds: "selectedRowsIds", noResults: "noResults", overlayNoRowsTemplate: "overlayNoRowsTemplate", rowsSelectionType: "rowsSelectionType", usePagination: "usePagination", suppressRowClickSelection: "suppressRowClickSelection", showExportToExcel: "showExportToExcel" }, outputs: { onCheckedRow: "onCheckedRow", onUncheckedRow: "onUncheckedRow", selectedRowByChild: "selectedRowByChild", cellValueChangeByChild: "cellValueChangeByChild", cellMouseOver: "cellMouseOver", onPaginationChanged: "onPaginationChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [HerumAgGridFilterComponent], viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout-container\" [class.show-export-button]=\"showExportToExcel\">\r\n  <div #tableContainer class=\"table-container\">\r\n    <ag-grid-angular style=\"height: 100% ;width: 100%\" class=\"ag-theme-alpine ag-rtl\" [rowData]=\"rowData\"\r\n      [rowSelection]=\"rowsSelectionType\" [rowMultiSelectWithClick]=\"true\" [columnDefs]=\"columnDefs\"\r\n      [defaultColDef]=\"defaultColDef\" [context]=\"context\" [components]=\"frameworkComponents\"\r\n      [overlayNoRowsTemplate]=\"overlayNoRowsTemplate\" [enableRtl]=\"true\" [rowHeight]=\"rowHeight\"\r\n      [pagination]=\"usePagination\" [paginationAutoPageSize]=\"usePagination\" [tooltipShowDelay]=\"0\"\r\n      [gridOptions]=\"gridOptions\" [suppressRowClickSelection]=\"suppressRowClickSelection\"\r\n      (cellMouseOver)=\"_onCellMouseOver($event)\" (paginationChanged)=\"_onPaginationChanged($event)\"\r\n      (rowSelected)=\"_onRowSelected($event)\" (firstDataRendered)=\"_onFirstDataRendered($event)\"\r\n      (filterChanged)=\"_onFilterChanged($event)\" (gridReady)=\"_onGridReady($event)\"\r\n      (modelUpdated)=\"_onModelUpdated($event)\" (mouseleave)=\"_onGridMouseLeave()\">\r\n    </ag-grid-angular>\r\n    <ng-container *ngIf=\"isLoading\"><herum-loader></herum-loader></ng-container>\r\n  </div>\r\n\r\n  <div class=\"export-button-container\">\r\n    <herum-button [type]=\"'secondary'\" (click)=\"_onExportCsv()\">\u05D9\u05D9\u05E6\u05D5\u05D0 \u05DC\u05D0\u05E7\u05E1\u05DC</herum-button>\r\n  </div>\r\n</div>", styles: [":host{--export-buttons-margin: 0px;--export-buttons-container-height: 0px}.table-layout-container{height:100%;width:100%}.table-layout-container .table-container{position:relative;width:100%;--table-border-color: transparent}.table-layout-container .table-container .img-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;position:absolute;top:10px;left:10px;z-index:1;background-color:#fff;border-radius:var(--border-radius);padding:5px;cursor:pointer}.table-layout-container .export-button-container{display:flex;justify-content:left;margin-top:var(--export-buttons-margin);margin-left:var(--export-buttons-margin);height:var(--export-buttons-container-height);overflow:hidden}.table-layout-container.show-export-button{--export-buttons-margin: 12px;--export-buttons-container-height: 32px}::ng-deep .hadracha .ag-header{border-radius:var(--border-radius)}::ng-deep .hadracha .ag-header .ag-header-viewport,::ng-deep .hadracha .ag-header .ag-pinned-right-header{background-color:var(--icons-color)}::ng-deep .hadracha .ag-header *{color:#fff;font-size:16px}::ng-deep .hadracha .ag-header ::ng-deep .ag-icon-menu:before{color:#fff!important}::ng-deep .hadracha .ag-header-cell:not(:first-child),::ng-deep .hadracha .ag-header-group-cell{border:none!important}::ng-deep .hadracha ::ng-deep .ag-header-cell-label,::ng-deep .hadracha .ag-cell{text-align:center;padding:0!important;justify-content:center;font-size:14px;border:none!important}::ng-deep .hadracha ::ng-deep .ag-cell:not(:first-child){border:none!important}::ng-deep .hadracha ::ng-deep .ag-row:not(:last-child){border-bottom:2px solid var(--divider-color)}::ng-deep .hadracha ::ng-deep .ag-header-cell-text{font-size:14px}::ng-deep .ag-theme-alpine .ag-body-viewport{overflow-y:scroll}.ag-theme-alpine{--ag-checkbox-unchecked-color: var(--secondary-color);--ag-active-color: transparent;--ag-border-color: var(--table-border-color)}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper{height:var(--herum-checkbox-size)!important;width:var(--herum-checkbox-size)!important;font-size:0px;line-height:0px}::ng-deep .ag-checkbox-input-wrapper input{cursor:pointer;border:1px solid var(--secondary-color);opacity:1!important;border-radius:2px!important;height:var(--herum-checkbox-size)!important;width:var(--herum-checkbox-size)!important}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper:after{content:\"\"}::ng-deep .ag-checkbox-input-wrapper input:checked{background:var(--primary-color)!important;border:0px solid var(--secondary-color)!important}::ng-deep .ag-unselectable{-webkit-user-select:text;user-select:text}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked:after{content:url(/assets/shared/icons/bigV.svg)!important;pointer-events:none;border-color:transparent;position:absolute;top:52%!important;left:51%!important;transform:translate(-50%,-50%)!important}::ng-deep .ag-indeterminate{outline:.5px solid var(--icons-color)!important}::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-indeterminate:after{content:\"\"!important;background:var(--primary-color);height:50%;width:50%;border-radius:1px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep .ag-tooltip{background-color:var(--tooltip-background-color)!important;color:var(--light-background-color)!important;border-radius:var(--border-radius)!important;font-size:var(--standard-font-size)!important;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}::ng-deep .ag-header-cell-sortable{padding-right:9px!important}::ng-deep .ag-theme-alpine .ag-row{border-bottom:none}::ng-deep .ag-theme-alpine .ag-body-viewport{border-bottom:none}::ng-deep .ag-theme-alpine .ag-row{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}.ag-theme-alpine .ag-body-viewport{margin-top:0!important;margin-bottom:0!important}::ng-deep .ag-theme-quartz{--ag-grid-size: 5px;--ag-list-item-height: 20px}::ng-deep .ag-row:hover{background-color:var(--item-hover-color)!important}::ng-deep .ag-header{background:var(--notebook-header);color:#333;font-weight:700;height:20px;border-bottom:none}::ng-deep .ag-theme-alpine{--ag-cell-horizontal-border: \"#333\";--ag-header-column-separator-display: block}::ng-deep .ag-header-cell:not(:first-child),::ng-deep .ag-header-group-cell{border-right:1px solid var(--table-border-color);height:50px!important}::ng-deep .ag-rtl .ag-cell{border-left:1px solid var(--table-border-color);line-height:var(--table-row-line-height)}::ng-deep .ag-header-cell-label,::ng-deep .ag-cell-value{padding-right:8px}::ng-deep .ag-cell{padding-right:8px!important}::ng-deep .ag-theme-alpine .ag-row-selected{background-color:var(--item-hover-color)}::ng-deep .ag-theme-alpine .ag-row-even.selected-row,::ng-deep .ag-theme-alpine .ag-row-odd.selected-row{background-color:var(--item-hover-color)}::ng-deep .ag-cell:not(:first-child){border:none!important;border-right:1px solid var(--table-border-color)!important}::ng-deep .ag-header-cell:before{background:transparent}::ng-deep .ag-header-cell:not(:first-child){padding:0}::ng-deep .ag-header-cell.ag-column-first{border:none!important}::ng-deep .ag-cell-value.ag-cell.ag-column-last{border:none!important}::ng-deep .ag-wrapper.ag-picker-field-wrapper.ag-picker-collapsed:focus-within{border-color:var(--icons-color)!important;box-shadow:none!important}::ng-deep .ag-picker-field-wrapper.ag-picker-has-focus,.ag-picker-field-wrapper:focus-within{border-color:var(--icons-color)!important;box-shadow:none!important}::ng-deep .ag-icon-small-down:before{color:var(--icons-color)!important}::ng-deep .ag-checkbox-input-wrapper:after{top:0;left:0;border-radius:4px;transition:background .3s ease}::ng-deep .ag-checkbox-input-wrapper.ag-checked:after{color:var(--secondary-color)}::ng-deep .ag-root-wrapper.ag-layout-normal{border-radius:8px}.edit-row-cell{width:100%!important}::ng-deep edit-row{width:100%!important}::ng-deep .ag-icon-menu:before{color:var(--icons-color)!important}::ng-deep .ag-cell-inline-editing{padding:0}::ng-deep .ag-theme-alpine .ag-header{border-bottom:none;background-color:transparent!important}::ng-deep .ag-theme-alpine .ag-rtl .ag-cell{align-items:center}::ng-deep .mat-tooltip-trigger{overflow:hidden;text-overflow:ellipsis}::ng-deep .text-to-right.ag-header-cell-label,::ng-deep .text-to-right.ag-cell{text-align:start;padding-right:20px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }, { kind: "component", type: i3$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTableComponent, decorators: [{
             type: Component,
@@ -10147,7 +10146,7 @@ class GraphQLService {
         });
         return orderString + '}';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GraphQLService, deps: [{ token: i1$3.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GraphQLService, deps: [{ token: i1$4.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GraphQLService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GraphQLService, decorators: [{
@@ -10155,7 +10154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -10252,7 +10251,7 @@ class AuthService {
     generateStringForAuthenticationHash(personalId, militaryId) {
         return personalId + militaryId;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, deps: [{ token: i1$3.HttpClient }, { token: i2$6.Router }, { token: GraphQLService }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, deps: [{ token: i1$4.HttpClient }, { token: i2$5.Router }, { token: GraphQLService }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, decorators: [{
@@ -10260,7 +10259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: i2$6.Router }, { type: GraphQLService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: i2$5.Router }, { type: GraphQLService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -10398,12 +10397,12 @@ class GlobalErrorHandler {
             stack: error.stack,
         }).subscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GlobalErrorHandler, deps: [{ token: i1$3.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GlobalErrorHandler, deps: [{ token: i1$4.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GlobalErrorHandler });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GlobalErrorHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -10720,7 +10719,7 @@ class MicroResourcesService {
             return 'בבדיקה';
         return 'לא הוגש';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MicroResourcesService, deps: [{ token: i1$3.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MicroResourcesService, deps: [{ token: i1$4.HttpClient }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MicroResourcesService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MicroResourcesService, decorators: [{
@@ -10728,7 +10727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -10747,21 +10746,33 @@ class UtilsService {
     getUrlFromFileData(fileData) {
         if (!fileData?.key || !fileData?.bucket)
             return;
-        const fileDataKeyWithoutTrailingSlash = fileData.key.endsWith('/') ? fileData.key.slice(0, -1) : fileData.key;
-        return buildPath([this.environmentConfig?.environment?.s3ServerPath + fileData.bucket, fileDataKeyWithoutTrailingSlash]);
+        const s3ServerPath = this.environmentConfig?.environment?.s3ServerPath;
+        const bucketPlaceholderKey = this.environmentConfig?.environment?.bucketPlaceholderKey;
+        if (!s3ServerPath || !fileData.bucket)
+            return;
+        const bucketNameWithoutSlashes = this.trimSlashes(fileData.bucket);
+        if (bucketPlaceholderKey && s3ServerPath.includes(bucketPlaceholderKey))
+            return this.joinUrlParts([
+                s3ServerPath.replace(bucketPlaceholderKey, bucketNameWithoutSlashes),
+                fileData.key
+            ]);
+        return this.joinUrlParts([s3ServerPath, bucketNameWithoutSlashes, fileData.key]);
     }
     fetchFiles(fileId, resourceType, bucket) {
         if (!fileId)
             return Promise.reject();
-        const bucketPath = bucket ? bucket : this.environmentConfig?.buckets?.[resourceType];
-        if (fileId && fileId[0] != '/' && bucketPath[bucketPath.length - 1] != '/')
-            fileId = "/" + fileId;
-        const path = this.environmentConfig?.environment?.s3ServerPath + bucketPath + fileId;
+        const bucketPath = bucket || this.environmentConfig?.buckets?.[resourceType];
+        const path = this.getUrlFromFileData({ bucket: bucketPath, key: fileId });
+        if (!path)
+            return Promise.reject();
         return fetch(path);
     }
     async initAudioFile(fileId, bucketName, signal) {
-        const audioBucketName = bucketName ? (bucketName + "/") : this.environmentConfig?.buckets?.Audio;
-        return fetch(this.environmentConfig?.environment?.s3ServerPath + audioBucketName + fileId, { signal: signal })
+        const audioBucketName = bucketName ? bucketName : this.environmentConfig?.buckets?.Audio;
+        const path = this.getUrlFromFileData({ bucket: audioBucketName, key: fileId });
+        if (!path)
+            return Promise.reject();
+        return fetch(path, { signal: signal })
             .then(async (response) => {
             const arrayBuffer = await response.arrayBuffer();
             if (arrayBuffer.byteLength === 0) {
@@ -10784,7 +10795,16 @@ class UtilsService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UtilsService, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    joinUrlParts(parts) {
+        return parts
+            .filter(part => Boolean(part))
+            .map((part, index) => index === 0 ? part.replace(regexExpressions$1.trailingSlashes, '') : this.trimSlashes(part))
+            .join('/');
+    }
+    trimSlashes(value) {
+        return value.replace(regexExpressions$1.leadingAndTrailingSlashes, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UtilsService, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UtilsService, decorators: [{
@@ -10795,7 +10815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }, { type: i1$3.HttpClient }] });
+                }] }, { type: i1$4.HttpClient }] });
 
 class ResourceDataBuilderService {
     utilsService;
@@ -11492,7 +11512,9 @@ const regexExpressions = {
     dateTimeWithoutSeconds: /^\d{2}\/\d{2}\/\d{4} \d{2}:\d{2}$/,
     chromeVersionRegex: /Chrome\/([0-9.]+)/,
     removeSpacesRegex: /\s+/g,
-    phoneNumberTenDigits: /^\d{10}$/
+    phoneNumberTenDigits: /^\d{10}$/,
+    trailingSlashes: /\/+$/g,
+    leadingAndTrailingSlashes: /^\/+|\/+$/g
 };
 
 const resourceFileTypes = {
@@ -14271,11 +14293,12 @@ const testEnvironmentConfig = {
         filesDisplayServerPath: '',
         envName: 'aman',
         siteServerPath: 'http://hadracha-site-server-augustus.apps.ocp4-prep.d8200.mil/api',
-        s3ServerPath: 'http://s3-stage-fn-r2.d8200.mil/',
+        s3ServerPath: 'http://s3-stage-fn-r2.d8200.mil/$bucket$',
         userAction: 'http://hadracha-site-server-augustus.apps.ocp4-prep.d8200.mil/api/Activity',
         lessonSocketBackend: "ws://college-site-server.d8200.mil/lesson",
         keyboardEventsLocalSocketPath: 'ws://localhost:3333',
-        systemIdentifier: "hadracha"
+        systemIdentifier: "hadracha",
+        bucketPlaceholderKey: '$bucket$'
     },
     mongoUpdates: {
         CollectionCategories: {
@@ -17700,7 +17723,7 @@ class FetchedMessageService {
     fetchedMessageData() {
         return this.http.get(buildPath([this.environmentConfig?.environment?.siteServerPath, 'Messages', this.messageKey]));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageService, deps: [{ token: i1$3.HttpClient }, { token: i1$4.MatDialog }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageService, deps: [{ token: i1$4.HttpClient }, { token: i1$5.MatDialog }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageService, decorators: [{
@@ -17708,7 +17731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: i1$4.MatDialog }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: i1$5.MatDialog }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -17897,12 +17920,12 @@ class ErrorsHandlerService {
         else
             this.failedDependentsRequestsContext[dependentId] = initialValue ? { error, failedComplexObservableArrowFunctions, initialValue } : { error, failedComplexObservableArrowFunctions };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ErrorsHandlerService, deps: [{ token: i1$4.MatDialog }, { token: i2$1.LoaderManagerService }, { token: i1$3.HttpClient }, { token: i2$1.AuthService }, { token: MongoUtilsService }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ErrorsHandlerService, deps: [{ token: i1$5.MatDialog }, { token: i1$2.LoaderManagerService }, { token: i1$4.HttpClient }, { token: i1$2.AuthService }, { token: MongoUtilsService }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ErrorsHandlerService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ErrorsHandlerService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$4.MatDialog }, { type: i2$1.LoaderManagerService }, { type: i1$3.HttpClient }, { type: i2$1.AuthService }, { type: MongoUtilsService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.MatDialog }, { type: i1$2.LoaderManagerService }, { type: i1$4.HttpClient }, { type: i1$2.AuthService }, { type: MongoUtilsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -18085,12 +18108,12 @@ class UploadsManagerService {
         let status = areAllCommonUploadsProgressFinishedSuccesfully ? toastStatuses$1.success : toastStatuses$1.error;
         this.toastsService.showToast(title, content, status);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UploadsManagerService, deps: [{ token: ErrorsHandlerService }, { token: DependentsService }, { token: i1$3.HttpClient }, { token: i2$1.ToastsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UploadsManagerService, deps: [{ token: ErrorsHandlerService }, { token: DependentsService }, { token: i1$4.HttpClient }, { token: i1$2.ToastsService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UploadsManagerService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UploadsManagerService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ErrorsHandlerService }, { type: DependentsService }, { type: i1$3.HttpClient }, { type: i2$1.ToastsService }] });
+        }], ctorParameters: () => [{ type: ErrorsHandlerService }, { type: DependentsService }, { type: i1$4.HttpClient }, { type: i1$2.ToastsService }] });
 
 const ATTACH = "Attach";
 class DbActionRequestsService {
@@ -18311,12 +18334,12 @@ class DbActionRequestsService {
             this.environmentConfig?.mongoUpdates?.Methods?.ModelInfo
         ]));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionRequestsService, deps: [{ token: i1$3.HttpClient }, { token: i2$1.DbActionsInnerIdManagerService }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionRequestsService, deps: [{ token: i1$4.HttpClient }, { token: i1$2.DbActionsInnerIdManagerService }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionRequestsService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionRequestsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: i2$1.DbActionsInnerIdManagerService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: i1$2.DbActionsInnerIdManagerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -18404,12 +18427,12 @@ class DbActionToastService {
         if (statusCode >= 400 && statusCode < 599)
             return toastStatuses$1.error;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionToastService, deps: [{ token: ErrorsHandlerService }, { token: i2$1.ToastsService }, { token: MongoUtilsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionToastService, deps: [{ token: ErrorsHandlerService }, { token: i1$2.ToastsService }, { token: MongoUtilsService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionToastService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionToastService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ErrorsHandlerService }, { type: i2$1.ToastsService }, { type: MongoUtilsService }] });
+        }], ctorParameters: () => [{ type: ErrorsHandlerService }, { type: i1$2.ToastsService }, { type: MongoUtilsService }] });
 
 class HerumToastsComponent {
     toastsService;
@@ -18505,13 +18528,13 @@ class HerumToastsComponent {
         this.destroySubject$.next(null);
         this.destroySubject$.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToastsComponent, deps: [{ token: i2$1.ToastsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToastsComponent, deps: [{ token: i1$2.ToastsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumToastsComponent, isStandalone: false, selector: "herum-toasts", viewQueries: [{ propertyName: "toastElements", predicate: ["toast"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"toasts?.length\">\r\n    <div #toast class=\"herum-toast d-flex\" [ngClass]=\"[toast?.state ?? '',toast?.status ?? '']\"\r\n        *ngFor=\"let toast of toasts; trackBy: _trackByFn\">\r\n        <span [ngClass]=\"{'icons-color':toast?.status===successStatus}\"\r\n            [innerHTML]=\"_toastStatusIcon(toast?.status) | safeHtml\">\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-column\">\r\n            <div class=\"section-title\"> {{toast?.title}}</div>\r\n            <div class='toast-content'> {{toast?.content}}</div>\r\n        </div>\r\n\r\n        <img class=\"close-button\" src=\"assets/shared/icons/secondary-x.svg\" alt=\"close-icon\"\r\n            (click)=\"_onHideToast(toast,true)\">\r\n    </div>\r\n</ng-container>", styles: [".herum-toast{position:absolute;bottom:0;right:0;width:340px;padding:var(--standard-padding);border-radius:var(--border-radius);background-color:#fff;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;transition:transform .4s ease-out,opacity .4s ease-out;transform:translate(100%);opacity:0}.herum-toast .icons-color{fill:var(--icons-color)}.herum-toast .status-image{height:22px;width:22px;margin-left:6px}.herum-toast .close-button{height:8px;left:8px;top:8px;position:absolute;cursor:pointer;margin-block-end:4px}.toast-content{flex-grow:1;flex-shrink:1}.enter{transform:translate(0);opacity:1}.success{border-right:solid 8px #4caf50}.information{border-right:solid 8px var(--information-color)}.error{border-right:solid 8px var(--error-color)}\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: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToastsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-toasts', template: "<ng-container *ngIf=\"toasts?.length\">\r\n    <div #toast class=\"herum-toast d-flex\" [ngClass]=\"[toast?.state ?? '',toast?.status ?? '']\"\r\n        *ngFor=\"let toast of toasts; trackBy: _trackByFn\">\r\n        <span [ngClass]=\"{'icons-color':toast?.status===successStatus}\"\r\n            [innerHTML]=\"_toastStatusIcon(toast?.status) | safeHtml\">\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-column\">\r\n            <div class=\"section-title\"> {{toast?.title}}</div>\r\n            <div class='toast-content'> {{toast?.content}}</div>\r\n        </div>\r\n\r\n        <img class=\"close-button\" src=\"assets/shared/icons/secondary-x.svg\" alt=\"close-icon\"\r\n            (click)=\"_onHideToast(toast,true)\">\r\n    </div>\r\n</ng-container>", styles: [".herum-toast{position:absolute;bottom:0;right:0;width:340px;padding:var(--standard-padding);border-radius:var(--border-radius);background-color:#fff;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;transition:transform .4s ease-out,opacity .4s ease-out;transform:translate(100%);opacity:0}.herum-toast .icons-color{fill:var(--icons-color)}.herum-toast .status-image{height:22px;width:22px;margin-left:6px}.herum-toast .close-button{height:8px;left:8px;top:8px;position:absolute;cursor:pointer;margin-block-end:4px}.toast-content{flex-grow:1;flex-shrink:1}.enter{transform:translate(0);opacity:1}.success{border-right:solid 8px #4caf50}.information{border-right:solid 8px var(--information-color)}.error{border-right:solid 8px var(--error-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.ToastsService }, { type: i0.ChangeDetectorRef }], propDecorators: { toastElements: [{
+        }], ctorParameters: () => [{ type: i1$2.ToastsService }, { type: i0.ChangeDetectorRef }], propDecorators: { toastElements: [{
                 type: ViewChildren,
                 args: ['toast']
             }] } });
@@ -18619,7 +18642,7 @@ class HerumUploadsManagerComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUploadsManagerComponent, deps: [{ token: UploadsManagerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUploadsManagerComponent, isStandalone: false, selector: "herum-uploads-manager", host: { listeners: { "window:beforeunload": "showConfirmationNativeMessage($event)" } }, ngImport: i0, template: "<div class=\"herum-uploads-layout shadow\" [ngClass]=\"{'open':isContainerOpen}\" *ngIf=\"uploadsProgressMetadata?.length\">\r\n    <div class=\"herum-uploads-container-header\">\r\n        <div class=\"herum-uploads-header\">\r\n            <div class=\"herum-uploads-header-text\">\r\n                <herum-ellipsis-loader *ngIf=\"!hasUploadProgressFinished\"></herum-ellipsis-loader>\r\n\r\n                <p class=\"container-title\" #containerTitle\r\n                    [matTooltip]=\"_isTruncatedTitleElement(containerTitle)? (containerTitle$ | async) : '' \">\r\n                    {{containerTitle$ | async | ellipsis:containerTitle}}</p>\r\n            </div>\r\n\r\n            <div class=\"control-container\">\r\n                <img class=\"control-button\"\r\n                    [ngClass]=\"{'open-chevron':isContainerOpen, 'closed-chevron':!isContainerOpen}\"\r\n                    src=\"assets/general/white-chevron.svg\" (click)=\"_onToggleUploadsContainer()\">\r\n\r\n                <img class=\"control-button\" *ngIf=\"hasUploadProgressFinished\" src=\"assets/shared/icons/X.svg\"\r\n                    alt=\"close-icon\" (click)=\"_onClose()\">\r\n            </div>\r\n        </div>\r\n\r\n        <herum-progress-bar [percentage]=\"averageProgressSum\" [percentagePosition]=\"'none'\" [borderRadius]=\"'none'\"\r\n            [showBorder]=\"false\" [thickness]=\"'thin'\" [showPercentage]=\"false\" [color]=\"progressBarColor\">\r\n        </herum-progress-bar>\r\n    </div>\r\n\r\n    <div class=\"herum-uploads-container\">\r\n        <div *ngIf=\"numberOfFailedLoaders > 1\" class=\"upload-all upload-iteration cursor-pointer\"\r\n            (click)=\"_onRetryFailedUploads()\">\r\n            <div class=\"herum-upload-title w-100\">\r\n                \u05D4\u05E2\u05DC\u05D4 \u05DE\u05D7\u05D3\u05E9 \u05E7\u05D1\u05E6\u05D9\u05DD \u05E9\u05E0\u05DB\u05E9\u05DC\u05D5\r\n            </div>\r\n\r\n            <div class=\"upload-file-image\">\r\n                <img src=\"assets/files-icons/upload-file.svg\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"upload-iteration\"\r\n            *ngFor=\"let uploadProgressMetadata of uploadsProgressMetadata; trackBy: _trackByFn\">\r\n            <div class=\"herum-upload-container\">\r\n                <span [ngClass]=\"_isUploadProgressStatusError(uploadProgressMetadata.status)? 'error' : 'icons-color'\"\r\n                    [innerHTML]=\"_getFileIcon(uploadProgressMetadata.type) | safeHtml\">\r\n                </span>\r\n\r\n                <div class=\"herum-upload-text-container\">\r\n                    <p #uploadTitle class=\"herum-upload-title\"\r\n                        [ngClass]=\"{'error-font-color':_isUploadProgressStatusError(uploadProgressMetadata.status)}\"\r\n                        [matTooltip]=\"_isTruncatedTitleElement(uploadTitle) ? uploadProgressMetadata.title : ''\">\r\n                        {{uploadProgressMetadata.title | ellipsis:uploadTitle}}\r\n                    </p>\r\n\r\n                    <p\r\n                        [ngClass]=\"[_isUploadProgressStatusError(uploadProgressMetadata.status)? 'error-font-color' :'disabled-text-color']\">\r\n                        {{_getUploadProgressDescription(uploadProgressMetadata)}}\r\n                    </p>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"center\">\r\n                <herum-circular-progress-bar [fill]=\"false\"\r\n                    [percentage]=\"(uploadProgressMetadata.currentSize/uploadProgressMetadata.totalSize)*100\"\r\n                    *ngIf=\"uploadProgressMetadata.status === loadingStatus\">\r\n                </herum-circular-progress-bar>\r\n\r\n                <div class=\"images-container\">\r\n                    <img class=\"cursor-pointer\" *ngIf=\"_isUploadProgressStatusError(uploadProgressMetadata.status)\"\r\n                        src=\"assets/files-icons/upload-file.svg\"\r\n                        (click)=\"_onRetryFailedUpload(uploadProgressMetadata.id)\">\r\n\r\n                    <span\r\n                        *ngIf=\"uploadProgressMetadata.status === errorStatus || uploadProgressMetadata.status === successStatus\"\r\n                        [ngClass]=\"{'icons-color':uploadProgressMetadata.status===successStatus}\"\r\n                        [innerHTML]=\"_getUploadStatusIcon(uploadProgressMetadata.status) | safeHtml\">\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".herum-uploads-layout{border-radius:8px 8px 0 0;background-color:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--top-overlay-z-index);direction:rtl;width:350px}.herum-uploads-layout .herum-uploads-container-header{border-radius:8px 8px 0 0;background-color:#22213f;cursor:grab}.herum-uploads-layout .herum-uploads-container-header p{padding-block:12px;color:#fff;font-weight:700;margin:0;font-size:16px}.herum-uploads-layout .herum-uploads-container-header:active{cursor:grabbing}.herum-uploads-layout herum-progress-bar{background-color:#22213f}.herum-uploads-layout .herum-uploads-container{display:none}.herum-upload-text-container{width:80%}.herum-upload-title{line-height:1;font-weight:700;font-size:12px;width:100%;white-space:nowrap;margin-block-end:4px}.open{height:fit-content}.open .herum-uploads-container{overflow-y:auto;max-height:500px;display:flex;flex-direction:column;height:100%}.open .herum-uploads-container .herum-upload-container{display:flex;flex-direction:row;gap:8px;width:70%}.open .herum-uploads-container .herum-upload-container .error{fill:var(--error-color)}.open .herum-uploads-container .herum-upload-container .icons-color{stroke:var(--icons-color)}.open .upload-iteration{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid var(--chips-divider-color);align-items:center}.open .upload-all{padding-block:21px}.open .upload-iteration:hover{-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);animation:1s ease-in-out}.herum-uploads-header-text{display:flex;width:100%}.herum-uploads-header-text .container-title{width:80%;white-space:nowrap}.herum-uploads-header{display:flex;justify-content:space-between;padding-inline:16px;align-items:center}.herum-uploads-header .control-container{gap:16px;display:flex}.herum-uploads-header .control-container .control-button{width:10px;cursor:pointer}.upload-file-image{width:24px;display:flex;justify-content:center}herum-circular-progress-bar{display:flex;justify-content:center;align-items:center;height:24px;width:24px;transform:scale(1.2)}p{margin:0}.open-chevron{transform:rotate(90deg)}.images-container{display:flex;gap:12px}.icons-color{fill:var(--icons-color)}.icons-color ::ng-deep .generic-file-icon{stroke:var(--icons-color)}\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: "component", type: i2$3.HerumCircularProgressBarComponent, selector: "herum-circular-progress-bar", inputs: ["percentage", "fill", "size", "firstGradient", "fillColor", "showPercentage", "displayedContent", "displayedContentColorMatchesGradientColor"] }, { kind: "component", type: i2$3.HerumEllipsisLoaderComponent, selector: "herum-ellipsis-loader" }, { kind: "component", type: i2$3.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUploadsManagerComponent, isStandalone: false, selector: "herum-uploads-manager", host: { listeners: { "window:beforeunload": "showConfirmationNativeMessage($event)" } }, ngImport: i0, template: "<div class=\"herum-uploads-layout shadow\" [ngClass]=\"{'open':isContainerOpen}\" *ngIf=\"uploadsProgressMetadata?.length\">\r\n    <div class=\"herum-uploads-container-header\">\r\n        <div class=\"herum-uploads-header\">\r\n            <div class=\"herum-uploads-header-text\">\r\n                <herum-ellipsis-loader *ngIf=\"!hasUploadProgressFinished\"></herum-ellipsis-loader>\r\n\r\n                <p class=\"container-title\" #containerTitle\r\n                    [matTooltip]=\"_isTruncatedTitleElement(containerTitle)? (containerTitle$ | async) : '' \">\r\n                    {{containerTitle$ | async | ellipsis:containerTitle}}</p>\r\n            </div>\r\n\r\n            <div class=\"control-container\">\r\n                <img class=\"control-button\"\r\n                    [ngClass]=\"{'open-chevron':isContainerOpen, 'closed-chevron':!isContainerOpen}\"\r\n                    src=\"assets/general/white-chevron.svg\" (click)=\"_onToggleUploadsContainer()\">\r\n\r\n                <img class=\"control-button\" *ngIf=\"hasUploadProgressFinished\" src=\"assets/shared/icons/X.svg\"\r\n                    alt=\"close-icon\" (click)=\"_onClose()\">\r\n            </div>\r\n        </div>\r\n\r\n        <herum-progress-bar [percentage]=\"averageProgressSum\" [percentagePosition]=\"'none'\" [borderRadius]=\"'none'\"\r\n            [showBorder]=\"false\" [thickness]=\"'thin'\" [showPercentage]=\"false\" [color]=\"progressBarColor\">\r\n        </herum-progress-bar>\r\n    </div>\r\n\r\n    <div class=\"herum-uploads-container\">\r\n        <div *ngIf=\"numberOfFailedLoaders > 1\" class=\"upload-all upload-iteration cursor-pointer\"\r\n            (click)=\"_onRetryFailedUploads()\">\r\n            <div class=\"herum-upload-title w-100\">\r\n                \u05D4\u05E2\u05DC\u05D4 \u05DE\u05D7\u05D3\u05E9 \u05E7\u05D1\u05E6\u05D9\u05DD \u05E9\u05E0\u05DB\u05E9\u05DC\u05D5\r\n            </div>\r\n\r\n            <div class=\"upload-file-image\">\r\n                <img src=\"assets/files-icons/upload-file.svg\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"upload-iteration\"\r\n            *ngFor=\"let uploadProgressMetadata of uploadsProgressMetadata; trackBy: _trackByFn\">\r\n            <div class=\"herum-upload-container\">\r\n                <span [ngClass]=\"_isUploadProgressStatusError(uploadProgressMetadata.status)? 'error' : 'icons-color'\"\r\n                    [innerHTML]=\"_getFileIcon(uploadProgressMetadata.type) | safeHtml\">\r\n                </span>\r\n\r\n                <div class=\"herum-upload-text-container\">\r\n                    <p #uploadTitle class=\"herum-upload-title\"\r\n                        [ngClass]=\"{'error-font-color':_isUploadProgressStatusError(uploadProgressMetadata.status)}\"\r\n                        [matTooltip]=\"_isTruncatedTitleElement(uploadTitle) ? uploadProgressMetadata.title : ''\">\r\n                        {{uploadProgressMetadata.title | ellipsis:uploadTitle}}\r\n                    </p>\r\n\r\n                    <p\r\n                        [ngClass]=\"[_isUploadProgressStatusError(uploadProgressMetadata.status)? 'error-font-color' :'disabled-text-color']\">\r\n                        {{_getUploadProgressDescription(uploadProgressMetadata)}}\r\n                    </p>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"center\">\r\n                <herum-circular-progress-bar [fill]=\"false\"\r\n                    [percentage]=\"(uploadProgressMetadata.currentSize/uploadProgressMetadata.totalSize)*100\"\r\n                    *ngIf=\"uploadProgressMetadata.status === loadingStatus\">\r\n                </herum-circular-progress-bar>\r\n\r\n                <div class=\"images-container\">\r\n                    <img class=\"cursor-pointer\" *ngIf=\"_isUploadProgressStatusError(uploadProgressMetadata.status)\"\r\n                        src=\"assets/files-icons/upload-file.svg\"\r\n                        (click)=\"_onRetryFailedUpload(uploadProgressMetadata.id)\">\r\n\r\n                    <span\r\n                        *ngIf=\"uploadProgressMetadata.status === errorStatus || uploadProgressMetadata.status === successStatus\"\r\n                        [ngClass]=\"{'icons-color':uploadProgressMetadata.status===successStatus}\"\r\n                        [innerHTML]=\"_getUploadStatusIcon(uploadProgressMetadata.status) | safeHtml\">\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".herum-uploads-layout{border-radius:8px 8px 0 0;background-color:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--top-overlay-z-index);direction:rtl;width:350px}.herum-uploads-layout .herum-uploads-container-header{border-radius:8px 8px 0 0;background-color:#22213f;cursor:grab}.herum-uploads-layout .herum-uploads-container-header p{padding-block:12px;color:#fff;font-weight:700;margin:0;font-size:16px}.herum-uploads-layout .herum-uploads-container-header:active{cursor:grabbing}.herum-uploads-layout herum-progress-bar{background-color:#22213f}.herum-uploads-layout .herum-uploads-container{display:none}.herum-upload-text-container{width:80%}.herum-upload-title{line-height:1;font-weight:700;font-size:12px;width:100%;white-space:nowrap;margin-block-end:4px}.open{height:fit-content}.open .herum-uploads-container{overflow-y:auto;max-height:500px;display:flex;flex-direction:column;height:100%}.open .herum-uploads-container .herum-upload-container{display:flex;flex-direction:row;gap:8px;width:70%}.open .herum-uploads-container .herum-upload-container .error{fill:var(--error-color)}.open .herum-uploads-container .herum-upload-container .icons-color{stroke:var(--icons-color)}.open .upload-iteration{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid var(--chips-divider-color);align-items:center}.open .upload-all{padding-block:21px}.open .upload-iteration:hover{-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);animation:1s ease-in-out}.herum-uploads-header-text{display:flex;width:100%}.herum-uploads-header-text .container-title{width:80%;white-space:nowrap}.herum-uploads-header{display:flex;justify-content:space-between;padding-inline:16px;align-items:center}.herum-uploads-header .control-container{gap:16px;display:flex}.herum-uploads-header .control-container .control-button{width:10px;cursor:pointer}.upload-file-image{width:24px;display:flex;justify-content:center}herum-circular-progress-bar{display:flex;justify-content:center;align-items:center;height:24px;width:24px;transform:scale(1.2)}p{margin:0}.open-chevron{transform:rotate(90deg)}.images-container{display:flex;gap:12px}.icons-color{fill:var(--icons-color)}.icons-color ::ng-deep .generic-file-icon{stroke:var(--icons-color)}\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: "component", type: i2$2.HerumCircularProgressBarComponent, selector: "herum-circular-progress-bar", inputs: ["percentage", "fill", "size", "firstGradient", "fillColor", "showPercentage", "displayedContent", "displayedContentColorMatchesGradientColor"] }, { kind: "component", type: i2$2.HerumEllipsisLoaderComponent, selector: "herum-ellipsis-loader" }, { kind: "component", type: i2$2.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUploadsManagerComponent, decorators: [{
             type: Component,