@digital-realty/ix-radio 1.2.6 → 1.3.1
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/ix-radio.min.js +61 -1
- package/package.json +10 -17
package/dist/ix-radio.min.js
CHANGED
|
@@ -1 +1,61 @@
|
|
|
1
|
-
import{LitElement,isServer,html,css}from"lit";import{__decorate}from"tslib";import{ifDefined}from"lit/directives/if-defined.js";import{query,property}from"lit/decorators.js";import"@material/web/radio/radio.js";import{AriaForwardMixin}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread}from"@open-wc/lit-helpers";import{isActivationClick}from"@material/web/internal/events/form-label-activation.js";
|
|
1
|
+
import{LitElement as t,isServer as e,html as i,css as s}from"lit";import{__decorate as o}from"tslib";import{ifDefined as r}from"lit/directives/if-defined.js";import{query as n,property as a}from"lit/decorators.js";import"@material/web/radio/radio.js";import{AriaForwardMixin as h}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread as d}from"@open-wc/lit-helpers";import{isActivationClick as l}from"@material/web/internal/events/form-label-activation.js";
|
|
2
|
+
/**
|
|
3
|
+
* @license
|
|
4
|
+
* Copyright 2022 Google LLC
|
|
5
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
6
|
+
*/class c{constructor(t){this.host=t,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=t=>{const e="ArrowDown"===t.key,i="ArrowUp"===t.key,s="ArrowLeft"===t.key,o="ArrowRight"===t.key;if(!(s||o||e||i))return;const r=this.getNamedSiblings();if(!r.length)return;t.preventDefault();const n="rtl"===getComputedStyle(this.host).direction?s||e:o||e,a=r.indexOf(this.host);let h=n?a+1:a-1;for(;h!==a;){h>=r.length?h=0:h<0&&(h=r.length-1);const t=r[h];if(!t.hasAttribute("disabled")){for(const e of r)e!==t&&(e.checked=!1,e.tabIndex=-1,e.blur());t.checked=!0,t.tabIndex=0,t.focus(),t.dispatchEvent(new Event("change",{bubbles:!0}));break}n?h++:h--}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(const t of this.getNamedSiblings())t!==this.host&&(t.checked=!1)}updateTabIndices(){const t=this.getNamedSiblings(),e=t.find(t=>t.checked);if(e||this.focused){const i=e||this.host;i.tabIndex=0;for(const e of t)e!==i&&(e.tabIndex=-1);return}for(const e of t)e.tabIndex=0}getNamedSiblings(){const t=this.host.getAttribute("name");return t&&this.root?Array.from(this.root.querySelectorAll(`[name="${t}"]`)):[]}}var u;const p=Symbol("checked"),m=h(t);class b extends m{get checked(){return this[p]}set checked(t){const e=this.checked;if(e===t)return;this[p]=t;const i=String(t);this.internals.setFormValue(this.checked?this.value:null,i),this.requestUpdate("checked",e),this.selectionController.handleCheckedChange()}get name(){var t;return null!==(t=this.getAttribute("name"))&&void 0!==t?t:""}set name(t){this.setAttribute("name",t)}get form(){return this.internals.form}get labels(){return this.internals.labels}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(l(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}constructor(){super(),this[u]=!1,this.disabled=!1,this.label="",this.value="on",this.target="",this.required=!1,this.errorText="Please select an option.",this.selectionController=new c(this),this.internals=this.attachInternals(),this.addController(this.selectionController),e||(this.internals.role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}updated(){if(this.internals.ariaChecked=String(this.checked),this.form){!new FormData(this.form).get(this.name)&&this.required?this.internals.setValidity({valueMissing:!0},this.errorText,this.component):this.form.querySelectorAll(`ix-radio[name=${this.name}]`).forEach(t=>{t.internals.setValidity({valueMissing:!1})})}}get validity(){return this.internals.validity}get renderRadio(){return i`
|
|
7
|
+
<md-radio
|
|
8
|
+
class="radio"
|
|
9
|
+
name=${this.name}
|
|
10
|
+
value=${this.value}
|
|
11
|
+
?checked=${this.checked}
|
|
12
|
+
?disabled=${this.disabled}
|
|
13
|
+
id=${r(this.htmlId)}
|
|
14
|
+
touch-target=${this.target}
|
|
15
|
+
?required=${this.required}
|
|
16
|
+
${d(this.ariaAttributes)}
|
|
17
|
+
></md-radio>
|
|
18
|
+
`}render(){const t=""!==this.label?i`<label ?disabled=${this.disabled}
|
|
19
|
+
>${this.renderRadio} <span> ${this.label}</span></label
|
|
20
|
+
>`:this.renderRadio;return i`${t}
|
|
21
|
+
<slot
|
|
22
|
+
name="description"
|
|
23
|
+
class="description"
|
|
24
|
+
style="margin-block-start: 0; margin-block-end: 0;"
|
|
25
|
+
></slot>`}focus(){this.component.focus()}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}}u=p,b.formAssociated=!0,b.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},o([n(".radio")],b.prototype,"component",void 0),o([a({type:Boolean})],b.prototype,"checked",null),o([a({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),o([a()],b.prototype,"label",void 0),o([a()],b.prototype,"value",void 0),o([a()],b.prototype,"target",void 0),o([a({attribute:"html-id"})],b.prototype,"htmlId",void 0),o([a({type:Boolean})],b.prototype,"required",void 0),o([a({type:String,attribute:"error-text"})],b.prototype,"errorText",void 0);class f extends b{}f.styles=s`
|
|
26
|
+
::slotted([slot='description']) {
|
|
27
|
+
margin-block-start: 0;
|
|
28
|
+
margin-block-end: 0;
|
|
29
|
+
}
|
|
30
|
+
label {
|
|
31
|
+
align-items: center;
|
|
32
|
+
display: flex;
|
|
33
|
+
gap: var(--ix-checkbox-radio-gap, 0.5rem);
|
|
34
|
+
line-height: var(--ix-radio-label-line-height, 2.625rem);
|
|
35
|
+
}
|
|
36
|
+
.description {
|
|
37
|
+
display: block;
|
|
38
|
+
margin: var(--ix-radio-margin, 0);
|
|
39
|
+
font-weight: var(
|
|
40
|
+
--ix-radio-font-weight,
|
|
41
|
+
var(--text-caption-weight, normal)
|
|
42
|
+
);
|
|
43
|
+
font-size: var(--ix-radio-font-size, var(--text-caption-size, 0.75rem));
|
|
44
|
+
line-height: var(
|
|
45
|
+
--ix-radio-line-height,
|
|
46
|
+
var(--text-caption-line-height, 1.33333333em)
|
|
47
|
+
);
|
|
48
|
+
letter-spacing: var(
|
|
49
|
+
--ix-radio-letter-spacing,
|
|
50
|
+
var(--text-caption-letter-spacing, 0.03333333em)
|
|
51
|
+
);
|
|
52
|
+
color: var(--ix-radio-color, var(--clr-on-surface, #092241));
|
|
53
|
+
padding: var(--ix-radio-padding, 0 0 0 28px);
|
|
54
|
+
}
|
|
55
|
+
[disabled] {
|
|
56
|
+
color: var(
|
|
57
|
+
--ix-radio-clr-disabled,
|
|
58
|
+
var(--clr-on-surface-disabled, #09224180)
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
`,window.customElements.define("ix-radio",f);export{f as IxRadioStyled};
|
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.
|
|
6
|
+
"version": "1.3.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
26
26
|
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
27
27
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
28
|
-
"lint": "eslint --ext .ts,.html .
|
|
29
|
-
"format": "eslint --ext .ts,.html . --fix
|
|
28
|
+
"lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
29
|
+
"format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
30
30
|
"test": "tsc && wtr --coverage",
|
|
31
31
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@digital-realty/ix-shared-fns": "^1.
|
|
34
|
+
"@digital-realty/ix-shared-fns": "^1.1.1",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "2.4.0",
|
|
37
37
|
"@open-wc/lit-helpers": "^0.7.0",
|
|
@@ -41,23 +41,21 @@
|
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
44
|
-
"@open-wc/eslint-config": "^9.2.1",
|
|
45
44
|
"@open-wc/testing": "^3.1.6",
|
|
45
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
46
46
|
"@types/mocha": "^10.0.10",
|
|
47
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
48
|
-
"@typescript-eslint/parser": "^
|
|
47
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
48
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
49
49
|
"@web/dev-server": "^0.4.6",
|
|
50
50
|
"@web/test-runner": "^0.20.2",
|
|
51
|
-
"concurrently": "^9.1
|
|
52
|
-
"eslint": "^
|
|
51
|
+
"concurrently": "^9.2.1",
|
|
52
|
+
"eslint": "^9.39.4",
|
|
53
53
|
"eslint-config-prettier": "^8.3.0",
|
|
54
54
|
"husky": "^4.3.8",
|
|
55
55
|
"lint-staged": "^10.5.4",
|
|
56
56
|
"prettier": "^2.4.1",
|
|
57
57
|
"rollup": "^4.29.1",
|
|
58
|
-
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
59
58
|
"rollup-plugin-summary": "^2.0.0",
|
|
60
|
-
"rollup-plugin-uglify": "^6.0.4",
|
|
61
59
|
"tslib": "^2.6.2",
|
|
62
60
|
"typescript": "^5.1.6"
|
|
63
61
|
},
|
|
@@ -65,11 +63,6 @@
|
|
|
65
63
|
"eslintConfig": {
|
|
66
64
|
"parser": "@typescript-eslint/parser",
|
|
67
65
|
"root": true,
|
|
68
|
-
"extends": [
|
|
69
|
-
"@open-wc/eslint-config",
|
|
70
|
-
"eslint-config-prettier",
|
|
71
|
-
"plugin:json/recommended"
|
|
72
|
-
],
|
|
73
66
|
"plugins": [
|
|
74
67
|
"@typescript-eslint"
|
|
75
68
|
],
|
|
@@ -114,5 +107,5 @@
|
|
|
114
107
|
"README.md",
|
|
115
108
|
"LICENSE"
|
|
116
109
|
],
|
|
117
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
|
|
118
111
|
}
|