@digital-realty/ix-radio 1.0.6 → 1.0.7
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/IxRadio.d.ts +8 -3
- package/dist/IxRadio.js +22 -11
- package/dist/IxRadio.js.map +1 -1
- package/package.json +7 -4
package/dist/IxRadio.d.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import '@material/web/radio/radio.js';
|
|
3
|
+
import { Radio } from '@material/web/radio/internal/radio.js';
|
|
3
4
|
declare const CHECKED: unique symbol;
|
|
4
5
|
export declare class IxRadio extends LitElement {
|
|
5
|
-
static get styles(): import("lit").CSSResult[];
|
|
6
6
|
/** @nocollapse */
|
|
7
7
|
static readonly formAssociated = true;
|
|
8
|
+
/** @nocollapse */
|
|
9
|
+
static shadowRootOptions: ShadowRootInit;
|
|
10
|
+
readonly component: Radio;
|
|
8
11
|
/**
|
|
9
12
|
* Whether or not the radio is selected.
|
|
10
13
|
*/
|
|
@@ -17,7 +20,6 @@ export declare class IxRadio extends LitElement {
|
|
|
17
20
|
* The element value to use in form submission when checked.
|
|
18
21
|
*/
|
|
19
22
|
value: string;
|
|
20
|
-
ariaLabel: string;
|
|
21
23
|
target: 'wrapper' | '';
|
|
22
24
|
htmlId: string | undefined;
|
|
23
25
|
/**
|
|
@@ -40,6 +42,9 @@ export declare class IxRadio extends LitElement {
|
|
|
40
42
|
constructor();
|
|
41
43
|
protected updated(): void;
|
|
42
44
|
get renderRadio(): import("lit-html").TemplateResult<1>;
|
|
43
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
45
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
46
|
+
focus(): void;
|
|
47
|
+
formResetCallback(): void;
|
|
48
|
+
formStateRestoreCallback(state: string): void;
|
|
44
49
|
}
|
|
45
50
|
export {};
|
package/dist/IxRadio.js
CHANGED
|
@@ -2,17 +2,13 @@ var _a;
|
|
|
2
2
|
import { __decorate } from "tslib";
|
|
3
3
|
import { html, LitElement, isServer } from 'lit';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { property, query } from 'lit/decorators.js';
|
|
6
6
|
import '@material/web/radio/radio.js';
|
|
7
7
|
import { isActivationClick } from '@material/web/internal/controller/events.js';
|
|
8
8
|
import { polyfillElementInternalsAria } from '@material/web/internal/aria/aria.js';
|
|
9
|
-
import { IxRadioStyles } from './ix-radio-styles.js';
|
|
10
9
|
import { SingleSelectionController } from './single-selection-controller.js';
|
|
11
10
|
const CHECKED = Symbol('checked');
|
|
12
11
|
export class IxRadio extends LitElement {
|
|
13
|
-
static get styles() {
|
|
14
|
-
return [IxRadioStyles];
|
|
15
|
-
}
|
|
16
12
|
/**
|
|
17
13
|
* Whether or not the radio is selected.
|
|
18
14
|
*/
|
|
@@ -86,7 +82,6 @@ export class IxRadio extends LitElement {
|
|
|
86
82
|
* The element value to use in form submission when checked.
|
|
87
83
|
*/
|
|
88
84
|
this.value = 'on';
|
|
89
|
-
this.ariaLabel = '';
|
|
90
85
|
this.target = '';
|
|
91
86
|
this.selectionController = new SingleSelectionController(this);
|
|
92
87
|
this.internals = polyfillElementInternalsAria(this, this /* needed for closure */
|
|
@@ -104,7 +99,7 @@ export class IxRadio extends LitElement {
|
|
|
104
99
|
get renderRadio() {
|
|
105
100
|
return html `
|
|
106
101
|
<md-radio
|
|
107
|
-
|
|
102
|
+
class="radio"
|
|
108
103
|
name=${this.name}
|
|
109
104
|
value=${this.value}
|
|
110
105
|
?checked=${this.checked}
|
|
@@ -121,10 +116,29 @@ export class IxRadio extends LitElement {
|
|
|
121
116
|
</label>`;
|
|
122
117
|
return this.renderRadio;
|
|
123
118
|
}
|
|
119
|
+
focus() {
|
|
120
|
+
this.component.focus();
|
|
121
|
+
}
|
|
122
|
+
formResetCallback() {
|
|
123
|
+
// The checked property does not reflect, so the original attribute set by
|
|
124
|
+
// the user is used to determine the default value.
|
|
125
|
+
this.checked = this.hasAttribute('checked');
|
|
126
|
+
}
|
|
127
|
+
formStateRestoreCallback(state) {
|
|
128
|
+
this.checked = state === 'true';
|
|
129
|
+
}
|
|
124
130
|
}
|
|
125
131
|
_a = CHECKED;
|
|
126
132
|
/** @nocollapse */
|
|
127
133
|
IxRadio.formAssociated = true;
|
|
134
|
+
/** @nocollapse */
|
|
135
|
+
IxRadio.shadowRootOptions = {
|
|
136
|
+
...LitElement.shadowRootOptions,
|
|
137
|
+
delegatesFocus: true,
|
|
138
|
+
};
|
|
139
|
+
__decorate([
|
|
140
|
+
query('.radio')
|
|
141
|
+
], IxRadio.prototype, "component", void 0);
|
|
128
142
|
__decorate([
|
|
129
143
|
property({ type: Boolean })
|
|
130
144
|
], IxRadio.prototype, "checked", null);
|
|
@@ -137,13 +151,10 @@ __decorate([
|
|
|
137
151
|
__decorate([
|
|
138
152
|
property()
|
|
139
153
|
], IxRadio.prototype, "value", void 0);
|
|
140
|
-
__decorate([
|
|
141
|
-
property()
|
|
142
|
-
], IxRadio.prototype, "ariaLabel", void 0);
|
|
143
154
|
__decorate([
|
|
144
155
|
property()
|
|
145
156
|
], IxRadio.prototype, "target", void 0);
|
|
146
157
|
__decorate([
|
|
147
|
-
property()
|
|
158
|
+
property({ attribute: 'html-id' })
|
|
148
159
|
], IxRadio.prototype, "htmlId", void 0);
|
|
149
160
|
//# sourceMappingURL=IxRadio.js.map
|
package/dist/IxRadio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxRadio.js","sourceRoot":"","sources":["../src/IxRadio.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"IxRadio.js","sourceRoot":"","sources":["../src/IxRadio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, isServer } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/radio/radio.js';\nimport { isActivationClick } from '@material/web/internal/controller/events.js';\nimport { polyfillElementInternalsAria } from '@material/web/internal/aria/aria.js';\nimport { Radio } from '@material/web/radio/internal/radio.js';\nimport { SingleSelectionController } from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\nexport class IxRadio extends LitElement {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.radio') readonly component!: Radio;\n\n /**\n * Whether or not the radio is selected.\n */\n @property({ type: Boolean })\n get checked() {\n return this[CHECKED];\n }\n\n set checked(checked: boolean) {\n const wasChecked = this.checked;\n if (wasChecked === checked) {\n return;\n }\n\n this[CHECKED] = checked;\n const state = String(checked);\n this.internals.setFormValue(this.checked ? this.value : null, state);\n this.requestUpdate('checked', wasChecked);\n this.selectionController.handleCheckedChange();\n }\n\n [CHECKED] = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property() label: string = '';\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property() target: 'wrapper' | '' = '';\n\n @property({ attribute: 'html-id' }) htmlId: string | undefined;\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n private readonly selectionController = new SingleSelectionController(this);\n\n private readonly internals = polyfillElementInternalsAria(\n this,\n (this as HTMLElement) /* needed for closure */\n .attachInternals()\n );\n\n private async handleClick(event: Event) {\n if (this.disabled) {\n return;\n }\n\n // allow event to propagate to user code after a microtask.\n await 0;\n if (event.defaultPrevented) {\n return;\n }\n\n if (isActivationClick(event)) {\n this.focus();\n }\n\n // Per spec, clicking on a radio input always selects it.\n this.checked = true;\n this.dispatchEvent(new Event('change', { bubbles: true }));\n this.dispatchEvent(\n new InputEvent('input', { bubbles: true, composed: true })\n );\n }\n\n private async handleKeydown(event: KeyboardEvent) {\n // allow event to propagate to user code after a microtask.\n await 0;\n if (event.key !== ' ' || event.defaultPrevented) {\n return;\n }\n\n this.click();\n }\n\n constructor() {\n super();\n this.addController(this.selectionController);\n if (!isServer) {\n this.internals.role = 'radio';\n this.addEventListener('click', this.handleClick.bind(this));\n this.addEventListener('keydown', this.handleKeydown.bind(this));\n }\n }\n\n protected override updated() {\n this.internals.ariaChecked = String(this.checked);\n }\n\n get renderRadio() {\n return html`\n <md-radio\n class=\"radio\"\n name=${this.name}\n value=${this.value}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n id=${ifDefined(this.htmlId)}\n touch-target=${this.target}\n ></md-radio>\n `;\n }\n\n protected render() {\n if (this.label)\n return html`<label\n >${this.renderRadio} <span> ${this.label}</span>\n </label>`;\n\n return this.renderRadio;\n }\n\n focus() {\n this.component.focus();\n }\n\n formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-radio following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "interxion",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.7",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@lit-labs/react": "^2.0.3",
|
|
30
|
-
"@material/web": "^1.0.
|
|
30
|
+
"@material/web": "^1.0.1",
|
|
31
31
|
"i18next": "^23.3.0",
|
|
32
32
|
"lit": "^2.7.6",
|
|
33
33
|
"react": "^18.2.0"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"husky": "^4.3.8",
|
|
47
47
|
"lint-staged": "^10.5.4",
|
|
48
48
|
"prettier": "^2.4.1",
|
|
49
|
-
"tslib": "^2.
|
|
49
|
+
"tslib": "^2.6.2",
|
|
50
50
|
"typescript": "^5.1.6"
|
|
51
51
|
},
|
|
52
52
|
"customElements": "custom-elements.json",
|
|
@@ -75,6 +75,9 @@
|
|
|
75
75
|
"ignorePackages": true
|
|
76
76
|
}
|
|
77
77
|
]
|
|
78
|
+
},
|
|
79
|
+
"globals": {
|
|
80
|
+
"ShadowRootInit": true
|
|
78
81
|
}
|
|
79
82
|
},
|
|
80
83
|
"prettier": {
|
|
@@ -99,5 +102,5 @@
|
|
|
99
102
|
"README.md",
|
|
100
103
|
"LICENSE"
|
|
101
104
|
],
|
|
102
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "5714160bac22bcafd35125ddf83b029a7235ba9d"
|
|
103
106
|
}
|