@ukic/canary-web-components 3.0.0-canary.33 → 3.0.0-canary.35

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js

@@ -1,5 +1,9 @@
 import { h, } from "@stencil/core";
 import { isSlotUsed } from "../../utils/helpers";
+import "../../../../web-components/src/components/ic-select/ic-select";
+import "../../../../web-components/src/components/ic-typography/ic-typography";
+import "../../../../web-components/src/components/ic-chip/ic-chip";
+import "../../../../web-components/src/components/ic-button/ic-button";
 const DEFAULT_TITLE_BAR_HEADING = "Title Bar";
 /**
  * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.
@@ -20,7 +24,17 @@ export class DataTableTitleBar {
          */
         this.hideDensitySelect = false;
         this.changeDensity = (ev) => {
-            this.icTableDensityUpdate.emit({ value: ev.detail.value });
+            const allowedDensity = [
+                "default",
+                "dense",
+                "spacious",
+            ];
+            const value = ev.detail.value;
+            if (allowedDensity.includes(value)) {
+                this.icTableDensityUpdate.emit({
+                    value: value,
+                });
+            }
         };
     }
     componentWillLoad() {
@@ -40,14 +54,14 @@ export class DataTableTitleBar {
             isSlotUsed(el, "custom-actions") ||
             !hideDensitySelect;
         const hasDescription = isSlotUsed(el, "description") || description;
-        return (h("div", { key: '45a83555d5e50daec9511e27c598871edd1d658b', class: {
+        return (h("div", { key: '015c9c119edb355d34f5eee923d879834f343a13', class: {
                 "title-bar-wrapper": true,
                 "full-width": isEmbedded,
-            } }, h("div", { key: '03efff1125a796185171c04f9470455436ed1b88', class: "header-container" }, h("slot", { key: '9b7094400d371cfe756afeff6247d89be77712b3', name: "heading" }, h("ic-typography", { key: 'a46421c776eadf0785f19b0c4b4bd708de2cbd1f', variant: "h3", class: "heading" }, h("h3", { key: '3e4c879fc68616da58b1bf4e3a894adbd3493937' }, heading))), metadata && (h("ic-typography", { key: 'ff42b249b42f0ffc5a5e3ecabb4b5135e26f6ca2', variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (h("div", { key: '31c4cd134dbf8cebdcec7c47bd21970a4142c0ca', class: "description-actions" }, h("slot", { key: 'e69dde4f2143dae9c44d0da6653cbb0c4de8e29b', name: "description" }, description && (h("ic-typography", { key: '2ea962b509afdca9c6a196243816343abb2c42e7', variant: "body" }, description))), showActionArea && (h("div", { key: '6ea660837748344730a355e5359081cd6bc080cb', class: "action-area" }, isSlotUsed(el, "custom-actions") && (h("div", { key: 'e68d5885acb3273d55566799c66b5dcdb96c1c8b', class: "custom-actions-wrapper" }, h("slot", { key: 'e16dad2da2d90e67eac973fd35a3be5169a6a96e', name: "custom-actions" }))), !hideDensitySelect && (h("ic-select", { key: '7424b3cc8792657a50ecf47f54551a2327203f66', size: "small", label: "Change density", class: "density-input", hideLabel: true, options: [
+            } }, h("div", { key: '384d2c12368b2427450abab8f066e347103a016e', class: "header-container" }, h("slot", { key: 'edf7134e4b41190fa26daf89c4d3e2a17265d68e', name: "heading" }, h("ic-typography", { key: 'ca715cd0e80d07b812decd300f432ea74aa61b90', variant: "h3", class: "heading" }, h("h3", { key: '5be64866c59f1bbd157c0e6e2c0c6eb9ee3fa3f4' }, heading))), metadata && (h("ic-typography", { key: '562ed6740b4c77e40fc9d03aa4dda698cd3c32f8', variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (h("div", { key: '20cdc0e9e33dd8ea9e5ac214d672afcfb6fbf14d', class: "description-actions" }, h("slot", { key: 'bf2f57a6f47cbefcb860589d16dc55cabafaf9dd', name: "description" }, description && (h("ic-typography", { key: 'f43bf891d261884f534ab744ab72efae300460b0', variant: "body" }, description))), showActionArea && (h("div", { key: '70941ff43a085c4917826b840e3c0d215f34ed76', class: "action-area" }, isSlotUsed(el, "custom-actions") && (h("div", { key: 'e5ef6148f9fae5771424b115da06b66267f557ca', class: "custom-actions-wrapper" }, h("slot", { key: 'f253f7e258fdece9273866ec416b4a65b5a9399f', name: "custom-actions" }))), !hideDensitySelect && (h("ic-select", { key: '6ca5db0379274e03aec7a131d5c21eeae9564df7', size: "small", label: "Change density", class: "density-input", hideLabel: true, options: [
                 { label: "Default", value: "default" },
                 { label: "Dense", value: "dense" },
                 { label: "Spacious", value: "spacious" },
-            ], value: initialDensitySelectOption, onIcChange: changeDensity })), isSlotUsed(el, "primary-action") && (h("slot", { key: '2f342f77bc425e6e1211633307cb838e4c5037bf', name: "primary-action" }))))))));
+            ], value: initialDensitySelectOption, onIcChange: changeDensity })), isSlotUsed(el, "primary-action") && (h("slot", { key: '569b95fbcca225740db72c7a6dda32df5209fb65', name: "primary-action" }))))))));
     }
     static get is() { return "ic-data-table-title-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AAMvB,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,yBAAyB,GAAG,WAAW,CAAC;AAE9C;;;;;GAKG;AAMH,MAAM,OAAO,iBAAiB;IAL9B;QAMU,+BAA0B,GAA8B,SAAS,CAAC;QAClE,eAAU,GAAY,KAAK,CAAC;QASpC;;WAEG;QACK,YAAO,GAAY,yBAAyB,CAAC;QAErD;;WAEG;QACK,sBAAiB,GAAa,KAAK,CAAC;QAwBpC,kBAAa,GAAG,CACtB,EAAmD,EACnD,EAAE;YACF,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;KA2EH;IA3FC,iBAAiB;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QACvC,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,MAAK,eAAe,EAAE,CAAC;YAC1C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,QAAkC,CAAC;YAC1E,IAAI,CAAC,0BAA0B,GAAG,OAAO,CAAC;YAC1C,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ,CAAC;YAC7B,IAAI,IAAI,CAAC,OAAO,KAAK,yBAAyB,EAAE,CAAC;gBAC/C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAQD,MAAM;QACJ,MAAM,EACJ,aAAa,EACb,WAAW,EACX,EAAE,EACF,OAAO,EACP,iBAAiB,EACjB,0BAA0B,EAC1B,UAAU,EACV,QAAQ,GACT,GAAG,IAAI,CAAC;QACT,MAAM,cAAc,GAClB,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC;YAChC,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC;YAChC,CAAC,iBAAiB,CAAC;QAErB,MAAM,cAAc,GAAG,UAAU,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,WAAW,CAAC;QACpE,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,YAAY,EAAE,UAAU;aACzB;YAED,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,6DAAM,IAAI,EAAC,SAAS;oBAClB,sEAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS;wBACzC,6DAAK,OAAO,CAAM,CACJ,CACX;gBACN,QAAQ,IAAI,CACX,sEAAe,OAAO,EAAC,gBAAgB,IAAE,QAAQ,CAAiB,CACnE,CACG;YACL,CAAC,cAAc,IAAI,cAAc,CAAC,IAAI,CACrC,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,IAAI,EAAC,aAAa,IACrB,WAAW,IAAI,CACd,sEAAe,OAAO,EAAC,MAAM,IAAE,WAAW,CAAiB,CAC5D,CACI;gBACN,cAAc,IAAI,CACjB,4DAAK,KAAK,EAAC,aAAa;oBACrB,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CACnC,4DAAK,KAAK,EAAC,wBAAwB;wBACjC,6DAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACP;oBACA,CAAC,iBAAiB,IAAI,CACrB,kEACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAC,eAAe,EACrB,SAAS,QACT,OAAO,EAAE;4BACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;4BACtC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;4BAClC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;yBACzC,EACD,KAAK,EAAE,0BAA0B,EACjC,UAAU,EAAE,aAAa,GACd,CACd;oBACA,UAAU,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CACnC,6DAAM,IAAI,EAAC,gBAAgB,GAAG,CAC/B,CACG,CACP,CACG,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl?.tagName === \"IC-DATA-TABLE\") {\n      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = density;\n      this.isEmbedded = !!embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" class=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcMultiValueEventDetail } from \"../../../../web-components/src/utils/types\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nimport \"../../../../web-components/src/components/ic-select/ic-select\";\nimport \"../../../../web-components/src/components/ic-typography/ic-typography\";\nimport \"../../../../web-components/src/components/ic-chip/ic-chip\";\nimport \"../../../../web-components/src/components/ic-button/ic-button\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl?.tagName === \"IC-DATA-TABLE\") {\n      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = density;\n      this.isEmbedded = !!embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = caption;\n      }\n    }\n  }\n\n  private changeDensity = (ev: CustomEvent<IcMultiValueEventDetail>) => {\n    const allowedDensity: IcDataTableDensityOptions[] = [\n      \"default\",\n      \"dense\",\n      \"spacious\",\n    ];\n    const value = ev.detail.value;\n    if (allowedDensity.includes(value as IcDataTableDensityOptions)) {\n      this.icTableDensityUpdate.emit({\n        value: value as IcDataTableDensityOptions,\n      });\n    }\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" class=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-date-input/ic-date-input.js

@@ -5,6 +5,13 @@ import { convertToDoubleDigits, createDate, dateMatches, extractDateFromZuluDate
 import { addFormResetListener, getInputDescribedByText, isEmptyString, isNumeric, onComponentRequiredPropUndefined, removeDisabledFalse, removeFormResetListener, renderHiddenInput, stringEnumToArray, } from "../../utils/helpers";
 import Clear from "../../assets/clear-icon.svg";
 import Calendar from "../../assets/calendar.svg";
+import "../../../../web-components/src/components/ic-input-container/ic-input-container";
+import "../../../../web-components/src/components/ic-input-component-container/ic-input-component-container";
+import "../../../../web-components/src/components/ic-input-label/ic-input-label";
+import "../../../../web-components/src/components/ic-input-validation/ic-input-validation";
+import "../../../../web-components/src/components/ic-button/ic-button";
+import "../../../../web-components/src/components/ic-typography/ic-typography";
+import "../../../../web-components/src/components/ic-link/ic-link";
 let inputIds = 0;
 /**
  * @slot helper-text - Content is set as the helper text for the date input.
@@ -1167,6 +1174,7 @@ export class DateInput {
         }
     }
     render() {
+        var _a;
         const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, theme, validationAriaLive, } = this;
         const hasCustomValidation = !isEmptyString(this.validationStatus);
         const validationStatus = hasCustomValidation
@@ -1176,15 +1184,17 @@ export class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (h(Host, { key: '0b677de27ad0835484eb7a68e6bc52cddb13b975', class: {
+        return (h(Host, { key: '894d4c210ef2598074038ec24d45ae891cd5932d', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '8b440f9db75cf42c81163a8fc3fc927bddf061e7', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '459c0ccececeddf034ee64775c41bea6e2c57b29', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'd051f25b9e91432752719c4c3e7511242697f93b', name: "helper-text", slot: "helper-text" }))), h("span", { key: 'bf2072a9a7482fa73ad3d4f178eadf3a39ea38d4', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'ddae7fb05d3ff797eb08207dd12b3d98f0f3aa05', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'bbd17aaf26b098379f436a6fc59fdcee52c52b64', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: 'c602e815b61b7c7bbd31390f47116f58b21852d4', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '131868d25ab4297d80efec74f893552817f17186', class: "input-container" }, h("div", { key: 'c7184bd4b046ffd309fb20ee8fc90033d33e05fc', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '09009c954f7f4d0771553fdc13bfe2cc25cbf74a', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '7a1878087c6b6091a7ef27c4cac6ac145ca09ae9', id: "clear-button", "aria-label": "Clear input", class: {
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '39bb28edd5d11e18a7d0a0a6e87cb33fec78dc9e', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: 'f8e878e5629318e5b2eb32771bfce3e9e9af2bd8', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText !== null && helperText !== void 0 ? helperText : undefined : "", disabled: disabled }, h("slot", { key: 'b3e259f609df0457f014af6cfec958d7e69a74ff', name: "helper-text", slot: "helper-text" }))), h("span", { key: '1f7c47515397e895e794f84193b8f5c38290cf61', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '0e6255361a6ab455bfe391b9c222b06a267cce5e', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '9292ae3b7b70cae04d1b4a7bc80c74f4b18e419d', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '1513590a6ad37c9d73cf92d93a56ec01999a4f70', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'f239dad4ad5279bb621786ca38c9eee186b730ff', class: "input-container" }, h("div", { key: '846282ae8bc4a5ae3fce127dd63d7193ff87be8d', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '39c1443665b141e1ee83076158b1c55bb379d659', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '50e305ad3048d844c55ef98c1e0a6a0e00cebcb7', id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
                     isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: 'ec2f995db607ae5d575ddd7994e85f4b883ce2bb', class: "show-calendar-button-wrapper" }, h("div", { key: '74e895071ab608fcccc0a3e2b2ec368511efe4d3', class: { divider: true, [size]: true } }), h("ic-button", { key: '51e8939da851ae18809840d22492f3b5be958b26', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { key: '77d360d10492577650304e7914021ad40bb8b281', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '1c285045fb1b18bca93c9e32956e93b8d400b0a1', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), h("ic-input-validation", { key: '7f02c2d9ec754c92dec3156339e6ea6b504b8d74', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: 'dd6c21da8fb8d644c49ba73dc86518d0356e17a8', class: "show-calendar-button-wrapper" }, h("div", { key: '300b22928703fbf3d713e3e9e7fbe600ce11e4dc', class: { divider: true, [size]: true } }), h("ic-button", { key: '79d1c71f09b7b3f4cd6fcf824c9eb6ee877caacb', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { key: '03a6a7aae9516df3bb65becac9839a92f5ab7e18', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'e70c8df270cabf7482775b0eb5f5304e77ef79ee', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), h("ic-input-validation", { key: '58a678dfc8970afdfb061c6bd98ee479efd2a8c9', status: validationStatus, message: hasCustomValidation
+                ? (_a = this.validationText) !== null && _a !== void 0 ? _a : ""
+                : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
     }
     static get is() { return "ic-date-input"; }
     static get encapsulation() { return "shadow"; }