herum-shared 0.1.61 → 0.1.62

package/fesm2022/herum-shared-molecules.mjs

@@ -5,13 +5,13 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i2$2 from '@angular/material/menu';
+import * as i2$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 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 * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
@@ -20,11 +20,11 @@ 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 * as i4 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 * as i2 from 'herum-shared/atoms';
 import { AtomsModule } from 'herum-shared/atoms';
 import { openClose } from 'herum-shared/animations';
 import * as i3$1 from '@angular/cdk/bidi';
@@ -107,7 +107,7 @@ class HerumActiveMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveMenuComponent, isStandalone: false, selector: "herum-active-menu", inputs: { useIcons: "useIcons", view: "view", activeColor: "activeColor", activeTextColor: "activeTextColor", secondaryTextColor: "secondaryTextColor", menuItems: "menuItems", selectedItem: "selectedItem", selectById: "selectById", isBlock: "isBlock", dragEvent: "dragEvent" }, outputs: { selectionIndex: "selectionIndex" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true }, { propertyName: "tabsElement", predicate: ["tabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%;border-radius:8px 0 0}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:var(--standard-padding);justify-content:flex-start;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.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: i6.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, decorators: [{
             type: Component,
@@ -256,7 +256,7 @@ class HerumAutocompleteComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, deps: [{ token: i1$1.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: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2$1.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: 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: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, decorators: [{
             type: Component,
@@ -358,7 +358,7 @@ class HerumClosedListMultiSelectComponent {
         this.onTouched = fn;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListMultiSelectComponent, deps: [{ token: i1$2.CommonGraphqlRequestsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListMultiSelectComponent, isStandalone: false, selector: "herum-closed-list-multi-select", inputs: { closedListName: "closedListName", placeholder: "placeholder", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", size: "size", dropDownDirection: "dropDownDirection", selectedClosedListOptionalValues: "selectedClosedListOptionalValues" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter" }, providers: [CUSTOM_CLOSED_LIST_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-multi-select [placeholder]=\"placeholder\" [options]=\"closedListValues\"\r\n    [selectedOptionsInput]=\"selectedClosedListOptionalValues\" [disabled]=\"disabled\"\r\n    [isDropDownInPositionFixed]=\"isDropDownInPositionFixed\" [size]=\"size\" [dropDownDirection]=\"dropDownDirection\"\r\n    (selectedOptions)=\"_selectedOptionsEmitter($event)\">\r\n</herum-multi-select>", styles: [""], dependencies: [{ kind: "component", type: i2$1.HerumMultiSelectComponent, selector: "herum-multi-select", inputs: ["placeholder", "options", "titledOptionsList", "recursiveTitledOption", "selectedOptionsInput", "maxChips", "disabled", "size", "isDropDownInPositionFixed", "dropDownDirection", "isMultiHeads"], outputs: ["selectedOptions", "selectedRecursiveOptions"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListMultiSelectComponent, isStandalone: false, selector: "herum-closed-list-multi-select", inputs: { closedListName: "closedListName", placeholder: "placeholder", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", size: "size", dropDownDirection: "dropDownDirection", selectedClosedListOptionalValues: "selectedClosedListOptionalValues" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter" }, providers: [CUSTOM_CLOSED_LIST_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-multi-select [placeholder]=\"placeholder\" [options]=\"closedListValues\"\r\n    [selectedOptionsInput]=\"selectedClosedListOptionalValues\" [disabled]=\"disabled\"\r\n    [isDropDownInPositionFixed]=\"isDropDownInPositionFixed\" [size]=\"size\" [dropDownDirection]=\"dropDownDirection\"\r\n    (selectedOptions)=\"_selectedOptionsEmitter($event)\">\r\n</herum-multi-select>", styles: [""], dependencies: [{ kind: "component", type: i2.HerumMultiSelectComponent, selector: "herum-multi-select", inputs: ["placeholder", "options", "titledOptionsList", "recursiveTitledOption", "selectedOptionsInput", "maxChips", "disabled", "size", "isDropDownInPositionFixed", "dropDownDirection", "isMultiHeads"], outputs: ["selectedOptions", "selectedRecursiveOptions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListMultiSelectComponent, decorators: [{
             type: Component,
@@ -450,7 +450,7 @@ class HerumClosedListSelectComponent {
         this.onTouched = fn;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListSelectComponent, deps: [{ token: i1$2.CommonGraphqlRequestsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListSelectComponent, isStandalone: false, selector: "herum-closed-list-select", inputs: { closedListName: ["formControlName", "closedListName"], placeholder: "placeholder", closedListOptionalValueName: "closedListOptionalValueName", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", iconPath: "iconPath", isAutoComplete: "isAutoComplete", title: "title", size: "size", displayLoadingMode: "displayLoadingMode", isLoadingInput: "isLoadingInput", dropDownDirection: "dropDownDirection", filterPlaceholder: "filterPlaceholder" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter", filterTextEmitter: "filterTextEmitter" }, providers: [CUSTOM_CLOSED_LIST_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-select\r\n[options]=\"closedListValues\"\r\n[placeholder]=\"placeholder\"\r\n[selectedOption]=\"selectedClosedListOptionalValue\"\r\n[disabled]=\"disabled\"\r\n[isDropDownInPositionFixed]=\"isDropDownInPositionFixed\"\r\n[iconPath]=\"iconPath\"\r\n[isAutoComplete]=\"isAutoComplete\"\r\n[title]=\"title\"\r\n[size]=\"size\"\r\n[displayLoadingMode]=\"displayLoadingMode\"\r\n[isLoadingInput]=\"isLoadingInput\"\r\n[dropDownDirection]=\"dropDownDirection\"\r\n[filterPlaceholder]=\"filterPlaceholder\"\r\n(selectedOptionEmitter)=\"_selectedOptionEmitter($event)\"\r\n(filterTextEmitter)=\"_filterTextEmitter($event)\"\r\n>\r\n</herum-select>", dependencies: [{ kind: "component", type: i2$1.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumClosedListSelectComponent, isStandalone: false, selector: "herum-closed-list-select", inputs: { closedListName: ["formControlName", "closedListName"], placeholder: "placeholder", closedListOptionalValueName: "closedListOptionalValueName", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", iconPath: "iconPath", isAutoComplete: "isAutoComplete", title: "title", size: "size", displayLoadingMode: "displayLoadingMode", isLoadingInput: "isLoadingInput", dropDownDirection: "dropDownDirection", filterPlaceholder: "filterPlaceholder" }, outputs: { selectedClosedListValueEmitter: "selectedClosedListValueEmitter", filterTextEmitter: "filterTextEmitter" }, providers: [CUSTOM_CLOSED_LIST_SELECT_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<herum-select\r\n[options]=\"closedListValues\"\r\n[placeholder]=\"placeholder\"\r\n[selectedOption]=\"selectedClosedListOptionalValue\"\r\n[disabled]=\"disabled\"\r\n[isDropDownInPositionFixed]=\"isDropDownInPositionFixed\"\r\n[iconPath]=\"iconPath\"\r\n[isAutoComplete]=\"isAutoComplete\"\r\n[title]=\"title\"\r\n[size]=\"size\"\r\n[displayLoadingMode]=\"displayLoadingMode\"\r\n[isLoadingInput]=\"isLoadingInput\"\r\n[dropDownDirection]=\"dropDownDirection\"\r\n[filterPlaceholder]=\"filterPlaceholder\"\r\n(selectedOptionEmitter)=\"_selectedOptionEmitter($event)\"\r\n(filterTextEmitter)=\"_filterTextEmitter($event)\"\r\n>\r\n</herum-select>", dependencies: [{ kind: "component", type: i2.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListSelectComponent, decorators: [{
             type: Component,
@@ -604,7 +604,7 @@ class HerumDateTimeInputComponent {
         return isValidDate && isValidTime;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n    [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n    (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2$1.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n    [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n    (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, decorators: [{
             type: Component,
@@ -666,7 +666,7 @@ class HerumDateTimePickerComponent {
         this.dateChange.emit(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimePickerComponent, isStandalone: false, selector: "herum-date-time-picker", inputs: { showDatePicker: "showDatePicker", showTimePicker: "showTimePicker", showTimeSelect: "showTimeSelect", selectedTime: "selectedTime", selectedDate: "selectedDate", rangeMode: "rangeMode", minDate: "minDate", timePickerHoverColor: "timePickerHoverColor", timePickerActiveColor: "timePickerActiveColor", widthDatePicker: "widthDatePicker", heightTimePicker: "heightTimePicker", datePickerHoverColor: "datePickerHoverColor", datePickerActiveColor: "datePickerActiveColor", showSeconds: "showSeconds", timePickerItemSize: "timePickerItemSize" }, outputs: { timeChange: "timeChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"date-time-picker\" [ngClass]=\"{'flex-column':showTimeSelect && rangeMode}\">\r\n    <herum-date-picker *ngIf=\"showDatePicker\" [rangeMode]=\"rangeMode\" [minDate]=\"minDate\"\r\n        [hoverColor]=\"datePickerHoverColor\" [activeColor]=\"datePickerActiveColor\" [selectedDate]=\"selectedDate\"\r\n        (dateChange)=\"_dateChange($event)\"></herum-date-picker>\r\n\r\n    <herum-time-picker *ngIf=\"showTimePicker\" [ngClass]=\"{'me-5':showDatePicker}\" [selectedTime]=\"selectedTime\"\r\n        [showSeconds]=\"showSeconds\" [itemSize]=\"timePickerItemSize\" [hoverColor]=\"timePickerHoverColor\"\r\n        [activeColor]=\"timePickerActiveColor\" (timeChange)=\"_timeChange($event)\"></herum-time-picker>\r\n</div>", styles: [":host{--width-date-picker: 320px;--height-time-picker: 325px}.date-time-picker{display:flex;justify-content:center}herum-date-picker{width:var(--width-date-picker)}herum-time-picker{height:var(--height-time-picker)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.HerumDatePickerComponent, selector: "herum-date-picker", inputs: ["activeColor", "hoverColor", "minDate", "rangeMode", "selectedDate"], outputs: ["dateChange"] }, { kind: "component", type: i2$1.HerumTimePickerComponent, selector: "herum-time-picker", inputs: ["activeColor", "hoverColor", "itemSize", "selectedTime", "showSeconds"], outputs: ["timeChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimePickerComponent, isStandalone: false, selector: "herum-date-time-picker", inputs: { showDatePicker: "showDatePicker", showTimePicker: "showTimePicker", showTimeSelect: "showTimeSelect", selectedTime: "selectedTime", selectedDate: "selectedDate", rangeMode: "rangeMode", minDate: "minDate", timePickerHoverColor: "timePickerHoverColor", timePickerActiveColor: "timePickerActiveColor", widthDatePicker: "widthDatePicker", heightTimePicker: "heightTimePicker", datePickerHoverColor: "datePickerHoverColor", datePickerActiveColor: "datePickerActiveColor", showSeconds: "showSeconds", timePickerItemSize: "timePickerItemSize" }, outputs: { timeChange: "timeChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"date-time-picker\" [ngClass]=\"{'flex-column':showTimeSelect && rangeMode}\">\r\n    <herum-date-picker *ngIf=\"showDatePicker\" [rangeMode]=\"rangeMode\" [minDate]=\"minDate\"\r\n        [hoverColor]=\"datePickerHoverColor\" [activeColor]=\"datePickerActiveColor\" [selectedDate]=\"selectedDate\"\r\n        (dateChange)=\"_dateChange($event)\"></herum-date-picker>\r\n\r\n    <herum-time-picker *ngIf=\"showTimePicker\" [ngClass]=\"{'me-5':showDatePicker}\" [selectedTime]=\"selectedTime\"\r\n        [showSeconds]=\"showSeconds\" [itemSize]=\"timePickerItemSize\" [hoverColor]=\"timePickerHoverColor\"\r\n        [activeColor]=\"timePickerActiveColor\" (timeChange)=\"_timeChange($event)\"></herum-time-picker>\r\n</div>", styles: [":host{--width-date-picker: 320px;--height-time-picker: 325px}.date-time-picker{display:flex;justify-content:center}herum-date-picker{width:var(--width-date-picker)}herum-time-picker{height:var(--height-time-picker)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HerumDatePickerComponent, selector: "herum-date-picker", inputs: ["activeColor", "hoverColor", "minDate", "rangeMode", "selectedDate"], outputs: ["dateChange"] }, { kind: "component", type: i2.HerumTimePickerComponent, selector: "herum-time-picker", inputs: ["activeColor", "hoverColor", "itemSize", "selectedTime", "showSeconds"], outputs: ["timeChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimePickerComponent, decorators: [{
             type: Component,
@@ -712,6 +712,7 @@ const defaultFileIconPath = iconsFolderPath + 'generic-file.svg';
 const requiredFieldMessage = 'חובה לעלות קובץ';
 class HerumDropZoneComponent {
     environmentConfig;
+    utilsService;
     selectedFiles = [];
     placeholder = 'העלה או גרור לכאן קובץ';
     numberOfAllowedFiles = 1;
@@ -749,8 +750,9 @@ class HerumDropZoneComponent {
             message: `אין להעלות תמונות בגודל של מעל ${maxImageHeight} על ${maxImageWidth}`
         },
     ];
-    constructor(environmentConfig) {
+    constructor(environmentConfig, utilsService) {
         this.environmentConfig = environmentConfig;
+        this.utilsService = utilsService;
     }
     ngOnChanges(changes) {
         if (changes['selectedFiles'] && Array.isArray(this.selectedFiles))
@@ -863,7 +865,10 @@ class HerumDropZoneComponent {
         return filePath ? filePath : defaultFileIconPath;
     }
     get convertorMediaPath() {
-        return `${this.environmentConfig?.environment?.s3ServerPath}${this.environmentConfig?.buckets?.GeneralFiles}XMediaRecode.exe`;
+        return this.utilsService.getUrlFromFileData({
+            bucket: this.environmentConfig?.buckets?.GeneralFiles,
+            key: 'XMediaRecode.exe'
+        });
     }
     parseAllowedFileTypes(allowedFileTypes) {
         if (!allowedFileTypes || !allowedFileTypes?.length)
@@ -880,8 +885,8 @@ class HerumDropZoneComponent {
         }
         this.errorMessages = this.errorMessages.filter(errorMessage => errorMessage.message !== requiredFieldMessage);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDropZoneComponent, isStandalone: false, selector: "herum-drop-zone", inputs: { selectedFiles: "selectedFiles", placeholder: "placeholder", numberOfAllowedFiles: "numberOfAllowedFiles", allowedFileTypes: "allowedFileTypes", supportedFilesMimes: "supportedFilesMimes", supportedFilesTypes: "supportedFilesTypes", requiredField: "requiredField", directionPreview: "directionPreview", type: "type", grow: "grow", fillContainer: "fillContainer", uploadFileSvg: "uploadFileSvg", previewImageUrl: "previewImageUrl", allowToDeleteImage: "allowToDeleteImage" }, outputs: { filesDataEvent: "filesDataEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button class=\"dropzone\" type=\"button\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\">{{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-button\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone:focus-visible{outline:none}.dropzone:focus-visible .dropzone-content{border-color:var(--icons-color-light-1)}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent;padding:0}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-button{position:absolute;top:8px;left:8px;background:transparent;border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-button:hover{opacity:1}.preview-wrapper .image-container .remove-button .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }, { token: i1$2.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDropZoneComponent, isStandalone: false, selector: "herum-drop-zone", inputs: { selectedFiles: "selectedFiles", placeholder: "placeholder", numberOfAllowedFiles: "numberOfAllowedFiles", allowedFileTypes: "allowedFileTypes", supportedFilesMimes: "supportedFilesMimes", supportedFilesTypes: "supportedFilesTypes", requiredField: "requiredField", directionPreview: "directionPreview", type: "type", grow: "grow", fillContainer: "fillContainer", uploadFileSvg: "uploadFileSvg", previewImageUrl: "previewImageUrl", allowToDeleteImage: "allowToDeleteImage" }, outputs: { filesDataEvent: "filesDataEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button class=\"dropzone\" type=\"button\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\">{{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-button\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone:focus-visible{outline:none}.dropzone:focus-visible .dropzone-content{border-color:var(--icons-color-light-1)}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent;padding:0}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-button{position:absolute;top:8px;left:8px;background:transparent;border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-button:hover{opacity:1}.preview-wrapper .image-container .remove-button .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.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.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,
@@ -889,7 +894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }], propDecorators: { selectedFiles: [{
+                }] }, { type: i1$2.UtilsService }], propDecorators: { selectedFiles: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -945,15 +950,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             }] } });
 
 class HerumFilesViewerComponent {
-    environmentConfig;
+    utilsService;
     fileData;
     showDeleteFileButton = false;
     downloadFile = new EventEmitter();
     deleteFile = new EventEmitter();
     srcPath;
     fileType;
-    constructor(environmentConfig) {
-        this.environmentConfig = environmentConfig;
+    constructor(utilsService) {
+        this.utilsService = utilsService;
     }
     ngOnChanges(changes) {
         if (changes['fileData']?.currentValue) {
@@ -968,7 +973,7 @@ class HerumFilesViewerComponent {
             const type = this.fileData.type;
             const typeIndex = type?.includes('pdf') ? 1 : 0;
             this.fileType = type?.split("/")[typeIndex];
-            this.srcPath = this.environmentConfig?.environment?.s3ServerPath + this.fileData.bucket + "/" + this.fileData.key;
+            this.srcPath = this.utilsService.getUrlFromFileData(this.fileData) ?? '';
         }
     }
     _onDeleteFile() {
@@ -977,16 +982,13 @@ class HerumFilesViewerComponent {
     _downloadFile() {
         this.downloadFile.emit(this.fileData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerComponent, isStandalone: false, selector: "herum-files-viewer", inputs: { fileData: "fileData", showDeleteFileButton: "showDeleteFileButton" }, outputs: { downloadFile: "downloadFile", deleteFile: "deleteFile" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, deps: [{ token: i1$2.UtilsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumFilesViewerComponent, isStandalone: false, selector: "herum-files-viewer", inputs: { fileData: "fileData", showDeleteFileButton: "showDeleteFileButton" }, outputs: { downloadFile: "downloadFile", deleteFile: "deleteFile" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'herum-files-viewer', template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <div *ngIf=\"showDeleteFileButton\" class=\"overlay-container\">\r\n            <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <img [src]=\"srcPath\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"fileType!=='image'\">\r\n    <ng-container *ngTemplateOutlet=\"deleteFileButton\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deleteFileButton>\r\n    <button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n        <img src=\"assets/general/secondary-x.svg\" />\r\n    </button>\r\n</ng-template>", styles: [":host{display:flex;position:relative;min-height:0;flex:1 1 0}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container:hover .overlay-container{background-color:var(--dark-overlay);visibility:visible}.image-container{position:relative}.image-container .overlay-container{border-radius:var(--border-radius);width:100%;height:100%;position:absolute;visibility:hidden;transition:background-color .5s ease}.image-container img{height:100%;object-fit:contain;width:100%;border-radius:var(--border-radius)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [HERUM_SHARED_CONFIG_TOKEN]
-                }] }], propDecorators: { fileData: [{
+        }], ctorParameters: () => [{ type: i1$2.UtilsService }], propDecorators: { fileData: [{
                 type: Input
             }], showDeleteFileButton: [{
                 type: Input
@@ -1058,7 +1060,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 && 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" }] });
+    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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.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: i3.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.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,
@@ -1104,7 +1106,7 @@ class HerumMultiProgressBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumMultiProgressBarComponent, isStandalone: false, selector: "herum-multi-progress-bar", inputs: { progressBarsSections: "progressBarsSections" }, ngImport: i0, template: "<div class=\"sections-bars-container\">\r\n    <div class=\"progress-bars-container\" *ngFor=\"let section of progressBarsSections; let sectionIndex = index\"\r\n        [ngStyle]=\"{'width':(section.percentage + '%')}\">\r\n        <herum-progress-bar *ngFor=\"let progressBar of section.progressBars; let progressBarIndex = index\"\r\n            [color]=\"progressBar.color\" [percentage]=\"progressBar.value\" [borderRadius]=\"getBorderRadius(sectionIndex,progressBarIndex)\"\r\n            [ngStyle]=\"{'width':(progressBar.percentage + '%')}\"></herum-progress-bar>\r\n    </div>\r\n</div>", styles: [".sections-bars-container,.sections-bars-container .progress-bars-container{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumMultiProgressBarComponent, isStandalone: false, selector: "herum-multi-progress-bar", inputs: { progressBarsSections: "progressBarsSections" }, ngImport: i0, template: "<div class=\"sections-bars-container\">\r\n    <div class=\"progress-bars-container\" *ngFor=\"let section of progressBarsSections; let sectionIndex = index\"\r\n        [ngStyle]=\"{'width':(section.percentage + '%')}\">\r\n        <herum-progress-bar *ngFor=\"let progressBar of section.progressBars; let progressBarIndex = index\"\r\n            [color]=\"progressBar.color\" [percentage]=\"progressBar.value\" [borderRadius]=\"getBorderRadius(sectionIndex,progressBarIndex)\"\r\n            [ngStyle]=\"{'width':(progressBar.percentage + '%')}\"></herum-progress-bar>\r\n    </div>\r\n</div>", styles: [".sections-bars-container,.sections-bars-container .progress-bars-container{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiProgressBarComponent, decorators: [{
             type: Component,
@@ -1129,7 +1131,7 @@ class HerumNavigatorComponent {
         this.updatedItemIndex.emit(++currentItemIndex);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNavigatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumNavigatorComponent, isStandalone: false, selector: "herum-navigator", inputs: { isFirstItem: "isFirstItem", isLastItem: "isLastItem", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", isNextButtonDisable: "isNextButtonDisable", isBackButtonDisable: "isBackButtonDisable", currentItemIndex: "currentItemIndex" }, outputs: { updatedItemIndex: "updatedItemIndex" }, ngImport: i0, template: "<div class=\"buttons-container\">\r\n    <herum-button *ngIf=\"!isFirstItem\" [size]=\"'medium'\" [type]=\"'ghost'\" [disabled]=\"isBackButtonDisable\" id=\"prev\"\r\n        (click)=\"_onPreviousItem(currentItemIndex)\">\r\n        {{previousButtonText}}\r\n    </herum-button>\r\n\r\n    <herum-button *ngIf=\"!isLastItem\" [size]=\"'medium'\" [disabled]=\"isNextButtonDisable\" id=\"next\"\r\n        (click)=\"_onNextItem(currentItemIndex)\">\r\n        {{nextButtonText}}\r\n    </herum-button>\r\n</div>", styles: [".buttons-container{display:flex;gap:10px;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumNavigatorComponent, isStandalone: false, selector: "herum-navigator", inputs: { isFirstItem: "isFirstItem", isLastItem: "isLastItem", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", isNextButtonDisable: "isNextButtonDisable", isBackButtonDisable: "isBackButtonDisable", currentItemIndex: "currentItemIndex" }, outputs: { updatedItemIndex: "updatedItemIndex" }, ngImport: i0, template: "<div class=\"buttons-container\">\r\n    <herum-button *ngIf=\"!isFirstItem\" [size]=\"'medium'\" [type]=\"'ghost'\" [disabled]=\"isBackButtonDisable\" id=\"prev\"\r\n        (click)=\"_onPreviousItem(currentItemIndex)\">\r\n        {{previousButtonText}}\r\n    </herum-button>\r\n\r\n    <herum-button *ngIf=\"!isLastItem\" [size]=\"'medium'\" [disabled]=\"isNextButtonDisable\" id=\"next\"\r\n        (click)=\"_onNextItem(currentItemIndex)\">\r\n        {{nextButtonText}}\r\n    </herum-button>\r\n</div>", styles: [".buttons-container{display:flex;gap:10px;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HerumButtonComponent, selector: "herum-button", inputs: ["type", "color", "size", "roundedCorners", "disabled", "isLoading", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNavigatorComponent, decorators: [{
             type: Component,
@@ -1155,7 +1157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class HerumStepNavigatorComponent {
     steps;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumStepNavigatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumStepNavigatorComponent, isStandalone: false, selector: "herum-step-navigator", inputs: { steps: "steps" }, ngImport: i0, template: "<div class=\"steps\">\r\n    <div *ngFor=\"let step of steps\" class=\"stepper-item\"\r\n        [ngClass]=\"{'completed-step': step.status === 0, 'active-step': step.status === 1}\">\r\n        <herum-radio-button [options]=\"[{id:step.index, name:step.label}]\" [selectedOption]=\"step.index\"\r\n            [isBlocked]=\"true\" [type]=\"step.status === 0 ? 'completed' : step.status === 2 ? 'disabled' :'checked'\">\r\n        </herum-radio-button>\r\n    </div>\r\n</div>", styles: [".steps{display:flex;gap:8px;position:relative}.steps .stepper-item{margin-block-end:8px;width:168px}.steps .stepper-item ::ng-deep herum-radio-button .option-name{font-size:14px}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=disabled]{color:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=completed]{color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=checked]{color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-border{border-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-background{background-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .completed-background{background-color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-background{background:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-border{border-color:var(--disabled-border-color)}.steps .stepper-item:before{content:\"\";display:block;border:4px solid var(--disabled-border-color);border-radius:var(--border-radius);width:100%}.steps .stepper-item.completed-step:before{border-color:var(--icons-color)}.steps .stepper-item.active-step:before{border-color:var(--secondary-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.HerumRadioButtonComponent, selector: "herum-radio-button", inputs: ["options", "isValid", "errorMsg", "isVertical", "isBlocked", "type", "selectedOption", "additionalOptionsText", "showAdditionalOptionsText", "secondarySelectedOption"], outputs: ["selectOptionEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumStepNavigatorComponent, isStandalone: false, selector: "herum-step-navigator", inputs: { steps: "steps" }, ngImport: i0, template: "<div class=\"steps\">\r\n    <div *ngFor=\"let step of steps\" class=\"stepper-item\"\r\n        [ngClass]=\"{'completed-step': step.status === 0, 'active-step': step.status === 1}\">\r\n        <herum-radio-button [options]=\"[{id:step.index, name:step.label}]\" [selectedOption]=\"step.index\"\r\n            [isBlocked]=\"true\" [type]=\"step.status === 0 ? 'completed' : step.status === 2 ? 'disabled' :'checked'\">\r\n        </herum-radio-button>\r\n    </div>\r\n</div>", styles: [".steps{display:flex;gap:8px;position:relative}.steps .stepper-item{margin-block-end:8px;width:168px}.steps .stepper-item ::ng-deep herum-radio-button .option-name{font-size:14px}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=disabled]{color:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=completed]{color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .option-name[type=checked]{color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-border{border-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .checked-background{background-color:var(--secondary-color)}.steps .stepper-item ::ng-deep herum-radio-button .completed-background{background-color:var(--icons-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-background{background:var(--disabled-border-color)}.steps .stepper-item ::ng-deep herum-radio-button .disabled-border{border-color:var(--disabled-border-color)}.steps .stepper-item:before{content:\"\";display:block;border:4px solid var(--disabled-border-color);border-radius:var(--border-radius);width:100%}.steps .stepper-item.completed-step:before{border-color:var(--icons-color)}.steps .stepper-item.active-step:before{border-color:var(--secondary-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.HerumRadioButtonComponent, selector: "herum-radio-button", inputs: ["options", "isValid", "errorMsg", "isVertical", "isBlocked", "type", "selectedOption", "additionalOptionsText", "showAdditionalOptionsText", "secondarySelectedOption"], outputs: ["selectOptionEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumStepNavigatorComponent, decorators: [{
             type: Component,
@@ -1263,7 +1265,7 @@ class HerumTimeSelectComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTimeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTimeSelectComponent, isStandalone: false, selector: "herum-time-select", inputs: { showSeconds: "showSeconds", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder", hoursPlaceholder: "hoursPlaceholder", selectedTime: "selectedTime", label: "label" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <label class=\"input-title\">{{label}}</label>\r\n\r\n    <div class=\"time-container\">\r\n        <ng-container *ngIf=\"showSeconds\">\r\n            <herum-select [options]=\"seconds\" [selectedOption]=\"selectedSecond\" size='min'\r\n                [placeholder]=\"secondsPlaceholder\" [label]=\"start\"\r\n                (selectedOptionEmitter)=\"_selectedSecondOptionChange($event)\"></herum-select>\r\n\r\n            <span class=\"seperator\">:</span>\r\n        </ng-container>\r\n\r\n        <herum-select [options]=\"minutes\" size='min' [selectedOption]=\"selectedMinute\"\r\n            [placeholder]=\"minutesPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedMinuteOptionChange($event)\"></herum-select>\r\n\r\n        <span class=\"seperator\">:</span>\r\n\r\n        <herum-select [options]=\"hours\" size='min' [selectedOption]=\"selectedHour\" [placeholder]=\"hoursPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedHourOptionChange($event)\"></herum-select>\r\n    </div>\r\n</div>", styles: [".time-container{display:flex;align-items:center;justify-content:center;gap:8px}label{font-size:var(--standard-font-size)}.seperator{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTimeSelectComponent, isStandalone: false, selector: "herum-time-select", inputs: { showSeconds: "showSeconds", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder", hoursPlaceholder: "hoursPlaceholder", selectedTime: "selectedTime", label: "label" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <label class=\"input-title\">{{label}}</label>\r\n\r\n    <div class=\"time-container\">\r\n        <ng-container *ngIf=\"showSeconds\">\r\n            <herum-select [options]=\"seconds\" [selectedOption]=\"selectedSecond\" size='min'\r\n                [placeholder]=\"secondsPlaceholder\" [label]=\"start\"\r\n                (selectedOptionEmitter)=\"_selectedSecondOptionChange($event)\"></herum-select>\r\n\r\n            <span class=\"seperator\">:</span>\r\n        </ng-container>\r\n\r\n        <herum-select [options]=\"minutes\" size='min' [selectedOption]=\"selectedMinute\"\r\n            [placeholder]=\"minutesPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedMinuteOptionChange($event)\"></herum-select>\r\n\r\n        <span class=\"seperator\">:</span>\r\n\r\n        <herum-select [options]=\"hours\" size='min' [selectedOption]=\"selectedHour\" [placeholder]=\"hoursPlaceholder\"\r\n            (selectedOptionEmitter)=\"_selectedHourOptionChange($event)\"></herum-select>\r\n    </div>\r\n</div>", styles: [".time-container{display:flex;align-items:center;justify-content:center;gap:8px}label{font-size:var(--standard-font-size)}.seperator{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HerumSelectComponent, selector: "herum-select", inputs: ["options", "displayBy", "placeholder", "selectedOption", "disabled", "isDropDownInPositionFixed", "iconPath", "isAutoComplete", "title", "size", "displayLoadingMode", "isLoadingInput", "dropDownDirection", "filterPlaceholder", "debounceTime"], outputs: ["selectedOptionEmitter", "filterTextEmitter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTimeSelectComponent, decorators: [{
             type: Component,
@@ -1303,7 +1305,7 @@ class HerumUserProfileComponent {
         return getAssignmentStateDisplayName(this.userData.assignments[0].assignmentMetadata.state);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProfileComponent, isStandalone: false, selector: "herum-user-profile", inputs: { userData: "userData", mode: "mode", titleSize: "titleSize", imageSize: "imageSize" }, ngImport: i0, template: "<div class=\"profile-top-conatiner\" [ngClass]=\"mode\" *ngIf=\"userData\">\r\n    <user-profile-image [user]=\"userData\" [imageSize]=\"imageSize\" [mode]=\"mode\"></user-profile-image>\r\n\r\n    <div class=\"profile-name-container\">\r\n        <p\r\n            [ngClass]=\"{'section-header-title': titleSize === 'medium','profile-title': titleSize === 'big','section-title': titleSize === 'small'}\">\r\n            {{userFullName}}\r\n\r\n            <herum-chip *ngIf=\"userData.assignments?.length > 0\"\r\n                [type]=\"userData.assignments[0].assignmentMetadata?.state == 2 ? 'negative':'positive'\"\r\n                [title]=\"assignmentStateDisplayName\" [isDeleteButtonNeeded]=\"false\"></herum-chip>\r\n        </p>\r\n        <p class=\"profile-subtitle\">{{fullHierarchyName}}</p>\r\n        <p class=\"profile-description\" *ngIf=\"mode=='horizontal'\">{{userData.profession}}</p>\r\n    </div>\r\n</div>", styles: [".profile-top-conatiner{display:flex;gap:24px;align-items:center;flex-direction:column;text-align:center}.profile-top-conatiner .profile-title{font-size:22px;font-weight:700;margin:0;width:fit-content}.profile-top-conatiner .profile-subtitle{font-size:14px;margin:0;width:fit-content}.vertical{flex-direction:column}.vertical .profile-title{width:unset;display:flex;justify-content:center;align-items:center;gap:12px}.vertical .profile-subtitle{width:unset}.horizontal{flex-direction:row;padding-bottom:8px}.horizontal .profile-subtitle{width:fit-content}.horizontal .profile-description{width:fit-content;color:gray}.profile-image-for-fallback{display:none;width:0px;height:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.HerumChipComponent, selector: "herum-chip", inputs: ["title", "isDeleteButtonNeeded", "isActive", "isMenuMode", "type"], outputs: ["remove", "chipsActivation"] }, { kind: "component", type: i2$1.UserProfileImageComponent, selector: "user-profile-image", inputs: ["imageSize", "mode", "user", "isLoadingUser", "isUserClickAble"], outputs: ["userClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProfileComponent, isStandalone: false, selector: "herum-user-profile", inputs: { userData: "userData", mode: "mode", titleSize: "titleSize", imageSize: "imageSize" }, ngImport: i0, template: "<div class=\"profile-top-conatiner\" [ngClass]=\"mode\" *ngIf=\"userData\">\r\n    <user-profile-image [user]=\"userData\" [imageSize]=\"imageSize\" [mode]=\"mode\"></user-profile-image>\r\n\r\n    <div class=\"profile-name-container\">\r\n        <p\r\n            [ngClass]=\"{'section-header-title': titleSize === 'medium','profile-title': titleSize === 'big','section-title': titleSize === 'small'}\">\r\n            {{userFullName}}\r\n\r\n            <herum-chip *ngIf=\"userData.assignments?.length > 0\"\r\n                [type]=\"userData.assignments[0].assignmentMetadata?.state == 2 ? 'negative':'positive'\"\r\n                [title]=\"assignmentStateDisplayName\" [isDeleteButtonNeeded]=\"false\"></herum-chip>\r\n        </p>\r\n        <p class=\"profile-subtitle\">{{fullHierarchyName}}</p>\r\n        <p class=\"profile-description\" *ngIf=\"mode=='horizontal'\">{{userData.profession}}</p>\r\n    </div>\r\n</div>", styles: [".profile-top-conatiner{display:flex;gap:24px;align-items:center;flex-direction:column;text-align:center}.profile-top-conatiner .profile-title{font-size:22px;font-weight:700;margin:0;width:fit-content}.profile-top-conatiner .profile-subtitle{font-size:14px;margin:0;width:fit-content}.vertical{flex-direction:column}.vertical .profile-title{width:unset;display:flex;justify-content:center;align-items:center;gap:12px}.vertical .profile-subtitle{width:unset}.horizontal{flex-direction:row;padding-bottom:8px}.horizontal .profile-subtitle{width:fit-content}.horizontal .profile-description{width:fit-content;color:gray}.profile-image-for-fallback{display:none;width:0px;height:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HerumChipComponent, selector: "herum-chip", inputs: ["title", "isDeleteButtonNeeded", "isActive", "isMenuMode", "type"], outputs: ["remove", "chipsActivation"] }, { kind: "component", type: i2.UserProfileImageComponent, selector: "user-profile-image", inputs: ["imageSize", "mode", "user", "isLoadingUser", "isUserClickAble"], outputs: ["userClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProfileComponent, decorators: [{
             type: Component,
@@ -1329,7 +1331,7 @@ class HerumUserProgressComponent {
             'כשירות טובה מאוד' : 'כשירות מושלמת! כל הכבוד!';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProgressComponent, isStandalone: false, selector: "app-herum-user-progress", inputs: { title: "title", percentage: "percentage", type: "type" }, ngImport: i0, template: "<div class=\"user-progress-container\" [ngClass]=\"{'p-0':type == 'solid'}\">\r\n    <div class=\"mb-2 row\">\r\n        <div class=\"col-7 section-title\">{{ title }}</div>\r\n        <div class=\"col-5 section-title left\">{{ percentageLabel }}</div>\r\n    </div>\r\n\r\n    <herum-progress-bar [percentage]=\"percentage\" [type]=\"'solid'\"></herum-progress-bar>\r\n</div>", styles: [".user-progress-container{padding:10px;gap:10px;display:flex;flex-direction:column}.left{text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUserProgressComponent, isStandalone: false, selector: "app-herum-user-progress", inputs: { title: "title", percentage: "percentage", type: "type" }, ngImport: i0, template: "<div class=\"user-progress-container\" [ngClass]=\"{'p-0':type == 'solid'}\">\r\n    <div class=\"mb-2 row\">\r\n        <div class=\"col-7 section-title\">{{ title }}</div>\r\n        <div class=\"col-5 section-title left\">{{ percentageLabel }}</div>\r\n    </div>\r\n\r\n    <herum-progress-bar [percentage]=\"percentage\" [type]=\"'solid'\"></herum-progress-bar>\r\n</div>", styles: [".user-progress-container{padding:10px;gap:10px;display:flex;flex-direction:column}.left{text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProgressComponent, decorators: [{
             type: Component,
@@ -1345,7 +1347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class KeyValueListComponent {
     items = [];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: KeyValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: KeyValueListComponent, isStandalone: false, selector: "key-value-list", inputs: { items: "items" }, ngImport: i0, template: "\r\n<div class=\"item-contianer mb-1\" *ngFor=\"let item of items\">\r\n    <div *ngIf=\"item.iconPath\" class=\"col-1\">\r\n        <img *ngIf=\"item.iconPath\" [src]=\"item.iconPath\">\r\n    </div>\r\n    <div class=\"key col-4 bold\">{{item.key}}</div>\r\n    <div class=\"value col-7 truncate\" [matTooltip]=\"item.value\">{{item.value}}</div>\r\n</div>", styles: [".item-contianer{display:flex;gap:8px}.bold{font-weight:700}img{width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: KeyValueListComponent, isStandalone: false, selector: "key-value-list", inputs: { items: "items" }, ngImport: i0, template: "\r\n<div class=\"item-contianer mb-1\" *ngFor=\"let item of items\">\r\n    <div *ngIf=\"item.iconPath\" class=\"col-1\">\r\n        <img *ngIf=\"item.iconPath\" [src]=\"item.iconPath\">\r\n    </div>\r\n    <div class=\"key col-4 bold\">{{item.key}}</div>\r\n    <div class=\"value col-7 truncate\" [matTooltip]=\"item.value\">{{item.value}}</div>\r\n</div>", styles: [".item-contianer{display:flex;gap:8px}.bold{font-weight:700}img{width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: KeyValueListComponent, decorators: [{
             type: Component,
@@ -1373,7 +1375,7 @@ class ProgressesOverViewComponent {
     progressOverViewDirection = 'row';
     containerProgressesOverViewDirection = 'column';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProgressesOverViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ProgressesOverViewComponent, isStandalone: false, selector: "progresses-over-view", inputs: { titleSize: "titleSize", circularProgressSize: "circularProgressSize", progressesOverView: "progressesOverView", progressOverViewDirection: "progressOverViewDirection", containerProgressesOverViewDirection: "containerProgressesOverViewDirection" }, ngImport: i0, template: "<div class=\"layout\">\r\n    <div class=\"progresses-container\"\r\n        [ngClass]=\"{'row-progresses-container':containerProgressesOverViewDirection === 'row'}\">\r\n        <div class=\"progress-over-view\" [ngClass]=\"{'flex-direction-column':progressOverViewDirection === 'column'}\"\r\n            *ngFor=\"let progressOverView of progressesOverView\">\r\n            <herum-circular-progress-bar [fill]=\"false\" [showPercentage]=\"progressOverView.showPercentage\"\r\n                [percentage]=\"progressOverView.progress\" [displayedContent]=\"progressOverView.displayedContent\"\r\n                [displayedContentColorMatchesGradientColor]=\"progressOverView.displayedContentColorMatchesGradientColor\"\r\n                [firstGradient]=\"progressOverView.firstGradient\" [size]=\"circularProgressSize\">\r\n            </herum-circular-progress-bar>\r\n\r\n            <div class=\"progress-labels\" [ngClass]=\"{'align-items-center':progressOverViewDirection === 'column'}\">\r\n                <h2 class=\"section-header-title m-0 p-0\" [ngClass]=\"[titleSize]\">\r\n                    {{ progressOverView.title }}\r\n                </h2>\r\n\r\n                <span *ngIf=\"progressOverView.description\" class=\"w-100 text-align-right\">\r\n                    {{ progressOverView.description }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".progresses-container.row-progresses-container{flex-direction:row;justify-content:space-between}.progresses-container{display:flex;flex-direction:column}.progresses-container .progress-over-view{display:flex;align-items:center;gap:var(--standard-medium-padding)}.progresses-container .progress-over-view .progress-labels{display:flex;flex-direction:column;gap:4px}.flex-direction-column{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.HerumCircularProgressBarComponent, selector: "herum-circular-progress-bar", inputs: ["percentage", "fill", "size", "firstGradient", "fillColor", "showPercentage", "displayedContent", "displayedContentColorMatchesGradientColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ProgressesOverViewComponent, isStandalone: false, selector: "progresses-over-view", inputs: { titleSize: "titleSize", circularProgressSize: "circularProgressSize", progressesOverView: "progressesOverView", progressOverViewDirection: "progressOverViewDirection", containerProgressesOverViewDirection: "containerProgressesOverViewDirection" }, ngImport: i0, template: "<div class=\"layout\">\r\n    <div class=\"progresses-container\"\r\n        [ngClass]=\"{'row-progresses-container':containerProgressesOverViewDirection === 'row'}\">\r\n        <div class=\"progress-over-view\" [ngClass]=\"{'flex-direction-column':progressOverViewDirection === 'column'}\"\r\n            *ngFor=\"let progressOverView of progressesOverView\">\r\n            <herum-circular-progress-bar [fill]=\"false\" [showPercentage]=\"progressOverView.showPercentage\"\r\n                [percentage]=\"progressOverView.progress\" [displayedContent]=\"progressOverView.displayedContent\"\r\n                [displayedContentColorMatchesGradientColor]=\"progressOverView.displayedContentColorMatchesGradientColor\"\r\n                [firstGradient]=\"progressOverView.firstGradient\" [size]=\"circularProgressSize\">\r\n            </herum-circular-progress-bar>\r\n\r\n            <div class=\"progress-labels\" [ngClass]=\"{'align-items-center':progressOverViewDirection === 'column'}\">\r\n                <h2 class=\"section-header-title m-0 p-0\" [ngClass]=\"[titleSize]\">\r\n                    {{ progressOverView.title }}\r\n                </h2>\r\n\r\n                <span *ngIf=\"progressOverView.description\" class=\"w-100 text-align-right\">\r\n                    {{ progressOverView.description }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".progresses-container.row-progresses-container{flex-direction:row;justify-content:space-between}.progresses-container{display:flex;flex-direction:column}.progresses-container .progress-over-view{display:flex;align-items:center;gap:var(--standard-medium-padding)}.progresses-container .progress-over-view .progress-labels{display:flex;flex-direction:column;gap:4px}.flex-direction-column{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HerumCircularProgressBarComponent, selector: "herum-circular-progress-bar", inputs: ["percentage", "fill", "size", "firstGradient", "fillColor", "showPercentage", "displayedContent", "displayedContentColorMatchesGradientColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProgressesOverViewComponent, decorators: [{
             type: Component,