herum-shared 1.0.3 → 1.0.5

package/fesm2022/herum-shared.mjs

@@ -1741,6 +1741,7 @@ class HerumInputFieldComponent {
     ltrMode = false;
     preventMacroKeysPressEvent = [keyboardAsciiCodes$1.space, keyboardAsciiCodes$1.right, keyboardAsciiCodes$1.left];
     inputValueEmitter = new EventEmitter();
+    isValidChange = new EventEmitter();
     inputElement;
     onKeyPress(event) {
         const alt = event.target.alt;
@@ -1831,6 +1832,7 @@ class HerumInputFieldComponent {
             this.isValid = !this.errorMsg;
             if (this.ngControl)
                 this.setNgControlRangeValidator();
+            this.isValidChange.emit(this.isValid);
             if (!this.isValid)
                 return;
         }
@@ -1931,7 +1933,7 @@ class HerumInputFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumInputFieldComponent, isStandalone: false, selector: "herum-input-field", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", isBlocked: "isBlocked", isValid: "isValid", errorMsg: "errorMsg", showErrorMsgGap: "showErrorMsgGap", inputValue: "inputValue", isLoading: "isLoading", id: "id", debounceTime: "debounceTime", minValue: "minValue", maxValue: "maxValue", isBlurred: "isBlurred", touched: "touched", ltrMode: "ltrMode", preventMacroKeysPressEvent: "preventMacroKeysPressEvent" }, outputs: { inputValueEmitter: "inputValueEmitter" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" }, properties: { "class.required-control": "isRequired" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: 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\" (mousedown)=\"$event.preventDefault()\"\r\n            (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{ errorMsg }}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
+    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", isValidChange: "isValidChange" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" }, properties: { "class.required-control": "isRequired" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: 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\" (mousedown)=\"$event.preventDefault()\"\r\n            (click)=\"_onTogglePasswordVisibility($event)\">\r\n            <img [src]=\"passwordEyeSource\">\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isLoading\" class=\"skeleton skeleton-text input-skeleton\"></div>\r\n</div>\r\n\r\n<label class=\"error-msg right\" *ngIf=\"shouldShowErrorMsg\">\r\n    {{ errorMsg }}\r\n</label>", styles: [":host{--icon-size: 16px}.input-container .icon{position:absolute;left:12px;cursor:pointer}.icon{stroke:var(--icons-color);height:var(--icon-size);width:var(--icon-size)}.small-icon{fill:var(--icons-color);height:9px}.icon img{width:var(--icon-size);height:var(--icon-size);display:block}.eye-icon{display:inline-flex;align-items:center;justify-content:center}.input-field:disabled{opacity:.6;cursor:not-allowed}.input-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%}.search-blur input{border:1px solid rgba(255,255,255,.6)!important;background-color:#ffffff39!important;color:#fff!important}.search-blur input::placeholder{color:#fff!important}.search-blur .icon,.search-blur .small-icon{stroke:#fff!important}\n", ".input-container{position:relative;display:flex;align-items:center}.input-container .input-field{padding:8px 12px 8px 30px;color:#000;height:var(--atom-input-height)}.input-field{border:1px solid var(--inactive-border-color);padding:var(--button-padding-size);border-radius:var(--border-radius);font-size:var(--standard-font-size);box-shadow:0 0 var(--box-shadow-blur) #00000029!important}.input-field:hover{border-color:var(--icons-color-light-2)}.input-field:focus{outline:none;border-color:var(--icons-color-light-1);box-shadow:0 0 5px var(--icons-color-light-1)}.input-field::placeholder{color:var(--disabled-text-color)}span{justify-content:center;display:flex}img{height:16px}.right{justify-content:right}.error-input,.error-input:focus{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4$1.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumInputFieldComponent, decorators: [{
             type: Component,
@@ -1976,6 +1978,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], inputValueEmitter: [{
                 type: Output
+            }], isValidChange: [{
+                type: Output
             }], inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
@@ -2016,7 +2020,7 @@ class BlockedFormComponent {
     progressBars = [];
     view = 'wide';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BlockedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: BlockedFormComponent, isStandalone: false, selector: "blocked-form", inputs: { inputs: "inputs", progressBars: "progressBars", view: "view" }, ngImport: i0, template: "<div class=\"grid-container\">\r\n    <div class=\"input-container text-input\" *ngFor=\"let input of inputs\">\r\n        <p>{{ input.label }}</p>\r\n\r\n        <herum-input-field [inputValue]=\"input.value\" [isBlocked]=\"true\" [placeholder]=\"''\"></herum-input-field>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"progress-bar-container\">\r\n    <div class=\"w-100\" *ngFor=\"let progressBar of progressBars\">\r\n        <app-herum-user-progress [percentage]=\"progressBar.value\" [title]=\"progressBar.label\"></app-herum-user-progress>\r\n    </div>\r\n</div>", styles: [".text-input{max-width:400px}.input-container p{font-size:14px;font-weight:700;text-align:right}.input-container herum-input-field,.input-container app-herum-user-progress{flex:5}.wide{flex:0 0 49%}.narrow{flex:0 0 100%}.progress-bar-container{gap:2%;display:flex;width:100%}.grid-container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: HerumUserProgressComponent, selector: "app-herum-user-progress", inputs: ["title", "percentage", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: BlockedFormComponent, isStandalone: false, selector: "blocked-form", inputs: { inputs: "inputs", progressBars: "progressBars", view: "view" }, ngImport: i0, template: "<div class=\"grid-container\">\r\n    <div class=\"input-container text-input\" *ngFor=\"let input of inputs\">\r\n        <p>{{ input.label }}</p>\r\n\r\n        <herum-input-field [inputValue]=\"input.value\" [isBlocked]=\"true\" [placeholder]=\"''\"></herum-input-field>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"progress-bar-container\">\r\n    <div class=\"w-100\" *ngFor=\"let progressBar of progressBars\">\r\n        <app-herum-user-progress [percentage]=\"progressBar.value\" [title]=\"progressBar.label\"></app-herum-user-progress>\r\n    </div>\r\n</div>", styles: [".text-input{max-width:400px}.input-container p{font-size:14px;font-weight:700;text-align:right}.input-container herum-input-field,.input-container app-herum-user-progress{flex:5}.wide{flex:0 0 49%}.narrow{flex:0 0 100%}.progress-bar-container{gap:2%;display:flex;width:100%}.grid-container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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", "isValidChange"] }, { kind: "component", type: HerumUserProgressComponent, selector: "app-herum-user-progress", inputs: ["title", "percentage", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BlockedFormComponent, decorators: [{
             type: Component,
@@ -2595,7 +2599,7 @@ class HerumDateTimeInputComponent {
         return isValidDate && isValidTime;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n    [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n    (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n    [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n    (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, decorators: [{
             type: Component,
@@ -5903,7 +5907,7 @@ class HerumMultiSelectComponent {
         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: i2$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$1] });
+    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: i2$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", "isValidChange"] }, { 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$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumMultiSelectComponent, decorators: [{
             type: Component,
@@ -6341,7 +6345,7 @@ class HerumSelectComponent {
         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()}\"\r\n            *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$1] });
+    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()}\"\r\n            *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", "isValidChange"] }], animations: [openClose$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumSelectComponent, decorators: [{
             type: Component,
@@ -6977,7 +6981,7 @@ class UsersProfilePreviewComponent {
         return user.gender == Gender.Male ? maleAvatarPath$1 : femaleAvatarPath$1;
     }
     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"] }] });
+    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", "isValidChange"] }, { 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,
@@ -7001,10 +7005,13 @@ class NumericSliderComponent {
     creationMode = false;
     visualTickSegments = 10;
     valueChange = new EventEmitter();
+    rangeValidationChange = new EventEmitter();
     ticks = [];
     trackStyle = {};
     bubbleStyle = {};
     creationTrackStyle = {};
+    isMinInputValid = true;
+    isMaxInputValid = true;
     ngOnChanges(changes) {
         if (changes['min'] || changes['max'] || changes['value'] || changes['creationMode'])
             this.recalculateViewModel();
@@ -7015,17 +7022,6 @@ class NumericSliderComponent {
         ;
         this.recalculateViewModel();
     }
-    _onCreationValueChange(value, thumb) {
-        const nextValue = Math.round(Number(value));
-        if (isNaN(nextValue))
-            return;
-        if (thumb === 'min')
-            this.min = nextValue;
-        else
-            this.max = nextValue;
-        this.recalculateViewModel();
-        this._onEmitValue();
-    }
     _onEmitValue() {
         if (this.creationMode) {
             this.valueChange.emit({
@@ -7036,6 +7032,27 @@ class NumericSliderComponent {
         }
         this.valueChange.emit(this.value);
     }
+    _creationValueChange(value, input) {
+        const nextValue = Math.round(Number(value));
+        if (isNaN(nextValue))
+            return;
+        if (input === 'min')
+            this.min = nextValue;
+        else
+            this.max = nextValue;
+        this.recalculateViewModel();
+        this._onEmitValue();
+    }
+    _isValidChange(isValid, input) {
+        if (input === 'min')
+            this.isMinInputValid = isValid;
+        else
+            this.isMaxInputValid = isValid;
+        this.rangeValidationChange.emit({
+            isMinInputValid: this.isMinInputValid,
+            isMaxInputValid: this.isMaxInputValid
+        });
+    }
     recalculateViewModel() {
         this.ticks = this.getTicks(this.min, this.max);
         if (this.creationMode)
@@ -7087,11 +7104,11 @@ class NumericSliderComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NumericSliderComponent, isStandalone: false, selector: "numeric-slider", inputs: { min: "min", max: "max", value: "value", disabled: "disabled", creationMode: "creationMode", visualTickSegments: "visualTickSegments" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n    @if (!creationMode) {\r\n    <div class=\"slider-shell\">\r\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n            <span class=\"text\">{{ value }}</span>\r\n        </div>\r\n\r\n        <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n            [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n    </div>\r\n    } @else {\r\n    <div class=\"creation-container\">\r\n        <div class=\"labels\">\r\n            <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n            <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n        </div>\r\n\r\n        <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n            <div class=\"track\"></div>\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n        @if (!creationMode || !tick.isEdge) {\r\n        <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n            @if (!tick.isEdge) {\r\n            <span class=\"tick-mark\"></span>\r\n            }\r\n            <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n        </div>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    @if (creationMode) {\r\n    <div class=\"inputs\">\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'min')\">\r\n        </herum-input-field>\r\n\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\r\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'max')\">\r\n        </herum-input-field>\r\n    </div>\r\n    }\r\n</div>", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NumericSliderComponent, isStandalone: false, selector: "numeric-slider", inputs: { min: "min", max: "max", value: "value", disabled: "disabled", creationMode: "creationMode", visualTickSegments: "visualTickSegments" }, outputs: { valueChange: "valueChange", rangeValidationChange: "rangeValidationChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n    @if (!creationMode) {\r\n    <div class=\"slider-shell\">\r\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n            <span class=\"text\">{{ value }}</span>\r\n        </div>\r\n\r\n        <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n            [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n    </div>\r\n    } @else {\r\n    <div class=\"creation-container\">\r\n        <div class=\"labels\">\r\n            <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n            <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n        </div>\r\n\r\n        <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n            <div class=\"track\"></div>\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n        @if (!creationMode || !tick.isEdge) {\r\n        <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n            @if (!tick.isEdge) {\r\n            <span class=\"tick-mark\"></span>\r\n            }\r\n            <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n        </div>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    @if (creationMode) {\r\n    <div class=\"inputs\">\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n            (inputValueEmitter)=\"_creationValueChange($event, 'min')\" (isValidChange)=\"_isValidChange($event, 'min')\">\r\n        </herum-input-field>\r\n\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\n            (inputValueEmitter)=\"_creationValueChange($event, 'max')\" (isValidChange)=\"_isValidChange($event, 'max')\">\n        </herum-input-field>\n    </div>\r\n    }\r\n</div>\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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", "isValidChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'numeric-slider', template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n    @if (!creationMode) {\r\n    <div class=\"slider-shell\">\r\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n            <span class=\"text\">{{ value }}</span>\r\n        </div>\r\n\r\n        <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n            [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n    </div>\r\n    } @else {\r\n    <div class=\"creation-container\">\r\n        <div class=\"labels\">\r\n            <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n            <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n        </div>\r\n\r\n        <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n            <div class=\"track\"></div>\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n        @if (!creationMode || !tick.isEdge) {\r\n        <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n            @if (!tick.isEdge) {\r\n            <span class=\"tick-mark\"></span>\r\n            }\r\n            <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n        </div>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    @if (creationMode) {\r\n    <div class=\"inputs\">\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'min')\">\r\n        </herum-input-field>\r\n\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\r\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'max')\">\r\n        </herum-input-field>\r\n    </div>\r\n    }\r\n</div>", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"] }]
+            args: [{ standalone: false, selector: 'numeric-slider', template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n    @if (!creationMode) {\r\n    <div class=\"slider-shell\">\r\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n            <span class=\"text\">{{ value }}</span>\r\n        </div>\r\n\r\n        <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n            [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n    </div>\r\n    } @else {\r\n    <div class=\"creation-container\">\r\n        <div class=\"labels\">\r\n            <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n            <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n        </div>\r\n\r\n        <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n            <div class=\"track\"></div>\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n            <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n        @if (!creationMode || !tick.isEdge) {\r\n        <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n            @if (!tick.isEdge) {\r\n            <span class=\"tick-mark\"></span>\r\n            }\r\n            <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n        </div>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    @if (creationMode) {\r\n    <div class=\"inputs\">\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n            (inputValueEmitter)=\"_creationValueChange($event, 'min')\" (isValidChange)=\"_isValidChange($event, 'min')\">\r\n        </herum-input-field>\r\n\r\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\n            (inputValueEmitter)=\"_creationValueChange($event, 'max')\" (isValidChange)=\"_isValidChange($event, 'max')\">\n        </herum-input-field>\n    </div>\r\n    }\r\n</div>\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -7106,6 +7123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], rangeValidationChange: [{
+                type: Output
             }] } });
 
 class AtomsModule {
@@ -7826,7 +7845,7 @@ class HerumAutocompleteComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose$1] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }], animations: [openClose$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, decorators: [{
             type: Component,
@@ -9007,7 +9026,7 @@ let InputCellComponent = class InputCellComponent {
         this.align = params.align;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InputCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: InputCellComponent, isStandalone: false, selector: "input-cell", ngImport: i0, template: "<div class=\"input-cell-container\" [ngClass]=\"align\">\r\n    <herum-input-field type=\"number\" (inputValueEmitter)=\"_input($event)\" [inputValue]=\"inputValue\" placeholder=\"\"></herum-input-field>\r\n</div>", styles: [".input-cell-container{height:100%;line-height:normal}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left,.input-cell-container.top,.input-cell-container.bottom{height:100%;display:flex}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left{align-items:center}.input-cell-container.center,.input-cell-container.top,.input-cell-container.bottom{justify-content:center}.input-cell-container.right{justify-content:flex-start}.input-cell-container.left{justify-content:flex-end}.input-cell-container.top{align-items:flex-start}.input-cell-container.bottom{align-items:flex-end}.input-cell-container herum-input-field{width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: InputCellComponent, isStandalone: false, selector: "input-cell", ngImport: i0, template: "<div class=\"input-cell-container\" [ngClass]=\"align\">\r\n    <herum-input-field type=\"number\" (inputValueEmitter)=\"_input($event)\" [inputValue]=\"inputValue\" placeholder=\"\"></herum-input-field>\r\n</div>", styles: [".input-cell-container{height:100%;line-height:normal}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left,.input-cell-container.top,.input-cell-container.bottom{height:100%;display:flex}.input-cell-container.center,.input-cell-container.right,.input-cell-container.left{align-items:center}.input-cell-container.center,.input-cell-container.top,.input-cell-container.bottom{justify-content:center}.input-cell-container.right{justify-content:flex-start}.input-cell-container.left{justify-content:flex-end}.input-cell-container.top{align-items:flex-start}.input-cell-container.bottom{align-items:flex-end}.input-cell-container herum-input-field{width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }] });
 };
 InputCellComponent = __decorate([
     TableRowHeight$1(tableRowHeights$1.switchCell)
@@ -9264,7 +9283,7 @@ class HerumAgGridFilterComponent {
         this.destroySubject$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAgGridFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAgGridFilterComponent, isStandalone: false, selector: "app-herum-ag-grid-filter", ngImport: i0, template: "<div class=\"ag-filter\">\r\n    <herum-input-field [type]=\"'search'\" [placeholder]=\"'\u05D7\u05E4\u05E9 \u05E2\u05E8\u05DA \u05DC\u05E4\u05D9\u05DC\u05D8\u05D5\u05E8'\" [showErrorMsgGap]=\"false\"\r\n        [formControl]=\"selectedFilter\"></herum-input-field>\r\n    <div>\r\n        <div class=\"ag-filter-body-wrapper\">\r\n            <div ref=\"ag-filter-loading\" class=\"loading-filter ag-hidden\">\r\n                Loading...\r\n            </div>\r\n            <div>\r\n                <div id=\"richList\" class=\"ag-set-filter-list\">\r\n                    <div class=\"ag-virtual-list-viewport\">\r\n                        <div class=\"ag-virtual-list-container\" [attr.style.height]=\"containerHeight\">\r\n                            <div style=\"line-height: 28px;\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox [isChecked]=\"isEverythingSelected\" [type]=\"checkBoxType\"\r\n                                            [isBlocked]=\"isToggleAllCheckBoxBlocked\"\r\n                                            (checkedEmitter)=\"toggleEverything()\"></herum-checkbox>\r\n                                    </div>\r\n                                    <span class=\"ag-filter-value select-all-bold\">\u05D1\u05D7\u05E8 \u05D4\u05DB\u05DC</span>\r\n                                </label>\r\n                            </div>\r\n\r\n                            <div style=\"line-height: 28px;\" *ngFor=\"let item of (onFilterValuesChanged$ | async)\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox (checkedEmitter)=\"toggleItem(item)\"\r\n                                            [isChecked]=\"selectedValuesMap.hasOwnProperty(item)\"></herum-checkbox>\r\n                                    </div>\r\n\r\n                                    <span #agFilterValue appHerumToolTip class=\"ag-filter-value w-100\"\r\n                                        [matTooltip]=\"isTruncatedTitleElement(agFilterValue)? item : ''\">\r\n                                        {{item === '' ? '(\u05E8\u05D9\u05E7)': item | ellipsis:agFilterValue}}\r\n                                    </span>\r\n                                </label>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ag-set-filter-item{gap:8px}::ng-deep .ag-menu{border-radius:var(--border-radius)!important}.select-all-bold{font-weight:700}::ng-deep .ag-theme-alpine .ag-popup-child:not(.ag-tooltip-custom){width:136px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }, { kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAgGridFilterComponent, isStandalone: false, selector: "app-herum-ag-grid-filter", ngImport: i0, template: "<div class=\"ag-filter\">\r\n    <herum-input-field [type]=\"'search'\" [placeholder]=\"'\u05D7\u05E4\u05E9 \u05E2\u05E8\u05DA \u05DC\u05E4\u05D9\u05DC\u05D8\u05D5\u05E8'\" [showErrorMsgGap]=\"false\"\r\n        [formControl]=\"selectedFilter\"></herum-input-field>\r\n    <div>\r\n        <div class=\"ag-filter-body-wrapper\">\r\n            <div ref=\"ag-filter-loading\" class=\"loading-filter ag-hidden\">\r\n                Loading...\r\n            </div>\r\n            <div>\r\n                <div id=\"richList\" class=\"ag-set-filter-list\">\r\n                    <div class=\"ag-virtual-list-viewport\">\r\n                        <div class=\"ag-virtual-list-container\" [attr.style.height]=\"containerHeight\">\r\n                            <div style=\"line-height: 28px;\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox [isChecked]=\"isEverythingSelected\" [type]=\"checkBoxType\"\r\n                                            [isBlocked]=\"isToggleAllCheckBoxBlocked\"\r\n                                            (checkedEmitter)=\"toggleEverything()\"></herum-checkbox>\r\n                                    </div>\r\n                                    <span class=\"ag-filter-value select-all-bold\">\u05D1\u05D7\u05E8 \u05D4\u05DB\u05DC</span>\r\n                                </label>\r\n                            </div>\r\n\r\n                            <div style=\"line-height: 28px;\" *ngFor=\"let item of (onFilterValuesChanged$ | async)\">\r\n                                <label class=\"ag-set-filter-item\">\r\n                                    <div class=\"ag-filter-checkbox\">\r\n                                        <herum-checkbox (checkedEmitter)=\"toggleItem(item)\"\r\n                                            [isChecked]=\"selectedValuesMap.hasOwnProperty(item)\"></herum-checkbox>\r\n                                    </div>\r\n\r\n                                    <span #agFilterValue appHerumToolTip class=\"ag-filter-value w-100\"\r\n                                        [matTooltip]=\"isTruncatedTitleElement(agFilterValue)? item : ''\">\r\n                                        {{item === '' ? '(\u05E8\u05D9\u05E7)': item | ellipsis:agFilterValue}}\r\n                                    </span>\r\n                                </label>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ag-set-filter-item{gap:8px}::ng-deep .ag-menu{border-radius:var(--border-radius)!important}.select-all-bold{font-weight:700}::ng-deep .ag-theme-alpine .ag-popup-child:not(.ag-tooltip-custom){width:136px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.HerumCheckboxComponent, selector: "herum-checkbox", inputs: ["type", "isChecked", "isBlocked"], outputs: ["checkedEmitter"] }, { kind: "component", type: i2$2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAgGridFilterComponent, decorators: [{
             type: Component,