herum-shared 0.1.64 → 0.1.65-amit-beta.1

package/atoms/index.d.ts

@@ -1,7 +1,7 @@
 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, Tick } from 'herum-types/Shared';
+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';
@@ -817,19 +817,23 @@ declare class NumericSliderComponent {
     max: number;
     value: number;
     disabled: boolean;
-    valueChange: EventEmitter<number>;
+    creationMode: boolean;
+    visualTickSegments: number;
+    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; }; }, { "valueChange": "valueChange"; }, never, never, false, 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; }; "visualTickSegments": { "alias": "visualTickSegments"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
 }
 
 declare class AtomsModule {

package/fesm2022/herum-shared-animations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"herum-shared-animations.mjs","sources":["../../../projects/herum-shared/animations/open-close.ts","../../../projects/herum-shared/animations/index.ts","../../../projects/herum-shared/animations/herum-shared-animations.ts"],"sourcesContent":["import { trigger, state, style, animate, transition } from '@angular/animations'; \r\n \r\nexport const openClose = trigger('openClose', [ \r\n    state('openUp', style({ \r\n        opacity: 1, \r\n        transform: 'translateY(-100%)' \r\n    })), \r\n \r\n    state('openDown', style({ \r\n        opacity: 1 \r\n    })), \r\n \r\n    state('closeDown', style({ \r\n        top: 0, \r\n        transform: 'translateY(-100%)', \r\n        opacity: 0, \r\n        height: '0px' ,\r\n    })), \r\n    \r\n    state('closeUp', style({ \r\n        opacity: 0, \r\n        height: '0px' ,\r\n        padding:0\r\n    })), \r\n \r\n    transition('openUp => closeDown', [ \r\n        animate('350ms ease-in') \r\n    ]), \r\n \r\n    transition('closeDown => openUp', [ \r\n        animate('350ms ease-out') \r\n    ]), \r\n \r\n    transition('openDown => closeUp', [ \r\n        animate('350ms ease-out') \r\n    ]), \r\n \r\n    transition('closeUp => openDown', [ \r\n        animate('350ms ease-in') \r\n    ]) \r\n])","/**\r\n * @file Automatically generated by barrelsby.\r\n */\r\n\r\nexport * from \"./open-close\";\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAEO,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,EAAE;AAC1C,IAAA,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC;AAClB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,SAAS,EAAE;AACd,KAAA,CAAC,CAAC;AAEH,IAAA,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC;AACpB,QAAA,OAAO,EAAE;AACZ,KAAA,CAAC,CAAC;AAEH,IAAA,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC;AACrB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,SAAS,EAAE,mBAAmB;AAC9B,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC,CAAC;AAEH,IAAA,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;AACnB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,OAAO,EAAC;AACX,KAAA,CAAC,CAAC;IAEH,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,eAAe;KAC1B,CAAC;IAEF,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,gBAAgB;KAC3B,CAAC;IAEF,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,gBAAgB;KAC3B,CAAC;IAEF,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,eAAe;KAC1B;AACJ,CAAA;;ACxCD;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"herum-shared-animations.mjs","sources":["../../../projects/herum-shared/animations/open-close.ts","../../../projects/herum-shared/animations/index.ts","../../../projects/herum-shared/animations/herum-shared-animations.ts"],"sourcesContent":["import { trigger, state, style, animate, transition } from '@angular/animations'; \r\n \r\nexport const openClose = trigger('openClose', [ \r\n    state('openUp', style({ \r\n        opacity: 1, \r\n        transform: 'translateY(-100%)' \r\n    })), \r\n \r\n    state('openDown', style({ \r\n        opacity: 1 \r\n    })), \r\n \r\n    state('closeDown', style({ \r\n        top: 0, \r\n        transform: 'translateY(-100%)', \r\n        opacity: 0, \r\n        height: '0px' ,\r\n    })), \r\n    \r\n    state('closeUp', style({ \r\n        opacity: 0, \r\n        height: '0px' ,\r\n        padding:0\r\n    })), \r\n \r\n    transition('openUp => closeDown', [ \r\n        animate('350ms ease-in') \r\n    ]), \r\n \r\n    transition('closeDown => openUp', [ \r\n        animate('350ms ease-out') \r\n    ]), \r\n \r\n    transition('openDown => closeUp', [ \r\n        animate('350ms ease-out') \r\n    ]), \r\n \r\n    transition('closeUp => openDown', [ \r\n        animate('350ms ease-in') \r\n    ]) \r\n])","/**\n * @file Automatically generated by barrelsby.\n */\n\nexport * from \"./open-close\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAEO,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,EAAE;AAC1C,IAAA,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC;AAClB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,SAAS,EAAE;AACd,KAAA,CAAC,CAAC;AAEH,IAAA,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC;AACpB,QAAA,OAAO,EAAE;AACZ,KAAA,CAAC,CAAC;AAEH,IAAA,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC;AACrB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,SAAS,EAAE,mBAAmB;AAC9B,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC,CAAC;AAEH,IAAA,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;AACnB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,OAAO,EAAC;AACX,KAAA,CAAC,CAAC;IAEH,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,eAAe;KAC1B,CAAC;IAEF,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,gBAAgB;KAC3B,CAAC;IAEF,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,gBAAgB;KAC3B,CAAC;IAEF,UAAU,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CAAC,eAAe;KAC1B;AACJ,CAAA;;ACxCD;;AAEG;;ACFH;;AAEG;;;;"}

package/fesm2022/herum-shared-atoms.mjs

@@ -2666,64 +2666,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             }] } });
 
 const thumbSize = 16;
