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

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

@@ -1,5 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { i as isSlotUsed } from './helpers2.js';
+import { d as defineCustomElement$4 } from './ic-select2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+import './helpers.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$b } from './ic-button2.js';
 import { d as defineCustomElement$a } from './ic-input-component-container2.js';
 import { d as defineCustomElement$9 } from './ic-input-container2.js';
@@ -7,9 +11,6 @@ import { d as defineCustomElement$8 } from './ic-input-label2.js';
 import { d as defineCustomElement$7 } from './ic-input-validation2.js';
 import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$5 } from './ic-menu2.js';
-import { d as defineCustomElement$4 } from './ic-select2.js';
-import { d as defineCustomElement$3 } from './ic-tooltip2.js';
-import { d as defineCustomElement$2 } from './ic-typography2.js';
 
 const icDataTableTitleBarCss = ".title-bar-wrapper,.header-container,.description-actions,.action-area,.custom-actions-wrapper{display:flex}.title-bar-wrapper,.action-area,.custom-actions-wrapper{gap:var(--ic-space-xs)}.title-bar-wrapper{flex-direction:column;padding:var(--ic-space-sm) var(--ic-space-xs);border-bottom:var(--ic-space-1px) solid\n    var(--ic-data-table-title-bar-keyline);background-color:var(--ic-data-table-title-bar-background)}.full-width{padding:var(--ic-space-sm) 0;border-bottom:none}ic-typography.heading h3{margin:0}ic-typography.ic-typography-subtitle-small{--ic-typography-color:var(--ic-data-table-title-bar-information)}ic-typography.ic-typography-h3,::slotted([slot=\"header\"]){max-width:50rem;color:var(--ic-data-table-title-bar-title);--ic-typography-color:var(--ic-data-table-title-bar-title)}ic-typography.ic-typography-body,::slotted([slot=\"description\"]){color:var(--ic-data-table-title-bar-description);--ic-typography-color:var(--ic-data-table-title-bar-description)}ic-typography.ic-typography-body,ic-typography.ic-typography-subtitle-small,::slotted([slot=\"description\"]){max-width:40rem}.density-input{--input-width:7.625rem}@media (max-width: 1200px){.header-container{flex-direction:column}}@media (min-width: 1201px){.header-container{gap:var(--ic-space-xs);align-items:baseline}}@media (min-width: 769px){.description-actions{justify-content:space-between}}@media (max-width: 768px){.description-actions{flex-direction:column;align-items:flex-start;gap:var(--ic-space-xs)}}@media (min-width: 577px){.action-area{align-items:center}}@media (max-width: 576px){.action-area{flex-direction:column}}";
 const IcDataTableTitleBarStyle0 = icDataTableTitleBarCss;
