wcs-core 2.7.0 → 2.8.0

package/dist/collection/components/tooltip/tooltip.js

@@ -1,111 +1,133 @@
-import { Component, h, Host, Prop, Element } from '@stencil/core';
-import { getOverlay } from '../../utils/overlay';
+import { Component, h, Host, Prop, Element, Watch, Method } from '@stencil/core';
+// We use the Tippy.js library for the tooltip. At first by using directly the styles of tippy because
+// the design system does not specify any spec for the tooltips.
+//
+// In a second time, if a need of customization is felt, it will be possible to use the lib in a
+// "Headless" mode where the rendering of the tooltip will be entirely in our charge, without
+// modifications in the API : https://atomiks.github.io/tippyjs/v6/headless-tippy/
+import tippy from 'tippy.js';
+/**
+ * Tooltips are used to provide additional information for features available on the website. These can improve the user
+ * experience or simply show additional information. Tooltips appear when the user rolls over or clicks on them
+ * (for longer content).
+ *
+ * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
+ */
 export class Tooltip {
   constructor() {
     /**
      * Where the tooltip is going to show relative to the element it's describing.
      */
     this.position = 'bottom';
+    /**
+     * Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside
+     * without hiding.
+     */
+    this.interactive = false;
+    /**
+     * Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.
+     *
+     * If the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen.
+     */
+    this.maxWidth = 350;
+    /**
+     * Delay in ms once a trigger event is fired before the tooltip shows or hides.
+     *
+     * You can provide an array with two values to define a different duration for show and hide.
+     *
+     * `[showDelay, hideDelay]`
+     *
+     * Use null to use default value.
+     */
+    this.delay = 0;
+    /**
+     * Duration in ms of the transition animation.
+     */
+    this.duration = [300, 250];
+    /**
+     * Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.
+     *
+     * See: https://atomiks.github.io/tippyjs/v6/all-props/#trigger
+     */
+    this.trigger = 'mouseenter focus';
+    /**
+     * Allows you to change the theme used by tippy.
+     *
+     * The WCS theme is used by default and uses the WCS CSS variables.
+     *
+     * You can create a theme by following this documentation and choosing a custom name :
+     * https://atomiks.github.io/tippyjs/v6/themes/
+     */
+    this.theme = 'wcs';
   }
   componentWillLoad() {
-    const target = document.getElementById(this.for);
-    if (target === null) {
-      throw new Error(`Cannot find element with corresponding id: ${this.for}`);
-    }
-    this.target = target;
-    this.listen('mouseenter', 'show');
-    this.listen('focus', 'show');
-    this.listen('mouseleave', 'hide');
-    this.listen('blur', 'hide');
-    this.listen('tap', 'hide');
+    this.tippyInstance = tippy(document.getElementById(this.for), {
+      theme: this.theme,
+      allowHTML: true,
+      content: this.el.innerHTML,
+      maxWidth: this.maxWidth,
+      placement: this.position,
+      delay: this.delay,
+      duration: this.duration,
+      interactive: this.interactive,
+      trigger: this.trigger
+    });
   }
-  listen(eventName, className) {
-    this.target.addEventListener(eventName, () => {
-      if (className === 'hide') {
-        this.content.classList.replace('show', 'hide');
-      }
-      else {
-        this.content.classList.replace('hide', 'show');
-      }
-      this.updatePosition();
+  updateProps() {
+    this.tippyInstance.setProps({
+      interactive: this.interactive,
+      placement: this.position,
+      maxWidth: this.maxWidth,
+      theme: this.theme,
+      delay: this.delay,
+      duration: this.duration,
+      trigger: this.trigger
     });
   }
-  componentDidRender() {
-    const overlay = getOverlay();
-    this.content = this.el.shadowRoot.querySelector('.wcs-tooltip-content');
-    const nodes = this.el.shadowRoot.querySelector('slot')
-      ? this.el.shadowRoot.querySelector('slot').assignedNodes()
-      : this.content.querySelectorAll('*');
-    nodes.forEach(n => this.content.appendChild(n.cloneNode(true)));
-    this.content.remove();
-    overlay.appendChild(this.content);
-    this.updatePosition();
+  updateTippyContent() {
+    this.tippyInstance.setProps({
+      content: this.el.innerHTML
+    });
   }
-  updatePosition() {
-    // Function taken and adapted from https://github.com/PolymerElements/paper-tooltip/blob/master/paper-tooltip.js
-    // Thanks ! :-)
-    if (!this.target || !this.content.offsetParent) {
-      return;
-    }
-    const parentRect = this.content.offsetParent.getBoundingClientRect();
-    const targetRect = this.target.getBoundingClientRect();
-    const thisRect = this.content.getBoundingClientRect();
-    const borderWidth = 6;
-    const horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
-    const verticalCenterOffset = (targetRect.height - thisRect.height) / 2;
-    const targetLeft = targetRect.left - parentRect.left;
-    const targetTop = targetRect.top - parentRect.top;
-    let tooltipLeft;
-    let tooltipTop;
-    switch (this.position) {
-      case 'top':
-        tooltipLeft = targetLeft + horizontalCenterOffset;
-        tooltipTop = targetTop - thisRect.height - borderWidth;
-        break;
-      case 'bottom':
-        tooltipLeft = targetLeft + horizontalCenterOffset;
-        tooltipTop = targetTop + targetRect.height + borderWidth;
-        break;
-      case 'left':
-        tooltipLeft = targetLeft - thisRect.width - borderWidth;
-        tooltipTop = targetTop + verticalCenterOffset;
-        break;
-      case 'right':
-        tooltipLeft = targetLeft + targetRect.width + borderWidth;
-        tooltipTop = targetTop + verticalCenterOffset;
-        break;
-    }
-    // Clip to the left/right side.
-    if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) {
-      this.content.style.right = '0px';
-      this.content.style.left = 'auto';
-    }
-    else {
-      this.content.style.left = Math.max(0, tooltipLeft) + 'px';
-      this.content.style.right = 'auto';
-    }
-    // Clip the top/bottom side.
-    if (parentRect.top + tooltipTop + thisRect.height > window.innerHeight) {
-      this.content.style.bottom = (parentRect.height - targetTop) + 'px';
-      this.content.style.top = 'auto';
-    }
-    else {
-      this.content.style.top = Math.max(-parentRect.top, tooltipTop) + 'px';
-      this.content.style.bottom = 'auto';
-    }
+  /**
+   * Programmatically hide the tooltip
+   */
+  async hide() {
+    this.tippyInstance.hide();
+  }
+  /**
+   * Programmatically show the tooltip
+   */
+  async show() {
+    this.tippyInstance.show();
+  }
+  /**
+   * Temporarily prevent the tooltip from showing or hiding
+   */
+  async disable() {
+    this.tippyInstance.disable();
+  }
+  /**
+   * Re-enable a disabled tooltip
+   */
+  async enable() {
+    this.tippyInstance.enable();
   }
   disconnectedCallback() {
-    // TODO: this gets called only at the component creation in ff < 63
-    // const overlay = getOverlay();
-    // overlay.removeChild(this.content);
+    this.tippyInstance.destroy();
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "wcs-tooltip-content hide" },
-        h("slot", null))));
+      h("slot", { onSlotchange: _ => this.updateTippyContent() })));
   }
   static get is() { return "wcs-tooltip"; }
   static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tooltip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tooltip.css"]
