@digital-realty/ix-switch 2.1.3 → 2.1.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 -41
- package/dist/IxSwitch.d.ts +7 -7
- package/dist/IxSwitch.js +17 -15
- package/dist/IxSwitch.js.map +1 -1
- package/package.json +2 -2
- package/dist/ix-switch-styles.d.ts +0 -1
- package/dist/ix-switch-styles.js +0 -61
- package/dist/ix-switch-styles.js.map +0 -1
package/README.md
CHANGED
|
@@ -24,45 +24,6 @@ npm i @digital-realty/ix-switch
|
|
|
24
24
|
</script>
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
##
|
|
27
|
+
## Demo and Documentation
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm run lint
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
To automatically fix linting and formatting errors, run
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
npm run format
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## Testing with Web Test Runner
|
|
42
|
-
|
|
43
|
-
To execute a single test run:
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
npm run test
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
To run the tests in interactive watch mode run:
|
|
50
|
-
|
|
51
|
-
```bash
|
|
52
|
-
npm run test:watch
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
## Tooling configs
|
|
57
|
-
|
|
58
|
-
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
|
59
|
-
|
|
60
|
-
If you customize the configuration a lot, you can consider moving them to individual files.
|
|
61
|
-
|
|
62
|
-
## Local Demo with `web-dev-server`
|
|
63
|
-
|
|
64
|
-
```bash
|
|
65
|
-
npm start
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
To run a local development server that serves the basic demo located in `demo/index.html`
|
|
29
|
+
Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-switch--default).
|
package/dist/IxSwitch.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import { Switch } from '@material/web/switch/internal/switch.js';
|
|
2
3
|
import '@material/web/switch/switch.js';
|
|
3
4
|
export declare class IxSwitch extends LitElement {
|
|
5
|
+
readonly component: Switch;
|
|
4
6
|
/**
|
|
5
7
|
* Disables the switch and makes it non-interactive.
|
|
6
8
|
*/
|
|
@@ -26,17 +28,15 @@ export declare class IxSwitch extends LitElement {
|
|
|
26
28
|
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
|
|
27
29
|
*/
|
|
28
30
|
required: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The HTML name to use in form submission.
|
|
33
|
+
*/
|
|
34
|
+
name: string | undefined;
|
|
29
35
|
/**
|
|
30
36
|
* The value associated with this switch on form submission. `null` is
|
|
31
37
|
* submitted when `selected` is `false`.
|
|
32
38
|
*/
|
|
33
39
|
value: string;
|
|
34
|
-
|
|
35
|
-
handleChange(): void;
|
|
40
|
+
protected createRenderRoot(): this;
|
|
36
41
|
render(): import("lit-html").TemplateResult<1>;
|
|
37
42
|
}
|
|
38
|
-
declare global {
|
|
39
|
-
interface HTMLElementTagNameMap {
|
|
40
|
-
'ix-switch': IxSwitch;
|
|
41
|
-
}
|
|
42
|
-
}
|
package/dist/IxSwitch.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
|
+
import { query, property } from 'lit/decorators.js';
|
|
4
5
|
import '@material/web/switch/switch.js';
|
|
5
6
|
export class IxSwitch extends LitElement {
|
|
6
7
|
constructor() {
|
|
@@ -30,39 +31,37 @@ export class IxSwitch extends LitElement {
|
|
|
30
31
|
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
|
|
31
32
|
*/
|
|
32
33
|
this.required = false;
|
|
34
|
+
/**
|
|
35
|
+
* The HTML name to use in form submission.
|
|
36
|
+
*/
|
|
37
|
+
this.name = undefined;
|
|
33
38
|
/**
|
|
34
39
|
* The value associated with this switch on form submission. `null` is
|
|
35
40
|
* submitted when `selected` is `false`.
|
|
36
41
|
*/
|
|
37
42
|
this.value = 'on';
|
|
38
43
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
detail: { selected: this.selected },
|
|
42
|
-
bubbles: true,
|
|
43
|
-
composed: true,
|
|
44
|
-
});
|
|
45
|
-
this.dispatchEvent(toggleSwitchEvent);
|
|
46
|
-
}
|
|
47
|
-
handleChange() {
|
|
48
|
-
this.selected = !this.selected;
|
|
49
|
-
this._dispatchEvent();
|
|
44
|
+
createRenderRoot() {
|
|
45
|
+
return this;
|
|
50
46
|
}
|
|
51
47
|
render() {
|
|
52
48
|
return html `
|
|
53
49
|
<md-switch
|
|
54
|
-
|
|
50
|
+
name=${ifDefined(this.name)}
|
|
51
|
+
value=${this.value}
|
|
55
52
|
?disabled=${this.disabled}
|
|
56
53
|
?selected=${this.selected}
|
|
57
54
|
?icons=${this.icons}
|
|
58
|
-
?
|
|
55
|
+
?show-only-selected-icon=${this.showOnlySelectedIcon}
|
|
59
56
|
?required=${this.required}
|
|
60
|
-
@change=${this.handleChange}
|
|
61
57
|
>
|
|
62
58
|
</md-switch>
|
|
63
59
|
`;
|
|
64
60
|
}
|
|
65
61
|
}
|
|
62
|
+
__decorate([
|
|
63
|
+
query('md-switch')
|
|
64
|
+
], IxSwitch.prototype, "component", void 0);
|
|
66
65
|
__decorate([
|
|
67
66
|
property({ type: Boolean, reflect: true })
|
|
68
67
|
], IxSwitch.prototype, "disabled", void 0);
|
|
@@ -78,6 +77,9 @@ __decorate([
|
|
|
78
77
|
__decorate([
|
|
79
78
|
property({ type: Boolean })
|
|
80
79
|
], IxSwitch.prototype, "required", void 0);
|
|
80
|
+
__decorate([
|
|
81
|
+
property({ type: String })
|
|
82
|
+
], IxSwitch.prototype, "name", void 0);
|
|
81
83
|
__decorate([
|
|
82
84
|
property({ type: String })
|
|
83
85
|
], IxSwitch.prototype, "value", void 0);
|
package/dist/IxSwitch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSwitch.js","sourceRoot":"","sources":["../src/IxSwitch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"IxSwitch.js","sourceRoot":"","sources":["../src/IxSwitch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,gCAAgC,CAAC;AAExC,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAGE;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;WAGG;QAC0B,aAAQ,GAAG,KAAK,CAAC;QAE9C;;WAEG;QAC0B,UAAK,GAAG,KAAK,CAAC;QAE3C;;;WAGG;QAEH,yBAAoB,GAAG,KAAK,CAAC;QAE7B;;;;;WAKG;QAC0B,aAAQ,GAAG,KAAK,CAAC;QAE9C;;WAEG;QACyB,SAAI,GAAuB,SAAS,CAAC;QAEjE;;;WAGG;QACyB,UAAK,GAAG,IAAI,CAAC;IAoB3C,CAAC;IAlBW,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;eAEA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACnB,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,KAAK;mCACQ,IAAI,CAAC,oBAAoB;oBACxC,IAAI,CAAC,QAAQ;;;KAG5B,CAAC;IACJ,CAAC;CACF;AA9DqB;IAAnB,KAAK,CAAC,WAAW,CAAC;2CAA6B;AAKJ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAMhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAKjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAe;AAO3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC;sDACrC;AAQA;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAKlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAsC;AAMrC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { query, property } from 'lit/decorators.js';\nimport { Switch } from '@material/web/switch/internal/switch.js';\nimport '@material/web/switch/switch.js';\n\nexport class IxSwitch extends LitElement {\n @query('md-switch') readonly component!: Switch;\n\n /**\n * Disables the switch and makes it non-interactive.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Puts the switch in the selected state and sets the form submission value to\n * the `value` property.\n */\n @property({ type: Boolean }) selected = false;\n\n /**\n * Shows both the selected and deselected icons.\n */\n @property({ type: Boolean }) icons = false;\n\n /**\n * Shows only the selected icon, and not the deselected icon. If `true`,\n * overrides the behavior of the `icons` property.\n */\n @property({ type: Boolean, attribute: 'show-only-selected-icon' })\n showOnlySelectedIcon = false;\n\n /**\n * When true, require the switch to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({ type: Boolean }) required = false;\n\n /**\n * The HTML name to use in form submission.\n */\n @property({ type: String }) name: string | undefined = undefined;\n\n /**\n * The value associated with this switch on form submission. `null` is\n * submitted when `selected` is `false`.\n */\n @property({ type: String }) value = 'on';\n\n protected createRenderRoot() {\n return this;\n }\n\n render() {\n return html`\n <md-switch\n name=${ifDefined(this.name)}\n value=${this.value}\n ?disabled=${this.disabled}\n ?selected=${this.selected}\n ?icons=${this.icons}\n ?show-only-selected-icon=${this.showOnlySelectedIcon}\n ?required=${this.required}\n >\n </md-switch>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-switch following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "2.1.
|
|
6
|
+
"version": "2.1.5",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -99,5 +99,5 @@
|
|
|
99
99
|
"README.md",
|
|
100
100
|
"LICENSE"
|
|
101
101
|
],
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "f487170ac27de967505c921dabf983d2a122e625"
|
|
103
103
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const IxSwitchStyles: import("lit").CSSResult;
|
package/dist/ix-switch-styles.js
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const IxSwitchStyles = css `
|
|
3
|
-
:host {
|
|
4
|
-
display: inline-block;
|
|
5
|
-
position: relative;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
:host([hidden]) {
|
|
9
|
-
display: none;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.switch__input {
|
|
13
|
-
position: absolute;
|
|
14
|
-
opacity: 0;
|
|
15
|
-
z-index: -1;
|
|
16
|
-
}
|
|
17
|
-
.switch__icon {
|
|
18
|
-
display: block;
|
|
19
|
-
min-width: 2.5rem;
|
|
20
|
-
width: var(--switch-icon-width, 3em);
|
|
21
|
-
min-height: 2.5rem;
|
|
22
|
-
cursor: pointer;
|
|
23
|
-
background-color: transparent;
|
|
24
|
-
}
|
|
25
|
-
.switch__icon:before,
|
|
26
|
-
.switch__icon:after {
|
|
27
|
-
content: '';
|
|
28
|
-
position: absolute;
|
|
29
|
-
display: block;
|
|
30
|
-
}
|
|
31
|
-
.switch__icon:before {
|
|
32
|
-
top: 50%;
|
|
33
|
-
transform: translateY(-50%);
|
|
34
|
-
width: 100%;
|
|
35
|
-
height: var(--switch-icon-bg-height, 1.5rem);
|
|
36
|
-
border-radius: calc(var(--switch-icon-bg-height, 1.5rem) / 2);
|
|
37
|
-
box-shadow: inset 0 0 0 2px #a4b9c1, inset 0 4px 3px 0 rgba(0, 0, 0, 0.22);
|
|
38
|
-
background-color: #e83a96;
|
|
39
|
-
will-change: background-color;
|
|
40
|
-
transition: background-color 150ms ease-in-out;
|
|
41
|
-
}
|
|
42
|
-
.switch__icon:after {
|
|
43
|
-
top: calc(50% - var(--switch-icon-toggle-diameter, 1.5rem) / 2);
|
|
44
|
-
width: var(--switch-icon-toggle-diameter, 1.5rem);
|
|
45
|
-
height: var(--switch-icon-toggle-diameter, 1.5rem);
|
|
46
|
-
border-radius: 50%;
|
|
47
|
-
background-image: linear-gradient(-180deg, #e2e2e2 0%, #91c6d7 100%);
|
|
48
|
-
box-shadow: inset 0 0 0 2px #a4b9c1, 0 2px 2px 0 rgba(0, 30, 40, 0.34);
|
|
49
|
-
transform: translateX(0);
|
|
50
|
-
will-change: transform;
|
|
51
|
-
transition: transform 150ms ease-in-out;
|
|
52
|
-
}
|
|
53
|
-
.switch__input:checked + .switch__icon:before {
|
|
54
|
-
background-color: #99ca3c;
|
|
55
|
-
}
|
|
56
|
-
.switch__input:checked + .switch__icon:after {
|
|
57
|
-
transform: translateX(var(--switch-icon-width, 3em))
|
|
58
|
-
translateX(calc(var(--switch-icon-toggle-diameter, 1.5rem) * -1));
|
|
59
|
-
}
|
|
60
|
-
`;
|
|
61
|
-
//# sourceMappingURL=ix-switch-styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ix-switch-styles.js","sourceRoot":"","sources":["../src/ix-switch-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxSwitchStyles = css`\n :host {\n display: inline-block;\n position: relative;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .switch__input {\n position: absolute;\n opacity: 0;\n z-index: -1;\n }\n .switch__icon {\n display: block;\n min-width: 2.5rem;\n width: var(--switch-icon-width, 3em);\n min-height: 2.5rem;\n cursor: pointer;\n background-color: transparent;\n }\n .switch__icon:before,\n .switch__icon:after {\n content: '';\n position: absolute;\n display: block;\n }\n .switch__icon:before {\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n height: var(--switch-icon-bg-height, 1.5rem);\n border-radius: calc(var(--switch-icon-bg-height, 1.5rem) / 2);\n box-shadow: inset 0 0 0 2px #a4b9c1, inset 0 4px 3px 0 rgba(0, 0, 0, 0.22);\n background-color: #e83a96;\n will-change: background-color;\n transition: background-color 150ms ease-in-out;\n }\n .switch__icon:after {\n top: calc(50% - var(--switch-icon-toggle-diameter, 1.5rem) / 2);\n width: var(--switch-icon-toggle-diameter, 1.5rem);\n height: var(--switch-icon-toggle-diameter, 1.5rem);\n border-radius: 50%;\n background-image: linear-gradient(-180deg, #e2e2e2 0%, #91c6d7 100%);\n box-shadow: inset 0 0 0 2px #a4b9c1, 0 2px 2px 0 rgba(0, 30, 40, 0.34);\n transform: translateX(0);\n will-change: transform;\n transition: transform 150ms ease-in-out;\n }\n .switch__input:checked + .switch__icon:before {\n background-color: #99ca3c;\n }\n .switch__input:checked + .switch__icon:after {\n transform: translateX(var(--switch-icon-width, 3em))\n translateX(calc(var(--switch-icon-toggle-diameter, 1.5rem) * -1));\n }\n`;\n"]}
|