herum-shared 0.1.63 → 0.1.65

package/assets/shared/icons/numericSliderBubble.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 39" fill="none">
+  <path d="M21.6699 34L9 34C4.02944 34 7.89378e-07 29.9706 1.22392e-06 25L2.62268e-06 9C3.05722e-06 4.02943 4.02944 -4.19372e-06 9 -3.75918e-06L43 -7.86805e-07C47.9706 -3.52265e-07 52 4.02944 52 9L52 25C52 29.9706 47.9706 34 43 34L30.3301 34L26 39L21.6699 34Z" fill="#A255FF"/>
+</svg>

package/atoms/index.d.ts

@@ -1,32 +1,32 @@
 import * as i0 from '@angular/core';
 import { OnInit, SimpleChanges, EventEmitter, PipeTransform, ElementRef, ChangeDetectorRef, Renderer2, SimpleChange, OnChanges } from '@angular/core';
 import { User } from 'herum-types/User';
-import { IdentifiedEntity, RecursiveTitledOption, FileData, MenuItem } from 'herum-types/Shared';
-import * as i40 from '@angular/forms';
+import { IdentifiedEntity, RecursiveTitledOption, FileData, MenuItem, NumericSliderRange, Tick } from 'herum-types/Shared';
+import * as i41 from '@angular/forms';
 import { ControlValueAccessor, NgControl, ControlContainer, FormControl, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
 import { HerumTableParams } from 'herum-types/Table';
-import * as i54 from '@angular/material/core';
+import * as i55 from '@angular/material/core';
 import { DateAdapter } from '@angular/material/core';
-import * as i53 from '@angular/material/datepicker';
+import * as i54 from '@angular/material/datepicker';
 import { DateRange, MatCalendar } from '@angular/material/datepicker';
 import { Subject } from 'rxjs';
 import { TextChange } from 'herum-types/TrackTextChanges';
 import { UserPreview } from 'herum-types/Previews';
-import * as i39 from '@angular/common';
-import * as i41 from '@angular/material/menu';
-import * as i42 from '@angular/cdk/clipboard';
-import * as i43 from '@angular/material/autocomplete';
-import * as i44 from '@angular/material/chips';
-import * as i45 from '@angular/material/form-field';
-import * as i46 from '@angular/material/tooltip';
-import * as i47 from '@angular/material/input';
-import * as i48 from '@angular/material/select';
-import * as i49 from '@angular/material/icon';
-import * as i50 from '@angular/material/checkbox';
-import * as i51 from '@angular/material/slider';
-import * as i52 from '@angular/cdk/drag-drop';
-import * as i55 from 'herum-shared/directives';
-import * as i56 from 'herum-shared/pipes';
+import * as i40 from '@angular/common';
+import * as i42 from '@angular/material/menu';
+import * as i43 from '@angular/cdk/clipboard';
+import * as i44 from '@angular/material/autocomplete';
+import * as i45 from '@angular/material/chips';
+import * as i46 from '@angular/material/form-field';
+import * as i47 from '@angular/material/tooltip';
+import * as i48 from '@angular/material/input';
+import * as i49 from '@angular/material/select';
+import * as i50 from '@angular/material/icon';
+import * as i51 from '@angular/material/checkbox';
+import * as i52 from '@angular/material/slider';
+import * as i53 from '@angular/cdk/drag-drop';
+import * as i56 from 'herum-shared/directives';
+import * as i57 from 'herum-shared/pipes';
 
 declare class CollegeLoaderComponent implements OnInit {
     bars: any[];
@@ -695,7 +695,7 @@ declare class HerumUploadFileComponent implements ControlValueAccessor {
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     get directoryName(): string;
-    get formControl(): i40.AbstractControl<any, any, any>;
+    get formControl(): i41.AbstractControl<any, any, any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<HerumUploadFileComponent, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<HerumUploadFileComponent, "herum-upload-file", never, { "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "isDirectoryMode": { "alias": "isDirectoryMode"; "required": false; }; "allowedFileTypes": { "alias": "allowedFileTypes"; "required": false; }; "selectedFile": { "alias": "selectedFile"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "isEditMode": { "alias": "isEditMode"; "required": false; }; }, { "uploadFile": "uploadFile"; }, never, never, false, never>;
 }
@@ -812,9 +812,32 @@ declare class UserProfileImageComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<UserProfileImageComponent, "user-profile-image", never, { "imageSize": { "alias": "imageSize"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "user": { "alias": "user"; "required": false; }; "isLoadingUser": { "alias": "isLoadingUser"; "required": false; }; "isUserClickAble": { "alias": "isUserClickAble"; "required": false; }; }, { "userClicked": "userClicked"; }, never, ["*"], false, never>;
 }
 
+declare class NumericSliderComponent {
+    min: number;
+    max: number;
+    value: number;
+    disabled: boolean;
+    creationMode: boolean;
+    valueChange: EventEmitter<number | NumericSliderRange>;
+    ticks: Array<Tick>;
+    trackStyle: Record<string, string>;
+    bubbleStyle: Record<string, string>;
+    creationTrackStyle: Record<string, string>;
+    ngOnChanges(changes: SimpleChanges): void;
+    _onInput(event: Event): void;
+    _onCreationValueChange(value: string | number, thumb: 'min' | 'max'): void;
+    _onEmitValue(): void;
+    private recalculateViewModel;
+    private getTicks;
+    private getBubbleOffsetPercent;
+    private getBubbleStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumericSliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NumericSliderComponent, "numeric-slider", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "creationMode": { "alias": "creationMode"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+}
+
 declare class AtomsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AtomsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AtomsModule, [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent], [typeof i39.CommonModule, typeof i40.ReactiveFormsModule, typeof i40.FormsModule, typeof i41.MatMenuModule, typeof i42.ClipboardModule, typeof i43.MatAutocompleteModule, typeof i44.MatChipsModule, typeof i45.MatFormFieldModule, typeof i46.MatTooltipModule, typeof i47.MatInputModule, typeof i48.MatSelectModule, typeof i49.MatIconModule, typeof i50.MatCheckboxModule, typeof i51.MatSliderModule, typeof i52.DragDropModule, typeof i53.MatDatepickerModule, typeof i54.MatNativeDateModule, typeof i55.DirectivesModule, typeof i56.PipesModule], [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AtomsModule, [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent, typeof NumericSliderComponent], [typeof i40.CommonModule, typeof i41.ReactiveFormsModule, typeof i41.FormsModule, typeof i42.MatMenuModule, typeof i43.ClipboardModule, typeof i44.MatAutocompleteModule, typeof i45.MatChipsModule, typeof i46.MatFormFieldModule, typeof i47.MatTooltipModule, typeof i48.MatInputModule, typeof i49.MatSelectModule, typeof i50.MatIconModule, typeof i51.MatCheckboxModule, typeof i52.MatSliderModule, typeof i53.DragDropModule, typeof i54.MatDatepickerModule, typeof i55.MatNativeDateModule, typeof i56.DirectivesModule, typeof i57.PipesModule], [typeof CollegeLoaderComponent, typeof UsersProfilePreviewComponent, typeof HerumBreadcrumbsComponent, typeof SliceBreadcrumbsPipe, typeof HerumButtonComponent, typeof HerumCheckboxComponent, typeof HerumChipComponent, typeof HerumCircularProgressBarComponent, typeof HerumDatePickerComponent, typeof HerumDownloadFileComponent, typeof HerumEllipsisLoaderComponent, typeof HerumIconLabelComponent, typeof HerumIndeterminateComponent, typeof ConditionalFormControlNameDirective, typeof HerumInputFieldComponent, typeof HerumLogoComponent, typeof HerumMultiSelectComponent, typeof HerumNarrowCollectionMenuItemComponent, typeof HerumNoResultMessageComponent, typeof HerumOptionsListComponent, typeof HerumPaginatorComponent, typeof HerumPanelLinksComponent, typeof HerumProgressBarComponent, typeof HerumQuizHeaderItemComponent, typeof HerumRecursiveHierarchyOptionsListComponent, typeof HerumSelectComponent, typeof HerumSliderComponent, typeof HerumSpinnerComponent, typeof HerumSwitchComponent, typeof HerumTextAreaComponent, typeof HerumTimePickerComponent, typeof HerumToggleButtonComponent, typeof HerumUploadFileComponent, typeof HerumVideoSelectComponent, typeof HerumRadioButtonComponent, typeof RoundedVerticalMenuComponent, typeof TrackTextChangesNotesComponent, typeof UserProfileImageComponent, typeof NumericSliderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AtomsModule>;
 }
 
@@ -833,4 +856,4 @@ declare class HerumFormControl extends FormControl {
     private setCurrentErrorMessage;
 }
 
-export { AtomsModule, CollegeLoaderComponent, ConditionalFormControlNameDirective, HerumBreadcrumbsComponent, HerumButtonComponent, HerumCheckboxComponent, HerumChipComponent, HerumCircularProgressBarComponent, HerumDatePickerComponent, HerumDownloadFileComponent, HerumEllipsisLoaderComponent, HerumFormControl, HerumIconLabelComponent, HerumIndeterminateComponent, HerumInputFieldComponent, HerumLogoComponent, HerumMultiSelectComponent, HerumNarrowCollectionMenuItemComponent, HerumNoResultMessageComponent, HerumOptionsListComponent, HerumPaginatorComponent, HerumPanelLinksComponent, HerumProgressBarComponent, HerumQuizHeaderItemComponent, HerumRadioButtonComponent, HerumRecursiveHierarchyOptionsListComponent, HerumSelectComponent, HerumSliderComponent, HerumSpinnerComponent, HerumSwitchComponent, HerumTextAreaComponent, HerumTimePickerComponent, HerumToggleButtonComponent, HerumUploadFileComponent, HerumVideoSelectComponent, RoundedVerticalMenuComponent, SliceBreadcrumbsPipe, TrackTextChangesNotesComponent, UserProfileImageComponent, UsersProfilePreviewComponent };
+export { AtomsModule, CollegeLoaderComponent, ConditionalFormControlNameDirective, HerumBreadcrumbsComponent, HerumButtonComponent, HerumCheckboxComponent, HerumChipComponent, HerumCircularProgressBarComponent, HerumDatePickerComponent, HerumDownloadFileComponent, HerumEllipsisLoaderComponent, HerumFormControl, HerumIconLabelComponent, HerumIndeterminateComponent, HerumInputFieldComponent, HerumLogoComponent, HerumMultiSelectComponent, HerumNarrowCollectionMenuItemComponent, HerumNoResultMessageComponent, HerumOptionsListComponent, HerumPaginatorComponent, HerumPanelLinksComponent, HerumProgressBarComponent, HerumQuizHeaderItemComponent, HerumRadioButtonComponent, HerumRecursiveHierarchyOptionsListComponent, HerumSelectComponent, HerumSliderComponent, HerumSpinnerComponent, HerumSwitchComponent, HerumTextAreaComponent, HerumTimePickerComponent, HerumToggleButtonComponent, HerumUploadFileComponent, HerumVideoSelectComponent, NumericSliderComponent, RoundedVerticalMenuComponent, SliceBreadcrumbsPipe, TrackTextChangesNotesComponent, UserProfileImageComponent, UsersProfilePreviewComponent };

package/fesm2022/herum-shared-atoms.mjs

@@ -2665,6 +2665,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }] } });
 
