@digital-realty/ix-radio 1.0.5 → 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/README.md CHANGED
@@ -18,58 +18,6 @@ npm i @digital-realty/ix-radio
18
18
  <ix-radio></ix-radio>
19
19
  ```
20
20
 
21
- ## Linting and formatting
21
+ ## Demo and Documentation
22
22
 
23
- To scan the project for linting and formatting errors, run
24
-
25
- ```bash
26
- npm run lint
27
- ```
28
-
29
- To automatically fix linting and formatting errors, run
30
-
31
- ```bash
32
- npm run format
33
- ```
34
-
35
- ## Testing with Web Test Runner
36
-
37
- To execute a single test run:
38
-
39
- ```bash
40
- npm run test
41
- ```
42
-
43
- To run the tests in interactive watch mode run:
44
-
45
- ```bash
46
- npm run test:watch
47
- ```
48
-
49
- ## Demoing with Storybook
50
-
51
- To run a local instance of Storybook for your component, run
52
-
53
- ```bash
54
- npm run storybook
55
- ```
56
-
57
- To build a production version of Storybook, run
58
-
59
- ```bash
60
- npm run storybook:build
61
- ```
62
-
63
- ## Tooling configs
64
-
65
- For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
66
-
67
- If you customize the configuration a lot, you can consider moving them to individual files.
68
-
69
- ## Local Demo with `web-dev-server`
70
-
71
- ```bash
72
- npm start
73
- ```
74
-
75
- To run a local development server that serves the basic demo located in `demo/index.html`
23
+ Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-radio--default).
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
- aria-label=${this.ariaLabel || this.label}
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
@@ -1 +1 @@
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 } 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 { IxRadioStyles } from './ix-radio-styles.js';\nimport { SingleSelectionController } from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\nexport class IxRadio extends LitElement {\n static get styles() {\n return [IxRadioStyles];\n }\n\n /** @nocollapse */\n static readonly formAssociated = true;\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() ariaLabel: string = '';\n\n @property() target: 'wrapper' | '' = '';\n\n @property() 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 aria-label=${this.ariaLabel || this.label}\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 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"]}
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.5",
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.0-pre.16",
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.3.1",
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": "9e2b4f6c0e99f44ac1cfceb518e69f44c18725ba"
105
+ "gitHead": "5714160bac22bcafd35125ddf83b029a7235ba9d"
103
106
  }