herum-shared 0.1.32 → 0.1.34

package/fesm2022/herum-shared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostListener, Input, Directive, EventEmitter, ViewChild, Output, Component, Pipe, Inject, HostBinding, forwardRef, ViewChildren, Optional, Self, Injectable, ViewEncapsulation, NgModule } from '@angular/core';
+import { EventEmitter, ViewChild, Output, Input, Component, Pipe, HostListener, Inject, forwardRef, ViewChildren, Optional, Self, Injectable, Directive, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { formatDate, DOCUMENT, CommonModule, DatePipe } from '@angular/common';
 import { Subject, BehaviorSubject, forkJoin, EMPTY } from 'rxjs';
@@ -18,18 +18,18 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$4 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, Validators, FormControlName, ControlContainer, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
-import * as i1$3 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
 import lottie from 'lottie-web';
-import * as i1$5 from 'herum-shared/herum-types';
+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 * as i1$4 from 'herum-shared/herum-types';
 import { QuizHeaderState, microResourceAuthorizationType, ResourceState, TimeUnit, Gender, StepStatus, TableActions } from 'herum-shared/herum-types';
 import { isTruncatedTitleElement, convertToDate, updateFullYear, getDropdownAnimationStates, toHash, buildPath, setHeaders, remainJustWantedValueInDictionary, getVersionPathParameter, getAssignmentStateDisplayName, replaceInterpolateKeysWithObjectProperties, convertHeightToPixels } from 'herum-shared/utils';
 import * as i1$8 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i4 from 'herum-shared/pipes';
+import * as i4$1 from 'herum-shared/pipes';
 import { PipesModule as PipesModule$1 } from 'herum-shared/pipes';
 import * as i2$2 from 'herum-shared/atoms';
 import { AtomsModule as AtomsModule$1 } from 'herum-shared/atoms';
@@ -43,6 +43,8 @@ import * as i1$7 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { v4 } from 'uuid';
 import { SYSTEM_AUDIO_VISUAL_CONFIGURATION, SYSTEM_TRACK_TEXT_CHANGES_SERVICE } from 'herum-shared/tokens';
+import * as i1$5 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
 import { StorageService } from 'herum-shared/static-services';
 import { selfIsTeacherExample, closedListExample, permissionsTemplatesExample } from 'herum-shared/objectsExample';
 import * as i2$4 from '@angular/router';
@@ -58,62 +60,6 @@ import { TableRowHeight } from 'herum-shared/decorators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { ErrorMessageDialogComponent as ErrorMessageDialogComponent$1 } from 'herum-shared/errors';
 
-class HerumToolTipDirective {
-    el;
-    tooltipText = '';
-    tooltip;
-    constructor(el) {
-        this.el = el;
-        this.tooltip = document.createElement('div');
-        this.tooltip.className = 'tooltip';
-    }
-    onMouseEnter() {
-        this.showTooltip();
-    }
-    onMouseLeave() {
-        this.hideTooltip();
-    }
-    showTooltip() {
-        const hostPosition = this.el.nativeElement.getBoundingClientRect();
-        const tooltipPosition = {
-            top: window.scrollY + hostPosition.top - this.tooltip.offsetHeight - 30,
-            left: window.scrollX + hostPosition.left + hostPosition.width / 4 //+ this.tooltip.offsetWidth
-        };
-        const bodyRect = document.body.getBoundingClientRect();
-        const tooltipRect = this.tooltip.getBoundingClientRect();
-        if (tooltipPosition.left < bodyRect.left) {
-            tooltipPosition.left = bodyRect.left;
-        }
-        else if (tooltipPosition.left + tooltipRect.width > bodyRect.right) {
-            tooltipPosition.left = bodyRect.right - tooltipRect.width;
-        }
-        this.tooltip.style.top = `${tooltipPosition.top}px`;
-        this.tooltip.style.left = `${tooltipPosition.left}px`;
-        document.body.appendChild(this.tooltip);
-        this.tooltip.innerText = this.tooltipText;
-    }
-    hideTooltip() {
-        document.body.removeChild(this.tooltip);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToolTipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: HerumToolTipDirective, isStandalone: false, selector: "[appHerumToolTip]", inputs: { tooltipText: "tooltipText" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToolTipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[appHerumToolTip]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tooltipText: [{
-                type: Input
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
 const max = 3;
 const min = 0.1;
 const step = 0.1;
@@ -639,55 +585,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Output
             }] } });
 
-const unwantedSelectors = ["div", null];
-class UserActionDirective {
-    el;
-    http;
-    environmentConfig;
-    description;
-    constructor(el, http, environmentConfig) {
-        this.el = el;
-        this.http = http;
-        this.environmentConfig = environmentConfig;
-    }
-    onClick(event) {
-        var obj = {
-            system: this.environmentConfig?.environment?.envName,
-            currentUrl: this.el.nativeElement?.formAction,
-            innerText: this.el.nativeElement?.innerText,
-            attributes: Array.from(Object.values(this.el.nativeElement?.attributes)).map((attribute) => ({
-                attribute: attribute.name,
-                value: attribute.value
-            })),
-            selector: this.el.nativeElement?.tagName,
-            viewPath: event.path?.map(viewElement => viewElement.localName).filter(selector => !unwantedSelectors.includes(selector) && selector),
-            timeStamp: event.timeStamp,
-            screenX: event.screenX,
-            screenY: event.screenY,
-            description: this.description
-        };
-        this.http.post(this.environmentConfig?.environment?.userAction, obj).subscribe(res => { });
-    }
-    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 ɵ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: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[userAction]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }], propDecorators: { description: [{
-                type: Input,
-                args: ['userAction']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 class HerumPresentationViewerComponent {
     srcPath;
     resourceId;
@@ -763,62 +660,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['lottieRef', { static: true }]
             }] } });
 
