@ukic/web-components 2.4.1 → 2.6.0

package/dist/components/ic-radio-group.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, i as isSlotUsed, o as onComponentRequiredPropUndefined, h as renderHiddenInput, l as hasValidationStatus } from './helpers.js';
+import { r as removeDisabledFalse, i as isSlotUsed, c as checkResizeObserver, o as onComponentRequiredPropUndefined, p as renderHiddenInput, t as hasValidationStatus } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-input-label2.js';
 import { d as defineCustomElement$3 } from './ic-input-validation2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icRadioGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}ic-input-label.error{color:var(--ic-status-error)}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}:host(.small) ic-input-label ic-typography{margin-bottom:calc(var(--ic-space-sm) / 2)}.radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host([orientation=\"horizontal\"]) .radio-buttons-container{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.small[orientation=\"horizontal\"]) .radio-buttons-container{gap:var(--ic-space-xl)}";
+const icRadioGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}ic-input-label.error{color:var(--ic-status-error)}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}:host(.small) ic-input-label ic-typography{margin-bottom:calc(var(--ic-space-sm) / 2)}:host .radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host .radio-buttons-container.horizontal{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.small) .radio-buttons-container.horizontal{gap:var(--ic-space-xl)}";
 
 const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTMLElement {
   constructor() {
@@ -12,6 +12,13 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
     this.__registerHost();
     this.__attachShadow();
     this.icChange = createEvent(this, "icChange", 7);
+    this.resizeObserver = null;
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.checkOrientation();
+      });
+      this.resizeObserver.observe(this.el);
+    };
     this.handleKeyDown = (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -45,6 +52,8 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
       return nextItem;
     };
     this.checkedValue = "";
+    this.currentOrientation = undefined;
+    this.initialOrientation = undefined;
     this.selectedChild = -1;
     this.disabled = false;
     this.helperText = undefined;
@@ -53,15 +62,26 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
     this.name = undefined;
     this.orientation = "vertical";
     this.required = false;
+    this.size = "default";
     this.small = false;
     this.validationStatus = "";
     this.validationText = "";
   }
