npm - @ukic/web-components - Versions diffs - 2.1.0-beta.9 → 2.2.0 - Mend

@ukic/web-components 2.1.0-beta.9 → 2.2.0

Files changed (1175) hide show

package/dist/cjs/ic-popover-menu.cjs.entry.js ADDED Viewed

@@ -0,0 +1,237 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-2a0c6769.js');
+const helpers = require('./helpers-eb53c416.js');
+const popper = require('./popper-d7adcfc6.js');
+require('./types-3eb02246.js');
+const icPopoverMenuCss = "/*! 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}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}";
+const PopoverMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ARIA_LABEL = "aria-label";
+    this.popoverMenuEls = [];
+    this.setButtonFocus = () => {
+      var _a;
+      (_a = this.popoverMenuEls[this.currentFocus]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    // Checks that the popover menu has an anchor
+    this.findAnchorEl = (anchor) => {
+      let anchorElement = null;
+      if (anchor === null || anchor === undefined) {
+        this.submenuId === undefined &&
+          console.error("No anchor specified for popover component");
+      }
+      else {
+        anchorElement = document.querySelector(anchor.indexOf("#") === 0 ? anchor : "#" + anchor);
+        if (anchorElement === null) {
+          console.error(`Popover anchor element '${anchor}' not found`);
+        }
+      }
+      return anchorElement;
+    };
+    this.isNotPopoverMenuEl = (ev) => {
+      const target = ev.target;
+      return (target.id !== this.anchor &&
+        target.tagName !== "IC-MENU-ITEM" &&
+        target.tagName !== "IC-MENU-GROUP" &&
+        target.tagName !== "IC-POPOVER-MENU");
+    };
+    this.closeMenu = () => {
+      var _a;
+      this.open = false;
+      (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    this.getNextItemToSelect = (currentItem, movingDown) => {
+      const numButtons = this.popoverMenuEls.length - 1;
+      if (currentItem < 1) {
+        currentItem = 0;
+      }
+      let nextItem = movingDown ? currentItem + 1 : currentItem - 1;
+      // Check if wrap around necessary
+      if (nextItem < 0) {
+        nextItem = numButtons;
+      }
+      else if (nextItem > numButtons) {
+        nextItem = 0;
+      }
+      return nextItem;
+    };
+    this.addMenuItems = (elements) => {
+      for (let i = 0; i < elements.length; i++) {
+        const el = elements[i];
+        if (el.tagName === "IC-MENU-ITEM") {
+          this.popoverMenuEls.push(el);
+        }
+        else if (el.tagName === "IC-MENU-GROUP") {
+          const groupSlotWrapper = el.shadowRoot.querySelector("ul");
+          const menuGroupElements = helpers.getSlotElements(groupSlotWrapper);
+          this.addMenuItems(menuGroupElements);
+        }
+      }
+    };
+    this.getMenuAriaLabel = () => {
+      const ariaLabel = this.host.getAttribute(this.ARIA_LABEL);
+      if (this.submenuId !== undefined) {
+        return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;
+      }
+      else {
+        return ariaLabel;
+      }
+    };
+    this.handleBackButtonClick = () => {
+      this.parentPopover.openFromChild();
+      this.open = false;
+    };
+    this.openingFromChild = false;
+    this.openingFromParent = false;
+    this.anchor = undefined;
+    this.parentLabel = undefined;
+    this.parentPopover = undefined;
+    this.submenuId = undefined;
+    this.submenuLevel = 1;
+    this.open = undefined;
+  }
+  watchOpenHandler() {
+    if (this.open) {
+      if (this.parentPopover !== undefined &&
+        !this.popoverMenuEls.some((menuItem) => menuItem.id)) {
+        this.popoverMenuEls.unshift(this.backButton);
+      }
+      this.currentFocus = this.submenuId !== undefined ? 1 : 0;
+      // Needed so that anchorEl isn't always focused
+      setTimeout(this.setButtonFocus, 50);
+    }
+  }
+  componentDidLoad() {
+    const slotWrapper = this.host.shadowRoot.querySelector("ul.button");
+    const popoverMenuElements = helpers.getSlotElements(slotWrapper);
+    if (popoverMenuElements !== null) {
+      this.addMenuItems(popoverMenuElements);
+    }
+    if (this.submenuId === undefined &&
+      this.host.getAttribute(this.ARIA_LABEL) === null) {
+      console.error(`No aria-label specified for popover menu component - aria-label required`);
+    }
+  }
+  componentWillRender() {
+    this.anchorEl = this.findAnchorEl(this.anchor);
+  }
+  componentDidRender() {
+    if (this.open) {
+      popper.createPopper(this.anchorEl, this.host, {
+        placement: "bottom-start",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 4],
+            },
+          },
+        ],
+      });
+    }
+  }
+  handleMenuItemClick(ev) {
+    if (!ev.detail.hasSubMenu && ev.detail.label !== "Back") {
+      this.closeMenu();
+    }
+  }
+  // This is listening for the event emitted when a menu item is acting as a trigger button
+  handleSubmenuChange(ev) {
+    // Finds the trigger menu item that has emitted the event
+    const target = ev.target;
+    this.open = false;
+    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).
+    const childEl = document.querySelector(`ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`);
+    // Set the parent popover menu of the submenu and open the submenu
+    childEl.parentPopover = this.host;
+    childEl.anchor = this.anchor;
+    childEl.ariaLabel = this.host.getAttribute(this.ARIA_LABEL);
+    childEl.openFromParent();
+    childEl.submenuLevel = this.submenuLevel + 1;
+    // Set the label in the submenu using the label of the menu item that has emitted the event
+    childEl.parentLabel = target.label;
+  }
+  handleClick(ev) {
+    if (this.open && this.isNotPopoverMenuEl(ev)) {
+      // If menu is open and the next click on the document is not a popover El, close the popover
+      this.closeMenu();
+    }
+  }
+  // Manages the keyboard navigation in the popover menu
+  handleKeyDown(ev) {
+    switch (ev.key) {
+      case "ArrowDown":
+        ev.preventDefault();
+        this.currentFocus = this.getNextItemToSelect(this.currentFocus, true);
+        this.setButtonFocus();
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        this.currentFocus = this.getNextItemToSelect(this.currentFocus, false);
+        this.setButtonFocus();
+        break;
+      case "Home":
+        //Sets home focus as first element, or back button
+        this.currentFocus = 0;
+        this.setButtonFocus();
+        break;
+      case "End":
+        //Sets end focus as last element
+        this.currentFocus = this.popoverMenuEls.length - 1;
+        this.setButtonFocus();
+        break;
+      case "Escape":
+      case "Tab":
+        if (this.open) {
+          this.closeMenu();
+          this.host.blur();
+        }
+        break;
+    }
+  }
+  /**
+   * @internal Opens the menu from the child menu.
+   */
+  async openFromChild() {
+    this.open = true;
+    this.openingFromChild = true;
+    setTimeout(() => (this.openingFromChild = false), 1000);
+  }
+  /**
+   * @internal Opens the menu from the parent menu.
+   */
+  async openFromParent() {
+    this.open = true;
+    this.openingFromParent = true;
+    setTimeout(() => (this.openingFromParent = false), 1000);
+  }
+  render() {
+    return (index.h(index.Host, { class: { open: this.open } }, index.h("div", { id: this.parentPopover === undefined
+        ? `ic-popover-submenu-${this.submenuId}`
+        : "", class: {
+        menu: true,
+      }, tabindex: open ? "0" : "-1" }, index.h("div", { class: {
+        "opening-from-parent": this.openingFromParent,
+        "opening-from-child": this.openingFromChild,
+      } }, this.submenuId !== undefined && (index.h("div", null, index.h("ic-menu-item", { class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, index.h("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, index.h("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }))), index.h("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), index.h("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu", "aria-owns": this.submenuId !== undefined
+        ? `ic-popover-submenu-back-button-${this.submenuLevel}`
+        : false, "aria-controls": this.submenuId !== undefined
+        ? `ic-popover-submenu-back-button-${this.submenuLevel}`
+        : false }, index.h("slot", null))))));
+  }
+  static get delegatesFocus() { return true; }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["watchOpenHandler"]
+  }; }
+};
+PopoverMenu.style = icPopoverMenuCss;
+exports.ic_popover_menu = PopoverMenu;
+//# sourceMappingURL=ic-popover-menu.cjs.entry.js.map

