@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,397 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$g } from './ic-button2.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$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>
+</svg>`;
+
+const ascendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" style="transform: rotate(-90deg);">
+    <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
+</svg>`;
+
+const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" style="transform: rotate(90deg)">
+    <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
+</svg>`;
+
+const icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs))}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:fixed;border-spacing:0;width:100%}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-container{border:var(--ic-border-light)}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.column-header,.row-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px)}.data-type-string{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;vertical-align:top}.cell-alignment-top{vertical-align:top}.cell-alignment-middle{vertical-align:middle}.cell-alignment-bottom{vertical-align:bottom}.cell-emphasis-low{color:var(--ic-color-secondary-text)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}}";
+
+const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.SORT_ICONS = {
+      unsorted: unsortedIcon,
+      ascending: ascendingIcon,
+      descending: descendingIcon,
+    };
+    this.isObject = (value) => typeof value === "object";
+    this.notDefaultDensity = () => this.density !== "default";
+    this.getCellContent = (cell, dataType) => {
+      switch (dataType) {
+        case "element":
+          return undefined;
+        case "date":
+          return (cell instanceof Date ? cell : new Date(cell)).toLocaleDateString();
+        default:
+          return cell;
+      }
+    };
+    this.getCellAlignment = (cell, alignment) => {
+      if (this.isObject(cell) && Object.keys(cell).includes("cellAlignment")) {
+        return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
+      }
+    };
+    this.createCells = (row) => {
+      const rowValues = Object.values(row);
+      const rowKeys = Object.keys(row);
+      let rowAlignment;
+      let rowEmphasis;
+      const headerIndex = rowKeys.indexOf("header");
+      if (headerIndex > -1) {
+        rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
+        rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
+      }
+      return rowValues.map((cell, index) => {
+        const { columnAlignment, dataType, emphasis } = this.columns[index];
+        const cellValue = (key) => this.getObjectValue(cell, key);
+        return rowKeys[index] === "header" ? (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
+            ["row-header"]: true,
+            [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
+            ["row-header-sticky"]: this.stickyRowHeaders,
+          } }, cellValue("title"))) : (h("td", { innerHTML: dataType === "element" ? cell : null, class: {
+            ["table-cell"]: true,
+            [`table-density-${this.density}`]: this.notDefaultDensity(),
+            [`data-type-${dataType}`]: true,
+            [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
+              this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
+              !!this.getCellAlignment(cell, "horizontal"),
+            [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+              rowAlignment ||
+              this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+              !!rowAlignment ||
+              !!this.getCellAlignment(cell, "vertical"),
+          } }, h("ic-typography", { variant: "body", class: {
+            [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+              emphasis ||
+              rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+              !!emphasis ||
+              !!rowEmphasis,
+            [`text-${this.density}`]: this.notDefaultDensity(),
+          } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
+      });
+    };
+    this.createColumnHeaders = () => {
+      return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
+          ["column-header"]: true,
+          [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
+          [`table-density-${this.density}`]: this.notDefaultDensity(),
+        }, colSpan: colspan }, this.sortable ? (h("div", { class: "column-header-inner-container" }, h("ic-typography", { variant: "body", class: {
+          ["column-header-text"]: true,
+          [`text-${this.density}`]: this.notDefaultDensity(),
+        } }, title), h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
+          ? this.sortedColumnOrder
+          : "unsorted"], class: {
+          ["sort-button"]: true,
+          ["sort-button-unsorted"]: this.sortedColumn !== key ||
+            this.sortedColumnOrder === "unsorted",
+        } }))) : (h("ic-typography", { variant: "body", class: {
+          ["column-header-text"]: true,
+          [`text-${this.density}`]: this.notDefaultDensity(),
+        } }, title)))));
+    };
+    this.createRows = () => {
+      const data = this.showPagination
+        ? this.data.slice(this.fromRow, this.toRow)
+        : this.data.slice();
+      return data
+        .sort(!this.sortable ? undefined : this.getSortFunction())
+        .map((row) => (h("tr", { onClick: () => (this.selectedRow = this.selectedRow !== row && row), class: {
+          ["table-row"]: true,
+          ["table-row-selected"]: this.selectedRow === row,
+        } }, this.createCells(row))));
+    };
+    this.getObjectValue = (cell, key) => {
+      return Object.values(cell)[Object.keys(cell).indexOf(key)];
+    };
+    this.getSortButtonLabel = (key) => {
+      let label = "";
+      const getNextSortOption = (option) => {
+        const sortOrders = this.sortOptions.sortOrders;
+        return sortOrders[(sortOrders.indexOf(option) + 1) % sortOrders.length];
+      };
+      if (this.sortedColumn === key) {
+        const sortOption = getNextSortOption(this.sortedColumnOrder);
+        label = sortOption !== "unsorted" ? `Sort ${sortOption}` : "Remove sort";
+      }
+      else {
+        label = `Sort ${getNextSortOption("unsorted")}`;
+      }
+      return label;
+    };
+    this.getComparison = (targetRow, comparisonRow) => {
+      const targetRowValue = targetRow[this.sortedColumn];
+      const comparisonRowValue = comparisonRow[this.sortedColumn];
+      return this.columns.find((col) => col.key === this.sortedColumn)
+        .dataType === "date"
+        ? new Date(targetRowValue).valueOf() -
+          new Date(comparisonRowValue).valueOf()
+        : String(this.isObject(targetRowValue)
+          ? Object.values(targetRowValue)[0]
+          : targetRowValue).localeCompare(String(this.isObject(comparisonRowValue)
+          ? Object.values(comparisonRowValue)[0]
+          : comparisonRowValue), undefined, { numeric: true, sensitivity: "base" });
+    };
+    this.getSortFunction = () => {
+      switch (this.sortedColumnOrder) {
+        case "ascending":
+          return (a, b) => this.getComparison(a, b);
+        case "descending":
+          return (a, b) => this.getComparison(b, a);
+        default:
+          return undefined;
+      }
+    };
+    this.sortRows = (column) => {
+      const sortButton = this.el.shadowRoot.querySelector(`#sort-button-${column}`);
+      const sortOrders = this.sortOptions.sortOrders;
+      if (column !== this.sortedColumn) {
+        if (this.sortedColumn) {
+          const previousSortedButton = this.el.shadowRoot.querySelector(`#sort-button-${this.sortedColumn}`);
+          previousSortedButton.updateAriaLabel(this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column
+        }
+        this.sortedColumn = column;
+        this.sortedColumnOrder = "unsorted";
+      }
+      let nextSortOrderIndex = sortOrders.indexOf(this.sortedColumnOrder) + 1;
+      if (nextSortOrderIndex > sortOrders.length - 1) {
+        nextSortOrderIndex = 0;
+      }
+      this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
+      sortButton.updateAriaLabel(this.getSortButtonLabel(column));
+    };
+    this.updateScrollOffset = () => {
+      this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
+    };
+    this.fromRow = 0;
+    this.previousRowsPerPage = undefined;
+    this.rowsPerPage = undefined;
+    this.scrollable = false;
+    this.scrollOffset = 0;
+    this.selectedRow = undefined;
+    this.sortedColumn = undefined;
+    this.sortedColumnOrder = undefined;
+    this.toRow = undefined;
+    this.caption = undefined;
+    this.columns = undefined;
+    this.data = undefined;
+    this.density = "default";
+    this.embedded = false;
+    this.hideColumnHeaders = false;
+    this.paginationOptions = {
+      itemsPerPage: [
+        { label: "10", value: "10" },
+        { label: "25", value: "25" },
+        { label: "50", value: "50" },
+      ],
+      type: "page",
+      control: "simple",
+      itemsPerPageControl: true,
+      goToPageControl: true,
+      alignment: "right",
+    };
+    this.showPagination = false;
+    this.sortable = false;
+    this.sortOptions = {
+      sortOrders: ["unsorted", "ascending", "descending"],
+      defaultColumn: "",
+    };
+    this.stickyColumnHeaders = false;
+    this.stickyRowHeaders = false;
+  }
+  componentWillLoad() {
+    this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);
+    this.previousRowsPerPage = this.rowsPerPage;
+    this.toRow = this.rowsPerPage;
+    this.sortedColumn = this.sortOptions.defaultColumn;
+    this.sortedColumnOrder = this.sortOptions.sortOrders[0];
+  }
+  componentDidLoad() {
+    const tableElement = this.el.shadowRoot.querySelector("table");
+    const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+    if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
+      (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
+      this.scrollable = true;
+    }
+  }
+  handleItemsPerPageChange(ev) {
+    this.previousRowsPerPage = this.rowsPerPage;
+    this.rowsPerPage = ev.detail.value;
+  }
+  handlePageChange(ev) {
+    this.fromRow = (ev.detail.value - 1) * this.rowsPerPage;
+    this.toRow = this.fromRow + this.rowsPerPage;
+    const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
+    if (this.previousRowsPerPage === this.rowsPerPage) {
+      tableRowsContainer.scrollTop = 0;
+    }
+    else if (this.previousRowsPerPage < this.rowsPerPage) {
+      tableRowsContainer.scrollTop = this.scrollOffset;
+      this.previousRowsPerPage = this.rowsPerPage;
+    }
+    else {
+      this.previousRowsPerPage = this.rowsPerPage;
+    }
+  }
+  clickListener(ev) {
+    if (ev.target !== this.el)
+      this.selectedRow = undefined;
+  }
+  render() {
+    const { caption, createColumnHeaders, createRows, data, hideColumnHeaders, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, } = this;
+    return (h("div", { class: "table-container" }, h("div", { class: {
+        ["table-row-container"]: true,
+        scrollable,
+      }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", null, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
+        ["column-header-sticky"]: stickyColumnHeaders,
+        ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
+      } }, h("tr", null, createColumnHeaders()))), (data === null || data === void 0 ? void 0 : data.length) > 0 && h("tbody", null, createRows()))), showPagination && (h("div", { class: "pagination-container" }, h("ic-pagination-bar", { totalItems: data.length, paginationType: paginationOptions.type, paginationControl: paginationOptions.control, showItemsPerPageControl: paginationOptions.itemsPerPageControl, showGoToPageControl: paginationOptions.goToPageControl, itemsPerPageOptions: paginationOptions.itemsPerPage, alignment: paginationOptions.alignment }))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+      ? `${sortedColumn} sorted ${sortedColumnOrder}`
+      : "table unsorted"))));
+  }
+  get el() { return this; }
+  static get style() { return icDataTableCss; }
+}, [1, "ic-unstable-data-table", {
+    "caption": [1],
+    "columns": [16],
+    "data": [16],
+    "density": [1],
+    "embedded": [4],
+    "hideColumnHeaders": [4, "hide-column-headers"],
+    "paginationOptions": [16],
+    "showPagination": [4, "show-pagination"],
+    "sortable": [4],
+    "sortOptions": [16],
+    "stickyColumnHeaders": [4, "sticky-column-headers"],
+    "stickyRowHeaders": [4, "sticky-row-headers"],
+    "fromRow": [32],
+    "previousRowsPerPage": [32],
+    "rowsPerPage": [32],
+    "scrollable": [32],
+    "scrollOffset": [32],
+    "selectedRow": [32],
+    "sortedColumn": [32],
+    "sortedColumnOrder": [32],
+    "toRow": [32]
+  }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-unstable-data-table", "ic-button", "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"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-unstable-data-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DataTable);
+      }
+      break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ic-input-component-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "ic-input-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "ic-input-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "ic-input-validation":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "ic-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ic-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ic-pagination":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ic-pagination-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ic-pagination-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ic-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-text-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ic-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcUnstableDataTable = DataTable;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcUnstableDataTable, defineCustomElement };
+
+//# sourceMappingURL=ic-unstable-data-table.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-unstable-data-table.js","mappings":"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","names":[],"sources":["./src/components/ic-data-table/ic-data-table.css?tag=ic-unstable-data-table&encapsulation=shadow","./src/components/ic-data-table/ic-data-table.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  height: 100%;\n  max-height: 100%;\n}\n\n.table-container {\n  position: relative;\n  height: calc(100% - var(--ic-space-xxxs));\n}\n\n.table-row-container {\n  position: relative;\n  height: 100%;\n  overflow: auto;\n  transition: var(--ic-easing-transition-fast);\n  overflow-anchor: none;\n}\n\n:host([show-pagination=\"true\"]) .table-row-container {\n  height: calc(100% - 3.5625rem);\n}\n\ntable {\n  table-layout: fixed;\n  border-spacing: 0;\n  width: 100%;\n}\n\n.table-row-container:focus {\n  outline: none;\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n  z-index: 1;\n}\n\n:host([embedded=\"true\"]) .table-container {\n  border: var(--ic-border-light);\n}\n\n.column-header-sticky {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.column-header-overlay {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  box-shadow: 0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%);\n}\n\n.row-header-sticky {\n  position: sticky;\n  left: 0;\n}\n\n.column-header,\n.table-row {\n  box-sizing: border-box;\n}\n\n.table-row-selected {\n  background-color: var(--ic-table-row-selected) !important;\n}\n\n.sort-button {\n  margin-left: auto;\n}\n\n.sort-button:hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.sort-button:active {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n.sort-button svg {\n  color: var(--ic-architectural-black);\n}\n\n.sort-button-unsorted svg {\n  color: var(--ic-color-tertiary-text);\n}\n\n.table-density-dense {\n  padding: var(--ic-space-xxs) var(--ic-space-xs) !important;\n}\n\n.text-dense {\n  font-size: var(--ic-font-size-label);\n}\n\n.table-density-spacious {\n  padding: 0.625rem var(--ic-space-xs) !important;\n}\n\n.text-spacious {\n  font-size: 1.125rem;\n}\n\n.column-header-text {\n  font-weight: var(--ic-font-weight-bold);\n}\n\n.column-header,\n.row-header {\n  text-align: left;\n  padding: var(--ic-space-xs);\n  background-color: var(--ic-architectural-40);\n  border-right: var(--ic-border-light);\n  border-bottom: var(--ic-border-light);\n}\n\n.column-header:last-child {\n  border-right: none;\n}\n\n.scrollable .column-header:last-child {\n  border-right: var(--ic-border-light) !important;\n}\n\n:host([embedded=\"true\"]) tr:last-child .table-cell,\n:host([embedded=\"true\"]) tr:last-child .row-header {\n  border-bottom: none;\n}\n\n.column-header-alignment-left,\n.row-header-alignment-left,\n.cell-alignment-left {\n  text-align: left !important;\n}\n\n.column-header-alignment-right,\n.row-header-alignment-right,\n.cell-alignment-right {\n  text-align: right !important;\n}\n\n.column-header-alignment-center,\n.row-header-alignment-center,\n.cell-alignment-center {\n  text-align: center !important;\n}\n\n.table-row:nth-child(even) {\n  background-color: var(--ic-architectural-20);\n}\n\n.table-cell {\n  padding: var(--ic-space-xs);\n  border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);\n}\n\n.data-type-string {\n  text-align: left;\n  vertical-align: top;\n}\n\n.data-type-number,\n.data-type-date {\n  text-align: right;\n  vertical-align: top;\n}\n\n.cell-alignment-top {\n  vertical-align: top;\n}\n\n.cell-alignment-middle {\n  vertical-align: middle;\n}\n\n.cell-alignment-bottom {\n  vertical-align: bottom;\n}\n\n.cell-emphasis-low {\n  color: var(--ic-color-secondary-text);\n}\n\n.cell-emphasis-high {\n  font-weight: var(--ic-font-weight-bold);\n}\n\n.pagination-container {\n  background-color: var(--ic-architectural-40);\n  border-top: var(--ic-border-light);\n}\n\n.screen-reader-sort-text,\n.table-caption {\n  position: absolute;\n  left: -100rem;\n}\n\n.table-cell,\n.column-header,\n.row-header {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n@media screen and (min-width: 576px) {\n  .column-header-inner-container {\n    display: flex;\n    align-items: center;\n  }\n}\n","import { Component, Element, h, Prop, State, Listen } from \"@stencil/core\";\nimport unsortedIcon from \"./assets/unsorted-icon.svg\";\nimport ascendingIcon from \"./assets/ascending-icon.svg\";\nimport descendingIcon from \"./assets/descending-icon.svg\";\nimport {\n  IcDataTableColumnDataTypes,\n  IcDataTableColumnObject,\n  IcDataTableDensityOptions,\n  IcDataTableSortOrderOptions,\n} from \"./ic-data-table.types\";\nimport {\n  IcPaginationAlignmentOptions,\n  IcPaginationControlTypes,\n  IcPaginationTypes,\n} from \"../ic-pagination/ic-pagination.types\";\n\n@Component({\n  tag: \"ic-unstable-data-table\",\n  styleUrl: \"ic-data-table.css\",\n  shadow: true,\n})\nexport class DataTable {\n  private SORT_ICONS = {\n    unsorted: unsortedIcon,\n    ascending: ascendingIcon,\n    descending: descendingIcon,\n  };\n\n  @Element() el: HTMLIcUnstableDataTableElement;\n\n  @State() fromRow: number = 0;\n\n  @State() previousRowsPerPage: number;\n\n  @State() rowsPerPage: number;\n\n  @State() scrollable: boolean = false;\n\n  @State() scrollOffset: number = 0;\n\n  @State() selectedRow: object;\n\n  @State() sortedColumn: string;\n\n  @State() sortedColumnOrder: IcDataTableSortOrderOptions;\n\n  @State() toRow: number;\n\n  /**\n   * The title for the table only visible to screen readers.\n   */\n  @Prop() caption!: string;\n\n  /**\n   * The column headers for the table.\n   */\n  @Prop() columns!: IcDataTableColumnObject[];\n\n  /**\n   * The row content for the table.\n   */\n  @Prop() data: { [key: string]: any }[];\n\n  /**\n   * Set the density of the table including font and padding.\n   */\n  @Prop() density?: IcDataTableDensityOptions = \"default\";\n\n  /**\n   * Applies a border to the table container.\n   */\n  @Prop() embedded?: boolean = false;\n\n  /**\n   * If `true`, column headers will not be visible.\n   */\n  @Prop() hideColumnHeaders?: boolean = false;\n\n  /**\n   * Sets the props for the pagination bar.\n   */\n  @Prop() paginationOptions?: {\n    itemsPerPage?: { label: string; value: string }[];\n    type?: IcPaginationTypes;\n    control?: IcPaginationControlTypes;\n    itemsPerPageControl?: boolean;\n    goToPageControl?: boolean;\n    alignment?: IcPaginationAlignmentOptions;\n  } = {\n    itemsPerPage: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    type: \"page\",\n    control: \"simple\",\n    itemsPerPageControl: true,\n    goToPageControl: true,\n    alignment: \"right\",\n  };\n\n  /**\n   * If `true`, adds a pagination bar to the bottom of the table.\n   */\n  @Prop() showPagination?: boolean = false;\n\n  /**\n   * If `true`, allows table columns to be sorted using applied sort buttons.\n   */\n  @Prop() sortable?: boolean = false;\n\n  /**\n   * Sets the order columns will be sorted in and allows for 'default' sorts to be added.\n   */\n  @Prop() sortOptions?: {\n    sortOrders: IcDataTableSortOrderOptions[];\n    defaultColumn?: string;\n  } = {\n    sortOrders: [\"unsorted\", \"ascending\", \"descending\"],\n    defaultColumn: \"\",\n  };\n\n  /**\n   * If `true`, column headers will remain at the top of the table when scrolling vertically.\n   */\n  @Prop() stickyColumnHeaders?: boolean = false;\n\n  /**\n   * If `true`, row headers will remain to the left when scrolling horizontally.\n   */\n  @Prop() stickyRowHeaders?: boolean = false;\n\n  componentWillLoad(): void {\n    this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);\n    this.previousRowsPerPage = this.rowsPerPage;\n    this.toRow = this.rowsPerPage;\n    this.sortedColumn = this.sortOptions.defaultColumn;\n    this.sortedColumnOrder = this.sortOptions.sortOrders[0];\n  }\n\n  componentDidLoad(): void {\n    const tableElement = this.el.shadowRoot.querySelector(\"table\");\n    const tableContainer = this.el.shadowRoot.querySelector(\".table-container\");\n    if (\n      tableElement?.clientHeight > tableContainer?.clientHeight ||\n      tableElement?.clientWidth > tableContainer?.clientWidth\n    ) {\n      this.scrollable = true;\n    }\n  }\n\n  @Listen(\"icItemsPerPageChange\")\n  handleItemsPerPageChange(ev: CustomEvent): void {\n    this.previousRowsPerPage = this.rowsPerPage;\n    this.rowsPerPage = ev.detail.value;\n  }\n\n  @Listen(\"icPageChange\")\n  handlePageChange(ev: CustomEvent): void {\n    this.fromRow = (ev.detail.value - 1) * this.rowsPerPage;\n    this.toRow = this.fromRow + this.rowsPerPage;\n    const tableRowsContainer = this.el.shadowRoot.querySelector(\n      \".table-row-container\"\n    );\n    if (this.previousRowsPerPage === this.rowsPerPage) {\n      tableRowsContainer.scrollTop = 0;\n    } else if (this.previousRowsPerPage < this.rowsPerPage) {\n      tableRowsContainer.scrollTop = this.scrollOffset;\n      this.previousRowsPerPage = this.rowsPerPage;\n    } else {\n      this.previousRowsPerPage = this.rowsPerPage;\n    }\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  clickListener(ev: MouseEvent): void {\n    if (ev.target !== this.el) this.selectedRow = undefined;\n  }\n\n  private isObject = (value: any) => typeof value === \"object\";\n\n  private notDefaultDensity = () => this.density !== \"default\";\n\n  private getCellContent = (\n    cell: any,\n    dataType: IcDataTableColumnDataTypes\n  ): any => {\n    switch (dataType) {\n      case \"element\":\n        return undefined;\n      case \"date\":\n        return (\n          cell instanceof Date ? cell : new Date(cell)\n        ).toLocaleDateString();\n      default:\n        return cell;\n    }\n  };\n\n  private getCellAlignment = (\n    cell: any,\n    alignment: \"horizontal\" | \"vertical\"\n  ) => {\n    if (this.isObject(cell) && Object.keys(cell).includes(\"cellAlignment\")) {\n      return this.getObjectValue(\n        this.getObjectValue(cell, \"cellAlignment\"),\n        alignment\n      );\n    }\n  };\n\n  private createCells = (row: object) => {\n    const rowValues = Object.values(row);\n    const rowKeys = Object.keys(row);\n    let rowAlignment: string;\n    let rowEmphasis: string;\n    const headerIndex = rowKeys.indexOf(\"header\");\n    if (headerIndex > -1) {\n      rowAlignment = this.getObjectValue(\n        rowValues[headerIndex],\n        \"rowAlignment\"\n      );\n      rowEmphasis = this.getObjectValue(rowValues[headerIndex], \"emphasis\");\n    }\n    return rowValues.map((cell, index) => {\n      const { columnAlignment, dataType, emphasis } = this.columns[index];\n      const cellValue = (key: string) => this.getObjectValue(cell, key);\n\n      return rowKeys[index] === \"header\" ? (\n        <th\n          scope=\"row\"\n          colSpan={cellValue(\"colspan\")}\n          class={{\n            [\"row-header\"]: true,\n            [`row-header-alignment-${cellValue(\"cellAlignment\")}`]:\n              !!cellValue(\"cellAlignment\"),\n            [\"row-header-sticky\"]: this.stickyRowHeaders,\n          }}\n        >\n          {cellValue(\"title\")}\n        </th>\n      ) : (\n        <td\n          innerHTML={dataType === \"element\" ? (cell as string) : null}\n          class={{\n            [\"table-cell\"]: true,\n            [`table-density-${this.density}`]: this.notDefaultDensity(),\n            [`data-type-${dataType}`]: true,\n            [`cell-alignment-${\n              columnAlignment?.horizontal ||\n              this.getCellAlignment(cell, \"horizontal\")\n            }`]:\n              !!columnAlignment?.horizontal ||\n              !!this.getCellAlignment(cell, \"horizontal\"),\n            [`cell-alignment-${\n              columnAlignment?.vertical ||\n              rowAlignment ||\n              this.getCellAlignment(cell, \"vertical\")\n            }`]:\n              !!columnAlignment?.vertical ||\n              !!rowAlignment ||\n              !!this.getCellAlignment(cell, \"vertical\"),\n          }}\n        >\n          <ic-typography\n            variant=\"body\"\n            class={{\n              [`cell-emphasis-${\n                (this.isObject(cell) && cellValue(\"emphasis\")) ||\n                emphasis ||\n                rowEmphasis\n              }`]:\n                (this.isObject(cell) && !!cellValue(\"emphasis\")) ||\n                !!emphasis ||\n                !!rowEmphasis,\n              [`text-${this.density}`]: this.notDefaultDensity(),\n            }}\n          >\n            {this.isObject(cell) && dataType !== \"date\" ? (\n              Object.keys(cell).includes(\"href\") ? (\n                <ic-link href={cellValue(\"href\")}>{cellValue(\"data\")}</ic-link>\n              ) : (\n                cellValue(\"data\")\n              )\n            ) : (\n              this.getCellContent(cell, dataType)\n            )}\n          </ic-typography>\n        </td>\n      );\n    });\n  };\n\n  private createColumnHeaders = () => {\n    return this.columns.map(({ cellAlignment, colspan, key, title }) => (\n      <th\n        scope=\"col\"\n        class={{\n          [\"column-header\"]: true,\n          [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,\n          [`table-density-${this.density}`]: this.notDefaultDensity(),\n        }}\n        colSpan={colspan}\n      >\n        {this.sortable ? (\n          <div class=\"column-header-inner-container\">\n            <ic-typography\n              variant=\"body\"\n              class={{\n                [\"column-header-text\"]: true,\n                [`text-${this.density}`]: this.notDefaultDensity(),\n              }}\n            >\n              {title}\n            </ic-typography>\n            <ic-button\n              variant=\"icon\"\n              id={`sort-button-${key}`}\n              aria-label={this.getSortButtonLabel(key)}\n              // eslint-disable-next-line react/jsx-no-bind\n              onClick={() => this.sortRows(key)}\n              innerHTML={\n                this.SORT_ICONS[\n                  this.sortedColumn === key\n                    ? this.sortedColumnOrder\n                    : \"unsorted\"\n                ]\n              }\n              class={{\n                [\"sort-button\"]: true,\n                [\"sort-button-unsorted\"]:\n                  this.sortedColumn !== key ||\n                  this.sortedColumnOrder === \"unsorted\",\n              }}\n            ></ic-button>\n          </div>\n        ) : (\n          <ic-typography\n            variant=\"body\"\n            class={{\n              [\"column-header-text\"]: true,\n              [`text-${this.density}`]: this.notDefaultDensity(),\n            }}\n          >\n            {title}\n          </ic-typography>\n        )}\n      </th>\n    ));\n  };\n\n  private createRows = () => {\n    const data = this.showPagination\n      ? this.data.slice(this.fromRow, this.toRow)\n      : this.data.slice();\n    return data\n      .sort(!this.sortable ? undefined : this.getSortFunction())\n      .map((row) => (\n        <tr\n          onClick={() => (this.selectedRow = this.selectedRow !== row && row)}\n          class={{\n            [\"table-row\"]: true,\n            [\"table-row-selected\"]: this.selectedRow === row,\n          }}\n        >\n          {this.createCells(row)}\n        </tr>\n      ));\n  };\n\n  private getObjectValue = (cell: object, key: string) => {\n    return Object.values(cell)[Object.keys(cell).indexOf(key)];\n  };\n\n  private getSortButtonLabel = (key: string) => {\n    let label = \"\";\n    const getNextSortOption = (option: IcDataTableSortOrderOptions) => {\n      const sortOrders = this.sortOptions.sortOrders;\n      return sortOrders[(sortOrders.indexOf(option) + 1) % sortOrders.length];\n    };\n\n    if (this.sortedColumn === key) {\n      const sortOption = getNextSortOption(this.sortedColumnOrder);\n      label = sortOption !== \"unsorted\" ? `Sort ${sortOption}` : \"Remove sort\";\n    } else {\n      label = `Sort ${getNextSortOption(\"unsorted\")}`;\n    }\n\n    return label;\n  };\n\n  private getComparison = (targetRow: any, comparisonRow: any): number => {\n    const targetRowValue = targetRow[this.sortedColumn];\n    const comparisonRowValue = comparisonRow[this.sortedColumn];\n    return this.columns.find((col) => col.key === this.sortedColumn)\n      .dataType === \"date\"\n      ? new Date(targetRowValue).valueOf() -\n          new Date(comparisonRowValue).valueOf()\n      : String(\n          this.isObject(targetRowValue)\n            ? Object.values(targetRowValue)[0]\n            : targetRowValue\n        ).localeCompare(\n          String(\n            this.isObject(comparisonRowValue)\n              ? Object.values(comparisonRowValue)[0]\n              : comparisonRowValue\n          ),\n          undefined,\n          { numeric: true, sensitivity: \"base\" }\n        );\n  };\n\n  private getSortFunction = () => {\n    switch (this.sortedColumnOrder) {\n      case \"ascending\":\n        return (a: any, b: any) => this.getComparison(a, b);\n      case \"descending\":\n        return (a: any, b: any) => this.getComparison(b, a);\n      default:\n        return undefined;\n    }\n  };\n\n  private sortRows = (column: string) => {\n    const sortButton = this.el.shadowRoot.querySelector(\n      `#sort-button-${column}`\n    ) as HTMLIcButtonElement;\n\n    const sortOrders = this.sortOptions.sortOrders;\n\n    if (column !== this.sortedColumn) {\n      if (this.sortedColumn) {\n        const previousSortedButton = this.el.shadowRoot.querySelector(\n          `#sort-button-${this.sortedColumn}`\n        ) as HTMLIcButtonElement;\n        previousSortedButton.updateAriaLabel(this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column\n      }\n      this.sortedColumn = column;\n      this.sortedColumnOrder = \"unsorted\";\n    }\n\n    let nextSortOrderIndex = sortOrders.indexOf(this.sortedColumnOrder) + 1;\n\n    if (nextSortOrderIndex > sortOrders.length - 1) {\n      nextSortOrderIndex = 0;\n    }\n\n    this.sortedColumnOrder = sortOrders[nextSortOrderIndex];\n\n    sortButton.updateAriaLabel(this.getSortButtonLabel(column));\n  };\n\n  private updateScrollOffset = () => {\n    this.scrollOffset = this.el.shadowRoot.querySelector(\n      \".table-row-container\"\n    ).scrollTop;\n  };\n\n  render() {\n    const {\n      caption,\n      createColumnHeaders,\n      createRows,\n      data,\n      hideColumnHeaders,\n      paginationOptions,\n      scrollable,\n      scrollOffset,\n      showPagination,\n      sortable,\n      sortedColumnOrder,\n      sortedColumn,\n      stickyColumnHeaders,\n      updateScrollOffset,\n    } = this;\n\n    return (\n      <div class=\"table-container\">\n        <div\n          class={{\n            [\"table-row-container\"]: true,\n            scrollable,\n          }}\n          tabIndex={scrollable ? 0 : null}\n          onScroll={updateScrollOffset}\n        >\n          <table>\n            <caption class=\"table-caption\">{caption}</caption>\n            {!hideColumnHeaders && (\n              <thead\n                class={{\n                  [\"column-header-sticky\"]: stickyColumnHeaders,\n                  [\"column-header-overlay\"]:\n                    stickyColumnHeaders && scrollOffset !== 0,\n                }}\n              >\n                <tr>{createColumnHeaders()}</tr>\n              </thead>\n            )}\n            {data?.length > 0 && <tbody>{createRows()}</tbody>}\n          </table>\n        </div>\n        {showPagination && (\n          <div class=\"pagination-container\">\n            <ic-pagination-bar\n              totalItems={data.length}\n              paginationType={paginationOptions.type}\n              paginationControl={paginationOptions.control}\n              showItemsPerPageControl={paginationOptions.itemsPerPageControl}\n              showGoToPageControl={paginationOptions.goToPageControl}\n              itemsPerPageOptions={paginationOptions.itemsPerPage}\n              alignment={paginationOptions.alignment}\n            ></ic-pagination-bar>\n          </div>\n        )}\n        {sortable && (\n          <div class=\"screen-reader-sort-text\" aria-live=\"polite\">\n            {sortedColumnOrder !== \"unsorted\" && sortedColumn\n              ? `${sortedColumn} sorted ${sortedColumnOrder}`\n              : \"table unsorted\"}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/types.js

