@ukho/admiralty-core 0.4.4 → 0.4.5
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/p-76876a23.entry.js +2 -0
- package/dist/admiralty/p-76876a23.entry.js.map +1 -0
- package/dist/admiralty/p-b8dc6756.entry.js.map +1 -1
- package/dist/cjs/admiralty-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/admiralty-radio.cjs.entry.js +11 -0
- package/dist/cjs/admiralty-radio.cjs.entry.js.map +1 -1
- package/dist/collection/components/radio/radio.js +11 -0
- package/dist/collection/components/radio/radio.js.map +1 -1
- package/dist/collection/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/admiralty-radio-group.js.map +1 -1
- package/dist/components/admiralty-radio.js +11 -0
- package/dist/components/admiralty-radio.js.map +1 -1
- package/dist/esm/admiralty-radio-group.entry.js.map +1 -1
- package/dist/esm/admiralty-radio.entry.js +11 -0
- package/dist/esm/admiralty-radio.entry.js.map +1 -1
- package/dist/types/components/radio/radio.d.ts +1 -0
- package/package.json +2 -2
- package/dist/admiralty/p-58fa7bfb.entry.js +0 -2
- package/dist/admiralty/p-58fa7bfb.entry.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-27286b0d",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f7aa9b55",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-91cfb37d",[[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]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-
|
|
1
|
+
import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-27286b0d",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f7aa9b55",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-91cfb37d",[[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]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-76876a23",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-b8dc6756",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-869d7709",[[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]}]]],["p-0e8192b3",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-9f649906",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-c027f79d",[[6,"admiralty-input-error"],[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=admiralty.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["radioGroupCss","RadioGroupComponent","this","inputId","radioGroupIds","setRadioTabindex","value","radios","getRadios","first","find","radio","disabled","checked","focusable","tabindex","setButtonTabindex","onClick","e","selectedRadio","target","closest","currentValue","newValue","valueChanged","admiraltyChange","emit","componentDidLoad","Array","from","el","querySelectorAll","render","displayVertical","h","Host","class","stack","role"],"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 @Watch('value')\n valueChanged(value: any) {\n this.setRadioTabindex(value);\n
|
|
1
|
+
{"version":3,"names":["radioGroupCss","RadioGroupComponent","this","inputId","radioGroupIds","setRadioTabindex","value","radios","getRadios","first","find","radio","disabled","checked","focusable","tabindex","setButtonTabindex","onClick","e","selectedRadio","target","closest","currentValue","newValue","valueChanged","admiraltyChange","emit","componentDidLoad","Array","from","el","querySelectorAll","render","displayVertical","h","Host","class","stack","role"],"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 @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 componentDidLoad(): void {\n this.setRadioTabindex(this.value);\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(): any {\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 </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"],"mappings":"gEAAA,MAAMA,EAAgB,uV,MCQTC,EAAmB,M,0EACtBC,KAAAC,QAAU,gBAAgBC,MAkC1BF,KAAAG,iBAAoBC,IAC1B,MAAMC,EAASL,KAAKM,YAGpB,MAAMC,EAAQF,EAAOG,MAAKC,IAAUA,EAAMC,WAC1C,MAAMC,EAAUN,EAAOG,MAAKC,GAASA,EAAML,QAAUA,IAAUK,EAAMC,WAErE,IAAKH,IAAUI,EAAS,CACtB,M,CAKF,MAAMC,EAAYD,GAAWJ,EAE7B,IAAK,MAAME,KAASJ,EAAQ,CAC1B,MAAMQ,EAAWJ,IAAUG,EAAY,GAAK,EAC5CH,EAAMK,kBAAkBD,E,GAOpBb,KAAAe,QAAWC,IACjB,MAAMC,EAAgBD,EAAEE,QAAWF,EAAEE,OAAuBC,QAAQ,mBAEpE,GAAIF,EAAe,CACjB,MAAMG,EAAepB,KAAKI,MAC1B,MAAMiB,EAAWJ,EAAcb,MAE/B,GAAIiB,IAAaD,EAAc,CAC7BpB,KAAKI,MAAQiB,C,cA3DIrB,KAAKC,Q,0CAUO,K,CAGnCqB,aAAalB,GACXJ,KAAKG,iBAAiBC,GACtBJ,KAAKuB,gBAAgBC,KAAK,CAAEpB,S,CAQ9BqB,mBACEzB,KAAKG,iBAAiBH,KAAKI,M,CAwBrBE,YACN,OAAOoB,MAAMC,KAAK3B,KAAK4B,GAAGC,iBAAiB,mB,CAe7CC,SACE,MAAMC,gBAAEA,GAAoB/B,KAE5B,OACEgC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAO,CAAE,cAAe,KAAMC,MAASJ,GAAmBK,KAAK,aAAarB,QAASf,KAAKe,SAC7FiB,EAAA,c,gFAOV,IAAI9B,EAAwB,E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;
|
|
1
|
+
{"file":"admiralty-radio-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAkC5C,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;gBA9DqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,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,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpGA,qBAAa,CACT,CACD,EACP;GACH;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;","names":["h","Host"],"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 @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 componentDidLoad(): void {\n this.setRadioTabindex(this.value);\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(): any {\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 </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}
|
|
@@ -17,6 +17,9 @@ const RadioComponent = class {
|
|
|
17
17
|
this.updateState = () => {
|
|
18
18
|
if (this.radioGroup) {
|
|
19
19
|
this.checked = this.radioGroup.value === this.value;
|
|
20
|
+
if (this.nativeInput && this.checked) {
|
|
21
|
+
this.nativeInput.focus();
|
|
22
|
+
}
|
|
20
23
|
}
|
|
21
24
|
};
|
|
22
25
|
this.onClick = () => {
|
|
@@ -49,6 +52,14 @@ const RadioComponent = class {
|
|
|
49
52
|
const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));
|
|
50
53
|
if (radioGroup) {
|
|
51
54
|
this.updateState();
|
|
55
|
+
radioGroup.addEventListener('admiraltyChange', this.updateState);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
disconnectedCallback() {
|
|
59
|
+
const radioGroup = this.radioGroup;
|
|
60
|
+
if (radioGroup) {
|
|
61
|
+
radioGroup.removeEventListener('admiraltyChange', this.updateState);
|
|
62
|
+
this.radioGroup = null;
|
|
52
63
|
}
|
|
53
64
|
}
|
|
54
65
|
/** @internal */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;
|
|
1
|
+
{"file":"admiralty-radio.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IA+EzD,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;0BA1FwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;;EAkBlD,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,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,mCACgB,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,KAAK,EAAC,iBAAiB,EACvB,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,EACFA,mBAAO,OAAO,EAAE,OAAO,IACrBA,qBAAQ,CACF,CACJ,CACD,EACP;GACH;;;;;;;;AAGH,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"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"],"version":3}
|
|
@@ -6,6 +6,9 @@ export class RadioComponent {
|
|
|
6
6
|
this.updateState = () => {
|
|
7
7
|
if (this.radioGroup) {
|
|
8
8
|
this.checked = this.radioGroup.value === this.value;
|
|
9
|
+
if (this.nativeInput && this.checked) {
|
|
10
|
+
this.nativeInput.focus();
|
|
11
|
+
}
|
|
9
12
|
}
|
|
10
13
|
};
|
|
11
14
|
this.onClick = () => {
|
|
@@ -38,6 +41,14 @@ export class RadioComponent {
|
|
|
38
41
|
const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));
|
|
39
42
|
if (radioGroup) {
|
|
40
43
|
this.updateState();
|
|
44
|
+
radioGroup.addEventListener('admiraltyChange', this.updateState);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
disconnectedCallback() {
|
|
48
|
+
const radioGroup = this.radioGroup;
|
|
49
|
+
if (radioGroup) {
|
|
50
|
+
radioGroup.removeEventListener('admiraltyChange', this.updateState);
|
|
51
|
+
this.radioGroup = null;
|
|
41
52
|
}
|
|
42
53
|
}
|
|
43
54
|
/** @internal */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAC;AAO7G,MAAM,OAAO,cAAc;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAC;AAO7G,MAAM,OAAO,cAAc;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IA+EzD,gBAAW,GAAG,GAAG,EAAE;MACzB,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;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IAC1C,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC,CAAC;0BA1FwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;;EAkBlD,YAAY;IACV;;;;OAIG;IACH,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,GAAG,CAAC,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;EACH,CAAC;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;EACH,CAAC;EAED,gBAAgB;EAEhB,KAAK,CAAC,iBAAiB,CAAC,KAAa;IACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;EAC9B,CAAC;EAyBD,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEzE,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,iBAAiB;QAC1B,6BACgB,GAAG,OAAO,EAAE,iBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,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,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAChC,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,QAA4B,CAAC,GAClE;QACF,aAAO,OAAO,EAAE,OAAO;UACrB,eAAQ,CACF,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,cAAc,GAAG,CAAC,CAAC","sourcesContent":["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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,KAAK,EAAE,MAAM,eAAe,CAAC;AAQlH,MAAM,OAAO,mBAAmB;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,KAAK,EAAE,MAAM,eAAe,CAAC;AAQlH,MAAM,OAAO,mBAAmB;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAkC5C,qBAAgB,GAAG,CAAC,KAAsB,EAAE,EAAE;MACpD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;MAEhC,+DAA+D;MAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;MAED,uEAAuE;MACvE,gDAAgD;MAChD,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;IACH,CAAC,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;MAC7B,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;IACH,CAAC,CAAC;gBA9DqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;EACvC,CAAC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;EACjE,CAAC;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACpG,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,aAAa,GAAW,CAAC,CAAC","sourcesContent":["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 @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 componentDidLoad(): void {\n this.setRadioTabindex(this.value);\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(): any {\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 </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio-group.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;
|
|
1
|
+
{"file":"admiralty-radio-group.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAkC5C,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;gBA9DqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,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,CACT,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 @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 componentDidLoad(): void {\n this.setRadioTabindex(this.value);\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(): any {\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 </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}
|
|
@@ -14,6 +14,9 @@ const RadioComponent = /*@__PURE__*/ proxyCustomElement(class RadioComponent ext
|
|
|
14
14
|
this.updateState = () => {
|
|
15
15
|
if (this.radioGroup) {
|
|
16
16
|
this.checked = this.radioGroup.value === this.value;
|
|
17
|
+
if (this.nativeInput && this.checked) {
|
|
18
|
+
this.nativeInput.focus();
|
|
19
|
+
}
|
|
17
20
|
}
|
|
18
21
|
};
|
|
19
22
|
this.onClick = () => {
|
|
@@ -46,6 +49,14 @@ const RadioComponent = /*@__PURE__*/ proxyCustomElement(class RadioComponent ext
|
|
|
46
49
|
const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));
|
|
47
50
|
if (radioGroup) {
|
|
48
51
|
this.updateState();
|
|
52
|
+
radioGroup.addEventListener('admiraltyChange', this.updateState);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
disconnectedCallback() {
|
|
56
|
+
const radioGroup = this.radioGroup;
|
|
57
|
+
if (radioGroup) {
|
|
58
|
+
radioGroup.removeEventListener('admiraltyChange', this.updateState);
|
|
59
|
+
this.radioGroup = null;
|
|
49
60
|
}
|
|
50
61
|
}
|
|
51
62
|
/** @internal */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;
|
|
1
|
+
{"file":"admiralty-radio.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IA+EzD,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;0BA1FwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;;EAkBlD,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,6BACgB,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,KAAK,EAAC,iBAAiB,EACvB,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 &: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"],"version":3}
|
|
@@ -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;IAkC5C,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;gBA9DqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,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,CACT,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 @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 componentDidLoad(): void {\n this.setRadioTabindex(this.value);\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(): any {\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 </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}
|
|
@@ -13,6 +13,9 @@ const RadioComponent = class {
|
|
|
13
13
|
this.updateState = () => {
|
|
14
14
|
if (this.radioGroup) {
|
|
15
15
|
this.checked = this.radioGroup.value === this.value;
|
|
16
|
+
if (this.nativeInput && this.checked) {
|
|
17
|
+
this.nativeInput.focus();
|
|
18
|
+
}
|
|
16
19
|
}
|
|
17
20
|
};
|
|
18
21
|
this.onClick = () => {
|
|
@@ -45,6 +48,14 @@ const RadioComponent = class {
|
|
|
45
48
|
const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));
|
|
46
49
|
if (radioGroup) {
|
|
47
50
|
this.updateState();
|
|
51
|
+
radioGroup.addEventListener('admiraltyChange', this.updateState);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
disconnectedCallback() {
|
|
55
|
+
const radioGroup = this.radioGroup;
|
|
56
|
+
if (radioGroup) {
|
|
57
|
+
radioGroup.removeEventListener('admiraltyChange', this.updateState);
|
|
58
|
+
this.radioGroup = null;
|
|
48
59
|
}
|
|
49
60
|
}
|
|
50
61
|
/** @internal */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-radio.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;
|
|
1
|
+
{"file":"admiralty-radio.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IA+EzD,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;0BA1FwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;;EAkBlD,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,6BACgB,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,KAAK,EAAC,iBAAiB,EACvB,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 &: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"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5",
|
|
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": "de1bcc2e44b672d0ccb3729f648f97f7242c2f92"
|
|
71
71
|
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as a,h as t,H as r,g as d}from"./p-a2b7bb90.js";const s='.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}};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()}}async setButtonTabindex(i){this.buttonTabindex=i}render(){const{buttonTabindex:i,checked:a,disabled:d,inputId:s,name:e,value:l}=this;return t(r,null,t("div",{class:"admiralty-radio"},t("input",{"aria-checked":`${a}`,"aria-hidden":d?"true":null,"aria-labelledby":s,id:s,name:e,tabindex:i,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,class:"admiralty-radio",type:"radio",value:l,checked:a,disabled:d?true:null,ref:i=>this.nativeInput=i}),t("label",{htmlFor:s},t("slot",null))))}get el(){return d(this)}static get watchers(){return{value:["valueChanged"],checked:["render"],disabled:["render"]}}};let l=0;e.style=s;export{e as admiralty_radio};
|
|
2
|
-
//# sourceMappingURL=p-58fa7bfb.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["radioCss","RadioComponent","this","inputId","radioButtonIds","radioGroup","updateState","checked","value","onClick","nativeInput","onFocus","admiraltyFocus","emit","onBlur","admiraltyBlur","valueChanged","connectedCallback","undefined","el","closest","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 }\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 }\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,KAsEpDH,KAAAI,YAAc,KACpB,GAAIJ,KAAKG,WAAY,CACnBH,KAAKK,QAAUL,KAAKG,WAAWG,QAAUN,KAAKM,K,GAI1CN,KAAAO,QAAU,KAChBP,KAAKK,QAAUL,KAAKQ,YAAYH,OAAO,EAGjCL,KAAAS,QAAU,KAChBT,KAAKU,eAAeC,MAAM,EAGpBX,KAAAY,OAAS,KACfZ,KAAKa,cAAcF,MAAM,E,qBA7EA,E,UAKJX,KAAKC,Q,mCAQC,M,aAKgB,K,CAkB7Ca,eAMEd,KAAKI,a,CAGPW,oBACE,GAAIf,KAAKM,QAAUU,UAAW,CAC5BhB,KAAKM,MAAQN,KAAKC,O,CAEpB,MAAME,EAAcH,KAAKG,WAAaH,KAAKiB,GAAGC,QAAQ,yBAEtD,GAAIf,EAAY,CACdH,KAAKI,a,EAMTe,wBAAwBb,GACtBN,KAAKoB,eAAiBd,C,CAuBxBe,SACE,MAAMD,eAAEA,EAAcf,QAAEA,EAAOiB,SAAEA,EAAQrB,QAAEA,EAAOsB,KAAEA,EAAIjB,MAAEA,GAAUN,KAEpE,OACEwB,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,mBACTF,EAAA,wBACgB,GAAGnB,IAAS,cACbiB,EAAW,OAAS,KAAI,kBACpBrB,EACjB0B,GAAI1B,EACJsB,KAAMA,EACNK,SAAUR,EACVX,QAAST,KAAKS,QACdG,OAAQZ,KAAKY,OACbL,QAASP,KAAKO,QACdmB,MAAM,kBACNG,KAAK,QACLvB,MAAOA,EACPD,QAASA,EACTiB,SAAUA,EAAW,KAAO,KAC5BQ,IAAKC,GAAa/B,KAAKQ,YAAcuB,IAEvCP,EAAA,SAAOQ,QAAS/B,GACduB,EAAA,e,uHAQZ,IAAItB,EAAiB,E"}
|