@nuralyui/slider-input 0.0.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/demo/slider-input-demo.d.ts +21 -0
- package/demo/slider-input-demo.d.ts.map +1 -0
- package/demo/slider-input-demo.js +219 -0
- package/demo/slider-input-demo.js.map +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -0
- package/index.js +2 -0
- package/index.js.map +1 -0
- package/package.json +15 -0
- package/slider-input.component.d.ts +27 -0
- package/slider-input.component.d.ts.map +1 -0
- package/slider-input.component.js +139 -0
- package/slider-input.component.js.map +1 -0
- package/slider-input.style.d.ts +3 -0
- package/slider-input.style.d.ts.map +1 -0
- package/slider-input.style.js +77 -0
- package/slider-input.style.js.map +1 -0
- package/utils.d.ts +2 -0
- package/utils.d.ts.map +1 -0
- package/utils.js +8 -0
- package/utils.js.map +1 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class SliderInputDemi extends LitElement {
|
|
3
|
+
static styles: import("lit").CSSResult[];
|
|
4
|
+
_sliderChangeViaTextboxValue: number;
|
|
5
|
+
_sliderDisabled: boolean;
|
|
6
|
+
_sliderMinMaxNotMultipleOfStepValue: number;
|
|
7
|
+
_sliderWithChangeHandlerValue: number;
|
|
8
|
+
min: number;
|
|
9
|
+
max: number;
|
|
10
|
+
/**
|
|
11
|
+
* Sets the slider's disabled prop.
|
|
12
|
+
*/
|
|
13
|
+
_toggleDisabled(): void;
|
|
14
|
+
/**
|
|
15
|
+
* Updates the slider prop's value.
|
|
16
|
+
* @param {EventObject} e The event object.
|
|
17
|
+
*/
|
|
18
|
+
_updateValue(e: any): void;
|
|
19
|
+
render(): import("lit").TemplateResult<1>;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=slider-input-demo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider-input-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/slider-input/demo/slider-input-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBACa,eAAgB,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA6DpB;IAC4B,4BAA4B,SAAM;IACrC,eAAe,UAAS;IACzB,mCAAmC,SAAS;IAC5C,6BAA6B,SAAK;IAClC,GAAG,SAAK;IACR,GAAG,SAAK;IAGpC;;OAEG;IACH,eAAe;IAIf;;;OAGG;IACF,YAAY,CAAC,CAAC,EAAE,GAAG;IAWT,MAAM;CAgGlB"}
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html, css } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
let SliderInputDemi = class SliderInputDemi extends LitElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this._sliderChangeViaTextboxValue = 15;
|
|
13
|
+
this._sliderDisabled = false;
|
|
14
|
+
this._sliderMinMaxNotMultipleOfStepValue = 45678;
|
|
15
|
+
this._sliderWithChangeHandlerValue = 0;
|
|
16
|
+
this.min = 0;
|
|
17
|
+
this.max = 0;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Sets the slider's disabled prop.
|
|
21
|
+
*/
|
|
22
|
+
_toggleDisabled() {
|
|
23
|
+
this._sliderDisabled = !this._sliderDisabled;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Updates the slider prop's value.
|
|
27
|
+
* @param {EventObject} e The event object.
|
|
28
|
+
*/
|
|
29
|
+
_updateValue(e) {
|
|
30
|
+
const [element] = e.composedPath();
|
|
31
|
+
const { format, prop } = element.dataset;
|
|
32
|
+
const propToUpdate = `_${(prop)}Value`;
|
|
33
|
+
const value = format
|
|
34
|
+
? (element.value, JSON.parse(format))
|
|
35
|
+
: element.value;
|
|
36
|
+
this[propToUpdate] = value;
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
return html `
|
|
40
|
+
<fieldset>
|
|
41
|
+
<legend>Default</legend>
|
|
42
|
+
<hy-slider-input
|
|
43
|
+
id="slider-default"
|
|
44
|
+
.min=${0}
|
|
45
|
+
.max=${100}
|
|
46
|
+
.value=${20}
|
|
47
|
+
></hy-slider-input>
|
|
48
|
+
</fieldset>
|
|
49
|
+
<fieldset>
|
|
50
|
+
<legend>With Change Handler</legend>
|
|
51
|
+
<hy-slider-input
|
|
52
|
+
id="slider-with-change-handler"
|
|
53
|
+
data-prop="slider-with-change-handler"
|
|
54
|
+
data-format=${JSON.stringify({
|
|
55
|
+
options: {
|
|
56
|
+
style: 'currency',
|
|
57
|
+
currency: 'USD',
|
|
58
|
+
},
|
|
59
|
+
})}
|
|
60
|
+
.min=${0}
|
|
61
|
+
.max=${1000000}
|
|
62
|
+
.step=${100000}
|
|
63
|
+
.value=${400000}
|
|
64
|
+
@change=${this._updateValue}
|
|
65
|
+
></hy-slider-input>
|
|
66
|
+
<p class="slider-value">${this._sliderWithChangeHandlerValue}</p>
|
|
67
|
+
</fieldset>
|
|
68
|
+
<fieldset>
|
|
69
|
+
<legend>Custom Styles</legend>
|
|
70
|
+
<hy-slider-input
|
|
71
|
+
id="slider-custom-styles"
|
|
72
|
+
.min=${0}
|
|
73
|
+
.max=${100}
|
|
74
|
+
.value=${50}
|
|
75
|
+
></hy-slider-input>
|
|
76
|
+
</fieldset>
|
|
77
|
+
<fieldset id="toggle-disabled">
|
|
78
|
+
<legend>Toggle Disabled Status</legend>
|
|
79
|
+
<label for="chk-toggle-disabled">
|
|
80
|
+
<input
|
|
81
|
+
id="chk-toggle-disabled"
|
|
82
|
+
type="checkbox"
|
|
83
|
+
.checked=${this._sliderDisabled}
|
|
84
|
+
@input=${this._toggleDisabled}
|
|
85
|
+
/>
|
|
86
|
+
Disable Slider
|
|
87
|
+
</label>
|
|
88
|
+
<hy-slider-input
|
|
89
|
+
id="slider-toggle-disabled"
|
|
90
|
+
.disabled=${this._sliderDisabled}
|
|
91
|
+
.min=${0}
|
|
92
|
+
.max=${100}
|
|
93
|
+
.value=${75}
|
|
94
|
+
></hy-slider-input>
|
|
95
|
+
</fieldset>
|
|
96
|
+
<fieldset id="change-via-textbox">
|
|
97
|
+
<legend>Change via Textbox</legend>
|
|
98
|
+
<input
|
|
99
|
+
id="txt-change-via-textbox"
|
|
100
|
+
data-prop="slider-change-via-textbox"
|
|
101
|
+
max="100"
|
|
102
|
+
min="0"
|
|
103
|
+
type="number"
|
|
104
|
+
.value=${this._sliderChangeViaTextboxValue}
|
|
105
|
+
@input=${this._updateValue}
|
|
106
|
+
/>
|
|
107
|
+
<hy-slider-input
|
|
108
|
+
id="slider-change-via-textbox"
|
|
109
|
+
data-prop="slider-change-via-textbox"
|
|
110
|
+
.min=${0}
|
|
111
|
+
.max=${100}
|
|
112
|
+
.value=${this._sliderChangeViaTextboxValue}
|
|
113
|
+
@change=${this._updateValue}
|
|
114
|
+
></hy-slider-input>
|
|
115
|
+
</fieldset>
|
|
116
|
+
<fieldset id="not-multiple-of-step">
|
|
117
|
+
<legend>Not Multiple of Step</legend>
|
|
118
|
+
<p>${(this._sliderMinMaxNotMultipleOfStepValue)}</p>
|
|
119
|
+
<hy-slider-input
|
|
120
|
+
id="slider-min-max-not-multiple-of-step"
|
|
121
|
+
data-prop="slider-min-max-not-multiple-of-step"
|
|
122
|
+
.min=${this.min}
|
|
123
|
+
.max=${this.max}
|
|
124
|
+
.step=${10000}
|
|
125
|
+
.value=${this._sliderMinMaxNotMultipleOfStepValue}
|
|
126
|
+
@change=${this._updateValue}
|
|
127
|
+
></hy-slider-input>
|
|
128
|
+
<div class="slider-limits">
|
|
129
|
+
<span>${(this.min)}</span>
|
|
130
|
+
<span>${(this.max)}</span>
|
|
131
|
+
</div>
|
|
132
|
+
</fieldset>;`;
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
SliderInputDemi.styles = [
|
|
136
|
+
css `
|
|
137
|
+
:host {
|
|
138
|
+
--hy-slider-width: 129px;
|
|
139
|
+
|
|
140
|
+
font: normal 14px/1.4 Helvetica, Arial, sans-serif;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
fieldset {
|
|
144
|
+
border: 0;
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
margin: 10px 0;
|
|
148
|
+
padding: 10px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
legend {
|
|
152
|
+
font-size: 20px;
|
|
153
|
+
font-weight: 600;
|
|
154
|
+
padding: 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
range-slider {
|
|
158
|
+
width: var(--hy-slider-width);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
#slider-custom-styles {
|
|
162
|
+
--hy-slider-height: 15px;
|
|
163
|
+
--hy-slider-background: orange;
|
|
164
|
+
--hy-slider-value-color: green;
|
|
165
|
+
--hy-slider-thumb-color: pink;
|
|
166
|
+
--hy-slider-thumb-diameter: 30px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
label {
|
|
170
|
+
align-items: center;
|
|
171
|
+
display: flex;
|
|
172
|
+
margin: 0 0 10px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
p {
|
|
176
|
+
margin: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
#chk-toggle-disabled {
|
|
180
|
+
margin: 0 10px 0 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
#txt-change-via-textbox,
|
|
184
|
+
#slider-change-via-textbox,
|
|
185
|
+
#slider-toggle-disabled {
|
|
186
|
+
margin: 0 0 20px;
|
|
187
|
+
width: var(--hy-slider-width);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.slider-limits {
|
|
191
|
+
display: flex;
|
|
192
|
+
justify-content: space-between;
|
|
193
|
+
width: var(--hy-slider-width);
|
|
194
|
+
}
|
|
195
|
+
`
|
|
196
|
+
];
|
|
197
|
+
__decorate([
|
|
198
|
+
property({ type: Number })
|
|
199
|
+
], SliderInputDemi.prototype, "_sliderChangeViaTextboxValue", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: Boolean })
|
|
202
|
+
], SliderInputDemi.prototype, "_sliderDisabled", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: Number })
|
|
205
|
+
], SliderInputDemi.prototype, "_sliderMinMaxNotMultipleOfStepValue", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property({ type: Number })
|
|
208
|
+
], SliderInputDemi.prototype, "_sliderWithChangeHandlerValue", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property({ type: Number })
|
|
211
|
+
], SliderInputDemi.prototype, "min", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property({ type: Number })
|
|
214
|
+
], SliderInputDemi.prototype, "max", void 0);
|
|
215
|
+
SliderInputDemi = __decorate([
|
|
216
|
+
customElement('hy-slider-input-demo')
|
|
217
|
+
], SliderInputDemi);
|
|
218
|
+
export { SliderInputDemi };
|
|
219
|
+
//# sourceMappingURL=slider-input-demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider-input-demo.js","sourceRoot":"","sources":["../../../../src/components/slider-input/demo/slider-input-demo.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n@customElement('hy-slider-input-demo')\nexport class SliderInputDemi extends LitElement {\n static override styles = [\n css`\n :host {\n --hy-slider-width: 129px;\n\n font: normal 14px/1.4 Helvetica, Arial, sans-serif;\n }\n\n fieldset {\n border: 0;\n display: flex;\n flex-direction: column;\n margin: 10px 0;\n padding: 10px;\n }\n\n legend {\n font-size: 20px;\n font-weight: 600;\n padding: 0;\n }\n\n range-slider {\n width: var(--hy-slider-width);\n }\n\n #slider-custom-styles {\n --hy-slider-height: 15px;\n --hy-slider-background: orange;\n --hy-slider-value-color: green;\n --hy-slider-thumb-color: pink;\n --hy-slider-thumb-diameter: 30px;\n }\n\n label {\n align-items: center;\n display: flex;\n margin: 0 0 10px;\n }\n\n p {\n margin: 0;\n }\n\n #chk-toggle-disabled {\n margin: 0 10px 0 0;\n }\n\n #txt-change-via-textbox,\n #slider-change-via-textbox,\n #slider-toggle-disabled {\n margin: 0 0 20px;\n width: var(--hy-slider-width);\n }\n\n .slider-limits {\n display: flex;\n justify-content: space-between;\n width: var(--hy-slider-width);\n }\n `\n ];\n @property({ type: Number }) _sliderChangeViaTextboxValue = 15;\n @property({ type: Boolean }) _sliderDisabled = false;\n @property({ type: Number }) _sliderMinMaxNotMultipleOfStepValue = 45678;\n @property({ type: Number }) _sliderWithChangeHandlerValue = 0;\n @property({ type: Number }) min = 0;\n @property({ type: Number }) max = 0;\n\n\n /**\n * Sets the slider's disabled prop.\n */\n _toggleDisabled() {\n this._sliderDisabled = !this._sliderDisabled;\n }\n\n /**\n * Updates the slider prop's value.\n * @param {EventObject} e The event object.\n */\n _updateValue(e :any) {\n const [element] = e.composedPath();\n const { format, prop } = element.dataset;\n const propToUpdate = `_${(prop)}Value`;\n const value = format\n ? (element.value, JSON.parse(format))\n : element.value;\n\n (this as any)[propToUpdate] = value;\n }\n\n override render() {\n return html`\n <fieldset>\n <legend>Default</legend>\n <hy-slider-input\n id=\"slider-default\"\n .min=${0}\n .max=${100}\n .value=${20}\n ></hy-slider-input>\n </fieldset>\n <fieldset>\n <legend>With Change Handler</legend>\n <hy-slider-input\n id=\"slider-with-change-handler\"\n data-prop=\"slider-with-change-handler\"\n data-format=${JSON.stringify({\n options: {\n style: 'currency',\n currency: 'USD',\n },\n })}\n .min=${0}\n .max=${1000000}\n .step=${100000}\n .value=${400000}\n @change=${this._updateValue}\n ></hy-slider-input>\n <p class=\"slider-value\">${this._sliderWithChangeHandlerValue}</p>\n </fieldset>\n <fieldset>\n <legend>Custom Styles</legend>\n <hy-slider-input\n id=\"slider-custom-styles\"\n .min=${0}\n .max=${100}\n .value=${50}\n ></hy-slider-input>\n </fieldset>\n <fieldset id=\"toggle-disabled\">\n <legend>Toggle Disabled Status</legend>\n <label for=\"chk-toggle-disabled\">\n <input\n id=\"chk-toggle-disabled\"\n type=\"checkbox\"\n .checked=${this._sliderDisabled}\n @input=${this._toggleDisabled}\n />\n Disable Slider\n </label>\n <hy-slider-input\n id=\"slider-toggle-disabled\"\n .disabled=${this._sliderDisabled}\n .min=${0}\n .max=${100}\n .value=${75}\n ></hy-slider-input>\n </fieldset>\n <fieldset id=\"change-via-textbox\">\n <legend>Change via Textbox</legend>\n <input\n id=\"txt-change-via-textbox\"\n data-prop=\"slider-change-via-textbox\"\n max=\"100\"\n min=\"0\"\n type=\"number\"\n .value=${this._sliderChangeViaTextboxValue}\n @input=${this._updateValue}\n />\n <hy-slider-input\n id=\"slider-change-via-textbox\"\n data-prop=\"slider-change-via-textbox\"\n .min=${0}\n .max=${100}\n .value=${this._sliderChangeViaTextboxValue}\n @change=${this._updateValue}\n ></hy-slider-input>\n </fieldset>\n <fieldset id=\"not-multiple-of-step\">\n <legend>Not Multiple of Step</legend>\n <p>${(this._sliderMinMaxNotMultipleOfStepValue)}</p>\n <hy-slider-input\n id=\"slider-min-max-not-multiple-of-step\"\n data-prop=\"slider-min-max-not-multiple-of-step\"\n .min=${this.min}\n .max=${this.max}\n .step=${10000}\n .value=${this._sliderMinMaxNotMultipleOfStepValue}\n @change=${this._updateValue}\n ></hy-slider-input>\n <div class=\"slider-limits\">\n <span>${(this.min)}</span>\n <span>${(this.max)}</span>\n </div>\n </fieldset>;`\n }\n}\n"]}
|
package/index.d.ts
ADDED
package/index.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA"}
|
package/index.js
ADDED
package/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/slider-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA","sourcesContent":["export * from './slider-input.component.js'"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nuralyui/slider-input",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"dependencies": {
|
|
8
|
+
"dayjs": "^1.11.7"
|
|
9
|
+
},
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
|
+
},
|
|
13
|
+
"author": "Labidi Aymen",
|
|
14
|
+
"license": "ISC"
|
|
15
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { LitElement, PropertyValueMap } from 'lit';
|
|
2
|
+
export declare class SliderInput extends LitElement {
|
|
3
|
+
disabled: boolean;
|
|
4
|
+
max: number;
|
|
5
|
+
min: number;
|
|
6
|
+
step: number;
|
|
7
|
+
value: number;
|
|
8
|
+
_actualMin: number;
|
|
9
|
+
_actualMax: number;
|
|
10
|
+
_input: HTMLInputElement | null;
|
|
11
|
+
_slider: HTMLInputElement | null;
|
|
12
|
+
_thumb: HTMLInputElement | null;
|
|
13
|
+
static styles: import("lit").CSSResult;
|
|
14
|
+
firstUpdated(): Promise<void>;
|
|
15
|
+
render(): import("lit").TemplateResult<1>;
|
|
16
|
+
updated(changedProps: PropertyValueMap<any>): void;
|
|
17
|
+
/**
|
|
18
|
+
* Sets the slider value.
|
|
19
|
+
*/
|
|
20
|
+
_changeHandler(): void;
|
|
21
|
+
/**
|
|
22
|
+
* Updates the slider's value width and thumb position (UI).
|
|
23
|
+
* @event change
|
|
24
|
+
*/
|
|
25
|
+
_updateSlider: (this: any, ...args: any[]) => void;
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=slider-input.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider-input.component.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAKzD,qBAAa,WAAY,SAAQ,UAAU;IAG1C,QAAQ,UAAS;IAGjB,GAAG,SAAO;IAGV,GAAG,SAAK;IAGR,IAAI,SAAK;IAGT,KAAK,SAAK;IAGV,UAAU,SAAK;IAGf,UAAU,SAAK;IAIf,MAAM,EAAG,gBAAgB,GAAG,IAAI,CAAC;IAEjC,OAAO,EAAI,gBAAgB,GAAG,IAAI,CAAC;IAEnC,MAAM,EAAI,gBAAgB,GAAG,IAAI,CAAC;IAElC,OAAgB,MAAM,0BAAU;IAGjB,YAAY;IAmBlB,MAAM;IAmBN,OAAO,CAAC,YAAY,EAAE,gBAAgB,CAAC,GAAG,CAAC;IAMpD;;OAEG;IACH,cAAc;IASd;;;OAGG;IACH,aAAa,sCAoBX;CACF"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
8
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
9
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
10
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
11
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
12
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
13
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
import { LitElement, html } from 'lit';
|
|
17
|
+
import { property, state } from 'lit/decorators.js';
|
|
18
|
+
import styles from './slider-input.style.js';
|
|
19
|
+
import { debounce } from './utils.js';
|
|
20
|
+
export class SliderInput extends LitElement {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
|
+
this.disabled = false;
|
|
24
|
+
this.max = 100;
|
|
25
|
+
this.min = 0;
|
|
26
|
+
this.step = 1;
|
|
27
|
+
this.value = 0;
|
|
28
|
+
this._actualMin = 0;
|
|
29
|
+
this._actualMax = 0;
|
|
30
|
+
/**
|
|
31
|
+
* Updates the slider's value width and thumb position (UI).
|
|
32
|
+
* @event change
|
|
33
|
+
*/
|
|
34
|
+
this._updateSlider = debounce(() => {
|
|
35
|
+
const min = this.min < this._actualMin ? this._actualMin : this.min;
|
|
36
|
+
const max = this.max > this._actualMax ? this._actualMax : this.max;
|
|
37
|
+
const percentage = (this.value - min) / (max - min);
|
|
38
|
+
const thumbWidth = this._thumb.offsetWidth;
|
|
39
|
+
const sliderWidth = this._slider.offsetWidth;
|
|
40
|
+
const sliderValueWidth = `${percentage * 100}%`;
|
|
41
|
+
const thumbOffset = `${(sliderWidth - thumbWidth) * percentage}px`;
|
|
42
|
+
this.style.setProperty('--hy-slider-value-width', sliderValueWidth);
|
|
43
|
+
this.style.setProperty('--hy-slider-thumb-offset', thumbOffset);
|
|
44
|
+
// Dispatch the change event for range-slider. (For event handlers.)
|
|
45
|
+
this.dispatchEvent(new Event('change'));
|
|
46
|
+
this.dispatchEvent(new CustomEvent('changed', {
|
|
47
|
+
detail: {
|
|
48
|
+
value: Number(this.value)
|
|
49
|
+
}
|
|
50
|
+
}));
|
|
51
|
+
this.requestUpdate();
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
firstUpdated() {
|
|
55
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
56
|
+
this._input = this.shadowRoot.querySelector('input');
|
|
57
|
+
this._slider = this.shadowRoot.querySelector('.range-slider');
|
|
58
|
+
this._thumb = this.shadowRoot.querySelector('.range-thumb');
|
|
59
|
+
this._actualMin = this.min;
|
|
60
|
+
this._actualMax = this.max;
|
|
61
|
+
if (this.step) {
|
|
62
|
+
const minRemainder = this.min % this.step;
|
|
63
|
+
const maxRemainder = this.max % this.step;
|
|
64
|
+
if (minRemainder !== 0) {
|
|
65
|
+
this.min = this.min - minRemainder;
|
|
66
|
+
}
|
|
67
|
+
if (maxRemainder !== 0) {
|
|
68
|
+
this.max = this.max + this.step - maxRemainder;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
render() {
|
|
74
|
+
return html `
|
|
75
|
+
<div class="range-container">
|
|
76
|
+
<div class="range-slider"></div>
|
|
77
|
+
<div class="range-slider-value"></div>
|
|
78
|
+
<div class="range-thumb"></div>
|
|
79
|
+
<input
|
|
80
|
+
max=${this.max}
|
|
81
|
+
min=${this.min}
|
|
82
|
+
step=${this.step}
|
|
83
|
+
type="range"
|
|
84
|
+
value=${this.value}
|
|
85
|
+
?disabled=${this.disabled}
|
|
86
|
+
@input=${this._changeHandler}
|
|
87
|
+
/>
|
|
88
|
+
</div>`;
|
|
89
|
+
}
|
|
90
|
+
updated(changedProps) {
|
|
91
|
+
if (changedProps.has('value')) {
|
|
92
|
+
this._updateSlider();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Sets the slider value.
|
|
97
|
+
*/
|
|
98
|
+
_changeHandler() {
|
|
99
|
+
const { value } = this._input;
|
|
100
|
+
this.value = value > this._actualMax
|
|
101
|
+
? this._actualMax
|
|
102
|
+
: value < this._actualMin
|
|
103
|
+
? this._actualMin
|
|
104
|
+
: value;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
SliderInput.styles = styles;
|
|
108
|
+
__decorate([
|
|
109
|
+
property({ type: Boolean, reflect: true })
|
|
110
|
+
], SliderInput.prototype, "disabled", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
property({ type: Number })
|
|
113
|
+
], SliderInput.prototype, "max", void 0);
|
|
114
|
+
__decorate([
|
|
115
|
+
property({ type: Number })
|
|
116
|
+
], SliderInput.prototype, "min", void 0);
|
|
117
|
+
__decorate([
|
|
118
|
+
property({ type: Number })
|
|
119
|
+
], SliderInput.prototype, "step", void 0);
|
|
120
|
+
__decorate([
|
|
121
|
+
property({ type: Number })
|
|
122
|
+
], SliderInput.prototype, "value", void 0);
|
|
123
|
+
__decorate([
|
|
124
|
+
property({ type: Number })
|
|
125
|
+
], SliderInput.prototype, "_actualMin", void 0);
|
|
126
|
+
__decorate([
|
|
127
|
+
property({ type: Number })
|
|
128
|
+
], SliderInput.prototype, "_actualMax", void 0);
|
|
129
|
+
__decorate([
|
|
130
|
+
state()
|
|
131
|
+
], SliderInput.prototype, "_input", void 0);
|
|
132
|
+
__decorate([
|
|
133
|
+
state()
|
|
134
|
+
], SliderInput.prototype, "_slider", void 0);
|
|
135
|
+
__decorate([
|
|
136
|
+
state()
|
|
137
|
+
], SliderInput.prototype, "_thumb", void 0);
|
|
138
|
+
customElements.define('hy-slider-input', SliderInput);
|
|
139
|
+
//# sourceMappingURL=slider-input.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider-input.component.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValueMap } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './slider-input.style.js';\nimport { debounce } from './utils.js';\n\nexport class SliderInput extends LitElement {\n\t\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\t@property({ type: Number })\n\tmax = 100;\n\n\t@property({ type: Number })\n\tmin = 0;\n\n\t@property({ type: Number })\n\tstep = 1;\n\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t@property({ type: Number })\n\t_actualMin = 0;\n\n\t@property({ type: Number })\n\t_actualMax = 0;\n\n\n\t@state()\n\t_input!: HTMLInputElement | null;\n\t@state()\n\t_slider! : HTMLInputElement | null;\n\t@state()\n\t_thumb! : HTMLInputElement | null;\n\n\tstatic override styles = styles;\n\n\n\toverride async firstUpdated() {\n\t\tthis._input = this.shadowRoot!.querySelector('input');\n\t\tthis._slider = this.shadowRoot!.querySelector('.range-slider');\n\t\tthis._thumb = this.shadowRoot!.querySelector('.range-thumb');\n\t\tthis._actualMin = this.min;\n\t\tthis._actualMax = this.max;\n\n\t\tif (this.step) {\n\t\t\tconst minRemainder = this.min % this.step;\n\t\t\tconst maxRemainder = this.max % this.step;\n\t\t\tif (minRemainder !== 0) {\n\t\t\t\tthis.min = this.min - minRemainder;\n\t\t\t}\n\t\t\tif (maxRemainder !== 0) {\n\t\t\t\tthis.max = this.max + this.step - maxRemainder;\n\t\t\t}\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n <div class=\"range-container\">\n\t <div class=\"range-slider\"></div>\n\t <div class=\"range-slider-value\"></div>\n\t <div class=\"range-thumb\"></div>\n\t <input\n\t max=${this.max}\n\t min=${this.min}\n\t step=${this.step}\n\t type=\"range\"\n\t value=${this.value}\n\t ?disabled=${this.disabled}\n\t @input=${this._changeHandler}\n\t />\n\t </div>`;\n\t}\n\n\n\toverride updated(changedProps: PropertyValueMap<any>) {\n\t\tif (changedProps.has('value')) {\n\t\t\tthis._updateSlider();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the slider value.\n\t */\n\t_changeHandler() {\n\t\tconst { value } : any = this._input;\n\t\tthis.value = value > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: value < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: value;\n\t}\n\n\t/**\n\t * Updates the slider's value width and thumb position (UI).\n\t * @event change\n\t */\n\t_updateSlider= debounce(()=> {\n\t\tconst min = this.min < this._actualMin ? this._actualMin : this.min;\n\t\tconst max = this.max > this._actualMax ? this._actualMax : this.max;\n\t\tconst percentage = (this.value - min) / (max - min);\n\t\tconst thumbWidth = this._thumb!.offsetWidth;\n\t\tconst sliderWidth = this._slider!.offsetWidth;\n\t\tconst sliderValueWidth = `${percentage * 100}%`;\n\t\tconst thumbOffset = `${(sliderWidth - thumbWidth) * percentage}px`;\n\n\t\tthis.style.setProperty('--hy-slider-value-width', sliderValueWidth);\n\t\tthis.style.setProperty('--hy-slider-thumb-offset', thumbOffset);\n\n\t\t// Dispatch the change event for range-slider. (For event handlers.)\n\t\tthis.dispatchEvent(new Event('change'));\n\t\tthis.dispatchEvent(new CustomEvent('changed' , {\n\t\t\tdetail: {\n\t\t\t\tvalue: Number(this.value)\n\t\t\t}\n\t\t}));\n\t\tthis.requestUpdate()\n\t})\n}\ncustomElements.define('hy-slider-input', SliderInput);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider-input.style.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.style.ts"],"names":[],"mappings":";AAEA,wBA0EE"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
export default css `
|
|
3
|
+
:host {
|
|
4
|
+
--hy-slider-background: #7c7c7c;
|
|
5
|
+
--hy-slider-height: 2px;
|
|
6
|
+
--hy-slider-radius: var(--hy-slider-height);
|
|
7
|
+
--hy-slider-value-color: #00ccff;
|
|
8
|
+
--hy-slider-value-width: 0;
|
|
9
|
+
--hy-slider-thumb-color: #e0e0e0;
|
|
10
|
+
--hy-slider-thumb-diameter: 15px;
|
|
11
|
+
--hy-slider-thumb-offset: 0;
|
|
12
|
+
|
|
13
|
+
display: inline-block;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.range-container {
|
|
17
|
+
position: relative;
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.range-slider,
|
|
22
|
+
.range-slider-value {
|
|
23
|
+
border-radius: var(--hy-slider-radius);
|
|
24
|
+
height: var(--hy-slider-height);
|
|
25
|
+
max-height: var(--hy-slider-thumb-diameter);
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: calc((var(--hy-slider-thumb-diameter) - min(var(--hy-slider-height), var(--hy-slider-thumb-diameter))) / 2);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.range-slider {
|
|
31
|
+
background: var(--hy-slider-background);
|
|
32
|
+
width: 100%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.range-slider-value {
|
|
36
|
+
background: var(--hy-slider-value-color);
|
|
37
|
+
width: var(--hy-slider-value-width);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.range-thumb {
|
|
41
|
+
background: var(--hy-slider-thumb-color);
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
height: var(--hy-slider-thumb-diameter);
|
|
44
|
+
position: absolute;
|
|
45
|
+
transform: translateX(var(--hy-slider-thumb-offset));
|
|
46
|
+
width: var(--hy-slider-thumb-diameter);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
input {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
height: var(--hy-slider-thumb-diameter);
|
|
52
|
+
margin: 0;
|
|
53
|
+
opacity: 0;
|
|
54
|
+
position: relative;
|
|
55
|
+
width: 100%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host([disabled]) {
|
|
59
|
+
--hy-slider-background: #d9d9d9;
|
|
60
|
+
--hy-slider-value-color: #a8a8a8;
|
|
61
|
+
--hy-slider-thumb-color: #f0f0f0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@media (prefers-color-scheme: dark) {
|
|
65
|
+
body {
|
|
66
|
+
--hy-slider-background: #767676;
|
|
67
|
+
--hy-slider-height: 2px;
|
|
68
|
+
--hy-slider-radius: var(--hy-slider-height);
|
|
69
|
+
--hy-slider-value-color: #ff6200;
|
|
70
|
+
--hy-slider-value-width: 0;
|
|
71
|
+
--hy-slider-thumb-color: #adadad;
|
|
72
|
+
--hy-slider-thumb-diameter: 15px;
|
|
73
|
+
--hy-slider-thumb-offset: 0;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
77
|
+
//# sourceMappingURL=slider-input.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider-input.style.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n:host {\n --hy-slider-background: #7c7c7c;\n --hy-slider-height: 2px;\n --hy-slider-radius: var(--hy-slider-height);\n --hy-slider-value-color: #00ccff;\n --hy-slider-value-width: 0;\n --hy-slider-thumb-color: #e0e0e0;\n --hy-slider-thumb-diameter: 15px;\n --hy-slider-thumb-offset: 0;\n\n display: inline-block;\n }\n\n .range-container {\n position: relative;\n width: 100%;\n }\n\n .range-slider,\n .range-slider-value {\n border-radius: var(--hy-slider-radius);\n height: var(--hy-slider-height);\n max-height: var(--hy-slider-thumb-diameter);\n position: absolute;\n top: calc((var(--hy-slider-thumb-diameter) - min(var(--hy-slider-height), var(--hy-slider-thumb-diameter))) / 2);\n }\n\n .range-slider {\n background: var(--hy-slider-background);\n width: 100%;\n }\n\n .range-slider-value {\n background: var(--hy-slider-value-color);\n width: var(--hy-slider-value-width);\n }\n\n .range-thumb {\n background: var(--hy-slider-thumb-color);\n border-radius: 50%;\n height: var(--hy-slider-thumb-diameter);\n position: absolute;\n transform: translateX(var(--hy-slider-thumb-offset));\n width: var(--hy-slider-thumb-diameter);\n }\n\n input {\n display: inline-block;\n height: var(--hy-slider-thumb-diameter);\n margin: 0;\n opacity: 0;\n position: relative;\n width: 100%;\n }\n\n :host([disabled]) {\n --hy-slider-background: #d9d9d9;\n --hy-slider-value-color: #a8a8a8;\n --hy-slider-thumb-color: #f0f0f0;\n }\n\n @media (prefers-color-scheme: dark) {\n body {\n --hy-slider-background: #767676;\n\t --hy-slider-height: 2px;\n\t --hy-slider-radius: var(--hy-slider-height);\n\t --hy-slider-value-color: #ff6200;\n\t --hy-slider-value-width: 0;\n\t --hy-slider-thumb-color: #adadad;\n\t --hy-slider-thumb-diameter: 15px;\n\t --hy-slider-thumb-offset: 0;\n }\n }\n`;"]}
|
package/utils.d.ts
ADDED
package/utils.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,SAAM,UAE3B,GAAG,WAAS,GAAG,EAAE,UAIrC"}
|
package/utils.js
ADDED
package/utils.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/slider-input/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,QAAQ,CAAC,IAAa,EAAE,IAAI,GAAG,GAAG;IACjD,IAAI,OAAsB,CAAC;IAC3B,OAAO,UAAmB,GAAG,IAAU;QACrC,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAG,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;AACD,CAAC","sourcesContent":["export function debounce(func:Function, wait = 100) {\n\tlet timeout:NodeJS.Timeout;\n\treturn function (this:any,...args:any[]) {\n\t clearTimeout(timeout);\n\t timeout = setTimeout(() => func.apply(this , args), wait);\n\t};\n }"]}
|