-const iconDefaultColor = '#7897a8';
-const attribute = 'stroke';
-const pathSelector = 'path';
-const svgSelector = 'svg';
-class SvgOnHoverDirective {
-    element;
-    iconHoverColor;
-    onMouseEnter() {
-        if (!this.iconHoverColor)
-            this.iconHoverColor = window.getComputedStyle(document.body).getPropertyValue('--icons-color');
-        if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)
-            this.setElementAttribute(this.iconHoverColor);
-        else
-            ;
-        this.setElementsAttribute(this.iconHoverColor);
-    }
-    onMouseLeave() {
-        if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)
-            this.setElementAttribute(iconDefaultColor);
-        else
-            this.setElementsAttribute(iconDefaultColor);
-    }
-    stroke;
-    constructor(element) {
-        this.element = element;
-    }
-    setElementAttribute(color) {
-        const element = this.element.nativeElement.querySelector(svgSelector)?.querySelector(pathSelector);
-        element?.setAttribute(attribute, color);
-    }
-    setElementsAttribute(color) {
-        const elements = this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector);
-        elements?.forEach(element => element.setAttribute(attribute, color));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SvgOnHoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: SvgOnHoverDirective, isStandalone: false, selector: "[svgOnHover]", inputs: { iconHoverColor: ["svgOnHover", "iconHoverColor"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "stroke": "this.stroke" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SvgOnHoverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[svgOnHover]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { iconHoverColor: [{
-                type: Input,
-                args: ['svgOnHover']
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }], stroke: [{
-                type: HostBinding
-            }] } });
-
 class HerumButtonComponent {
     type = 'primary';
     color = 'regular';
@@ -828,7 +669,7 @@ class HerumButtonComponent {
     isLoading = false;
     name;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumButtonComponent, isStandalone: false, selector: "herum-button", inputs: { type: "type", color: "color", size: "size", roundedCorners: "roundedCorners", disabled: "disabled", isLoading: "isLoading", name: "name" }, ngImport: i0, template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumButtonComponent, isStandalone: false, selector: "herum-button", inputs: { type: "type", color: "color", size: "size", roundedCorners: "roundedCorners", disabled: "disabled", isLoading: "isLoading", name: "name" }, ngImport: i0, template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumButtonComponent, decorators: [{
             type: Component,
@@ -1341,7 +1182,7 @@ class QuizOneAnswerQuestionComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizOneAnswerQuestionComponent, 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: 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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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,
@@ -1652,13 +1493,13 @@ class QuizMultiAnswerQuestionComponent {
         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$4.FormBuilder }, { token: HERUM_SHARED_CONFIG_TOKEN }], 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, 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.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n        <div class=\"answer-item\" *ngFor=\"let answer of question.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$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.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 }, { token: HERUM_SHARED_CONFIG_TOKEN }], 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, 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.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n        <div class=\"answer-item\" *ngFor=\"let answer of question.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=\"question.answers\" [formGroup]=\"answersForm\" class=\"answers-container\">\r\n        <div class=\"answer-item\" *ngFor=\"let answer of question.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$4.FormBuilder }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }], propDecorators: { question: [{
@@ -1981,6 +1822,7 @@ class HerumInputFieldComponent {
         })).subscribe();
     }
     setInputsByFormControl() {
+        console.log(this.ngControl);
         if (!this.ngControl)
             return;
         if (this.ngControl instanceof FormControlName)
@@ -2109,13 +1951,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$4.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumInputFieldComponent, isStandalone: false, selector: "herum-input-field", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", isBlocked: "isBlocked", isValid: "isValid", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", inputValue: "inputValue", isLoading: "isLoading", id: "id", debounceTime: "debounceTime", minValue: "minValue", maxValue: "maxValue", isBlurred: "isBlurred", touched: "touched", ltrMode: "ltrMode", preventMacroKeysPressEvent: "preventMacroKeysPressEvent" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" }, properties: { "class.required-control": "isRequired" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\"\r\n            (mousedown)=\"$event.preventDefault()\" (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{errorMsg}}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵ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 }], ngImport: i0, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\"\r\n            (mousedown)=\"$event.preventDefault()\" (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{errorMsg}}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$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\"\r\n            (mousedown)=\"$event.preventDefault()\" (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{errorMsg}}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -2517,7 +2359,7 @@ class HerumHierarchyTreeNodeComponent {
         return this.environmentConfig?.environment?.systemIdentifier == system.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\">\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: "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.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4.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\">\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,
@@ -3512,7 +3354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$5.AudioVisualConfiguration, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.AudioVisualConfiguration, decorators: [{
                     type: Inject,
                     args: [SYSTEM_AUDIO_VISUAL_CONFIGURATION]
                 }] }] });
