@digital-realty/ix-switch 2.1.3 → 2.1.4
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/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/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.4",
|
|
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": "0343d693fd7581b45fb8712fd17e61c0f76a357b"
|
|
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"]}
|