@digital-realty/ix-slider 1.0.3 → 1.0.5
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 +2 -40
- package/dist/IxSlider.d.ts +74 -12
- package/dist/IxSlider.js +86 -42
- package/dist/IxSlider.js.map +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -25,45 +25,7 @@ npm i @digital-realty/ix-slider
|
|
|
25
25
|
</script>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
##
|
|
28
|
+
## Demo and Documentation
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-slider--default).
|
|
31
31
|
|
|
32
|
-
```bash
|
|
33
|
-
npm run lint
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
To automatically fix linting and formatting errors, run
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
npm run format
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## Testing with Web Test Runner
|
|
43
|
-
|
|
44
|
-
To execute a single test run:
|
|
45
|
-
|
|
46
|
-
```bash
|
|
47
|
-
npm run test
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
To run the tests in interactive watch mode run:
|
|
51
|
-
|
|
52
|
-
```bash
|
|
53
|
-
npm run test:watch
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
## Tooling configs
|
|
58
|
-
|
|
59
|
-
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
|
60
|
-
|
|
61
|
-
If you customize the configuration a lot, you can consider moving them to individual files.
|
|
62
|
-
|
|
63
|
-
## Local Demo with `web-dev-server`
|
|
64
|
-
|
|
65
|
-
```bash
|
|
66
|
-
npm start
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
To run a local development server that serves the basic demo located in `demo/index.html`
|
package/dist/IxSlider.d.ts
CHANGED
|
@@ -1,35 +1,97 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import { Slider } from '@material/web/slider/internal/slider.js';
|
|
2
3
|
import '@material/web/slider/slider.js';
|
|
3
4
|
export declare class IxSlider extends LitElement {
|
|
4
|
-
|
|
5
|
+
component: Slider;
|
|
5
6
|
/**
|
|
6
7
|
* Disables the slider and makes it non-interactive.
|
|
7
8
|
*/
|
|
8
9
|
disabled: boolean;
|
|
9
10
|
/**
|
|
10
|
-
*
|
|
11
|
+
* The HTML name to use in forms.
|
|
11
12
|
*/
|
|
12
|
-
|
|
13
|
+
name: string;
|
|
13
14
|
/**
|
|
14
|
-
*
|
|
15
|
+
* The slider minimum value
|
|
15
16
|
*/
|
|
16
17
|
min: number;
|
|
18
|
+
/**
|
|
19
|
+
* The slider maximum value
|
|
20
|
+
*/
|
|
17
21
|
max: number;
|
|
18
22
|
/**
|
|
19
|
-
*
|
|
23
|
+
* The slider value displayed when range is false.
|
|
20
24
|
*/
|
|
21
|
-
|
|
25
|
+
value?: number;
|
|
22
26
|
/**
|
|
23
|
-
*
|
|
27
|
+
* The slider start value displayed when range is true.
|
|
28
|
+
*/
|
|
29
|
+
nameStart?: string;
|
|
30
|
+
/**
|
|
31
|
+
* The slider end value displayed when range is true.
|
|
32
|
+
*/
|
|
33
|
+
nameEnd?: string;
|
|
34
|
+
/**
|
|
35
|
+
* The slider start value displayed when range is true.
|
|
36
|
+
*/
|
|
37
|
+
valueStart?: number;
|
|
38
|
+
/**
|
|
39
|
+
* The slider end value displayed when range is true.
|
|
40
|
+
*/
|
|
41
|
+
valueEnd?: number;
|
|
42
|
+
/**
|
|
43
|
+
* An optional label for the slider's value displayed when range is
|
|
44
|
+
* false; if not set, the label is the value itself.
|
|
45
|
+
*/
|
|
46
|
+
valueLabel?: string;
|
|
47
|
+
/**
|
|
48
|
+
* An optional label for the slider's start value displayed when
|
|
49
|
+
* range is true; if not set, the label is the valueStart itself.
|
|
50
|
+
*/
|
|
51
|
+
valueLabelStart?: string;
|
|
52
|
+
/**
|
|
53
|
+
* An optional label for the slider's end value displayed when
|
|
54
|
+
* range is true; if not set, the label is the valueEnd itself.
|
|
55
|
+
*/
|
|
56
|
+
valueLabelEnd?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Aria label for the slider's start handle displayed when
|
|
59
|
+
* range is true.
|
|
60
|
+
*/
|
|
61
|
+
ariaLabelStart?: string;
|
|
62
|
+
/**
|
|
63
|
+
* Aria value text for the slider's start value displayed when
|
|
64
|
+
* range is true.
|
|
65
|
+
*/
|
|
66
|
+
ariaValueTextStart?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Aria label for the slider's end handle displayed when
|
|
69
|
+
* range is true.
|
|
70
|
+
*/
|
|
71
|
+
ariaLabelEnd?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Aria value text for the slider's end value displayed when
|
|
74
|
+
* range is true.
|
|
75
|
+
*/
|
|
76
|
+
ariaValueTextEnd?: string;
|
|
77
|
+
/**
|
|
78
|
+
* The step between values.
|
|
24
79
|
*/
|
|
25
|
-
ticks: boolean;
|
|
26
80
|
step: number;
|
|
27
81
|
/**
|
|
28
|
-
*
|
|
82
|
+
* Whether or not to show tick marks.
|
|
83
|
+
*/
|
|
84
|
+
ticks: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Whether or not to show a value label when activated.
|
|
87
|
+
*/
|
|
88
|
+
labeled: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Whether or not to show a value range. When false, the slider displays
|
|
91
|
+
* a slideable handle for the value property; when true, it displays
|
|
92
|
+
* slideable handles for the valueStart and valueEnd properties.
|
|
29
93
|
*/
|
|
30
94
|
range: boolean;
|
|
31
|
-
|
|
32
|
-
valueEnd: number;
|
|
33
|
-
changeHandler: (e: Event) => void;
|
|
95
|
+
protected createRenderRoot(): this;
|
|
34
96
|
render(): import("lit-html").TemplateResult<1>;
|
|
35
97
|
}
|
package/dist/IxSlider.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { html,
|
|
3
|
-
import {
|
|
2
|
+
import { html, LitElement } from 'lit';
|
|
3
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
|
+
import { property, query } from 'lit/decorators.js';
|
|
4
5
|
import '@material/web/slider/slider.js';
|
|
5
6
|
export class IxSlider extends LitElement {
|
|
6
7
|
constructor() {
|
|
@@ -10,63 +11,76 @@ export class IxSlider extends LitElement {
|
|
|
10
11
|
*/
|
|
11
12
|
this.disabled = false;
|
|
12
13
|
/**
|
|
13
|
-
*
|
|
14
|
+
* The HTML name to use in forms.
|
|
14
15
|
*/
|
|
15
|
-
this.
|
|
16
|
+
this.name = '';
|
|
16
17
|
/**
|
|
17
|
-
*
|
|
18
|
+
* The slider minimum value
|
|
18
19
|
*/
|
|
19
20
|
this.min = 0;
|
|
21
|
+
/**
|
|
22
|
+
* The slider maximum value
|
|
23
|
+
*/
|
|
20
24
|
this.max = 100;
|
|
21
25
|
/**
|
|
22
|
-
*
|
|
26
|
+
* The step between values.
|
|
23
27
|
*/
|
|
24
|
-
this.
|
|
28
|
+
this.step = 1;
|
|
25
29
|
/**
|
|
26
|
-
*
|
|
30
|
+
* Whether or not to show tick marks.
|
|
27
31
|
*/
|
|
28
32
|
this.ticks = false;
|
|
29
|
-
this.step = 1;
|
|
30
33
|
/**
|
|
31
|
-
*
|
|
34
|
+
* Whether or not to show a value label when activated.
|
|
35
|
+
*/
|
|
36
|
+
this.labeled = false;
|
|
37
|
+
/**
|
|
38
|
+
* Whether or not to show a value range. When false, the slider displays
|
|
39
|
+
* a slideable handle for the value property; when true, it displays
|
|
40
|
+
* slideable handles for the valueStart and valueEnd properties.
|
|
32
41
|
*/
|
|
33
42
|
this.range = false;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
this
|
|
37
|
-
const { target } = e;
|
|
38
|
-
this.value = Number(target.value);
|
|
39
|
-
};
|
|
43
|
+
}
|
|
44
|
+
createRenderRoot() {
|
|
45
|
+
return this;
|
|
40
46
|
}
|
|
41
47
|
render() {
|
|
42
48
|
return html `
|
|
43
49
|
<md-slider
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
class="slider"
|
|
51
|
+
?disabled=${this.disabled}
|
|
52
|
+
name=${this.name}
|
|
53
|
+
min=${this.min}
|
|
54
|
+
max=${this.max}
|
|
55
|
+
value=${ifDefined(this.value)}
|
|
56
|
+
name-start=${ifDefined(this.nameStart)}
|
|
57
|
+
name-end=${ifDefined(this.nameEnd)}
|
|
58
|
+
value-start=${ifDefined(this.valueStart)}
|
|
59
|
+
value-end=${ifDefined(this.valueEnd)}
|
|
60
|
+
value-label=${ifDefined(this.valueLabel)}
|
|
61
|
+
value-label-start=${ifDefined(this.valueLabelStart)}
|
|
62
|
+
value-label-end=${ifDefined(this.valueLabelEnd)}
|
|
63
|
+
aria-label-start=${ifDefined(this.ariaLabelStart)}
|
|
64
|
+
aria-valuetext-start=${ifDefined(this.ariaValueTextStart)}
|
|
65
|
+
aria-label-end=${ifDefined(this.ariaLabelEnd)}
|
|
66
|
+
aria-valuetext-end=${ifDefined(this.ariaValueTextEnd)}
|
|
67
|
+
step=${this.step}
|
|
50
68
|
?ticks=${this.ticks}
|
|
51
|
-
?range=${this.range}
|
|
52
69
|
?labeled=${this.labeled}
|
|
53
|
-
?
|
|
54
|
-
@change=${this.changeHandler}
|
|
70
|
+
?range=${this.range}
|
|
55
71
|
></md-slider>
|
|
56
72
|
`;
|
|
57
73
|
}
|
|
58
74
|
}
|
|
59
|
-
IxSlider.styles = css `
|
|
60
|
-
:host {
|
|
61
|
-
display: block;
|
|
62
|
-
}
|
|
63
|
-
`;
|
|
64
75
|
__decorate([
|
|
65
|
-
|
|
76
|
+
query('.slider')
|
|
77
|
+
], IxSlider.prototype, "component", void 0);
|
|
78
|
+
__decorate([
|
|
79
|
+
property({ type: Boolean })
|
|
66
80
|
], IxSlider.prototype, "disabled", void 0);
|
|
67
81
|
__decorate([
|
|
68
|
-
property(
|
|
69
|
-
], IxSlider.prototype, "
|
|
82
|
+
property()
|
|
83
|
+
], IxSlider.prototype, "name", void 0);
|
|
70
84
|
__decorate([
|
|
71
85
|
property({ type: Number })
|
|
72
86
|
], IxSlider.prototype, "min", void 0);
|
|
@@ -74,21 +88,51 @@ __decorate([
|
|
|
74
88
|
property({ type: Number })
|
|
75
89
|
], IxSlider.prototype, "max", void 0);
|
|
76
90
|
__decorate([
|
|
77
|
-
property({ type:
|
|
78
|
-
], IxSlider.prototype, "
|
|
91
|
+
property({ type: Number })
|
|
92
|
+
], IxSlider.prototype, "value", void 0);
|
|
79
93
|
__decorate([
|
|
80
|
-
property({
|
|
81
|
-
], IxSlider.prototype, "
|
|
94
|
+
property({ attribute: 'name-start' })
|
|
95
|
+
], IxSlider.prototype, "nameStart", void 0);
|
|
96
|
+
__decorate([
|
|
97
|
+
property({ attribute: 'name-end' })
|
|
98
|
+
], IxSlider.prototype, "nameEnd", void 0);
|
|
99
|
+
__decorate([
|
|
100
|
+
property({ type: Number, attribute: 'value-start' })
|
|
101
|
+
], IxSlider.prototype, "valueStart", void 0);
|
|
102
|
+
__decorate([
|
|
103
|
+
property({ type: Number, attribute: 'value-end' })
|
|
104
|
+
], IxSlider.prototype, "valueEnd", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
property({ attribute: 'value-label' })
|
|
107
|
+
], IxSlider.prototype, "valueLabel", void 0);
|
|
108
|
+
__decorate([
|
|
109
|
+
property({ attribute: 'value-label-start' })
|
|
110
|
+
], IxSlider.prototype, "valueLabelStart", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
property({ attribute: 'value-label-end' })
|
|
113
|
+
], IxSlider.prototype, "valueLabelEnd", void 0);
|
|
114
|
+
__decorate([
|
|
115
|
+
property({ attribute: 'aria-label-start' })
|
|
116
|
+
], IxSlider.prototype, "ariaLabelStart", void 0);
|
|
117
|
+
__decorate([
|
|
118
|
+
property({ attribute: 'aria-valuetext-start' })
|
|
119
|
+
], IxSlider.prototype, "ariaValueTextStart", void 0);
|
|
120
|
+
__decorate([
|
|
121
|
+
property({ attribute: 'aria-label-end' })
|
|
122
|
+
], IxSlider.prototype, "ariaLabelEnd", void 0);
|
|
123
|
+
__decorate([
|
|
124
|
+
property({ attribute: 'aria-valuetext-end' })
|
|
125
|
+
], IxSlider.prototype, "ariaValueTextEnd", void 0);
|
|
82
126
|
__decorate([
|
|
83
127
|
property({ type: Number })
|
|
84
128
|
], IxSlider.prototype, "step", void 0);
|
|
85
129
|
__decorate([
|
|
86
130
|
property({ type: Boolean })
|
|
87
|
-
], IxSlider.prototype, "
|
|
131
|
+
], IxSlider.prototype, "ticks", void 0);
|
|
88
132
|
__decorate([
|
|
89
|
-
property({
|
|
90
|
-
], IxSlider.prototype, "
|
|
133
|
+
property({ type: Boolean })
|
|
134
|
+
], IxSlider.prototype, "labeled", void 0);
|
|
91
135
|
__decorate([
|
|
92
|
-
property({
|
|
93
|
-
], IxSlider.prototype, "
|
|
136
|
+
property({ type: Boolean })
|
|
137
|
+
], IxSlider.prototype, "range", void 0);
|
|
94
138
|
//# sourceMappingURL=IxSlider.js.map
|
package/dist/IxSlider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSlider.js","sourceRoot":"","sources":["../src/IxSlider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"IxSlider.js","sourceRoot":"","sources":["../src/IxSlider.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { Slider } from '@material/web/slider/internal/slider.js';\nimport '@material/web/slider/slider.js';\n\nexport class IxSlider extends LitElement {\n @query('.slider') component!: Slider;\n\n /**\n * Disables the slider and makes it non-interactive.\n */\n @property({ type: Boolean }) disabled: boolean = false;\n\n /**\n * The HTML name to use in forms.\n */\n @property() name: string = '';\n\n /**\n * The slider minimum value\n */\n @property({ type: Number }) min = 0;\n\n /**\n * The slider maximum value\n */\n @property({ type: Number }) max = 100;\n\n /**\n * The slider value displayed when range is false.\n */\n @property({ type: Number }) value?: number;\n\n /**\n * The slider start value displayed when range is true.\n */\n @property({ attribute: 'name-start' }) nameStart?: string;\n\n /**\n * The slider end value displayed when range is true.\n */\n @property({ attribute: 'name-end' }) nameEnd?: string;\n\n /**\n * The slider start value displayed when range is true.\n */\n @property({ type: Number, attribute: 'value-start' }) valueStart?: number;\n\n /**\n * The slider end value displayed when range is true.\n */\n @property({ type: Number, attribute: 'value-end' }) valueEnd?: number;\n\n /**\n * An optional label for the slider's value displayed when range is\n * false; if not set, the label is the value itself.\n */\n @property({ attribute: 'value-label' }) valueLabel?: string;\n\n /**\n * An optional label for the slider's start value displayed when\n * range is true; if not set, the label is the valueStart itself.\n */\n @property({ attribute: 'value-label-start' }) valueLabelStart?: string;\n\n /**\n * An optional label for the slider's end value displayed when\n * range is true; if not set, the label is the valueEnd itself.\n */\n @property({ attribute: 'value-label-end' }) valueLabelEnd?: string;\n\n /**\n * Aria label for the slider's start handle displayed when\n * range is true.\n */\n @property({ attribute: 'aria-label-start' }) ariaLabelStart?: string;\n\n /**\n * Aria value text for the slider's start value displayed when\n * range is true.\n */\n @property({ attribute: 'aria-valuetext-start' }) ariaValueTextStart?: string;\n\n /**\n * Aria label for the slider's end handle displayed when\n * range is true.\n */\n @property({ attribute: 'aria-label-end' }) ariaLabelEnd?: string;\n\n /**\n * Aria value text for the slider's end value displayed when\n * range is true.\n */\n @property({ attribute: 'aria-valuetext-end' }) ariaValueTextEnd?: string;\n\n /**\n * The step between values.\n */\n @property({ type: Number }) step = 1;\n\n /**\n * Whether or not to show tick marks.\n */\n @property({ type: Boolean }) ticks = false;\n\n /**\n * Whether or not to show a value label when activated.\n */\n @property({ type: Boolean }) labeled = false;\n\n /**\n * Whether or not to show a value range. When false, the slider displays\n * a slideable handle for the value property; when true, it displays\n * slideable handles for the valueStart and valueEnd properties.\n */\n @property({ type: Boolean }) range = false;\n\n protected createRenderRoot() {\n return this;\n }\n\n render() {\n return html`\n <md-slider\n class=\"slider\"\n ?disabled=${this.disabled}\n name=${this.name}\n min=${this.min}\n max=${this.max}\n value=${ifDefined(this.value)}\n name-start=${ifDefined(this.nameStart)}\n name-end=${ifDefined(this.nameEnd)}\n value-start=${ifDefined(this.valueStart)}\n value-end=${ifDefined(this.valueEnd)}\n value-label=${ifDefined(this.valueLabel)}\n value-label-start=${ifDefined(this.valueLabelStart)}\n value-label-end=${ifDefined(this.valueLabelEnd)}\n aria-label-start=${ifDefined(this.ariaLabelStart)}\n aria-valuetext-start=${ifDefined(this.ariaValueTextStart)}\n aria-label-end=${ifDefined(this.ariaLabelEnd)}\n aria-valuetext-end=${ifDefined(this.ariaValueTextEnd)}\n step=${this.step}\n ?ticks=${this.ticks}\n ?labeled=${this.labeled}\n ?range=${this.range}\n ></md-slider>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-slider following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.5",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
"@typescript-eslint"
|
|
60
60
|
],
|
|
61
61
|
"rules": {
|
|
62
|
+
"lit-a11y/aria-attrs": "off",
|
|
62
63
|
"no-unused-vars": "off",
|
|
63
64
|
"@typescript-eslint/no-unused-vars": [
|
|
64
65
|
"error"
|
|
@@ -95,5 +96,5 @@
|
|
|
95
96
|
"README.md",
|
|
96
97
|
"LICENSE"
|
|
97
98
|
],
|
|
98
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "d57dedc86cbf4e58a5f01445702dc5f540317d00"
|
|
99
100
|
}
|