@ukic/web-components 2.1.0-beta.5 → 2.1.0-beta.6

package/hydrate/index.js

@@ -7296,8 +7296,10 @@ class Chip {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dismiss = createEvent(this, "dismiss", 7);
+    this.icDismiss = createEvent(this, "icDismiss", 7);
     this.dismissAction = () => {
       this.dismiss.emit();
+      this.icDismiss.emit();
     };
     this.mouseEnterHandler = () => {
       this.isHovered = true;
@@ -7350,7 +7352,7 @@ class Chip {
       "visible": [32],
       "isHovered": [32]
     },
-    "$listeners$": [[2, "dismiss", "handleClick"]],
+    "$listeners$": [[2, "icDismiss", "handleClick"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": []
   }; }
@@ -11500,9 +11502,8 @@ class RadioGroup {
     ], "Radio Group");
   }
   render() {
-    const hadValidationStatus = hasValidationStatus(this.validationStatus, this.disabled);
     renderHiddenInput(true, this.host, this.name, this.checkedValue, this.disabled);
-    return (hAsync(Host, { onKeyDown: this.handleKeyDown }, hAsync("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (hAsync("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), hAsync("slot", null)), hAsync("ic-input-validation", { ariaLiveMode: "polite", status: hadValidationStatus ? this.validationStatus : "", message: hadValidationStatus ? this.validationText : "" })));
+    return (hAsync(Host, { onKeyDown: this.handleKeyDown }, hAsync("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (hAsync("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), hAsync("slot", null)), hasValidationStatus(this.validationStatus, this.disabled) && (hAsync("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
   }
   get host() { return getElement(this); }
   static get style() { return icRadioGroupCss; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "2.1.0-beta.5",
+  "version": "2.1.0-beta.6",
   "description": "A web component UI library compiled with StencilJS",
   "main": "dist/index.cjs.js",
   "module": "./dist/index.js",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "@stencil/core": "^2.16.1",
-    "@ukic/fonts": "^2.1.0-beta.5"
+    "@ukic/fonts": "^2.1.0-beta.6"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -74,5 +74,5 @@
     "webpack": "^5.75.0"
   },
   "license": "MIT",
-  "gitHead": "bc621e46ef7959819bdde76ba44a75deecf246dc"
+  "gitHead": "96e96337cfb37e1ee1a9fdfedb09d3923f4e0d2a"
 }

package/dist/core/p-2ca96f69.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","src/components/ic-chip/ic-chip.tsx"],"names":["icChipCss","Chip","this","dismissAction","dismiss","emit","mouseEnterHandler","isHovered","mouseLeaveHandler","[object Object]","visible","dismissible","_a","el","shadowRoot","querySelector","setAttribute","onComponentRequiredPropUndefined","prop","label","propName","appearance","size","disabled","h","class","isSlotUsed","name","variant","apply-vertical-margins","target","id","aria-label","tabindex","onClick","onMouseEnter","onMouseLeave","innerHTML","dismissIcon"],"mappings":"qdAAA,MAAMA,EAAY,65ICyBLC,EAAI,gEAqCPC,KAAAC,cAAgB,KACtBD,KAAKE,QAAQC,QAGPH,KAAAI,kBAAoB,KAC1BJ,KAAKK,UAAY,MAGXL,KAAAM,kBAAoB,KAC1BN,KAAKK,UAAY,4CApCqB,mBAIX,2BAIG,oBAIH,mBAED,oBAEE,MAG9BE,cACEP,KAAKQ,SAAWR,KAAKQ,QAmBvBD,yBACEP,KAAKS,eACHC,EAAAV,KAAKW,GAAGC,WACLC,cAAc,4BAAwB,MAAAH,SAAA,OAAA,EAAAA,EACrCI,aAAa,cAAe,SAClCC,EACE,CAAC,CAAEC,KAAMhB,KAAKiB,MAAOC,SAAU,UAC/B,QAIJX,SACE,MAAMU,MACJA,EAAKE,WACLA,EAAUC,KACVA,EAAIX,YACJA,EAAWD,QACXA,EAAOa,SACPA,EAAQhB,UACRA,GACEL,KAEJ,OACEQ,GACEc,EAAA,MAAA,CACEC,MAAO,CACLhB,CAAC,QAAS,KACVA,CAAC,GAAGY,KAAe,KACnBZ,CAAC,GAAGa,KAAS,KACbb,CAAC,YAAac,EACdd,CAAC,eAAgBE,EACjBF,CAAC,WAAYF,IAGdmB,EAAWxB,KAAKW,GAAI,SACnBW,EAAA,MAAA,CAAKC,MAAM,QACTD,EAAA,OAAA,CAAMG,KAAK,UAGfH,EAAA,gBAAA,CACEI,QAAQ,QAAOC,yBACS,MACxBJ,MAAM,SAEND,EAAA,OAAA,KAAOL,IAERR,GACCa,EAAA,aAAA,CACEL,MAAM,UACNW,OAAO,eACPL,MAAO,CAAEhB,CAAC,oBAAqBc,IAE/BC,EAAA,SAAA,CACEO,GAAG,eACHN,MAAO,CACLhB,CAAC,gBAAiB,MACnBuB,aACW,WAAWb,SACvBI,SAAUA,EACVU,SAAUV,GAAY,EAAI,EAC1BW,QAAShC,KAAKC,cACdgC,aAAcjC,KAAKI,kBACnB8B,aAAclC,KAAKM,kBACnB6B,UAAWC","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\n.chip {\n  display: flex;\n  padding: var(--ic-space-xxs);\n  font-size: 14px;\n  border-radius: 80px;\n  text-align: center;\n  align-items: center;\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n.chip.small {\n  padding: var(--ic-space-xxxs);\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n  background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  background-color: var(--ic-architectural-200);\n  color: black;\n  border: none;\n}\n\n.filled.disabled {\n  background-color: var(--ic-architectural-100);\n}\n\n.outline {\n  color: var(--ic-architectural-900);\n  border: 1px solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - 1px);\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - 1px);\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - 1px);\n}\n\n.outline.disabled {\n  border: var(--ic-border-disabled);\n  background: none;\n}\n\n.chip.disabled ic-typography {\n  color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  background: none;\n  cursor: pointer;\n  margin: var(--ic-space-xxxs);\n  height: 20px;\n}\n\n.dismiss-icon:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n  pointer-events: none;\n  color: var(--ic-architectural-200);\n}\n\n.icon {\n  padding: var(--ic-space-xxxs);\n  box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n  fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-hc-border);\n  }\n\n  .filled.small {\n    padding: calc(var(--ic-space-xxxs) - 1px);\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + 1px);\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - 1px);\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    color: GrayText;\n  }\n\n  .chip.disabled path,\n  .chip.disabled ::slotted(svg) {\n    fill: GrayText;\n  }\n\n  .chip:focus-within {\n    outline: none;\n    border-color: Highlight;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: true,\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"dismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"]}