package/dist/cjs/ic-popover-menu.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ic-popover-menu.entry.cjs.js","mappings":"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","names":["getSlotElements","createPopper","h","Host"],"sources":["./src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","./src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n color: var(--ic-color-tertiary-text);\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n} from \"@stencil/core\";\nimport { getSlotElements } from \"../../utils/helpers\";\nimport { createPopper } from \"@popperjs/core\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n\n @Element() host: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel: number = 1;\n\n /**\n * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = this.submenuId !== undefined ? 1 : 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.host.shadowRoot.querySelector(\"ul.button\");\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n\n if (\n this.submenuId === undefined &&\n this.host.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open) {\n createPopper(this.anchorEl, this.host, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n ],\n });\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent): void {\n if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n this.closeMenu();\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.host;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.host.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(this.currentFocus, true);\n this.setButtonFocus();\n break;\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(this.currentFocus, false);\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n if (this.open) {\n this.closeMenu();\n this.host.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string): HTMLElement => {\n let anchorElement: HTMLElement = null;\n if (anchor === null || anchor === undefined) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const target = ev.target as HTMLElement;\n return (\n target.id !== this.anchor &&\n target.tagName !== \"IC-MENU-ITEM\" &&\n target.tagName !== \"IC-MENU-GROUP\" &&\n target.tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n private closeMenu = () => {\n this.open = false;\n this.anchorEl?.focus();\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.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 = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\n const ariaLabel = this.host.getAttribute(this.ARIA_LABEL);\n\n if (this.submenuId !== undefined) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover.openFromChild();\n this.open = false;\n };\n\n render() {\n return (\n <Host class={{ open: this.open }}>\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\n >\n <div\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {this.submenuId !== undefined && (\n <div>\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </div>\n )}\n <ul\n class=\"button\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n aria-owns={\n this.submenuId !== undefined\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n aria-controls={\n this.submenuId !== undefined\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n >\n <slot></slot>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-radio-group.cjs.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f79a4e53.js');
-const helpers = require('./helpers-6eb26e7a.js');
+const index = require('./index-2a0c6769.js');
+const helpers = require('./helpers-eb53c416.js');
 require('./types-3eb02246.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)}.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 RadioGroup = class {
   constructor(hostRef) {
@@ -16,12 +16,12 @@ const RadioGroup = class {
       switch (event.key) {
         case "ArrowDown":
         case "ArrowRight":
-          this.radioOptions[this.getNextItemToSelect(this.selectedChild, true)].selected = true;
+          this.radioOptions[this.getNextItemToSelect(this.selectedChild, true)].click();
           event.preventDefault();
           break;
         case "ArrowUp":
         case "ArrowLeft":
-          this.radioOptions[this.getNextItemToSelect(this.selectedChild, false)].selected = true;
+          this.radioOptions[this.getNextItemToSelect(this.selectedChild, false)].click();
           event.preventDefault();
       }
     };
@@ -44,32 +44,21 @@ const RadioGroup = class {
       }
       return nextItem;
     };
+    this.checkedValue = "";
+    this.selectedChild = -1;
+    this.disabled = false;
+    this.helperText = undefined;
+    this.hideLabel = false;
     this.label = undefined;
     this.name = undefined;
-    this.required = false;
     this.orientation = "vertical";
-    this.hideLabel = false;
-    this.disabled = false;
-    this.helperText = undefined;
+    this.required = false;
     this.small = false;
     this.validationStatus = "";
     this.validationText = "";
-    this.checkedValue = "";
-    this.selectedChild = -1;
   }
