herum-shared 1.0.4 → 1.0.6
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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { OnInit, SimpleChanges, EventEmitter, PipeTransform, ElementRef, ChangeDetectorRef, Renderer2, SimpleChange, OnChanges } from '@angular/core';
|
|
3
3
|
import { User } from 'herum-types/User';
|
|
4
|
-
import { IdentifiedEntity, RecursiveTitledOption, FileData, MenuItem, NumericSliderRange,
|
|
4
|
+
import { IdentifiedEntity, RecursiveTitledOption, FileData, MenuItem, NumericSliderRange, NumericSliderInputsValidationChange, Tick } from 'herum-types/Shared';
|
|
5
5
|
import * as i41 from '@angular/forms';
|
|
6
6
|
import { ControlValueAccessor, NgControl, ControlContainer, FormControl, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
|
|
7
7
|
import { HerumTableParams } from 'herum-types/Table';
|
|
@@ -821,7 +821,7 @@ declare class NumericSliderComponent {
|
|
|
821
821
|
creationMode: boolean;
|
|
822
822
|
visualTickSegments: number;
|
|
823
823
|
valueChange: EventEmitter<number | NumericSliderRange>;
|
|
824
|
-
|
|
824
|
+
inputsValidationChange: EventEmitter<NumericSliderInputsValidationChange>;
|
|
825
825
|
ticks: Array<Tick>;
|
|
826
826
|
trackStyle: Record<string, string>;
|
|
827
827
|
bubbleStyle: Record<string, string>;
|
|
@@ -838,7 +838,7 @@ declare class NumericSliderComponent {
|
|
|
838
838
|
private getBubbleOffsetPercent;
|
|
839
839
|
private getBubbleStyle;
|
|
840
840
|
static ɵfac: i0.ɵɵFactoryDeclaration<NumericSliderComponent, never>;
|
|
841
|
-
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"; "
|
|
841
|
+
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"; "inputsValidationChange": "inputsValidationChange"; }, never, never, false, never>;
|
|
842
842
|
}
|
|
843
843
|
|
|
844
844
|
declare class AtomsModule {
|
|
@@ -2684,7 +2684,7 @@ class NumericSliderComponent {
|
|
|
2684
2684
|
creationMode = false;
|
|
2685
2685
|
visualTickSegments = 10;
|
|
2686
2686
|
valueChange = new EventEmitter();
|
|
2687
|
-
|
|
2687
|
+
inputsValidationChange = new EventEmitter();
|
|
2688
2688
|
ticks = [];
|
|
2689
2689
|
trackStyle = {};
|
|
2690
2690
|
bubbleStyle = {};
|
|
@@ -2727,7 +2727,7 @@ class NumericSliderComponent {
|
|
|
2727
2727
|
this.isMinInputValid = isValid;
|
|
2728
2728
|
else
|
|
2729
2729
|
this.isMaxInputValid = isValid;
|
|
2730
|
-
this.
|
|
2730
|
+
this.inputsValidationChange.emit({
|
|
2731
2731
|
isMinInputValid: this.isMinInputValid,
|
|
2732
2732
|
isMaxInputValid: this.isMaxInputValid
|
|
2733
2733
|
});
|
|
@@ -2783,7 +2783,7 @@ class NumericSliderComponent {
|
|
|
2783
2783
|
};
|
|
2784
2784
|
}
|
|
2785
2785
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2786
|
-
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",
|
|
2786
|
+
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", inputsValidationChange: "inputsValidationChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"numeric-slider\" [ngClass]=\"{ 'disabled': disabled && !creationMode, 'creation-mode': creationMode }\">\r\n @if (!creationMode) {\r\n <div class=\"slider-shell\">\r\n <div class=\"value-bubble\" [ngStyle]=\"bubbleStyle\">\r\n <span class=\"text\">{{ value }}</span>\r\n </div>\r\n\r\n <input class=\"slider-input\" type=\"range\" [min]=\"min\" [max]=\"max\" [value]=\"value\" [disabled]=\"disabled\"\r\n [ngStyle]=\"trackStyle\" (input)=\"_onInput($event)\" (mouseup)=\"_onEmitValue()\">\r\n </div>\r\n } @else {\r\n <div class=\"creation-container\">\r\n <div class=\"labels\">\r\n <span class=\"label\">\u05DE\u05D9\u05E0\u05D9\u05DE\u05D5\u05DD</span>\r\n <span class=\"label\">\u05DE\u05E7\u05E1\u05D9\u05DE\u05D5\u05DD</span>\r\n </div>\r\n\r\n <div class=\"slider-shell\" [ngStyle]=\"creationTrackStyle\">\r\n <div class=\"track\"></div>\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [max]=\"max\" [value]=\"max\" disabled=\"true\">\r\n <input class=\"slider-input slider-input-range\" type=\"range\" [min]=\"min\" [value]=\"min\" disabled=\"true\">\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"ticks\"> @for (tick of ticks; track $index) {\r\n @if (!creationMode || !tick.isEdge) {\r\n <div class=\"tick\" [style.left.%]=\"tick.offsetPercent\">\r\n @if (!tick.isEdge) {\r\n <span class=\"tick-mark\"></span>\r\n }\r\n <span class=\"tick-label\" [class.edge-tick]=\"tick.isEdge\">{{ tick.value }}</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if (creationMode) {\r\n <div class=\"inputs\">\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"min\" [maxValue]=\"max - 1\"\r\n (inputValueEmitter)=\"_creationValueChange($event, 'min')\" (isValidChange)=\"_isValidChange($event, 'min')\">\r\n </herum-input-field>\r\n\r\n <herum-input-field class=\"input\" [type]=\"'number'\" [inputValue]=\"max\" [minValue]=\"min + 1\"\n (inputValueEmitter)=\"_creationValueChange($event, 'max')\" (isValidChange)=\"_isValidChange($event, 'max')\">\n </herum-input-field>\n </div>\r\n }\r\n</div>\n", styles: [":host{display:block;width:100%}.numeric-slider{--thumb-size: 16px;--bubble-height: 40px;--bubble-tail-height: 5px;--slider-progress-color: var(--secondary-color);--slider-fill-color: var(--disable-color);--input-width: 80px;--track-height: 8px;width:100%;min-width:320px}.numeric-slider.creation-mode .ticks{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) / 2)}.numeric-slider.creation-mode .ticks .tick{top:-5px;bottom:3px}.numeric-slider .creation-container{display:flex;flex-direction:column;gap:8px}.numeric-slider .creation-container .labels{display:flex;justify-content:space-between;align-items:center;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2)}.numeric-slider .creation-container .labels .label{color:var(--icons-color);font-size:14px;font-weight:700}.numeric-slider .creation-container .slider-shell{width:calc(100% - var(--input-width));margin-inline:calc(var(--input-width) * .5)}.numeric-slider .creation-container .slider-shell .track{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);height:var(--track-height);background:var(--slider-fill-color);border-radius:var(--border-radius)}.numeric-slider .creation-container .slider-shell .slider-input-range{position:absolute;inset:0}.numeric-slider .creation-container .slider-shell .slider-input{cursor:default}.numeric-slider .creation-container .slider-shell .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider .slider-shell{position:relative;padding-top:24px}.numeric-slider .inputs{display:flex;justify-content:space-between;margin-inline:calc(var(--input-width) / -2) calc(var(--input-width) / 2);margin-top:8px}.numeric-slider .inputs .input{width:var(--input-width);transform:translate(-50%)}.numeric-slider .value-bubble{position:absolute;top:-16px;transform:translate(-50%);width:52px;height:var(--bubble-height);pointer-events:none}.numeric-slider .value-bubble:before{content:\"\";position:absolute;inset:0;background:var(--secondary-color);-webkit-mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);mask-image:url(/assets/hadracha/general/numericSliderBubble.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.numeric-slider .value-bubble .text{position:absolute;top:0;left:0;width:100%;height:calc(var(--bubble-height) - var(--bubble-tail-height));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light-background-color);font-size:14px;font-weight:400;line-height:1}.numeric-slider .slider-input{position:relative;width:100%;appearance:none;-webkit-appearance:none;direction:rtl;cursor:pointer;z-index:1;background:transparent}.numeric-slider .slider-input::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--border-radius);background:linear-gradient(90deg,var(--slider-fill-color) 0,var(--slider-fill-color) var(--slider-progress),var(--slider-progress-color) var(--slider-progress),var(--slider-progress-color) 100%)}.numeric-slider .slider-input::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:-4px;border-radius:50%;background-color:var(--light-background-color);border:1.5px solid var(--secondary-text-color);cursor:grab}.numeric-slider .ticks{position:relative;width:calc(100% - var(--thumb-size));margin-inline:calc(var(--thumb-size) / 2);direction:ltr;height:30px;top:-3px}.numeric-slider .tick{position:absolute;top:-2px;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0}.numeric-slider .tick .tick-mark{width:1.5px;height:8px;background:var(--secondary-text-color)}.numeric-slider .tick .tick-label{color:var(--secondary-text-color);line-height:1;margin-top:auto;text-align:center;line-height:normal;font-weight:400;font-size:12px}.numeric-slider .tick .edge-tick{font-weight:700;font-size:14px;color:var(--icons-color)}.numeric-slider.disabled{--slider-progress-color: var(--disable-color);--slider-fill-color: var(--slider-disabled-fill-color)}.numeric-slider.disabled .slider-input{cursor:default}.numeric-slider.disabled .slider-input::-webkit-slider-thumb{cursor:default}.numeric-slider.disabled .tick .edge-tick{color:var(--slider-disabled-fill-color)}.numeric-slider.disabled .value-bubble:before{background:var(--disable-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }] });
|
|
2787
2787
|
}
|
|
2788
2788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, decorators: [{
|
|
2789
2789
|
type: Component,
|
|
@@ -2802,7 +2802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2802
2802
|
type: Input
|
|
2803
2803
|
}], valueChange: [{
|
|
2804
2804
|
type: Output
|
|
2805
|
-
}],
|
|
2805
|
+
}], inputsValidationChange: [{
|
|
2806
2806
|
type: Output
|
|
2807
2807
|
}] } });
|
|
2808
2808
|
|