@ukho/admiralty-core 0.4.5 → 0.4.6

package/dist/admiralty/p-b8dc6756.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as r,h as a,H as i,g as s}from"./p-a2b7bb90.js";const o=".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}";const d=class{constructor(a){t(this,a);this.admiraltyChange=r(this,"admiraltyChange",7);this.inputId=`admiralty-rg-${n++}`;this.setRadioTabindex=t=>{const r=this.getRadios();const a=r.find((t=>!t.disabled));const i=r.find((r=>r.value===t&&!r.disabled));if(!a&&!i){return}const s=i||a;for(const t of r){const r=t===s?0:-1;t.setButtonTabindex(r)}};this.onClick=t=>{const r=t.target&&t.target.closest("admiralty-radio");if(r){const t=this.value;const a=r.value;if(a!==t){this.value=a}}};this.name=this.inputId;this.value=undefined;this.displayVertical=false}valueChanged(t){this.setRadioTabindex(t);this.admiraltyChange.emit({value:t})}componentDidLoad(){this.setRadioTabindex(this.value)}getRadios(){return Array.from(this.el.querySelectorAll("admiralty-radio"))}render(){const{displayVertical:t}=this;return a(i,null,a("div",{class:{"radio-group":true,stack:t},role:"radiogroup",onClick:this.onClick},a("slot",null)))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"]}}};let n=0;d.style=o;export{d as admiralty_radio_group};
-//# sourceMappingURL=p-b8dc6756.entry.js.map

package/dist/admiralty/p-b8dc6756.entry.js.map

@@ -1 +0,0 @@
-{"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"}