@zywave/zui-slider 4.0.6-pre.0 → 4.0.8-pre.0
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/CHANGELOG.md +16 -0
- package/demo/index.html +2 -2
- package/dist/custom-elements.json +1 -12
- package/dist/zui-slider-css.d.ts +1 -1
- package/dist/zui-slider-css.js +1 -1
- package/dist/zui-slider-css.js.map +1 -1
- package/dist/zui-slider.d.ts +2 -2
- package/dist/zui-slider.js +6 -9
- package/dist/zui-slider.js.map +1 -1
- package/lab.html +1 -1
- package/package.json +3 -4
- package/src/zui-slider-css.js +1 -1
- package/src/zui-slider.ts +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.0.7](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-slider@4.0.7-pre.0...@zywave/zui-slider@4.0.7) (2021-10-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @zywave/zui-slider
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [4.0.6](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-slider@4.0.6-pre.0...@zywave/zui-slider@4.0.6) (2021-09-30)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @zywave/zui-slider
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [4.0.5](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-slider@4.0.5-pre.2...@zywave/zui-slider@4.0.5) (2021-08-27)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @zywave/zui-slider
|
package/demo/index.html
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
<link rel="stylesheet" href="../../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
|
|
3
3
|
|
|
4
4
|
<script type="module" defer>
|
|
5
|
-
if (!
|
|
5
|
+
if (!customElements.get("zui-slider")) {
|
|
6
6
|
import("../dist/index.js");
|
|
7
7
|
}
|
|
8
|
-
if (!
|
|
8
|
+
if (!customElements.get("zui-button")) {
|
|
9
9
|
import("../../zui-button/dist/index.js");
|
|
10
10
|
}
|
|
11
11
|
import("../../../../scripts/demo/demo.js");
|
|
@@ -14,28 +14,17 @@
|
|
|
14
14
|
{
|
|
15
15
|
"kind": "field",
|
|
16
16
|
"name": "_formControlSelector",
|
|
17
|
-
"type": {
|
|
18
|
-
"text": "string"
|
|
19
|
-
},
|
|
20
17
|
"privacy": "protected"
|
|
21
18
|
},
|
|
22
19
|
{
|
|
23
20
|
"kind": "field",
|
|
24
21
|
"name": "_formValue",
|
|
25
|
-
"type": {
|
|
26
|
-
"text": "string"
|
|
27
|
-
},
|
|
28
22
|
"privacy": "protected"
|
|
29
23
|
},
|
|
30
24
|
{
|
|
31
25
|
"kind": "method",
|
|
32
26
|
"name": "formResetCallback",
|
|
33
|
-
"privacy": "protected"
|
|
34
|
-
"return": {
|
|
35
|
-
"type": {
|
|
36
|
-
"text": "void"
|
|
37
|
-
}
|
|
38
|
-
}
|
|
27
|
+
"privacy": "protected"
|
|
39
28
|
},
|
|
40
29
|
{
|
|
41
30
|
"kind": "field",
|
package/dist/zui-slider-css.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const style: import("lit
|
|
1
|
+
export const style: import("lit").CSSResult;
|
package/dist/zui-slider-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { css } from 'lit
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const style = css `:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size) / 2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;
|
|
3
3
|
//# sourceMappingURL=zui-slider-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,mgCAAmgC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size) / 2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;\n"]}
|
package/dist/zui-slider.d.ts
CHANGED
|
@@ -45,9 +45,9 @@ export declare class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
45
45
|
*/
|
|
46
46
|
noText: boolean;
|
|
47
47
|
get progress(): number;
|
|
48
|
-
static get styles(): (import("lit
|
|
48
|
+
static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
|
|
49
49
|
connectedCallback(): void;
|
|
50
|
-
render(): import("lit-
|
|
50
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
51
51
|
private _renderText;
|
|
52
52
|
private _onInput;
|
|
53
53
|
private _onChange;
|
package/dist/zui-slider.js
CHANGED
|
@@ -17,9 +17,9 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
17
17
|
};
|
|
18
18
|
var _ZuiSlider_defaultValue, _ZuiSlider_value;
|
|
19
19
|
import { ZuiFormAssociatedElement } from '@zywave/zui-base';
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
20
|
+
import { html } from 'lit';
|
|
21
|
+
import { property } from 'lit/decorators.js';
|
|
22
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
23
23
|
import { style } from './zui-slider-css.js';
|
|
24
24
|
const DEFAULT_MAX = 100;
|
|
25
25
|
/**
|
|
@@ -35,7 +35,7 @@ const DEFAULT_MAX = 100;
|
|
|
35
35
|
* @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
|
|
36
36
|
* @prop {boolean} autofocus - If true, this element will be focused when connected to the document
|
|
37
37
|
*/
|
|
38
|
-
|
|
38
|
+
export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
39
39
|
constructor() {
|
|
40
40
|
super(...arguments);
|
|
41
41
|
_ZuiSlider_defaultValue.set(this, `${DEFAULT_MAX / 2}`);
|
|
@@ -160,7 +160,7 @@ let ZuiSlider = class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
160
160
|
}
|
|
161
161
|
return value.toString();
|
|
162
162
|
}
|
|
163
|
-
}
|
|
163
|
+
}
|
|
164
164
|
_ZuiSlider_defaultValue = new WeakMap(), _ZuiSlider_value = new WeakMap();
|
|
165
165
|
__decorate([
|
|
166
166
|
property()
|
|
@@ -177,8 +177,5 @@ __decorate([
|
|
|
177
177
|
__decorate([
|
|
178
178
|
property({ type: Boolean, attribute: 'no-text' })
|
|
179
179
|
], ZuiSlider.prototype, "noText", void 0);
|
|
180
|
-
ZuiSlider
|
|
181
|
-
customElement('zui-slider')
|
|
182
|
-
], ZuiSlider);
|
|
183
|
-
export { ZuiSlider };
|
|
180
|
+
window.customElements.define('zui-slider', ZuiSlider);
|
|
184
181
|
//# sourceMappingURL=zui-slider.js.map
|
package/dist/zui-slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,SAAU,SAAQ,wBAAwB;IAAvD;;QAaE,kCAAgB,GAAG,WAAW,GAAG,CAAC,EAAE,EAAC;QAErC,2BAAS,GAAG,WAAW,GAAG,CAAC,EAAE,EAAC;QA2B9B;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QAEpC;;WAEG;QACyB,QAAG,GAAG,WAAW,CAAC;QAE9C;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;QAErC;;WAEG;QACgD,WAAM,GAAG,KAAK,CAAC;IAsFpE,CAAC;IAjJC,IAAc,oBAAoB;QAChC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,KAAK,GAAG,uBAAA,IAAI,+BAAc,CAAC;IAClC,CAAC;IAMD;;OAEG;IAEH,IAAI,KAAK;QACP,OAAO,uBAAA,IAAI,wBAAO,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,GAAG;QACX,MAAM,MAAM,GAAG,uBAAA,IAAI,wBAAO,CAAC;QAC3B,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;QAClC,uBAAA,IAAI,oBAAU,GAAG,MAAA,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,uBAAA,IAAI,wBAAO,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACH,IAAI,aAAa;QACf,OAAO,UAAU,CAAC,uBAAA,IAAI,wBAAO,CAAC,CAAC;IACjC,CAAC;IAsBD,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IACzE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,0GAA0G;QAC1G,IAAI,KAAK,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,mCAAI,IAAI,CAAC,KAAK,CAAC;QACrD,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,GAAG,CAAC;QACjD,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,GAAG,CAAC;QAEjD,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAEhD,uBAAA,IAAI,2BAAiB,KAAK,MAAA,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvC,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAC5E,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,6BAA6B,aAAa,QAAQ,aAAa,IAAI,IAAI,CAAC,QAAQ,0BAA0B,IAAI,CAAC,QAAQ,8BAA8B;SAClK,CAAC;QACF,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC,MAAM,CAAC;;kBAEd,IAAI,CAAC,KAAK;gBACZ,IAAI,CAAC,GAAG;gBACR,IAAI,CAAC,GAAG;iBACP,IAAI,CAAC,IAAI;qBACL,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,SAAS;UACvB,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC7B,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QACD,MAAM,WAAW,GAAG,kCAAkC,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC;QAC5E,MAAM,MAAM,GAAG;YACb,IAAI,EAAE,QAAQ,IAAI,CAAC,QAAQ,OAAO,WAAW,cAAc;SAC5D,CAAC;QACF,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,SAAS,CAAC;IACpE,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;IACpD,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACvF,CAAC;IAEO,iBAAiB,CAAC,KAAsB,EAAE,GAA4B,EAAE,GAA4B;QAC1G,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,OAAO,KAAK,CAAC;SACd;QACD,GAAG,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,IAAI,CAAC,GAAG,CAAC;QACtB,GAAG,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,IAAI,CAAC,GAAG,CAAC;QAEtB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;SAC3B;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;SACvB;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;SACvB;QAED,IAAI,KAAK,GAAG,GAAG,EAAE;YACf,KAAK,GAAG,GAAG,CAAC;SACb;aAAM,IAAI,KAAK,GAAG,GAAG,EAAE;YACtB,KAAK,GAAG,GAAG,CAAC;SACb;QAED,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1B,CAAC;CACF;;AA7HC;IADC,QAAQ,EAAE;sCAGV;AAsB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AAKR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAmB;AAKlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAKc;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;yCAAgB;AAwFpE,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\nconst DEFAULT_MAX = 100;\n\n/**\n * @element zui-slider\n *\n * @attr {string} name - The name of this element that is associated with form submission\n * @attr {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} readonly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} autofocus - If true, this element will be focused when connected to the document\n *\n * @prop {string} name - The name of this element that is associated with form submission\n * @prop {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} autofocus - If true, this element will be focused when connected to the document\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n protected get _formControlSelector() {\n return 'input';\n }\n\n protected get _formValue() {\n return this.value;\n }\n\n protected formResetCallback() {\n this.value = this.#defaultValue;\n }\n\n #defaultValue = `${DEFAULT_MAX / 2}`;\n\n #value = `${DEFAULT_MAX / 2}`;\n\n /**\n * Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n */\n @property()\n get value() {\n return this.#value;\n }\n\n set value(val) {\n const oldVal = this.#value;\n val = this._ensureValidValue(val);\n this.#value = val;\n this._setFormValue(this.#value);\n this.requestUpdate('value', oldVal);\n }\n\n /**\n * Returns the value of the element, interpreted as one of the following, in order:\n A number\n NaN if conversion is impossible\n */\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /**\n * Represents the minimum permitted value\n */\n @property({ type: Number }) min = 0;\n\n /**\n * Represents the maximum permitted value\n */\n @property({ type: Number }) max = DEFAULT_MAX;\n\n /**\n * Represents the stepping interval, used both for user interface and validation purposes\n */\n @property({ type: Number }) step = 0;\n\n /**\n * Represents that this control must be filled in for form submission\n */\n @property({ type: Boolean, attribute: 'no-text' }) noText = false;\n\n get progress() {\n return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements\n let value = this.getAttribute('value') ?? this.value;\n const max = this.getAttribute('max') ?? this.max;\n const min = this.getAttribute('min') ?? this.min;\n\n value = this._ensureValidValue(value, min, max);\n\n this.#defaultValue = value;\n this._setFormValue(value.toString());\n }\n\n render() {\n const progressColor = this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n const styles = {\n background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${this.progress}%, var(--zui-gray-200) ${this.progress}%, var(--zui-gray-200) 100%)`,\n };\n return html`<input\n style=${styleMap(styles)}\n type=\"range\"\n .value=\"${this.value}\"\n .min=\"${this.min}\"\n .max=\"${this.max}\"\n .step=\"${this.step}\"\n ?disabled=\"${this.disabled}\"\n @input=\"${this._onInput}\"\n @change=\"${this._onChange}\"\n />${this._renderText()}`;\n }\n\n private _renderText() {\n if (this.noText) {\n return html``;\n }\n const thumbOffset = `var(--zui-slider-thumb-size) * ${this.progress / 100}`;\n const styles = {\n left: `calc(${this.progress}% - ${thumbOffset} + 0.125rem)`,\n };\n return html`<span style=${styleMap(styles)}>${this.value}</span>`;\n }\n\n private _onInput(e: Event) {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n private _onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n }\n\n private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {\n if (value === '') {\n return value;\n }\n min = min ?? this.min;\n max = max ?? this.max;\n\n if (typeof value === 'string') {\n value = parseFloat(value);\n }\n if (typeof min === 'string') {\n min = parseFloat(min);\n }\n if (typeof max === 'string') {\n max = parseFloat(max);\n }\n\n if (value < min) {\n value = min;\n } else if (value > max) {\n value = max;\n }\n\n return value.toString();\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}
|
package/lab.html
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
// window.zui.importCustomStyles();
|
|
62
62
|
|
|
63
63
|
// Uncomment to test FOUC styling
|
|
64
|
-
//
|
|
64
|
+
// customElements.define = function () { };
|
|
65
65
|
|
|
66
66
|
document.querySelectorAll('zui-slider').forEach(el => el.addEventListener('change', (e) => {
|
|
67
67
|
console.log(`id: ${e.target.id}, value: ${e.target.value}`);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-slider",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.8-pre.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
"autoprefixer": "^8.2.0",
|
|
21
21
|
"browser-sync": "^2.23.7",
|
|
22
22
|
"del": "^3.0.0",
|
|
23
|
-
"node-sass": "^4.14.0",
|
|
24
23
|
"polyserve": "^0.27.8",
|
|
25
24
|
"postcss": "^6.0.21",
|
|
26
25
|
"rollup": "^0.58.2",
|
|
@@ -30,8 +29,8 @@
|
|
|
30
29
|
"access": "public"
|
|
31
30
|
},
|
|
32
31
|
"dependencies": {
|
|
33
|
-
"@zywave/zui-base": "^4.1.
|
|
32
|
+
"@zywave/zui-base": "^4.1.19-pre.0"
|
|
34
33
|
},
|
|
35
34
|
"customElements": "dist/custom-elements.json",
|
|
36
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "7b8371bdb6f40e669a84815aa2e4f92d7938e406"
|
|
37
36
|
}
|
package/src/zui-slider-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { css } from 'lit
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
|
|
3
3
|
export const style = css`:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size) / 2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;
|
package/src/zui-slider.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ZuiFormAssociatedElement } from '@zywave/zui-base';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
5
5
|
import { style } from './zui-slider-css.js';
|
|
6
6
|
|
|
7
7
|
const DEFAULT_MAX = 100;
|
|
@@ -19,17 +19,16 @@ const DEFAULT_MAX = 100;
|
|
|
19
19
|
* @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
|
|
20
20
|
* @prop {boolean} autofocus - If true, this element will be focused when connected to the document
|
|
21
21
|
*/
|
|
22
|
-
@customElement('zui-slider')
|
|
23
22
|
export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
24
|
-
protected get _formControlSelector()
|
|
23
|
+
protected get _formControlSelector() {
|
|
25
24
|
return 'input';
|
|
26
25
|
}
|
|
27
26
|
|
|
28
|
-
protected get _formValue()
|
|
27
|
+
protected get _formValue() {
|
|
29
28
|
return this.value;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
protected formResetCallback()
|
|
31
|
+
protected formResetCallback() {
|
|
33
32
|
this.value = this.#defaultValue;
|
|
34
33
|
}
|
|
35
34
|
|
|
@@ -168,6 +167,8 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
168
167
|
}
|
|
169
168
|
}
|
|
170
169
|
|
|
170
|
+
window.customElements.define('zui-slider', ZuiSlider);
|
|
171
|
+
|
|
171
172
|
declare global {
|
|
172
173
|
interface HTMLElementTagNameMap {
|
|
173
174
|
'zui-slider': ZuiSlider;
|