herum-shared 0.1.25

package/fesm2022/herum-shared-atoms.mjs

@@ -0,0 +1,2919 @@
+import * as i0 from '@angular/core';
+import { Component, Pipe, EventEmitter, Output, Input, forwardRef, Inject, ViewChild, Directive, HostListener, Optional, Self, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, FormControlName, Validators, ControlContainer, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
+import * as i2 from '@angular/cdk/bidi';
+import * as i4 from 'herum-shared/pipes';
+import { PipesModule } from 'herum-shared/pipes';
+import * as i3 from '@angular/material/datepicker';
+import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
+import { calendarActiveColorCssVariable, calendarHoverColorCssVariable, calendarLibrarySelector, calendarLibraryBodyCellSelector, svgsStrings, defaultPlaceholder as defaultPlaceholder$1, keyboardAsciiCodes, types, formStatuses, regexExpressions, timerActiveColorCssVariable, timerHoverColorCssVariable, timerItemSizeColorCssVariable, resourcesFilesSuffixes, anySubFileTypeWildCard, maleAvatarPath, femaleAvatarPath } from 'herum-shared/constants';
+import * as i1$1 from '@angular/material/core';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
+import { Subject } from 'rxjs';
+import { takeUntil, debounceTime, tap } from 'rxjs/operators';
+import { openClose } from 'herum-shared/animations';
+import { getDropdownAnimationStates } from 'herum-shared/utils';
+import { v4 } from 'uuid';
+import * as i3$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ResourceState, QuizHeaderState, TimeUnit, Gender } from 'herum-shared/herum-types';
+import { MatMenuModule } from '@angular/material/menu';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { 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 CollegeLoaderComponent {
+    bars = new Array(8).fill(8);
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CollegeLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CollegeLoaderComponent, isStandalone: false, selector: "college-loader", ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"bar\" *ngFor=\"let bar of bars\"></div>\r\n</div>", styles: [".arc-container{--uib-size: 70px;display:flex;align-items:center;justify-content:center;width:var(--uib-size)}.container{--uib-size: 70px;--uib-color: #cdcdcd;--uib-speed: 1s;--uib-stroke: 3.5px;display:flex;align-items:center;justify-content:space-between;width:var(--uib-size);height:calc(var(--uib-size) * .4)}.bar{width:var(--uib-stroke);height:100%;background-color:var(--uib-color);transition:background-color .3s ease;border-radius:18px}.bar:nth-child(1){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -1.05) infinite}.bar:nth-child(2){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.9) infinite}.bar:nth-child(3){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.75) infinite}.bar:nth-child(4){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.6) infinite}.bar:nth-child(5){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.45) infinite}.bar:nth-child(6){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.3) infinite}.bar:nth-child(7){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.15) infinite}.bar:nth-child(8){animation:grow var(--uib-speed) ease-in-out infinite}@keyframes grow{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}\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: CollegeLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'college-loader', template: "<div class=\"container\">\r\n    <div class=\"bar\" *ngFor=\"let bar of bars\"></div>\r\n</div>", styles: [".arc-container{--uib-size: 70px;display:flex;align-items:center;justify-content:center;width:var(--uib-size)}.container{--uib-size: 70px;--uib-color: #cdcdcd;--uib-speed: 1s;--uib-stroke: 3.5px;display:flex;align-items:center;justify-content:space-between;width:var(--uib-size);height:calc(var(--uib-size) * .4)}.bar{width:var(--uib-stroke);height:100%;background-color:var(--uib-color);transition:background-color .3s ease;border-radius:18px}.bar:nth-child(1){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -1.05) infinite}.bar:nth-child(2){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.9) infinite}.bar:nth-child(3){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.75) infinite}.bar:nth-child(4){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.6) infinite}.bar:nth-child(5){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.45) infinite}.bar:nth-child(6){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.3) infinite}.bar:nth-child(7){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.15) infinite}.bar:nth-child(8){animation:grow var(--uib-speed) ease-in-out infinite}@keyframes grow{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SliceBreadcrumbsPipe {
+    transform(items, ...args) {
+        if (!items)
+            return [];
+        items = [...items];
+        if (items?.length > 4)
+            items = items.slice(items?.length - 4, items?.length);
+        return items;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SliceBreadcrumbsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: SliceBreadcrumbsPipe, isStandalone: false, name: "sliceBreadcrumbs" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SliceBreadcrumbsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: false,
+                    name: 'sliceBreadcrumbs'
+                }]
+        }] });
+
+const itemInput = 'item';
+class HerumBreadcrumbsComponent {
+    items;
+    itemToSet;
+    itemEmitter = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes[itemInput]?.currentValue && changes[itemInput].firstChange)
+            this.handleItemInput(this.itemToSet);
+    }
+    _onClick(itemIndex, isLastItem) {
+        if (isLastItem || this.items.length === 1)
+            return;
+        const numberOfItemForRemoval = this.items.length - itemIndex - 1;
+        const startIndexForRemoval = itemIndex + 1;
+        this.items.splice(startIndexForRemoval, numberOfItemForRemoval);
+        this.itemEmitter.emit(this.items);
+    }
+    handleItemInput(itemInput) {
+        this.items.some(item => item.id === itemInput.id) ? this.updateCurrentItem(itemInput) : this.addItem(itemInput);
+    }
+    updateCurrentItem(updatedItem) {
+        const updatedItemIndex = this.items.findIndex(item => item.id === updatedItem.id);
+        if (updatedItemIndex !== (this.items.length - 1))
+            this._onClick(updatedItemIndex, false);
+    }
+    addItem(item) {
+        this.items.push(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumBreadcrumbsComponent, isStandalone: false, selector: "herum-breadcrumbs", inputs: { items: "items", itemToSet: "itemToSet" }, outputs: { itemEmitter: "itemEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n    <li *ngFor=\"let item of (items | sliceBreadcrumbs), let index = index, let last = last\">\r\n        <span class=\"item clickable-text\" [ngClass]=\"{'last-item':last}\"\r\n            (click)=\"_onClick(index,last)\">{{item.name}}</span>\r\n\r\n        <img class=\"chevron\" *ngIf=\"!last\" src=\"../../assets/general/grey-chevron.svg\">\r\n    </li>\r\n</div>", styles: [".last-item{color:var(--text-color);cursor:default}.chevron{margin-inline:4px;transform:rotate(90deg)}.clickable-text{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SliceBreadcrumbsPipe, name: "sliceBreadcrumbs" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumBreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-breadcrumbs', template: "<div class=\"d-flex\">\r\n    <li *ngFor=\"let item of (items | sliceBreadcrumbs), let index = index, let last = last\">\r\n        <span class=\"item clickable-text\" [ngClass]=\"{'last-item':last}\"\r\n            (click)=\"_onClick(index,last)\">{{item.name}}</span>\r\n\r\n        <img class=\"chevron\" *ngIf=\"!last\" src=\"../../assets/general/grey-chevron.svg\">\r\n    </li>\r\n</div>", styles: [".last-item{color:var(--text-color);cursor:default}.chevron{margin-inline:4px;transform:rotate(90deg)}.clickable-text{font-size:12px}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], itemToSet: [{
+                type: Input
+            }], itemEmitter: [{
+                type: Output
+            }] } });
+
+class HerumButtonComponent {
+    type = 'primary';
+    color = 'regular';
+    size = 'medium';
+    roundedCorners = 'default';
+    disabled = false;
+    isLoading = false;
+    name;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumButtonComponent, isStandalone: false, selector: "herum-button", inputs: { type: "type", color: "color", size: "size", roundedCorners: "roundedCorners", disabled: "disabled", isLoading: "isLoading", name: "name" }, ngImport: i0, template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-button', template: "<button userAction class=\"herum-button shadow\" [name]=\"name\"\r\n    [ngClass]=\"[type, color ?? '', size, roundedCorners + '-rounded-corners', isLoading ? 'skeleton' : '']\"\r\n    [disabled]=\"disabled\">\r\n    <ng-content></ng-content>\r\n</button>", styles: ["button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], roundedCorners: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+const CUSTOM_CHECKBOX_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumCheckboxComponent),
+    multi: true,
+};
+class HerumCheckboxComponent {
+    environmentConfig;
+    type;
+    isChecked = false;
+    isBlocked = false;
+    checkedEmitter = new EventEmitter();
+    indeterminate;
+    checked;
+    error;
+    checkboxClasses = '';
+    params;
+    constructor(environmentConfig) {
+        this.environmentConfig = environmentConfig;
+    }
+    ngOnInit() {
+        this.indeterminate = this.environmentConfig.checkboxTypes.indeterminate;
+        this.checked = this.environmentConfig.checkboxTypes.checked;
+        this.error = this.environmentConfig.checkboxTypes.error;
+    }
+    _onClick() {
+        if (this.isBlocked)
+            return;
+        if (this.type === this.environmentConfig.checkboxTypes.indeterminate || this.type === this.environmentConfig.checkboxTypes.checked) {
+            this.type = undefined;
+            this.isChecked = false;
+        }
+        else if (this.type === this.environmentConfig.checkboxTypes.unchecked)
+            this.isChecked = false;
+        else
+            this.isChecked = !this.isChecked;
+        if (this.params) {
+            this.params.value = this.isChecked;
+            this.params.context.componentParent.selectedRowByChildComponent(this.params);
+        }
+        this.checkedEmitter.emit(this.isChecked); // it has to be refactor - working with object
+        this.onChange(this.isChecked); // it has to be refactor - working with object
+    }
+    getCheckboxClasses() {
+        let classes = ``;
+        if (this.type)
+            classes += `${this.type} `;
+        if (this.type !== this.environmentConfig.checkboxTypes.disabled)
+            classes += 'full-opacity ';
+        if (this.isChecked && !this.type)
+            classes += `checked `;
+        return classes.trim();
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (value === null || value === undefined)
+            return;
+        if (typeof value === 'boolean') {
+            this.isChecked = value;
+            return;
+        }
+        this.type = value.type;
+        this.isChecked = value.isChecked;
+    }
+    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: HerumCheckboxComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumCheckboxComponent, isStandalone: false, selector: "herum-checkbox", inputs: { type: "type", isChecked: "isChecked", isBlocked: "isBlocked" }, outputs: { checkedEmitter: "checkedEmitter" }, providers: [CUSTOM_CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "<label class=\"custom-checkbox-container\" [ngClass]=\"isBlocked ? 'not-clickable' : 'cursor-pointer'\"\r\n    (click)=\"_onClick()\">\r\n    <span class=\"unchecked\" [ngClass]=\"getCheckboxClasses()\">\r\n        <img *ngIf=\"(isChecked && !type) || type===checked\" class=\"custom-checkmark-image\"\r\n            src=\"assets/shared/icons/V.svg\" alt=\"Custom Checkmark\">\r\n\r\n        <img class=\"custom-checkmark-image d-block\" *ngIf=\"type===error\" src=\"assets/shared/icons/X.svg\"\r\n            alt=\"Custom Checkmark\">\r\n\r\n        <div *ngIf=\"type===indeterminate\" class=\"indeterminate-shape\"></div>\r\n    </span>\r\n</label>", styles: [".custom-checkbox-container{display:flex;justify-content:center;margin:0}.unchecked{position:relative;opacity:.5;top:0;left:0;height:var(--herum-checkbox-size);width:var(--herum-checkbox-size);border-radius:2px;border:1px solid var(--secondary-color)}.custom-checkmark-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px}.custom-checkmark-image,.indeterminate-shape{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.indeterminate-shape{background:var(--primary-color);height:60%;width:60%;border-radius:1px}.indeterminate{border:1px solid var(--icons-color)}.checked{background:var(--primary-color)}.disabled{background:var(--disabled-background-color);border-color:var(--disabled-border-color)}.error,.checked{border:none!important}.error{background-color:var(--error-color)}.full-opacity{opacity:1}\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: HerumCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-checkbox', providers: [CUSTOM_CHECKBOX_VALUE_ACCESSOR], template: "<label class=\"custom-checkbox-container\" [ngClass]=\"isBlocked ? 'not-clickable' : 'cursor-pointer'\"\r\n    (click)=\"_onClick()\">\r\n    <span class=\"unchecked\" [ngClass]=\"getCheckboxClasses()\">\r\n        <img *ngIf=\"(isChecked && !type) || type===checked\" class=\"custom-checkmark-image\"\r\n            src=\"assets/shared/icons/V.svg\" alt=\"Custom Checkmark\">\r\n\r\n        <img class=\"custom-checkmark-image d-block\" *ngIf=\"type===error\" src=\"assets/shared/icons/X.svg\"\r\n            alt=\"Custom Checkmark\">\r\n\r\n        <div *ngIf=\"type===indeterminate\" class=\"indeterminate-shape\"></div>\r\n    </span>\r\n</label>", styles: [".custom-checkbox-container{display:flex;justify-content:center;margin:0}.unchecked{position:relative;opacity:.5;top:0;left:0;height:var(--herum-checkbox-size);width:var(--herum-checkbox-size);border-radius:2px;border:1px solid var(--secondary-color)}.custom-checkmark-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px}.custom-checkmark-image,.indeterminate-shape{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.indeterminate-shape{background:var(--primary-color);height:60%;width:60%;border-radius:1px}.indeterminate{border:1px solid var(--icons-color)}.checked{background:var(--primary-color)}.disabled{background:var(--disabled-background-color);border-color:var(--disabled-border-color)}.error,.checked{border:none!important}.error{background-color:var(--error-color)}.full-opacity{opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HERUM_SHARED_CONFIG_TOKEN]
+                }] }], propDecorators: { type: [{
+                type: Input
+            }], isChecked: [{
+                type: Input
+            }], isBlocked: [{
+                type: Input
+            }], checkedEmitter: [{
+                type: Output
+            }] } });
+
+const splitKey = 'וגם';
+class HerumChipComponent {
+    title = '';
+    isDeleteButtonNeeded = true;
+    isActive = false;
+    isMenuMode = false;
+    type = 'regular';
+    remove = new EventEmitter();
+    chipsActivation = new EventEmitter();
+    _onRemove() {
+        this.remove.emit(true);
+    }
+    _onChipsSelect() {
+        if (this.isMenuMode)
+            this.isActive = !this.isActive;
+        this.chipsActivation.emit(this.isActive);
+    }
+    get splittedTitle() {
+        if (!this.isTitleToBeSplitted)
+            return null;
+        const titleParts = this.title.split(' ');
+        const splitKeyIndices = [];
+        titleParts.forEach((part, index) => {
+            if (part === splitKey)
+                splitKeyIndices.push(index);
+        });
+        let html = '';
+        let lastIndex = 0;
+        splitKeyIndices.forEach((index) => {
+            html += `<span>${titleParts.slice(lastIndex, index).join(' ')}</span>`;
+            html += ` <b>${titleParts[index]}</b> `;
+            lastIndex = index + 1;
+        });
+        html += `<span>${titleParts.slice(lastIndex).join(' ')}</span>`;
+        return html;
+    }
+    get isTitleToBeSplitted() {
+        return this.title?.includes(splitKey);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumChipComponent, isStandalone: false, selector: "herum-chip", inputs: { title: "title", isDeleteButtonNeeded: "isDeleteButtonNeeded", isActive: "isActive", isMenuMode: "isMenuMode", type: "type" }, outputs: { remove: "remove", chipsActivation: "chipsActivation" }, ngImport: i0, template: "<div class=\"herum-chip-container\" [class]=\"type\" [ngClass]=\"{'active':isActive, 'menu-chip':isMenuMode}\" (click)=\"_onChipsSelect()\"\r\n    dir=\"rtl\">\r\n\r\n    <ng-container *ngIf=\"isTitleToBeSplitted; else defaultTitle\">\r\n        <span [innerHTML]=\"splittedTitle | safeHtml\"></span>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultTitle>{{title}}</ng-template>\r\n\r\n    <img *ngIf=\"isDeleteButtonNeeded\" src=\"../../assets/general/secondary-x.svg\" (click)=\"_onRemove()\">\r\n</div>", styles: [".herum-chip-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;width:fit-content;gap:5px;padding:0 5px;background-color:transparent;color:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:32px;box-shadow:0 0 6px #61606029}.herum-chip-container:hover{background-color:var(--hover-background)}.active{background-color:var(--secondary-color);color:#fff}.active:hover{background-color:var(--darker-secondary-color);color:#fff}.positive,.negative{color:var(--icons-color);border:1px solid var(--icons-color)}.menu-chip{cursor:pointer;font-size:12px;height:24px;text-align:center;justify-content:center;display:flex;padding:0 7px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumChipComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-chip', template: "<div class=\"herum-chip-container\" [class]=\"type\" [ngClass]=\"{'active':isActive, 'menu-chip':isMenuMode}\" (click)=\"_onChipsSelect()\"\r\n    dir=\"rtl\">\r\n\r\n    <ng-container *ngIf=\"isTitleToBeSplitted; else defaultTitle\">\r\n        <span [innerHTML]=\"splittedTitle | safeHtml\"></span>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultTitle>{{title}}</ng-template>\r\n\r\n    <img *ngIf=\"isDeleteButtonNeeded\" src=\"../../assets/general/secondary-x.svg\" (click)=\"_onRemove()\">\r\n</div>", styles: [".herum-chip-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;width:fit-content;gap:5px;padding:0 5px;background-color:transparent;color:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:32px;box-shadow:0 0 6px #61606029}.herum-chip-container:hover{background-color:var(--hover-background)}.active{background-color:var(--secondary-color);color:#fff}.active:hover{background-color:var(--darker-secondary-color);color:#fff}.positive,.negative{color:var(--icons-color);border:1px solid var(--icons-color)}.menu-chip{cursor:pointer;font-size:12px;height:24px;text-align:center;justify-content:center;display:flex;padding:0 7px}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], isDeleteButtonNeeded: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], isMenuMode: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }], chipsActivation: [{
+                type: Output
+            }] } });
+
+const defaultFirstGradient = 'var(--icons-color)';
+class HerumCircularProgressBarComponent {
+    percentage = 65;
+    fill = false;
+    size = 'default-size';
+    firstGradient = defaultFirstGradient;
+    fillColor = 'white';
+    showPercentage = false;
+    displayedContent;
+    displayedContentColorMatchesGradientColor = false;
+    ngOnChanges(changes) {
+        if (changes['percentage'])
+            this.displayedContent = this.displayedContent || this.percentage;
+        if (changes['firstGradient'])
+            this.firstGradient = this.firstGradient || defaultFirstGradient;
+    }
+    getGradientStyle() {
+        return this.fill ?
+            `radial-gradient(closest-side, transparent 79%, transparent 80% 100%), conic-gradient(${this.firstGradient} ${this.percentage}%, #1609291F 80%)` :
+            `radial-gradient(closest-side, ${this.fillColor} 79%, transparent 80% 100%), conic-gradient(${this.firstGradient} ${this.percentage}%, #1609291F 0)`;
+    }
+    get percentageText() {
+        return this.percentage >= 0 ? this.percentage : '-';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumCircularProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumCircularProgressBarComponent, isStandalone: false, selector: "herum-circular-progress-bar", inputs: { percentage: "percentage", fill: "fill", size: "size", firstGradient: "firstGradient", fillColor: "fillColor", showPercentage: "showPercentage", displayedContent: "displayedContent", displayedContentColorMatchesGradientColor: "displayedContentColorMatchesGradientColor" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"progress-bar\" [ngClass]=\"size\" [style.background-image]=\"getGradientStyle()\">\r\n  <span *ngIf=\"showPercentage\" class=\"percentage-text\"\r\n    [style.color]=\"displayedContentColorMatchesGradientColor ? firstGradient : null\">{{ displayedContent }}</span>\r\n  <progress value=\"38\" min=\"0\" max=\"100\" style=\"visibility:hidden;height:0;width:0;\"></progress>\r\n</div>", styles: [".progress-bar{border-radius:50%;position:relative;--default-size: 17px;--big-size: 60px}.progress-bar.default-size{width:var(--default-size);height:var(--default-size)}.progress-bar.big-size{width:var(--big-size);height:var(--big-size)}.progress-bar .percentage-text{background:var(--fliped-primary-color);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;direction:ltr!important;-webkit-text-fill-color:initial!important;position:absolute;font-size:22px;top:50%;left:50%;transform:translate(-50%,-50%)}\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: HerumCircularProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-circular-progress-bar', template: "<div class=\"progress-bar\" [ngClass]=\"size\" [style.background-image]=\"getGradientStyle()\">\r\n  <span *ngIf=\"showPercentage\" class=\"percentage-text\"\r\n    [style.color]=\"displayedContentColorMatchesGradientColor ? firstGradient : null\">{{ displayedContent }}</span>\r\n  <progress value=\"38\" min=\"0\" max=\"100\" style=\"visibility:hidden;height:0;width:0;\"></progress>\r\n</div>", styles: [".progress-bar{border-radius:50%;position:relative;--default-size: 17px;--big-size: 60px}.progress-bar.default-size{width:var(--default-size);height:var(--default-size)}.progress-bar.big-size{width:var(--big-size);height:var(--big-size)}.progress-bar .percentage-text{background:var(--fliped-primary-color);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;direction:ltr!important;-webkit-text-fill-color:initial!important;position:absolute;font-size:22px;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+        }], propDecorators: { percentage: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], firstGradient: [{
+                type: Input
+            }], fillColor: [{
+                type: Input
+            }], showPercentage: [{
+                type: Input
+            }], displayedContent: [{
+                type: Input
+            }], displayedContentColorMatchesGradientColor: [{
+                type: Input
+            }] } });
+
+class HerumDatePickerComponent {
+    elementRef;
+    dateAdapter;
+    changeDetectorRef;
+    activeColor = 'green';
+    hoverColor = 'yellow';
+    minDate;
+    rangeMode = false;
+    selectedDate = new Date();
+    dateChange = new EventEmitter();
+    calendar;
+    hostElement;
+    startDate;
+    endDate;
+    matCalendarContainerHeight;
+    constructor(elementRef, dateAdapter, changeDetectorRef) {
+        this.elementRef = elementRef;
+        this.dateAdapter = dateAdapter;
+        this.changeDetectorRef = changeDetectorRef;
+        this.hostElement = this.elementRef.nativeElement;
+    }
+    ngOnChanges(changes) {
+        if (this.hostElement)
+            this.setStyleProperties(changes);
+        if (changes['selectedDate']?.currentValue)
+            this.handleSelectedDateChange();
+    }
+    setStyleProperties(changes) {
+        if (changes['activeColor']?.currentValue)
+            this.hostElement.style.setProperty(calendarActiveColorCssVariable, this.activeColor);
+        if (changes['hoverColor']?.currentValue)
+            this.hostElement.style.setProperty(calendarHoverColorCssVariable, this.hoverColor);
+    }
+    handleSelectedDateChange() {
+        if (this.calendar && this.selectedDate instanceof Date)
+            this.calendar.activeDate = this.selectedDate;
+        if (this.selectedDate instanceof DateRange) {
+            this.setRangeDates(this.selectedDate.start);
+            this.setRangeDates(this.selectedDate.end);
+            if (this.calendar)
+                this.calendar.activeDate = this.startDate;
+        }
+    }
+    ngAfterViewInit() {
+        this.setMatCalendarContainerHeight();
+        this.changeDetectorRef.detectChanges();
+    }
+    setMatCalendarContainerHeight() {
+        const calendarHeight = this.hostElement.querySelector(calendarLibrarySelector)?.clientHeight;
+        const cellHeight = this.hostElement.querySelector(calendarLibraryBodyCellSelector)?.clientHeight;
+        // if (calendarHeight && cellHeight)
+        //   this.matCalendarContainerHeight = calendarHeight + cellHeight;
+    }
+    _onSelectedDateChange(date) {
+        if (!this.rangeMode) {
+            this.handleSingleDateMode(date);
+            return;
+        }
+        this.handleRangeMode(date);
+    }
+    handleSingleDateMode(date) {
+        this.selectedDate = date;
+        this.dateChange.emit(date);
+    }
+    handleRangeMode(date) {
+        this.setRangeDates(date);
+        this.selectedDate = new DateRange(this.startDate, this.endDate);
+        if (this.startDate && this.endDate)
+            this.dateChange.emit(this.selectedDate);
+    }
+    setRangeDates(date) {
+        if (!date)
+            return;
+        if (!this.startDate) {
+            this.startDate = date;
+            return;
+        }
+        ;
+        if (!this.endDate && this.dateAdapter.compareDate(date, this.startDate) >= 0) {
+            this.endDate = date;
+            return;
+        }
+        ;
+        this.startDate = date;
+        this.endDate = null;
+    }
+    _minDateFilter = (date) => {
+        if (!this.minDate)
+            return true;
+        return date >= this.minDate;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDatePickerComponent, isStandalone: false, selector: "herum-date-picker", inputs: { activeColor: "activeColor", hoverColor: "hoverColor", minDate: "minDate", rangeMode: "rangeMode", selectedDate: "selectedDate" }, outputs: { dateChange: "dateChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ 'height.px': matCalendarContainerHeight }\">\r\n    <mat-calendar #calendar [dateFilter]=\"_minDateFilter\" [selected]=\"selectedDate\"\r\n        (selectedChange)=\"_onSelectedDateChange($event)\">\r\n    </mat-calendar>\r\n</div>", styles: [":host{--active-calendar-color: var(--primary-color);--hover-calendar-color: var(--hovered-item-background-color)}::ng-deep .mat-calendar-body-selected{background:var(--active-calendar-color)!important;color:var(--light-text-color)!important}::ng-deep .mat-button{padding-inline:0!important}::ng-deep .mat-calendar-body-label{font-size:var(--standard-font-size)}::ng-deep .mat-calendar-content{padding-block-end:0px!important}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 #fff!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-calendar-body-in-range:before{background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-header{padding:0!important}::ng-deep .mat-calendar-controls{display:flex;margin:0!important;margin-block-end:20px!important}::ng-deep .mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important}::ng-deep .mat-button-wrapper{position:relative!important;z-index:1!important}::ng-deep .mat-button-focus-overlay,::ng-deep .mat-button-focus-overlay:active{background:transparent!important;background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-body-cell-content,::ng-deep .mat-calendar-table-header th,::ng-deep .mat-calendar-body-label,::ng-deep .mat-button-wrapper{color:var(--title-color)}::ng-deep .mat-calendar-body-cell-content{border-style:none!important;line-height:0!important;border-radius:var(--border-radius)!important}::ng-deep .mat-calendar-table-header-divider:after{background:var(--table-border-color)}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--disabled-text-color)}::ng-deep .mat-calendar-body-range-start:before,::ng-deep .mat-calendar-body-range-end:after{left:0%!important;background:var(--active-calendar-color)!important}::ng-deep .mat-calendar-body-range-start:before{border-top-right-radius:var(--border-radius)!important;border-bottom-right-radius:var(--border-radius)!important}::ng-deep .mat-calendar-body-range-end:after{border-top-left-radius:var(--border-radius)!important;border-bottom-left-radius:var(--border-radius)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-date-picker', template: "<div [ngStyle]=\"{ 'height.px': matCalendarContainerHeight }\">\r\n    <mat-calendar #calendar [dateFilter]=\"_minDateFilter\" [selected]=\"selectedDate\"\r\n        (selectedChange)=\"_onSelectedDateChange($event)\">\r\n    </mat-calendar>\r\n</div>", styles: [":host{--active-calendar-color: var(--primary-color);--hover-calendar-color: var(--hovered-item-background-color)}::ng-deep .mat-calendar-body-selected{background:var(--active-calendar-color)!important;color:var(--light-text-color)!important}::ng-deep .mat-button{padding-inline:0!important}::ng-deep .mat-calendar-body-label{font-size:var(--standard-font-size)}::ng-deep .mat-calendar-content{padding-block-end:0px!important}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 #fff!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-calendar-body-in-range:before{background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-header{padding:0!important}::ng-deep .mat-calendar-controls{display:flex;margin:0!important;margin-block-end:20px!important}::ng-deep .mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,.mat-stroked-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay,::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important}::ng-deep .mat-button-wrapper{position:relative!important;z-index:1!important}::ng-deep .mat-button-focus-overlay,::ng-deep .mat-button-focus-overlay:active{background:transparent!important;background-color:var(--hover-calendar-color)!important}::ng-deep .mat-calendar-body-cell-content,::ng-deep .mat-calendar-table-header th,::ng-deep .mat-calendar-body-label,::ng-deep .mat-button-wrapper{color:var(--title-color)}::ng-deep .mat-calendar-body-cell-content{border-style:none!important;line-height:0!important;border-radius:var(--border-radius)!important}::ng-deep .mat-calendar-table-header-divider:after{background:var(--table-border-color)}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--disabled-text-color)}::ng-deep .mat-calendar-body-range-start:before,::ng-deep .mat-calendar-body-range-end:after{left:0%!important;background:var(--active-calendar-color)!important}::ng-deep .mat-calendar-body-range-start:before{border-top-right-radius:var(--border-radius)!important;border-bottom-right-radius:var(--border-radius)!important}::ng-deep .mat-calendar-body-range-end:after{border-top-left-radius:var(--border-radius)!important;border-bottom-left-radius:var(--border-radius)!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i0.ChangeDetectorRef }], propDecorators: { activeColor: [{
+                type: Input
+            }], hoverColor: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], rangeMode: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], calendar: [{
+                type: ViewChild,
+                args: ['calendar']
+            }] } });
+
+class HerumDownloadFileComponent {
+    fileId;
+    filePath = '';
+    linkText = 'להורדת הקובץ';
+    downloadFile = new EventEmitter();
+    downloadFileElement;
+    ngAfterViewInit() {
+        if (this.downloadFileElement && this.filePath)
+            this.downloadFileElement.nativeElement.setAttribute('href', this.filePath);
+    }
+    _onDownloadFile(fileId) {
+        if (this.filePath)
+            return;
+        this.downloadFile.emit(fileId);
+    }
+    get downloadFileSvgString() {
+        return svgsStrings.downloadFile;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDownloadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDownloadFileComponent, isStandalone: false, selector: "herum-download-file", inputs: { fileId: "fileId", filePath: "filePath", linkText: "linkText" }, outputs: { downloadFile: "downloadFile" }, viewQueries: [{ propertyName: "downloadFileElement", first: true, predicate: ["downloadFile"], descendants: true }], ngImport: i0, template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color)}\n"], dependencies: [{ kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDownloadFileComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-download-file', template: "<a #downloadFile class=\"download-file\" (click)=\"_onDownloadFile(fileId)\">\r\n    <span class=\"download-file-icon\" [innerHTML]=\"downloadFileSvgString | safeHtml\"></span>\r\n    <span class=\"clickable-text\">{{ linkText }}</span>\r\n</a>", styles: [".download-file{display:flex;gap:8px;flex-wrap:wrap;align-content:center;text-decoration:none}.download-file .download-file-icon{width:16px;height:100%;stroke:var(--icons-color)}\n"] }]
+        }], propDecorators: { fileId: [{
+                type: Input
+            }], filePath: [{
+                type: Input
+            }], linkText: [{
+                type: Input
+            }], downloadFile: [{
+                type: Output
+            }], downloadFileElement: [{
+                type: ViewChild,
+                args: ['downloadFile']
+            }] } });
+
+class HerumEllipsisLoaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumEllipsisLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumEllipsisLoaderComponent, isStandalone: false, selector: "herum-ellipsis-loader", ngImport: i0, template: "<div class=\"herum-ellipsis\">\r\n    <div></div>\r\n    <div></div>\r\n    <div></div>\r\n    <div></div>\r\n</div>", styles: [".herum-ellipsis,.herum-ellipsis div{box-sizing:border-box}.herum-ellipsis{display:inline-block;position:relative;width:40px;height:40px;margin:auto}.herum-ellipsis div{position:absolute;top:18px;width:9.33333px;height:9.33333px;border-radius:50%;background:#fff;animation-timing-function:cubic-bezier(0,1,1,0)}.herum-ellipsis div:nth-child(1){left:8px;animation:herum-ellipsis1 .6s infinite}.herum-ellipsis div:nth-child(2){left:4px;animation:herum-ellipsis2 .6s infinite}.herum-ellipsis div:nth-child(3){left:16px;animation:herum-ellipsis2 .6s infinite}.herum-ellipsis div:nth-child(4){left:28px;animation:herum-ellipsis3 .6s infinite}@keyframes herum-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes herum-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes herum-ellipsis2{0%{transform:translate(0)}to{transform:translate(12px)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumEllipsisLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-ellipsis-loader', template: "<div class=\"herum-ellipsis\">\r\n    <div></div>\r\n    <div></div>\r\n    <div></div>\r\n    <div></div>\r\n</div>", styles: [".herum-ellipsis,.herum-ellipsis div{box-sizing:border-box}.herum-ellipsis{display:inline-block;position:relative;width:40px;height:40px;margin:auto}.herum-ellipsis div{position:absolute;top:18px;width:9.33333px;height:9.33333px;border-radius:50%;background:#fff;animation-timing-function:cubic-bezier(0,1,1,0)}.herum-ellipsis div:nth-child(1){left:8px;animation:herum-ellipsis1 .6s infinite}.herum-ellipsis div:nth-child(2){left:4px;animation:herum-ellipsis2 .6s infinite}.herum-ellipsis div:nth-child(3){left:16px;animation:herum-ellipsis2 .6s infinite}.herum-ellipsis div:nth-child(4){left:28px;animation:herum-ellipsis3 .6s infinite}@keyframes herum-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes herum-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes herum-ellipsis2{0%{transform:translate(0)}to{transform:translate(12px)}}\n"] }]
+        }] });
+
+class HerumFormControl extends FormControl {
+    errorMessages = {};
+    currentErrorMessage = '';
+    destroySubject$ = new Subject();
+    /**
+     @comment The component that creates this class should have destroySubject$ so you can listen to its ngOnDestroy life cycle hook so you can unsubscribe statusChangesSubscription
+     */
+    constructor(formState, validatorOrOpts, asyncValidator, errorMessages, componentReference) {
+        super(formState, validatorOrOpts, asyncValidator);
+        if (errorMessages)
+            this.errorMessages = errorMessages;
+        this.statusChanges.pipe(takeUntil(this.destroySubject$)).subscribe(() => this.setCurrentErrorMessage());
+        componentReference.destroySubject$.pipe(takeUntil(this.destroySubject$)).subscribe(() => {
+            this.destroySubject$.next(null);
+            this.destroySubject$.complete();
+        });
+    }
+    setCurrentErrorMessage() {
+        this.currentErrorMessage = this.errors ? this.errorMessages[Object.keys(this.errors)[0]] : null;
+    }
+}
+
+class HerumIconLabelComponent {
+    iconPath = '';
+    isLoading = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumIconLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumIconLabelComponent, isStandalone: false, selector: "herum-icon-label", inputs: { iconPath: "iconPath", isLoading: "isLoading" }, ngImport: i0, template: "<div class=\"label-container\">\r\n    <img [src]=\"iconPath\">\r\n    <p class=\"m-0\" [ngClass]=\"{'content-skeleton': isLoading, 'skeleton': isLoading}\">\r\n        <ng-content *ngIf=\"!isLoading\"></ng-content>\r\n    </p>\r\n</div>", styles: [".label-container{align-items:center;display:flex;gap:10px;flex-direction:row}.content-skeleton{width:50px;height:18px;border-radius:var(--border-radius)}\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: HerumIconLabelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-icon-label', template: "<div class=\"label-container\">\r\n    <img [src]=\"iconPath\">\r\n    <p class=\"m-0\" [ngClass]=\"{'content-skeleton': isLoading, 'skeleton': isLoading}\">\r\n        <ng-content *ngIf=\"!isLoading\"></ng-content>\r\n    </p>\r\n</div>", styles: [".label-container{align-items:center;display:flex;gap:10px;flex-direction:row}.content-skeleton{width:50px;height:18px;border-radius:var(--border-radius)}\n"] }]
+        }], propDecorators: { iconPath: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }] } });
+
+class HerumIndeterminateComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumIndeterminateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumIndeterminateComponent, isStandalone: false, selector: "app-herum-indeterminate", ngImport: i0, template: "<div class=\"checkbox-wrapper-48\">\r\n    <label><input type=\"checkbox\" name=\"cb\"></label>\r\n</div>", styles: [".checkbox-wrapper-48 label{font-size:1.35em}.checkbox-wrapper-48 input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1em;height:1em;font:inherit;border:.1em solid var(--secondary-color);margin-bottom:-.125em}.checkbox-wrapper-48 input[type=checkbox]{border-radius:.25em}.checkbox-wrapper-48 input:checked{border-color:transparent;background:var(--primary-color) border-box;box-shadow:0 0 0 .1em inset #fff}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumIndeterminateComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'app-herum-indeterminate', template: "<div class=\"checkbox-wrapper-48\">\r\n    <label><input type=\"checkbox\" name=\"cb\"></label>\r\n</div>", styles: [".checkbox-wrapper-48 label{font-size:1.35em}.checkbox-wrapper-48 input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1em;height:1em;font:inherit;border:.1em solid var(--secondary-color);margin-bottom:-.125em}.checkbox-wrapper-48 input[type=checkbox]{border-radius:.25em}.checkbox-wrapper-48 input:checked{border-color:transparent;background:var(--primary-color) border-box;box-shadow:0 0 0 .1em inset #fff}\n"] }]
+        }] });
+
+class ConditionalFormControlNameDirective {
+    el;
+    renderer;
+    ngControl;
+    set formControlName(value) {
+        this.controlName = value;
+        this.updateFormControlName();
+    }
+    controlName;
+    constructor(el, renderer, ngControl) {
+        this.el = el;
+        this.renderer = renderer;
+        this.ngControl = ngControl;
+    }
+    ngOnInit() {
+        this.updateFormControlName();
+    }
+    updateFormControlName() {
+        if (this.controlName && this.ngControl) {
+            this.renderer.setAttribute(this.el.nativeElement, 'formControlName', this.controlName);
+        }
+        else {
+            this.renderer.removeAttribute(this.el.nativeElement, 'formControlName');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConditionalFormControlNameDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: ConditionalFormControlNameDirective, isStandalone: false, selector: "[appConditionalFormControlName]", inputs: { formControlName: ["appConditionalFormControlName", "formControlName"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConditionalFormControlNameDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: '[appConditionalFormControlName]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.NgControl }], propDecorators: { formControlName: [{
+                type: Input,
+                args: ['appConditionalFormControlName']
+            }] } });
+
+const emptyNumberInputValue = '0';
+const numericTextType = 'numeric-text';
+class HerumInputFieldComponent {
+    ngControl;
+    cdr;
+    type = 'text';
+    placeholder = defaultPlaceholder$1;
+    disabled = false;
+    isBlocked = false;
+    isValid = true;
+    errorMsg = '';
+    showErrorMsgGap = true;
+    inputValue = '';
+    isLoading = false;
+    id = '';
+    debounceTime = 0;
+    minValue;
+    maxValue;
+    isBlurred = false;
+    touched = false;
+    ltrMode = false;
+    preventMacroKeysPressEvent = [keyboardAsciiCodes.space, keyboardAsciiCodes.right, keyboardAsciiCodes.left];
+    inputValueEmitter = new EventEmitter();
+    inputElement;
+    onKeyPress(event) {
+        const alt = event.target.alt;
+        if ((alt === types.number || alt === numericTextType) && !(event.keyCode >= 48 && event.keyCode <= 57))
+            event.preventDefault();
+    }
+    onPaste(event) {
+        const alt = event.target.alt;
+        if (alt === types.number || alt === numericTextType) {
+            let pastedText = '';
+            if (event.clipboardData && event.clipboardData.getData)
+                pastedText = event.clipboardData.getData('text/plain');
+            else if (window['clipboardData'] && window['clipboardData']['getData'])
+                pastedText = window['clipboardData']['getData']('Text');
+            const numbersOnly = /^[0-9]*$/.test(pastedText);
+            if (!numbersOnly)
+                event.preventDefault();
+        }
+    }
+    formControlName = '';
+    isPasswordVisible = false;
+    inputSubject$ = new Subject();
+    destroySubject$ = new Subject();
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    ngOnInit() {
+        this.initInputSubject$();
+        this.setInputsByFormControl();
+    }
+    initInputSubject$() {
+        this.inputSubject$.pipe(takeUntil(this.destroySubject$), debounceTime(this.debounceTime), tap(value => {
+            this.inputValue = value;
+            const valueToEmit = this.type === types.number ? Number(value) : this.inputValue;
+            this.onChange(valueToEmit);
+            this.inputValueEmitter.emit(valueToEmit);
+        })).subscribe();
+    }
+    setInputsByFormControl() {
+        if (!this.ngControl)
+            return;
+        if (this.ngControl instanceof FormControlName)
+            this.formControlName = this.ngControl.name?.toString() || '';
+        this.ngControl.control.statusChanges.pipe(takeUntil(this.destroySubject$)).subscribe(status => {
+            if (this.ngControl.control instanceof HerumFormControl)
+                this.errorMsg = this.ngControl.control.currentErrorMessage;
+            const controlStatus = this.ngControl.control.status;
+            this.isValid = controlStatus === formStatuses.valid;
+            this.isLoading = controlStatus === formStatuses.pending;
+        });
+    }
+    clearInput() {
+        const isTypeNumber = this.type === types.number;
+        this.inputValue = isTypeNumber ? this.minValue !== undefined ? this.minValue.toString() : emptyNumberInputValue : '';
+        const valueToEmit = isTypeNumber ? Number(this.inputValue) : this.inputValue;
+        this.inputValueEmitter.emit(valueToEmit);
+        this.onChange(valueToEmit);
+    }
+    _onInput(freeText) {
+        this.touched = true;
+        let value = freeText;
+        if (this.type == types.number) {
+            if (!freeText) {
+                this.cdr.detectChanges();
+                this.inputValue = value = emptyNumberInputValue;
+            }
+            if (!freeText.match(regexExpressions.digitsOnly))
+                value = value.replace(/[^0-9]/g, '');
+            this.errorMsg = this.getRangeErrorMessage(freeText);
+            this.isValid = !this.errorMsg;
+            if (this.ngControl)
+                this.setNgControlRangeValidator();
+            if (!this.isValid)
+                return;
+        }
+        this.inputSubject$.next(value);
+    }
+    setNgControlRangeValidator() {
+        const inputNumberRangeValidatorName = 'inputNumberRangeValidator';
+        if (!this.isValid) {
+            this.ngControl.control.setErrors({ [inputNumberRangeValidatorName]: this.isValid });
+            return;
+        }
+        if (this.ngControl.control.errors)
+            delete this.ngControl.control.errors[inputNumberRangeValidatorName];
+    }
+    getRangeErrorMessage(freeText) {
+        const parsedValue = parseFloat(freeText);
+        const hasMinValue = Number.isFinite(this.minValue);
+        const hasMaxValue = Number.isFinite(this.maxValue);
+        const insertValue = 'נא להזין ערך';
+        if (hasMinValue && hasMaxValue && (parsedValue < this.minValue || parsedValue > this.maxValue))
+            return (this.minValue === this.maxValue) ? `הערך שניתן להזין הוא${this.maxValue}` : `${insertValue} מ ${this.minValue} עד ${this.maxValue}`;
+        else if (hasMinValue && !hasMaxValue && parsedValue <= this.minValue - 1)
+            return `${insertValue} גדול מ${this.minValue - 1}`;
+        else if (!hasMinValue && hasMaxValue && parsedValue >= this.maxValue + 1)
+            return `${insertValue} קטן מ${this.maxValue + 1}`;
+        else
+            return '';
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (this.inputValue !== value)
+            this.inputValue = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    _setBlurred() {
+        this.isBlurred = true;
+    }
+    _onTogglePasswordVisibility(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        this.isPasswordVisible = !this.isPasswordVisible;
+    }
+    get searchImageSvg() {
+        return svgsStrings.search;
+    }
+    get whiteSearchImageSvg() {
+        return svgsStrings.search;
+    }
+    get xImageSvg() {
+        return svgsStrings.X;
+    }
+    get inputHtmlType() {
+        if (this.type === 'password')
+            return this.isPasswordVisible ? 'text' : 'password';
+        if (this.type === 'number')
+            return 'number';
+        return 'text';
+    }
+    get passwordEyeSource() {
+        return `/assets/loginPage/icons/eye-${this.isPasswordVisible ? 'open' : 'closed'}.svg`;
+    }
+    get isRequired() {
+        const control = this.ngControl?.control;
+        if (!control)
+            return false;
+        const anyControl = control;
+        if (typeof anyControl.hasValidator === 'function') {
+            return anyControl.hasValidator(Validators.required);
+        }
+        if (!control.validator)
+            return false;
+        const result = control.validator({});
+        return !!result['required'];
+    }
+    get shouldShowClearIcon() {
+        return !!this.inputValue && !this.disabled && !this.isBlocked && this.type !== 'password';
+    }
+    get shouldShowPasswordToggle() {
+        return this.type === 'password' && !this.disabled && !this.isBlocked;
+    }
+    get shouldShowErrorMsg() {
+        return (!this.isValid && this.touched && this.isBlurred && this.showErrorMsgGap && !!this.errorMsg);
+    }
+    ngOnDestroy() {
+        if (this.ngControl) {
+            this.destroySubject$.next(null);
+            this.destroySubject$.complete();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumInputFieldComponent, isStandalone: false, selector: "herum-input-field", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", isBlocked: "isBlocked", isValid: "isValid", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", inputValue: "inputValue", isLoading: "isLoading", id: "id", debounceTime: "debounceTime", minValue: "minValue", maxValue: "maxValue", isBlurred: "isBlurred", touched: "touched", ltrMode: "ltrMode", preventMacroKeysPressEvent: "preventMacroKeysPressEvent" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" }, properties: { "class.required-control": "isRequired" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\"\r\n            (mousedown)=\"$event.preventDefault()\" (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{errorMsg}}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-input-field', host: { '[class.required-control]': 'isRequired' }, template: "<div class=\"input-container\" [class]=\"type\">\r\n    <input [type]=\"inputHtmlType\" dir=\"rtl\" class=\"w-100 input-field\"\r\n        [ngClass]=\"{'error-input':!isValid && !isLoading && touched && isBlurred , 'transparent-text': isLoading, 'ltr':ltrMode}\"\r\n        [ngStyle]=\"{'resize': type == 'textBox' ? 'vertical' : 'none'}\" [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || isBlocked || isLoading\" [(ngModel)]=\"inputValue\" [alt]=\"type\"\r\n        [id]=\"id ? id :formControlName\" [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\"\r\n        (ngModelChange)=\"_onInput($event)\" (blur)=\"_setBlurred()\" />\r\n\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <ng-container *ngIf=\"type=='search' || type=='search-blur'\">\r\n            <span class=\"icon\" [innerHTML]=\"searchImageSvg | safeHtml\" *ngIf=\"!inputValue && !disabled\">\r\n            </span>\r\n\r\n            <span class=\"icon\" *ngIf=\"disabled\">\r\n                <img src=\"assets/shared/icons/input/grey-search.png\" />\r\n            </span>\r\n        </ng-container>\r\n\r\n        <span class=\"icon clickable small-icon\" *ngIf=\"shouldShowClearIcon\" (click)=\"clearInput()\">\r\n            <span class=\"small-icon\" [innerHTML]=\"xImageSvg | safeHtml\"></span>\r\n        </span>\r\n\r\n        <span class=\"icon clickable eye-icon\" *ngIf=\"shouldShowPasswordToggle\"\r\n            (mousedown)=\"$event.preventDefault()\" (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{errorMsg}}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isBlocked: [{
+                type: Input
+            }], isValid: [{
+                type: Input
+            }], errorMsg: [{
+                type: Input
+            }], showErrorMsgGap: [{
+                type: Input
+            }], inputValue: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], isBlurred: [{
+                type: Input
+            }], touched: [{
+                type: Input
+            }], ltrMode: [{
+                type: Input
+            }], preventMacroKeysPressEvent: [{
+                type: Input
+            }], inputValueEmitter: [{
+                type: Output
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], onKeyPress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+
+class HerumLogoComponent {
+    logoTextSize = 'defaultSize';
+    logoTextColor = 'primaryColor';
+    logoText = 'בית הספר הדיגיטלי לחירום';
+    get logoTextWidth() {
+        return this.logoTextSize === 'defaultSize' ? 'default-text-size-width' : 'big-text-size-width';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumLogoComponent, isStandalone: false, selector: "herum-logo", inputs: { logoTextSize: "logoTextSize", logoTextColor: "logoTextColor", logoText: "logoText" }, ngImport: i0, template: "<div class=\"logo-container\">\r\n    <img src=\"/lib/assets/general/owl-logo.svg\" id=\"logo\">\r\n    <span class=\"logo-text\" [ngClass]=\"[logoTextSize, logoTextColor, logoTextWidth]\">{{logoText}}</span>\r\n</div>", styles: [".logo-container{display:flex;align-items:center;gap:8px}.logo-text{font-size:14px;color:var(--icons-color);font-weight:700}#logo{width:3vh}.default-text-size-width{width:9vw}.big-text-size-width{width:100%}.primaryColor{color:var(--icons-color)}.secondaryColor{color:var(--text-color)}.bigSize{font-size:24px}.defaultSize{font-size:.8vw}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumLogoComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-logo', template: "<div class=\"logo-container\">\r\n    <img src=\"/lib/assets/general/owl-logo.svg\" id=\"logo\">\r\n    <span class=\"logo-text\" [ngClass]=\"[logoTextSize, logoTextColor, logoTextWidth]\">{{logoText}}</span>\r\n</div>", styles: [".logo-container{display:flex;align-items:center;gap:8px}.logo-text{font-size:14px;color:var(--icons-color);font-weight:700}#logo{width:3vh}.default-text-size-width{width:9vw}.big-text-size-width{width:100%}.primaryColor{color:var(--icons-color)}.secondaryColor{color:var(--text-color)}.bigSize{font-size:24px}.defaultSize{font-size:.8vw}\n"] }]
+        }], propDecorators: { logoTextSize: [{
+                type: Input
+            }], logoTextColor: [{
+                type: Input
+            }], logoText: [{
+                type: Input
+            }] } });
+
+class HerumOptionsListComponent {
+    options;
+    selectedOptions;
+    isContentInsideExpendablePanel = false;
+    isInternalMode = true;
+    selectedOptionsEmitter = new EventEmitter();
+    _onSelect(option) {
+        this.selectedOptionsEmitter.emit(option);
+    }
+    isOptionSelected(option) {
+        if (!option)
+            return false;
+        return this.selectedOptions.some(selectedOption => selectedOption.id === option.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumOptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumOptionsListComponent, isStandalone: false, selector: "herum-options-list", inputs: { options: "options", selectedOptions: "selectedOptions", isContentInsideExpendablePanel: "isContentInsideExpendablePanel", isInternalMode: "isInternalMode" }, outputs: { selectedOptionsEmitter: "selectedOptionsEmitter" }, ngImport: i0, template: "<a class=\"option\" *ngFor=\"let option of options\" (click)=\"_onSelect(option)\"\r\n    [ngClass]=\"{\r\n        'selected': isOptionSelected(option),\r\n        'expendable-panel-content': isContentInsideExpendablePanel,\r\n        'internal': isInternalMode}\">\r\n    {{ option?.name }}\r\n</a>", styles: [".option{color:#000;padding:12px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.option:hover{background-color:var(--hover-background);cursor:pointer}.selected{color:var(--icons-color)!important;font-weight:bolder}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumOptionsListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-options-list', template: "<a class=\"option\" *ngFor=\"let option of options\" (click)=\"_onSelect(option)\"\r\n    [ngClass]=\"{\r\n        'selected': isOptionSelected(option),\r\n        'expendable-panel-content': isContentInsideExpendablePanel,\r\n        'internal': isInternalMode}\">\r\n    {{ option?.name }}\r\n</a>", styles: [".option{color:#000;padding:12px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.option:hover{background-color:var(--hover-background);cursor:pointer}.selected{color:var(--icons-color)!important;font-weight:bolder}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], selectedOptions: [{
+                type: Input
+            }], isContentInsideExpendablePanel: [{
+                type: Input
+            }], isInternalMode: [{
+                type: Input
+            }], selectedOptionsEmitter: [{
+                type: Output
+            }] } });
+
+class HerumRecursiveHierarchyOptionsListComponent {
+    options;
+    selectedOptions;
+    recursiveTitledOption;
+    selectedOptionsEmitter = new EventEmitter();
+    selectedRecursiveOptionsEmitter = new EventEmitter();
+    _onSelect(option) {
+        this.selectedOptionsEmitter.emit(option.data);
+        this.selectedRecursiveOptionsEmitter.emit(option);
+    }
+    _isOptionSelected(option) {
+        return this.selectedOptions.some(selectedOption => selectedOption.id === option.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumRecursiveHierarchyOptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumRecursiveHierarchyOptionsListComponent, isStandalone: false, selector: "herum-recursive-hierarchy-options-list", inputs: { options: "options", selectedOptions: "selectedOptions", recursiveTitledOption: "recursiveTitledOption" }, outputs: { selectedOptionsEmitter: "selectedOptionsEmitter", selectedRecursiveOptionsEmitter: "selectedRecursiveOptionsEmitter" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"recursiveTitledOptionTemplate; context:{ $implicit: recursiveTitledOption }\">\r\n</ng-container>\r\n\r\n<ng-template #recursiveTitledOptionTemplate let-recursiveTitledOption>\r\n    <ng-container>\r\n        <div class=\"option-container internal\">\r\n            <img src=\"../../assets/general/chevron.svg\" class=\"internal\"\r\n                *ngIf=\"recursiveTitledOption.childrens.length > 0\"\r\n                [class]=\"recursiveTitledOption.isExpended ? 'open' : 'closed'\"\r\n                (click)=\"recursiveTitledOption.isExpended=!recursiveTitledOption.isExpended\">\r\n            <a class=\"option internal w-100\" (click)=\"_onSelect(recursiveTitledOption)\"\r\n                [ngClass]=\"{'selected': _isOptionSelected(recursiveTitledOption)}\">\r\n                {{recursiveTitledOption.data.name}}\r\n            </a>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"recursiveTitledOption.isExpended\">\r\n            <div class=\"childrens\">\r\n                <ng-container *ngFor=\"let children of recursiveTitledOption.childrens\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveTitledOptionTemplate; context:{ $implicit: children }\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>", styles: [".option-container{display:flex;align-items:center;padding-right:8px}.closed{cursor:pointer;transform:rotate(90deg)}.open{cursor:pointer;transform:rotate(0)}.option{color:#000;padding:12px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.option:hover{background-color:var(--hover-background);cursor:pointer}.selected{color:var(--icons-color)!important;font-weight:bolder}.childrens{padding-right:16px}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumRecursiveHierarchyOptionsListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-recursive-hierarchy-options-list', template: "<ng-container *ngTemplateOutlet=\"recursiveTitledOptionTemplate; context:{ $implicit: recursiveTitledOption }\">\r\n</ng-container>\r\n\r\n<ng-template #recursiveTitledOptionTemplate let-recursiveTitledOption>\r\n    <ng-container>\r\n        <div class=\"option-container internal\">\r\n            <img src=\"../../assets/general/chevron.svg\" class=\"internal\"\r\n                *ngIf=\"recursiveTitledOption.childrens.length > 0\"\r\n                [class]=\"recursiveTitledOption.isExpended ? 'open' : 'closed'\"\r\n                (click)=\"recursiveTitledOption.isExpended=!recursiveTitledOption.isExpended\">\r\n            <a class=\"option internal w-100\" (click)=\"_onSelect(recursiveTitledOption)\"\r\n                [ngClass]=\"{'selected': _isOptionSelected(recursiveTitledOption)}\">\r\n                {{recursiveTitledOption.data.name}}\r\n            </a>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"recursiveTitledOption.isExpended\">\r\n            <div class=\"childrens\">\r\n                <ng-container *ngFor=\"let children of recursiveTitledOption.childrens\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveTitledOptionTemplate; context:{ $implicit: children }\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>", styles: [".option-container{display:flex;align-items:center;padding-right:8px}.closed{cursor:pointer;transform:rotate(90deg)}.open{cursor:pointer;transform:rotate(0)}.option{color:#000;padding:12px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.option:hover{background-color:var(--hover-background);cursor:pointer}.selected{color:var(--icons-color)!important;font-weight:bolder}.childrens{padding-right:16px}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], selectedOptions: [{
+                type: Input
+            }], recursiveTitledOption: [{
+                type: Input
+            }], selectedOptionsEmitter: [{
+                type: Output
+            }], selectedRecursiveOptionsEmitter: [{
+                type: Output
+            }] } });
+
+const CUSTOM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumMultiSelectComponent),
+    multi: true,
+};
+const selectedOptionsInput = 'selectedOptionsInput';
+const optionsInput$1 = 'options';
+const titledOptionsList = 'titledOptionsList';
+class HerumMultiSelectComponent {
+    onClick(event) {
+        this.closeDropdown(event);
+    }
+    placeholder = 'בחר/י...';
+    options;
+    titledOptionsList;
+    recursiveTitledOption;
+    selectedOptionsInput;
+    maxChips = 2;
+    disabled = false;
+    size = 'default';
+    isDropDownInPositionFixed = false;
+    dropDownDirection = 'downwards';
+    isMultiHeads = false;
+    selectedOptions = new EventEmitter();
+    selectedRecursiveOptions = new EventEmitter();
+    filterInput;
+    dropContainer;
+    filteredOptions;
+    filteredTitledOptionsList;
+    selectedOptionsValue = [];
+    isDropdownOpen = false;
+    isShowAll = false;
+    currentDropdownId = '';
+    destroySubject$ = new Subject();
+    componentId = '';
+    ngOnChanges(changes) {
+        if (changes[selectedOptionsInput] && changes[selectedOptionsInput].currentValue?.length && !this.selectedOptionsValue.length)
+            this.selectedOptionsValue = changes[selectedOptionsInput].currentValue;
+        if (changes[optionsInput$1] && changes[optionsInput$1].currentValue?.length && !this.filteredOptions)
+            this.filteredOptions = changes[optionsInput$1].currentValue;
+        if (changes[titledOptionsList] && changes[titledOptionsList].currentValue?.length)
+            this.filteredTitledOptionsList = changes[titledOptionsList].currentValue;
+    }
+    ngAfterViewInit() {
+        this.componentId = v4();
+        this.dropContainer.nativeElement.id += `component-id-${this.componentId}`;
+    }
+    _onStopPropagation(event) {
+        event.stopPropagation();
+    }
+    _onFilterDropDown(text) {
+        if (!text) {
+            this.setFilteredOptionsTypes();
+            return;
+        }
+        this.getFilteredOptions(text);
+    }
+    setFilteredOptionsTypes() {
+        if (this.options)
+            this.filteredOptions = this.options;
+        else if (this.filteredTitledOptionsList) {
+            this.filteredTitledOptionsList = this.titledOptionsList.map(titledOptions => ({
+                title: titledOptions.title,
+                options: titledOptions.options
+            }));
+        }
+    }
+    getFilteredOptions(text) {
+        if (this.titledOptionsList) {
+            this.filteredTitledOptionsList = this.titledOptionsList.map(titledOptions => ({
+                title: titledOptions.title,
+                options: this.getFilteredList(titledOptions.options, text)
+            }));
+        }
+        else
+            this.filteredOptions = this.options.filter(filteredOption => filteredOption.name.includes(text));
+    }
+    getFilteredList(options, text) {
+        return options.filter(option => option?.name.includes(text));
+    }
+    _select(option) {
+        this.resetFiltering();
+        if (this.selectedOptionsValue.find((selectedOption) => selectedOption.id === option.id))
+            this.removeSelectedOption(option);
+        else
+            this.selectedOptionsValue.push(option);
+        this.onChange(this.selectedOptionsValue);
+        this.selectedOptions.emit(this.selectedOptionsValue);
+    }
+    _selectRecursive(selectedRecursiveOptions) {
+        this.selectedRecursiveOptions.emit(selectedRecursiveOptions);
+    }
+    removeSelectedOption(option) {
+        const index = this.selectedOptionsValue.findIndex(((selectedOption) => selectedOption.id === option.id));
+        if (index >= 0)
+            this.selectedOptionsValue.splice(index, 1);
+        this.onChange(this.selectedOptionsValue);
+        this.selectedOptions.emit(this.selectedOptionsValue);
+    }
+    getLimitedList() {
+        if (this.selectedOptionsValue?.length < this.maxChips)
+            return this.selectedOptionsValue;
+        return this.selectedOptionsValue.slice(0, this.maxChips);
+    }
+    _getHiddenOptions() {
+        return this.selectedOptionsValue.map(selectedOptionValue => selectedOptionValue.name).slice(this.maxChips).join(',');
+    }
+    showAll() {
+        this.isShowAll = !this.isShowAll;
+    }
+    isOptionSelected(option) {
+        return this.selectedOptionsValue.find((selectedOption) => selectedOption.id === option.id);
+    }
+    toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+    }
+    closeDropdown(event) {
+        if (!this.isDropdownOpen)
+            return;
+        const isClickedOutsideComponent = event.composedPath().some(path => path.id?.includes(this.componentId));
+        if (!event.target.matches('.internal') || !isClickedOutsideComponent) {
+            this.isDropdownOpen = false;
+            if (this.filterInput)
+                this.resetFiltering();
+        }
+    }
+    resetFiltering() {
+        this.filterInput?.clearInput();
+        this.filteredOptions = this.options;
+    }
+    get dropdownClasses() {
+        let classes = `dropdown-content dropdown-${this.dropDownDirection} ${this.size}-dropdown`;
+        if (this.isDropDownInPositionFixed)
+            classes += ' fixed';
+        classes += (this.filteredOptions?.length || this.filteredTitledOptionsList?.length) ? ' scrollable-settings' :
+            (Array.isArray(this.recursiveTitledOption) && this.recursiveTitledOption?.length) ? ' big-scroll-view' : ' overflow-hidden';
+        return classes;
+    }
+    hasNoResults() {
+        if (this.titledOptionsList)
+            return this.filteredTitledOptionsList?.every(filteredTitledOptions => filteredTitledOptions.options.length === 0);
+        return !this.filteredOptions?.length && !this.recursiveTitledOption;
+    }
+    get optionsLength() {
+        if (this.titledOptionsList) {
+            let optionsList = this.titledOptionsList?.map(titledOptions => titledOptions.options);
+            return optionsList.reduce((total, currentArray) => { return total + currentArray.length; }, 0);
+        }
+        return this.options?.length;
+    }
+    get _getDropdownStates() {
+        return getDropdownAnimationStates(this.isDropdownOpen, this.dropDownDirection);
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(selectedOptionsValue) {
+        this.selectedOptionsValue = selectedOptionsValue || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    showErrors() { }
+    ngOnDestroy() {
+        this.destroySubject$.next(null);
+        this.destroySubject$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumMultiSelectComponent, isStandalone: false, selector: "herum-multi-select", inputs: { placeholder: "placeholder", options: "options", titledOptionsList: "titledOptionsList", recursiveTitledOption: "recursiveTitledOption", selectedOptionsInput: "selectedOptionsInput", maxChips: "maxChips", disabled: "disabled", size: "size", isDropDownInPositionFixed: "isDropDownInPositionFixed", dropDownDirection: "dropDownDirection", isMultiHeads: "isMultiHeads" }, outputs: { selectedOptions: "selectedOptions", selectedRecursiveOptions: "selectedRecursiveOptions" }, host: { listeners: { "window:click": "onClick($event)" } }, providers: [CUSTOM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "dropContainer", first: true, predicate: ["dropContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\" [ngClass]=\"{'w-100': size === 'responsive'}\">\r\n    <button class=\"drop-button internal\" [class]=\"size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\" (click)=\"toggleDropdown()\">\r\n        <span class=\"button-placeholder internal\" *ngIf=\"!selectedOptionsValue?.length\">{{placeholder}}</span>\r\n\r\n        <div class=\"herum-chips-container\">\r\n            <herum-chip *ngFor=\"let option of getLimitedList()\" [title]=\"option.name\"\r\n                (remove)=\"removeSelectedOption(option)\"></herum-chip>\r\n\r\n            <ng-container *ngIf=\"selectedOptionsValue && selectedOptionsValue.length > maxChips\">\r\n                <herum-chip class=\"last-chip\" [matTooltip]=\"_getHiddenOptions()\"\r\n                    [title]=\"(selectedOptionsValue.length - maxChips) + '+'\" [isDeleteButtonNeeded]=\"false\">\r\n                </herum-chip>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg  class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\" viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div id=\"myDropdown\" class=\"internal\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"optionsLength>2\" class=\"input-filter\" [type]=\"'search'\"\r\n            [placeholder]=\"'\u05D7\u05E4\u05E9/\u05D9 \u05E2\u05E8\u05DA \u05DE\u05D1\u05D5\u05E7\u05E9...'\" (click)=\"_onStopPropagation($event)\"\r\n            (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n\r\n        <ng-container *ngIf=\"options\">\r\n            <herum-options-list [options]=\"filteredOptions\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-options-list>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"titledOptionsList\">\r\n            <ng-container *ngFor=\"let filteredTitledOptions of filteredTitledOptionsList\">\r\n                <herum-expendable-panel [title]=\"filteredTitledOptions.title\" [isBoldTitle]=\"true\">\r\n                    <herum-options-list [options]=\"filteredTitledOptions.options\"\r\n                        [isContentInsideExpendablePanel]=\"true\" [selectedOptions]=\"selectedOptionsValue\"\r\n                        (selectedOptionsEmitter)=\"_select($event)\"></herum-options-list>\r\n                </herum-expendable-panel>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"recursiveTitledOption\">\r\n            <ng-container *ngIf=\"isMultiHeads\">\r\n                <herum-recursive-hierarchy-options-list *ngFor=\"let treeHead of recursiveTitledOption\"\r\n                    [recursiveTitledOption]=\"treeHead\" [selectedOptions]=\"selectedOptionsValue\"\r\n                    (selectedOptionsEmitter)=\"_select($event)\"\r\n                    (selectedRecursiveOptionsEmitter)=\"_selectRecursive($event)\">\r\n                </herum-recursive-hierarchy-options-list>\r\n            </ng-container>\r\n\r\n            <herum-recursive-hierarchy-options-list *ngIf=\"!isMultiHeads\"\r\n                [recursiveTitledOption]=\"recursiveTitledOption\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-recursive-hierarchy-options-list>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"hasNoResults()\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".drop-button{gap:8px}.button-placeholder{color:var(--disabled-text-color)}.last-chip{margin-inline-end:20px}.herum-chips-container{display:flex;gap:8px}.big-scroll-view{overflow-y:auto;max-height:600px}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HerumChipComponent, selector: "herum-chip", inputs: ["title", "isDeleteButtonNeeded", "isActive", "isMenuMode", "type"], outputs: ["remove", "chipsActivation"] }, { kind: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }, { kind: "component", type: HerumOptionsListComponent, selector: "herum-options-list", inputs: ["options", "selectedOptions", "isContentInsideExpendablePanel", "isInternalMode"], outputs: ["selectedOptionsEmitter"] }, { kind: "component", type: HerumRecursiveHierarchyOptionsListComponent, selector: "herum-recursive-hierarchy-options-list", inputs: ["options", "selectedOptions", "recursiveTitledOption"], outputs: ["selectedOptionsEmitter", "selectedRecursiveOptionsEmitter"] }], animations: [openClose] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-multi-select', providers: [CUSTOM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], animations: [openClose], template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\" [ngClass]=\"{'w-100': size === 'responsive'}\">\r\n    <button class=\"drop-button internal\" [class]=\"size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\" (click)=\"toggleDropdown()\">\r\n        <span class=\"button-placeholder internal\" *ngIf=\"!selectedOptionsValue?.length\">{{placeholder}}</span>\r\n\r\n        <div class=\"herum-chips-container\">\r\n            <herum-chip *ngFor=\"let option of getLimitedList()\" [title]=\"option.name\"\r\n                (remove)=\"removeSelectedOption(option)\"></herum-chip>\r\n\r\n            <ng-container *ngIf=\"selectedOptionsValue && selectedOptionsValue.length > maxChips\">\r\n                <herum-chip class=\"last-chip\" [matTooltip]=\"_getHiddenOptions()\"\r\n                    [title]=\"(selectedOptionsValue.length - maxChips) + '+'\" [isDeleteButtonNeeded]=\"false\">\r\n                </herum-chip>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg  class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\" viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div id=\"myDropdown\" class=\"internal\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"optionsLength>2\" class=\"input-filter\" [type]=\"'search'\"\r\n            [placeholder]=\"'\u05D7\u05E4\u05E9/\u05D9 \u05E2\u05E8\u05DA \u05DE\u05D1\u05D5\u05E7\u05E9...'\" (click)=\"_onStopPropagation($event)\"\r\n            (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n\r\n        <ng-container *ngIf=\"options\">\r\n            <herum-options-list [options]=\"filteredOptions\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-options-list>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"titledOptionsList\">\r\n            <ng-container *ngFor=\"let filteredTitledOptions of filteredTitledOptionsList\">\r\n                <herum-expendable-panel [title]=\"filteredTitledOptions.title\" [isBoldTitle]=\"true\">\r\n                    <herum-options-list [options]=\"filteredTitledOptions.options\"\r\n                        [isContentInsideExpendablePanel]=\"true\" [selectedOptions]=\"selectedOptionsValue\"\r\n                        (selectedOptionsEmitter)=\"_select($event)\"></herum-options-list>\r\n                </herum-expendable-panel>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"recursiveTitledOption\">\r\n            <ng-container *ngIf=\"isMultiHeads\">\r\n                <herum-recursive-hierarchy-options-list *ngFor=\"let treeHead of recursiveTitledOption\"\r\n                    [recursiveTitledOption]=\"treeHead\" [selectedOptions]=\"selectedOptionsValue\"\r\n                    (selectedOptionsEmitter)=\"_select($event)\"\r\n                    (selectedRecursiveOptionsEmitter)=\"_selectRecursive($event)\">\r\n                </herum-recursive-hierarchy-options-list>\r\n            </ng-container>\r\n\r\n            <herum-recursive-hierarchy-options-list *ngIf=\"!isMultiHeads\"\r\n                [recursiveTitledOption]=\"recursiveTitledOption\" [selectedOptions]=\"selectedOptionsValue\"\r\n                (selectedOptionsEmitter)=\"_select($event)\">\r\n            </herum-recursive-hierarchy-options-list>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"hasNoResults()\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".drop-button{gap:8px}.button-placeholder{color:var(--disabled-text-color)}.last-chip{margin-inline-end:20px}.herum-chips-container{display:flex;gap:8px}.big-scroll-view{overflow-y:auto;max-height:600px}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"] }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], titledOptionsList: [{
+                type: Input
+            }], recursiveTitledOption: [{
+                type: Input
+            }], selectedOptionsInput: [{
+                type: Input
+            }], maxChips: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isDropDownInPositionFixed: [{
+                type: Input
+            }], dropDownDirection: [{
+                type: Input
+            }], isMultiHeads: [{
+                type: Input
+            }], selectedOptions: [{
+                type: Output
+            }], selectedRecursiveOptions: [{
+                type: Output
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], dropContainer: [{
+                type: ViewChild,
+                args: ['dropContainer']
+            }] } });
+
+class HerumNarrowCollectionMenuItemComponent {
+    index;
+    item;
+    itemState;
+    itemEmitter = new EventEmitter();
+    isAvailable;
+    isActive;
+    ngOnChanges(changes) {
+        if (changes['itemState'])
+            this.setItemState();
+    }
+    _onSelectItem() {
+        this.itemEmitter.emit(this.item);
+    }
+    setItemState() {
+        switch (this.itemState) {
+            case ResourceState.default:
+                break;
+            case ResourceState.isActive:
+                this.isActive = true;
+                break;
+            case ResourceState.isAvailable:
+                this.isAvailable = true;
+                break;
+            default:
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNarrowCollectionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumNarrowCollectionMenuItemComponent, isStandalone: false, selector: "herum-narrow-collection-menu-item", inputs: { index: "index", item: "item", itemState: "itemState" }, outputs: { itemEmitter: "itemEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item\" (click)=\"_onSelectItem()\" [ngClass]=\"{'not-seen': isAvailable,'active-item': isActive}\">\r\n    {{index}}\r\n</div>", styles: [".item{padding:8px;justify-content:center;align-items:center;display:flex;font-weight:700;width:100%;height:34px;cursor:pointer}.item:hover{background-color:var(--item-hover-color)}.not-seen{opacity:.5}.active-item{background:var(--icons-color-as-bg);color:var(--icons-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNarrowCollectionMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-narrow-collection-menu-item', template: "<div class=\"item\" (click)=\"_onSelectItem()\" [ngClass]=\"{'not-seen': isAvailable,'active-item': isActive}\">\r\n    {{index}}\r\n</div>", styles: [".item{padding:8px;justify-content:center;align-items:center;display:flex;font-weight:700;width:100%;height:34px;cursor:pointer}.item:hover{background-color:var(--item-hover-color)}.not-seen{opacity:.5}.active-item{background:var(--icons-color-as-bg);color:var(--icons-color)}\n"] }]
+        }], propDecorators: { index: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], itemState: [{
+                type: Input
+            }], itemEmitter: [{
+                type: Output
+            }] } });
+
+class HerumNoResultMessageComponent {
+    mainTitle = 'לא נמצאו תוצאות לחיפוש שלך';
+    secondaryTitle = 'ניתן לנסות לחפש משהו אחר שיניב אולי תוצאות';
+    alignItems = 'center';
+    iconSize = 'small';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNoResultMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumNoResultMessageComponent, isStandalone: false, selector: "herum-no-result-message", inputs: { mainTitle: "mainTitle", secondaryTitle: "secondaryTitle", alignItems: "alignItems", iconSize: "iconSize" }, ngImport: i0, template: "<div class=\"no-result-container\" [ngClass]=\"alignItems\">\r\n    <img [ngClass]=\"iconSize\" src=\"assets/shared/icons/no-result-owl.png\">\r\n\r\n    <div class=\"titles-container\" [ngClass]=\"alignItems\">\r\n        <h1 class=\"section-big-title\">{{ mainTitle }}</h1>\r\n        <h2 class=\"section-title\"> {{ secondaryTitle }}</h2>\r\n    </div>\r\n</div>", styles: [".titles-container,.no-result-container{display:flex;flex-direction:column}.no-result-container{margin-block-start:16px;gap:16px}.center{align-items:center}.right{align-items:flex-start}.big{padding-right:88px;height:100%}.small{height:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumNoResultMessageComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-no-result-message', template: "<div class=\"no-result-container\" [ngClass]=\"alignItems\">\r\n    <img [ngClass]=\"iconSize\" src=\"assets/shared/icons/no-result-owl.png\">\r\n\r\n    <div class=\"titles-container\" [ngClass]=\"alignItems\">\r\n        <h1 class=\"section-big-title\">{{ mainTitle }}</h1>\r\n        <h2 class=\"section-title\"> {{ secondaryTitle }}</h2>\r\n    </div>\r\n</div>", styles: [".titles-container,.no-result-container{display:flex;flex-direction:column}.no-result-container{margin-block-start:16px;gap:16px}.center{align-items:center}.right{align-items:flex-start}.big{padding-right:88px;height:100%}.small{height:200px}\n"] }]
+        }], propDecorators: { mainTitle: [{
+                type: Input
+            }], secondaryTitle: [{
+                type: Input
+            }], alignItems: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }] } });
+
+class HerumPaginatorComponent {
+    changeDetectorRef;
+    numberOfSlots = 7;
+    elementsToSlice;
+    numberOfElementsInPage;
+    currentPage = 1;
+    totalPages;
+    showArrows = true;
+    slicerMode = false;
+    slicedElements = new EventEmitter();
+    currentPageChange = new EventEmitter();
+    paginatorRenderChange = new EventEmitter();
+    element;
+    visiblePages = [];
+    startEllipsisPosition = 4;
+    endEllipsisPosition = -3;
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+    }
+    ngOnChanges(changes) {
+        if (changes['elementsToSlice']?.currentValue && !this.totalPages && this.numberOfElementsInPage)
+            this.totalPages = Math.ceil((this.elementsToSlice.length / this.numberOfElementsInPage));
+        if (changes['totalPages']?.currentValue || changes['elementsToSlice']?.currentValue || changes['numberOfElementsInPage']?.currentValue)
+            this.updateVisiblePages();
+        if (changes['totalPages']?.currentValue) {
+            this.changeDetectorRef.detectChanges();
+            window.requestAnimationFrame(_ => {
+                if (this.totalPages > 1)
+                    this.paginatorRenderChange.emit();
+            });
+        }
+    }
+    ngOnInit() {
+        this.updateVisiblePages();
+        this.numberOfSlotsValidation();
+        this.showArrowsValidation();
+    }
+    showArrowsValidation() {
+        const isOneMiddleSlot = this.numberOfSlots < 6;
+        if (isOneMiddleSlot && !this.showArrows)
+            this.showArrows = true;
+    }
+    numberOfSlotsValidation() {
+        if (this.numberOfSlots < 5)
+            this.numberOfSlots = 5;
+    }
+    _onChangePage(page) {
+        if (!this.isValidPageNumber(page))
+            return;
+        this.currentPage = page;
+        this.currentPageChange.emit(this.currentPage);
+        this.updateVisiblePages();
+    }
+    updateVisiblePages() {
+        this.visiblePages = [];
+        if (this.shouldShowAllPages()) {
+            this.displayAllPages();
+            return;
+        }
+        this.addFirstPage();
+        this.addStartEllipsis();
+        this.addMiddlePagesSlots();
+        this.addEndEllipsis();
+        this.addLastPage();
+        this.emitElementsPerCurrentPage();
+    }
+    shouldShowAllPages() {
+        return this.totalPages <= this.numberOfSlots;
+    }
+    displayAllPages() {
+        this.visiblePages = Array.from({ length: this.totalPages }, (_, index) => index + 1);
+        this.emitElementsPerCurrentPage();
+    }
+    addFirstPage() {
+        this.visiblePages.push(1);
+    }
+    addStartEllipsis() {
+        if (this.currentPage >= this.startEllipsisPosition)
+            this.visiblePages.push('...');
+    }
+    addMiddlePagesSlots() {
+        const { start, end } = this.calculateMiddlePageSlots();
+        const middlePages = Array.from({ length: end - start + 1 }, (_, index) => start + index);
+        middlePages.forEach(page => this.visiblePages.push(page));
+    }
+    calculateMiddlePageSlots() {
+        const middleStartPageNumber = Math.max(2, this.currentPage - 1);
+        const middleEndPageNumber = Math.min(this.totalPages - 1, this.currentPage + 1);
+        const availableMiddleSlots = this.calculateAvailableMiddleSlots();
+        const currentMiddleItemsCount = middleEndPageNumber - middleStartPageNumber + 1;
+        if (currentMiddleItemsCount < availableMiddleSlots)
+            return this.expandMiddleRange(middleStartPageNumber, middleEndPageNumber, availableMiddleSlots, currentMiddleItemsCount);
+        if (currentMiddleItemsCount > availableMiddleSlots)
+            return this.shrinkMiddleRange(middleStartPageNumber, middleEndPageNumber, availableMiddleSlots, currentMiddleItemsCount);
+        return { start: middleStartPageNumber, end: middleEndPageNumber };
+    }
+    calculateAvailableMiddleSlots() {
+        const startEllipsisCount = this.currentPage >= this.startEllipsisPosition ? 1 : 0;
+        const endEllipsisCount = this.currentPage <= this.totalPages + this.endEllipsisPosition ? 1 : 0;
+        const firstPageCount = 1;
+        const lastPageCount = 1;
+        return this.numberOfSlots - firstPageCount - lastPageCount - startEllipsisCount - endEllipsisCount;
+    }
+    expandMiddleRange(start, end, availableSlots, currentMiddleItemsCount) {
+        const slotsToAdd = availableSlots - currentMiddleItemsCount;
+        const isExpandFromStart = start === 2;
+        const isExpandFromEnd = end === this.totalPages - 1;
+        if (isExpandFromStart)
+            return { start, end: Math.min(this.totalPages - 1, end + slotsToAdd) };
+        if (isExpandFromEnd)
+            return { start: Math.max(2, start - slotsToAdd), end };
+        const startExpand = Math.floor(slotsToAdd / 2);
+        const endExpand = slotsToAdd - startExpand;
+        return {
+            start: Math.max(2, start - startExpand),
+            end: Math.min(this.totalPages - 1, end + endExpand)
+        };
+    }
+    shrinkMiddleRange(start, end, availableSlots, currentMiddleItemsCount) {
+        if (availableSlots === 1)
+            return { start: this.currentPage, end: this.currentPage };
+        const slotsToRemove = currentMiddleItemsCount - availableSlots;
+        const distanceToStart = this.currentPage - start;
+        const distanceToEnd = end - this.currentPage;
+        if (distanceToStart > distanceToEnd)
+            return { start: start + slotsToRemove, end };
+        return { start, end: end - slotsToRemove };
+    }
+    addEndEllipsis() {
+        if (this.currentPage < this.totalPages - 2)
+            this.visiblePages.push('...');
+    }
+    addLastPage() {
+        this.visiblePages.push(this.totalPages);
+    }
+    emitElementsPerCurrentPage() {
+        if (!this.slicerMode || !this.elementsToSlice)
+            return;
+        const startIndex = this.numberOfElementsInPage * (this.currentPage - 1);
+        const endIndex = this.numberOfElementsInPage * this.currentPage;
+        const slicedItems = this.elementsToSlice.slice(startIndex, endIndex);
+        this.slicedElements.emit(slicedItems);
+    }
+    isValidPageNumber(page) {
+        return (typeof page === types.number) && page >= 1 && page <= this.totalPages;
+    }
+    _isNumber(value) {
+        return typeof value === types.number;
+    }
+    get chevronIcon() {
+        return svgsStrings.chevron;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumPaginatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumPaginatorComponent, isStandalone: false, selector: "herum-paginator", inputs: { numberOfSlots: "numberOfSlots", elementsToSlice: "elementsToSlice", numberOfElementsInPage: "numberOfElementsInPage", currentPage: "currentPage", totalPages: "totalPages", showArrows: "showArrows", slicerMode: "slicerMode" }, outputs: { slicedElements: "slicedElements", currentPageChange: "currentPageChange", paginatorRenderChange: "paginatorRenderChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #element *ngIf=\"totalPages > 1\" class=\"paginator-container\">\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed':  currentPage === 1}\" class=\"item chevron right-chevron\"\r\n        [innerHTML]=\"chevronIcon | safeHtml\" (click)=\"_onChangePage(currentPage -1)\">\r\n    </span>\r\n\r\n    <ng-container *ngFor=\"let item of visiblePages\">\r\n        <span class=\"item\" *ngIf=\"_isNumber(item); else ellipsis\" (click)=\"_onChangePage(item)\"\r\n            [ngClass]=\"{'herum-card': currentPage === item}\">\r\n            {{ item }}\r\n        </span>\r\n\r\n        <ng-template #ellipsis>\r\n            <span class=\"ellipsis\">{{ item }}</span>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed': currentPage === totalPages}\"\r\n        class=\"item chevron left-chevron\" [innerHTML]=\"chevronIcon | safeHtml\"\r\n        (click)=\"_onChangePage(currentPage + 1)\">\r\n    </span>\r\n</div>", styles: [".paginator-container{display:flex;gap:4px;direction:rtl;justify-content:flex-end;align-items:center;width:100%}.paginator-container .ellipsis,.paginator-container .item{display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-weight:700}.paginator-container .item{cursor:pointer}.paginator-container .chevron{width:16px;height:16px;stroke:var(--icons-color)}.paginator-container .right-chevron{transform:rotate(-90deg)}.paginator-container .left-chevron{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-paginator', template: "<div #element *ngIf=\"totalPages > 1\" class=\"paginator-container\">\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed':  currentPage === 1}\" class=\"item chevron right-chevron\"\r\n        [innerHTML]=\"chevronIcon | safeHtml\" (click)=\"_onChangePage(currentPage -1)\">\r\n    </span>\r\n\r\n    <ng-container *ngFor=\"let item of visiblePages\">\r\n        <span class=\"item\" *ngIf=\"_isNumber(item); else ellipsis\" (click)=\"_onChangePage(item)\"\r\n            [ngClass]=\"{'herum-card': currentPage === item}\">\r\n            {{ item }}\r\n        </span>\r\n\r\n        <ng-template #ellipsis>\r\n            <span class=\"ellipsis\">{{ item }}</span>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <span *ngIf=\"showArrows\" [ngClass]=\"{'cursor-not-allowed': currentPage === totalPages}\"\r\n        class=\"item chevron left-chevron\" [innerHTML]=\"chevronIcon | safeHtml\"\r\n        (click)=\"_onChangePage(currentPage + 1)\">\r\n    </span>\r\n</div>", styles: [".paginator-container{display:flex;gap:4px;direction:rtl;justify-content:flex-end;align-items:center;width:100%}.paginator-container .ellipsis,.paginator-container .item{display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-weight:700}.paginator-container .item{cursor:pointer}.paginator-container .chevron{width:16px;height:16px;stroke:var(--icons-color)}.paginator-container .right-chevron{transform:rotate(-90deg)}.paginator-container .left-chevron{transform:rotate(90deg)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { numberOfSlots: [{
+                type: Input
+            }], elementsToSlice: [{
+                type: Input
+            }], numberOfElementsInPage: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], showArrows: [{
+                type: Input
+            }], slicerMode: [{
+                type: Input
+            }], slicedElements: [{
+                type: Output
+            }], currentPageChange: [{
+                type: Output
+            }], paginatorRenderChange: [{
+                type: Output
+            }], element: [{
+                type: ViewChild,
+                args: ['element']
+            }] } });
+
+class HerumPanelLinksComponent {
+    selectedLink;
+    links;
+    linkEmitter = new EventEmitter();
+    _onClick(link) {
+        this.selectedLink = link;
+        this.linkEmitter.emit(link);
+    }
+    _isActiveLink(linkId) {
+        return this.selectedLink?.id === linkId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumPanelLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumPanelLinksComponent, isStandalone: false, selector: "herum-panel-links", inputs: { selectedLink: "selectedLink", links: "links" }, outputs: { linkEmitter: "linkEmitter" }, ngImport: i0, template: "<div class=\"links-container\">\r\n    <a *ngFor=\"let link of links\" class=\"link-item\" [ngClass]=\"{'active-link':_isActiveLink(link.id)}\"\r\n        (click)=\"_onClick(link)\">\r\n\r\n        <span class=\"link-text\">\r\n            {{link.name}}\r\n        </span>\r\n    </a>\r\n</div>", styles: [".links-container{display:flex;gap:2%;flex-wrap:wrap}.link-item{position:relative;text-decoration:none;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: HerumPanelLinksComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-panel-links', template: "<div class=\"links-container\">\r\n    <a *ngFor=\"let link of links\" class=\"link-item\" [ngClass]=\"{'active-link':_isActiveLink(link.id)}\"\r\n        (click)=\"_onClick(link)\">\r\n\r\n        <span class=\"link-text\">\r\n            {{link.name}}\r\n        </span>\r\n    </a>\r\n</div>", styles: [".links-container{display:flex;gap:2%;flex-wrap:wrap}.link-item{position:relative;text-decoration:none;font-weight:700}\n"] }]
+        }], propDecorators: { selectedLink: [{
+                type: Input
+            }], links: [{
+                type: Input
+            }], linkEmitter: [{
+                type: Output
+            }] } });
+
+const upPosition = 'up';
+const leftPosition = 'left';
+class HerumProgressBarComponent {
+    percentage = 65;
+    invalidPercentage = 0;
+    showPercentage = true;
+    percentagePosition = 'up';
+    type = 'gradient';
+    size = 'regular';
+    color = "#26C593";
+    borderRadius = "both";
+    total = "100";
+    showBorder = true;
+    thickness = 'thick';
+    getPercentageFormat() {
+        return this.percentagePosition === upPosition || this.percentagePosition === leftPosition ?
+            (!this.invalidPercentage ? 0 + this.percentage + '%' : `${!this.isInfinity ? Math.floor(this.invalidPercentage + this.percentage) + '%' : '∞'}`) :
+            `${this.percentage}/${this.total}`;
+    }
+    get invalidPercentageCalculation() {
+        let sum = Math.floor(this.percentage + this.invalidPercentage);
+        return !sum ? 0 : sum <= 100 ? this.invalidPercentage : 100 - this.percentage;
+    }
+    get isInfinity() {
+        return this.percentage + this.invalidPercentage > 3000;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumProgressBarComponent, isStandalone: false, selector: "herum-progress-bar", inputs: { percentage: "percentage", invalidPercentage: "invalidPercentage", showPercentage: "showPercentage", percentagePosition: "percentagePosition", type: "type", size: "size", color: "color", borderRadius: "borderRadius", total: "total", showBorder: "showBorder", thickness: "thickness" }, ngImport: i0, template: "<div class=\"container p-0\" [ngClass]=\"percentagePosition + '-container'\" [ngClass]=\"borderRadius + '-radius'\">\r\n    <div class=\"progress-bar\" [ngClass]=\"{ 'colored-empty-bar': type == 'solid', 'tight': size=='tight', 'thin': thickness == 'thin', 'thick': thickness == 'thick' }\" \r\n      [ngStyle]=\"{ 'border': showBorder ? '1px solid var(--chips-divider-color)' : 'unset' }\">\r\n        <div class=\"progress-bar-fill\" [ngClass]=\"type\" [ngStyle]=\"{'width':percentage + '%', 'background':color}\" ></div>\r\n        <div class=\"invalid-progress-bar-fill\" [ngStyle]=\"{'width':invalidPercentageCalculation + '%'}\" ></div>\r\n    </div>\r\n\r\n    <div *ngIf=\"showPercentage\" class=\"percentage\" [ngClass]=\"percentagePosition + ' ' + size\" [class.big-font]=\"isInfinity\" [ngStyle]=\"{'width':invalidPercentageCalculation + percentage  + '%'}\">\r\n        {{ getPercentageFormat() }}\r\n    </div>\r\n</div>", styles: [".container{position:relative}.progress-bar{width:100%;border-radius:10px;border:1px solid var(--chips-divider-color);display:flex;flex-direction:row;justify-content:flex-start}.thin{height:8px}.thick{height:12px}.both-radius .progress-bar{border-radius:10px}.right-radius .progress-bar{border-radius:0 10px 10px 0}.left-radius .progress-bar{border-radius:10px 0 0 10px}.none-radius .progress-bar{border-radius:unset}.progress-bar-fill{height:100%}.invalid-progress-bar-fill{height:100%;background:var(--error-color)!important}.colored-empty-bar{background:#ecf2fb;border:none;height:10px}.tight{height:8px!important;font-size:10px}.left{text-align:left}.bold{font-weight:700}.gradient{background:var(--primary-color)}.solid{background:var(--icons-color)}.up{position:absolute;top:-17px}.up.tight{position:absolute;top:-13px}.left-container{display:flex;align-items:center;gap:8px}.percentage{text-align:left}.big-font{font-size:29px;top:-28px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-progress-bar', template: "<div class=\"container p-0\" [ngClass]=\"percentagePosition + '-container'\" [ngClass]=\"borderRadius + '-radius'\">\r\n    <div class=\"progress-bar\" [ngClass]=\"{ 'colored-empty-bar': type == 'solid', 'tight': size=='tight', 'thin': thickness == 'thin', 'thick': thickness == 'thick' }\" \r\n      [ngStyle]=\"{ 'border': showBorder ? '1px solid var(--chips-divider-color)' : 'unset' }\">\r\n        <div class=\"progress-bar-fill\" [ngClass]=\"type\" [ngStyle]=\"{'width':percentage + '%', 'background':color}\" ></div>\r\n        <div class=\"invalid-progress-bar-fill\" [ngStyle]=\"{'width':invalidPercentageCalculation + '%'}\" ></div>\r\n    </div>\r\n\r\n    <div *ngIf=\"showPercentage\" class=\"percentage\" [ngClass]=\"percentagePosition + ' ' + size\" [class.big-font]=\"isInfinity\" [ngStyle]=\"{'width':invalidPercentageCalculation + percentage  + '%'}\">\r\n        {{ getPercentageFormat() }}\r\n    </div>\r\n</div>", styles: [".container{position:relative}.progress-bar{width:100%;border-radius:10px;border:1px solid var(--chips-divider-color);display:flex;flex-direction:row;justify-content:flex-start}.thin{height:8px}.thick{height:12px}.both-radius .progress-bar{border-radius:10px}.right-radius .progress-bar{border-radius:0 10px 10px 0}.left-radius .progress-bar{border-radius:10px 0 0 10px}.none-radius .progress-bar{border-radius:unset}.progress-bar-fill{height:100%}.invalid-progress-bar-fill{height:100%;background:var(--error-color)!important}.colored-empty-bar{background:#ecf2fb;border:none;height:10px}.tight{height:8px!important;font-size:10px}.left{text-align:left}.bold{font-weight:700}.gradient{background:var(--primary-color)}.solid{background:var(--icons-color)}.up{position:absolute;top:-17px}.up.tight{position:absolute;top:-13px}.left-container{display:flex;align-items:center;gap:8px}.percentage{text-align:left}.big-font{font-size:29px;top:-28px!important}\n"] }]
+        }], propDecorators: { percentage: [{
+                type: Input
+            }], invalidPercentage: [{
+                type: Input
+            }], showPercentage: [{
+                type: Input
+            }], percentagePosition: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], showBorder: [{
+                type: Input
+            }], thickness: [{
+                type: Input
+            }] } });
+
+class HerumQuizHeaderItemComponent {
+    index;
+    item;
+    itemState;
+    itemEmitter = new EventEmitter();
+    _onSelectItem(index) {
+        this.itemEmitter.emit(index);
+    }
+    getItemClass(itemState) {
+        switch (itemState) {
+            case QuizHeaderState.current:
+                return 'current';
+            case QuizHeaderState.correct:
+                return 'correct';
+            case QuizHeaderState.wrong:
+                return 'wrong';
+            case QuizHeaderState.answered:
+                return 'answered';
+            case QuizHeaderState.unanswered:
+                return 'unanswered';
+            case QuizHeaderState.skipped:
+                return 'skipped';
+            default:
+                return 'current';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumQuizHeaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumQuizHeaderItemComponent, isStandalone: false, selector: "herum-quiz-header-item", inputs: { index: "index", item: "item", itemState: "itemState" }, outputs: { itemEmitter: "itemEmitter" }, ngImport: i0, template: "<div class=\"item\" (click)=\"_onSelectItem(index)\">\r\n    <div class=\"item-number\" [ngClass]=\"getItemClass(itemState)\">{{index +1}}\r\n    </div>\r\n</div>", styles: [".item{position:relative;width:44px;min-width:44px;max-width:44px}.item-number{position:relative;padding:0 16px;border-bottom:2px solid;justify-content:center;display:flex;font-size:12px;cursor:pointer;font-size:16px;font-style:normal;font-weight:500;-webkit-user-select:none;user-select:none}.current{color:var(--text-color);border-color:var(--text-color)}.correct{border-color:var(--icons-color)!important;color:var(--icons-color)}.wrong{border-color:var(--error-color)!important;color:var(--error-color)}.answered{border-color:#4150d8!important;color:#4150d8}.skipped{border-color:#00000085;color:#00000085}.unanswered{border-color:transparent;color:var(--disabled-text-color)}.skipped:after{content:url(/assets/quiz/skip.svg);position:absolute;top:-14px;right:14px}.current:active,.current:hover{border-color:#c1cce3}.correct:active{border-color:#0d3b06}.correct:hover{border-color:#49ae74}.wrong:active{border-color:#cc1759}.wrong:hover{border-color:#ff4f8f}.answered:active{border-color:#b16dbe}.answered:hover{border-color:#cd86db}.unanswered:active,.skipped:active{border-color:#c1cce3}.unanswered:active,.skipped:hover{border-color:#e6eefd}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumQuizHeaderItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-quiz-header-item', template: "<div class=\"item\" (click)=\"_onSelectItem(index)\">\r\n    <div class=\"item-number\" [ngClass]=\"getItemClass(itemState)\">{{index +1}}\r\n    </div>\r\n</div>", styles: [".item{position:relative;width:44px;min-width:44px;max-width:44px}.item-number{position:relative;padding:0 16px;border-bottom:2px solid;justify-content:center;display:flex;font-size:12px;cursor:pointer;font-size:16px;font-style:normal;font-weight:500;-webkit-user-select:none;user-select:none}.current{color:var(--text-color);border-color:var(--text-color)}.correct{border-color:var(--icons-color)!important;color:var(--icons-color)}.wrong{border-color:var(--error-color)!important;color:var(--error-color)}.answered{border-color:#4150d8!important;color:#4150d8}.skipped{border-color:#00000085;color:#00000085}.unanswered{border-color:transparent;color:var(--disabled-text-color)}.skipped:after{content:url(/assets/quiz/skip.svg);position:absolute;top:-14px;right:14px}.current:active,.current:hover{border-color:#c1cce3}.correct:active{border-color:#0d3b06}.correct:hover{border-color:#49ae74}.wrong:active{border-color:#cc1759}.wrong:hover{border-color:#ff4f8f}.answered:active{border-color:#b16dbe}.answered:hover{border-color:#cd86db}.unanswered:active,.skipped:active{border-color:#c1cce3}.unanswered:active,.skipped:hover{border-color:#e6eefd}\n"] }]
+        }], propDecorators: { index: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], itemState: [{
+                type: Input
+            }], itemEmitter: [{
+                type: Output
+            }] } });
+
+const dummySkeletonArray = [1, 2, 3, 4];
+const CUSTOM_SELECT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumSelectComponent),
+    multi: true,
+};
+const optionsInput = 'options';
+class HerumSelectComponent {
+    options = [];
+    displayBy = 'name';
+    placeholder = 'בחר/י...';
+    selectedOption;
+    disabled = false;
+    isDropDownInPositionFixed = false;
+    iconPath = '';
+    isAutoComplete = false;
+    title = '';
+    size = 'default';
+    displayLoadingMode = false;
+    isLoadingInput = false;
+    dropDownDirection = 'downwards';
+    filterPlaceholder = "חפש/י...";
+    debounceTime = 0;
+    selectedOptionEmitter = new EventEmitter();
+    filterTextEmitter = new EventEmitter();
+    filterInput;
+    dropContainer;
+    dropdown;
+    onClick(event) {
+        this.closeDropdown(event);
+    }
+    narrowSelect = false;
+    onResize(event) {
+        this.narrowSelect = window.innerWidth < 1300 && !!this.iconPath;
+    }
+    filteredOptions = [];
+    isDropdownOpen = false;
+    destroySubject$ = new Subject();
+    componentId = '';
+    get errorOccurred() {
+        this.placeholder = 'התרחשה שגיאה בקבלת פרטי המשתמש';
+        return false;
+    }
+    ngOnChanges(changes) {
+        this.narrowSelect = window.innerWidth < 1300 && !!this.iconPath;
+        if (this.isAutoComplete && !this.isLoadingInput || changes[optionsInput]?.currentValue?.length && !this.filteredOptions?.length)
+            this.filteredOptions = changes[optionsInput]?.currentValue;
+    }
+    ngAfterViewInit() {
+        this.componentId = v4();
+        this.dropContainer.nativeElement.id += `component-id-${this.componentId}`;
+    }
+    _onSelectOption(selectedOption) {
+        this.resetFiltering();
+        this.selectedOption = selectedOption;
+        this.onChange(selectedOption);
+        this.selectedOptionEmitter.emit(selectedOption);
+    }
+    _onStopPropagation(event) {
+        event.stopPropagation();
+    }
+    _onFilterDropDown(text) {
+        this.filteredOptions = this.options;
+        if (!text && !this.isAutoComplete)
+            return;
+        if (!this.isAutoComplete)
+            this.filteredOptions = this.options.filter(filteredOption => filteredOption[this.displayBy].includes(text));
+        this.filterTextEmitter.emit(text);
+    }
+    toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+    }
+    closeDropdown(event) {
+        if (!this.isDropdownOpen)
+            return;
+        const isClickedOutsideComponent = !event.composedPath().some(path => path.id?.includes(this.componentId));
+        if (!event.target.matches('.internal') || isClickedOutsideComponent) {
+            this.isDropdownOpen = false;
+            this.resetFiltering();
+        }
+    }
+    isSelectedOption(option) {
+        if (!this.selectedOption)
+            return false;
+        return this.selectedOption.id === option.id;
+    }
+    resetFiltering() {
+        this.filterInput?.clearInput();
+        this.filteredOptions = this.options;
+    }
+    _isLoading() {
+        return (this.displayLoadingMode && !this.title?.length) || this.isLoadingInput;
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(selectedOption) {
+        this.selectedOption = selectedOption;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    ngOnDestroy() {
+        this.destroySubject$.next(null);
+        this.destroySubject$.complete();
+    }
+    get dropdownClasses() {
+        let classes = `dropdown-content dropdown-${this.dropDownDirection} ${this.size}-dropdown`;
+        if (this.isDropDownInPositionFixed)
+            classes += ' fixed';
+        if (this.filteredOptions?.length)
+            classes += ' scrollable-settings';
+        return classes;
+    }
+    get _getDropdownStates() {
+        return getDropdownAnimationStates(this.isDropdownOpen, this.dropDownDirection);
+    }
+    get skeletonArray() {
+        return dummySkeletonArray;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumSelectComponent, isStandalone: false, selector: "herum-select", inputs: { options: "options", displayBy: "displayBy", placeholder: "placeholder", selectedOption: "selectedOption", disabled: "disabled", isDropDownInPositionFixed: "isDropDownInPositionFixed", iconPath: "iconPath", isAutoComplete: "isAutoComplete", title: "title", size: "size", displayLoadingMode: "displayLoadingMode", isLoadingInput: "isLoadingInput", dropDownDirection: "dropDownDirection", filterPlaceholder: "filterPlaceholder", debounceTime: "debounceTime" }, outputs: { selectedOptionEmitter: "selectedOptionEmitter", filterTextEmitter: "filterTextEmitter" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onResize($event)" } }, providers: [CUSTOM_SELECT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "dropContainer", first: true, predicate: ["dropContainer"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\"\r\n    [ngClass]=\"{'w-100': size === 'responsive', 'fill-container':size === 'fill-container' }\"\r\n    (click)=\"toggleDropdown()\">\r\n    <button class=\"drop-button internal\" [class]=\"narrowSelect ? 'narrow' : size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\"\r\n        [ngStyle]=\" {'padding': iconPath ? '4px 12px 4px 4px' : null }\">\r\n        <div class=\"selected-option-container internal\" [ngClass]=\"{'skeleton-container':_isLoading()}\" *ngIf=\"iconPath\">\r\n            <span class=\"title internal\">\r\n                <img *ngIf=\"iconPath\" [src]=\"iconPath\" alt=\"icon\" class=\"icon\">\r\n\r\n                <span *ngIf=\"!narrowSelect\" [ngClass]=\"{'skeleton':_isLoading(), 'skeleton-text':_isLoading()}\">\r\n                    {{errorOccurred ? '\u05D4\u05EA\u05E8\u05D7\u05E9\u05D4 \u05E9\u05D2\u05D9\u05D0\u05D4' :title}}\r\n                </span>\r\n            </span>\r\n\r\n            <br *ngIf=\"!_isLoading()\">\r\n\r\n            <span class=\"selected-option internal\"\r\n                [ngClass]=\"{'skeleton':_isLoading(),'skeleton-text':_isLoading(), 'skeleton-selected-option':_isLoading()}\">\r\n                {{selectedOption ? selectedOption[displayBy] : title}}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"iconPath == ''\">\r\n            {{selectedOption ? selectedOption[displayBy] : placeholder }}\r\n        </ng-container>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\"\r\n                viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div #dropdown id=\"myDropdown\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"options?.length>2 || isAutoComplete\" class=\"input-filter\"\r\n            [type]=\"'search'\" [placeholder]=\"filterPlaceholder\" [debounceTime]=\"debounceTime\"\r\n            (click)=\"_onStopPropagation($event)\" (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n        <ng-container *ngFor=\"let option of isLoadingInput ? skeletonArray : filteredOptions; let index = index\">\r\n            <a (click)=\"_onSelectOption(option)\" id=\"select-{{index}}\"\r\n                [ngClass]=\"{'selected': isSelectedOption(option), 'skeleton skeleton-text m-3':isLoadingInput}\">\r\n                {{option[displayBy]}}</a>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"!filteredOptions?.length && !isLoadingInput\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".selected-option{color:var(--secondary-color);font-weight:lighter}.title{width:80%;font-weight:700}.skeleton-selected-option{width:80%}.skeleton-text{width:90%}.skeleton-container{gap:10px;display:flex;flex-direction:column;width:100%}.skeleton-container .title.internal{display:flex}.title.internal span{margin-top:5px;margin-right:5px}.narrow{max-width:unset!important;height:42px}.fill-container{display:flex;width:100%;height:100%}.fill-container .dropdown,.fill-container .dropdown button{width:100%;height:100%}:host:has(.fill-container){width:100%;display:flex}:host:has(.fill-container) #myDropdown{width:100%;position:absolute}:host:has(.fill-container) .drop-button{border-radius:0}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-select', providers: [CUSTOM_SELECT_CONTROL_VALUE_ACCESSOR], animations: [openClose], template: "<div #dropContainer class=\"dropdown\" dir=\"rtl\"\r\n    [ngClass]=\"{'w-100': size === 'responsive', 'fill-container':size === 'fill-container' }\"\r\n    (click)=\"toggleDropdown()\">\r\n    <button class=\"drop-button internal\" [class]=\"narrowSelect ? 'narrow' : size\"\r\n        [ngClass]=\"(isDropdownOpen ? 'open-drop-button-' + dropDownDirection : '')\"\r\n        [ngStyle]=\" {'padding': iconPath ? '4px 12px 4px 4px' : null }\">\r\n        <div class=\"selected-option-container internal\" [ngClass]=\"{'skeleton-container':_isLoading()}\" *ngIf=\"iconPath\">\r\n            <span class=\"title internal\">\r\n                <img *ngIf=\"iconPath\" [src]=\"iconPath\" alt=\"icon\" class=\"icon\">\r\n\r\n                <span *ngIf=\"!narrowSelect\" [ngClass]=\"{'skeleton':_isLoading(), 'skeleton-text':_isLoading()}\">\r\n                    {{errorOccurred ? '\u05D4\u05EA\u05E8\u05D7\u05E9\u05D4 \u05E9\u05D2\u05D9\u05D0\u05D4' :title}}\r\n                </span>\r\n            </span>\r\n\r\n            <br *ngIf=\"!_isLoading()\">\r\n\r\n            <span class=\"selected-option internal\"\r\n                [ngClass]=\"{'skeleton':_isLoading(),'skeleton-text':_isLoading(), 'skeleton-selected-option':_isLoading()}\">\r\n                {{selectedOption ? selectedOption[displayBy] : title}}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"iconPath == ''\">\r\n            {{selectedOption ? selectedOption[displayBy] : placeholder }}\r\n        </ng-container>\r\n\r\n        <span class=\"shevron-icon internal\" [ngClass]=\"{'rotate-chevron': isDropdownOpen}\">\r\n            <svg class=\"internal\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11.299\" height=\"6.649\"\r\n                viewBox=\"0 0 11.299 6.649\">\r\n                <path id=\"Vector_43-2\" data-name=\"Vector 43-2\" d=\"M1006.235,549.5,1002,553.735l-4.236-4.235\"\r\n                    transform=\"translate(-996.35 -548.086)\" fill=\"none\" stroke=\"var(--icons-color)\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\r\n            </svg>\r\n        </span>\r\n    </button>\r\n\r\n    <div #dropdown id=\"myDropdown\" [ngClass]=\"dropdownClasses\" [@openClose]=\"_getDropdownStates\">\r\n        <herum-input-field #filterInput *ngIf=\"options?.length>2 || isAutoComplete\" class=\"input-filter\"\r\n            [type]=\"'search'\" [placeholder]=\"filterPlaceholder\" [debounceTime]=\"debounceTime\"\r\n            (click)=\"_onStopPropagation($event)\" (inputValueEmitter)=\"_onFilterDropDown($event)\"></herum-input-field>\r\n        <ng-container *ngFor=\"let option of isLoadingInput ? skeletonArray : filteredOptions; let index = index\">\r\n            <a (click)=\"_onSelectOption(option)\" id=\"select-{{index}}\"\r\n                [ngClass]=\"{'selected': isSelectedOption(option), 'skeleton skeleton-text m-3':isLoadingInput}\">\r\n                {{option[displayBy]}}</a>\r\n        </ng-container>\r\n\r\n        <a class=\"text-center\" *ngIf=\"!filteredOptions?.length && !isLoadingInput\">\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA</a>\r\n    </div>\r\n</div>", styles: [".selected-option{color:var(--secondary-color);font-weight:lighter}.title{width:80%;font-weight:700}.skeleton-selected-option{width:80%}.skeleton-text{width:90%}.skeleton-container{gap:10px;display:flex;flex-direction:column;width:100%}.skeleton-container .title.internal{display:flex}.title.internal span{margin-top:5px;margin-right:5px}.narrow{max-width:unset!important;height:42px}.fill-container{display:flex;width:100%;height:100%}.fill-container .dropdown,.fill-container .dropdown button{width:100%;height:100%}:host:has(.fill-container){width:100%;display:flex}:host:has(.fill-container) #myDropdown{width:100%;position:absolute}:host:has(.fill-container) .drop-button{border-radius:0}\n", ".drop-button{display:flex;background-color:var(--light-background-color);color:var(--disabled-text-color);border:none;cursor:pointer;border-radius:var(--border-radius);box-shadow:0 0 var(--box-shadow-blur) #00000029!important;text-align:right;font-size:var(--standard-font-size);align-items:center;justify-content:space-between}.responsive,.responsive-dropdown{width:100%}.default,.big,.default-dropdown,.big-dropdown{min-width:300px}.responsive,.default,.big{padding:16px}.responsive,.default{height:var(--atom-input-height)}.big{height:42px}.fit,.fit-dropdown{min-width:180px}.min,.min-dropdown{min-width:95px}.fit,.min{padding:8px}.drop-button:hover,.drop-button:focus{outline:1px solid var(--icons-color-light-2)}.dropdown{position:relative;display:inline-block}button{position:relative}::ng-deep .dropdown-content{position:absolute;background-color:#fff;box-shadow:0 1px 4px #0000002b;z-index:10;min-width:120px}.open-drop-button-downwards,.open-drop-button-upwards{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.open-drop-button-downwards{border-radius:var(--border-radius) var(--border-radius) 0 0}.open-drop-button-upwards{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-downwards{border-top:1px solid var(--chips-divider-color);border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-upwards{border-bottom:1px solid var(--chips-divider-color);border-radius:var(--border-radius) var(--border-radius) 0 0;top:0}.dropdown-content a{color:#000;padding:6px 16px;text-decoration:none;display:block;font-size:var(--standard-font-size)}.dropdown a:hover{background-color:var(--hover-background);cursor:pointer}.shevron-icon{cursor:pointer;color:var(--icons-color)!important;transition:transform .3s ease}.selected{color:var(--icons-color)!important;font-weight:bolder}.input-filter{height:36px;display:block}.scrollable-settings{max-height:164px;overflow-y:auto}.fixed{position:fixed}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], displayBy: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], selectedOption: [{
+                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
+            }], debounceTime: [{
+                type: Input
+            }], selectedOptionEmitter: [{
+                type: Output
+            }], filterTextEmitter: [{
+                type: Output
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], dropContainer: [{
+                type: ViewChild,
+                args: ['dropContainer']
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], onClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+const smallSize = 'small';
+class HerumSliderComponent {
+    size = 'default';
+    maxSliderValue;
+    currentSliderValue;
+    initSlider;
+    l;
+    isDraggingEmitter = new EventEmitter();
+    updatedSliderValue = new EventEmitter();
+    slider;
+    progress;
+    isDragging = false;
+    ngOnChanges(changes) {
+        if (changes['currentSliderValue']) {
+            if (changes['currentSliderValue'].currentValue === 0)
+                this.progress = 0;
+            else
+                this.progress = (100 / this.maxSliderValue) * changes['currentSliderValue'].currentValue;
+        }
+    }
+    _onUpdateProgressMouseClicked(event) {
+        this.updateSliderOnMouseEvent(event);
+    }
+    _onUpdateProgressMouseDown(event) {
+        event.preventDefault();
+        this.isDragging = true;
+        document.body.classList.add('grabbing');
+        this.isDraggingEmitter.emit(true);
+        const mouseMoveListener = (event) => { this.updateSliderOnMouseEvent(event); };
+        const mouseUpListener = () => {
+            this.isDragging = false;
+            document.body.classList.remove('grabbing');
+            this.isDraggingEmitter.emit(false);
+            document.removeEventListener('mousemove', mouseMoveListener);
+            document.removeEventListener('mouseup', mouseUpListener);
+        };
+        document.addEventListener('mouseup', mouseUpListener);
+        document.addEventListener('mousemove', mouseMoveListener);
+    }
+    calculateSliderProgress() {
+        return this.progress === 100 ? this.progress - 1.5 : this.progress;
+    }
+    isSmallSizeSlider() {
+        return this.size === smallSize;
+    }
+    updateSliderOnMouseEvent(event) {
+        const containerWidth = this.slider.nativeElement.clientWidth;
+        const offsetX = event.pageX - this.slider.nativeElement.getBoundingClientRect().left;
+        this.updatedSliderValue.emit((offsetX / containerWidth) * this.maxSliderValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumSliderComponent, isStandalone: false, selector: "herum-slider", inputs: { size: "size", maxSliderValue: "maxSliderValue", currentSliderValue: "currentSliderValue", initSlider: "initSlider" }, outputs: { isDraggingEmitter: "isDraggingEmitter", updatedSliderValue: "updatedSliderValue" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"slider-container\" (click)=\"_onUpdateProgressMouseClicked($event)\">\r\n    <div #slider class=\"slider-wrapper\" [ngClass]=\"{'small-slider-wrapper':isSmallSizeSlider()}\"\r\n        [ngStyle]=\"{'cursor': isDragging ? 'grabbing' : 'grab'}\" (mousedown)=\"_onUpdateProgressMouseDown($event)\">\r\n        <div class=\"slider-track\" [style.width.%]=\"calculateSliderProgress()\"></div>\r\n\r\n        <div class=\"slider-thumb\" [style.left.%]=\"calculateSliderProgress()\"\r\n            [ngClass]=\"{'small-slider-thumb': isSmallSizeSlider()}\">\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}.slider-container{padding-block:8px;cursor:pointer}.slider-wrapper{position:relative;width:100%;height:2px;background-color:#00000042;max-width:calc(100% - 6px);padding:0}.slider-track{left:0;height:100%;width:100%;transition:width .2s linear}.slider-track,.slider-thumb{position:absolute;top:0;background-color:var(--light-background-color)}.slider-thumb{border-radius:50%;cursor:grab;top:-6px;width:14px;height:14px;transition:left .2s linear}.small-slider-thumb{width:10px;height:10px;top:-4px}.small-slider-wrapper{height:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSliderComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-slider', template: "<div class=\"slider-container\" (click)=\"_onUpdateProgressMouseClicked($event)\">\r\n    <div #slider class=\"slider-wrapper\" [ngClass]=\"{'small-slider-wrapper':isSmallSizeSlider()}\"\r\n        [ngStyle]=\"{'cursor': isDragging ? 'grabbing' : 'grab'}\" (mousedown)=\"_onUpdateProgressMouseDown($event)\">\r\n        <div class=\"slider-track\" [style.width.%]=\"calculateSliderProgress()\"></div>\r\n\r\n        <div class=\"slider-thumb\" [style.left.%]=\"calculateSliderProgress()\"\r\n            [ngClass]=\"{'small-slider-thumb': isSmallSizeSlider()}\">\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}.slider-container{padding-block:8px;cursor:pointer}.slider-wrapper{position:relative;width:100%;height:2px;background-color:#00000042;max-width:calc(100% - 6px);padding:0}.slider-track{left:0;height:100%;width:100%;transition:width .2s linear}.slider-track,.slider-thumb{position:absolute;top:0;background-color:var(--light-background-color)}.slider-thumb{border-radius:50%;cursor:grab;top:-6px;width:14px;height:14px;transition:left .2s linear}.small-slider-thumb{width:10px;height:10px;top:-4px}.small-slider-wrapper{height:2px}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], maxSliderValue: [{
+                type: Input
+            }], currentSliderValue: [{
+                type: Input
+            }], initSlider: [{
+                type: Input
+            }], isDraggingEmitter: [{
+                type: Output
+            }], updatedSliderValue: [{
+                type: Output
+            }], slider: [{
+                type: ViewChild,
+                args: ['slider']
+            }] } });
+
+class HerumSpinnerComponent {
+    size = 'default-size';
+    borderColor = 'default-border-color';
+    borderWidth = 'default-border-width';
+    borderTopColor = 'default-border-top-color';
+    shape = 'circle';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumSpinnerComponent, isStandalone: false, selector: "herum-spinner", inputs: { size: "size", borderColor: "borderColor", borderWidth: "borderWidth", borderTopColor: "borderTopColor", shape: "shape" }, ngImport: i0, template: "<div class=\"spinner\" [ngClass]=\"[size,borderColor, borderTopColor,borderWidth,shape]\"></div>", styles: [".spinner{animation:spin 1s linear infinite;border-style:solid}.default-size{width:16px;height:16px}.default-border-width{border-width:2px}.default-border-color{border-color:var(--disabled-border-color)}.default-border-top-color{border-top-color:var(--icons-color)}.circle{border-radius:50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-spinner', template: "<div class=\"spinner\" [ngClass]=\"[size,borderColor, borderTopColor,borderWidth,shape]\"></div>", styles: [".spinner{animation:spin 1s linear infinite;border-style:solid}.default-size{width:16px;height:16px}.default-border-width{border-width:2px}.default-border-color{border-color:var(--disabled-border-color)}.default-border-top-color{border-top-color:var(--icons-color)}.circle{border-radius:50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], borderWidth: [{
+                type: Input
+            }], borderTopColor: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }] } });
+
+const CUSTOM_SWITCH_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumSwitchComponent),
+    multi: true,
+};
+class HerumSwitchComponent {
+    isChecked = false;
+    disabled = false;
+    checked = new EventEmitter();
+    _onCheck() {
+        this.isChecked = !this.isChecked;
+        this.checked.emit(this.isChecked);
+        this.onChange(this.isChecked);
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(isChecked) {
+        this.isChecked = isChecked;
+    }
+    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: HerumSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumSwitchComponent, isStandalone: false, selector: "herum-switch", inputs: { isChecked: "isChecked", disabled: "disabled" }, outputs: { checked: "checked" }, providers: [CUSTOM_SWITCH_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<label class=\"switch\" [class.disabled]=\"disabled\">\r\n    <input [checked]=\"isChecked\" type=\"checkbox\" (click)=\"_onCheck()\" [disabled]=\"disabled\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [":host{--switch-circle-size: 14px;--switch-circle-padding: 2px;--switch-transition-time: .4s;--switch-width: 40px}.switch{position:relative;display:inline-block;width:var(--switch-width);height:calc(var(--switch-width) / 2);background-color:transparent;margin-bottom:0}.switch input{opacity:0;width:0;height:0}.switch.disabled *{cursor:not-allowed}.slider{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;position:absolute;cursor:pointer;inset:0;transition:background-color var(--switch-transition-time);border:1px solid var(--chips-divider-color);background-color:#fff}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:before{position:absolute;content:\"\";height:var(--switch-circle-size);width:var(--switch-circle-size);right:var(--switch-circle-padding);bottom:var(--switch-circle-padding);background-color:var(--chips-divider-color);transition:background-color var(--switch-transition-time),transform var(--switch-transition-time)}input:checked+.slider:before{background:var(--primary-color);transform:translate(calc(-1 * var(--switch-width) / 2))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-switch', providers: [CUSTOM_SWITCH_CONTROL_VALUE_ACCESSOR], template: "<label class=\"switch\" [class.disabled]=\"disabled\">\r\n    <input [checked]=\"isChecked\" type=\"checkbox\" (click)=\"_onCheck()\" [disabled]=\"disabled\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [":host{--switch-circle-size: 14px;--switch-circle-padding: 2px;--switch-transition-time: .4s;--switch-width: 40px}.switch{position:relative;display:inline-block;width:var(--switch-width);height:calc(var(--switch-width) / 2);background-color:transparent;margin-bottom:0}.switch input{opacity:0;width:0;height:0}.switch.disabled *{cursor:not-allowed}.slider{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;position:absolute;cursor:pointer;inset:0;transition:background-color var(--switch-transition-time);border:1px solid var(--chips-divider-color);background-color:#fff}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:before{position:absolute;content:\"\";height:var(--switch-circle-size);width:var(--switch-circle-size);right:var(--switch-circle-padding);bottom:var(--switch-circle-padding);background-color:var(--chips-divider-color);transition:background-color var(--switch-transition-time),transform var(--switch-transition-time)}input:checked+.slider:before{background:var(--primary-color);transform:translate(calc(-1 * var(--switch-width) / 2))}\n"] }]
+        }], propDecorators: { isChecked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checked: [{
+                type: Output
+            }] } });
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumTextAreaComponent),
+    multi: true,
+};
+class HerumTextAreaComponent {
+    placeholder = defaultPlaceholder$1;
+    disabled = false;
+    formControlName = '';
+    isValid = true;
+    isLoading = false;
+    errorMsg = '';
+    showErrorMsgGap = true;
+    id = '';
+    preventMacroKeysPressEvent = [keyboardAsciiCodes.space, keyboardAsciiCodes.right, keyboardAsciiCodes.left];
+    heightMode = 'regular';
+    fontSize;
+    inputValue = '';
+    maxLength;
+    inputValueEmitter = new EventEmitter();
+    onKeyPress(event) {
+        if (event.target.alt == 'number' && !(event.keyCode >= 48 && event.keyCode <= 57)) {
+            event.preventDefault();
+        }
+    }
+    textarea;
+    touched = false;
+    isBlurred = false;
+    ngAfterViewInit() {
+        if (this.fontSize)
+            this.textarea.nativeElement.style.fontSize = `${this.fontSize}px`;
+    }
+    _onClearTextArea() {
+        this.inputValue = '';
+        this.onChange(this.inputValue);
+    }
+    _onInput(event) {
+        this.onChange(this.inputValue);
+        this.inputValueEmitter.emit(this.inputValue);
+        this.touched = true;
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.inputValue = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    showErrors() { }
+    setBlurred() {
+        this.isBlurred = true;
+    }
+    get xSvg() {
+        return svgsStrings.X;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTextAreaComponent, isStandalone: false, selector: "herum-text-area", inputs: { placeholder: "placeholder", disabled: "disabled", formControlName: "formControlName", isValid: "isValid", isLoading: "isLoading", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", id: "id", preventMacroKeysPressEvent: "preventMacroKeysPressEvent", heightMode: "heightMode", fontSize: "fontSize", inputValue: "inputValue", maxLength: "maxLength" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [maxlength]=\"maxLength\"\r\n        [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HerumSpinnerComponent, selector: "herum-spinner", inputs: ["size", "borderColor", "borderWidth", "borderTopColor", "shape"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-text-area', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"input-container custom-resizer\" [ngClass]=\"heightMode\">\r\n    <textarea #textarea class=\"input-field no-resizer min-height-input w-100\"\r\n        [ngClass]=\"{'error-input':!isValid && touched && isBlurred}\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [maxlength]=\"maxLength\"\r\n        [(ngModel)]=\"inputValue\" [id]=\"id ? id : formControlName\"\r\n        [attr.prevent-macro-keys-press-event]=\"preventMacroKeysPressEvent\" (ngModelChange)=\"_onInput($event)\"\r\n        (blur)=\"setBlurred()\">\r\n    </textarea>\r\n\r\n    <span class=\"icon clickable\" *ngIf=\"inputValue && !disabled && !isLoading\" (click)=\"_onClearTextArea()\">\r\n        <span class=\"small-icon\" [innerHTML]=\"xSvg | safeHtml\"></span>\r\n    </span>\r\n\r\n    <herum-spinner class=\"small-icon\" *ngIf=\"isLoading\"></herum-spinner>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isValid && touched && isBlurred\">\r\n    <label class=\"error-msg right\" *ngIf=\"showErrorMsgGap\">\r\n        {{ errorMsg }}\r\n    </label>\r\n</ng-container>", styles: [":host{--atom-input-height: 60px}.max{height:100%}.max textarea{height:100%!important}textarea{color:var(--text-color)}.min-height-input{min-height:var(--atom-input-height)}.small-icon{position:absolute;cursor:pointer;height:9px;top:16px;left:16px;fill:var(--icons-color)}.custom-resizer{position:relative}.custom-resizer:before{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9.914\" height=\"9.414\" viewBox=\"0 0 9.914 9.414\">%0D%0A  <g id=\"Group_955\" data-name=\"Group 955\" transform=\"translate(-1485.894 -372.793)\">%0D%0A    <line id=\"Line_326\" data-name=\"Line 326\" x2=\"5\" y2=\"5\" transform=\"translate(1486.602 376.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A    <line id=\"Line_327\" data-name=\"Line 327\" x2=\"8\" y2=\"8\" transform=\"translate(1487.102 373.5)\" fill=\"none\" stroke=\"%237897a8\" stroke-linecap=\"round\" stroke-width=\"1\"/>%0D%0A  </g>%0D%0A</svg>%0D%0A');position:absolute;left:0;bottom:-4px;color:green;pointer-events:none}.no-resizer::-webkit-resizer{display:none}.no-resizer::-moz-resizer{display:none}.no-resizer::-ms-resizer{display:none}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], isValid: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], errorMsg: [{
+                type: Input
+            }], showErrorMsgGap: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], preventMacroKeysPressEvent: [{
+                type: Input
+            }], heightMode: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], inputValue: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], inputValueEmitter: [{
+                type: Output
+            }], onKeyPress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], textarea: [{
+                type: ViewChild,
+                args: ['textarea']
+            }] } });
+
+class HerumTimePickerComponent {
+    elementRef;
+    changeDetectorRef;
+    activeColor = 'green';
+    hoverColor = 'yellow';
+    itemSize = '46px';
+    selectedTime = '00:00:00';
+    showSeconds = true;
+    timeChange = new EventEmitter();
+    hoursColumn;
+    minutesColumn;
+    secondsColumn;
+    hours = Array.from({ length: 24 }, (_, index) => String(index).padStart(2, '0'));
+    minutes = Array.from({ length: 60 }, (_, index) => String(index).padStart(2, '0'));
+    seconds = Array.from({ length: 60 }, (_, index) => String(index).padStart(2, '0'));
+    selectedHour = 0;
+    selectedMinute = 0;
+    selectedSecond = 0;
+    hostElement;
+    columnHeight = '100%';
+    constructor(elementRef, changeDetectorRef) {
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.hostElement = this.elementRef.nativeElement;
+    }
+    ngOnChanges(changes) {
+        if (this.hostElement) {
+            if (changes['activeColor']?.currentValue)
+                this.hostElement.style.setProperty(timerActiveColorCssVariable, this.activeColor);
+            if (changes['hoverColor']?.currentValue)
+                this.hostElement.style.setProperty(timerHoverColorCssVariable, this.hoverColor);
+            if (changes['itemSize']?.currentValue) {
+                this.hostElement.style.setProperty(timerItemSizeColorCssVariable, this.itemSize);
+                this.calculateColumnHeight();
+            }
+        }
+        if (changes['selectedTime']?.currentValue) {
+            this.setTime(this.selectedTime);
+            this.handleScrollToSelectedTime(this.selectedTime);
+        }
+    }
+    ngAfterViewInit() {
+        this.handleScrollToSelectedTime(this.selectedTime);
+        this.calculateColumnHeight();
+    }
+    _onSelectHour(index) {
+        this.selectedHour = index;
+        this.emitSelectedTime();
+    }
+    _onSelectMinute(index) {
+        this.selectedMinute = index;
+        this.emitSelectedTime();
+    }
+    _onSelectSecond(index) {
+        this.selectedSecond = index;
+        this.emitSelectedTime();
+    }
+    emitSelectedTime() {
+        const formattedTime = this.formatTime(this.selectedHour, this.selectedMinute, this.selectedSecond);
+        this.selectedTime = formattedTime;
+        this.timeChange.emit(formattedTime);
+    }
+    setTime(selectedTime) {
+        [this.selectedHour, this.selectedMinute, this.selectedSecond] = selectedTime.split(':').map(Number);
+    }
+    formatTime(hours, minutes, seconds) {
+        const hoursAndMinutes = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+        return !this.showSeconds ? hoursAndMinutes : hoursAndMinutes + `:${seconds?.toString().padStart(2, '0')}`;
+    }
+    scrollToSelectedTime(type, index) {
+        let column;
+        switch (type) {
+            case TimeUnit.hours:
+                column = this.hoursColumn;
+                this.selectedHour = index;
+                break;
+            case TimeUnit.minutes:
+                column = this.minutesColumn;
+                this.selectedMinute = index;
+                break;
+            case TimeUnit.seconds:
+                column = this.secondsColumn;
+                this.selectedSecond = index;
+                break;
+        }
+        if (column) {
+            const columnHeight = column.nativeElement.getBoundingClientRect().height;
+            const itemHeight = column.nativeElement.children[index].getBoundingClientRect().height;
+            const itemDistanceFromColumnTop = Math.floor(itemHeight * index) - columnHeight * 0.5 + itemHeight * 0.5;
+            column.nativeElement.scrollTo({ top: itemDistanceFromColumnTop, behavior: 'smooth' });
+        }
+    }
+    handleScrollToSelectedTime(selectedTime) {
+        const [hours, minutes, seconds] = selectedTime.split(':').map(Number);
+        this.scrollToSelectedTime(TimeUnit.minutes, minutes);
+        this.scrollToSelectedTime(TimeUnit.hours, hours);
+        if (this.showSeconds)
+            this.scrollToSelectedTime(TimeUnit.seconds, seconds);
+    }
+    calculateColumnHeight() {
+        const randomColumnElement = this.hoursColumn?.nativeElement;
+        if (!randomColumnElement)
+            return;
+        const randomColumnHeight = randomColumnElement.getBoundingClientRect().height;
+        const items = randomColumnElement.children;
+        const randomItemHeight = items[0].getBoundingClientRect().height;
+        const calculatedHeight = Math.floor(randomColumnHeight / randomItemHeight) * randomItemHeight;
+        this.columnHeight = `${calculatedHeight}px`;
+        this.changeDetectorRef.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTimePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumTimePickerComponent, isStandalone: false, selector: "herum-time-picker", inputs: { activeColor: "activeColor", hoverColor: "hoverColor", itemSize: "itemSize", selectedTime: "selectedTime", showSeconds: "showSeconds" }, outputs: { timeChange: "timeChange" }, viewQueries: [{ propertyName: "hoursColumn", first: true, predicate: ["hoursColumn"], descendants: true }, { propertyName: "minutesColumn", first: true, predicate: ["minutesColumn"], descendants: true }, { propertyName: "secondsColumn", first: true, predicate: ["secondsColumn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"time-picker\">\r\n    <div *ngIf=\"showSeconds\" class=\"container\">\r\n        <div class=\"units-title\">\u05E9\u05E0\u05D9\u05D5\u05EA</div>\r\n\r\n        <div #secondsColumn class=\"column\" [ngStyle]=\"{ height: columnHeight  }\">\r\n            <div class=\"item\" *ngFor=\"let second of seconds; let index = index\" [class.active]=\"selectedSecond === index\"\r\n                (click)=\"_onSelectSecond(index)\">\r\n                {{ second }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"container\" [ngClass]=\"showSeconds ? 'container-border' : '' \">\r\n        <span class=\"units-title\">\u05D3\u05E7\u05D5\u05EA</span>\r\n\r\n        <div #minutesColumn class=\"column\" [ngStyle]=\"{ height: columnHeight }\">\r\n            <div class=\"item\" *ngFor=\"let minute of minutes; let index = index\" [class.active]=\"selectedMinute === index\"\r\n                (click)=\"_onSelectMinute(index)\">\r\n                {{ minute }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"container container-border\">\r\n        <span class=\"units-title\">\u05E9\u05E2\u05D5\u05EA</span>\r\n\r\n        <div #hoursColumn class=\"column\" [ngStyle]=\"{ height: columnHeight }\">\r\n            <div class=\"item\" *ngFor=\"let hour of hours; let index = index\" [class.active]=\"selectedHour === index\"\r\n                (click)=\"_onSelectHour(index)\">\r\n                {{ hour }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{--active-timer-color: var(--primary-color);--hover-timer-color: var(--hovered-item-background-color);--item-size: 39px}.time-picker{display:flex;justify-content:space-between;position:relative;height:100%;background-color:var(--light-background-color)}.column{position:relative;text-align:center;overflow-y:auto;flex-grow:1}.container-border{position:absolute;top:0;right:0;border-right:1px solid var(--table-border-color);height:100%}.column::-webkit-scrollbar{display:none}.container{position:relative;display:flex;align-items:center;flex-direction:column;height:100%}.units-title{display:flex;align-items:center;height:40px;text-align:center;font-weight:700}.item{display:flex;align-content:space-between;justify-content:center;align-items:center;cursor:pointer;font-size:var(--standard-font-size);color:var(--disabled-text-color);height:var(--item-size);width:var(--item-size)}.item.active,.item:hover{border-radius:var(--border-radius);cursor:pointer}.item.active{font-size:calc(var(--standard-font-size) * 1.2);background:var(--active-timer-color);color:var(--light-text-color)}.item:hover{background-color:var(--hover-timer-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-time-picker', template: "<div class=\"time-picker\">\r\n    <div *ngIf=\"showSeconds\" class=\"container\">\r\n        <div class=\"units-title\">\u05E9\u05E0\u05D9\u05D5\u05EA</div>\r\n\r\n        <div #secondsColumn class=\"column\" [ngStyle]=\"{ height: columnHeight  }\">\r\n            <div class=\"item\" *ngFor=\"let second of seconds; let index = index\" [class.active]=\"selectedSecond === index\"\r\n                (click)=\"_onSelectSecond(index)\">\r\n                {{ second }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"container\" [ngClass]=\"showSeconds ? 'container-border' : '' \">\r\n        <span class=\"units-title\">\u05D3\u05E7\u05D5\u05EA</span>\r\n\r\n        <div #minutesColumn class=\"column\" [ngStyle]=\"{ height: columnHeight }\">\r\n            <div class=\"item\" *ngFor=\"let minute of minutes; let index = index\" [class.active]=\"selectedMinute === index\"\r\n                (click)=\"_onSelectMinute(index)\">\r\n                {{ minute }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"container container-border\">\r\n        <span class=\"units-title\">\u05E9\u05E2\u05D5\u05EA</span>\r\n\r\n        <div #hoursColumn class=\"column\" [ngStyle]=\"{ height: columnHeight }\">\r\n            <div class=\"item\" *ngFor=\"let hour of hours; let index = index\" [class.active]=\"selectedHour === index\"\r\n                (click)=\"_onSelectHour(index)\">\r\n                {{ hour }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{--active-timer-color: var(--primary-color);--hover-timer-color: var(--hovered-item-background-color);--item-size: 39px}.time-picker{display:flex;justify-content:space-between;position:relative;height:100%;background-color:var(--light-background-color)}.column{position:relative;text-align:center;overflow-y:auto;flex-grow:1}.container-border{position:absolute;top:0;right:0;border-right:1px solid var(--table-border-color);height:100%}.column::-webkit-scrollbar{display:none}.container{position:relative;display:flex;align-items:center;flex-direction:column;height:100%}.units-title{display:flex;align-items:center;height:40px;text-align:center;font-weight:700}.item{display:flex;align-content:space-between;justify-content:center;align-items:center;cursor:pointer;font-size:var(--standard-font-size);color:var(--disabled-text-color);height:var(--item-size);width:var(--item-size)}.item.active,.item:hover{border-radius:var(--border-radius);cursor:pointer}.item.active{font-size:calc(var(--standard-font-size) * 1.2);background:var(--active-timer-color);color:var(--light-text-color)}.item:hover{background-color:var(--hover-timer-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { activeColor: [{
+                type: Input
+            }], hoverColor: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], selectedTime: [{
+                type: Input
+            }], showSeconds: [{
+                type: Input
+            }], timeChange: [{
+                type: Output
+            }], hoursColumn: [{
+                type: ViewChild,
+                args: ['hoursColumn']
+            }], minutesColumn: [{
+                type: ViewChild,
+                args: ['minutesColumn']
+            }], secondsColumn: [{
+                type: ViewChild,
+                args: ['secondsColumn']
+            }] } });
+
+const CUSTOM_TOGGLE_BUTTON_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumToggleButtonComponent),
+    multi: true,
+};
+class HerumToggleButtonComponent {
+    options = [];
+    selectedOption = 'none';
+    disabled = false;
+    onSelectedOption = new EventEmitter();
+    selectedOptionIndex;
+    ngOnChanges(changes) {
+        if (changes['selectedOption'])
+            this.selectedOptionIndex = this.options.findIndex(option => option == this.selectedOption);
+    }
+    toggleOption(selectedOptionIndex) {
+        this.selectedOption = this.options[selectedOptionIndex];
+        this.selectedOptionIndex = selectedOptionIndex;
+        this.onSelectedOption.emit(this.selectedOption);
+        this.onChange(this.selectedOption);
+    }
+    isOptionSelected(selectedOptionIndex) {
+        return this.selectedOptionIndex === selectedOptionIndex;
+    }
+    isBorderNeeded(elementIndex) {
+        return elementIndex != this.options.length - 1 && !this.isOptionSelected(elementIndex + 1) && !this.isOptionSelected(elementIndex);
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(selectedOption) {
+        if (typeof selectedOption === types.string) {
+            this.selectedOption = selectedOption;
+            this.selectedOptionIndex = this.options.findIndex(option => option == this.selectedOption);
+        }
+    }
+    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: HerumToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumToggleButtonComponent, isStandalone: false, selector: "herum-toggle-button", inputs: { options: "options", selectedOption: "selectedOption", disabled: "disabled" }, outputs: { onSelectedOption: "onSelectedOption" }, providers: [CUSTOM_TOGGLE_BUTTON_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle-container\">\r\n    <div *ngFor=\"let option of options; let i = index\">\r\n        <button [value]=\"i\" (click)=\"toggleOption(i)\" class=\"small\" type=\"button\"\r\n            [class.primary]=\"isOptionSelected(i)\" [disabled]=\"disabled\">\r\n            {{option}}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".toggle-container{display:flex;background-color:var(--panels-fill-color);width:fit-content;padding:4px;border-radius:var(--border-radius);transition:background-color 4.3s ease-in-out;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button{padding:10px;cursor:pointer;color:var(--text-color);border:none;border-radius:var(--border-radius);background-color:transparent;transition:background-color 4.3s ease-in-out}button.primary{background-color:var(--primary-color);color:#fff}.small{box-shadow:none!important}.border-right{border-right:1px solid var(--chips-divider-color)}.hidden-input{display:none}\n", "button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-toggle-button', providers: [CUSTOM_TOGGLE_BUTTON_CONTROL_VALUE_ACCESSOR], template: "<div class=\"toggle-container\">\r\n    <div *ngFor=\"let option of options; let i = index\">\r\n        <button [value]=\"i\" (click)=\"toggleOption(i)\" class=\"small\" type=\"button\"\r\n            [class.primary]=\"isOptionSelected(i)\" [disabled]=\"disabled\">\r\n            {{option}}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".toggle-container{display:flex;background-color:var(--panels-fill-color);width:fit-content;padding:4px;border-radius:var(--border-radius);transition:background-color 4.3s ease-in-out;box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button{padding:10px;cursor:pointer;color:var(--text-color);border:none;border-radius:var(--border-radius);background-color:transparent;transition:background-color 4.3s ease-in-out}button.primary{background-color:var(--primary-color);color:#fff}.small{box-shadow:none!important}.border-right{border-right:1px solid var(--chips-divider-color)}.hidden-input{display:none}\n", "button{padding:var(--button-padding-size);width:100%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:500;font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}button:active{transform:scale(.96)}button:focus-visible{outline:none;transform:scale(.96)}.default-rounded-corners{border-radius:var(--border-radius)}.up-rounded-corners{border-radius:8px 8px 0 0}.down-rounded-corners{border-radius:0 0 8px 8px}shadow{box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.fit{width:fit-content;height:fit-content;padding:4px 8px}.small{min-width:var(--minimum-small-button-width-size);height:var(--small-button-height-size)}.medium{min-width:var(--minimum-medium-button-width-size);height:var(--medium-button-height-size)}.big{min-width:var(--minimum-medium-button-width-size);height:var(--big-button-height-size)}.medium-square{min-width:var(--minimum-medium-quare-button-width-size);height:var(--medium-button-height-size)}.primary{background:var(--primary-color);color:var(--light-text-color)}.primary:hover{background:var(--lighter-primary-color)}.primary:active{background:var(--darker-primary-color)}.white{background:#fff;color:var(--icons-color)}.primary[disabled]{background:var(--disabled-background-color);color:var(--disabled-text-color)}.secondary{background:var(--light-background-color);border:var(--secondary-color) 2px solid;color:var(--secondary-color)}.secondary:hover{background:var(--light-background-color);border:var(--lighter-secondary-color) 2px solid;color:var(--lighter-secondary-color)}.secondary:active{border:var(--darker-secondary-color) 2px solid;color:var(--darker-secondary-color)}.secondary[disabled]{background:var(--disabled-background-color);border:var(--disabled-background-color);color:var(--disabled-text-color)}.ghost{background:transparent;outline:transparent;color:var(--secondary-color);box-shadow:none!important}.ghost:hover{color:var(--lighter-secondary-color)}.ghost:active{background:var(--darker-light-background-color);outline:transparent;color:var(--secondary-color);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.ghost[disabled]{color:var(--disabled-text-color);background-color:transparent}[disabled]{cursor:not-allowed;color:var(--disabled-text-color)}.error{background:var(--error-color)}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], selectedOption: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onSelectedOption: [{
+                type: Output
+            }] } });
+
+const storyFile = 'story.html';
+const defaultPlaceholder = 'העלה/י קבצי לומדה...';
+const invalidUploadKey = 'invalid Upload';
+const requiredErrorKey = 'required';
+const CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumUploadFileComponent),
+    multi: true,
+};
+class HerumUploadFileComponent {
+    parentForm;
+    size = 'default';
+    placeholder = defaultPlaceholder;
+    isDirectoryMode = false;
+    allowedFileTypes = [];
+    selectedFile;
+    formControlName;
+    isEditMode;
+    uploadFile = new EventEmitter();
+    fileInput;
+    files;
+    uploadName;
+    filesSuffixes = resourcesFilesSuffixes;
+    fileSuffix;
+    isValidirectory = true;
+    hasTouched = false;
+    uploadFileSvg = svgsStrings.greyUploadFile;
+    constructor(parentForm) {
+        this.parentForm = parentForm;
+    }
+    ngOnChanges(changes) {
+        if (changes.selectedFile && this.selectedFile)
+            this.setExistingFile();
+    }
+    ngAfterViewInit() {
+        this.fileInput.nativeElement.setAttribute('title', '');
+    }
+    _onPreventDefault(event) {
+        event.preventDefault();
+    }
+    _onDrop(event) {
+        this._onPreventDefault(event);
+        event.stopPropagation();
+        const fileList = Array.from(event.dataTransfer.files);
+        this.uploadName = event.dataTransfer?.files[0]?.name;
+        this._onUploadFile(fileList);
+    }
+    _onUploadFile(files) {
+        if (!files.length)
+            return;
+        this.files = [];
+        if (!this.isDirectoryMode) {
+            this.fileSuffix = '.' + files[0]?.name.split('.').pop();
+            if (!this.isFileTypeAllowed()) {
+                this.formControl?.setErrors({ [invalidUploadKey]: true });
+                return;
+            }
+            this.uploadName = files[0]?.name.split('.')[0];
+        }
+        else {
+            this.directoryValidation(Array.from(files));
+            if (!this.isValidirectory) {
+                this.formControl?.setErrors({ [invalidUploadKey]: true });
+                return;
+            }
+            else
+                this.uploadName = files[0]?.webkitRelativePath?.split('/')[0] || '';
+        }
+        this.getIconPath();
+        this.files = files;
+        this.uploadFile.emit(this.files);
+        this.onChange(this.files);
+        this.formControl?.setErrors(null);
+    }
+    setExistingFile() {
+        if (!this.files)
+            this.files = [];
+        this.files.push({
+            name: this.selectedFile.name,
+            lastModified: new Date(this.selectedFile.uploadTime).getTime(),
+            type: this.selectedFile.type,
+        });
+        this.uploadName = this.selectedFile.name;
+    }
+    isFileTypeAllowed() {
+        return (this.fileSuffix && this.allowedFileTypes?.length && !this.allowedFileTypes.some(value => value === undefined)) ? this.allowedFileTypes.includes(this.fileSuffix) : true;
+    }
+    directoryValidation(files) {
+        this.isValidirectory = files.some((file) => { return file.name === storyFile; });
+    }
+    getIconPath() {
+        if (this.isDirectoryMode) {
+            this.uploadFileSvg = svgsStrings.story;
+            return;
+        }
+        let hasFileSuffixFound = false;
+        Object.values(resourcesFilesSuffixes).forEach(fileSuffix => {
+            if (fileSuffix === this.fileSuffix) {
+                this.uploadFileSvg = svgsStrings[fileSuffix];
+                hasFileSuffixFound = true;
+            }
+        });
+        if (!hasFileSuffixFound)
+            this.uploadFileSvg = svgsStrings.greyUploadFile;
+    }
+    _onRemoveFiles(event) {
+        event.stopPropagation();
+        this.fileInput.nativeElement.value = '';
+        this.files = null;
+        this.uploadFile.emit([]);
+        this.onChange([]);
+        this.uploadFileSvg = svgsStrings.greyUploadFile;
+        if (this.isDirectoryMode) {
+            this.fileSuffix = '';
+            this.uploadName = '';
+        }
+        else
+            this.isValidirectory = true;
+    }
+    _onCancelUploadFile() {
+        this.hasTouched = true;
+        this.onTouched();
+        if (!this.files && !this.files?.length && this.formControl)
+            this.formControl.hasError(requiredErrorKey);
+    }
+    getAcceptValue(allowedFileTypes) {
+        if (!allowedFileTypes && !allowedFileTypes?.length)
+            return anySubFileTypeWildCard;
+        return allowedFileTypes.join(', ');
+    }
+    _isTruncatedTitleElement(element) {
+        return element.innerText.includes('...');
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (value) {
+            !value.length ? this.resetData() : this._onUploadFile(value);
+            if (value.length > 1)
+                this.isDirectoryMode = true;
+        }
+    }
+    resetData() {
+        this.files = undefined;
+        this.fileSuffix = undefined;
+        this.hasTouched = false;
+        this.uploadFileSvg = svgsStrings.greyUploadFile;
+        if (this.fileInput)
+            this.fileInput.nativeElement.value = '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    get directoryName() {
+        return this.isEditMode ? this.uploadName : `${this.uploadName}- נבחרו ${this.files?.length} קבצים`;
+    }
+    get formControl() {
+        return this.parentForm?.control.get(this.formControlName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUploadFileComponent, deps: [{ token: ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumUploadFileComponent, isStandalone: false, selector: "herum-upload-file", inputs: { size: "size", placeholder: "placeholder", isDirectoryMode: "isDirectoryMode", allowedFileTypes: "allowedFileTypes", selectedFile: "selectedFile", formControlName: "formControlName", isEditMode: "isEditMode" }, outputs: { uploadFile: "uploadFile" }, providers: [CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button svgOnHover class=\"upload-file-button upload-file-border\" [class]=\"size\" (click)=\"fileInput.click()\"\r\n    (drop)=\"_onDrop($event)\" (dragover)=\"_onPreventDefault($event)\">\r\n    <ng-container *ngIf=\"!hasTouched && !files\">\r\n        <div class=\"placeholder-container\">\r\n            <span class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n            <span dir=\"rtl\" class=\"button-placeholder\">{{placeholder}}</span>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <span class=\"error\" *ngIf=\"hasTouched && !files\">\r\n        \u05D7\u05D5\u05D1\u05D4 \u05DC\u05D4\u05E2\u05DC\u05D5\u05EA \u05E7\u05D5\u05D1\u05E5\r\n    </span>\r\n\r\n    <div svgOnHover *ngIf=\"files?.length>=0\" class=\"file-container\">\r\n        <span *ngIf=\"files?.length>0\" class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"!isDirectoryMode\">\r\n            <span #fileName class=\"file-name\" *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(fileName) ? uploadName : ''\">\r\n                {{uploadName | ellipsis:fileName}}\r\n            </span>\r\n\r\n            <img class=\"delete-button\" *ngIf=\"files?.length\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isFileTypeAllowed()\">\u05E1\u05D5\u05D2 \u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05DE\u05D5\u05E8\u05E9\u05D4/\u05EA\u05E7\u05D9\u05DF</span>\r\n        </ng-container>\r\n\r\n        <ng-container class=\"cursor-pointer\" *ngIf=\"isDirectoryMode\">\r\n            <span class=\"directory-name-upload\" #directoryNameUpload *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(directoryNameUpload) ? directoryName : ''\">\r\n                {{directoryName | ellipsis:directoryNameUpload}}\r\n            </span>\r\n\r\n            <img *ngIf=\"files?.length\" class=\"delete-button\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isValidirectory\">\u05D4\u05EA\u05D9\u05D9\u05E7\u05D9\u05D4 \u05D0\u05D9\u05E0\u05D4 \u05E1\u05D8\u05D5\u05E8\u05D9</span>\r\n        </ng-container>\r\n    </div>\r\n</button>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"getAcceptValue(allowedFileTypes)\"\r\n    [attr.webkitDirectory]=\"isDirectoryMode ? '' : null\" (change)=\"_onUploadFile($event.target.files)\"\r\n    (cancel)=\"_onCancelUploadFile()\">", styles: [":host{padding:0}.upload-file-button{height:var(--atom-input-height);cursor:pointer;position:relative;color:var(--title-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px)}.file-name{padding-left:12px}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i4.EllipsisPipe, name: "ellipsis" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumUploadFileComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-upload-file', providers: [CUSTOM_UPLOAD_FILE_CONTROL_VALUE_ACCESSOR], template: "<button svgOnHover class=\"upload-file-button upload-file-border\" [class]=\"size\" (click)=\"fileInput.click()\"\r\n    (drop)=\"_onDrop($event)\" (dragover)=\"_onPreventDefault($event)\">\r\n    <ng-container *ngIf=\"!hasTouched && !files\">\r\n        <div class=\"placeholder-container\">\r\n            <span class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n            <span dir=\"rtl\" class=\"button-placeholder\">{{placeholder}}</span>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <span class=\"error\" *ngIf=\"hasTouched && !files\">\r\n        \u05D7\u05D5\u05D1\u05D4 \u05DC\u05D4\u05E2\u05DC\u05D5\u05EA \u05E7\u05D5\u05D1\u05E5\r\n    </span>\r\n\r\n    <div svgOnHover *ngIf=\"files?.length>=0\" class=\"file-container\">\r\n        <span *ngIf=\"files?.length>0\" class=\"upload-file-icon\" [innerHTML]=\"uploadFileSvg | safeHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"!isDirectoryMode\">\r\n            <span #fileName class=\"file-name\" *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(fileName) ? uploadName : ''\">\r\n                {{uploadName | ellipsis:fileName}}\r\n            </span>\r\n\r\n            <img class=\"delete-button\" *ngIf=\"files?.length\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isFileTypeAllowed()\">\u05E1\u05D5\u05D2 \u05D4\u05E7\u05D5\u05D1\u05E5 \u05D0\u05D9\u05E0\u05D5 \u05DE\u05D5\u05E8\u05E9\u05D4/\u05EA\u05E7\u05D9\u05DF</span>\r\n        </ng-container>\r\n\r\n        <ng-container class=\"cursor-pointer\" *ngIf=\"isDirectoryMode\">\r\n            <span class=\"directory-name-upload\" #directoryNameUpload *ngIf=\"files?.length\"\r\n                [matTooltip]=\"_isTruncatedTitleElement(directoryNameUpload) ? directoryName : ''\">\r\n                {{directoryName | ellipsis:directoryNameUpload}}\r\n            </span>\r\n\r\n            <img *ngIf=\"files?.length\" class=\"delete-button\" src=\"../../assets/general/secondary-x.svg\"\r\n                (click)=\"_onRemoveFiles($event)\">\r\n\r\n            <span class=\"error\" *ngIf=\"!isValidirectory\">\u05D4\u05EA\u05D9\u05D9\u05E7\u05D9\u05D4 \u05D0\u05D9\u05E0\u05D4 \u05E1\u05D8\u05D5\u05E8\u05D9</span>\r\n        </ng-container>\r\n    </div>\r\n</button>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"getAcceptValue(allowedFileTypes)\"\r\n    [attr.webkitDirectory]=\"isDirectoryMode ? '' : null\" (change)=\"_onUploadFile($event.target.files)\"\r\n    (cancel)=\"_onCancelUploadFile()\">", styles: [":host{padding:0}.upload-file-button{height:var(--atom-input-height);cursor:pointer;position:relative;color:var(--title-color);background:var(--light-background-color);font-size:var(--standard-font-size)}.upload-file-icon{cursor:pointer;stroke:var(--active-color);fill:var(--active-color)}.default{width:195px}.responsive{width:100%}.upload-file-button:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.upload-file-button:active{transform:scale(.96)}.file-container{display:flex;align-items:center;gap:6px;width:100%}.delete-button{position:absolute;left:8px;z-index:2}.file-name,.directory-name-upload{text-align:right;width:calc(100% - 40px)}.file-name{padding-left:12px}.button-placeholder{color:var(--disabled-text-color);cursor:pointer;width:100%;text-align:right}.error-input,.error-input:focus{border-color:var(--error-color)}.error{color:var(--error-color);width:100%;text-align:right}.placeholder-container{display:flex;gap:8px;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ControlContainer]
+                }] }], propDecorators: { size: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], isDirectoryMode: [{
+                type: Input
+            }], allowedFileTypes: [{
+                type: Input
+            }], selectedFile: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], isEditMode: [{
+                type: Input
+            }], uploadFile: [{
+                type: Output
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class HerumVideoSelectComponent {
+    currentVideoSpeed;
+    options = [];
+    selectedOptionEmitter = new EventEmitter();
+    selectedOption = 1;
+    selectedOptionIndexValue = -1;
+    isDropupOpen = false;
+    ngOnChanges(changes) {
+        if (changes['currentVideoSpeed'])
+            this.selectedOption = changes['currentVideoSpeed'].currentValue;
+    }
+    ngOnInit() {
+        window.addEventListener('click', (event) => this.closeDropup(event));
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.selectedOption = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    _onToggleDropup() {
+        this.isDropupOpen = true;
+    }
+    closeDropup(event) {
+        if (!event.target.matches('.internal'))
+            this.isDropupOpen = false;
+    }
+    selectOption(optionIndex) {
+        this.selectedOptionIndexValue = optionIndex;
+        this.selectedOptionEmitter.emit(Number(this.options[optionIndex]));
+        this.selectedOption = this.options[optionIndex];
+    }
+    isSelectedOption(optionIndex) {
+        return this.selectedOptionIndexValue == optionIndex;
+    }
+    show() {
+        return this.isDropupOpen;
+    }
+    ngOnDestroy() {
+        window.removeEventListener('click', (event) => this.closeDropup(event));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumVideoSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumVideoSelectComponent, isStandalone: false, selector: "herum-video-select", inputs: { currentVideoSpeed: "currentVideoSpeed", options: "options" }, outputs: { selectedOptionEmitter: "selectedOptionEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropup internal\" dir=\"rtl\" (click)=\"_onToggleDropup()\">\r\n    <button class=\"drop-button internal selected\"\r\n        [ngClass]=\"{'open-drop-button': show(), 'displayed-selected-option':selectedOption }\">\r\n        {{selectedOption ? selectedOption +'X' : '1X'}}\r\n    </button>\r\n\r\n    <div id=\"myDropup\" [ngClass]=\"{'dropup-content': true, 'show': show()}\">\r\n        <a *ngFor=\"let option of options; let i=index\" (click)=\"selectOption(i)\"\r\n            [ngClass]=\"{'selected': isSelectedOption(i)}\">\r\n            {{option}}X\r\n        </a>\r\n    </div>\r\n</div>", styles: [".drop-button{background-color:transparent;color:var(--disabled-text-color);border:none;cursor:pointer;text-align:center;font-size:var(--standard-font-size);width:40px;padding-block:4px}.dropup{position:relative;display:inline-block}.dropup-content{display:none;background-color:var(--tooltip-background-color);position:absolute;right:-3px;min-width:100%;overflow:auto;border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:0 1px 4px #0000002b;z-index:1;top:6%;transform:translateY(-100%)}.dropup-content a{color:var(--light-text-color);padding:8px 7px;text-decoration:none;display:block;font-size:var(--standard-font-size);text-align:center}.dropup-content a:hover{cursor:pointer}.show{display:block}.selected{color:var(--icons-color)!important;font-weight:bolder}.displayed-selected-option{color:var(--text-color)}.selected-option{color:var(--primary-color)}.title{width:80%;font-weight:700}#myDropup{z-index:10}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumVideoSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-video-select', template: "<div class=\"dropup internal\" dir=\"rtl\" (click)=\"_onToggleDropup()\">\r\n    <button class=\"drop-button internal selected\"\r\n        [ngClass]=\"{'open-drop-button': show(), 'displayed-selected-option':selectedOption }\">\r\n        {{selectedOption ? selectedOption +'X' : '1X'}}\r\n    </button>\r\n\r\n    <div id=\"myDropup\" [ngClass]=\"{'dropup-content': true, 'show': show()}\">\r\n        <a *ngFor=\"let option of options; let i=index\" (click)=\"selectOption(i)\"\r\n            [ngClass]=\"{'selected': isSelectedOption(i)}\">\r\n            {{option}}X\r\n        </a>\r\n    </div>\r\n</div>", styles: [".drop-button{background-color:transparent;color:var(--disabled-text-color);border:none;cursor:pointer;text-align:center;font-size:var(--standard-font-size);width:40px;padding-block:4px}.dropup{position:relative;display:inline-block}.dropup-content{display:none;background-color:var(--tooltip-background-color);position:absolute;right:-3px;min-width:100%;overflow:auto;border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:0 1px 4px #0000002b;z-index:1;top:6%;transform:translateY(-100%)}.dropup-content a{color:var(--light-text-color);padding:8px 7px;text-decoration:none;display:block;font-size:var(--standard-font-size);text-align:center}.dropup-content a:hover{cursor:pointer}.show{display:block}.selected{color:var(--icons-color)!important;font-weight:bolder}.displayed-selected-option{color:var(--text-color)}.selected-option{color:var(--primary-color)}.title{width:80%;font-weight:700}#myDropup{z-index:10}\n"] }]
+        }], propDecorators: { currentVideoSpeed: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], selectedOptionEmitter: [{
+                type: Output
+            }] } });
+
+const CUSTOM_RADIO_BUTTON_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HerumRadioButtonComponent),
+    multi: true,
+};
+class HerumRadioButtonComponent {
+    environmentConfig;
+    options = [];
+    isValid = false;
+    errorMsg = '';
+    isVertical = false;
+    selectOptionEmitter = new EventEmitter();
+    isBlocked = false;
+    type;
+    selectedOption;
+    additionalOptionsText = [];
+    showAdditionalOptionsText = false;
+    secondarySelectedOption;
+    selectedOptionId;
+    isSelectedOptionFocused = false;
+    isOptionFocused = false;
+    focusedIdOption;
+    constructor(environmentConfig) {
+        this.environmentConfig = environmentConfig;
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedOption']?.currentValue)
+            this.selectedOptionId = changes['selectedOption'].currentValue;
+        if (changes['type']?.currentValue)
+            changes['type'].currentValue === this.environmentConfig?.radioButtonTypes?.disabled ? this.isBlocked = true : null;
+    }
+    _onSelect(option) {
+        if (this.isBlocked)
+            return;
+        this.selectedOptionId = option.id;
+        this.onChange(option);
+        this.selectOptionEmitter.emit(option.id);
+    }
+    getRadioButtonClasses(id) {
+        let classes = this.isBlocked ? 'not-clickable ' : '';
+        if (this.type === this.environmentConfig?.radioButtonTypes?.disabled && !this.selectedOption)
+            return classes += this.setAllButtonsToDisabled(classes, id);
+        if (id === this.selectedOptionId)
+            classes += this.setSelectedButton(classes);
+        if ((this.isOptionFocused && id !== this.selectedOption && this.selectedOption) || (!this.selectedOption && this.focusedIdOption === id && this.isOptionFocused))
+            classes += `default-focused-radio `;
+        return classes.trim();
+    }
+    setAllButtonsToDisabled(classes, id) {
+        classes += `${this.type}-border `;
+        return this.focusedIdOption === id ? classes += `${this.type}-focused-radio` : classes;
+    }
+    setSelectedButton(classes) {
+        classes += this.type ? `${this.type}-border ` : 'checked-border ';
+        if (this.isSelectedOptionFocused)
+            classes += this.type ? `${this.type}-focused-radio ` : 'default-focused-radio ';
+        return classes;
+    }
+    getRadioButtonInnerCircleClasses(id) {
+        let classes = ``;
+        if (this.type === this.environmentConfig?.radioButtonTypes?.disabled && !this.selectedOption)
+            return `${this.type}-background ${this.type}-inner-circle`;
+        if (id === this.selectedOptionId)
+            classes += this.type ? `${this.type}-background  ` : 'checked-background ';
+        classes += this.type === this.environmentConfig?.radioButtonTypes?.disabled || this.type === this.environmentConfig?.radioButtonTypes?.completed ? `${this.type}-inner-circle  ` : 'default-inner-circle ';
+        return classes.trim();
+    }
+    _isRadioButtonFocused(id, value) {
+        this.focusedIdOption = id;
+        if (id === this.selectedOption)
+            this.isSelectedOptionFocused = value;
+        else
+            this.isOptionFocused = value;
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (value === null || value == undefined)
+            return;
+        if (typeof value === 'string' || typeof value === 'number') {
+            this.selectedOptionId = value;
+            return;
+        }
+        this.selectedOptionId = value.id;
+        this.type = value.type;
+        this.isBlocked = value.isBlocked || this.isBlocked;
+    }
+    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: HerumRadioButtonComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumRadioButtonComponent, isStandalone: false, selector: "herum-radio-button", inputs: { options: "options", isValid: "isValid", errorMsg: "errorMsg", isVertical: "isVertical", isBlocked: "isBlocked", type: "type", selectedOption: "selectedOption", additionalOptionsText: "additionalOptionsText", showAdditionalOptionsText: "showAdditionalOptionsText", secondarySelectedOption: "secondarySelectedOption" }, outputs: { selectOptionEmitter: "selectOptionEmitter" }, providers: [CUSTOM_RADIO_BUTTON_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<div class=\"options-container\" [ngClass]=\"{'direction-column':isVertical}\">\r\n  <label class=\"label\" *ngFor=\"let option of options ;let i = index\">\r\n    <div class=\"option\" [attr.includes-additional-option-text]=\" additionalOptionsText[i] ? 'true' : 'false'\"\r\n      [attr.type]=\"selectedOptionId===option.id ? type+'-selected': secondarySelectedOption?.id===option.id ? 'checked' : ''\">\r\n      <div class=\"radio-container\" [ngClass]=\"getRadioButtonClasses(option.id)\" [tabindex]=\"'radio-' + i\"\r\n        id=\"radio-{{option.id}}\" (click)=\"_onSelect(option)\" (blur)=\"_isRadioButtonFocused(option.id,false)\">\r\n        <div class=\"inner-circle\" [ngClass]=\"getRadioButtonInnerCircleClasses(option.id)\">\r\n        </div>\r\n      </div>\r\n\r\n      <span class=\"option-name\" [attr.type]=\"type\" [ngClass]=\"{'cursor-pointer':type===undefined}\"\r\n        (click)=\"_onSelect(option)\">\r\n        {{option?.name }}\r\n      </span>\r\n    </div>\r\n\r\n    <span *ngIf=\"additionalOptionsText[i] && showAdditionalOptionsText\" class=\"additional-option-text\">\r\n      {{ additionalOptionsText[i] }}\r\n    </span>\r\n  </label>\r\n</div>", styles: [":host{width:100%}label{display:inline-flex;align-items:center;gap:8px;margin:0}label .option{display:flex;align-items:center;gap:8px}.options-container{display:flex;flex-direction:row;gap:8px}.radio-container{position:relative;--size: 14px;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;transition:.3s;cursor:pointer}.radio-container:focus{outline:none}.error-focused-radio{border-color:var(--error-color);box-shadow:0 0 5px var(--error-color)}.disabled-focused-radio{border-color:var(--disabled-border-color);box-shadow:0 0 5px var(--disabled-border-color)}.default-focused-radio{border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.inner-circle{position:absolute;border-radius:50%}.default-inner-circle{width:50%;height:50%;top:50%;transform:translate(-50%,-50%)}.disabled-inner-circle,.completed-inner-circle{width:100%;height:100%;top:0%}.checked-background{background-color:var(--icons-color)}.error-background{background-color:var(--error-color)}.completed-background{background-color:#00f;background-image:url(/assets/shared/icons/bigV.svg);background-repeat:no-repeat;background-position:center}.default-background{background-color:var(--error-color)}.disabled-background{background:var(--disabled-background-color);opacity:.5}.checked-border{border:calc(var(--size) / 10) solid var(--icons-color)}.error-border{border:calc(var(--size) / 10) solid var(--error-color)}.disabled-border{border:calc(var(--size) / 10) solid var(--disabled-border-color)}.completed-border{border:blue}input[type=radio]{--size: 16px;position:relative;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-size:inherit;transition:.3s}.direction-column{flex-direction:column}@media print{input[type=radio]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:none}}.additional-option-text{flex:1}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'herum-radio-button', providers: [CUSTOM_RADIO_BUTTON_CONTROL_VALUE_ACCESSOR], template: "<div class=\"options-container\" [ngClass]=\"{'direction-column':isVertical}\">\r\n  <label class=\"label\" *ngFor=\"let option of options ;let i = index\">\r\n    <div class=\"option\" [attr.includes-additional-option-text]=\" additionalOptionsText[i] ? 'true' : 'false'\"\r\n      [attr.type]=\"selectedOptionId===option.id ? type+'-selected': secondarySelectedOption?.id===option.id ? 'checked' : ''\">\r\n      <div class=\"radio-container\" [ngClass]=\"getRadioButtonClasses(option.id)\" [tabindex]=\"'radio-' + i\"\r\n        id=\"radio-{{option.id}}\" (click)=\"_onSelect(option)\" (blur)=\"_isRadioButtonFocused(option.id,false)\">\r\n        <div class=\"inner-circle\" [ngClass]=\"getRadioButtonInnerCircleClasses(option.id)\">\r\n        </div>\r\n      </div>\r\n\r\n      <span class=\"option-name\" [attr.type]=\"type\" [ngClass]=\"{'cursor-pointer':type===undefined}\"\r\n        (click)=\"_onSelect(option)\">\r\n        {{option?.name }}\r\n      </span>\r\n    </div>\r\n\r\n    <span *ngIf=\"additionalOptionsText[i] && showAdditionalOptionsText\" class=\"additional-option-text\">\r\n      {{ additionalOptionsText[i] }}\r\n    </span>\r\n  </label>\r\n</div>", styles: [":host{width:100%}label{display:inline-flex;align-items:center;gap:8px;margin:0}label .option{display:flex;align-items:center;gap:8px}.options-container{display:flex;flex-direction:row;gap:8px}.radio-container{position:relative;--size: 14px;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;transition:.3s;cursor:pointer}.radio-container:focus{outline:none}.error-focused-radio{border-color:var(--error-color);box-shadow:0 0 5px var(--error-color)}.disabled-focused-radio{border-color:var(--disabled-border-color);box-shadow:0 0 5px var(--disabled-border-color)}.default-focused-radio{border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.inner-circle{position:absolute;border-radius:50%}.default-inner-circle{width:50%;height:50%;top:50%;transform:translate(-50%,-50%)}.disabled-inner-circle,.completed-inner-circle{width:100%;height:100%;top:0%}.checked-background{background-color:var(--icons-color)}.error-background{background-color:var(--error-color)}.completed-background{background-color:#00f;background-image:url(/assets/shared/icons/bigV.svg);background-repeat:no-repeat;background-position:center}.default-background{background-color:var(--error-color)}.disabled-background{background:var(--disabled-background-color);opacity:.5}.checked-border{border:calc(var(--size) / 10) solid var(--icons-color)}.error-border{border:calc(var(--size) / 10) solid var(--error-color)}.disabled-border{border:calc(var(--size) / 10) solid var(--disabled-border-color)}.completed-border{border:blue}input[type=radio]{--size: 16px;position:relative;height:var(--size);width:var(--size);border:calc(var(--size) / 10) solid var(--secondary-color);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-size:inherit;transition:.3s}.direction-column{flex-direction:column}@media print{input[type=radio]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:none}}.additional-option-text{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HERUM_SHARED_CONFIG_TOKEN]
+                }] }], propDecorators: { options: [{
+                type: Input
+            }], isValid: [{
+                type: Input
+            }], errorMsg: [{
+                type: Input
+            }], isVertical: [{
+                type: Input
+            }], selectOptionEmitter: [{
+                type: Output
+            }], isBlocked: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], selectedOption: [{
+                type: Input
+            }], additionalOptionsText: [{
+                type: Input
+            }], showAdditionalOptionsText: [{
+                type: Input
+            }], secondarySelectedOption: [{
+                type: Input
+            }] } });
+
+class RoundedVerticalMenuComponent {
+    menuItems = [];
+    currentItem;
+    currentUser;
+    itemSelected = new EventEmitter();
+    ngOnInit() {
+        if (!this.currentItem)
+            this.currentItem = this.menuItems[0];
+    }
+    ngOnChanges(changes) {
+        if (changes.menuItems || changes.currentUser) {
+            this.updateDisabledMenuItems();
+            this.currentItem = this.menuItems.find(menuItem => menuItem.id === this.currentItem?.id);
+        }
+        if (this.currentItem.disabled) {
+            this.currentItem = this.menuItems.find(menuItem => !menuItem.disabled);
+            this._onSelectItem(this.currentItem);
+        }
+    }
+    _onSelectItem(item) {
+        if (item.disabled)
+            return;
+        this.itemSelected.next(item);
+    }
+    updateDisabledMenuItems() {
+        this.menuItems = this.menuItems.map(menuItem => {
+            if (!!menuItem.accessValidator) {
+                const result = menuItem.accessValidator(this.currentUser);
+                if (result)
+                    return { ...menuItem, disabledTooltip: result.error, disabled: true };
+                return { ...menuItem, disabledTooltip: null, disabled: false };
+            }
+            return menuItem;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RoundedVerticalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: RoundedVerticalMenuComponent, isStandalone: false, selector: "rounded-vertical-menu", inputs: { menuItems: "menuItems", currentItem: "currentItem", currentUser: "currentUser" }, outputs: { itemSelected: "itemSelected" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--title-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RoundedVerticalMenuComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'rounded-vertical-menu', template: "<ul class=\"nav-list\">\r\n    <li *ngFor=\"let item of menuItems\" [class.active]=\"item === currentItem\" (click)=\"_onSelectItem(item)\"\r\n        [class.disabled]=\"item.disabled\" appHerumToolTip [matTooltip]=\"item.disabledTooltip\">\r\n        <img src=\"assets/hadracha/creation-icons/{{item.disabled ? 'disabled' : item === currentItem ? 'active' : 'regular'}}/{{ item.iconName }}.svg\"\r\n            alt=\"{{ item.label }} icon\">\r\n        <a>{{ item.label }}</a>\r\n    </li>\r\n</ul>", styles: [":host{--body-bg: var(--light-background-color);--nav-bg: var(--icons-color);--nav-width: 15%}.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.nav-list li{padding-block:1rem;padding-inline:2rem;display:flex;gap:8px}.nav-list li a{color:#fff;text-decoration:none;display:block;font-size:14px;cursor:pointer}.nav-list li.active{view-transition-name:nav;background:var(--body-bg);border-radius:0 100vw 100vw 0;position:relative}.nav-list li.active a{color:var(--title-color)}.nav-list li.active:before,.nav-list li.active:after{--r: 1rem;content:\"\";position:absolute;width:var(--r);height:var(--r);left:0;background:var(--nav-bg)}.nav-list li.active:before{border-radius:0 0 0 var(--r);top:calc(-1 * var(--r));box-shadow:-5px 5px 0 5px var(--body-bg)}.nav-list li.active:after{border-radius:var(--r) 0 0 0;bottom:calc(-1 * var(--r));box-shadow:-5px -5px 0 5px var(--body-bg)}.nav-list li.active ::view-transition-group(nav){animation-duration:1s}.nav-list li.disabled{cursor:not-allowed}.nav-list li.disabled a{color:var(--disabled-text-color);cursor:not-allowed}.nav-list li:nth-child(1) a{view-transition-name:test}.nav-list li:nth-child(2) a{view-transition-name:test-2}.nav-list li:nth-child(3) a{view-transition-name:test-3}\n"] }]
+        }], propDecorators: { menuItems: [{
+                type: Input
+            }], currentItem: [{
+                type: Input
+            }], currentUser: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }] } });
+
+class TrackTextChangesNotesComponent {
+    textChanges;
+    enableDeleteNote = true;
+    deleteNoteChange = new EventEmitter();
+    hoverNote = new EventEmitter();
+    noteTypesToDisplay;
+    ngOnChanges(changes) {
+        if (changes['textChanges']?.currentValue)
+            this.setNoteTypesToDisplay();
+    }
+    setNoteTypesToDisplay() {
+        this.noteTypesToDisplay = this.textChanges.map(textChange => {
+            switch (textChange.type) {
+                case 'addition':
+                    return 'טקסט שנוסף';
+                case 'deletion':
+                    return 'טקסט שנמחק';
+                case 'comment':
+                    return 'טקסט מסומן';
+                case 'generalNote':
+                    return 'הערה כללית';
+            }
+        });
+    }
+    _onDeleteTextChange(textChangeToDelete) {
+        const index = this.textChanges.findIndex(textChange => textChange === textChangeToDelete);
+        if (index !== -1)
+            this.textChanges.splice(index, 1);
+        this.deleteNoteChange.emit(this.textChanges);
+        this.setNoteTypesToDisplay();
+    }
+    _onHoverNote(hoveredTextChange) {
+        this.hoverNote.emit(hoveredTextChange);
+    }
+    _trackNote(index, textChange) {
+        return textChange.id || index;
+    }
+    get deleteSvgString() {
+        return svgsStrings.X;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesNotesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TrackTextChangesNotesComponent, isStandalone: false, selector: "track-text-changes-notes", inputs: { textChanges: "textChanges", enableDeleteNote: "enableDeleteNote" }, outputs: { deleteNoteChange: "deleteNoteChange", hoverNote: "hoverNote" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"notes-title\">\u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n\r\n<div *ngIf=\"textChanges?.length; else noNotes\" class=\"notes\">\r\n    <div class=\"note\" *ngFor=\"let textChange of textChanges; let index=index; trackBy:_trackNote\">\r\n        <button *ngIf=\"enableDeleteNote\" class=\"delete-button\" (click)=\"_onDeleteTextChange(textChange)\">\r\n            <span class=\"delete-icon\" [innerHTML]=\"deleteSvgString | safeHtml\"> </span>\r\n        </button>\r\n\r\n        <div class=\"note-card\" (mouseenter)=\"_onHoverNote(textChange)\" (mouseleave)=\"_onHoverNote(undefined)\">\r\n            <ng-container *ngIf=\"textChange.type!=='generalNote'; else generalNote\">\r\n                <p class=\"note-header\" [ngClass]=\"[textChange.type]\">\r\n                    <span [class]=\"textChange.type+'-note'\">{{ textChange.note }}</span>\r\n                    <span>{{ noteTypesToDisplay[index] }}</span>\r\n                </p>\r\n\r\n                <p class=\"comment-text\">\r\n                    {{ textChange.commentText ? textChange.commentText : '\u05DC\u05DC\u05D0 \u05D4\u05E2\u05E8\u05D4' }}\r\n                </p>\r\n            </ng-container>\r\n\r\n            <ng-template #generalNote>\r\n                <p class=\"general-note comment-text\">\r\n                    {{ textChange.note }}\r\n                </p>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #noNotes>\r\n    <div>\u05D0\u05D9\u05DF \u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n</ng-template>", styles: [":host{display:flex;flex-direction:column}.notes-title{font-size:14px;margin-block-end:8px}.notes{display:flex;flex-direction:column;gap:12px;padding-left:8px}.notes .note{display:flex;gap:8px;align-items:flex-start;flex:1}.notes .note .delete-button{padding:0;background:transparent;border:none}.notes .note .delete-icon{fill:var(--text-color)}.notes .note .note-card{background-color:var(--page-background-color);flex:1;border-radius:var(--border-radius)}.notes .note .note-card p{margin-block-end:0;font-size:14px}.notes .note .note-card .note-header,.notes .note .note-card .note,.notes .note .note-card .comment-text{padding:var(--standard-padding)}.notes .note .note-card .note-header{border-radius:var(--border-radius) var(--border-radius) 0 0;display:flex;justify-content:space-between}.notes .note .note-card .note-header .addition-note{color:var(--secondary-color)}.notes .note .note-card .note-header .deletion-note{color:var(--error-color)}.notes .note .note-card .note-header .comment-note{color:var(--positive-color)}.notes .note .note-card .comment-text{border-radius:0 0 var(--border-radius) var(--border-radius)}.notes .note .note-card .general-note{border-radius:var(--border-radius)}.notes .note .addition{color:var(--secondary-color);background-color:color-mix(in srgb,var(--secondary-color) 20%,transparent)}.notes .note .deletion{color:var(--error-color);background-color:var(--light-error-color)}.notes .note .comment{color:var(--positive-color);background-color:var(--light-positive-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesNotesComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'track-text-changes-notes', template: "<div class=\"notes-title\">\u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n\r\n<div *ngIf=\"textChanges?.length; else noNotes\" class=\"notes\">\r\n    <div class=\"note\" *ngFor=\"let textChange of textChanges; let index=index; trackBy:_trackNote\">\r\n        <button *ngIf=\"enableDeleteNote\" class=\"delete-button\" (click)=\"_onDeleteTextChange(textChange)\">\r\n            <span class=\"delete-icon\" [innerHTML]=\"deleteSvgString | safeHtml\"> </span>\r\n        </button>\r\n\r\n        <div class=\"note-card\" (mouseenter)=\"_onHoverNote(textChange)\" (mouseleave)=\"_onHoverNote(undefined)\">\r\n            <ng-container *ngIf=\"textChange.type!=='generalNote'; else generalNote\">\r\n                <p class=\"note-header\" [ngClass]=\"[textChange.type]\">\r\n                    <span [class]=\"textChange.type+'-note'\">{{ textChange.note }}</span>\r\n                    <span>{{ noteTypesToDisplay[index] }}</span>\r\n                </p>\r\n\r\n                <p class=\"comment-text\">\r\n                    {{ textChange.commentText ? textChange.commentText : '\u05DC\u05DC\u05D0 \u05D4\u05E2\u05E8\u05D4' }}\r\n                </p>\r\n            </ng-container>\r\n\r\n            <ng-template #generalNote>\r\n                <p class=\"general-note comment-text\">\r\n                    {{ textChange.note }}\r\n                </p>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #noNotes>\r\n    <div>\u05D0\u05D9\u05DF \u05D4\u05E2\u05E8\u05D5\u05EA</div>\r\n</ng-template>", styles: [":host{display:flex;flex-direction:column}.notes-title{font-size:14px;margin-block-end:8px}.notes{display:flex;flex-direction:column;gap:12px;padding-left:8px}.notes .note{display:flex;gap:8px;align-items:flex-start;flex:1}.notes .note .delete-button{padding:0;background:transparent;border:none}.notes .note .delete-icon{fill:var(--text-color)}.notes .note .note-card{background-color:var(--page-background-color);flex:1;border-radius:var(--border-radius)}.notes .note .note-card p{margin-block-end:0;font-size:14px}.notes .note .note-card .note-header,.notes .note .note-card .note,.notes .note .note-card .comment-text{padding:var(--standard-padding)}.notes .note .note-card .note-header{border-radius:var(--border-radius) var(--border-radius) 0 0;display:flex;justify-content:space-between}.notes .note .note-card .note-header .addition-note{color:var(--secondary-color)}.notes .note .note-card .note-header .deletion-note{color:var(--error-color)}.notes .note .note-card .note-header .comment-note{color:var(--positive-color)}.notes .note .note-card .comment-text{border-radius:0 0 var(--border-radius) var(--border-radius)}.notes .note .note-card .general-note{border-radius:var(--border-radius)}.notes .note .addition{color:var(--secondary-color);background-color:color-mix(in srgb,var(--secondary-color) 20%,transparent)}.notes .note .deletion{color:var(--error-color);background-color:var(--light-error-color)}.notes .note .comment{color:var(--positive-color);background-color:var(--light-positive-color)}\n"] }]
+        }], propDecorators: { textChanges: [{
+                type: Input
+            }], enableDeleteNote: [{
+                type: Input
+            }], deleteNoteChange: [{
+                type: Output
+            }], hoverNote: [{
+                type: Output
+            }] } });
+
+class UserProfileImageComponent {
+    imageSize = 'image-default-size';
+    mode = 'horizontal';
+    user;
+    isLoadingUser;
+    isUserClickAble = false;
+    userClicked = new EventEmitter();
+    imagePath = '';
+    isLoadingImage = true;
+    ngOnChanges(changes) {
+        if (changes['user']?.currentValue && !this.isLoadingUser)
+            this.imagePath = this.userProfileImage;
+    }
+    _onUserClicked() {
+        if (!this.isUserClickAble)
+            return;
+        this.userClicked.emit(this.user);
+    }
+    _useFallbackProfileImage(event) {
+        event.preventDefault();
+        this.imagePath = this.fallbackProfileImage;
+    }
+    _loadComplete() {
+        this.isLoadingImage = false;
+    }
+    get userProfileImage() {
+        if (this.user.pictureUrl)
+            return this.user.pictureUrl;
+        if (!('gender' in this.user))
+            return maleAvatarPath;
+        return (this.user.gender == Gender.Male ? maleAvatarPath : femaleAvatarPath);
+    }
+    get fallbackProfileImage() {
+        if (!this.user)
+            return maleAvatarPath;
+        if (!('gender' in this.user))
+            return maleAvatarPath;
+        return this.user.gender == Gender.Male ? maleAvatarPath : femaleAvatarPath;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserProfileImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: UserProfileImageComponent, isStandalone: false, selector: "user-profile-image", inputs: { imageSize: "imageSize", mode: "mode", user: "user", isLoadingUser: "isLoadingUser", isUserClickAble: "isUserClickAble" }, outputs: { userClicked: "userClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"profile-image-container\" [ngClass]=\"[mode]\">\r\n    <div class=\"profile-image\"\r\n        [ngClass]=\"[imageSize, isLoadingImage || isLoadingUser ? 'skeleton' : '',isUserClickAble ? 'cursor-pointer':'']\"\r\n        [style.background-image]=\"'url(' + imagePath + ')'\" (click)=\"_onUserClicked()\"></div>\r\n\r\n    <img *ngIf=\"!isLoadingUser\" [src]=\"imagePath\" class=\"profile-image-for-fallback\" [ngClass]=\"[imageSize ]\"\r\n        (error)=\"_useFallbackProfileImage($event)\" (load)=\"_loadComplete()\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host{display:block;position:relative}.profile-image-container{height:100%;width:100%}.profile-image-container .profile-image{height:148px;width:148px;box-shadow:0 3px 6px #00000029!important;border-radius:50%;background-size:cover;position:relative;background-position:center center;align-items:flex-end;display:flex}.profile-image-container .horizontal{flex-direction:row;padding-bottom:8px}.profile-image-container .profile-image-for-fallback{display:none;width:0px;height:0px}.profile-image-container .image-small-size{height:40px;width:40px}.profile-image-container .image-default-size{height:112px;width:112px}.profile-image-container .responsive{height:100%;width:100%}\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: UserProfileImageComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'user-profile-image', template: "<div class=\"profile-image-container\" [ngClass]=\"[mode]\">\r\n    <div class=\"profile-image\"\r\n        [ngClass]=\"[imageSize, isLoadingImage || isLoadingUser ? 'skeleton' : '',isUserClickAble ? 'cursor-pointer':'']\"\r\n        [style.background-image]=\"'url(' + imagePath + ')'\" (click)=\"_onUserClicked()\"></div>\r\n\r\n    <img *ngIf=\"!isLoadingUser\" [src]=\"imagePath\" class=\"profile-image-for-fallback\" [ngClass]=\"[imageSize ]\"\r\n        (error)=\"_useFallbackProfileImage($event)\" (load)=\"_loadComplete()\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host{display:block;position:relative}.profile-image-container{height:100%;width:100%}.profile-image-container .profile-image{height:148px;width:148px;box-shadow:0 3px 6px #00000029!important;border-radius:50%;background-size:cover;position:relative;background-position:center center;align-items:flex-end;display:flex}.profile-image-container .horizontal{flex-direction:row;padding-bottom:8px}.profile-image-container .profile-image-for-fallback{display:none;width:0px;height:0px}.profile-image-container .image-small-size{height:40px;width:40px}.profile-image-container .image-default-size{height:112px;width:112px}.profile-image-container .responsive{height:100%;width:100%}\n"] }]
+        }], propDecorators: { imageSize: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }], isLoadingUser: [{
+                type: Input
+            }], isUserClickAble: [{
+                type: Input
+            }], userClicked: [{
+                type: Output
+            }] } });
+
+class UsersProfilePreviewComponent {
+    users = [];
+    title = '';
+    searchFields = ['militaryId', 'firstName'];
+    placeholder = 'חפש לפי שם / מ.א';
+    filteredUsers = [];
+    ngOnChanges(changes) {
+        if (changes['users']?.currentValue)
+            this.filteredUsers = this.users;
+    }
+    _filterUsers(freeText) {
+        this.filteredUsers = this.users.filter(user => this.searchFields.some((field) => user[field]?.includes(freeText)));
+    }
+    fallbackProfileImage(user) {
+        return user.gender == Gender.Male ? maleAvatarPath : femaleAvatarPath;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UsersProfilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: UsersProfilePreviewComponent, isStandalone: false, selector: "users-profile-preview", inputs: { users: "users", title: "title", searchFields: "searchFields", placeholder: "placeholder" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"users?.length\" class=\"users-profile-preview\">\r\n    <herum-input-field type=\"search\" [placeholder]=\"placeholder\"\r\n        (inputValueEmitter)=\"_filterUsers($event)\"></herum-input-field>\r\n\r\n    <div class=\"users-container\">\r\n        <div class=\"user\" *ngFor=\"let user of filteredUsers\">\r\n            <div class=\"details\">\r\n                <div class=\"profile-image-container\">\r\n                    <user-profile-image [user]=\"user\" imageSize=\"image-small-size\"></user-profile-image>\r\n\r\n                    <h2 class=\"user-name section-title m-0\">\r\n                        {{ user.firstName }} {{ user.lastName }}\r\n                    </h2>\r\n                </div>\r\n\r\n                <div class=\"d-flex\">\r\n                    <p class=\"user-id section-title\">{{user.militaryId}}</p>\r\n\r\n                    <!-- uncomment when its connected -->\r\n                    <!-- <img src=\"assets/college/learningArea/menu-button.svg\"> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{height:100%}.users-profile-preview{display:flex;flex-direction:column;gap:12px;height:100%}.users-profile-preview .users-container{display:flex;flex-direction:column;gap:8px;height:90%;overflow-y:auto;padding-block-end:1px}.users-profile-preview .users-container .user{border:1px solid var(--border-separator-color);padding:4px 8px;max-width:100%;border-radius:var(--border-radius);margin-left:1px}.users-profile-preview .users-container .details{display:flex;justify-content:space-between;align-items:center;height:100%}.users-profile-preview .users-container .details .profile-image-container{display:flex;gap:8px;align-items:center}.users-profile-preview .users-container .details .user-id{margin-left:4px;margin-block-end:0}\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: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }, { kind: "component", type: 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: UsersProfilePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'users-profile-preview', template: "<div *ngIf=\"users?.length\" class=\"users-profile-preview\">\r\n    <herum-input-field type=\"search\" [placeholder]=\"placeholder\"\r\n        (inputValueEmitter)=\"_filterUsers($event)\"></herum-input-field>\r\n\r\n    <div class=\"users-container\">\r\n        <div class=\"user\" *ngFor=\"let user of filteredUsers\">\r\n            <div class=\"details\">\r\n                <div class=\"profile-image-container\">\r\n                    <user-profile-image [user]=\"user\" imageSize=\"image-small-size\"></user-profile-image>\r\n\r\n                    <h2 class=\"user-name section-title m-0\">\r\n                        {{ user.firstName }} {{ user.lastName }}\r\n                    </h2>\r\n                </div>\r\n\r\n                <div class=\"d-flex\">\r\n                    <p class=\"user-id section-title\">{{user.militaryId}}</p>\r\n\r\n                    <!-- uncomment when its connected -->\r\n                    <!-- <img src=\"assets/college/learningArea/menu-button.svg\"> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{height:100%}.users-profile-preview{display:flex;flex-direction:column;gap:12px;height:100%}.users-profile-preview .users-container{display:flex;flex-direction:column;gap:8px;height:90%;overflow-y:auto;padding-block-end:1px}.users-profile-preview .users-container .user{border:1px solid var(--border-separator-color);padding:4px 8px;max-width:100%;border-radius:var(--border-radius);margin-left:1px}.users-profile-preview .users-container .details{display:flex;justify-content:space-between;align-items:center;height:100%}.users-profile-preview .users-container .details .profile-image-container{display:flex;gap:8px;align-items:center}.users-profile-preview .users-container .details .user-id{margin-left:4px;margin-block-end:0}\n"] }]
+        }], propDecorators: { users: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], searchFields: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class AtomsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, declarations: [CollegeLoaderComponent,
+            UsersProfilePreviewComponent,
+            HerumBreadcrumbsComponent,
+            SliceBreadcrumbsPipe,
+            HerumButtonComponent,
+            HerumCheckboxComponent,
+            HerumChipComponent,
+            HerumCircularProgressBarComponent,
+            HerumDatePickerComponent,
+            HerumDownloadFileComponent,
+            HerumEllipsisLoaderComponent,
+            HerumIconLabelComponent,
+            HerumIndeterminateComponent,
+            ConditionalFormControlNameDirective,
+            HerumInputFieldComponent,
+            HerumLogoComponent,
+            HerumMultiSelectComponent,
+            HerumNarrowCollectionMenuItemComponent,
+            HerumNoResultMessageComponent,
+            HerumOptionsListComponent,
+            HerumPaginatorComponent,
+            HerumPanelLinksComponent,
+            HerumProgressBarComponent,
+            HerumQuizHeaderItemComponent,
+            HerumRecursiveHierarchyOptionsListComponent,
+            HerumSelectComponent,
+            HerumSliderComponent,
+            HerumSpinnerComponent,
+            HerumSwitchComponent,
+            HerumTextAreaComponent,
+            HerumTimePickerComponent,
+            HerumToggleButtonComponent,
+            HerumUploadFileComponent,
+            HerumVideoSelectComponent,
+            HerumRadioButtonComponent,
+            RoundedVerticalMenuComponent,
+            TrackTextChangesNotesComponent,
+            UserProfileImageComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatMenuModule,
+            ClipboardModule,
+            MatAutocompleteModule,
+            MatChipsModule,
+            MatFormFieldModule,
+            MatTooltipModule,
+            MatInputModule,
+            MatSelectModule,
+            MatIconModule,
+            MatCheckboxModule,
+            MatSliderModule,
+            DragDropModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            PipesModule], exports: [CollegeLoaderComponent,
+            UsersProfilePreviewComponent,
+            HerumBreadcrumbsComponent,
+            SliceBreadcrumbsPipe,
+            HerumButtonComponent,
+            HerumCheckboxComponent,
+            HerumChipComponent,
+            HerumCircularProgressBarComponent,
+            HerumDatePickerComponent,
+            HerumDownloadFileComponent,
+            HerumEllipsisLoaderComponent,
+            HerumIconLabelComponent,
+            HerumIndeterminateComponent,
+            ConditionalFormControlNameDirective,
+            HerumInputFieldComponent,
+            HerumLogoComponent,
+            HerumMultiSelectComponent,
+            HerumNarrowCollectionMenuItemComponent,
+            HerumNoResultMessageComponent,
+            HerumOptionsListComponent,
+            HerumPaginatorComponent,
+            HerumPanelLinksComponent,
+            HerumProgressBarComponent,
+            HerumQuizHeaderItemComponent,
+            HerumRecursiveHierarchyOptionsListComponent,
+            HerumSelectComponent,
+            HerumSliderComponent,
+            HerumSpinnerComponent,
+            HerumSwitchComponent,
+            HerumTextAreaComponent,
+            HerumTimePickerComponent,
+            HerumToggleButtonComponent,
+            HerumUploadFileComponent,
+            HerumVideoSelectComponent,
+            HerumRadioButtonComponent,
+            RoundedVerticalMenuComponent,
+            TrackTextChangesNotesComponent,
+            UserProfileImageComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, 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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CollegeLoaderComponent,
+                        UsersProfilePreviewComponent,
+                        HerumBreadcrumbsComponent,
+                        SliceBreadcrumbsPipe,
+                        HerumButtonComponent,
+                        HerumCheckboxComponent,
+                        HerumChipComponent,
+                        HerumCircularProgressBarComponent,
+                        HerumDatePickerComponent,
+                        HerumDownloadFileComponent,
+                        HerumEllipsisLoaderComponent,
+                        HerumIconLabelComponent,
+                        HerumIndeterminateComponent,
+                        ConditionalFormControlNameDirective,
+                        HerumInputFieldComponent,
+                        HerumLogoComponent,
+                        HerumMultiSelectComponent,
+                        HerumNarrowCollectionMenuItemComponent,
+                        HerumNoResultMessageComponent,
+                        HerumOptionsListComponent,
+                        HerumPaginatorComponent,
+                        HerumPanelLinksComponent,
+                        HerumProgressBarComponent,
+                        HerumQuizHeaderItemComponent,
+                        HerumRecursiveHierarchyOptionsListComponent,
+                        HerumSelectComponent,
+                        HerumSliderComponent,
+                        HerumSpinnerComponent,
+                        HerumSwitchComponent,
+                        HerumTextAreaComponent,
+                        HerumTimePickerComponent,
+                        HerumToggleButtonComponent,
+                        HerumUploadFileComponent,
+                        HerumVideoSelectComponent,
+                        HerumRadioButtonComponent,
+                        RoundedVerticalMenuComponent,
+                        TrackTextChangesNotesComponent,
+                        UserProfileImageComponent
+                    ],
+                    exports: [
+                        CollegeLoaderComponent,
+                        UsersProfilePreviewComponent,
+                        HerumBreadcrumbsComponent,
+                        SliceBreadcrumbsPipe,
+                        HerumButtonComponent,
+                        HerumCheckboxComponent,
+                        HerumChipComponent,
+                        HerumCircularProgressBarComponent,
+                        HerumDatePickerComponent,
+                        HerumDownloadFileComponent,
+                        HerumEllipsisLoaderComponent,
+                        HerumIconLabelComponent,
+                        HerumIndeterminateComponent,
+                        ConditionalFormControlNameDirective,
+                        HerumInputFieldComponent,
+                        HerumLogoComponent,
+                        HerumMultiSelectComponent,
+                        HerumNarrowCollectionMenuItemComponent,
+                        HerumNoResultMessageComponent,
+                        HerumOptionsListComponent,
+                        HerumPaginatorComponent,
+                        HerumPanelLinksComponent,
+                        HerumProgressBarComponent,
+                        HerumQuizHeaderItemComponent,
+                        HerumRecursiveHierarchyOptionsListComponent,
+                        HerumSelectComponent,
+                        HerumSliderComponent,
+                        HerumSpinnerComponent,
+                        HerumSwitchComponent,
+                        HerumTextAreaComponent,
+                        HerumTimePickerComponent,
+                        HerumToggleButtonComponent,
+                        HerumUploadFileComponent,
+                        HerumVideoSelectComponent,
+                        HerumRadioButtonComponent,
+                        RoundedVerticalMenuComponent,
+                        TrackTextChangesNotesComponent,
+                        UserProfileImageComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MatMenuModule,
+                        ClipboardModule,
+                        MatAutocompleteModule,
+                        MatChipsModule,
+                        MatFormFieldModule,
+                        MatTooltipModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                        MatSliderModule,
+                        DragDropModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        PipesModule
+                    ],
+                    providers: [
+                        { provide: MAT_DATE_LOCALE, useValue: 'he-IL' },
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AtomsModule, CollegeLoaderComponent, ConditionalFormControlNameDirective, HerumBreadcrumbsComponent, HerumButtonComponent, HerumCheckboxComponent, HerumChipComponent, HerumCircularProgressBarComponent, HerumDatePickerComponent, HerumDownloadFileComponent, HerumEllipsisLoaderComponent, HerumFormControl, HerumIconLabelComponent, HerumIndeterminateComponent, HerumInputFieldComponent, HerumLogoComponent, HerumMultiSelectComponent, HerumNarrowCollectionMenuItemComponent, HerumNoResultMessageComponent, HerumOptionsListComponent, HerumPaginatorComponent, HerumPanelLinksComponent, HerumProgressBarComponent, HerumQuizHeaderItemComponent, HerumRadioButtonComponent, HerumRecursiveHierarchyOptionsListComponent, HerumSelectComponent, HerumSliderComponent, HerumSpinnerComponent, HerumSwitchComponent, HerumTextAreaComponent, HerumTimePickerComponent, HerumToggleButtonComponent, HerumUploadFileComponent, HerumVideoSelectComponent, RoundedVerticalMenuComponent, SliceBreadcrumbsPipe, TrackTextChangesNotesComponent, UserProfileImageComponent, UsersProfilePreviewComponent };
+//# sourceMappingURL=herum-shared-atoms.mjs.map