@ukic/canary-web-components 3.0.0-canary.30 → 3.0.0-canary.32

package/dist/collection/components/ic-calendar/ic-year-picker.js

@@ -0,0 +1,57 @@
+import { h } from "@stencil/core";
+import { yearInRange } from "../../utils/date-helpers";
+export const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear, onFocusYear, onBlurYear, onKeyDown, minDate, maxDate, focussedYearRef, }) => {
+    const handleYearClick = (ev) => {
+        const button = ev.target;
+        onSelectYear(Number(button.getAttribute("data-year")));
+    };
+    const handleYearFocus = () => {
+        onFocusYear();
+    };
+    const handleYearBlur = () => {
+        onBlurYear();
+    };
+    const navButtonMouseDownHandler = (ev) => {
+        ev.preventDefault();
+    };
+    const cols = size === "small" ? 2 : 3;
+    const rows = size === "small" ? 6 : 4;
+    const thisDecade = [];
+    for (let i = 0; i < decadeView.length; i += cols) {
+        thisDecade.push(decadeView.slice(i, i + cols));
+    }
+    const renderYearButton = (yr, yearIdx, idx) => {
+        const isPrevDecade = yearIdx === 0 && idx === 0;
+        const isNextDecade = yearIdx === rows - 1 && idx === cols - 1;
+        const isCurrent = yearInView === yr;
+        const isFocussed = focussedYear === yr;
+        return (h("ic-button", { key: yr, role: "gridcell", id: isPrevDecade
+                ? "prev-decade-button"
+                : isNextDecade
+                    ? "next-decade-button"
+                    : undefined, class: {
+                "prev-decade": isPrevDecade,
+                "next-decade": isNextDecade,
+                "year-button": true,
+                selected: !isPrevDecade && !isNextDecade ? isCurrent : false,
+                focussed: !isPrevDecade && !isNextDecade ? isFocussed : false,
+                flip: isNextDecade,
+            }, "full-width": true, disabled: !yearInRange(yr, minDate, maxDate), "data-year": yr, tabIndex: isPrevDecade || isNextDecade ? -1 : isFocussed ? 0 : -1, variant: isPrevDecade || isNextDecade
+                ? "tertiary"
+                : isCurrent
+                    ? "primary"
+                    : "tertiary", onClick: handleYearClick, onMouseDown: isPrevDecade || isNextDecade ? navButtonMouseDownHandler : undefined, size: size, "aria-label": !isPrevDecade && !isNextDecade
+                ? isCurrent
+                    ? ""
+                    : `select ${yr}`
+                : undefined, "aria-current": !isPrevDecade && !isNextDecade
+                ? isCurrent
+                    ? "true"
+                    : "false"
+                : undefined, onKeyDown: !isPrevDecade && !isNextDecade ? onKeyDown : undefined, onFocus: !isPrevDecade && !isNextDecade ? handleYearFocus : undefined, onBlur: !isPrevDecade && !isNextDecade ? handleYearBlur : undefined, ref: !isPrevDecade && !isNextDecade && isFocussed
+                ? (el) => el && focussedYearRef(el)
+                : undefined }, isPrevDecade ? `${yr - 9}s` : isNextDecade ? `${yr}s` : yr, (isPrevDecade || isNextDecade) && (h("svg", { slot: isPrevDecade ? "left-icon" : "right-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, h("path", { d: "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z", fill: "currentColor" })))));
+    };
+    return (h("div", { class: "year-picker", role: "grid" }, thisDecade.map((years, yearIdx) => (h("div", { class: "year-picker-row", role: "row", key: yearIdx }, years.map((yr, idx) => renderYearButton(yr, yearIdx, idx)))))));
+};
+//# sourceMappingURL=ic-year-picker.js.map

package/dist/collection/components/ic-calendar/ic-year-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-year-picker.js","sourceRoot":"","sources":["../../../../../src/components/ic-calendar/ic-year-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\nimport { yearInRange } from \"../../utils/date-helpers\";\nimport { IcSizes } from \"../../utils/types\";\n\nexport type YearPickerProps = {\n  decadeView: number[];\n  focussedYear: number;\n  yearInView: number;\n  onSelectYear: (year: number) => void;\n  onKeyDown: (ev: KeyboardEvent) => void;\n  onFocusYear: () => void;\n  onBlurYear: () => void;\n  minDate: Date | null;\n  maxDate: Date | null;\n  focussedYearRef: (element: HTMLIcButtonElement) => void;\n  size?: IcSizes;\n};\n\nexport const YearPicker: FunctionalComponent<YearPickerProps> = ({\n  decadeView,\n  size,\n  focussedYear,\n  yearInView,\n  onSelectYear,\n  onFocusYear,\n  onBlurYear,\n  onKeyDown,\n  minDate,\n  maxDate,\n  focussedYearRef,\n}) => {\n  const handleYearClick = (ev: MouseEvent): void => {\n    const button = ev.target as HTMLElement;\n    onSelectYear(Number(button.getAttribute(\"data-year\")));\n  };\n\n  const handleYearFocus = (): void => {\n    onFocusYear();\n  };\n\n  const handleYearBlur = (): void => {\n    onBlurYear();\n  };\n\n  const navButtonMouseDownHandler = (ev: MouseEvent): void => {\n    ev.preventDefault();\n  };\n\n  const cols = size === \"small\" ? 2 : 3;\n  const rows = size === \"small\" ? 6 : 4;\n\n  const thisDecade: number[][] = [];\n  for (let i = 0; i < decadeView.length; i += cols) {\n    thisDecade.push(decadeView.slice(i, i + cols));\n  }\n\n  const renderYearButton = (yr: number, yearIdx: number, idx: number) => {\n    const isPrevDecade = yearIdx === 0 && idx === 0;\n    const isNextDecade = yearIdx === rows - 1 && idx === cols - 1;\n    const isCurrent = yearInView === yr;\n    const isFocussed = focussedYear === yr;\n\n    return (\n      <ic-button\n        key={yr}\n        role=\"gridcell\"\n        id={\n          isPrevDecade\n            ? \"prev-decade-button\"\n            : isNextDecade\n            ? \"next-decade-button\"\n            : undefined\n        }\n        class={{\n          \"prev-decade\": isPrevDecade,\n          \"next-decade\": isNextDecade,\n          \"year-button\": true,\n          selected: !isPrevDecade && !isNextDecade ? isCurrent : false,\n          focussed: !isPrevDecade && !isNextDecade ? isFocussed : false,\n          flip: isNextDecade,\n        }}\n        full-width\n        disabled={!yearInRange(yr, minDate, maxDate)}\n        data-year={yr}\n        tabIndex={isPrevDecade || isNextDecade ? -1 : isFocussed ? 0 : -1}\n        variant={\n          isPrevDecade || isNextDecade\n            ? \"tertiary\"\n            : isCurrent\n            ? \"primary\"\n            : \"tertiary\"\n        }\n        onClick={handleYearClick}\n        onMouseDown={\n          isPrevDecade || isNextDecade ? navButtonMouseDownHandler : undefined\n        }\n        size={size}\n        aria-label={\n          !isPrevDecade && !isNextDecade\n            ? isCurrent\n              ? \"\"\n              : `select ${yr}`\n            : undefined\n        }\n        aria-current={\n          !isPrevDecade && !isNextDecade\n            ? isCurrent\n              ? \"true\"\n              : \"false\"\n            : undefined\n        }\n        onKeyDown={!isPrevDecade && !isNextDecade ? onKeyDown : undefined}\n        onFocus={!isPrevDecade && !isNextDecade ? handleYearFocus : undefined}\n        onBlur={!isPrevDecade && !isNextDecade ? handleYearBlur : undefined}\n        ref={\n          !isPrevDecade && !isNextDecade && isFocussed\n            ? (el: HTMLIcButtonElement | undefined) => el && focussedYearRef(el)\n            : undefined\n        }\n      >\n        {isPrevDecade ? `${yr - 9}s` : isNextDecade ? `${yr}s` : yr}\n        {(isPrevDecade || isNextDecade) && (\n          <svg\n            slot={isPrevDecade ? \"left-icon\" : \"right-icon\"}\n            width=\"12\"\n            height=\"12\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        )}\n      </ic-button>\n    );\n  };\n\n  return (\n    <div class=\"year-picker\" role=\"grid\">\n      {thisDecade.map((years, yearIdx) => (\n        <div class=\"year-picker-row\" role=\"row\" key={yearIdx}>\n          {years.map((yr, idx) => renderYearButton(yr, yearIdx, idx))}\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/ic-calendar/test/a11y/ic-calendar.test.a11y.js

@@ -0,0 +1,13 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "@ukic/web-components/src/utils/testa11y.helpers";
+describe("ic-calendar", () => {
+    it("passes accessibility", async () => {
+        const el = await fixture(`
+    <ic-calendar></ic-calendar>
+    `);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+});
+//# sourceMappingURL=ic-calendar.test.a11y.js.map

package/dist/collection/components/ic-calendar/test/a11y/ic-calendar.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-calendar.test.a11y.js","sourceRoot":"","sources":["../../../../../../../src/components/ic-calendar/test/a11y/ic-calendar.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,iDAAiD,CAAC;AAErG,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;KAExB,CAAC,CAAC;QACH,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"@ukic/web-components/src/utils/testa11y.helpers\";\n\ndescribe(\"ic-calendar\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n    <ic-calendar></ic-calendar>\n    `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 import { getBrandFromContext, isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, renderDynamicChildSlots, } from "../../utils/helpers";
-import { IcBrandForegroundEnum } from "../../utils/types";
 /**
  * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.
  * @slot message - Content will be placed in the main body of the horizontal card.
@@ -144,7 +144,7 @@ export class Card {
         };
         const hasLeftImage = isSlotUsed(this.el, this.IMAGE_LEFT);
         const hasRightImage = isSlotUsed(this.el, this.IMAGE_RIGHT);
-        return (h(Host, { key: '71149e1767ee411bc3bb68176aa76d465a9e7277', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h(Component, Object.assign({ key: '10b36cfc0dad51aa4ac98cb37c18824ac98372a6', class: {
+        return (h(Host, { key: '6ead2d291cd0679234061acfff7d972e287d422a', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h(Component, Object.assign({ key: 'b19808bcd15c3e354bd60de589f49a4c3b022ef2', class: {
                 card: true,
                 clickable: clickable && !disabled,
                 disabled,
@@ -154,15 +154,15 @@ export class Card {
                 "with-icon": isSlotUsed(this.el, "icon"),
                 "with-image": hasLeftImage || hasRightImage,
                 spacious: density === "spacious",
-            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : undefined, disabled: disabled ? true : undefined }, attrs), hasLeftImage && (h("div", { key: '0df46b54576173ca424a61b6fee99f94011e07ca', class: "image" }, h("slot", { key: '7f9fc4613ee4ab8ae3790a01884c2f8a0b07e4b2', name: "image-left" }))), h("div", { key: '54f3d5a785156094e9162312e6967fd610612e55', class: {
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : undefined, disabled: disabled ? true : undefined }, attrs), hasLeftImage && (h("div", { key: '37d59a742f88f8a5f365611a11ed1e5c0918b7bd', class: "image" }, h("slot", { key: 'b8b49ff2f2061379f29bec9dd493fe85aab52bf0', name: "image-left" }))), h("div", { key: '150d0ce31ad800d54fbee1d384fcd9048117c7d5', class: {
                 "card-content": true,
                 "left-image": hasLeftImage,
                 "right-image": hasRightImage,
-            } }, h("div", { key: 'ca54104523a6f294092cea4c9361b1ef45235325', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: 'bd65772f58d6f3ac1722e98da6a3cee1586fadeb', class: "icon" }, h("slot", { key: '9c2ed5baffadadf7f4e019844268134861385b9e', name: "icon" }))), h("div", { key: '41c9724ba29c9f576277bad2f4163ea89dd9ec8d', class: {
+            } }, h("div", { key: '890b37e7f3e0f36e9594d4dfb351ef28f50c367a', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: '162f83733f6a59536789607e134b335a45e535dc', class: "icon" }, h("slot", { key: 'e2307f93da5af4e55c622d03ca743604dab7d52c', name: "icon" }))), h("div", { key: 'ae5803e20f33c9d8af038a7e3d96ed54b3dad55c', class: {
                 "card-title": true,
                 "with-interaction-button": isSlotUsed(this.el, this.INTERACTION_BUTTON),
-            } }, h("slot", { key: '586bcc0fb595ddae41768ff2117c6bf429cdcc90', name: "heading" }, h("ic-typography", { key: '7e86d81964708451d868a615a387b13f6b84db2a', variant: "h4" }, h("p", { key: '5c584cd409792a753cb7abe28e012e6ba8f23ad0' }, heading)))), isSlotUsed(this.el, this.INTERACTION_BUTTON) && (h("div", { key: '6a88f1edfbf40d5c14e66edc2a8d82575c650584', class: "interaction-button" }, h("slot", { key: '0f01efcb2fa17af8e7c649dd870bc25dcbd622c7', name: "interaction-button" })))), density === "spacious" &&
-            (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: 'b6643753651caab3d9392199fdad2aa31e7a2573', class: "subheading" }, h("slot", { key: 'fca9e50b4b3625b03782ed69e3f13909b32c9a40', name: "subheading" }, h("ic-typography", { key: '4c4a225688575fed9d63ca6aa4270d086c6a4571', variant: "subtitle-small" }, subheading)))), density === "spacious" && isSlotUsed(this.el, "adornment") && (h("div", { key: '950d24f7eb8bd16469cd880a73814c886cc7eba6', class: "adornment" }, h("slot", { key: '6082019fb7f20d4fd9352d1bdd6d36cf8fcf569d', name: "adornment" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: 'f88a674c20fc8296ced85465bc4a38f294393bd8', class: "card-message" }, message && (h("ic-typography", { key: 'b67b8b1abb1af132f64ef31c49ef236b23a769d7', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: 'a4bc98e9018fdd089431467ea022ccee8c1af707', name: "message" })))), isSlotUsed(this.el, "badge") && h("slot", { key: '50dfe5ca32b19cc14da9634987d6e12d2f7ec204', name: "badge" }), hasRightImage && (h("div", { key: '2bbdcfa7022f36d99193b5cff064583c7dde7d42', class: "image" }, h("slot", { key: '9a523136628d2401506c73b9e6257cd0843773fb', name: "image-right" }))))));
+            } }, h("slot", { key: '813dffbe5feb5bd2ea6512e7f4b8771c9cd42423', name: "heading" }, h("ic-typography", { key: '23c3c176af04d0518bdce0f5768d506341504909', variant: "h4" }, h("p", { key: 'cd1436f1ed8befaa0071a027040d9ef9da36cd79' }, heading)))), isSlotUsed(this.el, this.INTERACTION_BUTTON) && (h("div", { key: '3e14759cbdadf5e6c3217f691c4bcb30001b1b57', class: "interaction-button" }, h("slot", { key: 'c5894ff645923096041f8ee84d59c81767cc4f31', name: "interaction-button" })))), density === "spacious" &&
+            (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '92b922ebfa767238dc66d1a61f2f69ac0ce28ff5', class: "subheading" }, h("slot", { key: '3e3c6db9639a762a264998e7b9031031ea8ffc26', name: "subheading" }, h("ic-typography", { key: '1d6a15cb8e3e78b482ae496c185e7aab0748445e', variant: "subtitle-small" }, subheading)))), density === "spacious" && isSlotUsed(this.el, "adornment") && (h("div", { key: '261e04fc16724ad08d92848cce2ef633e99f8514', class: "adornment" }, h("slot", { key: '513cf2ce9800ac00ab4d88b0a832fd0267060a62', name: "adornment" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '6a5516f1fa127a04bc8aaf6bd29a94d7b5e538ed', class: "card-message" }, message && (h("ic-typography", { key: 'e6b4f524f97a5b8dff5e9c66a90243455a9bb99b', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: 'be5b20d2cea7ec3b7eb1bdd829d0afe444087bee', name: "message" })))), isSlotUsed(this.el, "badge") && h("slot", { key: '99734067ee2c03832d4129280da508bb8be7c816', name: "badge" }), hasRightImage && (h("div", { key: '6e2610a79d2216ef23b51e7695d0dbec40e65184', class: "image" }, h("slot", { key: 'a1b7be2ee79695fc535f73e140b1c23101a40e6f', name: "image-right" }))))));
     }
     static get is() { return "ic-card-horizontal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-card-horizontal.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/ic-card-horizontal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcCardDensity,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  getBrandFromContext,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcBrandForegroundEnum, IcSizes } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.\n * @slot message - Content will be placed in the main body of the horizontal card.\n * @slot subheading - Content will be placed below the card heading. Only for `density=\"spacious\"`.\n * @slot adornment - Content will be placed below the card subheading. Only for `density=\"spacious\"`.\n * @slot image-left - Content will be placed to the left of all other content.\n * @slot image-right - Content will be placed to the right of all other content.\n * @slot icon - Content will be placed to the left of the horizontal card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot badge - Badge component overlaying the top right of the horizontal card.\n */\n@Component({\n  tag: \"ic-card-horizontal\",\n  styleUrl: \"ic-card-horizontal.css\",\n  shadow: true,\n})\nexport class Card {\n  private hostMutationObserver: MutationObserver | null = null;\n  private IMAGE_LEFT = \"image-left\";\n  private IMAGE_RIGHT = \"image-right\";\n  private INTERACTION_BUTTON = \"interaction-button\";\n\n  @Element() el: HTMLIcCardHorizontalElement;\n\n  @State() appearance?: IcBrandForeground = \"default\";\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable: boolean = false;\n\n  /**\n   * The padding of the horizontal card.\n   */\n  @Prop() density: IcCardDensity = \"default\";\n\n  /**\n   * If `true`, the horizontal card will be disabled if it is clickable.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The heading for the horizontal card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the horizontal card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The size of the horizontal card.\n   */\n  @Prop() size: IcSizes = \"medium\";\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.parentEl && this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl?.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(\n        mutationList,\n        [\n          \"message\",\n          \"adornment\",\n          this.IMAGE_LEFT,\n          this.IMAGE_RIGHT,\n          \"icon\",\n          this.INTERACTION_BUTTON,\n          \"badge\",\n        ],\n        this\n      )\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const linkElement = this.el.shadowRoot?.querySelector(\"a\");\n    const buttonElement = this.el.shadowRoot?.querySelector(\"button\");\n    if (linkElement) {\n      linkElement.focus();\n    } else if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(mode?: IcBrandForeground): void {\n    const foregroundColor = getBrandFromContext(this.el, mode);\n\n    if (foregroundColor !== IcBrandForegroundEnum.Default) {\n      this.theme =\n        foregroundColor === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  render() {\n    const {\n      appearance,\n      clickable,\n      density,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      parentIsAnchorTag,\n      isFocussed,\n      size,\n      subheading,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    const hasLeftImage = isSlotUsed(this.el, this.IMAGE_LEFT);\n    const hasRightImage = isSlotUsed(this.el, this.IMAGE_RIGHT);\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            focussed: isFocussed,\n            dark: appearance === IcBrandForegroundEnum.Dark,\n            [`${size}`]: true,\n            \"with-icon\": isSlotUsed(this.el, \"icon\"),\n            \"with-image\": hasLeftImage || hasRightImage,\n            spacious: density === \"spacious\",\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : undefined}\n          aria-disabled={disabled ? \"true\" : undefined}\n          disabled={disabled ? true : undefined}\n          {...attrs}\n        >\n          {hasLeftImage && (\n            <div class=\"image\">\n              <slot name=\"image-left\"></slot>\n            </div>\n          )}\n          <div\n            class={{\n              \"card-content\": true,\n              \"left-image\": hasLeftImage,\n              \"right-image\": hasRightImage,\n            }}\n          >\n            <div class=\"card-header\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <div class=\"icon\">\n                  <slot name=\"icon\" />\n                </div>\n              )}\n              <div\n                class={{\n                  \"card-title\": true,\n                  \"with-interaction-button\": isSlotUsed(\n                    this.el,\n                    this.INTERACTION_BUTTON\n                  ),\n                }}\n              >\n                <slot name=\"heading\">\n                  <ic-typography variant=\"h4\">\n                    <p>{heading}</p>\n                  </ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, this.INTERACTION_BUTTON) && (\n                <div class=\"interaction-button\">\n                  <slot name=\"interaction-button\"></slot>\n                </div>\n              )}\n            </div>\n            {density === \"spacious\" &&\n              (subheading || isSlotUsed(this.el, \"subheading\")) && (\n                <div class=\"subheading\">\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"subtitle-small\">\n                      {subheading}\n                    </ic-typography>\n                  </slot>\n                </div>\n              )}\n            {density === \"spacious\" && isSlotUsed(this.el, \"adornment\") && (\n              <div class=\"adornment\">\n                <slot name=\"adornment\"></slot>\n              </div>\n            )}\n            {(message || isSlotUsed(this.el, \"message\")) && (\n              <div class=\"card-message\">\n                {message && (\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                )}\n                {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n              </div>\n            )}\n          </div>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          {hasRightImage && (\n            <div class=\"image\">\n              <slot name=\"image-right\"></slot>\n            </div>\n          )}\n        </Component>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-card-horizontal.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/ic-card-horizontal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcCardDensity,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  getBrandFromContext,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\n\n/**\n * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.\n * @slot message - Content will be placed in the main body of the horizontal card.\n * @slot subheading - Content will be placed below the card heading. Only for `density=\"spacious\"`.\n * @slot adornment - Content will be placed below the card subheading. Only for `density=\"spacious\"`.\n * @slot image-left - Content will be placed to the left of all other content.\n * @slot image-right - Content will be placed to the right of all other content.\n * @slot icon - Content will be placed to the left of the horizontal card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot badge - Badge component overlaying the top right of the horizontal card.\n */\n@Component({\n  tag: \"ic-card-horizontal\",\n  styleUrl: \"ic-card-horizontal.css\",\n  shadow: true,\n})\nexport class Card {\n  private hostMutationObserver: MutationObserver | null = null;\n  private IMAGE_LEFT = \"image-left\";\n  private IMAGE_RIGHT = \"image-right\";\n  private INTERACTION_BUTTON = \"interaction-button\";\n\n  @Element() el: HTMLIcCardHorizontalElement;\n\n  @State() appearance?: IcBrandForeground = \"default\";\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable: boolean = false;\n\n  /**\n   * The padding of the horizontal card.\n   */\n  @Prop() density: IcCardDensity = \"default\";\n\n  /**\n   * If `true`, the horizontal card will be disabled if it is clickable.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The heading for the horizontal card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the horizontal card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The size of the horizontal card.\n   */\n  @Prop() size: IcSizes = \"medium\";\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.parentEl && this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl?.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(\n        mutationList,\n        [\n          \"message\",\n          \"adornment\",\n          this.IMAGE_LEFT,\n          this.IMAGE_RIGHT,\n          \"icon\",\n          this.INTERACTION_BUTTON,\n          \"badge\",\n        ],\n        this\n      )\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const linkElement = this.el.shadowRoot?.querySelector(\"a\");\n    const buttonElement = this.el.shadowRoot?.querySelector(\"button\");\n    if (linkElement) {\n      linkElement.focus();\n    } else if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(mode?: IcBrandForeground): void {\n    const foregroundColor = getBrandFromContext(this.el, mode);\n\n    if (foregroundColor !== IcBrandForegroundEnum.Default) {\n      this.theme =\n        foregroundColor === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  render() {\n    const {\n      appearance,\n      clickable,\n      density,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      parentIsAnchorTag,\n      isFocussed,\n      size,\n      subheading,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    const hasLeftImage = isSlotUsed(this.el, this.IMAGE_LEFT);\n    const hasRightImage = isSlotUsed(this.el, this.IMAGE_RIGHT);\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            focussed: isFocussed,\n            dark: appearance === IcBrandForegroundEnum.Dark,\n            [`${size}`]: true,\n            \"with-icon\": isSlotUsed(this.el, \"icon\"),\n            \"with-image\": hasLeftImage || hasRightImage,\n            spacious: density === \"spacious\",\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : undefined}\n          aria-disabled={disabled ? \"true\" : undefined}\n          disabled={disabled ? true : undefined}\n          {...attrs}\n        >\n          {hasLeftImage && (\n            <div class=\"image\">\n              <slot name=\"image-left\"></slot>\n            </div>\n          )}\n          <div\n            class={{\n              \"card-content\": true,\n              \"left-image\": hasLeftImage,\n              \"right-image\": hasRightImage,\n            }}\n          >\n            <div class=\"card-header\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <div class=\"icon\">\n                  <slot name=\"icon\" />\n                </div>\n              )}\n              <div\n                class={{\n                  \"card-title\": true,\n                  \"with-interaction-button\": isSlotUsed(\n                    this.el,\n                    this.INTERACTION_BUTTON\n                  ),\n                }}\n              >\n                <slot name=\"heading\">\n                  <ic-typography variant=\"h4\">\n                    <p>{heading}</p>\n                  </ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, this.INTERACTION_BUTTON) && (\n                <div class=\"interaction-button\">\n                  <slot name=\"interaction-button\"></slot>\n                </div>\n              )}\n            </div>\n            {density === \"spacious\" &&\n              (subheading || isSlotUsed(this.el, \"subheading\")) && (\n                <div class=\"subheading\">\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"subtitle-small\">\n                      {subheading}\n                    </ic-typography>\n                  </slot>\n                </div>\n              )}\n            {density === \"spacious\" && isSlotUsed(this.el, \"adornment\") && (\n              <div class=\"adornment\">\n                <slot name=\"adornment\"></slot>\n              </div>\n            )}\n            {(message || isSlotUsed(this.el, \"message\")) && (\n              <div class=\"card-message\">\n                {message && (\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                )}\n                {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n              </div>\n            )}\n          </div>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          {hasRightImage && (\n            <div class=\"image\">\n              <slot name=\"image-right\"></slot>\n            </div>\n          )}\n        </Component>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -107,6 +107,8 @@ export class DataTable {
         this.paginationBarOptions = {
             alignment: "right",
             hideAllFromItemsPerPage: false,
+            hideCurrentPage: false,
+            hideFirstAndLastPageButton: false,
             hideRangeLabel: false,
             itemLabel: "Item",
             itemsPerPageOptions: [
@@ -1350,26 +1352,26 @@ export class DataTable {
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: '2cb5ec3e006563c9f004c34c20ec8a07c2869b72', style: Object.assign({}, this.setTableDimensions()), class: {
+        return (h(Host, { key: '9f183b318d949b1342869be9193cdff5fed88d2f', 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: '5318a1c4d87fd8794de4fcdb5562e3f928a2de29', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '4d0db56085a87c58698b7a5562ba5c801376c1cb', name: "title-bar" }), h("div", { key: '1dfefc725dd335261b2f9ec6c91d41dda59224a9', class: {
+            } }, h("div", { key: '67ed81b3d232c0126317900dabba13b24a06946f', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: 'd2543f5ac57d62ade8d1651c2285b6bf7a31f12f', name: "title-bar" }), h("div", { key: '875654c430a0d216061249dbaa1674b8073250e2', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: 'dcbe3ba57d29d0f152305f8c0f72cd405be2f4af', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: 'e3f2659b9fe5f091525a949ccb955da9d633afe7', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: '0beabaa339bff693f17adac6db3192d25ff4a33c', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'b170ffc30468121b456a85afc855f6327d1e135f', class: {
+            } }, h("caption", { key: 'e841f03366a519a9f22a2e9385e3085b9db63201', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '51f0415b666ac119c08ba3a7ef2223547bd55ae3', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: 'ca05651983eb87c6258a1ec6040d9f6ce9881128' }, rowSelection && data && (h("th", { key: 'ba010d39dd2f080cde99a92b3f66b8d600681b6b', class: {
+            } }, h("tr", { key: '0694725f5af74c8173371365e72c7670b8a0e0ac' }, rowSelection && data && (h("th", { key: '6c93c841bab80011f41397363d69172d62f2f11d', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: '7dccd2d21c76265186cff95bbd53a4aab380e946', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'b26fa8b7b59152226b6f58bb0fb46d071ddf484c', 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: 'c97ccb8ac9acfea3f948606f3fbb699d15a142b6', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '6973d631e63e183ecd21c7ca645206966ae95c5b', 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: 'af7e79173d942f15a9c2fe4d644ab33e28bbe17e', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'ba71922427b73925df1750591b12b50d708bc417', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, 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: 'e3c536b4e5e74caf6e0fae1c180729da79639781', 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: 'd55e2139c46b6fd77fa4d09e8a1a2308912d2027', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '6d65f7399346a04d4c050a569b5a716a1374bcc9', 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: '2c4efdb9a3b0a8a775600c6763961e0ee431cf86', 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")))));
@@ -1721,7 +1723,7 @@ export class DataTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\n    alignment: \"right\",\n    hideAllFromItemsPerPage: false,\n    hideRangeLabel: false,\n    itemLabel: \"Item\",\n    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    monochrome: false,\n    pageLabel: \"Page\",\n    rangeLabelType: \"page\",\n    selectedItemsPerPage: 10,\n    selectItemsPerPageOnEnter: true,\n    setToFirstPageOnPaginationChange: false,\n    showGoToPageControl: true,\n    showItemsPerPageControl: true,\n    type: \"simple\",\n  }"
+                "defaultValue": "{\n    alignment: \"right\",\n    hideAllFromItemsPerPage: false,\n    hideCurrentPage: false,\n    hideFirstAndLastPageButton: false,\n    hideRangeLabel: false,\n    itemLabel: \"Item\",\n    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    monochrome: false,\n    pageLabel: \"Page\",\n    rangeLabelType: \"page\",\n    selectedItemsPerPage: 10,\n    selectItemsPerPageOnEnter: true,\n    setToFirstPageOnPaginationChange: false,\n    showGoToPageControl: true,\n    showItemsPerPageControl: true,\n    type: \"simple\",\n  }"
             },
             "rowSelection": {
                 "type": "boolean",