-const visualTickSegments = 10;
 class NumericSliderComponent {
     min = 0;
     max = 100;
     value = 0;
     disabled = true;
+    creationMode = false;
+    visualTickSegments = 10;
     valueChange = new EventEmitter();
     ticks = [];
     trackStyle = {};
     bubbleStyle = {};
+    creationTrackStyle = {};
     ngOnChanges(changes) {
-        if (changes['min'] || changes['max'] || changes['value'])
+        if (changes['min'] || changes['max'] || changes['value'] || changes['creationMode'])
             this.recalculateViewModel();
     }
     _onInput(event) {
-        this.value = Math.round(Number(event.target.value));
+        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() {
-        const bubbleOffsetPercent = this.getBubbleOffsetPercent();
-        this.ticks = this.getTicks();
+        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() {
-        const range = this.max - this.min;
+    getTicks(minValue, maxValue) {
+        const range = maxValue - minValue;
         if (range <= 0)
-            return [{ value: this.max, offsetPercent: 0, isEdge: true }];
+            return [{ value: maxValue, offsetPercent: 0, isEdge: true }];
         const ticks = [];
-        if (this.max <= 10) {
-            for (let tick = this.max; tick >= this.min; tick--) {
+        if (range <= this.visualTickSegments) {
+            for (let tick = maxValue; tick >= minValue; tick--) {
                 ticks.push({
                     value: tick,
-                    offsetPercent: ((this.max - tick) / range) * 100,
-                    isEdge: tick === this.max || tick === this.min
+                    offsetPercent: ((maxValue - tick) / range) * 100,
+                    isEdge: tick === maxValue || tick === minValue
                 });
             }
             ;
             return ticks;
         }
-        for (let index = 0; index <= visualTickSegments; index++) {
-            const value = Math.round(this.max - ((range / visualTickSegments) * index));
+        const inclusiveRange = maxValue - minValue + 1;
+        for (let index = 0; index <= this.visualTickSegments; index++) {
+            const value = index === this.visualTickSegments
+                ? minValue
+                : Math.round(maxValue - ((inclusiveRange / this.visualTickSegments) * index));
             ticks.push({
                 value: value,
-                offsetPercent: ((this.max - value) / range) * 100,
-                isEdge: index === 0 || index === visualTickSegments
+                offsetPercent: ((maxValue - value) / range) * 100,
+                isEdge: index === 0 || index === this.visualTickSegments
             });
         }
         ;
         return ticks;
     }
-    getBubbleOffsetPercent() {
-        if (this.max === this.min)
+    getBubbleOffsetPercent(currentValue) {
+        const range = this.max - this.min;
+        if (range === 0)
             return 50;
-        return ((this.max - this.value) / (this.max - this.min)) * 100;
+        return ((this.max - currentValue) / range) * 100;
     }
     getBubbleStyle(offsetPercent) {
         const thumbCenterCompensation = (thumbSize / 2) - (thumbSize * offsetPercent / 100);
@@ -2732,11 +2760,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" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"numeric-slider\" [class.disabled]=\"disabled\">\n    <div class=\"slider-shell\">\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\n                <img src=\"assets/hadracha/general/numericSliderBubble.svg\"/>\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)\" \n            (mouseup)=\"_onEmitValue()\" >\n    </div>\n\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\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    </div>\n</div>\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 39px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);width:100%;min-width:320px}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble svg{width:52px;height:var(--bubble-height)}.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;direction:rtl;cursor:pointer;z-index:1}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:8px;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:-5px}.numeric-slider .tick{position:absolute;top:0;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)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    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 }\">\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\" [class.disabled]=\"disabled\">\n    <div class=\"slider-shell\">\n        <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\n                <img src=\"assets/hadracha/general/numericSliderBubble.svg\"/>\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)\" \n            (mouseup)=\"_onEmitValue()\" >\n    </div>\n\n    <div class=\"ticks\"> @for (tick of ticks; track $index) {\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    </div>\n</div>\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 39px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);width:100%;min-width:320px}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble svg{width:52px;height:var(--bubble-height)}.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;direction:rtl;cursor:pointer;z-index:1}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:8px;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:-5px}.numeric-slider .tick{position:absolute;top:0;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)}\n"] }]
+            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: [{
@@ -2745,6 +2773,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], creationMode: [{
+                type: Input
+            }], visualTickSegments: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });