herum-shared 0.1.25

package/fesm2022/herum-shared-molecules.mjs

@@ -0,0 +1,1530 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, ViewChild, Output, Input, Optional, Self, forwardRef, Inject, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i5 from 'herum-shared/pipes';
+import { PipesModule } from 'herum-shared/pipes';
+import { openClose } from 'herum-shared/animations';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i3 from '@angular/cdk/bidi';
+import * as i2$1 from 'herum-shared/atoms';
+import { AtomsModule } from 'herum-shared/atoms';
+import * as i1$2 from 'herum-shared/services';
+import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
+import { regexExpressions, startEndDateError, minDateError, formatError, timestampError, svgsStrings, resourcesFilesSuffixes, filesSuffixes, anySubFileTypeWildCard, system } from 'herum-shared/constants';
+import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
+import { isTruncatedTitleElement, getAssignmentStateDisplayName } from 'herum-shared/utils';
+import * as i2$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { StepStatus } from 'herum-shared/herum-types';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSliderModule } from '@angular/material/slider';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+class HerumActiveLinkComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveLinkComponent, isStandalone: false, selector: "app-herum-active-link", ngImport: i0, template: "<p>herum-active-link works!</p>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveLinkComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'app-herum-active-link', template: "<p>herum-active-link works!</p>\r\n" }]
+        }], ctorParameters: () => [] });
+
+class HerumActiveMenuComponent {
+    elementRef;
+    changeDetectorRef;
+    useIcons = true;
+    view = "wide";
+    activeColor = "";
+    activeTextColor = "";
+    secondaryTextColor = "";
+    menuItems = [];
+    selectedItem;
+    selectById = false;
+    isBlock = false;
+    dragEvent;
+    selectionIndex = new EventEmitter();
+    tabsContainer;
+    tabsElement;
+    onResize() {
+        this.setTabElementWidth();
+    }
+    currentItemIndex = 0;
+    hostElement;
+    constructor(elementRef, changeDetectorRef) {
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.hostElement = this.elementRef.nativeElement;
+    }
+    ngOnChanges(changes) {
+        if (changes['activeColor']?.currentValue)
+            this.setCSSVariable('--active-menu-background', this.activeColor);
+        if (changes['activeTextColor']?.currentValue)
+            this.setCSSVariable('--active-menu-text-color', this.activeTextColor);
+        if (changes['secondaryTextColor']?.currentValue)
+            this.setCSSVariable('--active-menu-secondary-text-color', this.secondaryTextColor);
+        if (changes['menuItems']?.currentValue.length) {
+            this.changeDetectorRef.detectChanges();
+            this.setTabElementWidth();
+        }
+        if (changes['dragEvent']?.currentValue)
+            this.setTabElementWidth();
+    }
+    setCSSVariable(variable, value) {
+        this.hostElement.style.setProperty(variable, value);
+    }
+    ngAfterViewInit() {
+        this.setTabElementWidth();
+    }
+    _onSelectTab(selection) {
+        this.currentItemIndex = selection;
+        if (!this.isBlock)
+            this.selectionIndex.emit(selection);
+    }
+    setTabElementWidth() {
+        if (!this.tabsElement?.length || !this.menuItems.length)
+            return;
+        const tabsContainerWidth = this.tabsContainer.nativeElement.clientWidth;
+        this.tabsElement.forEach(tab => {
+            const width = (tabsContainerWidth / this.menuItems.length) > 150 ? '150px' : `${tabsContainerWidth / this.menuItems.length}px`;
+            tab.nativeElement.style.width = width;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveMenuComponent, isStandalone: false, selector: "herum-active-menu", inputs: { useIcons: "useIcons", view: "view", activeColor: "activeColor", activeTextColor: "activeTextColor", secondaryTextColor: "secondaryTextColor", menuItems: "menuItems", selectedItem: "selectedItem", selectById: "selectById", isBlock: "isBlock", dragEvent: "dragEvent" }, outputs: { selectionIndex: "selectionIndex" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true }, { propertyName: "tabsElement", predicate: ["tabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:12px;justify-content:flex-start;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-active-menu', template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:12px;justify-content:flex-start;display:flex}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { useIcons: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], activeColor: [{
+                type: Input
+            }], activeTextColor: [{
+                type: Input
+            }], secondaryTextColor: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], selectedItem: [{
+                type: Input
+            }], selectById: [{
+                type: Input
+            }], isBlock: [{
+                type: Input
+            }], dragEvent: [{
+                type: Input
+            }], selectionIndex: [{
+                type: Output
+            }], tabsContainer: [{
+                type: ViewChild,
+                args: ['tabsContainer']
+            }], tabsElement: [{
+                type: ViewChildren,
+                args: ['tabs']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class HerumAutocompleteComponent {
+    ngControl;
+    options = [];
+    displayBy = 'name';
+    subTitleBy;
+    placeholder = 'הקלד/י לחיפוש...';
+    noResultsText = 'אויש, נראה שאין תוצאות מתאימות...';
+    disabled = false;
+    isLoadingInput = false;
+    debounceTime = 0;
+    selectedOption = null;
+    isBlurred = false;
+    filterTextEmitter = new EventEmitter();
+    selectedOptionEmitter = new EventEmitter();
+    filterInput;
+    containerRef;
+    onWindowClick(event) {
+        if (!this.isDropdownOpen)
+            return;
+        const target = event.target;
+        const host = this.containerRef?.nativeElement;
+        if (host && !host.contains(target))
+            this.isDropdownOpen = false;
+    }
+    currentSearchedItem = '';
+    filteredOptions = [];
+    isDropdownOpen = false;
+    isWaitingForResults = false;
+    skeletonRows = [1, 2, 3, 4, 5];
+    skeletonWidths = [200, 180, 160, 180, 170];
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    ngOnChanges(changes) {
+        if (changes['options']) {
+            this.filterOptions(this.currentSearchedItem);
+            this.isWaitingForResults = false;
+        }
+        if (changes['selectedOption'] && this.selectedOption) {
+            const displayText = this.selectedOption?.[this.displayBy]?.toString() ?? '';
+            this.currentSearchedItem = displayText;
+            this.onChange(displayText);
+            if (this.filterInput)
+                this.filterInput.inputValue = displayText;
+        }
+    }
+    _onInputClick(event) {
+        event.stopPropagation();
+        if (!this.disabled)
+            this.isDropdownOpen = true;
+    }
+    _inputChange(rawText) {
+        if (!this.disabled)
+            this.isDropdownOpen = true;
+        const text = !!rawText ? rawText.toString().trim() : '';
+        this.currentSearchedItem = text;
+        this.isWaitingForResults = true;
+        this.onChange(this.currentSearchedItem);
+        this.filterTextEmitter.emit(text);
+        this.filterOptions(text);
+    }
+    _onSelectOption(option) {
+        const selectedDisplayText = (option?.[this.displayBy] ?? '').toString();
+        this.currentSearchedItem = '';
+        this.onChange(this.currentSearchedItem);
+        this.onTouched();
+        this.selectedOptionEmitter.emit(option);
+        this.isDropdownOpen = false;
+        if (this.filterInput)
+            this.filterInput.inputValue = selectedDisplayText;
+    }
+    _getSkeletonWidth(index) {
+        return this.skeletonWidths[index % this.skeletonWidths.length];
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.currentSearchedItem = value || '';
+        this.filterOptions(this.currentSearchedItem);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    filterOptions(text) {
+        const options = Array.isArray(this.options) ? this.options : [];
+        if (!options?.length) {
+            this.filteredOptions = [];
+            return;
+        }
+        if (!text) {
+            this.filteredOptions = [...options];
+            return;
+        }
+        const normalizedSearchText = (text || '').toString().toLocaleLowerCase();
+        this.filteredOptions = options.filter(option => {
+            const optionDisplayValue = option[this.displayBy];
+            if (!optionDisplayValue)
+                return false;
+            const normalizedOptionText = optionDisplayValue.toString().toLowerCase();
+            return normalizedOptionText.includes(normalizedSearchText);
+        });
+    }
+    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.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-autocomplete', animations: [openClose], template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { options: [{
+                type: Input
+            }], displayBy: [{
+                type: Input
+            }], subTitleBy: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], noResultsText: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isLoadingInput: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], selectedOption: [{
+                type: Input
+            }], isBlurred: [{
+                type: Input
+            }], filterTextEmitter: [{
+                type: Output
+            }], selectedOptionEmitter: [{
+                type: Output
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container']
+            }], onWindowClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }] } });
+
+const CUSTOM_CLOSED_LIST_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumClosedListMultiSelectComponent),
+    multi: true,
+};
+class HerumClosedListMultiSelectComponent {
+    commonGraphqlRequestsService;
+    closedListName;
+    placeholder = 'בחר/י...';
+    disabled = false;
+    isDropDownInPositionFixed = false;
+    size = 'default';
+    dropDownDirection = 'downwards';
+    selectedClosedListOptionalValues;
+    selectedClosedListValueEmitter = new EventEmitter();
+    closedListValues = [];
+    constructor(commonGraphqlRequestsService) {
+        this.commonGraphqlRequestsService = commonGraphqlRequestsService;
+    }
+    ngOnChanges(changes) {
+        if (changes['closedListName']?.currentValue)
+            this.setClosedListValues();
+    }
+    setClosedListValues() {
+        this.commonGraphqlRequestsService.getClosedLists([this.closedListName])
+            .subscribe((closedList) => {
+            this.closedListValues = closedList[0].optionalValues?.map(optionalValue => ({ name: optionalValue.displayName, id: optionalValue.id }));
+            this.syncIdsBetweenSelectedValuesToValues();
+        });
+    }
+    _selectedOptionsEmitter(selectedClosedListValue) {
+        this.selectedClosedListValueEmitter.emit(selectedClosedListValue);
+        this.onChange(selectedClosedListValue);
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(selectedClosedListOptionalValues) {
+        if (!selectedClosedListOptionalValues)
+            return;
+        this.selectedClosedListOptionalValues = selectedClosedListOptionalValues;
+        this.syncIdsBetweenSelectedValuesToValues();
+    }
+    syncIdsBetweenSelectedValuesToValues() {
+        if (!this.closedListValues?.length || !this.selectedClosedListOptionalValues)
+            return;
+        this.closedListValues.forEach(closedListValue => {
+            const selectedClosedListOptionalValue = this.selectedClosedListOptionalValues.find(section => section.name === closedListValue.name);
+            if (selectedClosedListOptionalValue)
+                closedListValue.id = selectedClosedListOptionalValue.id;
+        });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-closed-list-multi-select', providers: [CUSTOM_CLOSED_LIST_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], template: "<herum-multi-select [placeholder]=\"placeholder\" [options]=\"closedListValues\"\r\n    [selectedOptionsInput]=\"selectedClosedListOptionalValues\" [disabled]=\"disabled\"\r\n    [isDropDownInPositionFixed]=\"isDropDownInPositionFixed\" [size]=\"size\" [dropDownDirection]=\"dropDownDirection\"\r\n    (selectedOptions)=\"_selectedOptionsEmitter($event)\">\r\n</herum-multi-select>" }]
+        }], ctorParameters: () => [{ type: i1$2.CommonGraphqlRequestsService }], propDecorators: { closedListName: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isDropDownInPositionFixed: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], dropDownDirection: [{
+                type: Input
+            }], selectedClosedListOptionalValues: [{
+                type: Input
+            }], selectedClosedListValueEmitter: [{
+                type: Output
+            }] } });
+
+const CUSTOM_CLOSED_LIST_SELECT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumClosedListSelectComponent),
+    multi: true,
+};
+class HerumClosedListSelectComponent {
+    commonGraphqlRequestsService;
+    closedListName;
+    placeholder = 'בחר/י...';
+    closedListOptionalValueName;
+    disabled = false;
+    isDropDownInPositionFixed = false;
+    iconPath = '';
+    isAutoComplete = false;
+    title = '';
+    size = 'default';
+    displayLoadingMode = false;
+    isLoadingInput = false;
+    dropDownDirection = 'downwards';
+    filterPlaceholder = "חפש/י...";
+    selectedClosedListValueEmitter = new EventEmitter();
+    filterTextEmitter = new EventEmitter();
+    closedListValues = [];
+    selectedClosedListOptionalValue;
+    constructor(commonGraphqlRequestsService) {
+        this.commonGraphqlRequestsService = commonGraphqlRequestsService;
+    }
+    ngOnChanges(changes) {
+        if (changes['closedListName']?.currentValue)
+            this.setClosedListValues();
+        if (changes['closedListOptionalValueName']?.currentValue)
+            this.handleClosedListValueId();
+    }
+    setClosedListValues() {
+        this.commonGraphqlRequestsService.getClosedLists([this.closedListName])
+            .subscribe((closedList) => {
+            this.closedListValues = closedList[0].optionalValues?.map(optionalValue => ({ name: optionalValue.displayName, id: optionalValue.id }));
+            this.handleClosedListValueId();
+        });
+    }
+    handleClosedListValueId() {
+        if (!this.closedListOptionalValueName) {
+            this.selectedClosedListOptionalValue = undefined;
+            return;
+        }
+        this.selectedClosedListOptionalValue = { name: this.closedListOptionalValueName, id: this.closedListValues?.find(closedListValue => closedListValue.name === this.closedListOptionalValueName)?.id };
+    }
+    _selectedOptionEmitter(selectedClosedListValue) {
+        this.selectedClosedListValueEmitter.emit(selectedClosedListValue);
+        this.onChange(selectedClosedListValue);
+    }
+    _filterTextEmitter(text) {
+        this.filterTextEmitter.emit(text);
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(closedListOptionalValueName) {
+        if (!closedListOptionalValueName)
+            return;
+        this.closedListOptionalValueName = closedListOptionalValueName;
+        this.handleClosedListValueId();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumClosedListSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-closed-list-select', providers: [CUSTOM_CLOSED_LIST_SELECT_CONTROL_VALUE_ACCESSOR], template: "<herum-select\r\n[options]=\"closedListValues\"\r\n[placeholder]=\"placeholder\"\r\n[selectedOption]=\"selectedClosedListOptionalValue\"\r\n[disabled]=\"disabled\"\r\n[isDropDownInPositionFixed]=\"isDropDownInPositionFixed\"\r\n[iconPath]=\"iconPath\"\r\n[isAutoComplete]=\"isAutoComplete\"\r\n[title]=\"title\"\r\n[size]=\"size\"\r\n[displayLoadingMode]=\"displayLoadingMode\"\r\n[isLoadingInput]=\"isLoadingInput\"\r\n[dropDownDirection]=\"dropDownDirection\"\r\n[filterPlaceholder]=\"filterPlaceholder\"\r\n(selectedOptionEmitter)=\"_selectedOptionEmitter($event)\"\r\n(filterTextEmitter)=\"_filterTextEmitter($event)\"\r\n>\r\n</herum-select>" }]
+        }], ctorParameters: () => [{ type: i1$2.CommonGraphqlRequestsService }], propDecorators: { closedListName: [{
+                type: Input,
+                args: ['formControlName']
+            }], placeholder: [{
+                type: Input
+            }], closedListOptionalValueName: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isDropDownInPositionFixed: [{
+                type: Input
+            }], iconPath: [{
+                type: Input
+            }], isAutoComplete: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], displayLoadingMode: [{
+                type: Input
+            }], isLoadingInput: [{
+                type: Input
+            }], dropDownDirection: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], selectedClosedListValueEmitter: [{
+                type: Output
+            }], filterTextEmitter: [{
+                type: Output
+            }] } });
+
+class HerumDateTimeInputComponent {
+    placeholder = '';
+    inputValue = '';
+    minDate;
+    showSeconds;
+    rangeMode;
+    dateChange = new EventEmitter();
+    timeChange = new EventEmitter();
+    disableChange = new EventEmitter();
+    errorMessage = '';
+    isValid = true;
+    debounceTime = 300;
+    ltrMode = true;
+    ngOnChanges(changes) {
+        if (changes['inputValue']?.currentValue)
+            this._valueChange(this.inputValue);
+    }
+    _valueChange(dateString) {
+        this.isValid = true;
+        if (this.rangeMode) {
+            this.handleDateRangeTimeRangeMode(dateString);
+            return;
+        }
+        this.handleDateTimeMode(dateString);
+    }
+    handleDateRangeTimeRangeMode(dateString) {
+        const pattern = this.showSeconds ? regexExpressions.fullRangeDateTime : regexExpressions.rangeDateTimeWithoutSeconds;
+        this.isValid = this.patternValidation(dateString, pattern);
+        if (!this.isValid) {
+            this.disableChange.emit(true);
+            return;
+        }
+        const splittedDate = dateString.split('-');
+        const startDateString = splittedDate[0];
+        const endDateString = splittedDate[1];
+        this.handleDateRangeTimeRangeValidations(startDateString, endDateString);
+        if (!this.isValid) {
+            this.disableChange.emit(true);
+            return;
+        }
+        const startDate = this.createDateTime(startDateString).date;
+        const endDate = this.createDateTime(endDateString).date;
+        const dateRange = new DateRange(startDate, endDate);
+        this.dateChange.emit(dateRange);
+        this.disableChange.emit(false);
+    }
+    handleDateRangeTimeRangeValidations(startDateString, endDateString) {
+        this.isValid = this.timestampValidation(startDateString) && this.timestampValidation(endDateString) &&
+            this.minDateValidation(startDateString) && this.startEndDateValidation(startDateString, endDateString);
+    }
+    ;
+    startEndDateValidation(startDateString, endDateString) {
+        const startDate = this.createDateTime(startDateString).date;
+        const endDate = this.createDateTime(endDateString).date;
+        const isStartEndDateValid = endDate.getTime() >= startDate.getTime();
+        if (!isStartEndDateValid)
+            this.errorMessage = startEndDateError;
+        return isStartEndDateValid;
+    }
+    handleDateTimeMode(dateString) {
+        this.handleDateTimeValidations(dateString);
+        if (!this.isValid) {
+            this.disableChange.emit(true);
+            return;
+        }
+        const { date, time } = this.createDateTime(dateString);
+        this.dateChange.emit(date);
+        this.timeChange.emit(time);
+        this.disableChange.emit(false);
+    }
+    createDateTime(dateString) {
+        const dateParts = dateString.split(' ');
+        const year = dateParts[0].split('/').reverse().join('-');
+        const time = dateParts[1];
+        const dateTime = `${year}T${time}`;
+        const date = new Date(dateTime);
+        return { date, time };
+    }
+    handleDateTimeValidations(value) {
+        const pattern = this.showSeconds ? regexExpressions.fullDateTime : regexExpressions.dateTimeWithoutSeconds;
+        this.isValid = this.patternValidation(value, pattern) && this.timestampValidation(value) && this.minDateValidation(value);
+    }
+    minDateValidation(value) {
+        if (!this.minDate)
+            return true;
+        const parts = value.split(' ');
+        const year = parts[0].split('/').reverse().join('-');
+        const isDateValid = new Date(year).getTime() >= this.minDate.getTime();
+        if (!isDateValid)
+            this.errorMessage = minDateError;
+        return isDateValid;
+    }
+    patternValidation(value, pattern) {
+        const isPatternValid = pattern.test(value);
+        if (!isPatternValid)
+            this.errorMessage = formatError + ' ' + this.placeholder;
+        return isPatternValid;
+    }
+    timestampValidation(date) {
+        const dateTimeParts = date.split(' ');
+        const timeParts = dateTimeParts[1].split(':');
+        const dateParts = dateTimeParts[0].split('/');
+        const year = parseInt(dateParts[2]);
+        const month = parseInt(dateParts[1]);
+        const day = parseInt(dateParts[0]);
+        const hours = parseInt(timeParts[0]);
+        const minutes = parseInt(timeParts[1]);
+        const seconds = timeParts[2] !== undefined ? parseInt(timeParts[2]) : 0;
+        const lastDayInMonth = new Date(year, month, 0).getDate();
+        const isValidDate = month >= 1 && month <= 12 && day >= 1 && day <= lastDayInMonth;
+        const isValidTime = hours >= 0 && hours <= 24 && minutes >= 0 && minutes <= 60 && seconds >= 0 && seconds <= 60;
+        if (!isValidDate || !isValidTime)
+            this.errorMessage = timestampError;
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-date-time-input', 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>" }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], inputValue: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], showSeconds: [{
+                type: Input
+            }], rangeMode: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], timeChange: [{
+                type: Output
+            }], disableChange: [{
+                type: Output
+            }] } });
+
+class HerumDateTimePickerComponent {
+    elementRef;
+    showDatePicker = true;
+    showTimePicker = true;
+    showTimeSelect = false;
+    selectedTime;
+    selectedDate;
+    rangeMode = false;
+    minDate;
+    timePickerHoverColor = '';
+    timePickerActiveColor = '';
+    widthDatePicker = '';
+    heightTimePicker = '';
+    datePickerHoverColor = '';
+    datePickerActiveColor = '';
+    showSeconds = true;
+    timePickerItemSize = '39px';
+    timeChange = new EventEmitter();
+    dateChange = new EventEmitter();
+    hostElement;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.hostElement = this.elementRef.nativeElement;
+    }
+    ngOnChanges(changes) {
+        if (this.hostElement) {
+            if (changes['widthDatePicker']?.currentValue)
+                this.hostElement.style.setProperty('--width-date-picker', this.widthDatePicker);
+            if (changes['heightTimePicker']?.currentValue)
+                this.hostElement.style.setProperty('--height-time-picker', this.heightTimePicker);
+        }
+    }
+    _timeChange(time) {
+        this.timeChange.emit(time);
+    }
+    _dateChange(date) {
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-date-time-picker', 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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { showDatePicker: [{
+                type: Input
+            }], showTimePicker: [{
+                type: Input
+            }], showTimeSelect: [{
+                type: Input
+            }], selectedTime: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], rangeMode: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], timePickerHoverColor: [{
+                type: Input
+            }], timePickerActiveColor: [{
+                type: Input
+            }], widthDatePicker: [{
+                type: Input
+            }], heightTimePicker: [{
+                type: Input
+            }], datePickerHoverColor: [{
+                type: Input
+            }], datePickerActiveColor: [{
+                type: Input
+            }], showSeconds: [{
+                type: Input
+            }], timePickerItemSize: [{
+                type: Input
+            }], timeChange: [{
+                type: Output
+            }], dateChange: [{
+                type: Output
+            }] } });
+
+const iconsFolderPath = 'assets/files-icons/';
+const defaultFileIconPath = iconsFolderPath + 'generic-file.svg';
+const requiredFieldMessage = 'חובה לעלות קובץ';
+class HerumDropZoneComponent {
+    environmentConfig;
+    selectedFiles = [];
+    placeholder = 'העלה או גרור לכאן קובץ';
+    numberOfAllowedFiles = 1;
+    allowedFileTypes = [];
+    supportedFilesMimes = [];
+    supportedFilesTypes = [];
+    requiredField = false;
+    directionPreview = 'column';
+    type = 'column';
+    grow = false;
+    fillContainer = false;
+    uploadFileSvg = svgsStrings.greyUploadFile;
+    previewImageUrl;
+    allowToDeleteImage = true;
+    filesDataEvent = new EventEmitter();
+    fileInput;
+    filesList = [];
+    isLoading = false;
+    isDownloadInProgress = false;
+    hasExceededNumberOfAllowedFiles = false;
+    filesSuffixes = resourcesFilesSuffixes;
+    isValidUpload = true;
+    isSupportedFileType = true;
+    parsedAllowedFileTypes = '';
+    errorMessages = [
+        { condition: () => !this.isSupportedFileType && this.isValidUpload, message: 'סוג הקובץ אינו נתמך' },
+        { condition: () => !this.isValidUpload, message: 'סוג הקובץ אינו תקין' },
+        {
+            condition: () => this.hasExceededNumberOfAllowedFiles && this.numberOfAllowedFiles > 1,
+            message: `ניתן להעלות עד ${this.numberOfAllowedFiles} קבצים`
+        },
+    ];
+    constructor(environmentConfig) {
+        this.environmentConfig = environmentConfig;
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedFiles'] && Array.isArray(this.selectedFiles))
+            this.filesList = this.selectedFiles;
+        if (changes['requiredField'])
+            this.addOrRemoveRequiredFieldError();
+        if (changes['allowedFileTypes'])
+            this.parsedAllowedFileTypes = this.parseAllowedFileTypes(this.allowedFileTypes);
+    }
+    _onRemoveFile(index, event) {
+        event.stopPropagation();
+        this.filesList.splice(index, 1);
+        if (this.filesList.length <= this.numberOfAllowedFiles)
+            this.hasExceededNumberOfAllowedFiles = false;
+        this.filesDataEvent.emit(this.filesList);
+    }
+    _onRemoveImage() {
+        if (this.allowToDeleteImage) {
+            this.filesDataEvent.emit([]);
+            return;
+        }
+        this.fileInput.nativeElement.click();
+    }
+    _onUploadDroppedFiles(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const files = Array.from(event.dataTransfer.files);
+        this.uploadFiles(files);
+    }
+    _onPreventDefault(event) {
+        event.preventDefault();
+    }
+    _onDownloadMediaConvertor(event) {
+        event.stopPropagation();
+    }
+    _onUploadFiles(event) {
+        event.preventDefault();
+        const files = event.target.files;
+        if (!files.length)
+            return;
+        this.uploadFiles(Array.from(files));
+    }
+    _onClickFileInput() {
+        this.fileInput.nativeElement.click();
+    }
+    uploadFiles(files) {
+        if (this.allowedFileTypes?.length)
+            this.isValidUpload = this.filesTypeValidation(files);
+        if (this.supportedFilesMimes?.length)
+            this.isSupportedFileType = this.supportedFilesValidation(files);
+        if (!this.isValidUpload || !this.isSupportedFileType)
+            return;
+        this.isExceededFilesLength(files);
+        if (this.filesList.length === this.numberOfAllowedFiles && files.length < this.numberOfAllowedFiles)
+            this.filesList = [...files, ...this.filesList.slice(files.length)];
+        else if (files.length === this.numberOfAllowedFiles)
+            this.filesList = files;
+        else if (files.length > this.numberOfAllowedFiles) {
+            this.filesList = [];
+            this.filesList.push(...files.slice(0, this.numberOfAllowedFiles));
+        }
+        else
+            files.forEach((file) => this.filesList.push(file));
+        this.filesDataEvent.emit(this.filesList);
+    }
+    supportedFilesValidation(files) {
+        return files.some((file) => this.supportedFilesMimes.some(supportedFileType => file.type.includes(supportedFileType)));
+    }
+    filesTypeValidation(files) {
+        if (files.some((file) => file.type === '' || file.type === undefined))
+            return false;
+        return files.some((file) => this.allowedFileTypes.some((splitFileType) => file.type.includes(splitFileType)));
+    }
+    isExceededFilesLength(files) {
+        if (files.length + this.filesList.length > this.numberOfAllowedFiles)
+            this.hasExceededNumberOfAllowedFiles = true;
+        else
+            this.hasExceededNumberOfAllowedFiles = false;
+    }
+    getIconPath(file) {
+        let filePath = '';
+        const uploadedFileSuffix = '.' + file?.name.split('.').pop();
+        Object.values(resourcesFilesSuffixes).forEach(fileSuffix => {
+            if (fileSuffix === uploadedFileSuffix)
+                filePath = iconsFolderPath + fileSuffix + '.svg';
+        });
+        for (const [fileSuffixKey, fileSuffixValue] of Object.entries(filesSuffixes))
+            if (fileSuffixValue.includes(uploadedFileSuffix.slice(1)))
+                filePath = iconsFolderPath + '.' + fileSuffixKey + '.svg';
+        return filePath ? filePath : defaultFileIconPath;
+    }
+    get convertorMediaPath() {
+        return `${this.environmentConfig?.environment?.s3ServerPath}${this.environmentConfig?.buckets?.GeneralFiles}XMediaRecode.exe`;
+    }
+    parseAllowedFileTypes(allowedFileTypes) {
+        if (!allowedFileTypes || !allowedFileTypes?.length)
+            return '';
+        return allowedFileTypes.map(allowedFileType => allowedFileType + anySubFileTypeWildCard).join(', ');
+    }
+    addOrRemoveRequiredFieldError() {
+        if (this.requiredField) {
+            this.errorMessages.push({
+                condition: () => !this.filesList.length,
+                message: requiredFieldMessage
+            });
+            return;
+        }
+        this.errorMessages = this.errorMessages.filter(errorMessage => errorMessage.message !== requiredFieldMessage);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDropZoneComponent, isStandalone: false, selector: "herum-drop-zone", inputs: { selectedFiles: "selectedFiles", placeholder: "placeholder", numberOfAllowedFiles: "numberOfAllowedFiles", allowedFileTypes: "allowedFileTypes", supportedFilesMimes: "supportedFilesMimes", supportedFilesTypes: "supportedFilesTypes", requiredField: "requiredField", directionPreview: "directionPreview", type: "type", grow: "grow", fillContainer: "fillContainer", uploadFileSvg: "uploadFileSvg", previewImageUrl: "previewImageUrl", allowToDeleteImage: "allowToDeleteImage" }, outputs: { filesDataEvent: "filesDataEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button class=\"dropzone\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\"> {{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-btn\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-btn{position:absolute;top:8px;left:8px;background:var(--dark-overlay);border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-btn:hover{opacity:1}.preview-wrapper .image-container .remove-btn .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i5.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-drop-zone', template: "<button class=\"dropzone\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\"> {{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-btn\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-btn{position:absolute;top:8px;left:8px;background:var(--dark-overlay);border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-btn:hover{opacity:1}.preview-wrapper .image-container .remove-btn .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HERUM_SHARED_CONFIG_TOKEN]
+                }] }], propDecorators: { selectedFiles: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], numberOfAllowedFiles: [{
+                type: Input
+            }], allowedFileTypes: [{
+                type: Input
+            }], supportedFilesMimes: [{
+                type: Input
+            }], supportedFilesTypes: [{
+                type: Input
+            }], requiredField: [{
+                type: Input
+            }], directionPreview: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], grow: [{
+                type: Input
+            }], fillContainer: [{
+                type: Input
+            }], uploadFileSvg: [{
+                type: Input
+            }], previewImageUrl: [{
+                type: Input
+            }], allowToDeleteImage: [{
+                type: Input
+            }], filesDataEvent: [{
+                type: Output
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class HerumExpendablePanelComponent {
+    title;
+    isBoldTitle = false;
+    isContentDisplayed = true;
+    _onToggleContentDisplay(event) {
+        event.stopPropagation();
+        this.isContentDisplayed = !this.isContentDisplayed;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumExpendablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumExpendablePanelComponent, isStandalone: false, selector: "herum-expendable-panel", inputs: { title: "title", isBoldTitle: "isBoldTitle" }, ngImport: i0, template: "<div class=\"collection-priority-expendable-panel-container\">\r\n    <p class=\"expendable-panel-title m-0\"\r\n        [ngClass]=\"{'displayed': isContentDisplayed, 'not-displayed': !isContentDisplayed,'bold': isBoldTitle}\"\r\n        (click)=\"_onToggleContentDisplay($event)\">\r\n        {{title}}\r\n    </p>\r\n\r\n    <ng-content *ngIf=\"isContentDisplayed\"></ng-content>\r\n</div>", styles: [".collection-priority-expendable-panel-container{position:relative;display:flex;flex-direction:column;gap:4px;margin-block:12px}.expendable-panel-title{padding-right:30px;color:#000;font-size:var(--standard-font-size);cursor:pointer}.collection-priority-expendable-panel-container .expendable-panel-title:before{position:absolute;display:inline-block;width:8px;height:8px;right:12px;border-top:2px solid var(--icons-color);border-right:2px solid var(--icons-color);transform-origin:center;transition:transform .3s ease}.not-displayed:before{content:\"\";top:5px;transform:rotate(225deg)}.displayed:before{content:\"\";top:3px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumExpendablePanelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-expendable-panel', template: "<div class=\"collection-priority-expendable-panel-container\">\r\n    <p class=\"expendable-panel-title m-0\"\r\n        [ngClass]=\"{'displayed': isContentDisplayed, 'not-displayed': !isContentDisplayed,'bold': isBoldTitle}\"\r\n        (click)=\"_onToggleContentDisplay($event)\">\r\n        {{title}}\r\n    </p>\r\n\r\n    <ng-content *ngIf=\"isContentDisplayed\"></ng-content>\r\n</div>", styles: [".collection-priority-expendable-panel-container{position:relative;display:flex;flex-direction:column;gap:4px;margin-block:12px}.expendable-panel-title{padding-right:30px;color:#000;font-size:var(--standard-font-size);cursor:pointer}.collection-priority-expendable-panel-container .expendable-panel-title:before{position:absolute;display:inline-block;width:8px;height:8px;right:12px;border-top:2px solid var(--icons-color);border-right:2px solid var(--icons-color);transform-origin:center;transition:transform .3s ease}.not-displayed:before{content:\"\";top:5px;transform:rotate(225deg)}.displayed:before{content:\"\";top:3px;transform:rotate(135deg)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], isBoldTitle: [{
+                type: Input
+            }] } });
+
+class HerumFilesViewerComponent {
+    environmentConfig;
+    fileData;
+    showDeleteFileButton = false;
+    downloadFile = new EventEmitter();
+    deleteFile = new EventEmitter();
+    srcPath;
+    fileType;
+    constructor(environmentConfig) {
+        this.environmentConfig = environmentConfig;
+    }
+    ngOnChanges(changes) {
+        if (changes['fileData']?.currentValue) {
+            const fileToDisplay = this.fileData.file?.size === 0;
+            if (this.fileData.file && !fileToDisplay) {
+                const type = this.fileData.file.type;
+                const typeIndex = type.includes('pdf') ? 1 : 0;
+                this.fileType = type.split("/")[typeIndex];
+                this.srcPath = URL.createObjectURL(this.fileData.file);
+                return;
+            }
+            const type = this.fileData.type;
+            const typeIndex = type?.includes('pdf') ? 1 : 0;
+            this.fileType = type?.split("/")[typeIndex];
+            this.srcPath = this.environmentConfig?.environment?.s3ServerPath + this.fileData.bucket + "/" + this.fileData.key;
+        }
+    }
+    _onDeleteFile() {
+        this.deleteFile.emit(this.fileData);
+    }
+    _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        <img [style.background-image]=\"'url(' + srcPath + ')'\" [class.image-hover]=\"showDeleteFileButton\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n    <img src=\"assets/general/secondary-x.svg\" />\r\n</button>", styles: [":host{flex:1;display:flex;position:relative}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container{display:flex;flex:1;justify-content:center}.image-container img{background-repeat:no-repeat;background-size:cover;background-position:center;width:100%;height:100%;border-radius:var(--border-radius);filter:brightness(100%);transition:filter .5s ease}.image-container .image-hover:hover{filter:brightness(50%)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumFilesViewerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-files-viewer', template: "<ng-container [ngSwitch]=\"fileType\">\r\n    <div class=\"image-container\" *ngSwitchCase=\"'image'\">\r\n        <img [style.background-image]=\"'url(' + srcPath + ')'\" [class.image-hover]=\"showDeleteFileButton\">\r\n    </div>\r\n\r\n    <herum-video-player *ngSwitchCase=\"'video'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-video-player>\r\n\r\n    <herum-pdf-viewer *ngSwitchCase=\"'pdf'\" [srcPath]=\"srcPath\" [isResourceInWideMode]=\"true\"></herum-pdf-viewer>\r\n\r\n    <herum-audio-player *ngSwitchCase=\"'audio'\" [id]=\"fileData.key\" [bucketName]=\"fileData.bucket\"\r\n        [audioFile]=\"fileData.file\">\r\n    </herum-audio-player>\r\n\r\n    <herum-download-file *ngSwitchDefault linkText=\"\u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05E0\u05EA\u05DE\u05DA, \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D3\u05D5\" (downloadFile)=\"_downloadFile()\">\r\n    </herum-download-file>\r\n</ng-container>\r\n\r\n<button *ngIf=\"showDeleteFileButton\" class=\"delete-file-button\" (click)=\"_onDeleteFile()\">\r\n    <img src=\"assets/general/secondary-x.svg\" />\r\n</button>", styles: [":host{flex:1;display:flex;position:relative}herum-video-player,herum-pdf-viewer,herum-audio-player,herum-download-file{flex:1}herum-video-player{display:flex}herum-download-file{display:flex;align-items:center;justify-content:center;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);padding:var(--standard-padding)}.image-container{display:flex;flex:1;justify-content:center}.image-container img{background-repeat:no-repeat;background-size:cover;background-position:center;width:100%;height:100%;border-radius:var(--border-radius);filter:brightness(100%);transition:filter .5s ease}.image-container .image-hover:hover{filter:brightness(50%)}.delete-file-button{background-color:transparent;border:none;position:absolute;top:var(--standard-padding);left:var(--standard-padding)}.delete-file-button img{height:14px;filter:brightness(0) invert(1)}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HERUM_SHARED_CONFIG_TOKEN]
+                }] }], propDecorators: { fileData: [{
+                type: Input
+            }], showDeleteFileButton: [{
+                type: Input
+            }], downloadFile: [{
+                type: Output
+            }], deleteFile: [{
+                type: Output
+            }] } });
+
+class HerumHierarchyTreeNodeComponent {
+    changeDetectorRef;
+    environmentConfig;
+    treeNodeData;
+    size = 'regular';
+    expandedMode = 'none';
+    showArrow = true;
+    showAssignmentsDetails = true;
+    nodeMenuItems = [];
+    onNodeSelected = new EventEmitter();
+    onMenuItemSelected = new EventEmitter();
+    onExpand = new EventEmitter();
+    isExpand = true;
+    constructor(changeDetectorRef, environmentConfig) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.environmentConfig = environmentConfig;
+    }
+    ngOnChanges(changes) {
+        if (changes['treeNodeData']?.currentValue)
+            this.changeDetectorRef.detectChanges();
+    }
+    _isTruncatedTitleElement(element) {
+        return isTruncatedTitleElement(element);
+    }
+    _onExpand() {
+        this.isExpand = !this.isExpand;
+        this.onExpand.emit(this.isExpand);
+    }
+    _onNodeSelected() {
+        this.onNodeSelected.emit(true);
+    }
+    _onMenuItemSelected(item) {
+        item.additionalData = this.treeNodeData;
+        this.onMenuItemSelected.emit(item);
+    }
+    get toRPActualAssignmentsDisplayText() {
+        return 'תקנים בפועל';
+    }
+    get expectedAssignmentsDisplayText() {
+        return 'פוטנציאל אג"תי';
+    }
+    get invalidAssignmentsDisplayText() {
+        return 'תקנים אכ"אים';
+    }
+    get negativePercentage() {
+        if (!this.showAssignmentsDetails)
+            return 0;
+        return (this.treeNodeData.totals?.invalidAssignments / this.treeNodeData.totals?.toRPExpectedAssignments) * 100;
+    }
+    get smallChevronSvg() {
+        return svgsStrings.smallChevron;
+    }
+    get systemIdentifier() {
+        return this.environmentConfig?.environment?.systemIdentifier;
+    }
+    get isHerum() {
+        return this.environmentConfig?.environment?.systemIdentifier == system.herum;
+    }
+    get isHadracha() {
+        return this.environmentConfig?.environment?.systemIdentifier == system.hadracha;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumHierarchyTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumHierarchyTreeNodeComponent, isStandalone: false, selector: "herum-hierarchy-tree-node", inputs: { treeNodeData: "treeNodeData", size: "size", expandedMode: "expandedMode", showArrow: "showArrow", showAssignmentsDetails: "showAssignmentsDetails", nodeMenuItems: "nodeMenuItems" }, outputs: { onNodeSelected: "onNodeSelected", onMenuItemSelected: "onMenuItemSelected", onExpand: "onExpand" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i5.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i5.EllipsisPipe, name: "ellipsis" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumHierarchyTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-hierarchy-tree-node', template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HERUM_SHARED_CONFIG_TOKEN]
+                }] }], propDecorators: { treeNodeData: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], expandedMode: [{
+                type: Input
+            }], showArrow: [{
+                type: Input
+            }], showAssignmentsDetails: [{
+                type: Input
+            }], nodeMenuItems: [{
+                type: Input
+            }], onNodeSelected: [{
+                type: Output
+            }], onMenuItemSelected: [{
+                type: Output
+            }], onExpand: [{
+                type: Output
+            }] } });
+
+class HerumMultiProgressBarComponent {
+    progressBarsSections;
+    constructor() { }
+    ngOnInit() {
+    }
+    getBorderRadius(sectionIndex, progressBarIndex) {
+        if (this.progressBarsSections.length == 1 && this.progressBarsSections[0].progressBars.length == 1)
+            return 'both';
+        switch (sectionIndex) {
+            case 0:
+                return progressBarIndex == 0 ? 'left' : 'none';
+            case this.progressBarsSections.length - 1:
+                return progressBarIndex == this.progressBarsSections[sectionIndex].progressBars.length - 1 ? 'right' : 'none';
+            default:
+                return 'none';
+        }
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-multi-progress-bar', 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"] }]
+        }], ctorParameters: () => [], propDecorators: { progressBarsSections: [{
+                type: Input
+            }] } });
+
+class HerumNavigatorComponent {
+    isFirstItem = false;
+    isLastItem = false;
+    nextButtonText = 'לשיעור הבא';
+    previousButtonText = 'לשיעור הקודם';
+    isNextButtonDisable = false;
+    isBackButtonDisable = false;
+    currentItemIndex;
+    updatedItemIndex = new EventEmitter();
+    _onPreviousItem(currentItemIndex) {
+        this.updatedItemIndex.emit(--currentItemIndex);
+    }
+    _onNextItem(currentItemIndex) {
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNavigatorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-navigator', 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"] }]
+        }], propDecorators: { isFirstItem: [{
+                type: Input
+            }], isLastItem: [{
+                type: Input
+            }], nextButtonText: [{
+                type: Input
+            }], previousButtonText: [{
+                type: Input
+            }], isNextButtonDisable: [{
+                type: Input
+            }], isBackButtonDisable: [{
+                type: Input
+            }], currentItemIndex: [{
+                type: Input
+            }], updatedItemIndex: [{
+                type: Output
+            }] } });
+
+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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumStepNavigatorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-step-navigator', 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"] }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }] } });
+
+class HerumStepperComponent {
+    color = 'primary';
+    useDymanicSize = false;
+    steps = [
+        {
+            index: 1,
+            label: "פרטים",
+            status: StepStatus.Complete,
+        },
+        {
+            index: 2,
+            label: "שיוך מארזים",
+            status: StepStatus.Complete,
+        },
+        {
+            index: 1,
+            label: "הנוכחי",
+            status: StepStatus.Current,
+        },
+        {
+            index: 1,
+            label: "סיכום",
+            status: StepStatus.Incomplete,
+        }
+    ];
+    current = this.steps.length;
+    getStepItemStyle(index) {
+        if (!this.useDymanicSize)
+            return null;
+        if (index > this.current)
+            return { 'opacity': Math.max((1 - (index - this.current) / index) + 0.1, 1 - (index / this.steps.length)) };
+        if (index < this.current)
+            return { 'opacity': Math.max((index / this.current) + 0.1, (index / this.steps.length)) };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumStepperComponent, isStandalone: false, selector: "herum-stepper", inputs: { color: "color", useDymanicSize: "useDymanicSize", steps: "steps", current: "current" }, ngImport: i0, template: "<div class=\"stepper-wrapper\" [ngStyle]=\"{'gap': color=='white' ? '24px' : '0', 'margin-bottom': color=='white' ? '0' : '20px'}\">\r\n    <ng-container *ngFor=\"let step of steps; let i = index\">\r\n        <ng-container *ngIf=\"!step.iconPath\">\r\n            <ng-container [ngSwitch]=\"step.status\">\r\n                <div *ngSwitchCase=\"0\" class=\"stepper-item completed\">\r\n                    <div class=\"step-counter\">\r\n                        <img src=\"assets/shared/icons/stepper/white-v.svg\" width=\"15px\" alt=\"checked\" />\r\n                    </div>\r\n                    <div class=\"step-name\">{{step.label}}</div>\r\n                </div>\r\n\r\n                <div *ngSwitchCase=\"1\" class=\"stepper-item active\">\r\n                    <div class=\"step-counter\">\r\n                        <div class=\"current-inner-circle\"></div>\r\n                    </div>\r\n                    <div class=\"step-name\">{{step.label}}</div>\r\n                </div>\r\n\r\n                <div *ngSwitchCase=\"2\" class=\"stepper-item\">\r\n                    <div class=\"step-counter\">\r\n                        <div class=\"current-inner-circle\"></div>\r\n                    </div>\r\n                    <div class=\"step-name\">{{step.label}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"step.iconPath\">\r\n            <div class=\"stepper-item white\" [ngStyle]=\"getStepItemStyle(i)\">\r\n                <div class=\"step-counter\" [ngStyle]=\"{ 'transform': i == current ? 'scale(1.5)' : '' }\">\r\n                    <img [src]=\"step.iconPath\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", styles: [".stepper-wrapper{margin-top:auto;display:flex;justify-content:space-between;margin-bottom:20px}.stepper-item{position:relative;display:flex;flex-direction:column;align-items:center;flex:1}@media (max-width: 768px){.stepper-item{font-size:12px}}.stepper-item:before{position:absolute;content:\"\";border-bottom:2px solid var(--inactive-border-color);width:100%;top:14px;left:-50%;z-index:2}.stepper-item:after{position:absolute;content:\"\";border-bottom:2px solid var(--inactive-border-color);width:100%;top:14px;left:50%;z-index:2}.stepper-item.white:before{left:-75%}.stepper-item.white:after{left:75%}.stepper-item .step-counter{position:relative;z-index:5;display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background:#ccc;margin-bottom:6px}.stepper-item:not(.completed) .step-counter{border:3px solid var(--inactive-border-color);background-color:#fff}.stepper-item:not(.completed) .step-counter .current-inner-circle{background-color:var(--inactive-border-color);width:12px;height:12px;border-radius:50%}.stepper-item.active{font-weight:700}.stepper-item.active .step-counter{border:3px solid var(--icons-color);background-color:#fff}.stepper-item.active .step-counter .current-inner-circle{background-color:var(--icons-color);width:12px;height:12px;border-radius:50%}.stepper-item.white{font-weight:700}.stepper-item.white .step-counter{border:3px solid white;background-color:#fff}.stepper-item.white .step-counter .current-inner-circle{background-color:#fff;width:12px;height:12px;border-radius:50%}.stepper-item.white:before{border-bottom-color:#fff}.stepper-item.white:after{border-bottom-color:#fff}.stepper-item.active:after{position:absolute;content:\"\";border-bottom:2px solid var(--icons-color);width:100%;top:14px;left:50%;z-index:3}.stepper-item.completed .step-counter{background:var(--primary-color);color:var(--light-text-color)}.stepper-item.completed:after{position:absolute;content:\"\";border-bottom:2px solid var(--icons-color);width:100%;top:14px;left:50%;z-index:3}.stepper-item:first-child:after{content:none}.stepper-item:last-child:before{content:none}\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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumStepperComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-stepper', template: "<div class=\"stepper-wrapper\" [ngStyle]=\"{'gap': color=='white' ? '24px' : '0', 'margin-bottom': color=='white' ? '0' : '20px'}\">\r\n    <ng-container *ngFor=\"let step of steps; let i = index\">\r\n        <ng-container *ngIf=\"!step.iconPath\">\r\n            <ng-container [ngSwitch]=\"step.status\">\r\n                <div *ngSwitchCase=\"0\" class=\"stepper-item completed\">\r\n                    <div class=\"step-counter\">\r\n                        <img src=\"assets/shared/icons/stepper/white-v.svg\" width=\"15px\" alt=\"checked\" />\r\n                    </div>\r\n                    <div class=\"step-name\">{{step.label}}</div>\r\n                </div>\r\n\r\n                <div *ngSwitchCase=\"1\" class=\"stepper-item active\">\r\n                    <div class=\"step-counter\">\r\n                        <div class=\"current-inner-circle\"></div>\r\n                    </div>\r\n                    <div class=\"step-name\">{{step.label}}</div>\r\n                </div>\r\n\r\n                <div *ngSwitchCase=\"2\" class=\"stepper-item\">\r\n                    <div class=\"step-counter\">\r\n                        <div class=\"current-inner-circle\"></div>\r\n                    </div>\r\n                    <div class=\"step-name\">{{step.label}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"step.iconPath\">\r\n            <div class=\"stepper-item white\" [ngStyle]=\"getStepItemStyle(i)\">\r\n                <div class=\"step-counter\" [ngStyle]=\"{ 'transform': i == current ? 'scale(1.5)' : '' }\">\r\n                    <img [src]=\"step.iconPath\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", styles: [".stepper-wrapper{margin-top:auto;display:flex;justify-content:space-between;margin-bottom:20px}.stepper-item{position:relative;display:flex;flex-direction:column;align-items:center;flex:1}@media (max-width: 768px){.stepper-item{font-size:12px}}.stepper-item:before{position:absolute;content:\"\";border-bottom:2px solid var(--inactive-border-color);width:100%;top:14px;left:-50%;z-index:2}.stepper-item:after{position:absolute;content:\"\";border-bottom:2px solid var(--inactive-border-color);width:100%;top:14px;left:50%;z-index:2}.stepper-item.white:before{left:-75%}.stepper-item.white:after{left:75%}.stepper-item .step-counter{position:relative;z-index:5;display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background:#ccc;margin-bottom:6px}.stepper-item:not(.completed) .step-counter{border:3px solid var(--inactive-border-color);background-color:#fff}.stepper-item:not(.completed) .step-counter .current-inner-circle{background-color:var(--inactive-border-color);width:12px;height:12px;border-radius:50%}.stepper-item.active{font-weight:700}.stepper-item.active .step-counter{border:3px solid var(--icons-color);background-color:#fff}.stepper-item.active .step-counter .current-inner-circle{background-color:var(--icons-color);width:12px;height:12px;border-radius:50%}.stepper-item.white{font-weight:700}.stepper-item.white .step-counter{border:3px solid white;background-color:#fff}.stepper-item.white .step-counter .current-inner-circle{background-color:#fff;width:12px;height:12px;border-radius:50%}.stepper-item.white:before{border-bottom-color:#fff}.stepper-item.white:after{border-bottom-color:#fff}.stepper-item.active:after{position:absolute;content:\"\";border-bottom:2px solid var(--icons-color);width:100%;top:14px;left:50%;z-index:3}.stepper-item.completed .step-counter{background:var(--primary-color);color:var(--light-text-color)}.stepper-item.completed:after{position:absolute;content:\"\";border-bottom:2px solid var(--icons-color);width:100%;top:14px;left:50%;z-index:3}.stepper-item:first-child:after{content:none}.stepper-item:last-child:before{content:none}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], useDymanicSize: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }] } });
+
+class HerumTimeSelectComponent {
+    showSeconds = true;
+    minutesPlaceholder = 'דקות';
+    secondsPlaceholder = 'שניות';
+    hoursPlaceholder = 'שעות';
+    selectedTime = '00:00:00';
+    label = '';
+    timeChange = new EventEmitter();
+    selectedHour;
+    selectedMinute;
+    selectedSecond;
+    hours = this.generateIdentifiedEntityTimeArray(24);
+    minutes = this.generateIdentifiedEntityTimeArray(60);
+    seconds = this.generateIdentifiedEntityTimeArray(60);
+    ngOnChanges(changes) {
+        if (changes['selectedTime'].currentValue)
+            this.selectedTimeToSelectedIdentifiedEntities(this.selectedTime);
+    }
+    _selectedSecondOptionChange(updatedSecond) {
+        this.selectedSecond = updatedSecond;
+        this.emitSelectedTime();
+    }
+    _selectedMinuteOptionChange(updatedMinute) {
+        this.selectedMinute = updatedMinute;
+        this.emitSelectedTime();
+    }
+    _selectedHourOptionChange(updatedHour) {
+        this.selectedHour = updatedHour;
+        this.emitSelectedTime();
+    }
+    emitSelectedTime() {
+        const formattedTime = this.formatTime(this.selectedHour.name, this.selectedMinute.name, this.selectedSecond?.name);
+        this.selectedTime = formattedTime;
+        this.timeChange.emit(formattedTime);
+    }
+    formatTime(hours, minutes, seconds) {
+        const hoursAndMinutes = `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+        return !this.showSeconds ? hoursAndMinutes : hoursAndMinutes + `:${seconds?.padStart(2, '0')}`;
+    }
+    selectedTimeToSelectedIdentifiedEntities(selectedTime) {
+        [this.selectedHour, this.selectedMinute, this.selectedSecond] = selectedTime.split(':').map((value) => ({ id: value, name: value }));
+    }
+    generateIdentifiedEntityTimeArray(length) {
+        return Array.from({ length }, (_, index) => ({
+            id: String(index).padStart(2, '0'),
+            name: String(index).padStart(2, '0')
+        }));
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTimeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-time-select', 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"] }]
+        }], propDecorators: { showSeconds: [{
+                type: Input
+            }], minutesPlaceholder: [{
+                type: Input
+            }], secondsPlaceholder: [{
+                type: Input
+            }], hoursPlaceholder: [{
+                type: Input
+            }], selectedTime: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], timeChange: [{
+                type: Output
+            }] } });
+
+class HerumUserProfileComponent {
+    userData;
+    mode = 'vertical';
+    titleSize = 'big';
+    imageSize = 'image-default-size';
+    get userFullName() {
+        return this.userData?.firstName + ' ' + this.userData?.lastName;
+    }
+    get fullHierarchyName() {
+        if (!this.userData.assignments || !this.userData.assignments.length)
+            return this.userData.profession;
+        return this.userData.assignments[0].structPreview.fullHierarchyName;
+    }
+    get assignmentStateDisplayName() {
+        if (!this.userData.assignments || this.userData.assignments.length == 0)
+            return '';
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-user-profile', 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"] }]
+        }], propDecorators: { userData: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], titleSize: [{
+                type: Input
+            }], imageSize: [{
+                type: Input
+            }] } });
+
+class HerumUserProgressComponent {
+    title = 'מדד כשירות כללי';
+    percentage = 65;
+    type = 'gradient';
+    get percentageLabel() {
+        return this.percentage < 40 ?
+            'כשירות נמוכה' : this.percentage < 80 ?
+            'כשירות בינונית' : this.percentage < 99 ?
+            'כשירות טובה מאוד' : 'כשירות מושלמת! כל הכבוד!';
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUserProgressComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'app-herum-user-progress', 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"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], percentage: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: KeyValueListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'key-value-list', 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"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class LabelsWithIconsListComponent {
+    items = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LabelsWithIconsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: LabelsWithIconsListComponent, isStandalone: false, selector: "labels-with-icons-list", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"label-item\" *ngFor=\"let item of items\">\r\n    <img [src]=\"item.iconPath\" alt=\" \" />\r\n    <p>{{ item.label }}</p>\r\n</div>", styles: [".label-item{display:flex;gap:8px;align-items:center;padding:12px 8px;font-size:14px;border-bottom:1px solid var(--chips-divider-color)}.label-item:last-child{border-bottom:none}p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LabelsWithIconsListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'labels-with-icons-list', template: "<div class=\"label-item\" *ngFor=\"let item of items\">\r\n    <img [src]=\"item.iconPath\" alt=\" \" />\r\n    <p>{{ item.label }}</p>\r\n</div>", styles: [".label-item{display:flex;gap:8px;align-items:center;padding:12px 8px;font-size:14px;border-bottom:1px solid var(--chips-divider-color)}.label-item:last-child{border-bottom:none}p{margin:0}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class ProgressesOverViewComponent {
+    titleSize = 'section-header-title';
+    circularProgressSize = 'big-size';
+    progressesOverView = [];
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProgressesOverViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'progresses-over-view', 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"] }]
+        }], propDecorators: { titleSize: [{
+                type: Input
+            }], circularProgressSize: [{
+                type: Input
+            }], progressesOverView: [{
+                type: Input
+            }], progressOverViewDirection: [{
+                type: Input
+            }], containerProgressesOverViewDirection: [{
+                type: Input
+            }] } });
+
+class MoleculesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: MoleculesModule, declarations: [HerumActiveLinkComponent,
+            HerumActiveMenuComponent,
+            HerumAutocompleteComponent,
+            HerumClosedListMultiSelectComponent,
+            HerumClosedListSelectComponent,
+            HerumDateTimeInputComponent,
+            HerumDateTimePickerComponent,
+            HerumDropZoneComponent,
+            HerumExpendablePanelComponent,
+            HerumFilesViewerComponent,
+            HerumHierarchyTreeNodeComponent,
+            HerumMultiProgressBarComponent,
+            HerumNavigatorComponent,
+            HerumStepNavigatorComponent,
+            HerumStepperComponent,
+            HerumTimeSelectComponent,
+            HerumUserProfileComponent,
+            HerumUserProgressComponent,
+            KeyValueListComponent,
+            LabelsWithIconsListComponent,
+            ProgressesOverViewComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatMenuModule,
+            ClipboardModule,
+            MatAutocompleteModule,
+            MatChipsModule,
+            MatFormFieldModule,
+            MatTooltipModule,
+            MatInputModule,
+            MatSelectModule,
+            MatIconModule,
+            MatCheckboxModule,
+            MatSliderModule,
+            DragDropModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            PipesModule,
+            AtomsModule], exports: [HerumActiveLinkComponent,
+            HerumActiveMenuComponent,
+            HerumAutocompleteComponent,
+            HerumClosedListMultiSelectComponent,
+            HerumClosedListSelectComponent,
+            HerumDateTimeInputComponent,
+            HerumDateTimePickerComponent,
+            HerumDropZoneComponent,
+            HerumExpendablePanelComponent,
+            HerumFilesViewerComponent,
+            HerumHierarchyTreeNodeComponent,
+            HerumMultiProgressBarComponent,
+            HerumNavigatorComponent,
+            HerumStepNavigatorComponent,
+            HerumStepperComponent,
+            HerumTimeSelectComponent,
+            HerumUserProfileComponent,
+            HerumUserProgressComponent,
+            KeyValueListComponent,
+            LabelsWithIconsListComponent,
+            ProgressesOverViewComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MoleculesModule, providers: [
+            { provide: MAT_DATE_LOCALE, useValue: 'he-IL' },
+        ], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatMenuModule,
+            ClipboardModule,
+            MatAutocompleteModule,
+            MatChipsModule,
+            MatFormFieldModule,
+            MatTooltipModule,
+            MatInputModule,
+            MatSelectModule,
+            MatIconModule,
+            MatCheckboxModule,
+            MatSliderModule,
+            DragDropModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            PipesModule,
+            AtomsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MoleculesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        HerumActiveLinkComponent,
+                        HerumActiveMenuComponent,
+                        HerumAutocompleteComponent,
+                        HerumClosedListMultiSelectComponent,
+                        HerumClosedListSelectComponent,
+                        HerumDateTimeInputComponent,
+                        HerumDateTimePickerComponent,
+                        HerumDropZoneComponent,
+                        HerumExpendablePanelComponent,
+                        HerumFilesViewerComponent,
+                        HerumHierarchyTreeNodeComponent,
+                        HerumMultiProgressBarComponent,
+                        HerumNavigatorComponent,
+                        HerumStepNavigatorComponent,
+                        HerumStepperComponent,
+                        HerumTimeSelectComponent,
+                        HerumUserProfileComponent,
+                        HerumUserProgressComponent,
+                        KeyValueListComponent,
+                        LabelsWithIconsListComponent,
+                        ProgressesOverViewComponent
+                    ],
+                    exports: [
+                        HerumActiveLinkComponent,
+                        HerumActiveMenuComponent,
+                        HerumAutocompleteComponent,
+                        HerumClosedListMultiSelectComponent,
+                        HerumClosedListSelectComponent,
+                        HerumDateTimeInputComponent,
+                        HerumDateTimePickerComponent,
+                        HerumDropZoneComponent,
+                        HerumExpendablePanelComponent,
+                        HerumFilesViewerComponent,
+                        HerumHierarchyTreeNodeComponent,
+                        HerumMultiProgressBarComponent,
+                        HerumNavigatorComponent,
+                        HerumStepNavigatorComponent,
+                        HerumStepperComponent,
+                        HerumTimeSelectComponent,
+                        HerumUserProfileComponent,
+                        HerumUserProgressComponent,
+                        KeyValueListComponent,
+                        LabelsWithIconsListComponent,
+                        ProgressesOverViewComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MatMenuModule,
+                        ClipboardModule,
+                        MatAutocompleteModule,
+                        MatChipsModule,
+                        MatFormFieldModule,
+                        MatTooltipModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                        MatSliderModule,
+                        DragDropModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        PipesModule,
+                        AtomsModule
+                    ],
+                    providers: [
+                        { provide: MAT_DATE_LOCALE, useValue: 'he-IL' },
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HerumActiveLinkComponent, HerumActiveMenuComponent, HerumAutocompleteComponent, HerumClosedListMultiSelectComponent, HerumClosedListSelectComponent, HerumDateTimeInputComponent, HerumDateTimePickerComponent, HerumDropZoneComponent, HerumExpendablePanelComponent, HerumFilesViewerComponent, HerumHierarchyTreeNodeComponent, HerumMultiProgressBarComponent, HerumNavigatorComponent, HerumStepNavigatorComponent, HerumStepperComponent, HerumTimeSelectComponent, HerumUserProfileComponent, HerumUserProgressComponent, KeyValueListComponent, LabelsWithIconsListComponent, MoleculesModule, ProgressesOverViewComponent };
+//# sourceMappingURL=herum-shared-molecules.mjs.map