@libs-ui/components-inputs-range-slider 0.1.1-1
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/README.md +3 -0
- package/esm2022/index.mjs +2 -0
- package/esm2022/inputs-range-slider.component.mjs +135 -0
- package/esm2022/libs-ui-components-inputs-range-slider.mjs +5 -0
- package/fesm2022/libs-ui-components-inputs-range-slider.mjs +142 -0
- package/fesm2022/libs-ui-components-inputs-range-slider.mjs.map +1 -0
- package/index.d.ts +1 -0
- package/inputs-range-slider.component.d.ts +38 -0
- package/package.json +27 -0
package/README.md
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from './inputs-range-slider.component';
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3JhbmdlLXNsaWRlci9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxpQ0FBaUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vaW5wdXRzLXJhbmdlLXNsaWRlci5jb21wb25lbnQnO1xuIl19
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, effect, input, model, output, signal, untracked, viewChild } from '@angular/core';
|
|
2
|
+
import { viewDataNumberByLanguage } from '@libs-ui/utils';
|
|
3
|
+
import { Subject, fromEvent } from 'rxjs';
|
|
4
|
+
import { debounceTime, skip, takeUntil, tap } from 'rxjs/operators';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export class LibsUiComponentsInputsRangeSliderComponent {
|
|
7
|
+
// #region PROPERTY
|
|
8
|
+
visibilityMin = signal(true);
|
|
9
|
+
visibilityMax = signal(true);
|
|
10
|
+
position = signal(0);
|
|
11
|
+
focus = signal(false);
|
|
12
|
+
maxDisplay = computed(this.maxComputed.bind(this));
|
|
13
|
+
onChange = new Subject();
|
|
14
|
+
onDestroy = new Subject();
|
|
15
|
+
// #region INPUT
|
|
16
|
+
mode = input('slider');
|
|
17
|
+
min = input(1);
|
|
18
|
+
max = input(100);
|
|
19
|
+
value = model(0);
|
|
20
|
+
classInclude = input('libs-ui-range-slider-container', { transform: (value) => (value ? `libs-ui-range-slider-container ${value}` : 'libs-ui-range-slider-container') });
|
|
21
|
+
disable = input(false);
|
|
22
|
+
unit = input();
|
|
23
|
+
step = input(0);
|
|
24
|
+
hideProgressingValue = input();
|
|
25
|
+
formatNumber = input();
|
|
26
|
+
// #region OUTPUT
|
|
27
|
+
outChange = output();
|
|
28
|
+
/* VIEW CHILD */
|
|
29
|
+
containerEl = viewChild('containerEl');
|
|
30
|
+
rangeEl = viewChild('rangeEl');
|
|
31
|
+
valueEl = viewChild('valueEl');
|
|
32
|
+
maxValueEl = viewChild('maxValueEl');
|
|
33
|
+
minValueEl = viewChild('minValueEl');
|
|
34
|
+
constructor() {
|
|
35
|
+
effect(() => {
|
|
36
|
+
this.onChange.next(this.value());
|
|
37
|
+
untracked(() => {
|
|
38
|
+
this.setVariableCss();
|
|
39
|
+
this.calculatePosition();
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
/* FUNCTIONS */
|
|
44
|
+
ngAfterViewInit() {
|
|
45
|
+
this.initEvent(window, 'mouseup').pipe(tap(() => this.focus.set(false)));
|
|
46
|
+
this.initEvent(this.rangeEl()?.nativeElement, 'mousedown').pipe(tap(() => this.focus.set(true)));
|
|
47
|
+
// const elementMouseUp = this.initEvent(this.rangeEl()?.nativeElement, 'click').pipe(take(1));
|
|
48
|
+
// const elementMouseMove = this.initEvent(this.rangeEl()?.nativeElement, 'mousemove').pipe(takeUntil(windowMouseUp));
|
|
49
|
+
// const drag = elementMouseDown.pipe(mergeMap(() => elementMouseMove));
|
|
50
|
+
// const click = elementMouseDown.pipe(mergeMap(() => elementMouseUp));
|
|
51
|
+
// drag.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));
|
|
52
|
+
// click.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));
|
|
53
|
+
const inputChange = this.initEvent(this.rangeEl()?.nativeElement, 'input');
|
|
54
|
+
inputChange.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));
|
|
55
|
+
this.onChange.pipe(skip(this.mode() === 'audio' ? 1 : 0), debounceTime(250), takeUntil(this.onDestroy)).subscribe((value) => this.outChange.emit(value));
|
|
56
|
+
this.calculatePosition();
|
|
57
|
+
}
|
|
58
|
+
initEvent(element, name) {
|
|
59
|
+
return fromEvent(element, name).pipe(tap((e) => e.stopPropagation()), takeUntil(this.onDestroy));
|
|
60
|
+
}
|
|
61
|
+
async handlerChange(event) {
|
|
62
|
+
if (this.disable()) {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
event.stopPropagation();
|
|
65
|
+
event.target.value = this.value();
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
this.value.set(+event.target.value);
|
|
69
|
+
this.onChange.next(this.value());
|
|
70
|
+
}
|
|
71
|
+
async calculatePosition() {
|
|
72
|
+
if (!this.containerEl() || !this.valueEl()) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
const sliderContainer = this.containerEl()?.nativeElement.getBoundingClientRect();
|
|
76
|
+
const progressing = this.max() ? (this.value() - this.min()) / (this.max() - this.min()) : 0;
|
|
77
|
+
if (this.hideProgressingValue()) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();
|
|
81
|
+
const rectMax = this.containerEl()?.nativeElement.getBoundingClientRect();
|
|
82
|
+
this.position.set(sliderContainer.width * progressing - rectValue.width / 2 + ((progressing < 0.5 ? 1 : 0.5) - progressing) * 8);
|
|
83
|
+
const grandWidthValue = this.position() + rectValue.width - rectMax.width;
|
|
84
|
+
if (grandWidthValue > 0) {
|
|
85
|
+
this.position.update((value) => value - grandWidthValue);
|
|
86
|
+
}
|
|
87
|
+
setTimeout(() => {
|
|
88
|
+
this.setVisibility();
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
async setVisibility() {
|
|
92
|
+
const rectMax = this.maxValueEl()?.nativeElement.getBoundingClientRect();
|
|
93
|
+
const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();
|
|
94
|
+
const rectMin = this.minValueEl()?.nativeElement.getBoundingClientRect();
|
|
95
|
+
this.visibilityMin.set(true);
|
|
96
|
+
this.visibilityMax.set(true);
|
|
97
|
+
if (!this.value()) {
|
|
98
|
+
this.visibilityMin.set(false);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
if (rectValue.left + rectValue.width >= rectMax.left) {
|
|
102
|
+
this.visibilityMax.set(false);
|
|
103
|
+
}
|
|
104
|
+
if (rectValue.left <= rectMin.width + rectMin.left) {
|
|
105
|
+
this.visibilityMin.set(false);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
async setVariableCss() {
|
|
109
|
+
const element = this.containerEl()?.nativeElement;
|
|
110
|
+
if (!element) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
const colorHover = getComputedStyle(element).getPropertyValue('--libs-ui-color-light-1');
|
|
114
|
+
element.style.setProperty('--libs-ui-slider-border-box-shadow', `${colorHover}30`);
|
|
115
|
+
const percent = (100 * (this.value() - this.min())) / (this.max() - this.min());
|
|
116
|
+
element.style.setProperty('--libs-ui-slider-value', `${percent}%`);
|
|
117
|
+
}
|
|
118
|
+
maxComputed() {
|
|
119
|
+
if (this.formatNumber()) {
|
|
120
|
+
return viewDataNumberByLanguage(this.max(), true, 1, false, true);
|
|
121
|
+
}
|
|
122
|
+
return this.max();
|
|
123
|
+
}
|
|
124
|
+
ngOnDestroy() {
|
|
125
|
+
this.onDestroy.next();
|
|
126
|
+
this.onDestroy.complete();
|
|
127
|
+
}
|
|
128
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsRangeSliderComponent, isStandalone: true, selector: "libs_ui-components-inputs-range_slider", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hideProgressingValue: { classPropertyName: "hideProgressingValue", publicName: "hideProgressingValue", isSignal: true, isRequired: false, transformFunction: null }, formatNumber: { classPropertyName: "formatNumber", publicName: "formatNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outChange: "outChange" }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }, { propertyName: "rangeEl", first: true, predicate: ["rangeEl"], descendants: true, isSignal: true }, { propertyName: "valueEl", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }, { propertyName: "maxValueEl", first: true, predicate: ["maxValueEl"], descendants: true, isSignal: true }, { propertyName: "minValueEl", first: true, predicate: ["minValueEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classInclude()\"\n [style.height.px]=\"mode() === 'slider' ? 44 : 22\"\n [class.pt-[4px]]=\"mode() === 'slider'\"\n #containerEl>\n <div\n [class.hidden]=\"!focus()\"\n class=\"libs-ui-range-slider-icon-active\"></div>\n <input\n #rangeEl\n class=\"libs-ui-range-slider\"\n [attr.mode]=\"mode()\"\n [attr.focus]=\"focus()\"\n [attr.disable]=\"disable()\"\n [value]=\"value()\"\n [type]=\"'range'\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\" />\n @if (mode() === 'slider') {\n <div class=\"flex justify-between relative mt-[8px]\">\n <div\n #minValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMin()\">\n {{ min() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n <div\n #valueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] absolute bottom-0 flex\"\n [style.left.px]=\"position()\">\n @if (!hideProgressingValue()) {\n {{ value() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n }\n </div>\n <div\n #maxValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMax()\">\n {{ maxComputed() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".libs-ui-range-slider-container{width:100%;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(to right,var(--libs-ui-color-default, #226ff5) 0%,var(--libs-ui-color-default, #226ff5) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) 100%);outline:none;border-radius:4px}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:solid 2px var(--libs-ui-color-default);z-index:3;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 2px #4e4e4e4d;border:solid 2px var(--libs-ui-color-default);z-index:3}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]{background:linear-gradient(to right,#071631 0%,#071631 var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-webkit-slider-thumb{display:none}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-moz-range-thumb{width:0;height:0;border:none}.libs-ui-range-slider-container .libs-ui-range-slider:hover,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true]{background:linear-gradient(to right,var(--libs-ui-color-light-1, #4e8cf7) 0%,var(--libs-ui-color-light-1, #4e8cf7) var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-webkit-slider-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-webkit-slider-thumb{display:block}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-moz-range-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-moz-range-thumb{width:16px;height:16px;border:solid 2px var(--libs-ui-color-default)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true]{pointer-events:none;background:linear-gradient(to right,#cdd0d6 0%,#cdd0d6 var(--libs-ui-slider-value),#e6e7ea var(--libs-ui-slider-value),#e6e7ea 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true].libs-ui-range-slider::-webkit-slider-thumb{border:solid 2px #cdd0d6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
130
|
+
}
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsRangeSliderComponent, decorators: [{
|
|
132
|
+
type: Component,
|
|
133
|
+
args: [{ selector: 'libs_ui-components-inputs-range_slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classInclude()\"\n [style.height.px]=\"mode() === 'slider' ? 44 : 22\"\n [class.pt-[4px]]=\"mode() === 'slider'\"\n #containerEl>\n <div\n [class.hidden]=\"!focus()\"\n class=\"libs-ui-range-slider-icon-active\"></div>\n <input\n #rangeEl\n class=\"libs-ui-range-slider\"\n [attr.mode]=\"mode()\"\n [attr.focus]=\"focus()\"\n [attr.disable]=\"disable()\"\n [value]=\"value()\"\n [type]=\"'range'\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\" />\n @if (mode() === 'slider') {\n <div class=\"flex justify-between relative mt-[8px]\">\n <div\n #minValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMin()\">\n {{ min() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n <div\n #valueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] absolute bottom-0 flex\"\n [style.left.px]=\"position()\">\n @if (!hideProgressingValue()) {\n {{ value() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n }\n </div>\n <div\n #maxValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMax()\">\n {{ maxComputed() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".libs-ui-range-slider-container{width:100%;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(to right,var(--libs-ui-color-default, #226ff5) 0%,var(--libs-ui-color-default, #226ff5) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) 100%);outline:none;border-radius:4px}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:solid 2px var(--libs-ui-color-default);z-index:3;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 2px #4e4e4e4d;border:solid 2px var(--libs-ui-color-default);z-index:3}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]{background:linear-gradient(to right,#071631 0%,#071631 var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-webkit-slider-thumb{display:none}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-moz-range-thumb{width:0;height:0;border:none}.libs-ui-range-slider-container .libs-ui-range-slider:hover,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true]{background:linear-gradient(to right,var(--libs-ui-color-light-1, #4e8cf7) 0%,var(--libs-ui-color-light-1, #4e8cf7) var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-webkit-slider-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-webkit-slider-thumb{display:block}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-moz-range-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-moz-range-thumb{width:16px;height:16px;border:solid 2px var(--libs-ui-color-default)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true]{pointer-events:none;background:linear-gradient(to right,#cdd0d6 0%,#cdd0d6 var(--libs-ui-slider-value),#e6e7ea var(--libs-ui-slider-value),#e6e7ea 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true].libs-ui-range-slider::-webkit-slider-thumb{border:solid 2px #cdd0d6}\n"] }]
|
|
134
|
+
}], ctorParameters: () => [] });
|
|
135
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXRzLXJhbmdlLXNsaWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3JhbmdlLXNsaWRlci9zcmMvaW5wdXRzLXJhbmdlLXNsaWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3JhbmdlLXNsaWRlci9zcmMvaW5wdXRzLXJhbmdlLXNsaWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLHVCQUF1QixFQUFFLFNBQVMsRUFBeUIsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUvSyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMxRCxPQUFPLEVBQWMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN0RCxPQUFPLEVBQUUsWUFBWSxFQUFZLElBQUksRUFBUSxTQUFTLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBVXBGLE1BQU0sT0FBTywwQ0FBMEM7SUFDckQsbUJBQW1CO0lBQ1QsYUFBYSxHQUFHLE1BQU0sQ0FBVSxJQUFJLENBQUMsQ0FBQztJQUN0QyxhQUFhLEdBQUcsTUFBTSxDQUFVLElBQUksQ0FBQyxDQUFDO0lBQ3RDLFFBQVEsR0FBRyxNQUFNLENBQVMsQ0FBQyxDQUFDLENBQUM7SUFDN0IsS0FBSyxHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUMvQixVQUFVLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFFckQsUUFBUSxHQUFHLElBQUks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clZpZXdJbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBPbkRlc3Ryb3ksIGNvbXB1dGVkLCBlZmZlY3QsIGlucHV0LCBtb2RlbCwgb3V0cHV0LCBzaWduYWwsIHVudHJhY2tlZCwgdmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJRXZlbnQgfSBmcm9tICdAbGlicy11aS9pbnRlcmZhY2VzLXR5cGVzJztcbmltcG9ydCB7IHZpZXdEYXRhTnVtYmVyQnlMYW5ndWFnZSB9IGZyb20gJ0BsaWJzLXVpL3V0aWxzJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QsIGZyb21FdmVudCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBtZXJnZU1hcCwgc2tpcCwgdGFrZSwgdGFrZVVudGlsLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1pbnB1dHMtcmFuZ2Vfc2xpZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICdpbnB1dHMtcmFuZ2Utc2xpZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICdpbnB1dHMtcmFuZ2Utc2xpZGVyLmNvbXBvbmVudC5zY3NzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNJbnB1dHNSYW5nZVNsaWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIC8vICNyZWdpb24gUFJPUEVSVFlcbiAgcHJvdGVjdGVkIHZpc2liaWxpdHlNaW4gPSBzaWduYWw8Ym9vbGVhbj4odHJ1ZSk7XG4gIHByb3RlY3RlZCB2aXNpYmlsaXR5TWF4ID0gc2lnbmFsPGJvb2xlYW4+KHRydWUpO1xuICBwcm90ZWN0ZWQgcG9zaXRpb24gPSBzaWduYWw8bnVtYmVyPigwKTtcbiAgcHJvdGVjdGVkIGZvY3VzID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIG1heERpc3BsYXkgPSBjb21wdXRlZCh0aGlzLm1heENvbXB1dGVkLmJpbmQodGhpcykpO1xuXG4gIHByaXZhdGUgb25DaGFuZ2UgPSBuZXcgU3ViamVjdDxudW1iZXI+KCk7XG4gIHByaXZhdGUgb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAvLyAjcmVnaW9uIElOUFVUXG4gIHJlYWRvbmx5IG1vZGUgPSBpbnB1dDwnYXVkaW8nIHwgJ3NsaWRlcic+KCdzbGlkZXInKTtcbiAgcmVhZG9ubHkgbWluID0gaW5wdXQ8bnVtYmVyPigxKTtcbiAgcmVhZG9ubHkgbWF4ID0gaW5wdXQ8bnVtYmVyPigxMDApO1xuICByZWFkb25seSB2YWx1ZSA9IG1vZGVsPG51bWJlcj4oMCk7XG4gIHJlYWRvbmx5IGNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZywgc3RyaW5nIHwgdW5kZWZpbmVkPignbGlicy11aS1yYW5nZS1zbGlkZXItY29udGFpbmVyJywgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gKHZhbHVlID8gYGxpYnMtdWktcmFuZ2Utc2xpZGVyLWNvbnRhaW5lciAke3ZhbHVlfWAgOiAnbGlicy11aS1yYW5nZS1zbGlkZXItY29udGFpbmVyJykgfSk7XG4gIHJlYWRvbmx5IGRpc2FibGUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IHVuaXQgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHN0ZXAgPSBpbnB1dDxudW1iZXI+KDApO1xuICByZWFkb25seSBoaWRlUHJvZ3Jlc3NpbmdWYWx1ZSA9IGlucHV0PGJvb2xlYW4+KCk7XG4gIHJlYWRvbmx5IGZvcm1hdE51bWJlciA9IGlucHV0PGJvb2xlYW4+KCk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0Q2hhbmdlID0gb3V0cHV0PG51bWJlcj4oKTtcblxuICAvKiBWSUVXIENISUxEICovXG4gIHByaXZhdGUgcmVhZG9ubHkgY29udGFpbmVyRWwgPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZj4oJ2NvbnRhaW5lckVsJyk7XG4gIHByaXZhdGUgcmVhZG9ubHkgcmFuZ2VFbCA9IHZpZXdDaGlsZDxFbGVtZW50UmVmPigncmFuZ2VFbCcpO1xuICBwcml2YXRlIHJlYWRvbmx5IHZhbHVlRWwgPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZj4oJ3ZhbHVlRWwnKTtcbiAgcHJpdmF0ZSByZWFkb25seSBtYXhWYWx1ZUVsID0gdmlld0NoaWxkPEVsZW1lbnRSZWY+KCdtYXhWYWx1ZUVsJyk7XG4gIHByaXZhdGUgcmVhZG9ubHkgbWluVmFsdWVFbCA9IHZpZXdDaGlsZDxFbGVtZW50UmVmPignbWluVmFsdWVFbCcpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGVmZmVjdCgoKSA9PiB7XG4gICAgICB0aGlzLm9uQ2hhbmdlLm5leHQodGhpcy52YWx1ZSgpKTtcbiAgICAgIHVudHJhY2tlZCgoKSA9PiB7XG4gICAgICAgIHRoaXMuc2V0VmFyaWFibGVDc3MoKTtcbiAgICAgICAgdGhpcy5jYWxjdWxhdGVQb3NpdGlvbigpO1xuICAgICAgfSk7XG4gICAgfSk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaW5pdEV2ZW50KHdpbmRvdyBhcyB1bmtub3duIGFzIEhUTUxFbGVtZW50LCAnbW91c2V1cCcpLnBpcGUodGFwKCgpID0+IHRoaXMuZm9jdXMuc2V0KGZhbHNlKSkpO1xuICAgIHRoaXMuaW5pdEV2ZW50KHRoaXMucmFuZ2VFbCgpPy5uYXRpdmVFbGVtZW50LCAnbW91c2Vkb3duJykucGlwZSh0YXAoKCkgPT4gdGhpcy5mb2N1cy5zZXQodHJ1ZSkpKTtcbiAgICAvLyBjb25zdCBlbGVtZW50TW91c2VVcCA9IHRoaXMuaW5pdEV2ZW50KHRoaXMucmFuZ2VFbCgpPy5uYXRpdmVFbGVtZW50LCAnY2xpY2snKS5waXBlKHRha2UoMSkpO1xuICAgIC8vIGNvbnN0IGVsZW1lbnRNb3VzZU1vdmUgPSB0aGlzLmluaXRFdmVudCh0aGlzLnJhbmdlRWwoKT8ubmF0aXZlRWxlbWVudCwgJ21vdXNlbW92ZScpLnBpcGUodGFrZVVudGlsKHdpbmRvd01vdXNlVXApKTtcbiAgICAvLyBjb25zdCBkcmFnID0gZWxlbWVudE1vdXNlRG93bi5waXBlKG1lcmdlTWFwKCgpID0+IGVsZW1lbnRNb3VzZU1vdmUpKTtcbiAgICAvLyBjb25zdCBjbGljayA9IGVsZW1lbnRNb3VzZURvd24ucGlwZShtZXJnZU1hcCgoKSA9PiBlbGVtZW50TW91c2VVcCkpO1xuXG4gICAgLy8gZHJhZy5waXBlKHRha2VVbnRpbCh0aGlzLm9uRGVzdHJveSkpLnN1YnNjcmliZSh0aGlzLmhhbmRsZXJDaGFuZ2UuYmluZCh0aGlzKSk7XG4gICAgLy8gY2xpY2sucGlwZSh0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kpKS5zdWJzY3JpYmUodGhpcy5oYW5kbGVyQ2hhbmdlLmJpbmQodGhpcykpO1xuICAgIGNvbnN0IGlucHV0Q2hhbmdlID0gdGhpcy5pbml0RXZlbnQodGhpcy5yYW5nZUVsKCk/Lm5hdGl2ZUVsZW1lbnQsICdpbnB1dCcpO1xuXG4gICAgaW5wdXRDaGFuZ2UucGlwZSh0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kpKS5zdWJzY3JpYmUodGhpcy5oYW5kbGVyQ2hhbmdlLmJpbmQodGhpcykpO1xuICAgIHRoaXMub25DaGFuZ2UucGlwZShza2lwKHRoaXMubW9kZSgpID09PSAnYXVkaW8nID8gMSA6IDApLCBkZWJvdW5jZVRpbWUoMjUwKSwgdGFrZVVudGlsKHRoaXMub25EZXN0cm95KSkuc3Vic2NyaWJlKCh2YWx1ZTogbnVtYmVyKSA9PiB0aGlzLm91dENoYW5nZS5lbWl0KHZhbHVlKSk7XG4gICAgdGhpcy5jYWxjdWxhdGVQb3NpdGlvbigpO1xuICB9XG5cbiAgcHJpdmF0ZSBpbml0RXZlbnQoZWxlbWVudDogSFRNTEVsZW1lbnQsIG5hbWU6IHN0cmluZyk6IE9ic2VydmFibGU8SUV2ZW50PiB7XG4gICAgcmV0dXJuIGZyb21FdmVudDxJRXZlbnQ+KGVsZW1lbnQsIG5hbWUpLnBpcGUoXG4gICAgICB0YXAoKGU6IElFdmVudCkgPT4gZS5zdG9wUHJvcGFnYXRpb24oKSksXG4gICAgICB0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kpXG4gICAgKTtcbiAgfVxuXG4gIHByaXZhdGUgYXN5bmMgaGFuZGxlckNoYW5nZShldmVudDogSUV2ZW50KSB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZSgpKSB7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICBldmVudC50YXJnZXQudmFsdWUgPSB0aGlzLnZhbHVlKCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy52YWx1ZS5zZXQoK2V2ZW50LnRhcmdldC52YWx1ZSk7XG4gICAgdGhpcy5vbkNoYW5nZS5uZXh0KHRoaXMudmFsdWUoKSk7XG4gIH1cblxuICBwcml2YXRlIGFzeW5jIGNhbGN1bGF0ZVBvc2l0aW9uKCkge1xuICAgIGlmICghdGhpcy5jb250YWluZXJFbCgpIHx8ICF0aGlzLnZhbHVlRWwoKSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBzbGlkZXJDb250YWluZXIgPSB0aGlzLmNvbnRhaW5lckVsKCk/Lm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgY29uc3QgcHJvZ3Jlc3NpbmcgPSB0aGlzLm1heCgpID8gKHRoaXMudmFsdWUoKSAtIHRoaXMubWluKCkpIC8gKHRoaXMubWF4KCkgLSB0aGlzLm1pbigpKSA6IDA7XG5cbiAgICBpZiAodGhpcy5oaWRlUHJvZ3Jlc3NpbmdWYWx1ZSgpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGNvbnN0IHJlY3RWYWx1ZSA9IHRoaXMudmFsdWVFbCgpPy5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgIGNvbnN0IHJlY3RNYXggPSB0aGlzLmNvbnRhaW5lckVsKCk/Lm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICB0aGlzLnBvc2l0aW9uLnNldChzbGlkZXJDb250YWluZXIud2lkdGggKiBwcm9ncmVzc2luZyAtIHJlY3RWYWx1ZS53aWR0aCAvIDIgKyAoKHByb2dyZXNzaW5nIDwgMC41ID8gMSA6IDAuNSkgLSBwcm9ncmVzc2luZykgKiA4KTtcbiAgICBjb25zdCBncmFuZFdpZHRoVmFsdWUgPSB0aGlzLnBvc2l0aW9uKCkgKyByZWN0VmFsdWUud2lkdGggLSByZWN0TWF4LndpZHRoO1xuXG4gICAgaWYgKGdyYW5kV2lkdGhWYWx1ZSA+IDApIHtcbiAgICAgIHRoaXMucG9zaXRpb24udXBkYXRlKCh2YWx1ZSkgPT4gdmFsdWUgLSBncmFuZFdpZHRoVmFsdWUpO1xuICAgIH1cbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuc2V0VmlzaWJpbGl0eSgpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBzZXRWaXNpYmlsaXR5KCkge1xuICAgIGNvbnN0IHJlY3RNYXggPSB0aGlzLm1heFZhbHVlRWwoKT8ubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICBjb25zdCByZWN0VmFsdWUgPSB0aGlzLnZhbHVlRWwoKT8ubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICBjb25zdCByZWN0TWluID0gdGhpcy5taW5WYWx1ZUVsKCk/Lm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICB0aGlzLnZpc2liaWxpdHlNaW4uc2V0KHRydWUpO1xuICAgIHRoaXMudmlzaWJpbGl0eU1heC5zZXQodHJ1ZSk7XG4gICAgaWYgKCF0aGlzLnZhbHVlKCkpIHtcbiAgICAgIHRoaXMudmlzaWJpbGl0eU1pbi5zZXQoZmFsc2UpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmIChyZWN0VmFsdWUubGVmdCArIHJlY3RWYWx1ZS53aWR0aCA+PSByZWN0TWF4LmxlZnQpIHtcbiAgICAgIHRoaXMudmlzaWJpbGl0eU1heC5zZXQoZmFsc2UpO1xuICAgIH1cbiAgICBpZiAocmVjdFZhbHVlLmxlZnQgPD0gcmVjdE1pbi53aWR0aCArIHJlY3RNaW4ubGVmdCkge1xuICAgICAgdGhpcy52aXNpYmlsaXR5TWluLnNldChmYWxzZSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBzZXRWYXJpYWJsZUNzcygpIHtcbiAgICBjb25zdCBlbGVtZW50ID0gdGhpcy5jb250YWluZXJFbCgpPy5uYXRpdmVFbGVtZW50O1xuXG4gICAgaWYgKCFlbGVtZW50KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGNvbnN0IGNvbG9ySG92ZXIgPSBnZXRDb21wdXRlZFN0eWxlKGVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoJy0tbGlicy11aS1jb2xvci1saWdodC0xJyk7XG5cbiAgICBlbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KCctLWxpYnMtdWktc2xpZGVyLWJvcmRlci1ib3gtc2hhZG93JywgYCR7Y29sb3JIb3Zlcn0zMGApO1xuICAgIGNvbnN0IHBlcmNlbnQgPSAoMTAwICogKHRoaXMudmFsdWUoKSAtIHRoaXMubWluKCkpKSAvICh0aGlzLm1heCgpIC0gdGhpcy5taW4oKSk7XG4gICAgZWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1saWJzLXVpLXNsaWRlci12YWx1ZScsIGAke3BlcmNlbnR9JWApO1xuICB9XG5cbiAgcHJvdGVjdGVkIG1heENvbXB1dGVkKCkge1xuICAgIGlmICh0aGlzLmZvcm1hdE51bWJlcigpKSB7XG4gICAgICByZXR1cm4gdmlld0RhdGFOdW1iZXJCeUxhbmd1YWdlKHRoaXMubWF4KCksIHRydWUsIDEsIGZhbHNlLCB0cnVlKTtcbiAgICB9XG5cbiAgICByZXR1cm4gdGhpcy5tYXgoKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub25EZXN0cm95Lm5leHQoKTtcbiAgICB0aGlzLm9uRGVzdHJveS5jb21wbGV0ZSgpO1xuICB9XG59XG4iLCI8ZGl2XG4gIFtjbGFzc109XCJjbGFzc0luY2x1ZGUoKVwiXG4gIFtzdHlsZS5oZWlnaHQucHhdPVwibW9kZSgpID09PSAnc2xpZGVyJyA/IDQ0IDogMjJcIlxuICBbY2xhc3MucHQtWzRweF1dPVwibW9kZSgpID09PSAnc2xpZGVyJ1wiXG4gICNjb250YWluZXJFbD5cbiAgPGRpdlxuICAgIFtjbGFzcy5oaWRkZW5dPVwiIWZvY3VzKClcIlxuICAgIGNsYXNzPVwibGlicy11aS1yYW5nZS1zbGlkZXItaWNvbi1hY3RpdmVcIj48L2Rpdj5cbiAgPGlucHV0XG4gICAgI3JhbmdlRWxcbiAgICBjbGFzcz1cImxpYnMtdWktcmFuZ2Utc2xpZGVyXCJcbiAgICBbYXR0ci5tb2RlXT1cIm1vZGUoKVwiXG4gICAgW2F0dHIuZm9jdXNdPVwiZm9jdXMoKVwiXG4gICAgW2F0dHIuZGlzYWJsZV09XCJkaXNhYmxlKClcIlxuICAgIFt2YWx1ZV09XCJ2YWx1ZSgpXCJcbiAgICBbdHlwZV09XCIncmFuZ2UnXCJcbiAgICBbbWluXT1cIm1pbigpXCJcbiAgICBbbWF4XT1cIm1heCgpXCJcbiAgICBbc3RlcF09XCJzdGVwKClcIiAvPlxuICBAaWYgKG1vZGUoKSA9PT0gJ3NsaWRlcicpIHtcbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBqdXN0aWZ5LWJldHdlZW4gcmVsYXRpdmUgbXQtWzhweF1cIj5cbiAgICAgIDxkaXZcbiAgICAgICAgI21pblZhbHVlRWxcbiAgICAgICAgY2xhc3M9XCJsaWJzLXVpLWZvbnQtaDdyIHRleHQtWyM5Y2EyYWRdIGZsZXhcIlxuICAgICAgICBbY2xhc3MuaW52aXNpYmxlXT1cIiF2aXNpYmlsaXR5TWluKClcIj5cbiAgICAgICAge3sgbWluKCkgfX1cbiAgICAgICAgQGlmICh1bml0KCkpIHtcbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImxpYnMtdWktZm9udC1oN3IgdGV4dC1bIzljYTJhZF1cIj57eyB1bml0KCkgfX08L3NwYW4+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdlxuICAgICAgICAjdmFsdWVFbFxuICAgICAgICBjbGFzcz1cImxpYnMtdWktZm9udC1oN3IgdGV4dC1bIzljYTJhZF0gYWJzb2x1dGUgYm90dG9tLTAgZmxleFwiXG4gICAgICAgIFtzdHlsZS5sZWZ0LnB4XT1cInBvc2l0aW9uKClcIj5cbiAgICAgICAgQGlmICghaGlkZVByb2dyZXNzaW5nVmFsdWUoKSkge1xuICAgICAgICAgIHt7IHZhbHVlKCkgfX1cbiAgICAgICAgICBAaWYgKHVuaXQoKSkge1xuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJsaWJzLXVpLWZvbnQtaDdyIHRleHQtWyM5Y2EyYWRdXCI+e3sgdW5pdCgpIH19PC9zcGFuPlxuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgICNtYXhWYWx1ZUVsXG4gICAgICAgIGNsYXNzPVwibGlicy11aS1mb250LWg3ciB0ZXh0LVsjOWNhMmFkXSBmbGV4XCJcbiAgICAgICAgW2NsYXNzLmludmlzaWJsZV09XCIhdmlzaWJpbGl0eU1heCgpXCI+XG4gICAgICAgIHt7IG1heENvbXB1dGVkKCkgfX1cbiAgICAgICAgQGlmICh1bml0KCkpIHtcbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImxpYnMtdWktZm9udC1oN3IgdGV4dC1bIzljYTJhZF1cIj57eyB1bml0KCkgfX08L3NwYW4+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './index';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWlucHV0cy1yYW5nZS1zbGlkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3JhbmdlLXNsaWRlci9zcmMvbGlicy11aS1jb21wb25lbnRzLWlucHV0cy1yYW5nZS1zbGlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { signal, computed, input, model, output, viewChild, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { viewDataNumberByLanguage } from '@libs-ui/utils';
|
|
4
|
+
import { Subject, fromEvent } from 'rxjs';
|
|
5
|
+
import { tap, takeUntil, skip, debounceTime } from 'rxjs/operators';
|
|
6
|
+
|
|
7
|
+
class LibsUiComponentsInputsRangeSliderComponent {
|
|
8
|
+
// #region PROPERTY
|
|
9
|
+
visibilityMin = signal(true);
|
|
10
|
+
visibilityMax = signal(true);
|
|
11
|
+
position = signal(0);
|
|
12
|
+
focus = signal(false);
|
|
13
|
+
maxDisplay = computed(this.maxComputed.bind(this));
|
|
14
|
+
onChange = new Subject();
|
|
15
|
+
onDestroy = new Subject();
|
|
16
|
+
// #region INPUT
|
|
17
|
+
mode = input('slider');
|
|
18
|
+
min = input(1);
|
|
19
|
+
max = input(100);
|
|
20
|
+
value = model(0);
|
|
21
|
+
classInclude = input('libs-ui-range-slider-container', { transform: (value) => (value ? `libs-ui-range-slider-container ${value}` : 'libs-ui-range-slider-container') });
|
|
22
|
+
disable = input(false);
|
|
23
|
+
unit = input();
|
|
24
|
+
step = input(0);
|
|
25
|
+
hideProgressingValue = input();
|
|
26
|
+
formatNumber = input();
|
|
27
|
+
// #region OUTPUT
|
|
28
|
+
outChange = output();
|
|
29
|
+
/* VIEW CHILD */
|
|
30
|
+
containerEl = viewChild('containerEl');
|
|
31
|
+
rangeEl = viewChild('rangeEl');
|
|
32
|
+
valueEl = viewChild('valueEl');
|
|
33
|
+
maxValueEl = viewChild('maxValueEl');
|
|
34
|
+
minValueEl = viewChild('minValueEl');
|
|
35
|
+
constructor() {
|
|
36
|
+
effect(() => {
|
|
37
|
+
this.onChange.next(this.value());
|
|
38
|
+
untracked(() => {
|
|
39
|
+
this.setVariableCss();
|
|
40
|
+
this.calculatePosition();
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
/* FUNCTIONS */
|
|
45
|
+
ngAfterViewInit() {
|
|
46
|
+
this.initEvent(window, 'mouseup').pipe(tap(() => this.focus.set(false)));
|
|
47
|
+
this.initEvent(this.rangeEl()?.nativeElement, 'mousedown').pipe(tap(() => this.focus.set(true)));
|
|
48
|
+
// const elementMouseUp = this.initEvent(this.rangeEl()?.nativeElement, 'click').pipe(take(1));
|
|
49
|
+
// const elementMouseMove = this.initEvent(this.rangeEl()?.nativeElement, 'mousemove').pipe(takeUntil(windowMouseUp));
|
|
50
|
+
// const drag = elementMouseDown.pipe(mergeMap(() => elementMouseMove));
|
|
51
|
+
// const click = elementMouseDown.pipe(mergeMap(() => elementMouseUp));
|
|
52
|
+
// drag.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));
|
|
53
|
+
// click.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));
|
|
54
|
+
const inputChange = this.initEvent(this.rangeEl()?.nativeElement, 'input');
|
|
55
|
+
inputChange.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));
|
|
56
|
+
this.onChange.pipe(skip(this.mode() === 'audio' ? 1 : 0), debounceTime(250), takeUntil(this.onDestroy)).subscribe((value) => this.outChange.emit(value));
|
|
57
|
+
this.calculatePosition();
|
|
58
|
+
}
|
|
59
|
+
initEvent(element, name) {
|
|
60
|
+
return fromEvent(element, name).pipe(tap((e) => e.stopPropagation()), takeUntil(this.onDestroy));
|
|
61
|
+
}
|
|
62
|
+
async handlerChange(event) {
|
|
63
|
+
if (this.disable()) {
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
event.stopPropagation();
|
|
66
|
+
event.target.value = this.value();
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
this.value.set(+event.target.value);
|
|
70
|
+
this.onChange.next(this.value());
|
|
71
|
+
}
|
|
72
|
+
async calculatePosition() {
|
|
73
|
+
if (!this.containerEl() || !this.valueEl()) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
const sliderContainer = this.containerEl()?.nativeElement.getBoundingClientRect();
|
|
77
|
+
const progressing = this.max() ? (this.value() - this.min()) / (this.max() - this.min()) : 0;
|
|
78
|
+
if (this.hideProgressingValue()) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();
|
|
82
|
+
const rectMax = this.containerEl()?.nativeElement.getBoundingClientRect();
|
|
83
|
+
this.position.set(sliderContainer.width * progressing - rectValue.width / 2 + ((progressing < 0.5 ? 1 : 0.5) - progressing) * 8);
|
|
84
|
+
const grandWidthValue = this.position() + rectValue.width - rectMax.width;
|
|
85
|
+
if (grandWidthValue > 0) {
|
|
86
|
+
this.position.update((value) => value - grandWidthValue);
|
|
87
|
+
}
|
|
88
|
+
setTimeout(() => {
|
|
89
|
+
this.setVisibility();
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
async setVisibility() {
|
|
93
|
+
const rectMax = this.maxValueEl()?.nativeElement.getBoundingClientRect();
|
|
94
|
+
const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();
|
|
95
|
+
const rectMin = this.minValueEl()?.nativeElement.getBoundingClientRect();
|
|
96
|
+
this.visibilityMin.set(true);
|
|
97
|
+
this.visibilityMax.set(true);
|
|
98
|
+
if (!this.value()) {
|
|
99
|
+
this.visibilityMin.set(false);
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
if (rectValue.left + rectValue.width >= rectMax.left) {
|
|
103
|
+
this.visibilityMax.set(false);
|
|
104
|
+
}
|
|
105
|
+
if (rectValue.left <= rectMin.width + rectMin.left) {
|
|
106
|
+
this.visibilityMin.set(false);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
async setVariableCss() {
|
|
110
|
+
const element = this.containerEl()?.nativeElement;
|
|
111
|
+
if (!element) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
const colorHover = getComputedStyle(element).getPropertyValue('--libs-ui-color-light-1');
|
|
115
|
+
element.style.setProperty('--libs-ui-slider-border-box-shadow', `${colorHover}30`);
|
|
116
|
+
const percent = (100 * (this.value() - this.min())) / (this.max() - this.min());
|
|
117
|
+
element.style.setProperty('--libs-ui-slider-value', `${percent}%`);
|
|
118
|
+
}
|
|
119
|
+
maxComputed() {
|
|
120
|
+
if (this.formatNumber()) {
|
|
121
|
+
return viewDataNumberByLanguage(this.max(), true, 1, false, true);
|
|
122
|
+
}
|
|
123
|
+
return this.max();
|
|
124
|
+
}
|
|
125
|
+
ngOnDestroy() {
|
|
126
|
+
this.onDestroy.next();
|
|
127
|
+
this.onDestroy.complete();
|
|
128
|
+
}
|
|
129
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
130
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsRangeSliderComponent, isStandalone: true, selector: "libs_ui-components-inputs-range_slider", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hideProgressingValue: { classPropertyName: "hideProgressingValue", publicName: "hideProgressingValue", isSignal: true, isRequired: false, transformFunction: null }, formatNumber: { classPropertyName: "formatNumber", publicName: "formatNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outChange: "outChange" }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }, { propertyName: "rangeEl", first: true, predicate: ["rangeEl"], descendants: true, isSignal: true }, { propertyName: "valueEl", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }, { propertyName: "maxValueEl", first: true, predicate: ["maxValueEl"], descendants: true, isSignal: true }, { propertyName: "minValueEl", first: true, predicate: ["minValueEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classInclude()\"\n [style.height.px]=\"mode() === 'slider' ? 44 : 22\"\n [class.pt-[4px]]=\"mode() === 'slider'\"\n #containerEl>\n <div\n [class.hidden]=\"!focus()\"\n class=\"libs-ui-range-slider-icon-active\"></div>\n <input\n #rangeEl\n class=\"libs-ui-range-slider\"\n [attr.mode]=\"mode()\"\n [attr.focus]=\"focus()\"\n [attr.disable]=\"disable()\"\n [value]=\"value()\"\n [type]=\"'range'\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\" />\n @if (mode() === 'slider') {\n <div class=\"flex justify-between relative mt-[8px]\">\n <div\n #minValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMin()\">\n {{ min() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n <div\n #valueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] absolute bottom-0 flex\"\n [style.left.px]=\"position()\">\n @if (!hideProgressingValue()) {\n {{ value() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n }\n </div>\n <div\n #maxValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMax()\">\n {{ maxComputed() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".libs-ui-range-slider-container{width:100%;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(to right,var(--libs-ui-color-default, #226ff5) 0%,var(--libs-ui-color-default, #226ff5) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) 100%);outline:none;border-radius:4px}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:solid 2px var(--libs-ui-color-default);z-index:3;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 2px #4e4e4e4d;border:solid 2px var(--libs-ui-color-default);z-index:3}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]{background:linear-gradient(to right,#071631 0%,#071631 var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-webkit-slider-thumb{display:none}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-moz-range-thumb{width:0;height:0;border:none}.libs-ui-range-slider-container .libs-ui-range-slider:hover,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true]{background:linear-gradient(to right,var(--libs-ui-color-light-1, #4e8cf7) 0%,var(--libs-ui-color-light-1, #4e8cf7) var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-webkit-slider-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-webkit-slider-thumb{display:block}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-moz-range-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-moz-range-thumb{width:16px;height:16px;border:solid 2px var(--libs-ui-color-default)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true]{pointer-events:none;background:linear-gradient(to right,#cdd0d6 0%,#cdd0d6 var(--libs-ui-slider-value),#e6e7ea var(--libs-ui-slider-value),#e6e7ea 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true].libs-ui-range-slider::-webkit-slider-thumb{border:solid 2px #cdd0d6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
131
|
+
}
|
|
132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsRangeSliderComponent, decorators: [{
|
|
133
|
+
type: Component,
|
|
134
|
+
args: [{ selector: 'libs_ui-components-inputs-range_slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classInclude()\"\n [style.height.px]=\"mode() === 'slider' ? 44 : 22\"\n [class.pt-[4px]]=\"mode() === 'slider'\"\n #containerEl>\n <div\n [class.hidden]=\"!focus()\"\n class=\"libs-ui-range-slider-icon-active\"></div>\n <input\n #rangeEl\n class=\"libs-ui-range-slider\"\n [attr.mode]=\"mode()\"\n [attr.focus]=\"focus()\"\n [attr.disable]=\"disable()\"\n [value]=\"value()\"\n [type]=\"'range'\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\" />\n @if (mode() === 'slider') {\n <div class=\"flex justify-between relative mt-[8px]\">\n <div\n #minValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMin()\">\n {{ min() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n <div\n #valueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] absolute bottom-0 flex\"\n [style.left.px]=\"position()\">\n @if (!hideProgressingValue()) {\n {{ value() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n }\n </div>\n <div\n #maxValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMax()\">\n {{ maxComputed() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".libs-ui-range-slider-container{width:100%;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(to right,var(--libs-ui-color-default, #226ff5) 0%,var(--libs-ui-color-default, #226ff5) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) var(--libs-ui-slider-value),var(--libs-ui-color-light-3, #e9f1fe) 100%);outline:none;border-radius:4px}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:solid 2px var(--libs-ui-color-default);z-index:3;position:relative}.libs-ui-range-slider-container .libs-ui-range-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 2px #4e4e4e4d;border:solid 2px var(--libs-ui-color-default);z-index:3}.libs-ui-range-slider-container .libs-ui-range-slider::-moz-range-thumb:hover{box-shadow:0 0 0 8px var(--libs-ui-slider-border-box-shadow, rgba(78, 140, 247, .1882352941))}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]{background:linear-gradient(to right,#071631 0%,#071631 var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-webkit-slider-thumb{display:none}.libs-ui-range-slider-container .libs-ui-range-slider[mode=media]::-moz-range-thumb{width:0;height:0;border:none}.libs-ui-range-slider-container .libs-ui-range-slider:hover,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true]{background:linear-gradient(to right,var(--libs-ui-color-light-1, #4e8cf7) 0%,var(--libs-ui-color-light-1, #4e8cf7) var(--libs-ui-slider-value),#cdd0d6 var(--libs-ui-slider-value),#cdd0d6 100%)}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-webkit-slider-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-webkit-slider-thumb{display:block}.libs-ui-range-slider-container .libs-ui-range-slider:hover[mode=media]::-moz-range-thumb,.libs-ui-range-slider-container .libs-ui-range-slider[focus=true][mode=media]::-moz-range-thumb{width:16px;height:16px;border:solid 2px var(--libs-ui-color-default)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true]{pointer-events:none;background:linear-gradient(to right,#cdd0d6 0%,#cdd0d6 var(--libs-ui-slider-value),#e6e7ea var(--libs-ui-slider-value),#e6e7ea 100%)}.libs-ui-range-slider-container .libs-ui-range-slider[disable=true].libs-ui-range-slider::-webkit-slider-thumb{border:solid 2px #cdd0d6}\n"] }]
|
|
135
|
+
}], ctorParameters: () => [] });
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Generated bundle index. Do not edit.
|
|
139
|
+
*/
|
|
140
|
+
|
|
141
|
+
export { LibsUiComponentsInputsRangeSliderComponent };
|
|
142
|
+
//# sourceMappingURL=libs-ui-components-inputs-range-slider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"libs-ui-components-inputs-range-slider.mjs","sources":["../../../../../../libs-ui/components/inputs/range-slider/src/inputs-range-slider.component.ts","../../../../../../libs-ui/components/inputs/range-slider/src/inputs-range-slider.component.html","../../../../../../libs-ui/components/inputs/range-slider/src/libs-ui-components-inputs-range-slider.ts"],"sourcesContent":["import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, computed, effect, input, model, output, signal, untracked, viewChild } from '@angular/core';\nimport { IEvent } from '@libs-ui/interfaces-types';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { Observable, Subject, fromEvent } from 'rxjs';\nimport { debounceTime, mergeMap, skip, take, takeUntil, tap } from 'rxjs/operators';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-inputs-range_slider',\n templateUrl: 'inputs-range-slider.component.html',\n styleUrl: 'inputs-range-slider.component.scss',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsInputsRangeSliderComponent implements AfterViewInit, OnDestroy {\n // #region PROPERTY\n protected visibilityMin = signal<boolean>(true);\n protected visibilityMax = signal<boolean>(true);\n protected position = signal<number>(0);\n protected focus = signal<boolean>(false);\n protected maxDisplay = computed(this.maxComputed.bind(this));\n\n private onChange = new Subject<number>();\n private onDestroy = new Subject<void>();\n\n // #region INPUT\n readonly mode = input<'audio' | 'slider'>('slider');\n readonly min = input<number>(1);\n readonly max = input<number>(100);\n readonly value = model<number>(0);\n readonly classInclude = input<string, string | undefined>('libs-ui-range-slider-container', { transform: (value) => (value ? `libs-ui-range-slider-container ${value}` : 'libs-ui-range-slider-container') });\n readonly disable = input<boolean>(false);\n readonly unit = input<string>();\n readonly step = input<number>(0);\n readonly hideProgressingValue = input<boolean>();\n readonly formatNumber = input<boolean>();\n\n // #region OUTPUT\n readonly outChange = output<number>();\n\n /* VIEW CHILD */\n private readonly containerEl = viewChild<ElementRef>('containerEl');\n private readonly rangeEl = viewChild<ElementRef>('rangeEl');\n private readonly valueEl = viewChild<ElementRef>('valueEl');\n private readonly maxValueEl = viewChild<ElementRef>('maxValueEl');\n private readonly minValueEl = viewChild<ElementRef>('minValueEl');\n\n constructor() {\n effect(() => {\n this.onChange.next(this.value());\n untracked(() => {\n this.setVariableCss();\n this.calculatePosition();\n });\n });\n }\n\n /* FUNCTIONS */\n ngAfterViewInit(): void {\n this.initEvent(window as unknown as HTMLElement, 'mouseup').pipe(tap(() => this.focus.set(false)));\n this.initEvent(this.rangeEl()?.nativeElement, 'mousedown').pipe(tap(() => this.focus.set(true)));\n // const elementMouseUp = this.initEvent(this.rangeEl()?.nativeElement, 'click').pipe(take(1));\n // const elementMouseMove = this.initEvent(this.rangeEl()?.nativeElement, 'mousemove').pipe(takeUntil(windowMouseUp));\n // const drag = elementMouseDown.pipe(mergeMap(() => elementMouseMove));\n // const click = elementMouseDown.pipe(mergeMap(() => elementMouseUp));\n\n // drag.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n // click.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n const inputChange = this.initEvent(this.rangeEl()?.nativeElement, 'input');\n\n inputChange.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n this.onChange.pipe(skip(this.mode() === 'audio' ? 1 : 0), debounceTime(250), takeUntil(this.onDestroy)).subscribe((value: number) => this.outChange.emit(value));\n this.calculatePosition();\n }\n\n private initEvent(element: HTMLElement, name: string): Observable<IEvent> {\n return fromEvent<IEvent>(element, name).pipe(\n tap((e: IEvent) => e.stopPropagation()),\n takeUntil(this.onDestroy)\n );\n }\n\n private async handlerChange(event: IEvent) {\n if (this.disable()) {\n event.preventDefault();\n event.stopPropagation();\n event.target.value = this.value();\n\n return;\n }\n this.value.set(+event.target.value);\n this.onChange.next(this.value());\n }\n\n private async calculatePosition() {\n if (!this.containerEl() || !this.valueEl()) {\n return;\n }\n const sliderContainer = this.containerEl()?.nativeElement.getBoundingClientRect();\n const progressing = this.max() ? (this.value() - this.min()) / (this.max() - this.min()) : 0;\n\n if (this.hideProgressingValue()) {\n return;\n }\n const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();\n const rectMax = this.containerEl()?.nativeElement.getBoundingClientRect();\n\n this.position.set(sliderContainer.width * progressing - rectValue.width / 2 + ((progressing < 0.5 ? 1 : 0.5) - progressing) * 8);\n const grandWidthValue = this.position() + rectValue.width - rectMax.width;\n\n if (grandWidthValue > 0) {\n this.position.update((value) => value - grandWidthValue);\n }\n setTimeout(() => {\n this.setVisibility();\n });\n }\n\n private async setVisibility() {\n const rectMax = this.maxValueEl()?.nativeElement.getBoundingClientRect();\n const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();\n const rectMin = this.minValueEl()?.nativeElement.getBoundingClientRect();\n\n this.visibilityMin.set(true);\n this.visibilityMax.set(true);\n if (!this.value()) {\n this.visibilityMin.set(false);\n\n return;\n }\n if (rectValue.left + rectValue.width >= rectMax.left) {\n this.visibilityMax.set(false);\n }\n if (rectValue.left <= rectMin.width + rectMin.left) {\n this.visibilityMin.set(false);\n }\n }\n\n private async setVariableCss() {\n const element = this.containerEl()?.nativeElement;\n\n if (!element) {\n return;\n }\n const colorHover = getComputedStyle(element).getPropertyValue('--libs-ui-color-light-1');\n\n element.style.setProperty('--libs-ui-slider-border-box-shadow', `${colorHover}30`);\n const percent = (100 * (this.value() - this.min())) / (this.max() - this.min());\n element.style.setProperty('--libs-ui-slider-value', `${percent}%`);\n }\n\n protected maxComputed() {\n if (this.formatNumber()) {\n return viewDataNumberByLanguage(this.max(), true, 1, false, true);\n }\n\n return this.max();\n }\n\n ngOnDestroy(): void {\n this.onDestroy.next();\n this.onDestroy.complete();\n }\n}\n","<div\n [class]=\"classInclude()\"\n [style.height.px]=\"mode() === 'slider' ? 44 : 22\"\n [class.pt-[4px]]=\"mode() === 'slider'\"\n #containerEl>\n <div\n [class.hidden]=\"!focus()\"\n class=\"libs-ui-range-slider-icon-active\"></div>\n <input\n #rangeEl\n class=\"libs-ui-range-slider\"\n [attr.mode]=\"mode()\"\n [attr.focus]=\"focus()\"\n [attr.disable]=\"disable()\"\n [value]=\"value()\"\n [type]=\"'range'\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\" />\n @if (mode() === 'slider') {\n <div class=\"flex justify-between relative mt-[8px]\">\n <div\n #minValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMin()\">\n {{ min() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n <div\n #valueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] absolute bottom-0 flex\"\n [style.left.px]=\"position()\">\n @if (!hideProgressingValue()) {\n {{ value() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n }\n </div>\n <div\n #maxValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMax()\">\n {{ maxComputed() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAca,0CAA0C,CAAA;;AAE3C,IAAA,aAAa,GAAG,MAAM,CAAU,IAAI,CAAC;AACrC,IAAA,aAAa,GAAG,MAAM,CAAU,IAAI,CAAC;AACrC,IAAA,QAAQ,GAAG,MAAM,CAAS,CAAC,CAAC;AAC5B,IAAA,KAAK,GAAG,MAAM,CAAU,KAAK,CAAC;AAC9B,IAAA,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,IAAA,QAAQ,GAAG,IAAI,OAAO,EAAU;AAChC,IAAA,SAAS,GAAG,IAAI,OAAO,EAAQ;;AAG9B,IAAA,IAAI,GAAG,KAAK,CAAqB,QAAQ,CAAC;AAC1C,IAAA,GAAG,GAAG,KAAK,CAAS,CAAC,CAAC;AACtB,IAAA,GAAG,GAAG,KAAK,CAAS,GAAG,CAAC;AACxB,IAAA,KAAK,GAAG,KAAK,CAAS,CAAC,CAAC;AACxB,IAAA,YAAY,GAAG,KAAK,CAA6B,gCAAgC,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,GAAG,CAAA,+BAAA,EAAkC,KAAK,CAAA,CAAE,GAAG,gCAAgC,CAAC,EAAE,CAAC;AACpM,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,CAAC;IAC/B,IAAI,GAAG,KAAK,EAAU;AACtB,IAAA,IAAI,GAAG,KAAK,CAAS,CAAC,CAAC;IACvB,oBAAoB,GAAG,KAAK,EAAW;IACvC,YAAY,GAAG,KAAK,EAAW;;IAG/B,SAAS,GAAG,MAAM,EAAU;;AAGpB,IAAA,WAAW,GAAG,SAAS,CAAa,aAAa,CAAC;AAClD,IAAA,OAAO,GAAG,SAAS,CAAa,SAAS,CAAC;AAC1C,IAAA,OAAO,GAAG,SAAS,CAAa,SAAS,CAAC;AAC1C,IAAA,UAAU,GAAG,SAAS,CAAa,YAAY,CAAC;AAChD,IAAA,UAAU,GAAG,SAAS,CAAa,YAAY,CAAC;AAEjE,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChC,SAAS,CAAC,MAAK;gBACb,IAAI,CAAC,cAAc,EAAE;gBACrB,IAAI,CAAC,iBAAiB,EAAE;AAC1B,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;;IAGA,eAAe,GAAA;QACb,IAAI,CAAC,SAAS,CAAC,MAAgC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;AAClG,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;;;;;;;AAQhG,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,OAAO,CAAC;QAE1E,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,KAAa,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChK,IAAI,CAAC,iBAAiB,EAAE;IAC1B;IAEQ,SAAS,CAAC,OAAoB,EAAE,IAAY,EAAA;AAClD,QAAA,OAAO,SAAS,CAAS,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,CAC1C,GAAG,CAAC,CAAC,CAAS,KAAK,CAAC,CAAC,eAAe,EAAE,CAAC,EACvC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B;IACH;IAEQ,MAAM,aAAa,CAAC,KAAa,EAAA;AACvC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YAClB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;YACvB,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;YAEjC;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAClC;AAEQ,IAAA,MAAM,iBAAiB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;YAC1C;QACF;QACA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;AACjF,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC;AAE5F,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;YAC/B;QACF;QACA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;QACvE,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;AAEzE,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,WAAW,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,WAAW,IAAI,CAAC,CAAC;AAChI,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,SAAS,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK;AAEzE,QAAA,IAAI,eAAe,GAAG,CAAC,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,GAAG,eAAe,CAAC;QAC1D;QACA,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CAAC;IACJ;AAEQ,IAAA,MAAM,aAAa,GAAA;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;QACxE,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;QACvE,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;AAExE,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;AACjB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;YAE7B;QACF;AACA,QAAA,IAAI,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,EAAE;AACpD,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B;AACA,QAAA,IAAI,SAAS,CAAC,IAAI,IAAI,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,EAAE;AAClD,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B;IACF;AAEQ,IAAA,MAAM,cAAc,GAAA;QAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,aAAa;QAEjD,IAAI,CAAC,OAAO,EAAE;YACZ;QACF;QACA,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,yBAAyB,CAAC;QAExF,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,oCAAoC,EAAE,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI,CAAC;AAClF,QAAA,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC/E,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,CAAG,CAAC;IACpE;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;AACvB,YAAA,OAAO,wBAAwB,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC;QACnE;AAEA,QAAA,OAAO,IAAI,CAAC,GAAG,EAAE;IACnB;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;IAC3B;wGApJW,0CAA0C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1C,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0CAA0C,67DCdvD,qiDAqDA,EAAA,MAAA,EAAA,CAAA,0yFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDvCa,0CAA0C,EAAA,UAAA,EAAA,CAAA;kBARtD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wCAAwC,EAAA,UAAA,EAGtC,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qiDAAA,EAAA,MAAA,EAAA,CAAA,0yFAAA,CAAA,EAAA;;;AEZjD;;AAEG;;;;"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './inputs-range-slider.component';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { AfterViewInit, OnDestroy } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class LibsUiComponentsInputsRangeSliderComponent implements AfterViewInit, OnDestroy {
|
|
4
|
+
protected visibilityMin: import("@angular/core").WritableSignal<boolean>;
|
|
5
|
+
protected visibilityMax: import("@angular/core").WritableSignal<boolean>;
|
|
6
|
+
protected position: import("@angular/core").WritableSignal<number>;
|
|
7
|
+
protected focus: import("@angular/core").WritableSignal<boolean>;
|
|
8
|
+
protected maxDisplay: import("@angular/core").Signal<any>;
|
|
9
|
+
private onChange;
|
|
10
|
+
private onDestroy;
|
|
11
|
+
readonly mode: import("@angular/core").InputSignal<"audio" | "slider">;
|
|
12
|
+
readonly min: import("@angular/core").InputSignal<number>;
|
|
13
|
+
readonly max: import("@angular/core").InputSignal<number>;
|
|
14
|
+
readonly value: import("@angular/core").ModelSignal<number>;
|
|
15
|
+
readonly classInclude: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
|
|
16
|
+
readonly disable: import("@angular/core").InputSignal<boolean>;
|
|
17
|
+
readonly unit: import("@angular/core").InputSignal<string | undefined>;
|
|
18
|
+
readonly step: import("@angular/core").InputSignal<number>;
|
|
19
|
+
readonly hideProgressingValue: import("@angular/core").InputSignal<boolean | undefined>;
|
|
20
|
+
readonly formatNumber: import("@angular/core").InputSignal<boolean | undefined>;
|
|
21
|
+
readonly outChange: import("@angular/core").OutputEmitterRef<number>;
|
|
22
|
+
private readonly containerEl;
|
|
23
|
+
private readonly rangeEl;
|
|
24
|
+
private readonly valueEl;
|
|
25
|
+
private readonly maxValueEl;
|
|
26
|
+
private readonly minValueEl;
|
|
27
|
+
constructor();
|
|
28
|
+
ngAfterViewInit(): void;
|
|
29
|
+
private initEvent;
|
|
30
|
+
private handlerChange;
|
|
31
|
+
private calculatePosition;
|
|
32
|
+
private setVisibility;
|
|
33
|
+
private setVariableCss;
|
|
34
|
+
protected maxComputed(): any;
|
|
35
|
+
ngOnDestroy(): void;
|
|
36
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsInputsRangeSliderComponent, never>;
|
|
37
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsRangeSliderComponent, "libs_ui-components-inputs-range_slider", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "classInclude": { "alias": "classInclude"; "required": false; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "hideProgressingValue": { "alias": "hideProgressingValue"; "required": false; "isSignal": true; }; "formatNumber": { "alias": "formatNumber"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "outChange": "outChange"; }, never, never, true, never>;
|
|
38
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@libs-ui/components-inputs-range-slider",
|
|
3
|
+
"version": "0.1.1-1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/core": ">=18.0.0",
|
|
6
|
+
"@libs-ui/interfaces-types": "0.1.1-1",
|
|
7
|
+
"@libs-ui/utils": "0.1.1-1",
|
|
8
|
+
"rxjs": "~7.8.0"
|
|
9
|
+
},
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"module": "fesm2022/libs-ui-components-inputs-range-slider.mjs",
|
|
12
|
+
"typings": "index.d.ts",
|
|
13
|
+
"exports": {
|
|
14
|
+
"./package.json": {
|
|
15
|
+
"default": "./package.json"
|
|
16
|
+
},
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./index.d.ts",
|
|
19
|
+
"esm2022": "./esm2022/libs-ui-components-inputs-range-slider.mjs",
|
|
20
|
+
"esm": "./esm2022/libs-ui-components-inputs-range-slider.mjs",
|
|
21
|
+
"default": "./fesm2022/libs-ui-components-inputs-range-slider.mjs"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"tslib": "^2.3.0"
|
|
26
|
+
}
|
|
27
|
+
}
|