-  selectHandler(event) {
-    this.checkedValue = event.detail.value;
-    this.icChange.emit({ value: this.checkedValue });
-    if (this.radioOptions !== undefined) {
-      this.radioOptions.forEach((radioOption, index) => {
-        radioOption.selected = this.checkedValue === radioOption.value;
-        if (radioOption.selected) {
-          this.selectedChild = index;
-        }
-      });
-      this.radioOptions[0].shadowRoot.querySelector("input").tabIndex =
-        this.selectedChild > 0 ? -1 : 0;
-    }
+  componentWillLoad() {
+    helpers.removeDisabledFalse(this.disabled, this.host);
   }
   componentDidLoad() {
     this.radioOptions = Array.from(this.host.querySelectorAll("ic-radio-option"));
@@ -99,9 +88,38 @@ const RadioGroup = class {
       { prop: this.name, propName: "name" },
     ], "Radio Group");
   }
+  selectHandler(event) {
+    var _a;
+    this.checkedValue = event.detail.value;
+    const selectedOption = event.target;
+    this.icChange.emit({
+      value: this.checkedValue,
+      selectedOption: {
+        radio: selectedOption,
+        textFieldValue: (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
+      },
+    });
+    if (this.radioOptions !== undefined) {
+      this.radioOptions.forEach((radioOption, index) => {
+        radioOption.selected = this.checkedValue === radioOption.value;
+        if (radioOption.selected) {
+          this.selectedChild = index;
+        }
+      });
+      this.radioOptions[0].shadowRoot.querySelector("input").tabIndex =
+        this.selectedChild > 0 ? -1 : 0;
+    }
+  }
+  changeHandler() {
+    const selectedOption = this.radioOptions.findIndex((radioOption) => radioOption.selected);
+    if (selectedOption < 0) {
+      this.radioOptions[0].shadowRoot.querySelector("input").tabIndex = 0;
+      this.selectedChild = selectedOption;
+    }
+  }
   render() {
     helpers.renderHiddenInput(true, this.host, this.name, this.checkedValue, this.disabled);
-    return (index.h(index.Host, { onKeyDown: this.handleKeyDown }, index.h("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (index.h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), index.h("div", { class: "radio-buttons-container" }, index.h("slot", null))), helpers.hasValidationStatus(this.validationStatus, this.disabled) && (index.h("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
+    return (index.h(index.Host, { onKeyDown: this.handleKeyDown, class: { small: this.small } }, index.h("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (index.h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), index.h("div", { class: "radio-buttons-container" }, index.h("slot", null))), helpers.hasValidationStatus(this.validationStatus, this.disabled) && (index.h("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/ic-radio-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-radio-group.entry.cjs.js","mappings":"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","names":["isSlotUsed","onComponentRequiredPropUndefined","renderHiddenInput","h","Host","hasValidationStatus"],"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 renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcOrientation } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\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 /*\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 If `true`, the radio group will require a value.\n /\n @Prop() required: boolean = false;\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 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 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 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 The checked state.\n /\n @State() checkedValue: string = \"\";\n @State() selectedChild: number = -1;\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n @Listen(\"icCheck\")\n selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = event.detail.value;\n this.icChange.emit({ value: this.checkedValue });\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 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 ].selected = true;\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].selected = true;\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 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 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}>\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}
1	+ {"file":"ic-radio-group.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","isSlotUsed","onComponentRequiredPropUndefined","renderHiddenInput","h","Host","hasValidationStatus"],"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}

package/dist/cjs/ic-radio-option.cjs.entry.js CHANGED Viewed

@@ -2,18 +2,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f79a4e53.js');
-const helpers = require('./helpers-6eb26e7a.js');
+const index = require('./index-2a0c6769.js');
+const helpers = require('./helpers-eb53c416.js');
 require('./types-3eb02246.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:0.063rem solid #a7acb3;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:0.063rem solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.063rem 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:0.063rem 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:-0.063rem}.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}}";
+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}}";
 const RadioOption = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.radioOptionSelect = index.createEvent(this, "radioOptionSelect", 7);
     this.icCheck = index.createEvent(this, "icCheck", 7);
+    this.radioOptionSelect = index.createEvent(this, "radioOptionSelect", 7);
+    this.icSelectedChange = index.createEvent(this, "icSelectedChange", 7);
     this.defaultRadioValue = "";
+    this.hasAdditionalField = false;
     this.skipFocus = false;
     this.handleClick = () => {
       if (!this.disabled) {
@@ -37,33 +39,25 @@ const RadioOption = class {
     this.swallowClick = (event) => {
       event.stopPropagation();
     };
-    this.hasAdditionalField = false;
     this.handleFormReset = () => {
       this.skipFocus = true;
       this.selected = this.initiallySelected;
     };
-    this.selected = false;
+    this.additionalFieldDisplay = "static";
     this.disabled = false;
+    this.dynamicText = "This selection requires additional answers";
+    this.groupLabel = undefined;
     this.label = undefined;
-    this.value = undefined;
     this.name = undefined;
-    this.groupLabel = undefined;
-    this.dynamicText = "This selection requires additional answers";
-    this.additionalFieldDisplay = "static";
+    this.value = undefined;
+    this.selected = false;
     this.initiallySelected = this.selected;
   }
-  selectedChangeHandler(selected) {
-    if (selected) {
-      this.handleClick();
-    }
+  watchSelectedHandler() {
+    this.icSelectedChange.emit();
   }
-  /**
-   * Sets focus on the radio option.
-   */
-  async setFocus() {
-    if (this.host.shadowRoot.querySelector("input")) {
-      this.host.shadowRoot.querySelector("input").focus();
-    }
+  disconnectedCallback() {
+    helpers.removeFormResetListener(this.host, this.handleFormReset);
   }
   componentWillLoad() {
     const additonalFieldContent = helpers.getSlotContent(this.host, "additional-field");
@@ -77,6 +71,21 @@ const RadioOption = class {
     }
     this.defaultRadioValue = this.value;
     helpers.addFormResetListener(this.host, this.handleFormReset);
+    helpers.removeDisabledFalse(this.disabled, this.host);
+  }
+  componentDidLoad() {
+    helpers.onComponentRequiredPropUndefined([{ prop: this.value, propName: "value" }], "Radio Option");
+  }
+  componentDidRender() {
+    if (this.additionalFieldDisplay === "static") {
+      const textfield = this.host.querySelector("ic-text-field");
+      if (!this.selected) {
+        textfield && textfield.setAttribute("disabled", "");
+      }
+      else {
+        textfield && textfield.removeAttribute("disabled");
+      }
+    }
   }
   textfieldValueHandler(event) {
     const textFieldValue = event.detail.value;
@@ -100,27 +109,19 @@ const RadioOption = class {
         });
       }
     }
+    event.stopImmediatePropagation();
   }
-  componentDidLoad() {
-    helpers.onComponentRequiredPropUndefined([{ prop: this.value, propName: "value" }], "Radio Option");
-  }
-  componentDidRender() {
-    if (this.additionalFieldDisplay === "static") {
-      const textfield = this.host.querySelector("ic-text-field");
-      if (!this.selected) {
-        textfield && textfield.setAttribute("disabled", "");
-      }
-      else {
-        textfield && textfield.removeAttribute("disabled");
-      }
+  /**
+   * Sets focus on the radio option.
+   */
+  async setFocus() {
+    if (this.host.shadowRoot.querySelector("input")) {
+      this.host.shadowRoot.querySelector("input").focus();
     }
   }
-  disconnectedCallback() {
-    helpers.removeFormResetListener(this.host, this.handleFormReset);
-  }
   render() {
     const id = `ic-radio-option-${this.label !== undefined ? this.label : this.value}-${this.groupLabel}`;
-    return (index.h(index.Host, { onClick: this.handleClick }, index.h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, index.h("div", null, index.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) }), index.h("span", { class: "checkmark" })), index.h("ic-typography", { class: "radio-label", variant: "body" }, index.h("label", { htmlFor: id }, this.label))), this.hasAdditionalField && (index.h("div", { onClick: this.swallowClick, class: {
+    return (index.h(index.Host, { onClick: this.handleClick, class: { disabled: this.disabled } }, index.h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, index.h("div", null, index.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) }), index.h("span", { class: "checkmark" })), index.h("ic-typography", { class: "radio-label", variant: "body" }, index.h("label", { htmlFor: id }, this.label))), this.hasAdditionalField && (index.h("div", { onClick: this.swallowClick, class: {
         "dynamic-container": true,
         hidden: this.additionalFieldDisplay === "dynamic" && !this.selected,
       } }, this.additionalFieldDisplay === "dynamic" && (index.h("div", { class: "branch-corner" })), index.h("div", null, this.additionalFieldDisplay === "dynamic" && (index.h("ic-typography", { variant: "caption" }, index.h("p", { class: "dynamic-text" }, this.dynamicText))), index.h("div", { class: {
@@ -130,7 +131,7 @@ const RadioOption = class {
   static get delegatesFocus() { return true; }
   get host() { return index.getElement(this); }
   static get watchers() { return {
-    "selected": ["selectedChangeHandler"]
+    "selected": ["watchSelectedHandler"]
   }; }
 };
 RadioOption.style = icRadioOptionCss;