@@ -3703,7 +3545,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$5.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: [{
@@ -3711,7 +3553,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$5.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -3808,7 +3650,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$4.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$5.HttpClient }, { token: i2$4.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: [{
@@ -3816,7 +3658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: i2$4.Router }, { type: GraphQLService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.HttpClient }, { type: i2$4.Router }, { type: GraphQLService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -4147,7 +3989,7 @@ 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: 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$5.HttpClient }, { token: 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, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DbActionRequestsService, decorators: [{
@@ -4155,7 +3997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: DbActionsInnerIdManagerService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.HttpClient }, { type: DbActionsInnerIdManagerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -4512,7 +4354,7 @@ class MicroResourcesService {
         });
         return forkJoin(updates.map(request => this.http.post(this.environmentConfig?.environment?.siteServerPath + this.environmentConfig?.resourcePaths?.resourceUpdateAuthorizations, request)));
     }
-    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$5.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: [{
@@ -4520,7 +4362,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$5.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -4702,11 +4544,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$5.ISystemTrackTextChangesService, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.ISystemTrackTextChangesService, decorators: [{
                     type: Inject,
                     args: [SYSTEM_TRACK_TEXT_CHANGES_SERVICE]
                 }] }] });
 
+const unwantedSelectors = ["div", null];
+class UserActionDirective {
+    el;
+    http;
+    environmentConfig;
+    description;
+    constructor(el, http, environmentConfig) {
+        this.el = el;
+        this.http = http;
+        this.environmentConfig = environmentConfig;
+    }
+    onClick(event) {
+        var obj = {
+            system: this.environmentConfig?.environment?.envName,
+            currentUrl: this.el.nativeElement?.formAction,
+            innerText: this.el.nativeElement?.innerText,
+            attributes: Array.from(Object.values(this.el.nativeElement?.attributes)).map((attribute) => ({
+                attribute: attribute.name,
+                value: attribute.value
+            })),
+            selector: this.el.nativeElement?.tagName,
+            viewPath: event.path?.map(viewElement => viewElement.localName).filter(selector => !unwantedSelectors.includes(selector) && selector),
+            timeStamp: event.timeStamp,
+            screenX: event.screenX,
+            screenY: event.screenY,
+            description: this.description
+        };
+        this.http.post(this.environmentConfig?.environment?.userAction, obj).subscribe(res => { });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserActionDirective, deps: [{ token: i0.ElementRef }, { token: i1$5.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: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: '[userAction]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$5.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HERUM_SHARED_CONFIG_TOKEN]
+                }] }], propDecorators: { description: [{
+                type: Input,
+                args: ['userAction']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class HerumSpinnerComponent {
     size = 'default-size';
     borderColor = 'default-border-color';
@@ -4750,7 +4641,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$4.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$4.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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,
@@ -5128,12 +5019,12 @@ class AudioPlayerComponent {
         this.removeAudioElementEventListeners();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioPlayerComponent, deps: [{ token: AudioVisualizationService }, { token: GlobalKeyboardListenerService }, { token: KeyPressService }, { token: UtilsService }, { token: SYSTEM_AUDIO_VISUAL_CONFIGURATION }], 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" }, 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=\"#3B2DBE\" [id]=\"'right'\" userAction\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=\"#2D7ABE\" [id]=\"'left'\" userAction\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 ? 'assets/shared/audio-images/pause.svg' : 'assets/shared/audio-images/play.svg'\"\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;padding-left:12px}.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:#2d7abe}.right label{background-color:#3b2dbe}audio-slider{width:90px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "component", type: AudioSliderComponent, selector: "audio-slider", inputs: ["sliderValue", "maxValue", "color", "id"], outputs: ["sliderChange"] }] });
+    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" }, 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=\"#3B2DBE\" [id]=\"'right'\" userAction\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=\"#2D7ABE\" [id]=\"'left'\" userAction\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 ? 'assets/shared/audio-images/pause.svg' : 'assets/shared/audio-images/play.svg'\"\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;padding-left:12px}.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:#2d7abe}.right label{background-color:#3b2dbe}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=\"#3B2DBE\" [id]=\"'right'\" userAction\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=\"#2D7ABE\" [id]=\"'left'\" userAction\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 ? 'assets/shared/audio-images/pause.svg' : 'assets/shared/audio-images/play.svg'\"\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;padding-left:12px}.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:#2d7abe}.right label{background-color:#3b2dbe}audio-slider{width:90px}\n"] }]
-        }], ctorParameters: () => [{ type: AudioVisualizationService }, { type: GlobalKeyboardListenerService }, { type: KeyPressService }, { type: UtilsService }, { type: i1$5.AudioVisualConfiguration, decorators: [{
+        }], ctorParameters: () => [{ type: AudioVisualizationService }, { type: GlobalKeyboardListenerService }, { type: KeyPressService }, { type: UtilsService }, { type: i1$4.AudioVisualConfiguration, decorators: [{
                     type: Inject,
                     args: [SYSTEM_AUDIO_VISUAL_CONFIGURATION]
                 }] }], propDecorators: { showVolumeSliders: [{
@@ -5185,6 +5076,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['document:keyup', ['$event']]
             }] } });
 
+class HerumToolTipDirective {
+    el;
+    tooltipText = '';
+    tooltip;
+    constructor(el) {
+        this.el = el;
+        this.tooltip = document.createElement('div');
+        this.tooltip.className = 'tooltip';
+    }
+    onMouseEnter() {
+        this.showTooltip();
+    }
+    onMouseLeave() {
+        this.hideTooltip();
+    }
+    showTooltip() {
+        const hostPosition = this.el.nativeElement.getBoundingClientRect();
+        const tooltipPosition = {
+            top: window.scrollY + hostPosition.top - this.tooltip.offsetHeight - 30,
+            left: window.scrollX + hostPosition.left + hostPosition.width / 4 //+ this.tooltip.offsetWidth
+        };
+        const bodyRect = document.body.getBoundingClientRect();
+        const tooltipRect = this.tooltip.getBoundingClientRect();
+        if (tooltipPosition.left < bodyRect.left) {
+            tooltipPosition.left = bodyRect.left;
+        }
+        else if (tooltipPosition.left + tooltipRect.width > bodyRect.right) {
+            tooltipPosition.left = bodyRect.right - tooltipRect.width;
+        }
+        this.tooltip.style.top = `${tooltipPosition.top}px`;
+        this.tooltip.style.left = `${tooltipPosition.left}px`;
+        document.body.appendChild(this.tooltip);
+        this.tooltip.innerText = this.tooltipText;
+    }
+    hideTooltip() {
+        document.body.removeChild(this.tooltip);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToolTipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: HerumToolTipDirective, isStandalone: false, selector: "[appHerumToolTip]", inputs: { tooltipText: "tooltipText" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToolTipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: '[appHerumToolTip]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tooltipText: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => HerumTextAreaComponent),
@@ -5245,7 +5192,7 @@ class HerumTextAreaComponent {
         return svgsStrings.X;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTextAreaComponent, isStandalone: false, selector: "herum-text-area", inputs: { placeholder: "placeholder", disabled: "disabled", formControlName: "formControlName", isValid: "isValid", isLoading: "isLoading", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", id: "id", preventMacroKeysPressEvent: "preventMacroKeysPressEvent", heightMode: "heightMode", fontSize: "fontSize", inputValue: "inputValue", maxLength: "maxLength" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [maxlength]=\"maxLength\"\r\n        [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HerumSpinnerComponent, selector: "herum-spinner", inputs: ["size", "borderColor", "borderWidth", "borderTopColor", "shape"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTextAreaComponent, isStandalone: false, selector: "herum-text-area", inputs: { placeholder: "placeholder", disabled: "disabled", formControlName: "formControlName", isValid: "isValid", isLoading: "isLoading", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", id: "id", preventMacroKeysPressEvent: "preventMacroKeysPressEvent", heightMode: "heightMode", fontSize: "fontSize", inputValue: "inputValue", maxLength: "maxLength" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [maxlength]=\"maxLength\"\r\n        [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$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,
@@ -6089,7 +6036,7 @@ class TrackTextChangesComponent {
         this.removeEventListenerFromMarkersAndTooltips();
     }
     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" }, 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\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%}.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(--dark-hover-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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: "component", type: HerumTextAreaComponent, selector: "herum-text-area", inputs: ["placeholder", "disabled", "formControlName", "isValid", "isLoading", "errorMsg", "showErrorMsgGap", "id", "preventMacroKeysPressEvent", "heightMode", "fontSize", "inputValue", "maxLength"], outputs: ["inputValueEmitter"] }, { kind: "directive", type: HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], encapsulation: i0.ViewEncapsulation.None });
+    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" }, 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\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%}.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(--dark-hover-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,
@@ -6176,7 +6123,7 @@ class QuizOpenAnswerQuestionComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizOpenAnswerQuestionComponent, deps: [{ token: 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: { freeTextCorrectAnswerChange: "freeTextCorrectAnswerChange", 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?.charactersLimit > 0\">\r\n        (\u05E2\u05D3 {{ question?.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?.charactersLimit\" [formControl]=\"freeTextCorrectAnswerControl\" 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]=\"freeTextCorrectAnswerControl.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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"], 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: { freeTextCorrectAnswerChange: "freeTextCorrectAnswerChange", 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?.charactersLimit > 0\">\r\n        (\u05E2\u05D3 {{ question?.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?.charactersLimit\" [formControl]=\"freeTextCorrectAnswerControl\" 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]=\"freeTextCorrectAnswerControl.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"], outputs: ["changesEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QuizOpenAnswerQuestionComponent, decorators: [{
             type: Component,
@@ -6255,6 +6202,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['herumHighlight']
             }] } });
 
+const iconDefaultColor = '#7897a8';
+const attribute = 'stroke';
+const pathSelector = 'path';
+const svgSelector = 'svg';
+class SvgOnHoverDirective {
+    element;
+    iconHoverColor;
+    onMouseEnter() {
+        if (!this.iconHoverColor)
+            this.iconHoverColor = window.getComputedStyle(document.body).getPropertyValue('--icons-color');
+        if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)
+            this.setElementAttribute(this.iconHoverColor);
+        else
+            ;
+        this.setElementsAttribute(this.iconHoverColor);
+    }
+    onMouseLeave() {
+        if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)
+            this.setElementAttribute(iconDefaultColor);
+        else
+            this.setElementsAttribute(iconDefaultColor);
+    }
+    stroke;
+    constructor(element) {
+        this.element = element;
+    }
+    setElementAttribute(color) {
+        const element = this.element.nativeElement.querySelector(svgSelector)?.querySelector(pathSelector);
+        element?.setAttribute(attribute, color);
+    }
+    setElementsAttribute(color) {
+        const elements = this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector);
+        elements?.forEach(element => element.setAttribute(attribute, color));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SvgOnHoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: SvgOnHoverDirective, isStandalone: false, selector: "[svgOnHover]", inputs: { iconHoverColor: ["svgOnHover", "iconHoverColor"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "stroke": "this.stroke" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SvgOnHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: '[svgOnHover]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { iconHoverColor: [{
+                type: Input,
+                args: ['svgOnHover']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], stroke: [{
+                type: HostBinding
+            }] } });
+
+class DirectivesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, declarations: [HerumHighlightDirective,
+            HerumToolTipDirective,
+            SvgOnHoverDirective,
+            UserActionDirective], imports: [CommonModule], exports: [HerumHighlightDirective,
+            HerumToolTipDirective,
+            SvgOnHoverDirective,
+            UserActionDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        HerumHighlightDirective,
+                        HerumToolTipDirective,
+                        SvgOnHoverDirective,
+                        UserActionDirective,
+                    ],
+                    exports: [
+                        HerumHighlightDirective,
+                        HerumToolTipDirective,
+                        SvgOnHoverDirective,
+                        UserActionDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                }]
+        }] });
+
 class InsuranceDialogComponent {
     dialogRef;
     data;
@@ -6282,7 +6317,7 @@ class InsuranceDialogComponent {
 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\">\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}\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}.description{font-size:14px}p{margin:0}.dialog-buttons-actions-container{width:100%;justify-content:flex-end;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$6.MatDialogRef }, { type: i1$5.DialogConfig, decorators: [{
+        }], ctorParameters: () => [{ type: i1$6.MatDialogRef }, { type: i1$4.DialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: undefined, decorators: [{
@@ -6462,7 +6497,7 @@ class HerumChipComponent {
         return this.title?.includes(splitKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumChipComponent, isStandalone: false, selector: "herum-chip", inputs: { title: "title", isDeleteButtonNeeded: "isDeleteButtonNeeded", isActive: "isActive", isMenuMode: "isMenuMode", type: "type" }, outputs: { remove: "remove", chipsActivation: "chipsActivation" }, ngImport: i0, template: "<div class=\"herum-chip-container\" [class]=\"type\" [ngClass]=\"{'active':isActive, 'menu-chip':isMenuMode}\" (click)=\"_onChipsSelect()\"\r\n    dir=\"rtl\">\r\n\r\n    <ng-container *ngIf=\"isTitleToBeSplitted; else defaultTitle\">\r\n        <span [innerHTML]=\"splittedTitle | safeHtml\"></span>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultTitle>{{title}}</ng-template>\r\n\r\n    <img *ngIf=\"isDeleteButtonNeeded\" src=\"../../assets/general/secondary-x.svg\" (click)=\"_onRemove()\">\r\n</div>", styles: [".herum-chip-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;width:fit-content;gap:5px;padding:0 5px;background-color:transparent;color:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:32px;box-shadow:0 0 6px #61606029}.herum-chip-container:hover{background-color:var(--hover-background)}.active{background-color:var(--secondary-color);color:#fff}.active:hover{background-color:var(--darker-secondary-color);color:#fff}.positive,.negative{color:var(--icons-color);border:1px solid var(--icons-color)}.menu-chip{cursor:pointer;font-size:12px;height:24px;text-align:center;justify-content:center;display:flex;padding:0 7px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumChipComponent, isStandalone: false, selector: "herum-chip", inputs: { title: "title", isDeleteButtonNeeded: "isDeleteButtonNeeded", isActive: "isActive", isMenuMode: "isMenuMode", type: "type" }, outputs: { remove: "remove", chipsActivation: "chipsActivation" }, ngImport: i0, template: "<div class=\"herum-chip-container\" [class]=\"type\" [ngClass]=\"{'active':isActive, 'menu-chip':isMenuMode}\" (click)=\"_onChipsSelect()\"\r\n    dir=\"rtl\">\r\n\r\n    <ng-container *ngIf=\"isTitleToBeSplitted; else defaultTitle\">\r\n        <span [innerHTML]=\"splittedTitle | safeHtml\"></span>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultTitle>{{title}}</ng-template>\r\n\r\n    <img *ngIf=\"isDeleteButtonNeeded\" src=\"../../assets/general/secondary-x.svg\" (click)=\"_onRemove()\">\r\n</div>", styles: [".herum-chip-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;width:fit-content;gap:5px;padding:0 5px;background-color:transparent;color:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:32px;box-shadow:0 0 6px #61606029}.herum-chip-container:hover{background-color:var(--hover-background)}.active{background-color:var(--secondary-color);color:#fff}.active:hover{background-color:var(--darker-secondary-color);color:#fff}.positive,.negative{color:var(--icons-color);border:1px solid var(--icons-color)}.menu-chip{cursor:pointer;font-size:12px;height:24px;text-align:center;justify-content:center;display:flex;padding:0 7px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: HerumChipComponent, decorators: [{
             type: Component,
@@ -6664,7 +6699,7 @@ class HerumDownloadFileComponent {
         return svgsStrings.downloadFile;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDownloadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDownloadFileComponent, isStandalone: false, selector: "herum-download-file", inputs: { fileId: "fileId", filePath: "filePath", linkText: "linkText" }, outputs: { downloadFile: "downloadFile" }, viewQueries: [{ propertyName: "downloadFileElement", first: true, predicate: ["downloadFile"], descendants: true }], ngImport: i0, template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color)}\n"], dependencies: [{ kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDownloadFileComponent, isStandalone: false, selector: "herum-download-file", inputs: { fileId: "fileId", filePath: "filePath", linkText: "linkText" }, outputs: { downloadFile: "downloadFile" }, viewQueries: [{ propertyName: "downloadFileElement", first: true, predicate: ["downloadFile"], descendants: true }], ngImport: i0, template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color)}\n"], dependencies: [{ kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDownloadFileComponent, decorators: [{
             type: Component,
@@ -6740,7 +6775,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$4.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: [{
@@ -6749,7 +6784,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$4.NgControl }], propDecorators: { formControlName: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.NgControl }], propDecorators: { formControlName: [{
                 type: Input,
                 args: ['appConditionalFormControlName']
             }] } });
@@ -7268,7 +7303,7 @@ class HerumPaginatorComponent {
         return svgsStrings.chevron;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumPaginatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumPaginatorComponent, isStandalone: false, selector: "herum-paginator", inputs: { numberOfSlots: "numberOfSlots", elementsToSlice: "elementsToSlice", numberOfElementsInPage: "numberOfElementsInPage", currentPage: "currentPage", totalPages: "totalPages", showArrows: "showArrows", slicerMode: "slicerMode" }, outputs: { slicedElements: "slicedElements", currentPageChange: "currentPageChange", paginatorRenderChange: "paginatorRenderChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #element *ngIf=\"totalPages > 1\" class=\"paginator-container\">\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed':  currentPage === 1}\" class=\"item chevron right-chevron\"\r\n        [innerHTML]=\"chevronIcon | safeHtml\" (click)=\"_onChangePage(currentPage -1)\">\r\n    </span>\r\n\r\n    <ng-container *ngFor=\"let item of visiblePages\">\r\n        <span class=\"item\" *ngIf=\"_isNumber(item); else ellipsis\" (click)=\"_onChangePage(item)\"\r\n            [ngClass]=\"{'herum-card': currentPage === item}\">\r\n            {{ item }}\r\n        </span>\r\n\r\n        <ng-template #ellipsis>\r\n            <span class=\"ellipsis\">{{ item }}</span>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed': currentPage === totalPages}\"\r\n        class=\"item chevron left-chevron\" [innerHTML]=\"chevronIcon | safeHtml\"\r\n        (click)=\"_onChangePage(currentPage + 1)\">\r\n    </span>\r\n</div>", styles: [".paginator-container{display:flex;gap:4px;direction:rtl;justify-content:flex-end;align-items:center;width:100%}.paginator-container .ellipsis,.paginator-container .item{display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-weight:700}.paginator-container .item{cursor:pointer}.paginator-container .chevron{width:16px;height:16px;stroke:var(--icons-color)}.paginator-container .right-chevron{transform:rotate(-90deg)}.paginator-container .left-chevron{transform:rotate(90deg)}\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.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumPaginatorComponent, isStandalone: false, selector: "herum-paginator", inputs: { numberOfSlots: "numberOfSlots", elementsToSlice: "elementsToSlice", numberOfElementsInPage: "numberOfElementsInPage", currentPage: "currentPage", totalPages: "totalPages", showArrows: "showArrows", slicerMode: "slicerMode" }, outputs: { slicedElements: "slicedElements", currentPageChange: "currentPageChange", paginatorRenderChange: "paginatorRenderChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #element *ngIf=\"totalPages > 1\" class=\"paginator-container\">\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed':  currentPage === 1}\" class=\"item chevron right-chevron\"\r\n        [innerHTML]=\"chevronIcon | safeHtml\" (click)=\"_onChangePage(currentPage -1)\">\r\n    </span>\r\n\r\n    <ng-container *ngFor=\"let item of visiblePages\">\r\n        <span class=\"item\" *ngIf=\"_isNumber(item); else ellipsis\" (click)=\"_onChangePage(item)\"\r\n            [ngClass]=\"{'herum-card': currentPage === item}\">\r\n            {{ item }}\r\n        </span>\r\n\r\n        <ng-template #ellipsis>\r\n            <span class=\"ellipsis\">{{ item }}</span>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed': currentPage === totalPages}\"\r\n        class=\"item chevron left-chevron\" [innerHTML]=\"chevronIcon | safeHtml\"\r\n        (click)=\"_onChangePage(currentPage + 1)\">\r\n    </span>\r\n</div>", styles: [".paginator-container{display:flex;gap:4px;direction:rtl;justify-content:flex-end;align-items:center;width:100%}.paginator-container .ellipsis,.paginator-container .item{display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-weight:700}.paginator-container .item{cursor:pointer}.paginator-container .chevron{width:16px;height:16px;stroke:var(--icons-color)}.paginator-container .right-chevron{transform:rotate(-90deg)}.paginator-container .left-chevron{transform:rotate(90deg)}\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: HerumPaginatorComponent, decorators: [{
             type: Component,
@@ -7861,12 +7896,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(--title-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px)}.file-name{padding-left:12px}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUploadFileComponent, isStandalone: false, selector: "herum-upload-file", inputs: { size: "size", placeholder: "placeholder", isDirectoryMode: "isDirectoryMode", allowedFileTypes: "allowedFileTypes", selectedFile: "selectedFile", formControlName: "formControlName", isEditMode: "isEditMode" }, outputs: { uploadFile: "uploadFile" }, providers: [CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button svgOnHover class=\"upload-file-button upload-file-border\" [class]=\"size\" (click)=\"fileInput.click()\"\r\n    (drop)=\"_onDrop($event)\" (dragover)=\"_onPreventDefault($event)\">\r\n    <ng-container *ngIf=\"!hasTouched && !files\">\r\n        <div class=\"placeholder-container\">\r\n            <span class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n            <span dir=\"rtl\" class=\"button-placeholder\">{{placeholder}}</span>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <span class=\"error\" *ngIf=\"hasTouched && !files\">\r\n        \u05D7\u05D5\u05D1\u05D4 \u05DC\u05D4\u05E2\u05DC\u05D5\u05EA \u05E7\u05D5\u05D1\u05E5\r\n    </span>\r\n\r\n    <div svgOnHover *ngIf=\"files?.length>=0\" class=\"file-container\">\r\n        <span *ngIf=\"files?.length>0\" class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"!isDirectoryMode\">\r\n            <span #fileName class=\"file-name\" *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(fileName) ? uploadName : ''\">\r\n                {{uploadName | ellipsis:fileName}}\r\n            </span>\r\n\r\n            <img class=\"delete-button\" *ngIf=\"files?.length\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isFileTypeAllowed()\">\u05E1\u05D5\u05D2 \u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05DE\u05D5\u05E8\u05E9\u05D4/\u05EA\u05E7\u05D9\u05DF</span>\r\n        </ng-container>\r\n\r\n        <ng-container class=\"cursor-pointer\" *ngIf=\"isDirectoryMode\">\r\n            <span class=\"directory-name-upload\" #directoryNameUpload *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(directoryNameUpload) ? directoryName : ''\">\r\n                {{directoryName | ellipsis:directoryNameUpload}}\r\n            </span>\r\n\r\n            <img *ngIf=\"files?.length\" class=\"delete-button\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isValidirectory\">\u05D4\u05EA\u05D9\u05D9\u05E7\u05D9\u05D4 \u05D0\u05D9\u05E0\u05D4 \u05E1\u05D8\u05D5\u05E8\u05D9</span>\r\n        </ng-container>\r\n    </div>\r\n</button>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"getAcceptValue(allowedFileTypes)\"\r\n    [attr.webkitDirectory]=\"isDirectoryMode ? '' : null\" (change)=\"_onUploadFile($event.target.files)\"\r\n    (cancel)=\"_onCancelUploadFile()\">", styles: [":host{padding:0}.upload-file-button{height:var(--atom-input-height);cursor:pointer;position:relative;color:var(--title-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px)}.file-name{padding-left:12px}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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(--title-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px)}.file-name{padding-left:12px}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.ControlContainer, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -7928,7 +7963,7 @@ class RoundedVerticalMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RoundedVerticalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: RoundedVerticalMenuComponent, isStandalone: false, selector: "rounded-vertical-menu", inputs: { menuItems: "menuItems", currentItem: "currentItem", currentUser: "currentUser" }, outputs: { itemSelected: "itemSelected" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--title-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: RoundedVerticalMenuComponent, isStandalone: false, selector: "rounded-vertical-menu", inputs: { menuItems: "menuItems", currentItem: "currentItem", currentUser: "currentUser" }, outputs: { itemSelected: "itemSelected" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--title-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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,
@@ -7984,7 +8019,7 @@ class TrackTextChangesNotesComponent {
         return svgsStrings.X;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesNotesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TrackTextChangesNotesComponent, isStandalone: false, selector: "track-text-changes-notes", inputs: { textChanges: "textChanges", enableDeleteNote: "enableDeleteNote" }, outputs: { deleteNoteChange: "deleteNoteChange", hoverNote: "hoverNote" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"notes-title\">\u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n\r\n<div *ngIf=\"textChanges?.length; else noNotes\" class=\"notes\">\r\n    <div class=\"note\" *ngFor=\"let textChange of textChanges; let index=index; trackBy:_trackNote\">\r\n        <button *ngIf=\"enableDeleteNote\" class=\"delete-button\" (click)=\"_onDeleteTextChange(textChange)\">\r\n            <span class=\"delete-icon\" [innerHTML]=\"deleteSvgString | safeHtml\"> </span>\r\n        </button>\r\n\r\n        <div class=\"note-card\" (mouseenter)=\"_onHoverNote(textChange)\" (mouseleave)=\"_onHoverNote(undefined)\">\r\n            <ng-container *ngIf=\"textChange.type!=='generalNote'; else generalNote\">\r\n                <p class=\"note-header\" [ngClass]=\"[textChange.type]\">\r\n                    <span [class]=\"textChange.type+'-note'\">{{ textChange.note }}</span>\r\n                    <span>{{ noteTypesToDisplay[index] }}</span>\r\n                </p>\r\n\r\n                <p class=\"comment-text\">\r\n                    {{ textChange.commentText ? textChange.commentText : '\u05DC\u05DC\u05D0 \u05D4\u05E2\u05E8\u05D4' }}\r\n                </p>\r\n            </ng-container>\r\n\r\n            <ng-template #generalNote>\r\n                <p class=\"general-note comment-text\">\r\n                    {{ textChange.note }}\r\n                </p>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #noNotes>\r\n    <div>\u05D0\u05D9\u05DF \u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n</ng-template>", styles: [":host{display:flex;flex-direction:column}.notes-title{font-size:14px;margin-block-end:8px}.notes{display:flex;flex-direction:column;gap:12px;padding-left:8px}.notes .note{display:flex;gap:8px;align-items:flex-start;flex:1}.notes .note .delete-button{padding:0;background:transparent;border:none}.notes .note .delete-icon{fill:var(--text-color)}.notes .note .note-card{background-color:var(--page-background-color);flex:1;border-radius:var(--border-radius)}.notes .note .note-card p{margin-block-end:0;font-size:14px}.notes .note .note-card .note-header,.notes .note .note-card .note,.notes .note .note-card .comment-text{padding:var(--standard-padding)}.notes .note .note-card .note-header{border-radius:var(--border-radius) var(--border-radius) 0 0;display:flex;justify-content:space-between}.notes .note .note-card .note-header .addition-note{color:var(--secondary-color)}.notes .note .note-card .note-header .deletion-note{color:var(--error-color)}.notes .note .note-card .note-header .comment-note{color:var(--positive-color)}.notes .note .note-card .comment-text{border-radius:0 0 var(--border-radius) var(--border-radius)}.notes .note .note-card .general-note{border-radius:var(--border-radius)}.notes .note .addition{color:var(--secondary-color);background-color:color-mix(in srgb,var(--secondary-color) 20%,transparent)}.notes .note .deletion{color:var(--error-color);background-color:var(--light-error-color)}.notes .note .comment{color:var(--positive-color);background-color:var(--light-positive-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.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TrackTextChangesNotesComponent, isStandalone: false, selector: "track-text-changes-notes", inputs: { textChanges: "textChanges", enableDeleteNote: "enableDeleteNote" }, outputs: { deleteNoteChange: "deleteNoteChange", hoverNote: "hoverNote" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"notes-title\">\u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n\r\n<div *ngIf=\"textChanges?.length; else noNotes\" class=\"notes\">\r\n    <div class=\"note\" *ngFor=\"let textChange of textChanges; let index=index; trackBy:_trackNote\">\r\n        <button *ngIf=\"enableDeleteNote\" class=\"delete-button\" (click)=\"_onDeleteTextChange(textChange)\">\r\n            <span class=\"delete-icon\" [innerHTML]=\"deleteSvgString | safeHtml\"> </span>\r\n        </button>\r\n\r\n        <div class=\"note-card\" (mouseenter)=\"_onHoverNote(textChange)\" (mouseleave)=\"_onHoverNote(undefined)\">\r\n            <ng-container *ngIf=\"textChange.type!=='generalNote'; else generalNote\">\r\n                <p class=\"note-header\" [ngClass]=\"[textChange.type]\">\r\n                    <span [class]=\"textChange.type+'-note'\">{{ textChange.note }}</span>\r\n                    <span>{{ noteTypesToDisplay[index] }}</span>\r\n                </p>\r\n\r\n                <p class=\"comment-text\">\r\n                    {{ textChange.commentText ? textChange.commentText : '\u05DC\u05DC\u05D0 \u05D4\u05E2\u05E8\u05D4' }}\r\n                </p>\r\n            </ng-container>\r\n\r\n            <ng-template #generalNote>\r\n                <p class=\"general-note comment-text\">\r\n                    {{ textChange.note }}\r\n                </p>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #noNotes>\r\n    <div>\u05D0\u05D9\u05DF \u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n</ng-template>", styles: [":host{display:flex;flex-direction:column}.notes-title{font-size:14px;margin-block-end:8px}.notes{display:flex;flex-direction:column;gap:12px;padding-left:8px}.notes .note{display:flex;gap:8px;align-items:flex-start;flex:1}.notes .note .delete-button{padding:0;background:transparent;border:none}.notes .note .delete-icon{fill:var(--text-color)}.notes .note .note-card{background-color:var(--page-background-color);flex:1;border-radius:var(--border-radius)}.notes .note .note-card p{margin-block-end:0;font-size:14px}.notes .note .note-card .note-header,.notes .note .note-card .note,.notes .note .note-card .comment-text{padding:var(--standard-padding)}.notes .note .note-card .note-header{border-radius:var(--border-radius) var(--border-radius) 0 0;display:flex;justify-content:space-between}.notes .note .note-card .note-header .addition-note{color:var(--secondary-color)}.notes .note .note-card .note-header .deletion-note{color:var(--error-color)}.notes .note .note-card .note-header .comment-note{color:var(--positive-color)}.notes .note .note-card .comment-text{border-radius:0 0 var(--border-radius) var(--border-radius)}.notes .note .note-card .general-note{border-radius:var(--border-radius)}.notes .note .addition{color:var(--secondary-color);background-color:color-mix(in srgb,var(--secondary-color) 20%,transparent)}.notes .note .deletion{color:var(--error-color);background-color:var(--light-error-color)}.notes .note .comment{color:var(--positive-color);background-color:var(--light-positive-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: TrackTextChangesNotesComponent, decorators: [{
             type: Component,
@@ -8146,6 +8181,7 @@ class AtomsModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule$1,
             PipesModule$1], exports: [CollegeLoaderComponent,
             UsersProfilePreviewComponent,
             HerumBreadcrumbsComponent,
@@ -8203,6 +8239,7 @@ class AtomsModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule$1,
             PipesModule$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, decorators: [{
@@ -8306,6 +8343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         DragDropModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        DirectivesModule$1,
                         PipesModule$1
                     ],
                     providers: [
@@ -8627,7 +8665,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%}.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:12px;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: "pipe", type: i4.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%}.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:12px;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,
@@ -8775,13 +8813,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$4.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: "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] });
+    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$4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -9157,7 +9195,7 @@ 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\" [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-btn\" 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{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent}.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-btn{position:absolute;top:8px;left:8px;background:var(--dark-overlay);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-btn:hover{opacity:1}.preview-wrapper .image-container .remove-btn .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: "component", type: i2$2.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+    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\" [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-btn\" 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{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent}.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-btn{position:absolute;top:8px;left:8px;background:var(--dark-overlay);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-btn:hover{opacity:1}.preview-wrapper .image-container .remove-btn .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,
@@ -9521,6 +9559,7 @@ class MoleculesModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule$1,
             PipesModule$1,
             AtomsModule$1], exports: [HerumActiveLinkComponent,
             HerumActiveMenuComponent,
@@ -9562,6 +9601,7 @@ class MoleculesModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule$1,
             PipesModule$1,
             AtomsModule$1] });
 }
@@ -9632,6 +9672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         DragDropModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        DirectivesModule$1,
                         PipesModule$1,
                         AtomsModule$1
                     ],
@@ -9717,7 +9758,7 @@ class FetchedMessageDialog {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FetchedMessageDialog, deps: [{ token: i1$6.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!important;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}.description{font-size:14px}p{margin:0}.dialog-buttons-actions-container{width:100%;justify-content:flex-end;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.SafeHtmlPipe, name: "safeHtml" }] });
+    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!important;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}.description{font-size:14px}p{margin:0}.dialog-buttons-actions-container{width:100%;justify-content:flex-end;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,
@@ -9844,7 +9885,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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.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,
@@ -9894,7 +9935,7 @@ class EditRowComponent {
         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$8.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.SafeHtmlPipe, name: "safeHtml" }] });
+    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,
@@ -10188,7 +10229,7 @@ class HerumAgGridFilterComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAgGridFilterComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], 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$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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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.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,
@@ -10574,16 +10615,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class HerumSharedModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: HerumSharedModule, declarations: [HerumToolTipDirective,
-            HerumVideoPlayerComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: HerumSharedModule, declarations: [HerumVideoPlayerComponent,
             TrackTextChangesComponent,
             HerumVideoRangeBarComponent,
             HerumPdfViewerComponent,
             HerumStoryViewerComponent,
-            UserActionDirective,
             HerumPresentationViewerComponent,
             HerumLoaderComponent,
-            SvgOnHoverDirective,
             HerumQuizComponent,
             QuizHeaderComponent,
             QuizTwoAnswersQuestionComponent,
@@ -10604,8 +10642,7 @@ class HerumSharedModule {
             HerumDateTimePickerSelectComponent,
             HerumTimeRangeSelectComponent,
             AudioSliderComponent,
-            QuizOpenAnswerQuestionComponent,
-            HerumHighlightDirective], imports: [CommonModule,
+            QuizOpenAnswerQuestionComponent], imports: [CommonModule,
             ReactiveFormsModule,
             FormsModule,
             MatMenuModule,
@@ -10622,6 +10659,7 @@ class HerumSharedModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule,
             DialogsModule,
             AtomsModule,
             PipesModule,
@@ -10629,16 +10667,12 @@ class HerumSharedModule {
             ErrorsModule,
             FetchedMessageModule,
             TableModule], exports: [TrackTextChangesComponent,
-            HerumToolTipDirective,
-            UserActionDirective,
             HerumVideoPlayerComponent,
             HerumPdfViewerComponent,
             HerumStoryViewerComponent,
             HerumLoaderComponent,
             HerumLocalLoaderComponent,
             HerumQuizComponent,
-            SvgOnHoverDirective,
-            HerumHighlightDirective,
             CommonModule,
             HerumListCentralizerComponent,
             BlockedFormComponent,
@@ -10652,6 +10686,7 @@ class HerumSharedModule {
             QuizOneAnswerQuestionComponent,
             QuizMultiAnswerQuestionComponent,
             QuizOpenAnswerQuestionComponent,
+            DirectivesModule,
             DialogsModule,
             AtomsModule,
             MoleculesModule,
@@ -10679,6 +10714,7 @@ class HerumSharedModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule,
             DialogsModule,
             AtomsModule,
             PipesModule,
@@ -10686,6 +10722,7 @@ class HerumSharedModule {
             ErrorsModule,
             FetchedMessageModule,
             TableModule, CommonModule,
+            DirectivesModule,
             DialogsModule,
             AtomsModule,
             MoleculesModule,
@@ -10698,16 +10735,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             type: NgModule,
             args: [{
                     declarations: [
-                        HerumToolTipDirective,
                         HerumVideoPlayerComponent,
                         TrackTextChangesComponent,
                         HerumVideoRangeBarComponent,
                         HerumPdfViewerComponent,
                         HerumStoryViewerComponent,
-                        UserActionDirective,
                         HerumPresentationViewerComponent,
                         HerumLoaderComponent,
-                        SvgOnHoverDirective,
                         HerumQuizComponent,
                         QuizHeaderComponent,
                         QuizTwoAnswersQuestionComponent,
@@ -10729,20 +10763,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         HerumTimeRangeSelectComponent,
                         AudioSliderComponent,
                         QuizOpenAnswerQuestionComponent,
-                        HerumHighlightDirective,
                     ],
                     exports: [
                         TrackTextChangesComponent,
-                        HerumToolTipDirective,
-                        UserActionDirective,
                         HerumVideoPlayerComponent,
                         HerumPdfViewerComponent,
                         HerumStoryViewerComponent,
                         HerumLoaderComponent,
                         HerumLocalLoaderComponent,
                         HerumQuizComponent,
-                        SvgOnHoverDirective,
-                        HerumHighlightDirective,
                         CommonModule,
                         HerumListCentralizerComponent,
                         BlockedFormComponent,
@@ -10756,6 +10785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         QuizOneAnswerQuestionComponent,
                         QuizMultiAnswerQuestionComponent,
                         QuizOpenAnswerQuestionComponent,
+                        DirectivesModule,
                         DialogsModule,
                         AtomsModule,
                         MoleculesModule,
@@ -10782,6 +10812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         DragDropModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        DirectivesModule,
                         DialogsModule,
                         AtomsModule,
                         PipesModule,
@@ -10860,7 +10891,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$6.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$5.HttpClient }, { token: i1$6.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: [{
@@ -10868,7 +10899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: i1$6.MatDialog }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.HttpClient }, { type: i1$6.MatDialog }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -11000,12 +11031,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$6.MatDialog }, { token: i1$3.HttpClient }, { token: i1$2.UtilsService }, { 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$6.MatDialog }, { token: i1$5.HttpClient }, { token: i1$2.UtilsService }, { 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$6.MatDialog }, { type: i1$3.HttpClient }, { type: i1$2.UtilsService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$6.MatDialog }, { type: i1$5.HttpClient }, { type: i1$2.UtilsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
                 }] }] });
@@ -11277,12 +11308,12 @@ class UploadsManagerService {
         let status = areAllCommonUploadsProgressFinishedSuccesfully ? toastStatuses.success : toastStatuses.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: 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$5.HttpClient }, { token: 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: ToastsService }] });
+        }], ctorParameters: () => [{ type: ErrorsHandlerService }, { type: DependentsService }, { type: i1$5.HttpClient }, { type: ToastsService }] });
 
 class HerumToastsComponent {
     toastsService;
@@ -11374,7 +11405,7 @@ class HerumToastsComponent {
         return toastStatuses.success;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToastsComponent, deps: [{ token: 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.SafeHtmlPipe, name: "safeHtml" }] });
+    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,
@@ -11487,7 +11518,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:99;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 .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.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4.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:99;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 .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,
@@ -11677,5 +11708,5 @@ const deleteButtonStyle = {
  * Generated bundle index. Do not edit.
  */
 
-export { AnswerNotesToTextChangesPipe, AtomsModule, AudioConfigurationConstants, AudioPlayerComponent, AudioSliderComponent, AudioVisualizationService, BlockedFormComponent, CheckboxCellComponent, ChipsCellComponent, CollectionSubscriptionToCollectionBasePipe, CollectionToCollectionBasePipe, CollegeAudioConfiguration, CollegeLoaderComponent, ConditionalFormControlNameDirective, CopyableCellComponent, DeleteRowComponent, DependentsService, DialogsModule, DisplayedSubmissionsCounterPipe, EditRowComponent, EllipsisPipe, ErrorMessageDialogComponent, ErrorsHandlerService, ErrorsModule, FetchedMessageDialog, FetchedMessageModule, FetchedMessageService, HadrachaAudioConfiguration, HerumActiveLinkComponent, HerumActiveMenuComponent, HerumAgGridFilterComponent, HerumAutocompleteComponent, HerumBreadcrumbsComponent, HerumButtonComponent, HerumCheckboxComponent, HerumChipComponent, HerumCircularProgressBarComponent, HerumClosedListMultiSelectComponent, HerumClosedListSelectComponent, HerumDatePickerComponent, HerumDateTimeInputComponent, HerumDateTimePickerComponent, HerumDateTimePickerSelectComponent, HerumDownloadFileComponent, HerumDropZoneComponent, HerumEllipsisLoaderComponent, HerumExpendablePanelComponent, HerumFilesViewerComponent, HerumFilesViewerDialogComponent, HerumFormControl, HerumHierarchyTreeComponent, HerumHierarchyTreeNodeComponent, HerumHighlightDirective, HerumIconLabelComponent, HerumIndeterminateComponent, HerumInputFieldComponent, HerumListCentralizerComponent, HerumLoaderComponent, HerumLocalLoaderComponent, HerumLogoComponent, HerumMiniTableComponent, HerumMultiProgressBarComponent, HerumMultiSelectComponent, HerumNarrowCollectionMenuItemComponent, HerumNavigatorComponent, HerumNoResultMessageComponent, HerumOptionsListComponent, HerumPaginatorComponent, HerumPanelLinksComponent, HerumPdfViewerComponent, HerumPresentationViewerComponent, HerumProgressBarComponent, HerumQuizComponent, HerumQuizHeaderItemComponent, HerumRadioButtonComponent, HerumRecursiveHierarchyOptionsListComponent, HerumSelectComponent, HerumSharedModule, HerumSliderComponent, HerumSpinnerComponent, HerumStepNavigatorComponent, HerumStepperComponent, HerumStoryViewerComponent, HerumSwitchComponent, HerumTableComponent, HerumTextAreaComponent, HerumTextualVerticalTreeComponent, HerumTimePickerComponent, HerumTimeRangeSelectComponent, HerumTimeSelectComponent, HerumToastsComponent, HerumToggleButtonComponent, HerumToolTipDirective, HerumUploadFileComponent, HerumUploadsManagerComponent, HerumUserProfileComponent, HerumUserProgressComponent, HerumVideoPlayerComponent, HerumVideoRangeBarComponent, HerumVideoSelectComponent, InputCellComponent, InsuranceDialogComponent, KeyValueListComponent, LabelsWithIconsListComponent, MoleculesModule, MongoModule, MongoMoleculesModule, PipesModule, ProgressesOverViewComponent, QuizGradeSheetComponent, QuizHeaderComponent, QuizIntroComponent, QuizLoaderComponent, QuizMultiAnswerQuestionComponent, QuizOneAnswerQuestionComponent, QuizOpenAnswerQuestionComponent, QuizSubmissionComponent, QuizTwoAnswersQuestionComponent, RecursiveTreeComponent, ResourceSubscriptionToResourcePipe, ResourceToResourceSubscriptionPipe, RoundedVerticalMenuComponent, RowActionButtonsComponent, SafeHtmlPipe, SafePipe, SliceBreadcrumbsPipe, StringArrayToSignUpFieldArrayPipe, SvgOnHoverDirective, SwitchCellComponent, TableModule, TimeFormatPipe, ToIntegerPipe, ToastsService, TrackTextChangesComponent, TrackTextChangesNotesComponent, UploadsManagerService, UserActionDirective, UserIdentifiedEntitiesToBackendModelsPipe, UserProfileImageComponent, UsersProfilePreviewComponent, buttonsContainerStyle, commentTextStyle, deleteButtonStyle, editButtonStyle, openClose, setDynamicElementStyle, speedOptions, tooltipStyle };
+export { AnswerNotesToTextChangesPipe, AtomsModule, AudioConfigurationConstants, AudioPlayerComponent, AudioSliderComponent, AudioVisualizationService, BlockedFormComponent, CheckboxCellComponent, ChipsCellComponent, CollectionSubscriptionToCollectionBasePipe, CollectionToCollectionBasePipe, CollegeAudioConfiguration, CollegeLoaderComponent, ConditionalFormControlNameDirective, CopyableCellComponent, DeleteRowComponent, DependentsService, DialogsModule, DirectivesModule, DisplayedSubmissionsCounterPipe, EditRowComponent, EllipsisPipe, ErrorMessageDialogComponent, ErrorsHandlerService, ErrorsModule, FetchedMessageDialog, FetchedMessageModule, FetchedMessageService, HadrachaAudioConfiguration, HerumActiveLinkComponent, HerumActiveMenuComponent, HerumAgGridFilterComponent, HerumAutocompleteComponent, HerumBreadcrumbsComponent, HerumButtonComponent, HerumCheckboxComponent, HerumChipComponent, HerumCircularProgressBarComponent, HerumClosedListMultiSelectComponent, HerumClosedListSelectComponent, HerumDatePickerComponent, HerumDateTimeInputComponent, HerumDateTimePickerComponent, HerumDateTimePickerSelectComponent, HerumDownloadFileComponent, HerumDropZoneComponent, HerumEllipsisLoaderComponent, HerumExpendablePanelComponent, HerumFilesViewerComponent, HerumFilesViewerDialogComponent, HerumFormControl, HerumHierarchyTreeComponent, HerumHierarchyTreeNodeComponent, HerumHighlightDirective, HerumIconLabelComponent, HerumIndeterminateComponent, HerumInputFieldComponent, HerumListCentralizerComponent, HerumLoaderComponent, HerumLocalLoaderComponent, HerumLogoComponent, HerumMiniTableComponent, HerumMultiProgressBarComponent, HerumMultiSelectComponent, HerumNarrowCollectionMenuItemComponent, HerumNavigatorComponent, HerumNoResultMessageComponent, HerumOptionsListComponent, HerumPaginatorComponent, HerumPanelLinksComponent, HerumPdfViewerComponent, HerumPresentationViewerComponent, HerumProgressBarComponent, HerumQuizComponent, HerumQuizHeaderItemComponent, HerumRadioButtonComponent, HerumRecursiveHierarchyOptionsListComponent, HerumSelectComponent, HerumSharedModule, HerumSliderComponent, HerumSpinnerComponent, HerumStepNavigatorComponent, HerumStepperComponent, HerumStoryViewerComponent, HerumSwitchComponent, HerumTableComponent, HerumTextAreaComponent, HerumTextualVerticalTreeComponent, HerumTimePickerComponent, HerumTimeRangeSelectComponent, HerumTimeSelectComponent, HerumToastsComponent, HerumToggleButtonComponent, HerumToolTipDirective, HerumUploadFileComponent, HerumUploadsManagerComponent, HerumUserProfileComponent, HerumUserProgressComponent, HerumVideoPlayerComponent, HerumVideoRangeBarComponent, HerumVideoSelectComponent, InputCellComponent, InsuranceDialogComponent, KeyValueListComponent, LabelsWithIconsListComponent, MoleculesModule, MongoModule, MongoMoleculesModule, PipesModule, ProgressesOverViewComponent, QuizGradeSheetComponent, QuizHeaderComponent, QuizIntroComponent, QuizLoaderComponent, QuizMultiAnswerQuestionComponent, QuizOneAnswerQuestionComponent, QuizOpenAnswerQuestionComponent, QuizSubmissionComponent, QuizTwoAnswersQuestionComponent, RecursiveTreeComponent, ResourceSubscriptionToResourcePipe, ResourceToResourceSubscriptionPipe, RoundedVerticalMenuComponent, RowActionButtonsComponent, SafeHtmlPipe, SafePipe, SliceBreadcrumbsPipe, StringArrayToSignUpFieldArrayPipe, SvgOnHoverDirective, SwitchCellComponent, TableModule, TimeFormatPipe, ToIntegerPipe, ToastsService, TrackTextChangesComponent, TrackTextChangesNotesComponent, UploadsManagerService, UserActionDirective, UserIdentifiedEntitiesToBackendModelsPipe, UserProfileImageComponent, UsersProfilePreviewComponent, buttonsContainerStyle, commentTextStyle, deleteButtonStyle, editButtonStyle, openClose, setDynamicElementStyle, speedOptions, tooltipStyle };
 //# sourceMappingURL=herum-shared.mjs.map