+  }; }
   static get properties() { return {
     "for": {
       "type": "string",
@@ -122,10 +144,10 @@ export class Tooltip {
             "name": "example",
             "text": "```html\n<span id=\"tooltiped\">Some content</span>\n<wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n```"
           }],
-        "text": "The **id** of the element the tooltip's going to describe."
+        "text": "The **id** of the element the tooltip's going to describe.\n\nThis property cannot be modified after initialization."
       },
       "attribute": "for",
-      "reflect": true
+      "reflect": false
     },
     "position": {
       "type": "string",
@@ -149,7 +171,203 @@ export class Tooltip {
       "attribute": "position",
       "reflect": true,
       "defaultValue": "'bottom'"
+    },
+    "interactive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside\nwithout hiding."
+      },
+      "attribute": "interactive",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "maxWidth": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.\n\nIf the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen."
+      },
+      "attribute": "max-width",
+      "reflect": false,
+      "defaultValue": "350"
+    },
+    "delay": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | [number, number]",
+        "resolved": "[number, number] | number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Delay in ms once a trigger event is fired before the tooltip shows or hides.\n\nYou can provide an array with two values to define a different duration for show and hide.\n\n`[showDelay, hideDelay]`\n\nUse null to use default value."
+      },
+      "attribute": "delay",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "duration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | [number, number]",
+        "resolved": "[number, number] | number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Duration in ms of the transition animation."
+      },
+      "attribute": "duration",
+      "reflect": false,
+      "defaultValue": "[300, 250]"
+    },
+    "trigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.\n\nSee: https://atomiks.github.io/tippyjs/v6/all-props/#trigger"
+      },
+      "attribute": "trigger",
+      "reflect": false,
+      "defaultValue": "'mouseenter focus'"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows you to change the theme used by tippy.\n\nThe WCS theme is used by default and uses the WCS CSS variables.\n\nYou can create a theme by following this documentation and choosing a custom name :\nhttps://atomiks.github.io/tippyjs/v6/themes/"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "'wcs'"
+    }
+  }; }
+  static get methods() { return {
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Programmatically hide the tooltip",
+        "tags": []
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Programmatically show the tooltip",
+        "tags": []
+      }
+    },
+    "disable": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Temporarily prevent the tooltip from showing or hiding",
+        "tags": []
+      }
+    },
+    "enable": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Re-enable a disabled tooltip",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "interactive",
+      "methodName": "updateProps"
+    }, {
+      "propName": "position",
+      "methodName": "updateProps"
+    }, {
+      "propName": "maxWidth",
+      "methodName": "updateProps"
+    }, {
+      "propName": "theme",
+      "methodName": "updateProps"
+    }, {
+      "propName": "delay",
+      "methodName": "updateProps"
+    }, {
+      "propName": "duration",
+      "methodName": "updateProps"
+    }, {
+      "propName": "trigger",
+      "methodName": "updateProps"
+    }]; }
 }

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-dropdown",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-modal",[[4,"wcs-modal",{"backdrop":[516],"show":[1540],"showCloseButton":[516,"show-close-button"]},[[4,"keydown","onKeyDown"]]]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"]}]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-divider",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[1537]}]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[1537],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[1537],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[513],"position":[513]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[1028],"showLabel":[1028,"show-label"],"value":[1026]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"icon":[8],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[1537]}]]],["wcs-button",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
+  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-dropdown",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-modal",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"]},[[4,"keydown","onKeyDown"]]]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"]}]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-divider",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[513]}]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[513]}]]],["wcs-button",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
   });
 };
 