+  orientationChangeHandler() {
+    this.initialOrientation = this.orientation;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
   componentWillLoad() {
-    removeDisabledFalse(this.disabled, this.host);
+    removeDisabledFalse(this.disabled, this.el);
+    this.orientationChangeHandler();
+    this.currentOrientation = this.initialOrientation;
   }
   componentDidLoad() {
-    this.radioOptions = Array.from(this.host.querySelectorAll("ic-radio-option"));
+    this.radioOptions = Array.from(this.el.querySelectorAll("ic-radio-option"));
     this.radioOptions.forEach((radioOption, index) => {
       if (!radioOption.selected) {
         radioOption.selected = this.checkedValue === radioOption.value;
@@ -75,14 +95,15 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
     });
     this.radioOptions[0].shadowRoot.querySelector("input").tabIndex =
       this.selectedChild > 0 ? -1 : 0;
-    if (this.orientation === "horizontal" &&
+    if (this.initialOrientation === "horizontal" &&
       this.radioOptions !== undefined &&
       (this.radioOptions.length > 2 ||
         (this.radioOptions.length === 2 &&
           (isSlotUsed(this.radioOptions[0], "additional-field") ||
             isSlotUsed(this.radioOptions[1], "additional-field"))))) {
-      this.orientation = "vertical";
+      this.currentOrientation = "vertical";
     }
+    checkResizeObserver(this.runResizeObserver);
     onComponentRequiredPropUndefined([
       { prop: this.label, propName: "label" },
       { prop: this.name, propName: "name" },
@@ -117,11 +138,37 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
       this.selectedChild = selectedOption;
     }
   }
+  checkOrientation() {
+    if (this.initialOrientation === "horizontal") {
+      let totalWidth = 0;
+      const radioOptionGap = 40;
+      for (let i = 0; i < this.radioOptions.length; i++) {
+        totalWidth += this.radioOptions[i].clientWidth;
+        if (i < this.radioOptions.length - 1) {
+          totalWidth += radioOptionGap;
+        }
+      }
+      if (this.currentOrientation === "horizontal" &&
+        totalWidth > this.radioContainer.clientWidth) {
+        this.currentOrientation = "vertical";
+      }
+      else if (this.currentOrientation === "vertical" &&
+        totalWidth < this.radioContainer.clientWidth) {
+        this.currentOrientation = "horizontal";
+      }
+    }
+  }
   render() {
-    renderHiddenInput(true, this.host, this.name, this.checkedValue, this.disabled);
-    return (h(Host, { onKeyDown: this.handleKeyDown, class: { small: this.small } }, h("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), h("div", { class: "radio-buttons-container" }, h("slot", null))), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
+    renderHiddenInput(true, this.el, this.name, this.checkedValue, this.disabled);
+    return (h(Host, { onKeyDown: this.handleKeyDown, class: { small: this.small || this.size === "small" } }, h("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), h("div", { class: {
+        "radio-buttons-container": true,
+        horizontal: this.currentOrientation === "horizontal",
+      }, ref: (el) => (this.radioContainer = el) }, h("slot", null))), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
   }
-  get host() { return this; }
+  get el() { return this; }
+  static get watchers() { return {
+    "orientation": ["orientationChangeHandler"]
+  }; }
   static get style() { return icRadioGroupCss; }
 }, [1, "ic-radio-group", {
     "disabled": [4],
@@ -129,14 +176,19 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
     "hideLabel": [4, "hide-label"],
     "label": [1],
     "name": [1],
-    "orientation": [1537],
+    "orientation": [1],
     "required": [4],
+    "size": [1],
     "small": [4],
     "validationStatus": [1, "validation-status"],
     "validationText": [1, "validation-text"],
     "checkedValue": [32],
+    "currentOrientation": [32],
+    "initialOrientation": [32],
     "selectedChild": [32]
-  }, [[0, "icCheck", "selectHandler"], [0, "icSelectedChange", "changeHandler"]]]);
+  }, [[0, "icCheck", "selectHandler"], [0, "icSelectedChange", "changeHandler"]], {
+    "orientation": ["orientationChangeHandler"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ic-radio-group.js.map

@@ -1 +1 @@
-{"file":"ic-radio-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,olGAAolG;;MC8B/lG,UAAU;;;;;;IA4Ib,kBAAa,GAAG,CAAC,KAAoB;MAC3C,QAAQ,KAAK,CAAC,GAAG;QACf,KAAK,WAAW,CAAC;QACjB,KAAK,YAAY;UACf,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CACnD,CAAC,KAAK,EAAE,CAAC;UACV,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,MAAM;QACR,KAAK,SAAS,CAAC;QACf,KAAK,WAAW;UACd,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CACpD,CAAC,KAAK,EAAE,CAAC;UACV,KAAK,CAAC,cAAc,EAAE,CAAC;OAC1B;KACF,CAAC;IAEM,wBAAmB,GAAG,CAC5B,WAAmB,EACnB,UAAmB;MAEnB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;MAE/C,IAAI,WAAW,GAAG,CAAC,EAAE;QACnB,WAAW,GAAG,CAAC,CAAC;OACjB;MAED,IAAI,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC;;MAG9D,IAAI,QAAQ,GAAG,CAAC,EAAE;QAChB,QAAQ,GAAG,SAAS,CAAC;OACtB;WAAM,IAAI,QAAQ,GAAG,SAAS,EAAE;QAC/B,QAAQ,GAAG,CAAC,CAAC;OACd;;MAGD,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;QACxC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;OAC3D;MAED,OAAO,QAAQ,CAAC;KACjB,CAAC;wBAlL8B,EAAE;yBACD,CAAC,CAAC;oBAKP,KAAK;;qBAUJ,KAAK;;;uBAgBhC,UAAU;oBAKgB,KAAK;iBAKR,KAAK;4BAIyB,EAAE;0BAIxB,EAAE;;EAOnC,iBAAiB;IACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GAC/C;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAC9C,CAAC;IAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK;MAC3C,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QACzB,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;OAChE;MACD,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MAC7B,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;MACpC,IAAI,WAAW,CAAC,QAAQ,EAAE;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC;OACvC;KACF,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ;MAC7D,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAElC,IACE,IAAI,CAAC,WAAW,KAAK,YAAY;MACjC,IAAI,CAAC,YAAY,KAAK,SAAS;OAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;SAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC;WAC5B,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;YACnD,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAC7D;MACA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;KAC/B;IAED,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;MACvC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE;KACtC,EACD,aAAa,CACd,CAAC;GACH;EAGD,aAAa,CAAC,KAAsC;;IAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,MAAM,cAAc,GAAG,KAAK,CAAC,MAAkC,CAAC;IAChE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACjB,KAAK,EAAE,IAAI,CAAC,YAAY;MACxB,cAAc,EAAE;QACd,KAAK,EAAE,cAAc;QACrB,cAAc,EAAE,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,aAAa,CAAC,eAAe,CAAC,0CAAE,KAAK;OACtE;KACF,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;MACnC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK;QAC3C,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;QAC/D,IAAI,WAAW,CAAC,QAAQ,EAAE;UACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;OACF,CAAC,CAAC;MACH,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ;QAC7D,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;KACnC;GACF;EAGD,aAAa;IACX,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAChD,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,CACtC,CAAC;IACF,IAAI,cAAc,GAAG,CAAC,EAAE;MACtB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;MACpE,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC;KACrC;GACF;EA+CD,MAAM;IACJ,iBAAiB,CACf,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,QAAQ,CACd,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAC/D,WACE,IAAI,EAAC,YAAY,gBACL,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE,EAAE,IAE9D,CAAC,IAAI,CAAC,SAAS,KACd,sBACE,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,CACnB,EACD,WAAK,KAAK,EAAC,yBAAyB,IAClC,eAAa,CACT,CACF,EACL,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,KACxD,2BACE,YAAY,EAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,OAAO,EAAE,IAAI,CAAC,cAAc,GACP,CACxB,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n.radio-buttons-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.small) .radio-buttons-container {\n  gap: var(--ic-space-xxxs);\n}\n\n:host([orientation=\"horizontal\"]) .radio-buttons-container {\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.small[orientation=\"horizontal\"]) .radio-buttons-container {\n  gap: var(--ic-space-xl);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioOptions: HTMLIcRadioOptionElement[];\n\n  @Element() host: HTMLIcRadioGroupElement;\n\n  @State() checkedValue: string = \"\";\n  @State() selectedChild: number = -1;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the radio group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the radio group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop({ reflect: true, mutable: true }) orientation: IcOrientation =\n    \"vertical\";\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the radio group.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidLoad(): void {\n    this.radioOptions = Array.from(\n      this.host.querySelectorAll(\"ic-radio-option\")\n    );\n\n    this.radioOptions.forEach((radioOption, index) => {\n      if (!radioOption.selected) {\n        radioOption.selected = this.checkedValue === radioOption.value;\n      }\n      radioOption.name = this.name;\n      radioOption.groupLabel = this.label;\n      if (radioOption.selected) {\n        this.selectedChild = index;\n        this.checkedValue = radioOption.value;\n      }\n    });\n    this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n      this.selectedChild > 0 ? -1 : 0;\n\n    if (\n      this.orientation === \"horizontal\" &&\n      this.radioOptions !== undefined &&\n      (this.radioOptions.length > 2 ||\n        (this.radioOptions.length === 2 &&\n          (isSlotUsed(this.radioOptions[0], \"additional-field\") ||\n            isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n    ) {\n      this.orientation = \"vertical\";\n    }\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value;\n    const selectedOption = event.target as HTMLIcRadioOptionElement;\n    this.icChange.emit({\n      value: this.checkedValue,\n      selectedOption: {\n        radio: selectedOption,\n        textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n      },\n    });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n        this.selectedChild > 0 ? -1 : 0;\n    }\n  }\n\n  @Listen(\"icSelectedChange\")\n  changeHandler(): void {\n    const selectedOption = this.radioOptions.findIndex(\n      (radioOption) => radioOption.selected\n    );\n    if (selectedOption < 0) {\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex = 0;\n      this.selectedChild = selectedOption;\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  render() {\n    renderHiddenInput(\n      true,\n      this.host,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host onKeyDown={this.handleKeyDown} class={{ small: this.small }}>\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <div class=\"radio-buttons-container\">\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(this.validationStatus, this.disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-radio-group.js","mappings":"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","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.small) .radio-buttons-container {\n  gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.small) .radio-buttons-container.horizontal {\n  gap: var(--ic-space-xl);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderHiddenInput,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcSizesNoLarge,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioContainer: HTMLDivElement;\n  private radioOptions: HTMLIcRadioOptionElement[];\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcRadioGroupElement;\n\n  @State() checkedValue: string = \"\";\n  @State() currentOrientation: IcOrientation;\n  @State() initialOrientation: IcOrientation;\n  @State() selectedChild: number = -1;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the radio group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the radio group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop() orientation: IcOrientation = \"vertical\";\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the radio group component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  @Watch(\"orientation\")\n  orientationChangeHandler(): void {\n    this.initialOrientation = this.orientation;\n  }\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.orientationChangeHandler();\n    this.currentOrientation = this.initialOrientation;\n  }\n\n  componentDidLoad(): void {\n    this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n\n    this.radioOptions.forEach((radioOption, index) => {\n      if (!radioOption.selected) {\n        radioOption.selected = this.checkedValue === radioOption.value;\n      }\n      radioOption.name = this.name;\n      radioOption.groupLabel = this.label;\n      if (radioOption.selected) {\n        this.selectedChild = index;\n        this.checkedValue = radioOption.value;\n      }\n    });\n    this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n      this.selectedChild > 0 ? -1 : 0;\n\n    if (\n      this.initialOrientation === \"horizontal\" &&\n      this.radioOptions !== undefined &&\n      (this.radioOptions.length > 2 ||\n        (this.radioOptions.length === 2 &&\n          (isSlotUsed(this.radioOptions[0], \"additional-field\") ||\n            isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n    ) {\n      this.currentOrientation = \"vertical\";\n    }\n\n    checkResizeObserver(this.runResizeObserver);\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value;\n    const selectedOption = event.target as HTMLIcRadioOptionElement;\n    this.icChange.emit({\n      value: this.checkedValue,\n      selectedOption: {\n        radio: selectedOption,\n        textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n      },\n    });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n        this.selectedChild > 0 ? -1 : 0;\n    }\n  }\n\n  @Listen(\"icSelectedChange\")\n  changeHandler(): void {\n    const selectedOption = this.radioOptions.findIndex(\n      (radioOption) => radioOption.selected\n    );\n    if (selectedOption < 0) {\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex = 0;\n      this.selectedChild = selectedOption;\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkOrientation();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkOrientation() {\n    if (this.initialOrientation === \"horizontal\") {\n      let totalWidth = 0;\n      const radioOptionGap = 40;\n      for (let i = 0; i < this.radioOptions.length; i++) {\n        totalWidth += this.radioOptions[i].clientWidth;\n        if (i < this.radioOptions.length - 1) {\n          totalWidth += radioOptionGap;\n        }\n      }\n\n      if (\n        this.currentOrientation === \"horizontal\" &&\n        totalWidth > this.radioContainer.clientWidth\n      ) {\n        this.currentOrientation = \"vertical\";\n      } else if (\n        this.currentOrientation === \"vertical\" &&\n        totalWidth < this.radioContainer.clientWidth\n      ) {\n        this.currentOrientation = \"horizontal\";\n      }\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  render() {\n    renderHiddenInput(\n      true,\n      this.el,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        class={{ small: this.small || this.size === \"small\" }}\n      >\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <div\n            class={{\n              \"radio-buttons-container\": true,\n              horizontal: this.currentOrientation === \"horizontal\",\n            }}\n            ref={(el) => (this.radioContainer = el)}\n          >\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(this.validationStatus, this.disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-radio-option.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { f as removeFormResetListener, C as getSlotContent, e as addFormResetListener, r as removeDisabledFalse, o as onComponentRequiredPropUndefined } from './helpers.js';
+import { n as removeFormResetListener, H as getSlotContent, m as addFormResetListener, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, b as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
 const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}:host([additional-field-display=\"static\"]) ::slotted(ic-text-field){margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}:host(.disabled){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:var(--ic-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-space-1px) solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:var(--ic-space-1px) solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:transparent;border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}";
@@ -22,7 +22,7 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
         }
         this.skipFocus = false;
         if (this.hasAdditionalField) {
-          const textfield = this.host.querySelector("ic-text-field");
+          const textfield = this.el.querySelector("ic-text-field");
           this.value =
             textfield.value !== "" ? textfield.value : this.defaultRadioValue;
         }
@@ -44,6 +44,12 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
     this.additionalFieldDisplay = "static";
     this.disabled = false;
     this.dynamicText = "This selection requires additional answers";
+    this.form = undefined;
+    this.formaction = undefined;
+    this.formenctype = undefined;
+    this.formmethod = undefined;
+    this.formnovalidate = undefined;
+    this.formtarget = undefined;
     this.groupLabel = undefined;
     this.label = undefined;
     this.name = undefined;
@@ -55,28 +61,28 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
     this.icSelectedChange.emit();
   }
   disconnectedCallback() {
-    removeFormResetListener(this.host, this.handleFormReset);
+    removeFormResetListener(this.el, this.handleFormReset);
   }
   componentWillLoad() {
-    const additonalFieldContent = getSlotContent(this.host, "additional-field");
-    if (additonalFieldContent !== null) {
+    const additionalFieldContent = getSlotContent(this.el, "additional-field");
+    if (additionalFieldContent !== null) {
       this.hasAdditionalField = true;
-      const Element = additonalFieldContent[0];
+      const Element = additionalFieldContent[0];
       if (Element.tagName === "IC-TEXT-FIELD") {
         const textField = Element;
         textField.hiddenInput = false;
       }
     }
     this.defaultRadioValue = this.value;
-    addFormResetListener(this.host, this.handleFormReset);
-    removeDisabledFalse(this.disabled, this.host);
+    addFormResetListener(this.el, this.handleFormReset);
+    removeDisabledFalse(this.disabled, this.el);
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.value, propName: "value" }], "Radio Option");
   }
   componentDidRender() {
     if (this.additionalFieldDisplay === "static") {
-      const textfield = this.host.querySelector("ic-text-field");
+      const textfield = this.el.querySelector("ic-text-field");
       if (!this.selected) {
         textfield && textfield.setAttribute("disabled", "");
       }
@@ -113,13 +119,13 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
    * Sets focus on the radio option.
    */
   async setFocus() {
-    if (this.host.shadowRoot.querySelector("input")) {
-      this.host.shadowRoot.querySelector("input").focus();
+    if (this.el.shadowRoot.querySelector("input")) {
+      this.el.shadowRoot.querySelector("input").focus();
     }
   }
   render() {
-    const id = `ic-radio-option-${this.label !== undefined ? this.label : this.value}-${this.groupLabel}`;
-    return (h(Host, { onClick: this.handleClick, class: { disabled: this.disabled } }, h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, h("div", null, h("input", { role: "radio", tabindex: this.selected ? "0" : "-1", type: "radio", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.selected, ref: (el) => (this.radioElement = el) }), h("span", { class: "checkmark" })), h("ic-typography", { class: "radio-label", variant: "body" }, h("label", { htmlFor: id }, this.label))), this.hasAdditionalField && (h("div", { onClick: this.swallowClick, class: {
+    const id = `ic-radio-option-${isPropDefined(this.label) ? this.label : this.value}-${this.groupLabel}`;
+    return (h(Host, { onClick: this.handleClick, class: { disabled: this.disabled } }, h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, h("div", null, h("input", { role: "radio", tabindex: this.selected ? "0" : "-1", type: "radio", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.selected, ref: (el) => (this.radioElement = el), form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), h("span", { class: "checkmark" })), h("ic-typography", { class: "radio-label", variant: "body" }, h("label", { htmlFor: id }, this.label))), this.hasAdditionalField && (h("div", { onClick: this.swallowClick, class: {
         "dynamic-container": true,
         hidden: this.additionalFieldDisplay === "dynamic" && !this.selected,
       } }, this.additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, this.additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text" }, this.dynamicText))), h("div", { class: {
@@ -127,7 +133,7 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
       } }, h("slot", { name: "additional-field" })))))));
   }
   static get delegatesFocus() { return true; }
-  get host() { return this; }
+  get el() { return this; }
   static get watchers() { return {
     "selected": ["watchSelectedHandler"]
   }; }
@@ -136,6 +142,12 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
     "additionalFieldDisplay": [513, "additional-field-display"],
     "disabled": [4],
     "dynamicText": [1, "dynamic-text"],
+    "form": [1],
+    "formaction": [1],
+    "formenctype": [1],
+    "formmethod": [1],
+    "formnovalidate": [4],
+    "formtarget": [1],
     "groupLabel": [1, "group-label"],
     "label": [1],
     "name": [1],
@@ -143,7 +155,9 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
     "selected": [1540],
     "initiallySelected": [32],
     "setFocus": [64]
-  }, [[0, "icChange", "textfieldValueHandler"]]]);
+  }, [[0, "icChange", "textfieldValueHandler"]], {
+    "selected": ["watchSelectedHandler"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ic-radio-option.js.map

@@ -1 +1 @@
-{"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-field) {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: var(--ic-border-default);\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-space-1px) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: var(--ic-space-1px) solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.host, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.icCheck.emit({\n          value: this.value,\n        });\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.icCheck.emit({\n          value: this.defaultRadioValue,\n        });\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.host.shadowRoot.querySelector(\"input\")) {\n      this.host.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick} class={{ disabled: this.disabled }}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <div>\n            <input\n              role=\"radio\"\n              tabindex={this.selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={this.name}\n              id={id}\n              value={this.value}\n              disabled={this.disabled ? true : null}\n              checked={this.selected}\n              ref={(el) => (this.radioElement = el)}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-field) {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: var(--ic-border-default);\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-space-1px) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: var(--ic-space-1px) solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    const additionalFieldContent = getSlotContent(this.el, \"additional-field\");\n\n    if (additionalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additionalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.el.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.icCheck.emit({\n          value: this.value,\n        });\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.icCheck.emit({\n          value: this.defaultRadioValue,\n        });\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"input\")) {\n      this.el.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.el.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const id = `ic-radio-option-${\n      isPropDefined(this.label) ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick} class={{ disabled: this.disabled }}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <div>\n            <input\n              role=\"radio\"\n              tabindex={this.selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={this.name}\n              id={id}\n              value={this.value}\n              disabled={this.disabled ? true : null}\n              checked={this.selected}\n              ref={(el) => (this.radioElement = el)}\n              form={this.form}\n              formaction={this.formaction}\n              formenctype={this.formenctype}\n              formmethod={this.formmethod}\n              formnovalidate={this.formnovalidate}\n              formtarget={this.formtarget}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-search-bar.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IcThemeForegroundEnum } from './types.js';
-import { F as getFilteredMenuOptions, G as handleHiddenFormButtonClick, H as getLabelFromValue, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, k as getInputDescribedByText, h as renderHiddenInput } from './helpers.js';
+import { K as getFilteredMenuOptions, L as handleHiddenFormButtonClick, M as getLabelFromValue, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, s as getInputDescribedByText, p as renderHiddenInput } from './helpers.js';
 import { d as defineCustomElement$b } from './ic-button2.js';
 import { d as defineCustomElement$a } from './ic-input-component-container2.js';
 import { d as defineCustomElement$9 } from './ic-input-container2.js';
@@ -247,21 +247,22 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
     };
     this.updateSearchResultAriaLive = () => {
       const searchResultsStatusEl = this.el.shadowRoot.querySelector(".search-results-status");
-      if (!this.open ||
-        this.value === "" ||
-        this.value.length < this.charactersUntilSuggestion) {
-        searchResultsStatusEl.innerText = "";
-      }
-      else if (this.hasOptionsOrFilterDisabled() &&
-        this.filteredOptions.length > 0 &&
-        this.open &&
-        searchResultsStatusEl &&
-        !this.filteredOptions[0].loading) {
-        if (this.hadNoOptions()) {
-          searchResultsStatusEl.innerText = this.emptyOptionListText;
+      if (searchResultsStatusEl) {
+        if (!this.open ||
+          this.value === "" ||
+          this.value.length < this.charactersUntilSuggestion) {
+          searchResultsStatusEl.innerText = "";
         }
-        else {
-          searchResultsStatusEl.innerText = `${this.filteredOptions.length} result${this.filteredOptions.length > 1 ? "s" : ""} available`;
+        else if (this.hasOptionsOrFilterDisabled() &&
+          this.filteredOptions.length > 0 &&
+          this.open &&
+          !this.filteredOptions[0].loading) {
+          if (this.hadNoOptions()) {
+            searchResultsStatusEl.innerText = this.emptyOptionListText;
+          }
+          else {
+            searchResultsStatusEl.innerText = `${this.filteredOptions.length} result${this.filteredOptions.length > 1 ? "s" : ""} available`;
+          }
         }
       }
     };
@@ -321,6 +322,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
     this.readonly = false;
     this.required = false;
     this.searchMode = "navigation";
+    this.size = "default";
     this.small = false;
     this.spellcheck = false;
     this.timeout = undefined;
@@ -380,6 +382,9 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
   componentWillLoad() {
     this.watchValueHandler(this.value);
     removeDisabledFalse(this.disabled, this.el);
+    if (this.small) {
+      this.size = "small";
+    }
   }
   componentDidLoad() {
     if (this.focusOnLoad) {
@@ -437,7 +442,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
     }, 500);
   }
   render() {
-    const { inputId, name, label, required, small, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
+    const { inputId, name, label, required, small, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
     const disabledMode = readonly || disabled ? true : false;
     const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
     let describedById;
@@ -477,14 +482,14 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         ["search"]: true,
         ["fullwidth"]: fullWidth,
         ["disabled"]: disabled,
-        ["small"]: small,
-      }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-text-field", { ref: (el) => (this.inputEl = el), inputId: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, small: small, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options &&
+        ["small"]: size === "small",
+      }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-text-field", { ref: (el) => (this.inputEl = el), inputId: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, size: size, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options &&
         !!getLabelFromValue(value, options, this.valueField, this.labelField)
         ? getLabelFromValue(value, options, this.valueField, this.labelField)
         : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, ariaExpanded: expanded, ariaActiveDescendant: ariaActiveDescendant, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: hasSuggestedSearch ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search", debounce: this.debounce }, h("div", { class: {
         "clear-button-container": true,
         "clear-button-visible": value && !disabledMode && this.showClearButton,
-      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: small ? "small" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
+      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" })), h("div", { class: {
         "search-submit-button-container": true,
@@ -492,14 +497,14 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
       }, slot: "search-submit-button" }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
         ["search-submit-button"]: true,
         ["search-submit-button-small"]: !!small,
-      }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: small ? "small" : "default", onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
+      }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Default })), h("div", { class: {
         "menu-container": true,
         fullwidth: fullWidth,
       }, slot: "menu" }, menuRendered && (h("ic-menu", { class: {
         "no-results": this.hadNoOptions() || isOrHasLoaded,
-      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: size === "small", fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
@@ -535,6 +540,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
     "readonly": [4],
     "required": [4],
     "searchMode": [1, "search-mode"],
+    "size": [1],
     "small": [4],
     "spellcheck": [4],
     "timeout": [2],
@@ -549,7 +555,12 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
     "showClearButton": [32],
     "filteredOptions": [32],
     "setFocus": [64]
-  }, [[0, "icKeydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]]]);
+  }, [[0, "icKeydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+    "loading": ["loadingHandler"],
+    "filteredOptions": ["filteredOptionsHandler"],
+    "options": ["watchOptionsHandler"],
+    "value": ["watchValueHandler"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;