herum-shared 0.1.64 → 0.1.65
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 +6 -3
- package/fesm2022/herum-shared-atoms.mjs +48 -18
- package/fesm2022/herum-shared-atoms.mjs.map +1 -1
- package/fesm2022/herum-shared-services.mjs +3 -1
- package/fesm2022/herum-shared-services.mjs.map +1 -1
- package/fesm2022/herum-shared.mjs +50 -18
- package/fesm2022/herum-shared.mjs.map +1 -1
- package/index.d.ts +7 -4
- package/package.json +1 -1
- package/services/index.d.ts +1 -1
|
@@ -6993,58 +6993,86 @@ class NumericSliderComponent {
|
|
|
6993
6993
|
max = 100;
|
|
6994
6994
|
value = 0;
|
|
6995
6995
|
disabled = true;
|
|
6996
|
+
creationMode = false;
|
|
6996
6997
|
valueChange = new EventEmitter();
|
|
6997
6998
|
ticks = [];
|
|
6998
6999
|
trackStyle = {};
|
|
6999
7000
|
bubbleStyle = {};
|
|
7001
|
+
creationTrackStyle = {};
|
|
7000
7002
|
ngOnChanges(changes) {
|
|
7001
|
-
if (changes['min'] || changes['max'] || changes['value'])
|
|
7003
|
+
if (changes['min'] || changes['max'] || changes['value'] || changes['creationMode'])
|
|
7002
7004
|
this.recalculateViewModel();
|
|
7003
7005
|
}
|
|
7004
7006
|
_onInput(event) {
|
|
7005
|
-
|
|
7007
|
+
const inputElement = event.target;
|
|
7008
|
+
this.value = Math.round(Number(inputElement.value));
|
|
7009
|
+
;
|
|
7010
|
+
this.recalculateViewModel();
|
|
7011
|
+
}
|
|
7012
|
+
_onCreationValueChange(value, thumb) {
|
|
7013
|
+
const nextValue = Math.round(Number(value));
|
|
7014
|
+
if (isNaN(nextValue))
|
|
7015
|
+
return;
|
|
7016
|
+
if (thumb === 'min')
|
|
7017
|
+
this.min = nextValue;
|
|
7018
|
+
else
|
|
7019
|
+
this.max = nextValue;
|
|
7006
7020
|
this.recalculateViewModel();
|
|
7021
|
+
this._onEmitValue();
|
|
7007
7022
|
}
|
|
7008
7023
|
_onEmitValue() {
|
|
7024
|
+
if (this.creationMode) {
|
|
7025
|
+
this.valueChange.emit({
|
|
7026
|
+
min: this.min,
|
|
7027
|
+
max: this.max
|
|
7028
|
+
});
|
|
7029
|
+
return;
|
|
7030
|
+
}
|
|
7009
7031
|
this.valueChange.emit(this.value);
|
|
7010
7032
|
}
|
|
7011
7033
|
recalculateViewModel() {
|
|
7012
|
-
|
|
7013
|
-
|
|
7034
|
+
this.ticks = this.getTicks(this.min, this.max);
|
|
7035
|
+
if (this.creationMode)
|
|
7036
|
+
return;
|
|
7037
|
+
const bubbleOffsetPercent = this.getBubbleOffsetPercent(this.value);
|
|
7014
7038
|
this.trackStyle = { '--slider-progress': `${bubbleOffsetPercent}%` };
|
|
7015
7039
|
this.bubbleStyle = this.getBubbleStyle(bubbleOffsetPercent);
|
|
7016
7040
|
}
|
|
7017
|
-
getTicks() {
|
|
7018
|
-
const range =
|
|
7041
|
+
getTicks(minValue, maxValue) {
|
|
7042
|
+
const range = maxValue - minValue;
|
|
7019
7043
|
if (range <= 0)
|
|
7020
|
-
return [{ value:
|
|
7044
|
+
return [{ value: maxValue, offsetPercent: 0, isEdge: true }];
|
|
7021
7045
|
const ticks = [];
|
|
7022
|
-
if (
|
|
7023
|
-
for (let tick =
|
|
7046
|
+
if (range <= 10) {
|
|
7047
|
+
for (let tick = maxValue; tick >= minValue; tick--) {
|
|
7024
7048
|
ticks.push({
|
|
7025
7049
|
value: tick,
|
|
7026
|
-
offsetPercent: ((
|
|
7027
|
-
isEdge: tick ===
|
|
7050
|
+
offsetPercent: ((maxValue - tick) / range) * 100,
|
|
7051
|
+
isEdge: tick === maxValue || tick === minValue
|
|
7028
7052
|
});
|
|
7029
7053
|
}
|
|
7030
7054
|
;
|
|
7031
7055
|
return ticks;
|
|
7032
7056
|
}
|
|
7057
|
+
const inclusiveRange = maxValue - minValue + 1;
|
|
7033
7058
|
for (let index = 0; index <= visualTickSegments; index++) {
|
|
7034
|
-
const value =
|
|
7059
|
+
const value = index === visualTickSegments
|
|
7060
|
+
? minValue
|
|
7061
|
+
: Math.round(maxValue - ((inclusiveRange / visualTickSegments) * index));
|
|
7035
7062
|
ticks.push({
|
|
7036
7063
|
value: value,
|
|
7037
|
-
offsetPercent: ((
|
|
7064
|
+
offsetPercent: ((maxValue - value) / range) * 100,
|
|
7038
7065
|
isEdge: index === 0 || index === visualTickSegments
|
|
7039
7066
|
});
|
|
7040
7067
|
}
|
|
7041
7068
|
;
|
|
7042
7069
|
return ticks;
|
|
7043
7070
|
}
|
|
7044
|
-
getBubbleOffsetPercent() {
|
|
7045
|
-
|
|
7071
|
+
getBubbleOffsetPercent(currentValue) {
|
|
7072
|
+
const range = this.max - this.min;
|
|
7073
|
+
if (range === 0)
|
|
7046
7074
|
return 50;
|
|
7047
|
-
return ((this.max -
|
|
7075
|
+
return ((this.max - currentValue) / range) * 100;
|
|
7048
7076
|
}
|
|
7049
7077
|
getBubbleStyle(offsetPercent) {
|
|
7050
7078
|
const thumbCenterCompensation = (thumbSize / 2) - (thumbSize * offsetPercent / 100);
|
|
@@ -7053,11 +7081,11 @@ class NumericSliderComponent {
|
|
|
7053
7081
|
};
|
|
7054
7082
|
}
|
|
7055
7083
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7056
|
-
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\" [
|
|
7084
|
+
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"] }] });
|
|
7057
7085
|
}
|
|
7058
7086
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NumericSliderComponent, decorators: [{
|
|
7059
7087
|
type: Component,
|
|
7060
|
-
args: [{ standalone: false, selector: 'numeric-slider', template: "<div class=\"numeric-slider\" [
|
|
7088
|
+
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"] }]
|
|
7061
7089
|
}], propDecorators: { min: [{
|
|
7062
7090
|
type: Input
|
|
7063
7091
|
}], max: [{
|
|
@@ -7066,6 +7094,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
7066
7094
|
type: Input
|
|
7067
7095
|
}], disabled: [{
|
|
7068
7096
|
type: Input
|
|
7097
|
+
}], creationMode: [{
|
|
7098
|
+
type: Input
|
|
7069
7099
|
}], valueChange: [{
|
|
7070
7100
|
type: Output
|
|
7071
7101
|
}] } });
|
|
@@ -10737,6 +10767,8 @@ class MicroResourcesService {
|
|
|
10737
10767
|
});
|
|
10738
10768
|
});
|
|
10739
10769
|
});
|
|
10770
|
+
if (!updates.length)
|
|
10771
|
+
return of([]);
|
|
10740
10772
|
return forkJoin(updates.map(request => this.http.post(this.environmentConfig?.environment?.siteServerPath + this.environmentConfig?.resourcePaths?.resourceUpdateAuthorizations, request)));
|
|
10741
10773
|
}
|
|
10742
10774
|
getGradeDisplayText(gradeData) {
|