@@ -0,0 +1,16 @@
+var IcInformationStatus;
+(function (IcInformationStatus) {
+  IcInformationStatus["Warning"] = "warning";
+  IcInformationStatus["Error"] = "error";
+  IcInformationStatus["Success"] = "success";
+})(IcInformationStatus || (IcInformationStatus = {}));
+var IcThemeForegroundEnum;
+(function (IcThemeForegroundEnum) {
+  IcThemeForegroundEnum["Default"] = "default";
+  IcThemeForegroundEnum["Dark"] = "dark";
+  IcThemeForegroundEnum["Light"] = "light";
+})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
+
+export { IcThemeForegroundEnum as I, IcInformationStatus as a };
+
+//# sourceMappingURL=types.js.map

package/dist/components/types.js.map

@@ -0,0 +1 @@
+{"file":"types.js","mappings":"IAwBY;AAAZ,WAAY,mBAAmB;EAC7B,0CAAmB,CAAA;EACnB,sCAAe,CAAA;EACf,0CAAmB,CAAA;AACrB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;IAkEW;AAAZ,WAAY,qBAAqB;EAC/B,4CAAmB,CAAA;EACnB,sCAAa,CAAA;EACb,wCAAe,CAAA;AACjB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB;;;;","names":[],"sources":["./src/utils/types.ts"],"sourcesContent":["export type IcFocusableComponents =\n  | HTMLIcBreadcrumbElement\n  | HTMLIcButtonElement\n  | HTMLIcCardElement\n  | HTMLIcCheckboxElement\n  | HTMLIcChipElement\n  | HTMLIcLinkElement\n  | HTMLIcNavigationButtonElement\n  | HTMLIcNavigationGroupElement\n  | HTMLIcNavigationItemElement\n  | HTMLIcRadioOptionElement\n  | HTMLIcSearchBarElement\n  | HTMLIcSelectElement\n  | HTMLIcSwitchElement\n  | HTMLIcTabElement\n  | HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n  | \"neutral\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n  a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\"\n  | \"code-large\"\n  | \"code-small\"\n  | \"code-extra-small\";\n\nexport interface IcMenuOption {\n  value?: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n  loading?: boolean;\n  timedOut?: boolean;\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport type IcSizes = \"default\" | \"large\" | \"small\";\n\nexport interface IcValueEventDetail {\n  value: string;\n  keyPressed?: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n"],"version":3}