+const thumbSize = 16;
+const visualTickSegments = 10;
+class NumericSliderComponent {
+    min = 0;
+    max = 100;
+    value = 0;
+    disabled = true;
+    creationMode = false;
+    valueChange = new EventEmitter();
+    ticks = [];
+    trackStyle = {};
+    bubbleStyle = {};
+    creationTrackStyle = {};
+    ngOnChanges(changes) {
+        if (changes['min'] || changes['max'] || changes['value'] || changes['creationMode'])
+            this.recalculateViewModel();
+    }
+    _onInput(event) {
+        const inputElement = event.target;
+        this.value = Math.round(Number(inputElement.value));
+        ;
+        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({
+                min: this.min,
+                max: this.max
+            });
+            return;
+        }
+        this.valueChange.emit(this.value);
+    }
+    recalculateViewModel() {
+        this.ticks = this.getTicks(this.min, this.max);
+        if (this.creationMode)
+            return;
+        const bubbleOffsetPercent = this.getBubbleOffsetPercent(this.value);
+        this.trackStyle = { '--slider-progress': `${bubbleOffsetPercent}%` };
+        this.bubbleStyle = this.getBubbleStyle(bubbleOffsetPercent);
+    }
+    getTicks(minValue, maxValue) {
+        const range = maxValue - minValue;
+        if (range <= 0)
+            return [{ value: maxValue, offsetPercent: 0, isEdge: true }];
+        const ticks = [];
+        if (range <= 10) {
+            for (let tick = maxValue; tick >= minValue; tick--) {
+                ticks.push({
+                    value: tick,
+                    offsetPercent: ((maxValue - tick) / range) * 100,
+                    isEdge: tick === maxValue || tick === minValue
+                });
+            }
+            ;
+            return ticks;
+        }
+        const inclusiveRange = maxValue - minValue + 1;
+        for (let index = 0; index <= visualTickSegments; index++) {
+            const value = index === visualTickSegments
+                ? minValue
+                : Math.round(maxValue - ((inclusiveRange / visualTickSegments) * index));
+            ticks.push({
+                value: value,
+                offsetPercent: ((maxValue - value) / range) * 100,
+                isEdge: index === 0 || index === visualTickSegments
+            });
+        }
+        ;
+        return ticks;
+    }
+    getBubbleOffsetPercent(currentValue) {
+        const range = this.max - this.min;
+        if (range === 0)
+            return 50;
+        return ((this.max - currentValue) / range) * 100;
+    }
+    getBubbleStyle(offsetPercent) {
+        const thumbCenterCompensation = (thumbSize / 2) - (thumbSize * offsetPercent / 100);
+        return {
+            left: `calc(${offsetPercent}% + ${thumbCenterCompensation}px)`
+        };
+    }
+    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" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\n    @if (!creationMode) {\n    <div class=\"slider-shell\">\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\n            <span class=\"text\">{{ value }}</span>\n        </div>\n\n        <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\n            [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\n    </div>\n    } @else {\n    <div class=\"creation-container\">\n        <div class=\"labels\">\n            <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\n            <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\n        </div>\n\n        <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\n            <div class=\"track\"></div>\n            <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\n            <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\n        </div>\n    </div>\n    }\n\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\n        @if (!creationMode || !tick.isEdge) {\n        <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\n            @if (!tick.isEdge) {\n            <span class=\"tick-mark\"></span>\n            }\n            <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\n        </div>\n        }\n        }\n    </div>\n\n    @if (creationMode) {\n    <div class=\"inputs\">\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'min')\">\n        </herum-input-field>\n\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'max')\">\n        </herum-input-field>\n    </div>\n    }\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"] }] });
+}
+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 }\">\n    @if (!creationMode) {\n    <div class=\"slider-shell\">\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\n            <span class=\"text\">{{ value }}</span>\n        </div>\n\n        <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\n            [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\n    </div>\n    } @else {\n    <div class=\"creation-container\">\n        <div class=\"labels\">\n            <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\n            <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\n        </div>\n\n        <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\n            <div class=\"track\"></div>\n            <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\n            <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\n        </div>\n    </div>\n    }\n\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\n        @if (!creationMode || !tick.isEdge) {\n        <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\n            @if (!tick.isEdge) {\n            <span class=\"tick-mark\"></span>\n            }\n            <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\n        </div>\n        }\n        }\n    </div>\n\n    @if (creationMode) {\n    <div class=\"inputs\">\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'min')\">\n        </herum-input-field>\n\n        <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\n            (inputValueEmitter)=\"_onCreationValueChange($event, 'max')\">\n        </herum-input-field>\n    </div>\n    }\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"] }]
+        }], propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], creationMode: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 class AtomsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, declarations: [CollegeLoaderComponent,
@@ -2704,7 +2818,8 @@ class AtomsModule {
             HerumRadioButtonComponent,
             RoundedVerticalMenuComponent,
             TrackTextChangesNotesComponent,
-            UserProfileImageComponent], imports: [CommonModule,
+            UserProfileImageComponent,
+            NumericSliderComponent], imports: [CommonModule,
             ReactiveFormsModule,
             FormsModule,
             MatMenuModule,
@@ -2759,7 +2874,8 @@ class AtomsModule {
             HerumRadioButtonComponent,
             RoundedVerticalMenuComponent,
             TrackTextChangesNotesComponent,
-            UserProfileImageComponent] });
+            UserProfileImageComponent,
+            NumericSliderComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AtomsModule, providers: [
             { provide: MAT_DATE_LOCALE, useValue: 'he-IL' },
         ], imports: [CommonModule,
@@ -2823,7 +2939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         HerumRadioButtonComponent,
                         RoundedVerticalMenuComponent,
                         TrackTextChangesNotesComponent,
-                        UserProfileImageComponent
+                        UserProfileImageComponent,
+                        NumericSliderComponent
                     ],
                     exports: [
                         CollegeLoaderComponent,
@@ -2863,7 +2980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         HerumRadioButtonComponent,
                         RoundedVerticalMenuComponent,
                         TrackTextChangesNotesComponent,
-                        UserProfileImageComponent
+                        UserProfileImageComponent,
+                        NumericSliderComponent
                     ],
                     imports: [
                         CommonModule,
@@ -2922,5 +3040,5 @@ class HerumFormControl extends FormControl {
  * Generated bundle index. Do not edit.
  */
 
-export { AtomsModule, CollegeLoaderComponent, ConditionalFormControlNameDirective, HerumBreadcrumbsComponent, HerumButtonComponent, HerumCheckboxComponent, HerumChipComponent, HerumCircularProgressBarComponent, HerumDatePickerComponent, HerumDownloadFileComponent, HerumEllipsisLoaderComponent, HerumFormControl, HerumIconLabelComponent, HerumIndeterminateComponent, HerumInputFieldComponent, HerumLogoComponent, HerumMultiSelectComponent, HerumNarrowCollectionMenuItemComponent, HerumNoResultMessageComponent, HerumOptionsListComponent, HerumPaginatorComponent, HerumPanelLinksComponent, HerumProgressBarComponent, HerumQuizHeaderItemComponent, HerumRadioButtonComponent, HerumRecursiveHierarchyOptionsListComponent, HerumSelectComponent, HerumSliderComponent, HerumSpinnerComponent, HerumSwitchComponent, HerumTextAreaComponent, HerumTimePickerComponent, HerumToggleButtonComponent, HerumUploadFileComponent, HerumVideoSelectComponent, RoundedVerticalMenuComponent, SliceBreadcrumbsPipe, TrackTextChangesNotesComponent, UserProfileImageComponent, UsersProfilePreviewComponent };
+export { AtomsModule, CollegeLoaderComponent, ConditionalFormControlNameDirective, HerumBreadcrumbsComponent, HerumButtonComponent, HerumCheckboxComponent, HerumChipComponent, HerumCircularProgressBarComponent, HerumDatePickerComponent, HerumDownloadFileComponent, HerumEllipsisLoaderComponent, HerumFormControl, HerumIconLabelComponent, HerumIndeterminateComponent, HerumInputFieldComponent, HerumLogoComponent, HerumMultiSelectComponent, HerumNarrowCollectionMenuItemComponent, HerumNoResultMessageComponent, HerumOptionsListComponent, HerumPaginatorComponent, HerumPanelLinksComponent, HerumProgressBarComponent, HerumQuizHeaderItemComponent, HerumRadioButtonComponent, HerumRecursiveHierarchyOptionsListComponent, HerumSelectComponent, HerumSliderComponent, HerumSpinnerComponent, HerumSwitchComponent, HerumTextAreaComponent, HerumTimePickerComponent, HerumToggleButtonComponent, HerumUploadFileComponent, HerumVideoSelectComponent, NumericSliderComponent, RoundedVerticalMenuComponent, SliceBreadcrumbsPipe, TrackTextChangesNotesComponent, UserProfileImageComponent, UsersProfilePreviewComponent };
 //# sourceMappingURL=herum-shared-atoms.mjs.map