package/dist/esm/{popper-e5fdfb6a.js → popper-5f42e560.js}

@@ -1726,4 +1726,4 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-export { createPopper as c };
+export { applyStyles$1 as a, createPopper as c };

package/dist/esm/wcs-dropdown.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
 import { S as SelectArrow } from './select-arrow-73ac4016.js';
 import { c as clickTargetIsElementOrChildren } from './helpers-e2993152.js';
-import { c as createPopper } from './popper-e5fdfb6a.js';
+import { c as createPopper } from './popper-5f42e560.js';
 
 const dropdownCss = ":host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important}:host([no-arrow]) wcs-button{--wcs-button-padding:8px 16px 8px 16px !important}:host([shape=small]) wcs-button{--wcs-button-padding:2px 10px 2px 16px !important}:host([shape=small][no-arrow]) wcs-button{--wcs-button-padding:2px 16px 2px 16px !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white);z-index:9999}.show{display:block}.container{border-radius:inherit;overflow:hidden;padding:calc(var(--wcs-padding) / 2) 0;background-color:var(--wcs-white)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
 

package/dist/esm/wcs-error_2.entry.js

@@ -12,7 +12,7 @@ let Label = class {
 };
 Label.style = errorCss;
 
-const formFieldCss = ":host{--wcs-form-field-icon-color:var(--wcs-text-medium);--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";
+const formFieldCss = ":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";
 
 let FormField = class {
   constructor(hostRef) {

package/dist/esm/wcs-galactic-menu.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
 import { a as clickInsideElement } from './helpers-e2993152.js';
-import { c as createPopper } from './popper-e5fdfb6a.js';
+import { c as createPopper } from './popper-5f42e560.js';
 
 const galacticMenuCss = "#menu{background-color:var(--wcs-gray);color:white;display:none;padding:var(--wcs-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}:host{display:flex;align-items:center;height:32px;padding-left:var(--wcs-padding);background-color:var(--wcs-gray-light)}#toggle-menu-icon{cursor:pointer;padding:0 var(--wcs-padding);user-select:none}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}";
 

package/dist/esm/wcs-mat-icon.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-b982604a.js';
 
-const matIconCss = ":host{display:flex}:host .size-s{font-size:18px}:host .size-m{font-size:24px}:host .size-l{font-size:36px}:host .size-xl{font-size:48px}";
+const matIconCss = ":host{display:inline-block}:host .size-s{font-size:18px}:host .size-m{font-size:24px}:host .size-l{font-size:36px}:host .size-xl{font-size:48px}";
 
 let MatIcon = class {
   constructor(hostRef) {

package/dist/esm/wcs-modal.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b982604a.js';
 
-const modalCss = "wcs-modal{--saas-fix-modal:rgba(var(--wcs-black), 0.5);z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none}wcs-modal[show]{display:block;width:100%;height:100%;opacity:1;display:block}wcs-modal[backdrop] .wcs-modal-backdrop{display:block;position:fixed;top:0;left:0;bottom:0;right:0;opacity:0.4;background-color:var(--wcs-black)}.wcs-modal-backdrop{display:none}.wcs-modal-container{position:fixed;top:50%;left:50%;min-width:400px;max-width:480px;transform:translate(-50%, -50%);pointer-events:auto;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;outline:0;z-index:20000;display:block;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px}.wcs-modal-actions{margin-top:20px;float:right}";
+const modalCss = "wcs-modal{--saas-fix-modal:rgba(var(--wcs-black), 0.5);z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none}wcs-modal[show]{display:block;width:100%;height:100%;opacity:1;display:block}wcs-modal[without-backdrop] .wcs-modal-backdrop{display:none}wcs-modal[without-backdrop] .wcs-modal-container{border:solid 1px var(--wcs-text-light)}.wcs-modal-backdrop{display:block;position:fixed;top:0;left:0;bottom:0;right:0;opacity:0.4;background-color:var(--wcs-black)}.wcs-modal-container{position:fixed;top:50%;left:50%;min-width:400px;max-width:480px;transform:translate(-50%, -50%);pointer-events:auto;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;outline:0;z-index:20000;display:block;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px}.wcs-modal-actions{margin-top:20px;float:right}";
 
 let Modal = class {
   constructor(hostRef) {
@@ -9,7 +9,7 @@ let Modal = class {
     /**
      * Specifies whether the component should display a backdrop on the entire page
      */
-    this.backdrop = true;
+    this.withoutBackdrop = false;
     /**
      * Displays the modal
      */

package/dist/esm/wcs-radio-group.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
 
-const radioGroupCss = ":host{display:flex}:host([mode=radio]){flex-direction:column}:host([mode=radio]) ::slotted([slot=option]:first-child){margin-top:0}:host([mode=radio]) ::slotted([slot=option]:last-child){margin-bottom:0}:host([mode=radio]) ::slotted([slot=options]){margin-top:calc(var(--wcs-base-margin) / 2);margin-bottom:calc(var(--wcs-base-margin) / 2)}:host([mode=option]){display:inline-flex;flex-direction:row;padding:calc(var(--wcs-base-margin) / 2);background-color:#4d4f53;border-radius:0.6875rem}";
+const radioGroupCss = ":host{display:flex}:host([mode=radio]){flex-direction:column}:host([mode=radio]) ::slotted([slot=option]:first-child){margin-top:0}:host([mode=radio]) ::slotted([slot=option]:last-child){margin-bottom:0}:host([mode=radio]) ::slotted([slot=options]){margin-top:calc(var(--wcs-base-margin) / 2);margin-bottom:calc(var(--wcs-base-margin) / 2)}:host([mode=option]){display:inline-flex;flex-direction:row;padding:calc(var(--wcs-base-margin) / 2);background-color:#4d4f53;border-radius:0.6875rem}:host([mode=horizontal]){justify-content:space-between}";
 
 let RadioGroup = class {
   constructor(hostRef) {
@@ -15,9 +15,9 @@ let RadioGroup = class {
     if (this.value) {
       this.updateOptionsState(this.value, true);
     }
-    if (this.mode === 'option') {
+    if (this.mode === 'option' || this.mode === 'horizontal') {
       for (const option of this.options) {
-        option.mode = 'option';
+        option.mode = this.mode;
       }
     }
   }

package/dist/esm/wcs-radio.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
 
-const radioCss = ":host([mode=radio]) input{display:none}:host([mode=radio]) label{padding:0.125rem 0 0;margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;border:none;font-weight:500 !important;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;border-radius:50%;margin-right:var(--wcs-base-margin);border:2px solid var(--wcs-text-disabled);position:relative;display:inline-block;top:3px;width:1.125rem;height:1.125rem;pointer-events:none;content:\"\";background-color:var(--wcs-white);box-sizing:border-box}:host([mode=radio]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([mode=radio][disabled]) label{color:var(--wcs-text-disabled)}:host([mode=radio]:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:0.375rem 1.25rem 0.3125rem;margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}:host([mode=option][disabled]) label{color:var(--wcs-text-disabled)}:host([mode=option]:not([disabled])) label{cursor:pointer}";
+const radioCss = ":host([mode=radio]) input,:host([mode=horizontal]) input{display:none}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;font-weight:500 !important}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:50%;border:2px solid var(--wcs-text-disabled);position:relative;width:1.125rem;height:1.125rem;pointer-events:none;content:\"\";background-color:var(--wcs-white)}:host([mode=radio]) label:after,:host([mode=horizontal]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([disabled]) label{color:var(--wcs-text-disabled)}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label,:host([mode=horizontal][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before,:host([mode=horizontal][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label,:host([mode=horizontal]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before,:host([mode=horizontal]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=radio]) label{padding:0.125rem 0 0;border:none;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;margin-right:var(--wcs-base-margin);display:inline-block;top:3px;box-sizing:border-box}:host([mode=horizontal]) label:before{transition:background-color 0.175s ease-in-out;margin:auto auto var(--wcs-base-margin);display:block}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:0.375rem 1.25rem 0.3125rem;margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}";
 
 let Radio = class {
   constructor(hostRef) {