package/dist/core/p-a5948fc3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"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"],"names":["icRadioGroupCss","RadioGroup","this","handleKeyDown","event","key","radioOptions","getNextItemToSelect","selectedChild","selected","preventDefault","currentItem","movingDown","numRadios","length","nextItem","disabled","[object Object]","checkedValue","detail","value","icChange","emit","undefined","forEach","radioOption","index","shadowRoot","querySelector","tabIndex","Array","from","host","querySelectorAll","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","hadValidationStatus","hasValidationStatus","validationStatus","renderHiddenInput","h","Host","onKeyDown","role","aria-label","required","hideLabel","class","helperText","ariaLiveMode","status","message","validationText"],"mappings":"0IAAA,MAAMA,EAAkB,8+ECwBXC,EAAU,kEA2EbC,KAAAC,cAAiBC,IACvB,OAAQA,EAAMC,KACZ,IAAK,YACL,IAAK,aACHH,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,OAC7CC,SAAW,KACbL,EAAMM,iBACN,MACF,IAAK,UACL,IAAK,YACHR,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,QAC7CC,SAAW,KACbL,EAAMM,mBAIJR,KAAAK,oBAAsB,CAC5BI,EACAC,KAEA,MAAMC,EAAYX,KAAKI,aAAaQ,OAAS,EAE7C,GAAIH,EAAc,EAAG,CACnBA,EAAc,EAGhB,IAAII,EAAWH,EAAaD,EAAc,EAAIA,EAAc,EAG5D,GAAII,EAAW,EAAG,CAChBA,EAAWF,OACN,GAAIE,EAAWF,EAAW,CAC/BE,EAAW,EAIb,GAAIb,KAAKI,aAAaS,GAAUC,SAAU,CACxCD,EAAWb,KAAKK,oBAAoBQ,EAAUH,GAGhD,OAAOG,0DAnGmB,qBAKC,oBAKD,2CAUH,4BAI8B,uBAItB,qBAID,uBACE,EAQlCE,cAAcb,GACZF,KAAKgB,aAAed,EAAMe,OAAOC,MACjClB,KAAKmB,SAASC,KAAK,CAAEF,MAAOlB,KAAKgB,eAEjC,GAAIhB,KAAKI,eAAiBiB,UAAW,CACnCrB,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtCD,EAAYhB,SAAWP,KAAKgB,eAAiBO,EAAYL,MACzD,GAAIK,EAAYhB,SAAU,CACxBP,KAAKM,cAAgBkB,MAGzBxB,KAAKI,aAAa,GAAGqB,WAAWC,cAAc,SAASC,SACrD3B,KAAKM,cAAgB,GAAK,EAAI,GAiDpCS,mBACEf,KAAKI,aAAewB,MAAMC,KACxB7B,KAAK8B,KAAKC,iBAAiB,oBAG7B/B,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtC,IAAKD,EAAYhB,SAAU,CACzBgB,EAAYhB,SAAWP,KAAKgB,eAAiBO,EAAYL,MAE3DK,EAAYS,KAAOhC,KAAKgC,KACxBT,EAAYU,WAAajC,KAAKkC,MAC9B,GAAIX,EAAYhB,SAAU,CACxBP,KAAKM,cAAgBkB,EACrBxB,KAAKgB,aAAeO,EAAYL,UAGpClB,KAAKI,aAAa,GAAGqB,WAAWC,cAAc,SAASC,SACrD3B,KAAKM,cAAgB,GAAK,EAAI,EAEhC6B,EACE,CACE,CAAEC,KAAMpC,KAAKkC,MAAOG,SAAU,SAC9B,CAAED,KAAMpC,KAAKgC,KAAMK,SAAU,SAE/B,eAIJtB,SACE,MAAMuB,EAAsBC,EAC1BvC,KAAKwC,iBACLxC,KAAKc,UAGP2B,EACE,KACAzC,KAAK8B,KACL9B,KAAKgC,KACLhC,KAAKgB,aACLhB,KAAKc,UAGP,OACE4B,EAACC,EAAI,CAACC,UAAW5C,KAAKC,eACpByC,EAAA,MAAA,CACEG,KAAK,aAAYC,aACL,GAAG9C,KAAKkC,QAAQlC,KAAK+C,SAAW,aAAe,OAEzD/C,KAAKgD,WACLN,EAAA,iBAAA,CACEO,MAAO,CAAElC,CAAC,GAAGf,KAAKwC,oBAAqB,MACvCN,MAAOlC,KAAKkC,MACZgB,WAAYlD,KAAKkD,WACjBH,SAAU/C,KAAK+C,SACfjC,SAAUd,KAAKc,WAGnB4B,EAAA,OAAA,OAEFA,EAAA,sBAAA,CACES,aAAa,SACbC,OAAQd,EAAsBtC,KAAKwC,iBAAmB,GACtDa,QAASf,EAAsBtC,KAAKsD,eAAiB","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-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\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  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } 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   * 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    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  render() {\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\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          <slot></slot>\n        </div>\n        <ic-input-validation\n          ariaLiveMode=\"polite\"\n          status={hadValidationStatus ? this.validationStatus : \"\"}\n          message={hadValidationStatus ? this.validationText : \"\"}\n        ></ic-input-validation>\n      </Host>\n    );\n  }\n}\n"]}