herum-shared 0.1.65 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/atoms/index.d.ts +2 -1
- package/fesm2022/herum-shared-atoms.mjs +16 -9
- package/fesm2022/herum-shared-atoms.mjs.map +1 -1
- package/fesm2022/herum-shared.mjs +16 -9
- package/fesm2022/herum-shared.mjs.map +1 -1
- package/index.d.ts +2 -1
- package/package.json +1 -1
- package/assets/shared/icons/numericSliderBubble.svg +0 -3
package/atoms/index.d.ts
CHANGED
|
@@ -818,6 +818,7 @@ declare class NumericSliderComponent {
|
|
|
818
818
|
value: number;
|
|
819
819
|
disabled: boolean;
|
|
820
820
|
creationMode: boolean;
|
|
821
|
+
visualTickSegments: number;
|
|
821
822
|
valueChange: EventEmitter<number | NumericSliderRange>;
|
|
822
823
|
ticks: Array<Tick>;
|
|
823
824
|
trackStyle: Record<string, string>;
|
|
@@ -832,7 +833,7 @@ declare class NumericSliderComponent {
|
|
|
832
833
|
private getBubbleOffsetPercent;
|
|
833
834
|
private getBubbleStyle;
|
|
834
835
|
static ɵfac: i0.ɵɵFactoryDeclaration<NumericSliderComponent, never>;
|
|
835
|
-
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>;
|
|
836
|
+
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>;
|
|
836
837
|
}
|
|
837
838
|
|
|
838
839
|
declare class AtomsModule {
|
|
@@ -2124,8 +2124,13 @@ class HerumUploadFileComponent {
|
|
|
2124
2124
|
this.parentForm = parentForm;
|
|
2125
2125
|
}
|
|
2126
2126
|
ngOnChanges(changes) {
|
|
2127
|
-
if (changes.selectedFile
|
|
2127
|
+
if (changes.selectedFile) {
|
|
2128
|
+
if (!this.selectedFile) {
|
|
2129
|
+
this.files = [];
|
|
2130
|
+
return;
|
|
2131
|
+
}
|
|
2128
2132
|
this.setExistingFile();
|
|
2133
|
+
}
|
|
2129
2134
|
}
|
|
2130
2135
|
ngAfterViewInit() {
|
|
2131
2136
|
this.fileInput.nativeElement.setAttribute('title', '');
|
|
@@ -2666,13 +2671,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2666
2671
|
}] } });
|
|
2667
2672
|
|
|
2668
2673
|
const thumbSize = 16;
|
|
2669
|
-
const visualTickSegments = 10;
|
|
2670
2674
|
class NumericSliderComponent {
|
|
2671
2675
|
min = 0;
|
|
2672
2676
|
max = 100;
|
|
2673
2677
|
value = 0;
|
|
2674
2678
|
disabled = true;
|
|
2675
2679
|
creationMode = false;
|
|
2680
|
+
visualTickSegments = 10;
|
|
2676
2681
|
valueChange = new EventEmitter();
|
|
2677
2682
|
ticks = [];
|
|
2678
2683
|
trackStyle = {};
|
|
@@ -2722,7 +2727,7 @@ class NumericSliderComponent {
|
|
|
2722
2727
|
if (range <= 0)
|
|
2723
2728
|
return [{ value: maxValue, offsetPercent: 0, isEdge: true }];
|
|
2724
2729
|
const ticks = [];
|
|
2725
|
-
if (range <=
|
|
2730
|
+
if (range <= this.visualTickSegments) {
|
|
2726
2731
|
for (let tick = maxValue; tick >= minValue; tick--) {
|
|
2727
2732
|
ticks.push({
|
|
2728
2733
|
value: tick,
|
|
@@ -2734,14 +2739,14 @@ class NumericSliderComponent {
|
|
|
2734
2739
|
return ticks;
|
|
2735
2740
|
}
|
|
2736
2741
|
const inclusiveRange = maxValue - minValue + 1;
|
|
2737
|
-
for (let index = 0; index <= visualTickSegments; index++) {
|
|
2738
|
-
const value = index === visualTickSegments
|
|
2742
|
+
for (let index = 0; index <= this.visualTickSegments; index++) {
|
|
2743
|
+
const value = index === this.visualTickSegments
|
|
2739
2744
|
? minValue
|
|
2740
|
-
: Math.round(maxValue - ((inclusiveRange / visualTickSegments) * index));
|
|
2745
|
+
: Math.round(maxValue - ((inclusiveRange / this.visualTickSegments) * index));
|
|
2741
2746
|
ticks.push({
|
|
2742
2747
|
value: value,
|
|
2743
2748
|
offsetPercent: ((maxValue - value) / range) * 100,
|
|
2744
|
-
isEdge: index === 0 || index === visualTickSegments
|
|
2749
|
+
isEdge: index === 0 || index === this.visualTickSegments
|
|
2745
2750
|
});
|
|
2746
2751
|
}
|
|
2747
2752
|
;
|
|
@@ -2760,11 +2765,11 @@ class NumericSliderComponent {
|
|
|
2760
2765
|
};
|
|
2761
2766
|
}
|
|
2762
2767
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2763
|
-
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"] }] });
|
|
2768
|
+
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"] }] });
|
|
2764
2769
|
}
|
|
2765
2770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, decorators: [{
|
|
2766
2771
|
type: Component,
|
|
2767
|
-
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"] }]
|
|
2772
|
+
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"] }]
|
|
2768
2773
|
}], propDecorators: { min: [{
|
|
2769
2774
|
type: Input
|
|
2770
2775
|
}], max: [{
|
|
@@ -2775,6 +2780,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2775
2780
|
type: Input
|
|
2776
2781
|
}], creationMode: [{
|
|
2777
2782
|
type: Input
|
|
2783
|
+
}], visualTickSegments: [{
|
|
2784
|
+
type: Input
|
|
2778
2785
|
}], valueChange: [{
|
|
2779
2786
|
type: Output
|
|
2780
2787
|
}] } });
|