@@ -32,7 +33,17 @@ const DataTableTitleBar = /*@__PURE__*/ proxyCustomElement(class DataTableTitleB
          */
         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() {
@@ -52,14 +63,14 @@ const DataTableTitleBar = /*@__PURE__*/ proxyCustomElement(class DataTableTitleB
             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" }))))))));
     }
     get el() { return this; }
     static get style() { return IcDataTableTitleBarStyle0; }

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

@@ -1 +1 @@
-{"file":"ic-data-table-title-bar.js","mappings":"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","names":[],"sources":["src/components/ic-data-table-title-bar/ic-data-table-title-bar.css?tag=ic-data-table-title-bar&encapsulation=shadow","src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"sourcesContent":[".title-bar-wrapper,\n.header-container,\n.description-actions,\n.action-area,\n.custom-actions-wrapper {\n  display: flex;\n}\n\n.title-bar-wrapper,\n.action-area,\n.custom-actions-wrapper {\n  gap: var(--ic-space-xs);\n}\n\n.title-bar-wrapper {\n  flex-direction: column;\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n  border-bottom: var(--ic-space-1px) solid\n    var(--ic-data-table-title-bar-keyline);\n  background-color: var(--ic-data-table-title-bar-background);\n}\n\n.full-width {\n  padding: var(--ic-space-sm) 0;\n  border-bottom: none;\n}\n\nic-typography.heading h3 {\n  margin: 0;\n}\n\nic-typography.ic-typography-subtitle-small {\n  --ic-typography-color: var(--ic-data-table-title-bar-information);\n}\n\nic-typography.ic-typography-h3,\n::slotted([slot=\"header\"]) {\n  max-width: 50rem;\n  color: var(--ic-data-table-title-bar-title);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-title);\n}\n\nic-typography.ic-typography-body,\n::slotted([slot=\"description\"]) {\n  color: var(--ic-data-table-title-bar-description);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-description);\n}\n\nic-typography.ic-typography-body,\nic-typography.ic-typography-subtitle-small,\n::slotted([slot=\"description\"]) {\n  max-width: 40rem;\n}\n\n.density-input {\n  --input-width: 7.625rem;\n}\n\n@media (max-width: 1200px) {\n  .header-container {\n    flex-direction: column;\n  }\n}\n\n@media (min-width: 1201px) {\n  .header-container {\n    gap: var(--ic-space-xs);\n    align-items: baseline;\n  }\n}\n\n@media (min-width: 769px) {\n  .description-actions {\n    justify-content: space-between;\n  }\n}\n\n@media (max-width: 768px) {\n  .description-actions {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--ic-space-xs);\n  }\n}\n\n@media (min-width: 577px) {\n  .action-area {\n    align-items: center;\n  }\n}\n\n@media (max-width: 576px) {\n  .action-area {\n    flex-direction: column;\n  }\n}\n","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","mappings":"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","names":[],"sources":["src/components/ic-data-table-title-bar/ic-data-table-title-bar.css?tag=ic-data-table-title-bar&encapsulation=shadow","src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"sourcesContent":[".title-bar-wrapper,\n.header-container,\n.description-actions,\n.action-area,\n.custom-actions-wrapper {\n  display: flex;\n}\n\n.title-bar-wrapper,\n.action-area,\n.custom-actions-wrapper {\n  gap: var(--ic-space-xs);\n}\n\n.title-bar-wrapper {\n  flex-direction: column;\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n  border-bottom: var(--ic-space-1px) solid\n    var(--ic-data-table-title-bar-keyline);\n  background-color: var(--ic-data-table-title-bar-background);\n}\n\n.full-width {\n  padding: var(--ic-space-sm) 0;\n  border-bottom: none;\n}\n\nic-typography.heading h3 {\n  margin: 0;\n}\n\nic-typography.ic-typography-subtitle-small {\n  --ic-typography-color: var(--ic-data-table-title-bar-information);\n}\n\nic-typography.ic-typography-h3,\n::slotted([slot=\"header\"]) {\n  max-width: 50rem;\n  color: var(--ic-data-table-title-bar-title);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-title);\n}\n\nic-typography.ic-typography-body,\n::slotted([slot=\"description\"]) {\n  color: var(--ic-data-table-title-bar-description);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-description);\n}\n\nic-typography.ic-typography-body,\nic-typography.ic-typography-subtitle-small,\n::slotted([slot=\"description\"]) {\n  max-width: 40rem;\n}\n\n.density-input {\n  --input-width: 7.625rem;\n}\n\n@media (max-width: 1200px) {\n  .header-container {\n    flex-direction: column;\n  }\n}\n\n@media (min-width: 1201px) {\n  .header-container {\n    gap: var(--ic-space-xs);\n    align-items: baseline;\n  }\n}\n\n@media (min-width: 769px) {\n  .description-actions {\n    justify-content: space-between;\n  }\n}\n\n@media (max-width: 768px) {\n  .description-actions {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--ic-space-xs);\n  }\n}\n\n@media (min-width: 577px) {\n  .action-area {\n    align-items: center;\n  }\n}\n\n@media (max-width: 576px) {\n  .action-area {\n    flex-direction: column;\n  }\n}\n","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"],"version":3}

package/dist/components/ic-data-table.js

@@ -1,23 +1,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { f as isEmptyString, p as pxToRem, i as isSlotUsed, h as addDataToPosition, j as deviceSizeMatches, k as getSlotElements, l as checkResizeObserver, m as dynamicDebounce, n as IC_DEVICE_SIZES } from './helpers2.js';
 import { s as sanitizeHTMLIconString } from './common-helpers.js';
-import { d as defineCustomElement$i } from './ic-button2.js';
-import { d as defineCustomElement$h } from './ic-checkbox2.js';
-import { d as defineCustomElement$g } from './ic-empty-state2.js';
-import { d as defineCustomElement$f } from './ic-input-component-container2.js';
-import { d as defineCustomElement$e } from './ic-input-container2.js';
-import { d as defineCustomElement$d } from './ic-input-label2.js';
-import { d as defineCustomElement$c } from './ic-input-validation2.js';
-import { d as defineCustomElement$b } from './ic-link2.js';
-import { d as defineCustomElement$a } from './ic-loading-indicator2.js';
-import { d as defineCustomElement$9 } from './ic-menu2.js';
-import { d as defineCustomElement$8 } from './ic-pagination2.js';
-import { d as defineCustomElement$7 } from './ic-pagination-bar2.js';
-import { d as defineCustomElement$6 } from './ic-pagination-item2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+import { d as defineCustomElement$9 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$h } from './ic-button2.js';
+import { d as defineCustomElement$a } from './ic-link2.js';
+import { d as defineCustomElement$f } from './ic-empty-state2.js';
+import { d as defineCustomElement$g } from './ic-checkbox2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$e } from './ic-input-component-container2.js';
+import { d as defineCustomElement$d } from './ic-input-container2.js';
+import { d as defineCustomElement$c } from './ic-input-label2.js';
+import { d as defineCustomElement$b } from './ic-input-validation2.js';
+import { d as defineCustomElement$8 } from './ic-menu2.js';
+import { d as defineCustomElement$7 } from './ic-pagination2.js';
+import { d as defineCustomElement$6 } from './ic-pagination-bar2.js';
 import { d as defineCustomElement$5 } from './ic-select2.js';
 import { d as defineCustomElement$4 } from './ic-text-field2.js';
-import { d as defineCustomElement$3 } from './ic-tooltip2.js';
-import { d as defineCustomElement$2 } from './ic-typography2.js';
 
 const unsortedIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
     <path d="M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"></path>
@@ -782,7 +781,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                         "table-cell": true,
                         "checkbox-cell": true,
                         [`table-density-${this.density}`]: this.notDefaultDensity(),
-                    } }, h("div", { class: "checkbox-wrapper" }, h("ic-checkbox", { class: "ic-data-table-checkbox", checked: isRowSelected, disabled: this.updating || this.loading, hideLabel: true, label: `${isRowSelected ? "Deselect" : "Select"} row ${cellIndex}`, onIcCheck: () => this.onRowClick(row), size: this.density === "dense" ? "small" : "medium", value: cellIndex })))), this.createCells(row, cellIndex)));
+                    } }, h("div", { class: "checkbox-wrapper" }, h("ic-checkbox", { class: "ic-data-table-checkbox", checked: isRowSelected, disabled: this.updating || this.loading, hideLabel: true, label: `${isRowSelected ? "Deselect" : "Select"} row ${cellIndex}`, onIcCheck: () => this.onRowClick(row), size: this.density === "dense" ? "small" : "medium", value: cellIndex.toString() })))), this.createCells(row, cellIndex)));
             });
         };
         this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
@@ -1384,26 +1383,26 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: '5a54a8292fc31e31e968c76b21f957d6ed4665bb', style: Object.assign({}, this.setTableDimensions()), class: {
+        return (h(Host, { key: '5e348df04d8763b2ef4430d75712892932a33a5a', style: Object.assign({}, this.setTableDimensions()), class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-data-table-show-pagination`]: !!showPagination,
                 [`ic-data-table-embedded`]: !!embedded,
-            } }, h("div", { key: '664f9b13c5c5f9b2a0323a870b7c96cfc8e2c45d', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '997ec993032c647aea11da288c2f2b19c5f69f8b', name: "title-bar" }), h("div", { key: '35823b8f7cfeeaeab64dc248ef65c6c52762cf03', class: {
+            } }, h("div", { key: '25efcd5aee9d2c771bdf11e94e35c0f5b2a1b5b0', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '2bac336f9c1eb9952d50d365a301de96ad9df811', name: "title-bar" }), h("div", { key: '7f15277d1c142db27f10e7f4ba058bc0fcc2f954', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '9b9c1bbf6ebcc08ca235f2637c95dc74bd49c3a1', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '82ac644d852daedbe3f11dc4cdcdb1c249691be3', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: 'f5acadc8976d3b474dab6d17c957553a384c348a', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '4131acaa910add9c3f596f34c879b539e69e4c69', class: {
+            } }, h("caption", { key: 'd2f8a9a90d69eaeac149847475a6ad4a88272ab8', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '8ba3b64738f173d81d6b64703f9818654ac542b5', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: 'ddf0b02e09b404800f07b86709812a8c719da333' }, rowSelection && data && (h("th", { key: '3aa7cb15d490ea90a1c33959ff83987b244951f4', class: {
+            } }, h("tr", { key: '44db873360294f71dda8c3be415236d9c723e15b' }, rowSelection && data && (h("th", { key: '2e46eed13aab238d3ff76eea95c81c8cbbdb7e82', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: '0b42136651692a5b69131dc40eb80636e0cb5ff1', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'be47f6ce2b9c6450b4fff5bba46686396fbf7bab', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
+            } }, h("div", { key: '3a1de5311e79df9207c94c6e5ea8a85babb6272a', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '7b4084ab45f93093fc4e61670b6cc0acd6184c5e', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '23b30f12641186e93d7c20cee3b302d002f799cc', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '639f16bbcb3ee28acd812e753ad242bdfc9fda24', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideCurrentPage: paginationBarOptions.hideCurrentPage, hideFirstAndLastPageButton: paginationBarOptions.hideFirstAndLastPageButton, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: 'fdd6bfc99732ce13c66e322f91630bb02e23fd1b', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '41457b9e327363eaf70e2ae852d356d47697f283', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '5268adc73bec4a25a759ce364399ef64a01cfdef', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideCurrentPage: paginationBarOptions.hideCurrentPage, hideFirstAndLastPageButton: paginationBarOptions.hideFirstAndLastPageButton, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: '05ce08d46c1c3b0b0daa63936933c36871742dd1', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
@@ -1477,7 +1476,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ic-data-table", "ic-button", "ic-checkbox", "ic-empty-state", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
+    const components = ["ic-data-table", "ic-button", "ic-checkbox", "ic-empty-state", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ic-data-table":
             if (!customElements.get(tagName)) {
@@ -1485,66 +1484,61 @@ function defineCustomElement$1() {
             }
             break;
         case "ic-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "ic-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "ic-empty-state":
+        case "ic-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "ic-input-component-container":
+        case "ic-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "ic-input-container":
+        case "ic-input-component-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "ic-input-label":
+        case "ic-input-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "ic-input-validation":
+        case "ic-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "ic-link":
+        case "ic-input-validation":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "ic-loading-indicator":
+        case "ic-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "ic-menu":
+        case "ic-loading-indicator":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ic-pagination":
+        case "ic-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ic-pagination-bar":
+        case "ic-pagination":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ic-pagination-item":
+        case "ic-pagination-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }