herum-shared 0.1.38 → 0.1.46

package/fesm2022/herum-shared-molecules.mjs

@@ -1,38 +1,38 @@
 import * as i0 from '@angular/core';
 import { Component, EventEmitter, HostListener, ViewChildren, ViewChild, Output, Input, Optional, Self, forwardRef, Inject, NgModule } from '@angular/core';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3 from 'herum-shared/directives';
-import { DirectivesModule } from 'herum-shared/directives';
-import * as i6 from 'herum-shared/pipes';
-import { PipesModule } from 'herum-shared/pipes';
-import { openClose } from 'herum-shared/animations';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i3$1 from '@angular/cdk/bidi';
-import * as i2$1 from 'herum-shared/atoms';
-import { AtomsModule } from 'herum-shared/atoms';
-import * as i1$2 from 'herum-shared/services';
-import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
-import { regexExpressions, startEndDateError, minDateError, formatError, timestampError, svgsStrings, resourcesFilesSuffixes, filesSuffixes, anySubFileTypeWildCard, system } from 'herum-shared/constants';
-import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
-import { isTruncatedTitleElement, getAssignmentStateDisplayName } from 'herum-shared/utils';
 import * as i2$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import { StepStatus } from 'herum-shared/herum-types';
-import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSliderModule } from '@angular/material/slider';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
+import * as i3 from 'herum-shared/directives';
+import { DirectivesModule } from 'herum-shared/directives';
+import * as i6 from 'herum-shared/pipes';
+import { PipesModule } from 'herum-shared/pipes';
+import * as i2$1 from 'herum-shared/atoms';
+import { AtomsModule } from 'herum-shared/atoms';
+import { openClose } from 'herum-shared/animations';
+import * as i3$1 from '@angular/cdk/bidi';
+import * as i1$2 from 'herum-shared/services';
+import { regexExpressions, startEndDateError, minDateError, formatError, timestampError, svgsStrings, resourcesFilesSuffixes, maxImageHeight, maxImageWidth, filesSuffixes, uploadsProgressMetadataTypes, anySubFileTypeWildCard, system } from 'herum-shared/constants';
+import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
+import { isTruncatedTitleElement, getAssignmentStateDisplayName } from 'herum-shared/utils';
+import { StepStatus } from 'herum-types/Shared';
 
 class HerumActiveLinkComponent {
     constructor() { }
@@ -107,11 +107,11 @@ 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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveMenuComponent, isStandalone: false, selector: "herum-active-menu", inputs: { useIcons: "useIcons", view: "view", activeColor: "activeColor", activeTextColor: "activeTextColor", secondaryTextColor: "secondaryTextColor", menuItems: "menuItems", selectedItem: "selectedItem", selectById: "selectById", isBlock: "isBlock", dragEvent: "dragEvent" }, outputs: { selectionIndex: "selectionIndex" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true }, { propertyName: "tabsElement", predicate: ["tabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%;border-radius:8px 0 0}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:var(--standard-padding);justify-content:flex-start;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-active-menu', 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"] }]
+            args: [{ standalone: false, selector: 'herum-active-menu', template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%;border-radius:8px 0 0}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:var(--standard-padding);justify-content:flex-start;display:flex}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { useIcons: [{
                 type: Input
             }], view: [{
@@ -201,7 +201,7 @@ class HerumAutocompleteComponent {
     _inputChange(rawText) {
         if (!this.disabled)
             this.isDropdownOpen = true;
-        const text = !!rawText ? rawText.toString().trim() : '';
+        const text = !!rawText ? rawText.toString() : '';
         this.currentSearchedItem = text;
         this.isWaitingForResults = true;
         this.onChange(this.currentSearchedItem);
@@ -735,6 +735,7 @@ class HerumDropZoneComponent {
     filesSuffixes = resourcesFilesSuffixes;
     isValidUpload = true;
     isSupportedFileType = true;
+    isImagesSizeValid = true;
     parsedAllowedFileTypes = '';
     errorMessages = [
         { condition: () => !this.isSupportedFileType && this.isValidUpload, message: 'סוג הקובץ אינו נתמך' },
@@ -743,6 +744,10 @@ class HerumDropZoneComponent {
             condition: () => this.hasExceededNumberOfAllowedFiles && this.numberOfAllowedFiles > 1,
             message: `ניתן להעלות עד ${this.numberOfAllowedFiles} קבצים`
         },
+        {
+            condition: () => !this.isImagesSizeValid,
+            message: `אין להעלות תמונות בגודל של מעל ${maxImageHeight} על ${maxImageWidth}`
+        },
     ];
     constructor(environmentConfig) {
         this.environmentConfig = environmentConfig;
@@ -791,12 +796,13 @@ class HerumDropZoneComponent {
     _onClickFileInput() {
         this.fileInput.nativeElement.click();
     }
-    uploadFiles(files) {
+    async uploadFiles(files) {
+        this.isImagesSizeValid = await this.imagesSizeValidation(files);
         if (this.allowedFileTypes?.length)
             this.isValidUpload = this.filesTypeValidation(files);
         if (this.supportedFilesMimes?.length)
             this.isSupportedFileType = this.supportedFilesValidation(files);
-        if (!this.isValidUpload || !this.isSupportedFileType)
+        if (!this.isValidUpload || !this.isSupportedFileType || !this.isImagesSizeValid)
             return;
         this.isExceededFilesLength(files);
         if (this.filesList.length === this.numberOfAllowedFiles && files.length < this.numberOfAllowedFiles)
@@ -814,6 +820,25 @@ class HerumDropZoneComponent {
     supportedFilesValidation(files) {
         return files.some((file) => this.supportedFilesMimes.some(supportedFileType => file.type.includes(supportedFileType)));
     }
+    imagesSizeValidation(files) {
+        let imagesFiles = files.filter(file => filesSuffixes[uploadsProgressMetadataTypes.image].some(suffix => file.type.includes(suffix)));
+        const imageSizeChecks = imagesFiles.map(image => new Promise((resolve) => {
+            let url = URL.createObjectURL(image);
+            let imageObject = new Image();
+            imageObject.onload = () => {
+                const width = imageObject.naturalWidth;
+                const height = imageObject.naturalHeight;
+                URL.revokeObjectURL(url);
+                resolve(width < maxImageWidth && height < maxImageHeight);
+            };
+            imageObject.onerror = () => {
+                URL.revokeObjectURL(url);
+                resolve(false);
+            };
+            imageObject.src = url;
+        }));
+        return Promise.all(imageSizeChecks).then(results => results.every(Boolean));
+    }
     filesTypeValidation(files) {
         if (files.some((file) => file.type === '' || file.type === undefined))
             return false;
@@ -856,11 +881,11 @@ 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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i6.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\" type=\"button\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\">{{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-button\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone:focus-visible{outline:none}.dropzone:focus-visible .dropzone-content{border-color:var(--icons-color-light-1)}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent;padding:0}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-button{position:absolute;top:8px;left:8px;background:transparent;border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-button:hover{opacity:1}.preview-wrapper .image-container .remove-button .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-drop-zone', 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"] }]
+            args: [{ standalone: false, selector: 'herum-drop-zone', template: "<button class=\"dropzone\" type=\"button\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\">{{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-button\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone:focus-visible{outline:none}.dropzone:focus-visible .dropzone-content{border-color:var(--icons-color-light-1)}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent;padding:0}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-button{position:absolute;top:8px;left:8px;background:transparent;border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-button:hover{opacity:1}.preview-wrapper .image-container .remove-button .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
@@ -953,11 +978,11 @@ class HerumFilesViewerComponent {
         this.downloadFile.emit(this.fileData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerComponent, isStandalone: false, selector: "herum-files-viewer", inputs: { fileData: "fileData", showDeleteFileButton: "showDeleteFileButton" }, outputs: { downloadFile: "downloadFile", deleteFile: "deleteFile" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <img [style.background-image]=\"'url(' + srcPath + ')'\" [class.image-hover]=\"showDeleteFileButton\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n    <img src=\"assets/general/secondary-x.svg\" />\r\n</button>", styles: [":host{flex:1;display:flex;position:relative}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container{display:flex;flex:1;justify-content:center}.image-container img{background-repeat:no-repeat;background-size:cover;background-position:center;width:100%;height:100%;border-radius:var(--border-radius);filter:brightness(100%);transition:filter .5s ease}.image-container .image-hover:hover{filter:brightness(50%)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerComponent, isStandalone: false, selector: "herum-files-viewer", inputs: { fileData: "fileData", showDeleteFileButton: "showDeleteFileButton" }, outputs: { downloadFile: "downloadFile", deleteFile: "deleteFile" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-files-viewer', template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <img [style.background-image]=\"'url(' + srcPath + ')'\" [class.image-hover]=\"showDeleteFileButton\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n    <img src=\"assets/general/secondary-x.svg\" />\r\n</button>", styles: [":host{flex:1;display:flex;position:relative}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container{display:flex;flex:1;justify-content:center}.image-container img{background-repeat:no-repeat;background-size:cover;background-position:center;width:100%;height:100%;border-radius:var(--border-radius);filter:brightness(100%);transition:filter .5s ease}.image-container .image-hover:hover{filter:brightness(50%)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"] }]
+            args: [{ standalone: false, selector: 'herum-files-viewer', template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
@@ -1033,11 +1058,11 @@ 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$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "component", type: i2$1.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i6.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumHierarchyTreeNodeComponent, isStandalone: false, selector: "herum-hierarchy-tree-node", inputs: { treeNodeData: "treeNodeData", size: "size", expandedMode: "expandedMode", showArrow: "showArrow", showAssignmentsDetails: "showAssignmentsDetails", nodeMenuItems: "nodeMenuItems" }, outputs: { onNodeSelected: "onNodeSelected", onMenuItemSelected: "onMenuItemSelected", onExpand: "onExpand" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0 && treeNodeData.loggedUserPermissions?.edit\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "component", type: i2$1.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i6.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumHierarchyTreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'herum-hierarchy-tree-node', 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"] }]
+            args: [{ standalone: false, selector: 'herum-hierarchy-tree-node', template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0 && treeNodeData.loggedUserPermissions?.edit\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
@@ -1527,6 +1552,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }]
         }] });
 
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */