@pod-os/elements 0.21.1-aba77d3.0 → 0.22.1

package/dist/elements/p-cde6c2e2.entry.js

@@ -1,2 +0,0 @@
-import{r as e,i as t,h as r,H as i,d as o}from"./p-c427a5e9.js";import{c as a}from"./p-c2690129.js";import{h as n,k as l,n as s,b as c,e as h}from"./p-25270f1a.js";import{p as d}from"./p-d6769f21.js";import{c as p,h as b}from"./p-669fab6c.js";import{g}from"./p-49248534.js";import{i as m}from"./p-c8d1a48e.js";const x=":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;cursor:pointer;user-select:none;z-index:2}:host(.in-item){width:100%;height:100%}:host([slot=start]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox:dir(rtl)) label{left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.checkbox-wrapper{display:flex;flex-grow:1;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:flex;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);box-sizing:border-box}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.0625rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.625rem, 65.988px)}:host(.checkbox-disabled){opacity:0.3}:host(.in-item.legacy-checkbox){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:8px;margin-bottom:8px}";const k=x;const f=":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;cursor:pointer;user-select:none;z-index:2}:host(.in-item){width:100%;height:100%}:host([slot=start]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox:dir(rtl)) label{left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.checkbox-wrapper{display:flex;flex-grow:1;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:flex;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);box-sizing:border-box}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;transition:stroke-dashoffset 90ms linear 90ms}:host(.legacy-checkbox.checkbox-disabled),:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}:host(.in-item.legacy-checkbox){margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px;margin-top:18px;margin-bottom:18px}";const u=f;const w=class{constructor(r){e(this,r);this.ionChange=t(this,"ionChange",7);this.ionFocus=t(this,"ionFocus",7);this.ionBlur=t(this,"ionBlur",7);this.ionStyle=t(this,"ionStyle",7);this.inputId=`ion-cb-${y++}`;this.inheritedAttributes={};this.hasLoggedDeprecationWarning=false;this.setChecked=e=>{const t=this.checked=e;this.ionChange.emit({checked:t,value:this.value})};this.toggleChecked=e=>{e.preventDefault();this.setFocus();this.setChecked(!this.checked);this.indeterminate=false};this.onFocus=()=>{this.ionFocus.emit()};this.onBlur=()=>{this.ionBlur.emit()};this.onClick=e=>{if(this.disabled){return}this.toggleChecked(e)};this.color=undefined;this.name=this.inputId;this.checked=false;this.indeterminate=false;this.disabled=false;this.value="on";this.labelPlacement="start";this.justify="space-between";this.alignment="center";this.legacy=undefined}connectedCallback(){this.legacyFormController=a(this.el)}componentWillLoad(){this.emitStyle();if(!this.legacyFormController.hasLegacyControl()){this.inheritedAttributes=Object.assign({},n(this.el))}}styleChanged(){this.emitStyle()}emitStyle(){const e={"interactive-disabled":this.disabled,legacy:!!this.legacy};if(this.legacyFormController.hasLegacyControl()){e["checkbox-checked"]=this.checked}this.ionStyle.emit(e)}setFocus(){if(this.focusEl){this.focusEl.focus()}}render(){const{legacyFormController:e}=this;return e.hasLegacyControl()?this.renderLegacyCheckbox():this.renderCheckbox()}renderCheckbox(){const{color:e,checked:t,disabled:o,el:a,getSVGPath:n,indeterminate:s,inheritedAttributes:c,inputId:h,justify:d,labelPlacement:m,name:x,value:k,alignment:f}=this;const u=g(this);const w=n(u,s);l(true,a,x,t?k:"",o);return r(i,{"aria-checked":s?"mixed":`${t}`,class:p(e,{[u]:true,"in-item":b("ion-item",a),"checkbox-checked":t,"checkbox-disabled":o,"checkbox-indeterminate":s,interactive:true,[`checkbox-justify-${d}`]:true,[`checkbox-alignment-${f}`]:true,[`checkbox-label-placement-${m}`]:true}),onClick:this.onClick},r("label",{class:"checkbox-wrapper"},r("input",Object.assign({type:"checkbox",checked:t?true:undefined,disabled:o,id:h,onChange:this.toggleChecked,onFocus:()=>this.onFocus(),onBlur:()=>this.onBlur(),ref:e=>this.focusEl=e},c)),r("div",{class:{"label-text-wrapper":true,"label-text-wrapper-hidden":a.textContent===""},part:"label"},r("slot",null)),r("div",{class:"native-wrapper"},r("svg",{class:"checkbox-icon",viewBox:"0 0 24 24",part:"container"},w))))}renderLegacyCheckbox(){if(!this.hasLoggedDeprecationWarning){d(`ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.\n\nExample: <ion-checkbox>Label</ion-checkbox>\nExample with aria-label: <ion-checkbox aria-label="Label"></ion-checkbox>\n\nDevelopers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`,this.el);if(this.legacy){d(`ion-checkbox is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.\nDevelopers can dismiss this warning by removing their usage of the "legacy" property and using the new checkbox syntax.`,this.el)}this.hasLoggedDeprecationWarning=true}const{color:e,checked:t,disabled:o,el:a,getSVGPath:n,indeterminate:c,inputId:h,name:m,value:x}=this;const k=g(this);const{label:f,labelId:u,labelText:w}=s(a,h);const y=n(k,c);l(true,a,m,t?x:"",o);return r(i,{"aria-labelledby":f?u:null,"aria-checked":`${t}`,"aria-hidden":o?"true":null,role:"checkbox",class:p(e,{[k]:true,"in-item":b("ion-item",a),"checkbox-checked":t,"checkbox-disabled":o,"checkbox-indeterminate":c,"legacy-checkbox":true,interactive:true}),onClick:this.onClick},r("svg",{class:"checkbox-icon",viewBox:"0 0 24 24",part:"container"},y),r("label",{htmlFor:h},w),r("input",{type:"checkbox","aria-checked":`${t}`,disabled:o,id:h,onChange:this.toggleChecked,onFocus:()=>this.onFocus(),onBlur:()=>this.onBlur(),ref:e=>this.focusEl=e}))}getSVGPath(e,t){let i=t?r("path",{d:"M6 12L18 12",part:"mark"}):r("path",{d:"M5.9,12.5l3.8,3.8l8.8-8.8",part:"mark"});if(e==="md"){i=t?r("path",{d:"M2 12H22",part:"mark"}):r("path",{d:"M1.73,12.91 8.1,19.28 22.79,4.59",part:"mark"})}return i}get el(){return o(this)}static get watchers(){return{checked:["styleChanged"],disabled:["styleChanged"]}}};let y=0;w.style={ios:k,md:u};const v=":host{--border-style:solid;--border-width:0;--inner-border-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.list-header-inner{display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);overflow:inherit;box-sizing:border-box}::slotted(ion-label){flex:1 1 auto}:host(.list-header-lines-inset),:host(.list-header-lines-none){--border-width:0}:host(.list-header-lines-full),:host(.list-header-lines-none){--inner-border-width:0}:host{--background:transparent;--color:var(--ion-color-step-850, #262626);--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));padding-right:var(--ion-safe-area-right);padding-left:calc(var(--ion-safe-area-left, 0px) + 16px);position:relative;align-items:flex-end;font-size:min(1.375rem, 56.1px);font-weight:700;letter-spacing:0}:host-context([dir=rtl]){padding-right:calc(var(--ion-safe-area-right, 0px) + 16px);padding-left:var(--ion-safe-area-left)}@supports selector(:dir(rtl)){:host(:dir(rtl)){padding-right:calc(var(--ion-safe-area-right, 0px) + 16px);padding-left:var(--ion-safe-area-left)}}::slotted(ion-button),::slotted(ion-label){margin-top:29px;margin-bottom:6px}::slotted(ion-button){--padding-top:0;--padding-bottom:0;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:3px;margin-inline-end:3px;min-height:1.4em}:host(.list-header-lines-full){--border-width:0 0 0.55px 0}:host(.list-header-lines-inset){--inner-border-width:0 0 0.55px 0}";const j=v;const z=":host{--border-style:solid;--border-width:0;--inner-border-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.list-header-inner{display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);overflow:inherit;box-sizing:border-box}::slotted(ion-label){flex:1 1 auto}:host(.list-header-lines-inset),:host(.list-header-lines-none){--border-width:0}:host(.list-header-lines-full),:host(.list-header-lines-none){--inner-border-width:0}:host{--background:transparent;--color:var(--ion-text-color, #000);--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));padding-right:var(--ion-safe-area-right);padding-left:calc(var(--ion-safe-area-left, 0px) + 16px);min-height:45px;font-size:0.875rem}:host-context([dir=rtl]){padding-right:calc(var(--ion-safe-area-right, 0px) + 16px);padding-left:var(--ion-safe-area-left)}@supports selector(:dir(rtl)){:host(:dir(rtl)){padding-right:calc(var(--ion-safe-area-right, 0px) + 16px);padding-left:var(--ion-safe-area-left)}}:host(.list-header-lines-full){--border-width:0 0 1px 0}:host(.list-header-lines-inset){--inner-border-width:0 0 1px 0}";const C=z;const $=class{constructor(t){e(this,t);this.color=undefined;this.lines=undefined}render(){const{lines:e}=this;const t=g(this);return r(i,{key:"e5fabb3ae91e6fe47c89273d1d2dba5902f77f94",class:p(this.color,{[t]:true,[`list-header-lines-${e}`]:e!==undefined})},r("div",{key:"a9cfdaa436267fbabb0d618c3932849c1b77fbd2",class:"list-header-inner"},r("slot",{key:"8ed806fd58f8f2265c5bf466886086e88ada93cc"})))}};$.style={ios:j,md:C};const L=':host{--inner-border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;max-width:100%;min-height:inherit;user-select:none;z-index:2}:host(:not(.legacy-radio)){cursor:pointer}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{box-sizing:border-box}:host(.legacy-radio) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-radio) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-radio) label{left:0}:host-context([dir=rtl]):host(.legacy-radio) label,:host-context([dir=rtl]).legacy-radio label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-radio:dir(rtl)) label{left:unset;right:unset;right:0}}}:host(.legacy-radio) label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item:not(.legacy-radio)){width:100%;height:100%}:host([slot=start]:not(.legacy-radio)),:host([slot=end]:not(.legacy-radio)){width:auto}.radio-wrapper{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-radio)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:flex;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{justify-content:start}:host(.radio-justify-end) .radio-wrapper{justify-content:end}:host(.radio-alignment-start) .radio-wrapper{align-items:start}:host(.radio-alignment-center) .radio-wrapper{align-items:center}:host(.radio-label-placement-start) .radio-wrapper{flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #3880ff)}:host(.legacy-radio){width:0.9375rem;height:1.5rem}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:"";opacity:0.2}@supports (inset-inline-start: 0){:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}}@supports not (inset-inline-start: 0){:host(.ion-focused) .radio-icon::after{left:-9px}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-9px}@supports selector(:dir(rtl)){:host(.ion-focused:dir(rtl)) .radio-icon::after{left:unset;right:unset;right:-9px}}}:host(.in-item.legacy-radio){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:11px;margin-inline-end:11px;margin-top:8px;margin-bottom:8px;display:block;position:static}:host(.in-item.legacy-radio[slot=start]){-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:21px;margin-inline-end:21px;margin-top:8px;margin-bottom:8px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}';const F=L;const T=':host{--inner-border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;max-width:100%;min-height:inherit;user-select:none;z-index:2}:host(:not(.legacy-radio)){cursor:pointer}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{box-sizing:border-box}:host(.legacy-radio) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-radio) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-radio) label{left:0}:host-context([dir=rtl]):host(.legacy-radio) label,:host-context([dir=rtl]).legacy-radio label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-radio:dir(rtl)) label{left:unset;right:unset;right:0}}}:host(.legacy-radio) label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item:not(.legacy-radio)){width:100%;height:100%}:host([slot=start]:not(.legacy-radio)),:host([slot=end]:not(.legacy-radio)){width:auto}.radio-wrapper{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-radio)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:flex;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{justify-content:start}:host(.radio-justify-end) .radio-wrapper{justify-content:end}:host(.radio-alignment-start) .radio-wrapper{align-items:start}:host(.radio-alignment-center) .radio-wrapper{align-items:center}:host(.radio-label-placement-start) .radio-wrapper{flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #3880ff);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.legacy-radio){width:1.25rem;height:1.25rem}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));transform:scale3d(0, 0, 0);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{transform:scale3d(1, 1, 1)}:host(.legacy-radio.radio-disabled),:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused.legacy-radio) .radio-icon::after{top:-12px}@supports (inset-inline-start: 0){:host(.ion-focused.legacy-radio) .radio-icon::after{inset-inline-start:-12px}}@supports not (inset-inline-start: 0){:host(.ion-focused.legacy-radio) .radio-icon::after{left:-12px}:host-context([dir=rtl]):host(.ion-focused.legacy-radio) .radio-icon::after,:host-context([dir=rtl]).ion-focused.legacy-radio .radio-icon::after{left:unset;right:unset;right:-12px}@supports selector(:dir(rtl)){:host(.ion-focused.legacy-radio:dir(rtl)) .radio-icon::after{left:unset;right:unset;right:-12px}}}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:"";opacity:0.2}:host(.in-item.legacy-radio){margin-left:0;margin-right:0;margin-top:9px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-radio[slot=start]){-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px;margin-top:11px;margin-bottom:10px}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}';const I=T;const B=class{constructor(r){e(this,r);this.ionStyle=t(this,"ionStyle",7);this.ionFocus=t(this,"ionFocus",7);this.ionBlur=t(this,"ionBlur",7);this.inputId=`ion-rb-${S++}`;this.radioGroup=null;this.hasLoggedDeprecationWarning=false;this.updateState=()=>{if(this.radioGroup){const{compareWith:e,value:t}=this.radioGroup;this.checked=m(t,this.value,e)}};this.onClick=()=>{const{radioGroup:e,checked:t,disabled:r}=this;if(r){return}if(this.legacyFormController.hasLegacyControl()){this.checked=this.nativeInput.checked;return}if(t&&(e===null||e===void 0?void 0:e.allowEmptySelection)){this.checked=false}else{this.checked=true}};this.onFocus=()=>{this.ionFocus.emit()};this.onBlur=()=>{this.ionBlur.emit()};this.checked=false;this.buttonTabindex=-1;this.color=undefined;this.name=this.inputId;this.disabled=false;this.value=undefined;this.labelPlacement="start";this.legacy=undefined;this.justify="space-between";this.alignment="center"}valueChanged(){this.updateState()}async setFocus(e){e.stopPropagation();e.preventDefault();this.el.focus()}async setButtonTabindex(e){this.buttonTabindex=e}connectedCallback(){this.legacyFormController=a(this.el);if(this.value===undefined){this.value=this.inputId}const e=this.radioGroup=this.el.closest("ion-radio-group");if(e){this.updateState();c(e,"ionValueChange",this.updateState)}}disconnectedCallback(){const e=this.radioGroup;if(e){h(e,"ionValueChange",this.updateState);this.radioGroup=null}}componentWillLoad(){this.emitStyle()}styleChanged(){this.emitStyle()}emitStyle(){const e={"interactive-disabled":this.disabled,legacy:!!this.legacy};if(this.legacyFormController.hasLegacyControl()){e["radio-checked"]=this.checked}this.ionStyle.emit(e)}get hasLabel(){return this.el.textContent!==""}renderRadioControl(){return r("div",{class:"radio-icon",part:"container"},r("div",{class:"radio-inner",part:"mark"}),r("div",{class:"radio-ripple"}))}render(){const{legacyFormController:e}=this;return e.hasLegacyControl()?this.renderLegacyRadio():this.renderRadio()}renderRadio(){const{checked:e,disabled:t,color:o,el:a,justify:n,labelPlacement:l,hasLabel:s,buttonTabindex:c,alignment:h}=this;const d=g(this);const m=b("ion-item",a);return r(i,{onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,class:p(o,{[d]:true,"in-item":m,"radio-checked":e,"radio-disabled":t,[`radio-justify-${n}`]:true,[`radio-alignment-${h}`]:true,[`radio-label-placement-${l}`]:true,"ion-activatable":!m,"ion-focusable":!m}),role:"radio","aria-checked":e?"true":"false","aria-disabled":t?"true":null,tabindex:c},r("label",{class:"radio-wrapper"},r("div",{class:{"label-text-wrapper":true,"label-text-wrapper-hidden":!s},part:"label"},r("slot",null)),r("div",{class:"native-wrapper"},this.renderRadioControl())))}renderLegacyRadio(){if(!this.hasLoggedDeprecationWarning){d(`ion-radio now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.\n\nExample: <ion-radio>Option Label</ion-radio>\nExample with aria-label: <ion-radio aria-label="Option Label"></ion-radio>\n\nDevelopers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`,this.el);if(this.legacy){d(`ion-radio is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.\n\nDevelopers can dismiss this warning by removing their usage of the "legacy" property and using the new radio syntax.`,this.el)}this.hasLoggedDeprecationWarning=true}const{inputId:e,disabled:t,checked:o,color:a,el:n,buttonTabindex:l}=this;const c=g(this);const{label:h,labelId:m,labelText:x}=s(n,e);return r(i,{"aria-checked":`${o}`,"aria-hidden":t?"true":null,"aria-labelledby":h?m:null,role:"radio",tabindex:l,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,class:p(a,{[c]:true,"in-item":b("ion-item",n),interactive:true,"radio-checked":o,"radio-disabled":t,"legacy-radio":true})},this.renderRadioControl(),r("label",{htmlFor:e},x),r("input",{type:"radio",checked:o,disabled:t,tabindex:"-1",id:e,ref:e=>this.nativeInput=e}))}get el(){return o(this)}static get watchers(){return{value:["valueChanged"],checked:["styleChanged"],color:["styleChanged"],disabled:["styleChanged"]}}};let S=0;B.style={ios:F,md:I};const V=class{constructor(r){e(this,r);this.ionChange=t(this,"ionChange",7);this.ionValueChange=t(this,"ionValueChange",7);this.inputId=`ion-rg-${A++}`;this.labelId=`${this.inputId}-lbl`;this.setRadioTabindex=e=>{const t=this.getRadios();const r=t.find((e=>!e.disabled));const i=t.find((t=>t.value===e&&!t.disabled));if(!r&&!i){return}const o=i||r;for(const e of t){const t=e===o?0:-1;e.setButtonTabindex(t)}};this.onClick=e=>{e.preventDefault();const t=e.target&&e.target.closest("ion-radio");if(t&&!t.disabled){const r=this.value;const i=t.value;if(i!==r){this.value=i;this.emitValueChange(e)}else if(this.allowEmptySelection){this.value=undefined;this.emitValueChange(e)}}};this.allowEmptySelection=false;this.compareWith=undefined;this.name=this.inputId;this.value=undefined}valueChanged(e){this.setRadioTabindex(e);this.ionValueChange.emit({value:e})}componentDidLoad(){this.valueChanged(this.value)}async connectedCallback(){const e=this.el.querySelector("ion-list-header")||this.el.querySelector("ion-item-divider");if(e){const t=this.label=e.querySelector("ion-label");if(t){this.labelId=t.id=this.name+"-lbl"}}}getRadios(){return Array.from(this.el.querySelectorAll("ion-radio"))}emitValueChange(e){const{value:t}=this;this.ionChange.emit({value:t,event:e})}onKeydown(e){const t=!!this.el.closest("ion-select-popover");if(e.target&&!this.el.contains(e.target)){return}const r=this.getRadios().filter((e=>!e.disabled));if(e.target&&r.includes(e.target)){const i=r.findIndex((t=>t===e.target));const o=r[i];let a;if(["ArrowDown","ArrowRight"].includes(e.key)){a=i===r.length-1?r[0]:r[i+1]}if(["ArrowUp","ArrowLeft"].includes(e.key)){a=i===0?r[r.length-1]:r[i-1]}if(a&&r.includes(a)){a.setFocus(e);if(!t){this.value=a.value;this.emitValueChange(e)}}if([" "].includes(e.key)){const t=this.value;this.value=this.allowEmptySelection&&this.value!==undefined?undefined:o.value;if(t!==this.value||this.allowEmptySelection){this.emitValueChange(e)}e.preventDefault()}}}render(){const{label:e,labelId:t,el:o,name:a,value:n}=this;const s=g(this);l(true,o,a,n,false);return r(i,{key:"6065674a08ac2ead25e87219b5628879a759b75a",role:"radiogroup","aria-labelledby":e?t:null,onClick:this.onClick,class:s})}get el(){return o(this)}static get watchers(){return{value:["valueChanged"]}}};let A=0;export{w as ion_checkbox,$ as ion_list_header,B as ion_radio,V as ion_radio_group};
-//# sourceMappingURL=p-cde6c2e2.entry.js.map

package/dist/elements/p-cde6c2e2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxIosCss","IonCheckboxIosStyle0","checkboxMdCss","IonCheckboxMdStyle0","Checkbox","constructor","hostRef","this","inputId","checkboxIds","inheritedAttributes","hasLoggedDeprecationWarning","setChecked","state","isChecked","checked","ionChange","emit","value","toggleChecked","ev","preventDefault","setFocus","indeterminate","onFocus","ionFocus","onBlur","ionBlur","onClick","disabled","color","undefined","name","labelPlacement","justify","alignment","legacy","connectedCallback","legacyFormController","createLegacyFormController","el","componentWillLoad","emitStyle","hasLegacyControl","Object","assign","inheritAriaAttributes","styleChanged","style","ionStyle","focusEl","focus","render","renderLegacyCheckbox","renderCheckbox","getSVGPath","mode","getIonMode","path","renderHiddenInput","h","Host","class","createColorClasses","hostContext","interactive","type","id","onChange","ref","textContent","part","viewBox","printIonWarning","label","labelId","labelText","getAriaLabel","role","htmlFor","d","listHeaderIosCss","IonListHeaderIosStyle0","listHeaderMdCss","IonListHeaderMdStyle0","ListHeader","lines","key","radioIosCss","IonRadioIosStyle0","radioMdCss","IonRadioMdStyle0","Radio","radioButtonIds","radioGroup","updateState","compareWith","radioGroupValue","isOptionSelected","nativeInput","allowEmptySelection","buttonTabindex","valueChanged","stopPropagation","setButtonTabindex","closest","addEventListener","disconnectedCallback","removeEventListener","hasLabel","renderRadioControl","renderLegacyRadio","renderRadio","inItem","tabindex","nativeEl","RadioGroup","radioGroupIds","setRadioTabindex","radios","getRadios","first","find","radio","focusable","selectedRadio","target","currentValue","newValue","emitValueChange","ionValueChange","componentDidLoad","header","querySelector","Array","from","querySelectorAll","event","onKeydown","inSelectPopover","contains","filter","includes","index","findIndex","current","next","length","previousValue"],"sources":["../node_modules/@ionic/core/dist/collection/components/checkbox/checkbox.ios.css?tag=ion-checkbox&mode=ios&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/checkbox/checkbox.md.css?tag=ion-checkbox&mode=md&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/checkbox/checkbox.js","../node_modules/@ionic/core/dist/collection/components/list-header/list-header.ios.css?tag=ion-list-header&mode=ios&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/list-header/list-header.md.css?tag=ion-list-header&mode=md&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/list-header/list-header.js","../node_modules/@ionic/core/dist/collection/components/radio/radio.ios.css?tag=ion-radio&mode=ios&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/radio/radio.md.css?tag=ion-radio&mode=md&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/radio/radio.js","../node_modules/@ionic/core/dist/collection/components/radio-group/radio-group.js"],"sourcesContent":["/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --size: Size of the checkbox icon\n   *\n   * @prop --checkbox-background: Background of the checkbox icon\n   * @prop --checkbox-background-checked: Background of the checkbox icon when checked\n   *\n   * @prop --border-color: Border color of the checkbox icon\n   * @prop --border-radius: Border radius of the checkbox icon\n   * @prop --border-width: Border width of the checkbox icon\n   * @prop --border-style: Border style of the checkbox icon\n   * @prop --border-color-checked: Border color of the checkbox icon when checked\n   *\n   * @prop --transition: Transition of the checkbox icon\n   *\n   * @prop --checkmark-color: Color of the checkbox checkmark when checked\n   * @prop --checkmark-width: Stroke width of the checkbox checkmark\n   */\n  --checkbox-background-checked: var(--ion-color-primary, #3880ff);\n  --border-color-checked: var(--ion-color-primary, #3880ff);\n  --checkmark-color: var(--ion-color-primary-contrast, #fff);\n  --checkmark-width: 1;\n  --transition: none;\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(.in-item) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Checkbox can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-checkbox)),\n:host([slot=end]:not(.legacy-checkbox)) {\n  width: auto;\n}\n\n:host(.legacy-checkbox) {\n  width: var(--size);\n  height: var(--size);\n}\n\n:host(.ion-color) {\n  --checkbox-background-checked: var(--ion-color-base);\n  --border-color-checked: var(--ion-color-base);\n  --checkmark-color: var(--ion-color-contrast);\n}\n\n:host(.legacy-checkbox) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-checkbox) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-checkbox) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-checkbox:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-checkbox) label::-moz-focus-inner {\n  border: 0;\n}\n\n.checkbox-wrapper {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  height: inherit;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.checkbox-icon {\n  border-radius: var(--border-radius);\n  position: relative;\n  transition: var(--transition);\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  background: var(--checkbox-background);\n  box-sizing: border-box;\n}\n\n:host(.legacy-checkbox) .checkbox-icon {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n:host(:not(.legacy-checkbox)) .checkbox-icon {\n  width: var(--size);\n  height: var(--size);\n}\n\n.checkbox-icon path {\n  fill: none;\n  stroke: var(--checkmark-color);\n  stroke-width: var(--checkmark-width);\n  opacity: 0;\n}\n\n:host(.checkbox-justify-space-between) .checkbox-wrapper {\n  justify-content: space-between;\n}\n\n:host(.checkbox-justify-start) .checkbox-wrapper {\n  justify-content: start;\n}\n\n:host(.checkbox-justify-end) .checkbox-wrapper {\n  justify-content: end;\n}\n\n:host(.checkbox-alignment-start) .checkbox-wrapper {\n  align-items: start;\n}\n\n:host(.checkbox-alignment-center) .checkbox-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the checkbox in LTR and\n * on the right in RTL.\n */\n:host(.checkbox-label-placement-start) .checkbox-wrapper {\n  flex-direction: row;\n}\n\n:host(.checkbox-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the checkbox should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the checkbox in LTR and\n * on the left in RTL.\n */\n:host(.checkbox-label-placement-end) .checkbox-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the checkbox should be on the start\n * when the label sits at the end.\n */\n:host(.checkbox-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.checkbox-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the checkbox should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the checkbox in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.checkbox-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n\n/**\n * Label is on top of the checkbox.\n */\n:host(.checkbox-label-placement-stacked) .checkbox-wrapper {\n  flex-direction: column;\n}\n\n:host(.checkbox-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the checkbox should be on the bottom\n   * when the label sits at the top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the checkbox.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n:host(.checkbox-checked) .checkbox-icon,\n:host(.checkbox-indeterminate) .checkbox-icon {\n  border-color: var(--border-color-checked);\n  background: var(--checkbox-background-checked);\n}\n\n:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path {\n  opacity: 1;\n}\n\n:host(.checkbox-disabled) {\n  pointer-events: none;\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --border-radius: 50%;\n  --border-width: 0.0625rem;\n  --border-style: solid;\n  --border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);\n  --checkbox-background: var(--ion-item-background, var(--ion-background-color, #fff));\n  --size: min(1.625rem, 65.988px);\n}\n\n:host(.checkbox-disabled) {\n  opacity: 0.3;\n}\n\n:host(.in-item.legacy-checkbox) {\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 8px;\n  margin-inline-end: 8px;\n  margin-top: 10px;\n  margin-bottom: 9px;\n  display: block;\n  position: static;\n}\n\n:host(.in-item.legacy-checkbox[slot=start]) {\n  -webkit-margin-start: 2px;\n  margin-inline-start: 2px;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --size: Size of the checkbox icon\n   *\n   * @prop --checkbox-background: Background of the checkbox icon\n   * @prop --checkbox-background-checked: Background of the checkbox icon when checked\n   *\n   * @prop --border-color: Border color of the checkbox icon\n   * @prop --border-radius: Border radius of the checkbox icon\n   * @prop --border-width: Border width of the checkbox icon\n   * @prop --border-style: Border style of the checkbox icon\n   * @prop --border-color-checked: Border color of the checkbox icon when checked\n   *\n   * @prop --transition: Transition of the checkbox icon\n   *\n   * @prop --checkmark-color: Color of the checkbox checkmark when checked\n   * @prop --checkmark-width: Stroke width of the checkbox checkmark\n   */\n  --checkbox-background-checked: var(--ion-color-primary, #3880ff);\n  --border-color-checked: var(--ion-color-primary, #3880ff);\n  --checkmark-color: var(--ion-color-primary-contrast, #fff);\n  --checkmark-width: 1;\n  --transition: none;\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(.in-item) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Checkbox can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-checkbox)),\n:host([slot=end]:not(.legacy-checkbox)) {\n  width: auto;\n}\n\n:host(.legacy-checkbox) {\n  width: var(--size);\n  height: var(--size);\n}\n\n:host(.ion-color) {\n  --checkbox-background-checked: var(--ion-color-base);\n  --border-color-checked: var(--ion-color-base);\n  --checkmark-color: var(--ion-color-contrast);\n}\n\n:host(.legacy-checkbox) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-checkbox) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-checkbox) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-checkbox:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-checkbox) label::-moz-focus-inner {\n  border: 0;\n}\n\n.checkbox-wrapper {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  height: inherit;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.checkbox-icon {\n  border-radius: var(--border-radius);\n  position: relative;\n  transition: var(--transition);\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  background: var(--checkbox-background);\n  box-sizing: border-box;\n}\n\n:host(.legacy-checkbox) .checkbox-icon {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n:host(:not(.legacy-checkbox)) .checkbox-icon {\n  width: var(--size);\n  height: var(--size);\n}\n\n.checkbox-icon path {\n  fill: none;\n  stroke: var(--checkmark-color);\n  stroke-width: var(--checkmark-width);\n  opacity: 0;\n}\n\n:host(.checkbox-justify-space-between) .checkbox-wrapper {\n  justify-content: space-between;\n}\n\n:host(.checkbox-justify-start) .checkbox-wrapper {\n  justify-content: start;\n}\n\n:host(.checkbox-justify-end) .checkbox-wrapper {\n  justify-content: end;\n}\n\n:host(.checkbox-alignment-start) .checkbox-wrapper {\n  align-items: start;\n}\n\n:host(.checkbox-alignment-center) .checkbox-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the checkbox in LTR and\n * on the right in RTL.\n */\n:host(.checkbox-label-placement-start) .checkbox-wrapper {\n  flex-direction: row;\n}\n\n:host(.checkbox-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the checkbox should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the checkbox in LTR and\n * on the left in RTL.\n */\n:host(.checkbox-label-placement-end) .checkbox-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the checkbox should be on the start\n * when the label sits at the end.\n */\n:host(.checkbox-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.checkbox-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the checkbox should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the checkbox in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.checkbox-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n\n/**\n * Label is on top of the checkbox.\n */\n:host(.checkbox-label-placement-stacked) .checkbox-wrapper {\n  flex-direction: column;\n}\n\n:host(.checkbox-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the checkbox should be on the bottom\n   * when the label sits at the top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the checkbox.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n:host(.checkbox-checked) .checkbox-icon,\n:host(.checkbox-indeterminate) .checkbox-icon {\n  border-color: var(--border-color-checked);\n  background: var(--checkbox-background-checked);\n}\n\n:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path {\n  opacity: 1;\n}\n\n:host(.checkbox-disabled) {\n  pointer-events: none;\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --border-radius: calc(var(--size) * .125);\n  --border-width: 2px;\n  --border-style: solid;\n  --border-color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);\n  --checkmark-width: 3;\n  --checkbox-background: var(--ion-item-background, var(--ion-background-color, #fff));\n  --transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);\n  --size: 18px;\n}\n\n.checkbox-icon path {\n  stroke-dasharray: 30;\n  stroke-dashoffset: 30;\n}\n\n:host(.checkbox-checked) .checkbox-icon path,\n:host(.checkbox-indeterminate) .checkbox-icon path {\n  stroke-dashoffset: 0;\n  transition: stroke-dashoffset 90ms linear 90ms;\n}\n\n:host(.legacy-checkbox.checkbox-disabled),\n:host(.checkbox-disabled) .label-text-wrapper {\n  opacity: 0.38;\n}\n\n:host(.checkbox-disabled) .native-wrapper {\n  opacity: 0.63;\n}\n\n:host(.in-item.legacy-checkbox) {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 18px;\n  margin-bottom: 18px;\n  display: block;\n  position: static;\n}\n\n:host(.in-item.legacy-checkbox[slot=start]) {\n  -webkit-margin-start: 4px;\n  margin-inline-start: 4px;\n  -webkit-margin-end: 36px;\n  margin-inline-end: 36px;\n  margin-top: 18px;\n  margin-bottom: 18px;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { createLegacyFormController } from \"../../utils/forms/index\";\nimport { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from \"../../utils/helpers\";\nimport { printIonWarning } from \"../../utils/logging/index\";\nimport { createColorClasses, hostContext } from \"../../utils/theme\";\nimport { getIonMode } from \"../../global/ionic-global\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n *\n * @slot - The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox.\n *\n * @part container - The container for the checkbox mark.\n * @part label - The label text describing the checkbox.\n * @part mark - The checkmark used to indicate the checked state.\n */\nexport class Checkbox {\n    constructor() {\n        this.inputId = `ion-cb-${checkboxIds++}`;\n        this.inheritedAttributes = {};\n        // TODO(FW-3100): remove this\n        // This flag ensures we log the deprecation warning at most once.\n        this.hasLoggedDeprecationWarning = false;\n        /**\n         * Sets the checked property and emits\n         * the ionChange event. Use this to update the\n         * checked state in response to user-generated\n         * actions such as a click.\n         */\n        this.setChecked = (state) => {\n            const isChecked = (this.checked = state);\n            this.ionChange.emit({\n                checked: isChecked,\n                value: this.value,\n            });\n        };\n        this.toggleChecked = (ev) => {\n            ev.preventDefault();\n            this.setFocus();\n            this.setChecked(!this.checked);\n            this.indeterminate = false;\n        };\n        this.onFocus = () => {\n            this.ionFocus.emit();\n        };\n        this.onBlur = () => {\n            this.ionBlur.emit();\n        };\n        this.onClick = (ev) => {\n            if (this.disabled) {\n                return;\n            }\n            this.toggleChecked(ev);\n        };\n        this.color = undefined;\n        this.name = this.inputId;\n        this.checked = false;\n        this.indeterminate = false;\n        this.disabled = false;\n        this.value = 'on';\n        this.labelPlacement = 'start';\n        this.justify = 'space-between';\n        this.alignment = 'center';\n        this.legacy = undefined;\n    }\n    connectedCallback() {\n        this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this\n    }\n    componentWillLoad() {\n        this.emitStyle();\n        // TODO(FW-3100): remove check\n        if (!this.legacyFormController.hasLegacyControl()) {\n            this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));\n        }\n    }\n    styleChanged() {\n        this.emitStyle();\n    }\n    emitStyle() {\n        const style = {\n            'interactive-disabled': this.disabled,\n            // TODO(FW-3100): remove this\n            legacy: !!this.legacy,\n        };\n        // TODO(FW-3100): remove this\n        if (this.legacyFormController.hasLegacyControl()) {\n            style['checkbox-checked'] = this.checked;\n        }\n        this.ionStyle.emit(style);\n    }\n    setFocus() {\n        if (this.focusEl) {\n            this.focusEl.focus();\n        }\n    }\n    // TODO(FW-3100): run contents of renderCheckbox directly instead\n    render() {\n        const { legacyFormController } = this;\n        return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();\n    }\n    renderCheckbox() {\n        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;\n        const mode = getIonMode(this);\n        const path = getSVGPath(mode, indeterminate);\n        renderHiddenInput(true, el, name, checked ? value : '', disabled);\n        return (h(Host, { \"aria-checked\": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': hostContext('ion-item', el),\n                'checkbox-checked': checked,\n                'checkbox-disabled': disabled,\n                'checkbox-indeterminate': indeterminate,\n                interactive: true,\n                [`checkbox-justify-${justify}`]: true,\n                [`checkbox-alignment-${alignment}`]: true,\n                [`checkbox-label-placement-${labelPlacement}`]: true,\n            }), onClick: this.onClick }, h(\"label\", { class: \"checkbox-wrapper\" }, h(\"input\", Object.assign({ type: \"checkbox\", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h(\"div\", { class: {\n                'label-text-wrapper': true,\n                'label-text-wrapper-hidden': el.textContent === '',\n            }, part: \"label\" }, h(\"slot\", null)), h(\"div\", { class: \"native-wrapper\" }, h(\"svg\", { class: \"checkbox-icon\", viewBox: \"0 0 24 24\", part: \"container\" }, path)))));\n    }\n    // TODO(FW-3100): remove this\n    renderLegacyCheckbox() {\n        if (!this.hasLoggedDeprecationWarning) {\n            printIonWarning(`ion-checkbox now requires providing a label with either the default slot or the \"aria-label\" attribute. To migrate, remove any usage of \"ion-label\" and pass the label text to either the component or the \"aria-label\" attribute.\n\nExample: <ion-checkbox>Label</ion-checkbox>\nExample with aria-label: <ion-checkbox aria-label=\"Label\"></ion-checkbox>\n\nDevelopers can use the \"legacy\" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);\n            if (this.legacy) {\n                printIonWarning(`ion-checkbox is being used with the \"legacy\" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.\nDevelopers can dismiss this warning by removing their usage of the \"legacy\" property and using the new checkbox syntax.`, this.el);\n            }\n            this.hasLoggedDeprecationWarning = true;\n        }\n        const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;\n        const mode = getIonMode(this);\n        const { label, labelId, labelText } = getAriaLabel(el, inputId);\n        const path = getSVGPath(mode, indeterminate);\n        renderHiddenInput(true, el, name, checked ? value : '', disabled);\n        return (h(Host, { \"aria-labelledby\": label ? labelId : null, \"aria-checked\": `${checked}`, \"aria-hidden\": disabled ? 'true' : null, role: \"checkbox\", class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': hostContext('ion-item', el),\n                'checkbox-checked': checked,\n                'checkbox-disabled': disabled,\n                'checkbox-indeterminate': indeterminate,\n                'legacy-checkbox': true,\n                interactive: true,\n            }), onClick: this.onClick }, h(\"svg\", { class: \"checkbox-icon\", viewBox: \"0 0 24 24\", part: \"container\" }, path), h(\"label\", { htmlFor: inputId }, labelText), h(\"input\", { type: \"checkbox\", \"aria-checked\": `${checked}`, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));\n    }\n    getSVGPath(mode, indeterminate) {\n        let path = indeterminate ? (h(\"path\", { d: \"M6 12L18 12\", part: \"mark\" })) : (h(\"path\", { d: \"M5.9,12.5l3.8,3.8l8.8-8.8\", part: \"mark\" }));\n        if (mode === 'md') {\n            path = indeterminate ? (h(\"path\", { d: \"M2 12H22\", part: \"mark\" })) : (h(\"path\", { d: \"M1.73,12.91 8.1,19.28 22.79,4.59\", part: \"mark\" }));\n        }\n        return path;\n    }\n    static get is() { return \"ion-checkbox\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"checkbox.ios.scss\"],\n            \"md\": [\"checkbox.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"checkbox.ios.css\"],\n            \"md\": [\"checkbox.md.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"danger\\\" | \\\"dark\\\" | \\\"light\\\" | \\\"medium\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"success\\\" | \\\"tertiary\\\" | \\\"warning\\\" | string & Record<never, never> | undefined\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The color to use from your application's color palette.\\nDefault options are: `\\\"primary\\\"`, `\\\"secondary\\\"`, `\\\"tertiary\\\"`, `\\\"success\\\"`, `\\\"warning\\\"`, `\\\"danger\\\"`, `\\\"light\\\"`, `\\\"medium\\\"`, and `\\\"dark\\\"`.\\nFor more information on colors, see [theming](/docs/theming/basics).\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": true\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the control, which is submitted with the form data.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false,\n                \"defaultValue\": \"this.inputId\"\n            },\n            \"checked\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the checkbox is selected.\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"indeterminate\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the checkbox will visually appear as indeterminate.\"\n                },\n                \"attribute\": \"indeterminate\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the user cannot interact with the checkbox.\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"value\": {\n                \"type\": \"any\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"any | null\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The value of the checkbox does not mean if it's checked or not, use the `checked`\\nproperty for that.\\n\\nThe value of a checkbox is analogous to the value of an `<input type=\\\"checkbox\\\">`,\\nit's only used when the checkbox participates in a native `<form>`.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"'on'\"\n            },\n            \"labelPlacement\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'fixed' | 'stacked'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"fixed\\\" | \\\"stacked\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Where to place the label relative to the checkbox.\\n`\\\"start\\\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\\n`\\\"end\\\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\\n`\\\"fixed\\\"`: The label has the same behavior as `\\\"start\\\"` except it also has a fixed width. Long text will be truncated with ellipses (\\\"...\\\").\\n`\\\"stacked\\\"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.\"\n                },\n                \"attribute\": \"label-placement\",\n                \"reflect\": false,\n                \"defaultValue\": \"'start'\"\n            },\n            \"justify\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'space-between'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"space-between\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to pack the label and checkbox within a line.\\n`\\\"start\\\"`: The label and checkbox will appear on the left in LTR and\\non the right in RTL.\\n`\\\"end\\\"`: The label and checkbox will appear on the right in LTR and\\non the left in RTL.\\n`\\\"space-between\\\"`: The label and checkbox will appear on opposite\\nends of the line with space between the two elements.\"\n                },\n                \"attribute\": \"justify\",\n                \"reflect\": false,\n                \"defaultValue\": \"'space-between'\"\n            },\n            \"alignment\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'center'\",\n                    \"resolved\": \"\\\"center\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to control the alignment of the checkbox and label on the cross axis.\\n`\\\"start\\\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\\n`\\\"center\\\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\"\n                },\n                \"attribute\": \"alignment\",\n                \"reflect\": false,\n                \"defaultValue\": \"'center'\"\n            },\n            \"legacy\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set the `legacy` property to `true` to forcibly use the legacy form control markup.\\nIonic will only opt checkboxes in to the modern form markup when they are\\nusing either the `aria-label` attribute or have text in the default slot. As a result,\\nthe `legacy` property should only be used as an escape hatch when you want to\\navoid this automatic opt-in behavior.\\n\\nNote that this property will be removed in an upcoming major release\\nof Ionic, and all form components will be opted-in to using the modern form markup.\"\n                },\n                \"attribute\": \"legacy\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"ionChange\",\n                \"name\": \"ionChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the checked property has changed\\nas a result of a user action such as a click.\\nThis event will not emit when programmatically\\nsetting the checked property.\"\n                },\n                \"complexType\": {\n                    \"original\": \"CheckboxChangeEventDetail\",\n                    \"resolved\": \"CheckboxChangeEventDetail<any>\",\n                    \"references\": {\n                        \"CheckboxChangeEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"./checkbox-interface\",\n                            \"id\": \"src/components/checkbox/checkbox-interface.ts::CheckboxChangeEventDetail\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"ionFocus\",\n                \"name\": \"ionFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the checkbox has focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionBlur\",\n                \"name\": \"ionBlur\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the checkbox loses focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionStyle\",\n                \"name\": \"ionStyle\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": undefined\n                        }],\n                    \"text\": \"Emitted when the styles change.\"\n                },\n                \"complexType\": {\n                    \"original\": \"StyleEventDetail\",\n                    \"resolved\": \"StyleEventDetail\",\n                    \"references\": {\n                        \"StyleEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::StyleEventDetail\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"checked\",\n                \"methodName\": \"styleChanged\"\n            }, {\n                \"propName\": \"disabled\",\n                \"methodName\": \"styleChanged\"\n            }];\n    }\n}\nlet checkboxIds = 0;\n","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --background: Background of the list header\n   * @prop --color: Color of the list header text\n   *\n   * @prop --border-color: Color of the list header border\n   * @prop --border-width: Width of the list header border\n   * @prop --border-style: Style of the list header border\n   *\n   * @prop --inner-border-width: Width of the inner list header border\n   */\n  --border-style: solid;\n  --border-width: 0;\n  --inner-border-width: 0;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 40px;\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  background: var(--background);\n  color: var(--color);\n  overflow: hidden;\n}\n\n:host(.ion-color) {\n  background: var(--ion-color-base);\n  color: var(--ion-color-contrast);\n}\n\n.list-header-inner {\n  display: flex;\n  position: relative;\n  flex: 1;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  min-height: inherit;\n  border-width: var(--inner-border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  overflow: inherit;\n  box-sizing: border-box;\n}\n\n::slotted(ion-label) {\n  flex: 1 1 auto;\n}\n\n:host(.list-header-lines-inset),\n:host(.list-header-lines-none) {\n  --border-width: 0;\n}\n\n:host(.list-header-lines-full),\n:host(.list-header-lines-none) {\n  --inner-border-width: 0;\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --background: transparent;\n  --color: var(--ion-color-step-850, #262626);\n  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));\n  /* stylelint-disable */\n  padding-right: var(--ion-safe-area-right);\n  padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);\n  /* stylelint-enable */\n  position: relative;\n  align-items: flex-end;\n  font-size: min(1.375rem, 56.1px);\n  font-weight: 700;\n  letter-spacing: 0;\n}\n:host-context([dir=rtl]) {\n  padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);\n  padding-left: var(--ion-safe-area-left);\n}\n\n@supports selector(:dir(rtl)) {\n  :host(:dir(rtl)) {\n    padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);\n    padding-left: var(--ion-safe-area-left);\n  }\n}\n\n::slotted(ion-button),\n::slotted(ion-label) {\n  margin-top: 29px;\n  margin-bottom: 6px;\n}\n\n::slotted(ion-button) {\n  --padding-top: 0;\n  --padding-bottom: 0;\n  -webkit-margin-start: 3px;\n  margin-inline-start: 3px;\n  -webkit-margin-end: 3px;\n  margin-inline-end: 3px;\n  min-height: 1.4em;\n}\n\n:host(.list-header-lines-full) {\n  --border-width: 0 0 0.55px 0;\n}\n\n:host(.list-header-lines-inset) {\n  --inner-border-width: 0 0 0.55px 0;\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --background: Background of the list header\n   * @prop --color: Color of the list header text\n   *\n   * @prop --border-color: Color of the list header border\n   * @prop --border-width: Width of the list header border\n   * @prop --border-style: Style of the list header border\n   *\n   * @prop --inner-border-width: Width of the inner list header border\n   */\n  --border-style: solid;\n  --border-width: 0;\n  --inner-border-width: 0;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 40px;\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  background: var(--background);\n  color: var(--color);\n  overflow: hidden;\n}\n\n:host(.ion-color) {\n  background: var(--ion-color-base);\n  color: var(--ion-color-contrast);\n}\n\n.list-header-inner {\n  display: flex;\n  position: relative;\n  flex: 1;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  min-height: inherit;\n  border-width: var(--inner-border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  overflow: inherit;\n  box-sizing: border-box;\n}\n\n::slotted(ion-label) {\n  flex: 1 1 auto;\n}\n\n:host(.list-header-lines-inset),\n:host(.list-header-lines-none) {\n  --border-width: 0;\n}\n\n:host(.list-header-lines-full),\n:host(.list-header-lines-none) {\n  --inner-border-width: 0;\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --background: transparent;\n  --color: var(--ion-text-color, #000);\n  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));\n  /* stylelint-disable */\n  padding-right: var(--ion-safe-area-right);\n  padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);\n  /* stylelint-enable */\n  min-height: 45px;\n  font-size: 0.875rem;\n}\n:host-context([dir=rtl]) {\n  padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);\n  padding-left: var(--ion-safe-area-left);\n}\n\n@supports selector(:dir(rtl)) {\n  :host(:dir(rtl)) {\n    padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);\n    padding-left: var(--ion-safe-area-left);\n  }\n}\n\n:host(.list-header-lines-full) {\n  --border-width: 0 0 1px 0;\n}\n\n:host(.list-header-lines-inset) {\n  --inner-border-width: 0 0 1px 0;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { createColorClasses } from \"../../utils/theme\";\nimport { getIonMode } from \"../../global/ionic-global\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n */\nexport class ListHeader {\n    constructor() {\n        this.color = undefined;\n        this.lines = undefined;\n    }\n    render() {\n        const { lines } = this;\n        const mode = getIonMode(this);\n        return (h(Host, { key: 'e5fabb3ae91e6fe47c89273d1d2dba5902f77f94', class: createColorClasses(this.color, {\n                [mode]: true,\n                [`list-header-lines-${lines}`]: lines !== undefined,\n            }) }, h(\"div\", { key: 'a9cfdaa436267fbabb0d618c3932849c1b77fbd2', class: \"list-header-inner\" }, h(\"slot\", { key: '8ed806fd58f8f2265c5bf466886086e88ada93cc' }))));\n    }\n    static get is() { return \"ion-list-header\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"list-header.ios.scss\"],\n            \"md\": [\"list-header.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"list-header.ios.css\"],\n            \"md\": [\"list-header.md.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"danger\\\" | \\\"dark\\\" | \\\"light\\\" | \\\"medium\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"success\\\" | \\\"tertiary\\\" | \\\"warning\\\" | string & Record<never, never> | undefined\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The color to use from your application's color palette.\\nDefault options are: `\\\"primary\\\"`, `\\\"secondary\\\"`, `\\\"tertiary\\\"`, `\\\"success\\\"`, `\\\"warning\\\"`, `\\\"danger\\\"`, `\\\"light\\\"`, `\\\"medium\\\"`, and `\\\"dark\\\"`.\\nFor more information on colors, see [theming](/docs/theming/basics).\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": true\n            },\n            \"lines\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'full' | 'inset' | 'none'\",\n                    \"resolved\": \"\\\"full\\\" | \\\"inset\\\" | \\\"none\\\" | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How the bottom border should be displayed on the list header.\"\n                },\n                \"attribute\": \"lines\",\n                \"reflect\": false\n            }\n        };\n    }\n}\n","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --color: Color of the radio\n   * @prop --color-checked: Color of the checked radio\n   * @prop --border-radius: Border radius of the radio\n   * @prop --inner-border-radius: Border radius of the inner checked radio\n   */\n  --inner-border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box;\n  max-width: 100%;\n  min-height: inherit;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(:not(.legacy-radio)) {\n  cursor: pointer;\n}\n\n:host(.radio-disabled) {\n  pointer-events: none;\n}\n\n.radio-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  contain: layout size style;\n}\n\n.radio-icon,\n.radio-inner {\n  box-sizing: border-box;\n}\n\n:host(.legacy-radio) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-radio) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-radio) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-radio) label, :host-context([dir=rtl]).legacy-radio label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-radio:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-radio) label::-moz-focus-inner {\n  border: 0;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host(.in-item:not(.legacy-radio)) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Radio can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-radio)),\n:host([slot=end]:not(.legacy-radio)) {\n  width: auto;\n}\n\n.radio-wrapper {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  align-items: center;\n  height: inherit;\n  min-height: inherit;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-radio)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.radio-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n:host(.radio-justify-space-between) .radio-wrapper {\n  justify-content: space-between;\n}\n\n:host(.radio-justify-start) .radio-wrapper {\n  justify-content: start;\n}\n\n:host(.radio-justify-end) .radio-wrapper {\n  justify-content: end;\n}\n\n:host(.radio-alignment-start) .radio-wrapper {\n  align-items: start;\n}\n\n:host(.radio-alignment-center) .radio-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the radio in LTR and\n * on the right in RTL.\n */\n:host(.radio-label-placement-start) .radio-wrapper {\n  flex-direction: row;\n}\n\n:host(.radio-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the radio should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the radio in LTR and\n * on the left in RTL.\n */\n:host(.radio-label-placement-end) .radio-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the radio should be on the start\n * when the label sits at the end.\n */\n:host(.radio-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.radio-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the radio should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the radio in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.radio-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n}\n\n/**\n * Label is on top of the radio.\n */\n:host(.radio-label-placement-stacked) .radio-wrapper {\n  flex-direction: column;\n}\n\n:host(.radio-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the radio should be on the bottom\n   * when the label sits on top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the radio.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --color-checked: var(--ion-color-primary, #3880ff);\n}\n\n:host(.legacy-radio) {\n  width: 0.9375rem;\n  height: 1.5rem;\n}\n\n:host(.ion-color.radio-checked) .radio-inner {\n  border-color: var(--ion-color-base);\n}\n\n.item-radio.item-ios ion-label {\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n}\n\n.radio-inner {\n  width: 33%;\n  height: 50%;\n}\n\n:host(.radio-checked) .radio-inner {\n  transform: rotate(45deg);\n  border-width: 0.125rem;\n  border-top-width: 0;\n  border-left-width: 0;\n  border-style: solid;\n  border-color: var(--color-checked);\n}\n\n:host(.radio-disabled) {\n  opacity: 0.3;\n}\n\n:host(.ion-focused) .radio-icon::after {\n  border-radius: var(--inner-border-radius);\n  top: -8px;\n  display: block;\n  position: absolute;\n  width: 36px;\n  height: 36px;\n  background: var(--ion-color-primary-tint, #4c8dff);\n  content: \"\";\n  opacity: 0.2;\n}\n@supports (inset-inline-start: 0) {\n  :host(.ion-focused) .radio-icon::after {\n    inset-inline-start: -9px;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.ion-focused) .radio-icon::after {\n    left: -9px;\n  }\n  :host-context([dir=rtl]):host(.ion-focused) .radio-icon::after, :host-context([dir=rtl]).ion-focused .radio-icon::after {\n    left: unset;\n    right: unset;\n    right: -9px;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.ion-focused:dir(rtl)) .radio-icon::after {\n      left: unset;\n      right: unset;\n      right: -9px;\n    }\n  }\n}\n\n:host(.in-item.legacy-radio) {\n  -webkit-margin-start: 8px;\n  margin-inline-start: 8px;\n  -webkit-margin-end: 11px;\n  margin-inline-end: 11px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n  display: block;\n  position: static;\n}\n\n:host(.in-item.legacy-radio[slot=start]) {\n  -webkit-margin-start: 3px;\n  margin-inline-start: 3px;\n  -webkit-margin-end: 21px;\n  margin-inline-end: 21px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n}\n\n.native-wrapper .radio-icon {\n  width: 0.9375rem;\n  height: 1.5rem;\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --color: Color of the radio\n   * @prop --color-checked: Color of the checked radio\n   * @prop --border-radius: Border radius of the radio\n   * @prop --inner-border-radius: Border radius of the inner checked radio\n   */\n  --inner-border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box;\n  max-width: 100%;\n  min-height: inherit;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(:not(.legacy-radio)) {\n  cursor: pointer;\n}\n\n:host(.radio-disabled) {\n  pointer-events: none;\n}\n\n.radio-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  contain: layout size style;\n}\n\n.radio-icon,\n.radio-inner {\n  box-sizing: border-box;\n}\n\n:host(.legacy-radio) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-radio) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-radio) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-radio) label, :host-context([dir=rtl]).legacy-radio label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-radio:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-radio) label::-moz-focus-inner {\n  border: 0;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host(.in-item:not(.legacy-radio)) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Radio can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-radio)),\n:host([slot=end]:not(.legacy-radio)) {\n  width: auto;\n}\n\n.radio-wrapper {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  align-items: center;\n  height: inherit;\n  min-height: inherit;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-radio)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.radio-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n:host(.radio-justify-space-between) .radio-wrapper {\n  justify-content: space-between;\n}\n\n:host(.radio-justify-start) .radio-wrapper {\n  justify-content: start;\n}\n\n:host(.radio-justify-end) .radio-wrapper {\n  justify-content: end;\n}\n\n:host(.radio-alignment-start) .radio-wrapper {\n  align-items: start;\n}\n\n:host(.radio-alignment-center) .radio-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the radio in LTR and\n * on the right in RTL.\n */\n:host(.radio-label-placement-start) .radio-wrapper {\n  flex-direction: row;\n}\n\n:host(.radio-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the radio should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the radio in LTR and\n * on the left in RTL.\n */\n:host(.radio-label-placement-end) .radio-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the radio should be on the start\n * when the label sits at the end.\n */\n:host(.radio-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.radio-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the radio should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the radio in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.radio-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n}\n\n/**\n * Label is on top of the radio.\n */\n:host(.radio-label-placement-stacked) .radio-wrapper {\n  flex-direction: column;\n}\n\n:host(.radio-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the radio should be on the bottom\n   * when the label sits on top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the radio.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);\n  --color-checked: var(--ion-color-primary, #3880ff);\n  --border-width: 0.125rem;\n  --border-style: solid;\n  --border-radius: 50%;\n}\n\n:host(.legacy-radio) {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:host(.ion-color) .radio-inner {\n  background: var(--ion-color-base);\n}\n\n:host(.ion-color.radio-checked) .radio-icon {\n  border-color: var(--ion-color-base);\n}\n\n.radio-icon {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  border-radius: var(--border-radius);\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--color);\n}\n\n.radio-inner {\n  border-radius: var(--inner-border-radius);\n  width: calc(50% + var(--border-width));\n  height: calc(50% + var(--border-width));\n  transform: scale3d(0, 0, 0);\n  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);\n  background: var(--color-checked);\n}\n\n:host(.radio-checked) .radio-icon {\n  border-color: var(--color-checked);\n}\n\n:host(.radio-checked) .radio-inner {\n  transform: scale3d(1, 1, 1);\n}\n\n:host(.legacy-radio.radio-disabled),\n:host(.radio-disabled) .label-text-wrapper {\n  opacity: 0.38;\n}\n\n:host(.radio-disabled) .native-wrapper {\n  opacity: 0.63;\n}\n\n:host(.ion-focused.legacy-radio) .radio-icon::after {\n  top: -12px;\n}\n@supports (inset-inline-start: 0) {\n  :host(.ion-focused.legacy-radio) .radio-icon::after {\n    inset-inline-start: -12px;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.ion-focused.legacy-radio) .radio-icon::after {\n    left: -12px;\n  }\n  :host-context([dir=rtl]):host(.ion-focused.legacy-radio) .radio-icon::after, :host-context([dir=rtl]).ion-focused.legacy-radio .radio-icon::after {\n    left: unset;\n    right: unset;\n    right: -12px;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.ion-focused.legacy-radio:dir(rtl)) .radio-icon::after {\n      left: unset;\n      right: unset;\n      right: -12px;\n    }\n  }\n}\n\n:host(.ion-focused) .radio-icon::after {\n  border-radius: var(--inner-border-radius);\n  display: block;\n  position: absolute;\n  width: 36px;\n  height: 36px;\n  background: var(--ion-color-primary-tint, #4c8dff);\n  content: \"\";\n  opacity: 0.2;\n}\n\n:host(.in-item.legacy-radio) {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 9px;\n  margin-bottom: 9px;\n  display: block;\n  position: static;\n}\n\n:host(.in-item.legacy-radio[slot=start]) {\n  -webkit-margin-start: 4px;\n  margin-inline-start: 4px;\n  -webkit-margin-end: 36px;\n  margin-inline-end: 36px;\n  margin-top: 11px;\n  margin-bottom: 10px;\n}\n\n.native-wrapper .radio-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { createLegacyFormController, isOptionSelected } from \"../../utils/forms/index\";\nimport { addEventListener, getAriaLabel, removeEventListener } from \"../../utils/helpers\";\nimport { printIonWarning } from \"../../utils/logging/index\";\nimport { createColorClasses, hostContext } from \"../../utils/theme\";\nimport { getIonMode } from \"../../global/ionic-global\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n *\n * @slot - The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio.\n *\n * @part container - The container for the radio mark.\n * @part label - The label text describing the radio.\n * @part mark - The checkmark or dot used to indicate the checked state.\n */\nexport class Radio {\n    constructor() {\n        this.inputId = `ion-rb-${radioButtonIds++}`;\n        this.radioGroup = null;\n        // This flag ensures we log the deprecation warning at most once.\n        this.hasLoggedDeprecationWarning = false;\n        this.updateState = () => {\n            if (this.radioGroup) {\n                const { compareWith, value: radioGroupValue } = this.radioGroup;\n                this.checked = isOptionSelected(radioGroupValue, this.value, compareWith);\n            }\n        };\n        this.onClick = () => {\n            const { radioGroup, checked, disabled } = this;\n            if (disabled) {\n                return;\n            }\n            /**\n             * The legacy control uses a native input inside\n             * of the radio host, so we can set this.checked\n             * to the state of the nativeInput. RadioGroup\n             * will prevent the native input from checking if\n             * allowEmptySelection=\"false\" by calling ev.preventDefault().\n             */\n            if (this.legacyFormController.hasLegacyControl()) {\n                this.checked = this.nativeInput.checked;\n                return;\n            }\n            /**\n             * The modern control does not use a native input\n             * inside of the radio host, so we cannot rely on the\n             * ev.preventDefault() behavior above. If the radio\n             * is checked and the parent radio group allows for empty\n             * selection, then we can set the checked state to false.\n             * Otherwise, the checked state should always be set\n             * to true because the checked state cannot be toggled.\n             */\n            if (checked && (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.allowEmptySelection)) {\n                this.checked = false;\n            }\n            else {\n                this.checked = true;\n            }\n        };\n        this.onFocus = () => {\n            this.ionFocus.emit();\n        };\n        this.onBlur = () => {\n            this.ionBlur.emit();\n        };\n        this.checked = false;\n        this.buttonTabindex = -1;\n        this.color = undefined;\n        this.name = this.inputId;\n        this.disabled = false;\n        this.value = undefined;\n        this.labelPlacement = 'start';\n        this.legacy = undefined;\n        this.justify = 'space-between';\n        this.alignment = 'center';\n    }\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    /** @internal */\n    async setFocus(ev) {\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.el.focus();\n    }\n    /** @internal */\n    async setButtonTabindex(value) {\n        this.buttonTabindex = value;\n    }\n    connectedCallback() {\n        this.legacyFormController = createLegacyFormController(this.el);\n        if (this.value === undefined) {\n            this.value = this.inputId;\n        }\n        const radioGroup = (this.radioGroup = this.el.closest('ion-radio-group'));\n        if (radioGroup) {\n            this.updateState();\n            addEventListener(radioGroup, 'ionValueChange', this.updateState);\n        }\n    }\n    disconnectedCallback() {\n        const radioGroup = this.radioGroup;\n        if (radioGroup) {\n            removeEventListener(radioGroup, 'ionValueChange', this.updateState);\n            this.radioGroup = null;\n        }\n    }\n    componentWillLoad() {\n        this.emitStyle();\n    }\n    styleChanged() {\n        this.emitStyle();\n    }\n    emitStyle() {\n        const style = {\n            'interactive-disabled': this.disabled,\n            // TODO(FW-3125): remove this\n            legacy: !!this.legacy,\n        };\n        if (this.legacyFormController.hasLegacyControl()) {\n            style['radio-checked'] = this.checked;\n        }\n        this.ionStyle.emit(style);\n    }\n    get hasLabel() {\n        return this.el.textContent !== '';\n    }\n    renderRadioControl() {\n        return (h(\"div\", { class: \"radio-icon\", part: \"container\" }, h(\"div\", { class: \"radio-inner\", part: \"mark\" }), h(\"div\", { class: \"radio-ripple\" })));\n    }\n    render() {\n        const { legacyFormController } = this;\n        return legacyFormController.hasLegacyControl() ? this.renderLegacyRadio() : this.renderRadio();\n    }\n    renderRadio() {\n        const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;\n        const mode = getIonMode(this);\n        const inItem = hostContext('ion-item', el);\n        return (h(Host, { onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': inItem,\n                'radio-checked': checked,\n                'radio-disabled': disabled,\n                [`radio-justify-${justify}`]: true,\n                [`radio-alignment-${alignment}`]: true,\n                [`radio-label-placement-${labelPlacement}`]: true,\n                // Focus and active styling should not apply when the radio is in an item\n                'ion-activatable': !inItem,\n                'ion-focusable': !inItem,\n            }), role: \"radio\", \"aria-checked\": checked ? 'true' : 'false', \"aria-disabled\": disabled ? 'true' : null, tabindex: buttonTabindex }, h(\"label\", { class: \"radio-wrapper\" }, h(\"div\", { class: {\n                'label-text-wrapper': true,\n                'label-text-wrapper-hidden': !hasLabel,\n            }, part: \"label\" }, h(\"slot\", null)), h(\"div\", { class: \"native-wrapper\" }, this.renderRadioControl()))));\n    }\n    renderLegacyRadio() {\n        if (!this.hasLoggedDeprecationWarning) {\n            printIonWarning(`ion-radio now requires providing a label with either the default slot or the \"aria-label\" attribute. To migrate, remove any usage of \"ion-label\" and pass the label text to either the component or the \"aria-label\" attribute.\n\nExample: <ion-radio>Option Label</ion-radio>\nExample with aria-label: <ion-radio aria-label=\"Option Label\"></ion-radio>\n\nDevelopers can use the \"legacy\" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);\n            if (this.legacy) {\n                printIonWarning(`ion-radio is being used with the \"legacy\" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.\n\nDevelopers can dismiss this warning by removing their usage of the \"legacy\" property and using the new radio syntax.`, this.el);\n            }\n            this.hasLoggedDeprecationWarning = true;\n        }\n        const { inputId, disabled, checked, color, el, buttonTabindex } = this;\n        const mode = getIonMode(this);\n        const { label, labelId, labelText } = getAriaLabel(el, inputId);\n        return (h(Host, { \"aria-checked\": `${checked}`, \"aria-hidden\": disabled ? 'true' : null, \"aria-labelledby\": label ? labelId : null, role: \"radio\", tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': hostContext('ion-item', el),\n                interactive: true,\n                'radio-checked': checked,\n                'radio-disabled': disabled,\n                'legacy-radio': true,\n            }) }, this.renderRadioControl(), h(\"label\", { htmlFor: inputId }, labelText), h(\"input\", { type: \"radio\", checked: checked, disabled: disabled, tabindex: \"-1\", id: inputId, ref: (nativeEl) => (this.nativeInput = nativeEl) })));\n    }\n    static get is() { return \"ion-radio\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"radio.ios.scss\"],\n            \"md\": [\"radio.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"radio.ios.css\"],\n            \"md\": [\"radio.md.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"danger\\\" | \\\"dark\\\" | \\\"light\\\" | \\\"medium\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"success\\\" | \\\"tertiary\\\" | \\\"warning\\\" | string & Record<never, never> | undefined\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The color to use from your application's color palette.\\nDefault options are: `\\\"primary\\\"`, `\\\"secondary\\\"`, `\\\"tertiary\\\"`, `\\\"success\\\"`, `\\\"warning\\\"`, `\\\"danger\\\"`, `\\\"light\\\"`, `\\\"medium\\\"`, and `\\\"dark\\\"`.\\nFor more information on colors, see [theming](/docs/theming/basics).\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": true\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the control, which is submitted with the form data.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false,\n                \"defaultValue\": \"this.inputId\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the user cannot interact with the radio.\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"value\": {\n                \"type\": \"any\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"any | null\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"the value of the radio.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false\n            },\n            \"labelPlacement\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'fixed' | 'stacked'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"fixed\\\" | \\\"stacked\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Where to place the label relative to the radio.\\n`\\\"start\\\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\\n`\\\"end\\\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\\n`\\\"fixed\\\"`: The label has the same behavior as `\\\"start\\\"` except it also has a fixed width. Long text will be truncated with ellipses (\\\"...\\\").\\n`\\\"stacked\\\"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.\"\n                },\n                \"attribute\": \"label-placement\",\n                \"reflect\": false,\n                \"defaultValue\": \"'start'\"\n            },\n            \"legacy\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set the `legacy` property to `true` to forcibly use the legacy form control markup.\\nIonic will only opt components in to the modern form markup when they are\\nusing either the `aria-label` attribute or the default slot that contains\\nthe label text. As a result, the `legacy` property should only be used as\\nan escape hatch when you want to avoid this automatic opt-in behavior.\\nNote that this property will be removed in an upcoming major release\\nof Ionic, and all form components will be opted-in to using the modern form markup.\"\n                },\n                \"attribute\": \"legacy\",\n                \"reflect\": false\n            },\n            \"justify\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'space-between'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"space-between\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to pack the label and radio within a line.\\n`\\\"start\\\"`: The label and radio will appear on the left in LTR and\\non the right in RTL.\\n`\\\"end\\\"`: The label and radio will appear on the right in LTR and\\non the left in RTL.\\n`\\\"space-between\\\"`: The label and radio will appear on opposite\\nends of the line with space between the two elements.\"\n                },\n                \"attribute\": \"justify\",\n                \"reflect\": false,\n                \"defaultValue\": \"'space-between'\"\n            },\n            \"alignment\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'center'\",\n                    \"resolved\": \"\\\"center\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to control the alignment of the radio and label on the cross axis.\\n`\\\"start\\\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\\n`\\\"center\\\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\"\n                },\n                \"attribute\": \"alignment\",\n                \"reflect\": false,\n                \"defaultValue\": \"'center'\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"checked\": {},\n            \"buttonTabindex\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"ionStyle\",\n                \"name\": \"ionStyle\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": undefined\n                        }],\n                    \"text\": \"Emitted when the styles change.\"\n                },\n                \"complexType\": {\n                    \"original\": \"StyleEventDetail\",\n                    \"resolved\": \"StyleEventDetail\",\n                    \"references\": {\n                        \"StyleEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::StyleEventDetail\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"ionFocus\",\n                \"name\": \"ionFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the radio button has focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionBlur\",\n                \"name\": \"ionBlur\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the radio button loses focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"(ev: globalThis.Event) => Promise<void>\",\n                    \"parameters\": [{\n                            \"name\": \"ev\",\n                            \"type\": \"Event\",\n                            \"docs\": \"\"\n                        }],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        },\n                        \"globalThis\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::globalThis\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"\",\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": undefined\n                        }]\n                }\n            },\n            \"setButtonTabindex\": {\n                \"complexType\": {\n                    \"signature\": \"(value: number) => Promise<void>\",\n                    \"parameters\": [{\n                            \"name\": \"value\",\n                            \"type\": \"number\",\n                            \"docs\": \"\"\n                        }],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"\",\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": undefined\n                        }]\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"value\",\n                \"methodName\": \"valueChanged\"\n            }, {\n                \"propName\": \"checked\",\n                \"methodName\": \"styleChanged\"\n            }, {\n                \"propName\": \"color\",\n                \"methodName\": \"styleChanged\"\n            }, {\n                \"propName\": \"disabled\",\n                \"methodName\": \"styleChanged\"\n            }];\n    }\n}\nlet radioButtonIds = 0;\n","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { renderHiddenInput } from \"../../utils/helpers\";\nimport { getIonMode } from \"../../global/ionic-global\";\nexport class RadioGroup {\n    constructor() {\n        this.inputId = `ion-rg-${radioGroupIds++}`;\n        this.labelId = `${this.inputId}-lbl`;\n        this.setRadioTabindex = (value) => {\n            const radios = this.getRadios();\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            if (!first && !checked) {\n                return;\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            for (const radio of radios) {\n                const tabindex = radio === focusable ? 0 : -1;\n                radio.setButtonTabindex(tabindex);\n            }\n        };\n        this.onClick = (ev) => {\n            ev.preventDefault();\n            /**\n             * The Radio Group component mandates that only one radio button\n             * within the group can be selected at any given time. Since `ion-radio`\n             * is a shadow DOM component, it cannot natively perform this behavior\n             * using the `name` attribute.\n             */\n            const selectedRadio = ev.target && ev.target.closest('ion-radio');\n            /**\n             * Our current disabled prop definition causes Stencil to mark it\n             * as optional. While this is not desired, fixing this behavior\n             * in Stencil is a significant breaking change, so this effort is\n             * being de-risked in STENCIL-917. Until then, we compromise\n             * here by checking for falsy `disabled` values instead of strictly\n             * checking `disabled === false`.\n             */\n            if (selectedRadio && !selectedRadio.disabled) {\n                const currentValue = this.value;\n                const newValue = selectedRadio.value;\n                if (newValue !== currentValue) {\n                    this.value = newValue;\n                    this.emitValueChange(ev);\n                }\n                else if (this.allowEmptySelection) {\n                    this.value = undefined;\n                    this.emitValueChange(ev);\n                }\n            }\n        };\n        this.allowEmptySelection = false;\n        this.compareWith = undefined;\n        this.name = this.inputId;\n        this.value = undefined;\n    }\n    valueChanged(value) {\n        this.setRadioTabindex(value);\n        this.ionValueChange.emit({ value });\n    }\n    componentDidLoad() {\n        /**\n         * There's an issue when assigning a value to the radio group\n         * within the Angular primary content (rendering within the\n         * app component template). When the template is isolated to a route,\n         * the value is assigned correctly.\n         * To address this issue, we need to ensure that the watcher is\n         * called after the component has finished loading,\n         * allowing the emit to be dispatched correctly.\n         */\n        this.valueChanged(this.value);\n    }\n    async connectedCallback() {\n        // Get the list header if it exists and set the id\n        // this is used to set aria-labelledby\n        const header = this.el.querySelector('ion-list-header') || this.el.querySelector('ion-item-divider');\n        if (header) {\n            const label = (this.label = header.querySelector('ion-label'));\n            if (label) {\n                this.labelId = label.id = this.name + '-lbl';\n            }\n        }\n    }\n    getRadios() {\n        return Array.from(this.el.querySelectorAll('ion-radio'));\n    }\n    /**\n     * Emits an `ionChange` event.\n     *\n     * This API should be called for user committed changes.\n     * This API should not be used for external value changes.\n     */\n    emitValueChange(event) {\n        const { value } = this;\n        this.ionChange.emit({ value, event });\n    }\n    onKeydown(ev) {\n        const inSelectPopover = !!this.el.closest('ion-select-popover');\n        if (ev.target && !this.el.contains(ev.target)) {\n            return;\n        }\n        // Get all radios inside of the radio group and then\n        // filter out disabled radios since we need to skip those\n        const radios = this.getRadios().filter((radio) => !radio.disabled);\n        // Only move the radio if the current focus is in the radio group\n        if (ev.target && radios.includes(ev.target)) {\n            const index = radios.findIndex((radio) => radio === ev.target);\n            const current = radios[index];\n            let next;\n            // If hitting arrow down or arrow right, move to the next radio\n            // If we're on the last radio, move to the first radio\n            if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {\n                next = index === radios.length - 1 ? radios[0] : radios[index + 1];\n            }\n            // If hitting arrow up or arrow left, move to the previous radio\n            // If we're on the first radio, move to the last radio\n            if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {\n                next = index === 0 ? radios[radios.length - 1] : radios[index - 1];\n            }\n            if (next && radios.includes(next)) {\n                next.setFocus(ev);\n                if (!inSelectPopover) {\n                    this.value = next.value;\n                    this.emitValueChange(ev);\n                }\n            }\n            // Update the radio group value when a user presses the\n            // space bar on top of a selected radio\n            if ([' '].includes(ev.key)) {\n                const previousValue = this.value;\n                this.value = this.allowEmptySelection && this.value !== undefined ? undefined : current.value;\n                if (previousValue !== this.value || this.allowEmptySelection) {\n                    /**\n                     * Value change should only be emitted if the value is different,\n                     * such as selecting a new radio with the space bar or if\n                     * the radio group allows for empty selection and the user\n                     * is deselecting a checked radio.\n                     */\n                    this.emitValueChange(ev);\n                }\n                // Prevent browsers from jumping\n                // to the bottom of the screen\n                ev.preventDefault();\n            }\n        }\n    }\n    render() {\n        const { label, labelId, el, name, value } = this;\n        const mode = getIonMode(this);\n        renderHiddenInput(true, el, name, value, false);\n        return h(Host, { key: '6065674a08ac2ead25e87219b5628879a759b75a', role: \"radiogroup\", \"aria-labelledby\": label ? labelId : null, onClick: this.onClick, class: mode });\n    }\n    static get is() { return \"ion-radio-group\"; }\n    static get properties() {\n        return {\n            \"allowEmptySelection\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the radios can be deselected.\"\n                },\n                \"attribute\": \"allow-empty-selection\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"compareWith\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | RadioGroupCompareFn | null\",\n                    \"resolved\": \"((currentValue: any, compareValue: any) => boolean) | null | string | undefined\",\n                    \"references\": {\n                        \"RadioGroupCompareFn\": {\n                            \"location\": \"import\",\n                            \"path\": \"./radio-group-interface\",\n                            \"id\": \"src/components/radio-group/radio-group-interface.ts::RadioGroupCompareFn\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This property allows developers to specify a custom function or property\\nname for comparing objects when determining the selected option in the\\nion-radio-group. When not specified, the default behavior will use strict\\nequality (===) for comparison.\"\n                },\n                \"attribute\": \"compare-with\",\n                \"reflect\": false\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the control, which is submitted with the form data.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false,\n                \"defaultValue\": \"this.inputId\"\n            },\n            \"value\": {\n                \"type\": \"any\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"any | null\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"the value of the radio group.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"ionChange\",\n                \"name\": \"ionChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the value has changed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"RadioGroupChangeEventDetail\",\n                    \"resolved\": \"RadioGroupChangeEventDetail<any>\",\n                    \"references\": {\n                        \"RadioGroupChangeEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"./radio-group-interface\",\n                            \"id\": \"src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"ionValueChange\",\n                \"name\": \"ionValueChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": undefined\n                        }],\n                    \"text\": \"Emitted when the `value` property has changed.\\nThis is used to ensure that `ion-radio` can respond\\nto any value property changes from the group.\"\n                },\n                \"complexType\": {\n                    \"original\": \"RadioGroupChangeEventDetail\",\n                    \"resolved\": \"RadioGroupChangeEventDetail<any>\",\n                    \"references\": {\n                        \"RadioGroupChangeEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"./radio-group-interface\",\n                            \"id\": \"src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"value\",\n                \"methodName\": \"valueChanged\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"keydown\",\n                \"method\": \"onKeydown\",\n                \"target\": \"document\",\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\nlet radioGroupIds = 0;\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/p-dbdd5b2d.entry.js

@@ -1,2 +0,0 @@
-import{r as s,i as t,h as i}from"./p-c427a5e9.js";import{L as o}from"./p-1a83d851.js";import{s as r}from"./p-f6671856.js";const e=class{constructor(i){s(this,i);this.subscribeResource=t(this,"pod-os:resource",7);this.receiveResource=s=>{const t=s.assume(o);this.loading=false;this.contents=t.contains().sort(((s,t)=>s.name.localeCompare(t.name)))};this.contents=[];this.loading=true}componentWillLoad(){r(this)}render(){if(this.loading)return null;const s=this.contents.map((s=>i("pos-resource",{lazy:true,uri:s.uri},i("pos-container-item",{role:"listitem"},i("ion-label",null,i("h3",null,s.name))))));return this.contents.length>0?i("ion-list",null,s):i("p",null,"The container is empty")}};export{e as pos_container_contents};
-//# sourceMappingURL=p-dbdd5b2d.entry.js.map

package/dist/elements/p-dbdd5b2d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["PosContainerContents","this","receiveResource","resource","doc","assume","LdpContainer","loading","contents","contains","sort","a","b","name","localeCompare","componentWillLoad","subscribeResource","render","items","map","it","h","lazy","uri","role","length"],"sources":["src/components/pos-container-contents/pos-container-contents.tsx"],"sourcesContent":["import { Thing, ContainerContent, LdpContainer } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-container-contents',\n  shadow: true,\n})\nexport class PosContainerContents implements ResourceAware {\n  @State() contents: ContainerContent[] = [];\n\n  @State() loading = true;\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(LdpContainer);\n    this.loading = false;\n    this.contents = doc.contains().sort((a, b) => a.name.localeCompare(b.name));\n  };\n\n  render() {\n    if (this.loading) return null;\n    const items = this.contents.map(it => (\n      <pos-resource lazy={true} uri={it.uri}>\n        <pos-container-item role=\"listitem\">\n          <ion-label>\n            <h3>{it.name}</h3>\n          </ion-label>\n        </pos-container-item>\n      </pos-resource>\n    ));\n    return this.contents.length > 0 ? <ion-list>{items}</ion-list> : <p>The container is empty</p>;\n  }\n}\n"],"mappings":"gIAQaA,EAAoB,M,4EAY/BC,KAAAC,gBAAmBC,IACjB,MAAMC,EAAMD,EAASE,OAAOC,GAC5BL,KAAKM,QAAU,MACfN,KAAKO,SAAWJ,EAAIK,WAAWC,MAAK,CAACC,EAAGC,IAAMD,EAAEE,KAAKC,cAAcF,EAAEC,OAAM,E,cAdrC,G,aAErB,I,CAKnB,iBAAAE,GACEC,EAAkBf,K,CASpB,MAAAgB,GACE,GAAIhB,KAAKM,QAAS,OAAO,KACzB,MAAMW,EAAQjB,KAAKO,SAASW,KAAIC,GAC9BC,EAAA,gBAAcC,KAAM,KAAMC,IAAKH,EAAGG,KAChCF,EAAA,sBAAoBG,KAAK,YACvBH,EAAA,iBACEA,EAAA,UAAKD,EAAGP,WAKhB,OAAOZ,KAAKO,SAASiB,OAAS,EAAIJ,EAAA,gBAAWH,GAAoBG,EAAA,kC","ignoreList":[]}

package/dist/elements/p-f1807e7c.js

@@ -1,2 +0,0 @@
-import{i as o}from"./p-49248534.js";const s=()=>{};const r=()=>Promise.all([s(),o()]);export{r as g};
-//# sourceMappingURL=p-f1807e7c.js.map