@ukho/admiralty-core 0.4.5 → 0.4.6
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/admiralty/admiralty.esm.js +1 -1
- package/dist/admiralty/admiralty.esm.js.map +1 -1
- package/dist/admiralty/p-b154f85e.entry.js +2 -0
- package/dist/admiralty/p-b154f85e.entry.js.map +1 -0
- package/dist/admiralty/p-f43f9ff4.entry.js +2 -0
- package/dist/admiralty/p-f43f9ff4.entry.js.map +1 -0
- package/dist/cjs/admiralty-radio-group.cjs.entry.js +16 -2
- package/dist/cjs/admiralty-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/admiralty-radio.cjs.entry.js +3 -2
- package/dist/cjs/admiralty-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/admiralty.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/radio/radio.css +7 -0
- package/dist/collection/components/radio/radio.js +20 -1
- package/dist/collection/components/radio/radio.js.map +1 -1
- package/dist/collection/components/radio-group/radio-group.js +52 -1
- package/dist/collection/components/radio-group/radio-group.js.map +1 -1
- package/dist/collection/components/radio-group/radio-group.spec.js +6 -1
- package/dist/collection/components/radio-group/radio-group.spec.js.map +1 -1
- package/dist/components/admiralty-radio-group.js +32 -4
- package/dist/components/admiralty-radio-group.js.map +1 -1
- package/dist/components/admiralty-radio.js +4 -2
- package/dist/components/admiralty-radio.js.map +1 -1
- package/dist/esm/admiralty-radio-group.entry.js +16 -2
- package/dist/esm/admiralty-radio-group.entry.js.map +1 -1
- package/dist/esm/admiralty-radio.entry.js +3 -2
- package/dist/esm/admiralty-radio.entry.js.map +1 -1
- package/dist/esm/admiralty.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/radio/radio.d.ts +4 -0
- package/dist/types/components/radio-group/radio-group.d.ts +9 -0
- package/dist/types/components.d.ts +24 -0
- package/package.json +2 -2
- package/dist/admiralty/p-76876a23.entry.js +0 -2
- package/dist/admiralty/p-76876a23.entry.js.map +0 -1
- package/dist/admiralty/p-b8dc6756.entry.js +0 -2
- package/dist/admiralty/p-b8dc6756.entry.js.map +0 -1
|
@@ -9,7 +9,10 @@ describe('radio-group', () => {
|
|
|
9
9
|
});
|
|
10
10
|
expect(page.root).toEqualHtml(`
|
|
11
11
|
<admiralty-radio-group>
|
|
12
|
-
<div class="radio-group" role="radiogroup"
|
|
12
|
+
<div class="radio-group" role="radiogroup">
|
|
13
|
+
|
|
14
|
+
<admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
|
|
15
|
+
</div>
|
|
13
16
|
</admiralty-radio-group>
|
|
14
17
|
`);
|
|
15
18
|
});
|
|
@@ -45,6 +48,7 @@ describe('radio-group', () => {
|
|
|
45
48
|
</label>
|
|
46
49
|
</div>
|
|
47
50
|
</admiralty-radio>
|
|
51
|
+
<admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
|
|
48
52
|
</div>
|
|
49
53
|
</admiralty-radio-group>
|
|
50
54
|
`);
|
|
@@ -81,6 +85,7 @@ describe('radio-group', () => {
|
|
|
81
85
|
</label>
|
|
82
86
|
</div>
|
|
83
87
|
</admiralty-radio>
|
|
88
|
+
<admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
|
|
84
89
|
</div>
|
|
85
90
|
</admiralty-radio-group>
|
|
86
91
|
`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.spec.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;MACjC,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC
|
|
1
|
+
{"version":3,"file":"radio-group.spec.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;MACjC,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;OAKL;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;SAKH;KACJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;SAKH;KACJ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE3B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;IAEvD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,wBAAwB,CAAqB,CAAC;IAClF,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,wBAAwB,CAAqB,CAAC;IAClF,IAAI,CAAC,KAAK,EAAE,CAAC;IAEb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;EACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { RadioGroupComponent } from './radio-group';\nimport { RadioComponent } from '../radio/radio';\n\ndescribe('radio-group', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent],\n html: `<admiralty-radio-group></admiralty-radio-group>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-radio-group>\n <div class=\"radio-group\" role=\"radiogroup\">\n\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('renders 2 radio buttons horizontally', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group>\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-radio-group>\n <!---->\n <div class=\"radio-group\" role=\"radiogroup\">\n <admiralty-radio name=\"grp\" value=\"option1\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-0\" class=\"admiralty-radio\" id=\"admiralty-radio-0\" name=\"grp\" tabindex=\"0\" type=\"radio\" value=\"option1\">\n <label htmlfor=\"admiralty-radio-0\">\n Option 1\n </label>\n </div>\n </admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-1\" class=\"admiralty-radio\" id=\"admiralty-radio-1\" name=\"grp\" tabindex=\"-1\" type=\"radio\" value=\"option2\">\n <label htmlfor=\"admiralty-radio-1\">\n Option 2\n </label>\n </div>\n </admiralty-radio>\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('renders 2 radio buttons vertically', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group display-vertical=\"true\">\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-radio-group display-vertical=\"true\">\n <!---->\n <div class=\"radio-group stack\" role=\"radiogroup\">\n <admiralty-radio name=\"grp\" value=\"option1\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-2\" class=\"admiralty-radio\" id=\"admiralty-radio-2\" name=\"grp\" tabindex=\"0\" type=\"radio\" value=\"option1\">\n <label htmlfor=\"admiralty-radio-2\">\n Option 1\n </label>\n </div>\n </admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-3\" class=\"admiralty-radio\" id=\"admiralty-radio-3\" name=\"grp\" tabindex=\"-1\" type=\"radio\" value=\"option2\">\n <label htmlfor=\"admiralty-radio-3\">\n Option 2\n </label>\n </div>\n </admiralty-radio>\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('fires event on radio button changed', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group display-vertical=\"true\">\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n const eventSpy = jest.fn();\n\n page.doc.addEventListener('admiraltyChange', eventSpy);\n\n const rad1 = page.doc.querySelector('input[value=\"option1\"]') as HTMLInputElement;\n rad1.click();\n await page.waitForChanges();\n\n const rad2 = page.doc.querySelector('input[value=\"option2\"]') as HTMLInputElement;\n rad2.click();\n\n await page.waitForChanges();\n\n expect(eventSpy).toBeCalledTimes(2);\n });\n});\n"]}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { d as defineCustomElement$3 } from './icon.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './input-error.js';
|
|
2
4
|
|
|
3
5
|
const radioGroupCss = ".radio-group.sc-admiralty-radio-group{display:flex;flex-direction:row}.radio-group.sc-admiralty-radio-group-s>*,.radio-group .sc-admiralty-radio-group-s>*{margin-right:2em !important}.stack.sc-admiralty-radio-group{flex-direction:column}.stack.sc-admiralty-radio-group-s>*,.stack .sc-admiralty-radio-group-s>*{margin-bottom:10px !important}";
|
|
4
6
|
|
|
@@ -37,43 +39,69 @@ const RadioGroupComponent = /*@__PURE__*/ proxyCustomElement(class RadioGroupCom
|
|
|
37
39
|
this.name = this.inputId;
|
|
38
40
|
this.value = undefined;
|
|
39
41
|
this.displayVertical = false;
|
|
42
|
+
this.invalid = false;
|
|
43
|
+
this.invalidMessage = undefined;
|
|
40
44
|
}
|
|
41
45
|
valueChanged(value) {
|
|
42
46
|
this.setRadioTabindex(value);
|
|
43
47
|
this.admiraltyChange.emit({ value });
|
|
44
48
|
}
|
|
49
|
+
invalidChanged(value) {
|
|
50
|
+
this.getRadios().forEach(radio => {
|
|
51
|
+
if (value) {
|
|
52
|
+
radio.setAttribute('invalid', 'true');
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
radio.removeAttribute('invalid');
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
}
|
|
45
59
|
componentDidLoad() {
|
|
46
60
|
this.setRadioTabindex(this.value);
|
|
61
|
+
this.invalidChanged(this.invalid);
|
|
47
62
|
}
|
|
48
63
|
getRadios() {
|
|
49
64
|
return Array.from(this.el.querySelectorAll('admiralty-radio'));
|
|
50
65
|
}
|
|
51
66
|
render() {
|
|
52
67
|
const { displayVertical } = this;
|
|
53
|
-
return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null))));
|
|
68
|
+
return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
|
|
54
69
|
}
|
|
55
70
|
get el() { return this; }
|
|
56
71
|
static get watchers() { return {
|
|
57
|
-
"value": ["valueChanged"]
|
|
72
|
+
"value": ["valueChanged"],
|
|
73
|
+
"invalid": ["invalidChanged"]
|
|
58
74
|
}; }
|
|
59
75
|
static get style() { return radioGroupCss; }
|
|
60
76
|
}, [6, "admiralty-radio-group", {
|
|
61
77
|
"name": [1],
|
|
62
78
|
"value": [1032],
|
|
63
|
-
"displayVertical": [4, "display-vertical"]
|
|
79
|
+
"displayVertical": [4, "display-vertical"],
|
|
80
|
+
"invalid": [4],
|
|
81
|
+
"invalidMessage": [1, "invalid-message"]
|
|
64
82
|
}]);
|
|
65
83
|
let radioGroupIds = 0;
|
|
66
84
|
function defineCustomElement$1() {
|
|
67
85
|
if (typeof customElements === "undefined") {
|
|
68
86
|
return;
|
|
69
87
|
}
|
|
70
|
-
const components = ["admiralty-radio-group"];
|
|
88
|
+
const components = ["admiralty-radio-group", "admiralty-icon", "admiralty-input-error"];
|
|
71
89
|
components.forEach(tagName => { switch (tagName) {
|
|
72
90
|
case "admiralty-radio-group":
|
|
73
91
|
if (!customElements.get(tagName)) {
|
|
74
92
|
customElements.define(tagName, RadioGroupComponent);
|
|
75
93
|
}
|
|
76
94
|
break;
|
|
95
|
+
case "admiralty-icon":
|
|
96
|
+
if (!customElements.get(tagName)) {
|
|
97
|
+
defineCustomElement$3();
|
|
98
|
+
}
|
|
99
|
+
break;
|
|
100
|
+
case "admiralty-input-error":
|
|
101
|
+
if (!customElements.get(tagName)) {
|
|
102
|
+
defineCustomElement$2();
|
|
103
|
+
}
|
|
104
|
+
break;
|
|
77
105
|
} });
|
|
78
106
|
}
|
|
79
107
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio-group.js","mappings":"
|
|
1
|
+
{"file":"admiralty-radio-group.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAwD5C,qBAAgB,GAAG,CAAC,KAAsB;MAChD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;;MAGhC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;;;MAID,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;KACF,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ;MACzB,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;OACF;KACF,CAAC;gBApFqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;mBAKb,KAAK;;;EAQhC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAQD,cAAc,CAAC,KAAc;IAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK;MAC5B,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACvC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAClC;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACnC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;GAChE;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpG,eAAa,EACb,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,CACD,EACP;GACH;;;;;;;;;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\n display: flex;\n flex-direction: row;\n\n ::slotted(*) {\n margin-right: 2em !important;\n }\n}\n\n.stack {\n flex-direction: column;\n\n ::slotted(*) {\n margin-bottom: 10px !important;\n }\n}\n\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n tag: 'admiralty-radio-group',\n styleUrl: 'radio-group.scss',\n scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n @Element() el!: HTMLElement;\n\n /**\n * The name of the control, which is submitted with the form data\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The value of the radio group\n */\n @Prop({ mutable: true }) value: any | null;\n\n /**\n * Setting this true displays the radio options vertically (defaults to false)\n */\n @Prop() displayVertical: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n @Watch('value')\n valueChanged(value: any) {\n this.setRadioTabindex(value);\n this.admiraltyChange.emit({ value });\n }\n\n /**\n * Event fired when the checked radio button changes\n */\n @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('invalid')\n invalidChanged(value: boolean) {\n this.getRadios().forEach(radio => {\n if (value) {\n radio.setAttribute('invalid', 'true');\n } else {\n radio.removeAttribute('invalid');\n }\n });\n }\n\n componentDidLoad(): void {\n this.setRadioTabindex(this.value);\n this.invalidChanged(this.invalid);\n }\n\n private setRadioTabindex = (value: any | undefined) => {\n const radios = this.getRadios();\n\n // Get the first radio that is not disabled and the checked one\n const first = radios.find(radio => !radio.disabled);\n const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n if (!first && !checked) {\n return;\n }\n\n // If an enabled checked radio exists, set it to be the focusable radio\n // otherwise we default to focus the first radio\n const focusable = checked || first;\n\n for (const radio of radios) {\n const tabindex = radio === focusable ? 0 : -1;\n radio.setButtonTabindex(tabindex);\n }\n };\n\n private getRadios(): HTMLAdmiraltyRadioElement[] {\n return Array.from(this.el.querySelectorAll('admiralty-radio'));\n }\n private onClick = (e: Event) => {\n const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n if (selectedRadio) {\n const currentValue = this.value;\n const newValue = selectedRadio.value;\n\n if (newValue !== currentValue) {\n this.value = newValue;\n }\n }\n };\n\n render() {\n const { displayVertical } = this;\n\n return (\n <Host>\n <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n <slot></slot>\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const radioCss = ".admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}";
|
|
3
|
+
const radioCss = ".admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:#e20d0d}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid #ffdd00}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}";
|
|
4
4
|
|
|
5
5
|
const RadioComponent = /*@__PURE__*/ proxyCustomElement(class RadioComponent extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -33,6 +33,7 @@ const RadioComponent = /*@__PURE__*/ proxyCustomElement(class RadioComponent ext
|
|
|
33
33
|
this.value = undefined;
|
|
34
34
|
this.disabled = false;
|
|
35
35
|
this.checked = false;
|
|
36
|
+
this.invalid = false;
|
|
36
37
|
}
|
|
37
38
|
valueChanged() {
|
|
38
39
|
/**
|
|
@@ -65,7 +66,7 @@ const RadioComponent = /*@__PURE__*/ proxyCustomElement(class RadioComponent ext
|
|
|
65
66
|
}
|
|
66
67
|
render() {
|
|
67
68
|
const { buttonTabindex, checked, disabled, inputId, name, value } = this;
|
|
68
|
-
return (h(Host, null, h("div", { class: "admiralty-radio" }, h("input", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick,
|
|
69
|
+
return (h(Host, null, h("div", { class: "admiralty-radio" }, h("input", { class: { 'invalid': this.invalid, 'admiralty-radio': true }, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), h("label", { htmlFor: inputId }, h("slot", null)))));
|
|
69
70
|
}
|
|
70
71
|
get el() { return this; }
|
|
71
72
|
static get watchers() { return {
|
|
@@ -79,6 +80,7 @@ const RadioComponent = /*@__PURE__*/ proxyCustomElement(class RadioComponent ext
|
|
|
79
80
|
"value": [1025],
|
|
80
81
|
"disabled": [4],
|
|
81
82
|
"checked": [1028],
|
|
83
|
+
"invalid": [4],
|
|
82
84
|
"buttonTabindex": [32],
|
|
83
85
|
"setButtonTabindex": [64]
|
|
84
86
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"admiralty-radio.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,69BAA69B;;MCOj+B,cAAc;;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IAoFzD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QACpD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE;UACpC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;SAC1B;OACF;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;KACzC,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;0BA/FwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;mBAKvB,KAAK;;EAkBhC,YAAY;;;;;;IAMV,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEhF,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAClE;GACF;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACpE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;GACF;;EAID,MAAM,iBAAiB,CAAC,KAAa;IACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAyBD,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEzE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IAC1B,aACE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,kBAC7C,GAAG,OAAO,EAAE,iBACb,QAAQ,GAAG,MAAM,GAAG,IAAI,qBACpB,OAAO,EACxB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAChC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,WAAW,GAAG,QAA4B,CAAC,GAClE,EACF,aAAO,OAAO,EAAE,OAAO,IACrB,eAAQ,CACF,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;AAGH,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/typography\" as typography;\n\n.admiralty-radio {\n input {\n appearance: none;\n border: 2px solid colours.$colour-admiralty-blue;\n border-radius: 1rem;\n height: 1.5rem;\n width: 1.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: 18px;\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &:checked:after {\n border-radius: 100%;\n background-color: colours.$colour-admiralty-blue;\n width: .8rem;\n height: .8rem;\n content: \" \";\n }\n\n &:disabled {\n border: 2px solid colours.$colour-textinput-text-disabled;\n }\n\n &:focus {\n outline: 3px solid colours.$colour-utility-focus;\n outline-offset: 0;\n }\n }\n label {\n font-family: typography.$font-family;\n font-weight: typography.$font-weight-light;\n position: relative;\n top: 2px;\n }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-radio',\n styleUrl: 'radio.scss',\n scoped: true,\n})\nexport class RadioComponent {\n private inputId = `admiralty-radio-${radioButtonIds++}`;\n private nativeInput!: HTMLInputElement;\n private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n @Element() el!: HTMLElement;\n\n /**\n * The tabindex of the radio button.\n * @internal\n */\n @State() buttonTabindex = -1;\n\n /**\n * The name of the radio button for use on selection within a radio group\n */\n @Prop() name: string = this.inputId;\n /**\n * The value of the radio button for use on selection within a radio group\n */\n @Prop({ mutable: true }) value: string | null;\n /**\n * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * Determines whether the radio button is selected (or checked)\n */\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /**\n * Determines whether to add the invalid stying to the radio button\n */\n @Prop() invalid: boolean = false;\n\n /**\n * Emitted when the radio button gains focus.\n */\n @Event() admiraltyFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event() admiraltyBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the radio is selected\n */\n @Event() admiraltyChange!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n /**\n * The new value of the radio may\n * match the radio group's value,\n * so we see if it should be checked.\n */\n this.updateState();\n }\n\n connectedCallback() {\n if (this.value === undefined) {\n this.value = this.inputId;\n }\n const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n if (radioGroup) {\n this.updateState();\n radioGroup.addEventListener('admiraltyChange', this.updateState);\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n radioGroup.removeEventListener('admiraltyChange', this.updateState);\n this.radioGroup = null;\n }\n }\n\n /** @internal */\n @Method()\n async setButtonTabindex(value: number) {\n this.buttonTabindex = value;\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\n if (this.nativeInput && this.checked) {\n this.nativeInput.focus();\n }\n }\n };\n\n private onClick = () => {\n this.checked = this.nativeInput.checked;\n };\n\n private onFocus = () => {\n this.admiraltyFocus.emit();\n };\n\n private onBlur = () => {\n this.admiraltyBlur.emit();\n };\n\n @Watch('checked')\n @Watch('disabled')\n render() {\n const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n return (\n <Host>\n <div class=\"admiralty-radio\">\n <input\n class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n aria-checked={`${checked}`}\n aria-hidden={disabled ? 'true' : null}\n aria-labelledby={inputId}\n id={inputId}\n name={name}\n tabindex={buttonTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n type=\"radio\"\n value={value}\n checked={checked}\n disabled={disabled ? true : null}\n ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n />\n <label htmlFor={inputId}>\n <slot />\n </label>\n </div>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
|
|
@@ -36,24 +36,38 @@ const RadioGroupComponent = class {
|
|
|
36
36
|
this.name = this.inputId;
|
|
37
37
|
this.value = undefined;
|
|
38
38
|
this.displayVertical = false;
|
|
39
|
+
this.invalid = false;
|
|
40
|
+
this.invalidMessage = undefined;
|
|
39
41
|
}
|
|
40
42
|
valueChanged(value) {
|
|
41
43
|
this.setRadioTabindex(value);
|
|
42
44
|
this.admiraltyChange.emit({ value });
|
|
43
45
|
}
|
|
46
|
+
invalidChanged(value) {
|
|
47
|
+
this.getRadios().forEach(radio => {
|
|
48
|
+
if (value) {
|
|
49
|
+
radio.setAttribute('invalid', 'true');
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
radio.removeAttribute('invalid');
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
}
|
|
44
56
|
componentDidLoad() {
|
|
45
57
|
this.setRadioTabindex(this.value);
|
|
58
|
+
this.invalidChanged(this.invalid);
|
|
46
59
|
}
|
|
47
60
|
getRadios() {
|
|
48
61
|
return Array.from(this.el.querySelectorAll('admiralty-radio'));
|
|
49
62
|
}
|
|
50
63
|
render() {
|
|
51
64
|
const { displayVertical } = this;
|
|
52
|
-
return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null))));
|
|
65
|
+
return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
|
|
53
66
|
}
|
|
54
67
|
get el() { return getElement(this); }
|
|
55
68
|
static get watchers() { return {
|
|
56
|
-
"value": ["valueChanged"]
|
|
69
|
+
"value": ["valueChanged"],
|
|
70
|
+
"invalid": ["invalidChanged"]
|
|
57
71
|
}; }
|
|
58
72
|
};
|
|
59
73
|
let radioGroupIds = 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;
|
|
1
|
+
{"file":"admiralty-radio-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAwD5C,qBAAgB,GAAG,CAAC,KAAsB;MAChD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;;MAGhC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;;;MAID,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;KACF,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ;MACzB,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;OACF;KACF,CAAC;gBApFqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;mBAKb,KAAK;;;EAQhC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAQD,cAAc,CAAC,KAAc;IAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK;MAC5B,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACvC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAClC;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACnC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;GAChE;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpG,eAAa,EACb,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,CACD,EACP;GACH;;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\n display: flex;\n flex-direction: row;\n\n ::slotted(*) {\n margin-right: 2em !important;\n }\n}\n\n.stack {\n flex-direction: column;\n\n ::slotted(*) {\n margin-bottom: 10px !important;\n }\n}\n\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n tag: 'admiralty-radio-group',\n styleUrl: 'radio-group.scss',\n scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n @Element() el!: HTMLElement;\n\n /**\n * The name of the control, which is submitted with the form data\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The value of the radio group\n */\n @Prop({ mutable: true }) value: any | null;\n\n /**\n * Setting this true displays the radio options vertically (defaults to false)\n */\n @Prop() displayVertical: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n @Watch('value')\n valueChanged(value: any) {\n this.setRadioTabindex(value);\n this.admiraltyChange.emit({ value });\n }\n\n /**\n * Event fired when the checked radio button changes\n */\n @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('invalid')\n invalidChanged(value: boolean) {\n this.getRadios().forEach(radio => {\n if (value) {\n radio.setAttribute('invalid', 'true');\n } else {\n radio.removeAttribute('invalid');\n }\n });\n }\n\n componentDidLoad(): void {\n this.setRadioTabindex(this.value);\n this.invalidChanged(this.invalid);\n }\n\n private setRadioTabindex = (value: any | undefined) => {\n const radios = this.getRadios();\n\n // Get the first radio that is not disabled and the checked one\n const first = radios.find(radio => !radio.disabled);\n const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n if (!first && !checked) {\n return;\n }\n\n // If an enabled checked radio exists, set it to be the focusable radio\n // otherwise we default to focus the first radio\n const focusable = checked || first;\n\n for (const radio of radios) {\n const tabindex = radio === focusable ? 0 : -1;\n radio.setButtonTabindex(tabindex);\n }\n };\n\n private getRadios(): HTMLAdmiraltyRadioElement[] {\n return Array.from(this.el.querySelectorAll('admiralty-radio'));\n }\n private onClick = (e: Event) => {\n const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n if (selectedRadio) {\n const currentValue = this.value;\n const newValue = selectedRadio.value;\n\n if (newValue !== currentValue) {\n this.value = newValue;\n }\n }\n };\n\n render() {\n const { displayVertical } = this;\n\n return (\n <Host>\n <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n <slot></slot>\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b834f47d.js';
|
|
2
2
|
|
|
3
|
-
const radioCss = ".admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}";
|
|
3
|
+
const radioCss = ".admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:#e20d0d}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid #ffdd00}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}";
|
|
4
4
|
|
|
5
5
|
const RadioComponent = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -32,6 +32,7 @@ const RadioComponent = class {
|
|
|
32
32
|
this.value = undefined;
|
|
33
33
|
this.disabled = false;
|
|
34
34
|
this.checked = false;
|
|
35
|
+
this.invalid = false;
|
|
35
36
|
}
|
|
36
37
|
valueChanged() {
|
|
37
38
|
/**
|
|
@@ -64,7 +65,7 @@ const RadioComponent = class {
|
|
|
64
65
|
}
|
|
65
66
|
render() {
|
|
66
67
|
const { buttonTabindex, checked, disabled, inputId, name, value } = this;
|
|
67
|
-
return (h(Host, null, h("div", { class: "admiralty-radio" }, h("input", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick,
|
|
68
|
+
return (h(Host, null, h("div", { class: "admiralty-radio" }, h("input", { class: { 'invalid': this.invalid, 'admiralty-radio': true }, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), h("label", { htmlFor: inputId }, h("slot", null)))));
|
|
68
69
|
}
|
|
69
70
|
get el() { return getElement(this); }
|
|
70
71
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"admiralty-radio.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,69BAA69B;;MCOj+B,cAAc;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IAoFzD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QACpD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE;UACpC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;SAC1B;OACF;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;KACzC,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;0BA/FwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;mBAKvB,KAAK;;EAkBhC,YAAY;;;;;;IAMV,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEhF,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAClE;GACF;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACpE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;GACF;;EAID,MAAM,iBAAiB,CAAC,KAAa;IACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAyBD,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEzE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IAC1B,aACE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,kBAC7C,GAAG,OAAO,EAAE,iBACb,QAAQ,GAAG,MAAM,GAAG,IAAI,qBACpB,OAAO,EACxB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAChC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,WAAW,GAAG,QAA4B,CAAC,GAClE,EACF,aAAO,OAAO,EAAE,OAAO,IACrB,eAAQ,CACF,CACJ,CACD,EACP;GACH;;;;;;;;AAGH,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/typography\" as typography;\n\n.admiralty-radio {\n input {\n appearance: none;\n border: 2px solid colours.$colour-admiralty-blue;\n border-radius: 1rem;\n height: 1.5rem;\n width: 1.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: 18px;\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &:checked:after {\n border-radius: 100%;\n background-color: colours.$colour-admiralty-blue;\n width: .8rem;\n height: .8rem;\n content: \" \";\n }\n\n &:disabled {\n border: 2px solid colours.$colour-textinput-text-disabled;\n }\n\n &:focus {\n outline: 3px solid colours.$colour-utility-focus;\n outline-offset: 0;\n }\n }\n label {\n font-family: typography.$font-family;\n font-weight: typography.$font-weight-light;\n position: relative;\n top: 2px;\n }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-radio',\n styleUrl: 'radio.scss',\n scoped: true,\n})\nexport class RadioComponent {\n private inputId = `admiralty-radio-${radioButtonIds++}`;\n private nativeInput!: HTMLInputElement;\n private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n @Element() el!: HTMLElement;\n\n /**\n * The tabindex of the radio button.\n * @internal\n */\n @State() buttonTabindex = -1;\n\n /**\n * The name of the radio button for use on selection within a radio group\n */\n @Prop() name: string = this.inputId;\n /**\n * The value of the radio button for use on selection within a radio group\n */\n @Prop({ mutable: true }) value: string | null;\n /**\n * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * Determines whether the radio button is selected (or checked)\n */\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /**\n * Determines whether to add the invalid stying to the radio button\n */\n @Prop() invalid: boolean = false;\n\n /**\n * Emitted when the radio button gains focus.\n */\n @Event() admiraltyFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event() admiraltyBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the radio is selected\n */\n @Event() admiraltyChange!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n /**\n * The new value of the radio may\n * match the radio group's value,\n * so we see if it should be checked.\n */\n this.updateState();\n }\n\n connectedCallback() {\n if (this.value === undefined) {\n this.value = this.inputId;\n }\n const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n if (radioGroup) {\n this.updateState();\n radioGroup.addEventListener('admiraltyChange', this.updateState);\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n radioGroup.removeEventListener('admiraltyChange', this.updateState);\n this.radioGroup = null;\n }\n }\n\n /** @internal */\n @Method()\n async setButtonTabindex(value: number) {\n this.buttonTabindex = value;\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\n if (this.nativeInput && this.checked) {\n this.nativeInput.focus();\n }\n }\n };\n\n private onClick = () => {\n this.checked = this.nativeInput.checked;\n };\n\n private onFocus = () => {\n this.admiraltyFocus.emit();\n };\n\n private onBlur = () => {\n this.admiraltyBlur.emit();\n };\n\n @Watch('checked')\n @Watch('disabled')\n render() {\n const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n return (\n <Host>\n <div class=\"admiralty-radio\">\n <input\n class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n aria-checked={`${checked}`}\n aria-hidden={disabled ? 'true' : null}\n aria-labelledby={inputId}\n id={inputId}\n name={name}\n tabindex={buttonTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n type=\"radio\"\n value={value}\n checked={checked}\n disabled={disabled ? true : null}\n ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n />\n <label htmlFor={inputId}>\n <slot />\n </label>\n </div>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
|
package/dist/esm/admiralty.js
CHANGED
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"
|
|
20
|
+
return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body",[[6,"admiralty-table-body"]]],["admiralty-table-cell",[[6,"admiralty-table-cell"]]],["admiralty-table-header",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
//# sourceMappingURL=admiralty.js.map
|
package/dist/esm/loader.js
CHANGED
|
@@ -11,7 +11,7 @@ const patchEsm = () => {
|
|
|
11
11
|
const defineCustomElements = (win, options) => {
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
|
-
return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"
|
|
14
|
+
return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body",[[6,"admiralty-table-body"]]],["admiralty-table-cell",[[6,"admiralty-table-cell"]]],["admiralty-table-header",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -25,6 +25,10 @@ export declare class RadioComponent {
|
|
|
25
25
|
* Determines whether the radio button is selected (or checked)
|
|
26
26
|
*/
|
|
27
27
|
checked?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Determines whether to add the invalid stying to the radio button
|
|
30
|
+
*/
|
|
31
|
+
invalid: boolean;
|
|
28
32
|
/**
|
|
29
33
|
* Emitted when the radio button gains focus.
|
|
30
34
|
*/
|
|
@@ -15,11 +15,20 @@ export declare class RadioGroupComponent implements ComponentInterface {
|
|
|
15
15
|
* Setting this true displays the radio options vertically (defaults to false)
|
|
16
16
|
*/
|
|
17
17
|
displayVertical: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Whether to show the input in an invalid state
|
|
20
|
+
*/
|
|
21
|
+
invalid: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* The message to show when the input is invalid
|
|
24
|
+
*/
|
|
25
|
+
invalidMessage: string;
|
|
18
26
|
valueChanged(value: any): void;
|
|
19
27
|
/**
|
|
20
28
|
* Event fired when the checked radio button changes
|
|
21
29
|
*/
|
|
22
30
|
admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;
|
|
31
|
+
invalidChanged(value: boolean): void;
|
|
23
32
|
componentDidLoad(): void;
|
|
24
33
|
private setRadioTabindex;
|
|
25
34
|
private getRadios;
|
|
@@ -378,6 +378,10 @@ export namespace Components {
|
|
|
378
378
|
* Determines whether the radio button is disabled. A button in disabled state will not fire click output events.
|
|
379
379
|
*/
|
|
380
380
|
"disabled"?: boolean;
|
|
381
|
+
/**
|
|
382
|
+
* Determines whether to add the invalid stying to the radio button
|
|
383
|
+
*/
|
|
384
|
+
"invalid": boolean;
|
|
381
385
|
/**
|
|
382
386
|
* The name of the radio button for use on selection within a radio group
|
|
383
387
|
*/
|
|
@@ -393,6 +397,14 @@ export namespace Components {
|
|
|
393
397
|
* Setting this true displays the radio options vertically (defaults to false)
|
|
394
398
|
*/
|
|
395
399
|
"displayVertical": boolean;
|
|
400
|
+
/**
|
|
401
|
+
* Whether to show the input in an invalid state
|
|
402
|
+
*/
|
|
403
|
+
"invalid": boolean;
|
|
404
|
+
/**
|
|
405
|
+
* The message to show when the input is invalid
|
|
406
|
+
*/
|
|
407
|
+
"invalidMessage": string;
|
|
396
408
|
/**
|
|
397
409
|
* The name of the control, which is submitted with the form data
|
|
398
410
|
*/
|
|
@@ -1400,6 +1412,10 @@ declare namespace LocalJSX {
|
|
|
1400
1412
|
* Determines whether the radio button is disabled. A button in disabled state will not fire click output events.
|
|
1401
1413
|
*/
|
|
1402
1414
|
"disabled"?: boolean;
|
|
1415
|
+
/**
|
|
1416
|
+
* Determines whether to add the invalid stying to the radio button
|
|
1417
|
+
*/
|
|
1418
|
+
"invalid"?: boolean;
|
|
1403
1419
|
/**
|
|
1404
1420
|
* The name of the radio button for use on selection within a radio group
|
|
1405
1421
|
*/
|
|
@@ -1426,6 +1442,14 @@ declare namespace LocalJSX {
|
|
|
1426
1442
|
* Setting this true displays the radio options vertically (defaults to false)
|
|
1427
1443
|
*/
|
|
1428
1444
|
"displayVertical"?: boolean;
|
|
1445
|
+
/**
|
|
1446
|
+
* Whether to show the input in an invalid state
|
|
1447
|
+
*/
|
|
1448
|
+
"invalid"?: boolean;
|
|
1449
|
+
/**
|
|
1450
|
+
* The message to show when the input is invalid
|
|
1451
|
+
*/
|
|
1452
|
+
"invalidMessage"?: string;
|
|
1429
1453
|
/**
|
|
1430
1454
|
* The name of the control, which is submitted with the form data
|
|
1431
1455
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.6",
|
|
4
4
|
"description": "Stencil Component Starter",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"license": "MIT",
|
|
68
68
|
"url": "https://github.com/UKHO/admiralty-design-system",
|
|
69
69
|
"repository": "git://github.com/UKHO/admiralty-design-system.git",
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "0266549980f96002ae8810433bf9adb7c674d254"
|
|
71
71
|
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as a,h as t,H as s,g as r}from"./p-a2b7bb90.js";const d='.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:" "}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:"JohnstonITC", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}';const e=class{constructor(t){i(this,t);this.admiraltyFocus=a(this,"admiraltyFocus",7);this.admiraltyBlur=a(this,"admiraltyBlur",7);this.admiraltyChange=a(this,"admiraltyChange",7);this.inputId=`admiralty-radio-${l++}`;this.radioGroup=null;this.updateState=()=>{if(this.radioGroup){this.checked=this.radioGroup.value===this.value;if(this.nativeInput&&this.checked){this.nativeInput.focus()}}};this.onClick=()=>{this.checked=this.nativeInput.checked};this.onFocus=()=>{this.admiraltyFocus.emit()};this.onBlur=()=>{this.admiraltyBlur.emit()};this.buttonTabindex=-1;this.name=this.inputId;this.value=undefined;this.disabled=false;this.checked=false}valueChanged(){this.updateState()}connectedCallback(){if(this.value===undefined){this.value=this.inputId}const i=this.radioGroup=this.el.closest("admiralty-radio-group");if(i){this.updateState();i.addEventListener("admiraltyChange",this.updateState)}}disconnectedCallback(){const i=this.radioGroup;if(i){i.removeEventListener("admiraltyChange",this.updateState);this.radioGroup=null}}async setButtonTabindex(i){this.buttonTabindex=i}render(){const{buttonTabindex:i,checked:a,disabled:r,inputId:d,name:e,value:l}=this;return t(s,null,t("div",{class:"admiralty-radio"},t("input",{"aria-checked":`${a}`,"aria-hidden":r?"true":null,"aria-labelledby":d,id:d,name:e,tabindex:i,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,class:"admiralty-radio",type:"radio",value:l,checked:a,disabled:r?true:null,ref:i=>this.nativeInput=i}),t("label",{htmlFor:d},t("slot",null))))}get el(){return r(this)}static get watchers(){return{value:["valueChanged"],checked:["render"],disabled:["render"]}}};let l=0;e.style=d;export{e as admiralty_radio};
|
|
2
|
-
//# sourceMappingURL=p-76876a23.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["radioCss","RadioComponent","this","inputId","radioButtonIds","radioGroup","updateState","checked","value","nativeInput","focus","onClick","onFocus","admiraltyFocus","emit","onBlur","admiraltyBlur","valueChanged","connectedCallback","undefined","el","closest","addEventListener","disconnectedCallback","removeEventListener","async","buttonTabindex","render","disabled","name","h","Host","class","id","tabindex","type","ref","nativeEl","htmlFor"],"sources":["./src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/typography\" as typography;\n\n.admiralty-radio {\n input {\n appearance: none;\n border: 2px solid colours.$colour-admiralty-blue;\n border-radius: 1rem;\n height: 1.5rem;\n width: 1.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: 18px;\n\n &:checked:after {\n border-radius: 100%;\n background-color: colours.$colour-admiralty-blue;\n width: .8rem;\n height: .8rem;\n content: \" \";\n }\n\n &:disabled {\n border: 2px solid colours.$colour-textinput-text-disabled;\n }\n\n &:focus {\n outline: 3px solid colours.$colour-utility-focus;\n outline-offset: 0;\n }\n }\n\n label {\n font-family: typography.$font-family;\n font-weight: typography.$font-weight-light;\n position: relative;\n top: 2px;\n }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-radio',\n styleUrl: 'radio.scss',\n scoped: true,\n})\nexport class RadioComponent {\n private inputId = `admiralty-radio-${radioButtonIds++}`;\n private nativeInput!: HTMLInputElement;\n private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n @Element() el!: HTMLElement;\n\n /**\n * The tabindex of the radio button.\n * @internal\n */\n @State() buttonTabindex = -1;\n\n /**\n * The name of the radio button for use on selection within a radio group\n */\n @Prop() name: string = this.inputId;\n /**\n * The value of the radio button for use on selection within a radio group\n */\n @Prop({ mutable: true }) value: string | null;\n /**\n * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * Determines whether the radio button is selected (or checked)\n */\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /**\n * Emitted when the radio button gains focus.\n */\n @Event() admiraltyFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event() admiraltyBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the radio is selected\n */\n @Event() admiraltyChange!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n /**\n * The new value of the radio may\n * match the radio group's value,\n * so we see if it should be checked.\n */\n this.updateState();\n }\n\n connectedCallback() {\n if (this.value === undefined) {\n this.value = this.inputId;\n }\n const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n if (radioGroup) {\n this.updateState();\n radioGroup.addEventListener('admiraltyChange', this.updateState);\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n radioGroup.removeEventListener('admiraltyChange', this.updateState);\n this.radioGroup = null;\n }\n }\n\n /** @internal */\n @Method()\n async setButtonTabindex(value: number) {\n this.buttonTabindex = value;\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\n if (this.nativeInput && this.checked) {\n this.nativeInput.focus();\n }\n }\n };\n\n private onClick = () => {\n this.checked = this.nativeInput.checked;\n };\n\n private onFocus = () => {\n this.admiraltyFocus.emit();\n };\n\n private onBlur = () => {\n this.admiraltyBlur.emit();\n };\n\n @Watch('checked')\n @Watch('disabled')\n render() {\n const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n return (\n <Host>\n <div class=\"admiralty-radio\">\n <input\n aria-checked={`${checked}`}\n aria-hidden={disabled ? 'true' : null}\n aria-labelledby={inputId}\n id={inputId}\n name={name}\n tabindex={buttonTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n class=\"admiralty-radio\"\n type=\"radio\"\n value={value}\n checked={checked}\n disabled={disabled ? true : null}\n ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n />\n <label htmlFor={inputId}>\n <slot />\n </label>\n </div>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"gEAAA,MAAMA,EAAW,gwB,MCOJC,EAAc,M,sKACjBC,KAAAC,QAAU,mBAAmBC,MAE7BF,KAAAG,WAAoD,KA+EpDH,KAAAI,YAAc,KACpB,GAAIJ,KAAKG,WAAY,CACnBH,KAAKK,QAAUL,KAAKG,WAAWG,QAAUN,KAAKM,MAC9C,GAAIN,KAAKO,aAAeP,KAAKK,QAAS,CACpCL,KAAKO,YAAYC,O,IAKfR,KAAAS,QAAU,KAChBT,KAAKK,QAAUL,KAAKO,YAAYF,OAAO,EAGjCL,KAAAU,QAAU,KAChBV,KAAKW,eAAeC,MAAM,EAGpBZ,KAAAa,OAAS,KACfb,KAAKc,cAAcF,MAAM,E,qBAzFA,E,UAKJZ,KAAKC,Q,mCAQC,M,aAKgB,K,CAkB7Cc,eAMEf,KAAKI,a,CAGPY,oBACE,GAAIhB,KAAKM,QAAUW,UAAW,CAC5BjB,KAAKM,MAAQN,KAAKC,O,CAEpB,MAAME,EAAcH,KAAKG,WAAaH,KAAKkB,GAAGC,QAAQ,yBAEtD,GAAIhB,EAAY,CACdH,KAAKI,cACLD,EAAWiB,iBAAiB,kBAAmBpB,KAAKI,Y,EAIxDiB,uBACE,MAAMlB,EAAaH,KAAKG,WACxB,GAAIA,EAAY,CACdA,EAAWmB,oBAAoB,kBAAmBtB,KAAKI,aACvDJ,KAAKG,WAAa,I,EAMtBoB,wBAAwBjB,GACtBN,KAAKwB,eAAiBlB,C,CA0BxBmB,SACE,MAAMD,eAAEA,EAAcnB,QAAEA,EAAOqB,SAAEA,EAAQzB,QAAEA,EAAO0B,KAAEA,EAAIrB,MAAEA,GAAUN,KAEpE,OACE4B,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,mBACTF,EAAA,wBACgB,GAAGvB,IAAS,cACbqB,EAAW,OAAS,KAAI,kBACpBzB,EACjB8B,GAAI9B,EACJ0B,KAAMA,EACNK,SAAUR,EACVd,QAASV,KAAKU,QACdG,OAAQb,KAAKa,OACbJ,QAAST,KAAKS,QACdqB,MAAM,kBACNG,KAAK,QACL3B,MAAOA,EACPD,QAASA,EACTqB,SAAUA,EAAW,KAAO,KAC5BQ,IAAKC,GAAanC,KAAKO,YAAc4B,IAEvCP,EAAA,SAAOQ,QAASnC,GACd2B,EAAA,e,uHAQZ,IAAI1B,EAAiB,E"}
|