@duetds/components 6.0.3 → 6.0.5

package/lib/dist-custom-elements/duet-visually-hidden.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetVisuallyHidden extends Components.DuetVisuallyHidden, HTMLElement {}
+export const DuetVisuallyHidden: {
+  prototype: DuetVisuallyHidden;
+  new (): DuetVisuallyHidden;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-visually-hidden.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetVisuallyHidden$1, d as defineCustomElement$1 } from './p-53a0c93d.js';
+
+const DuetVisuallyHidden = DuetVisuallyHidden$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetVisuallyHidden, defineCustomElement };

package/lib/dist-custom-elements/index.d.ts

@@ -0,0 +1,26 @@
+/* Duet custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * 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;
+
+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;
+
+export type { Components, JSX };
+
+export * from '../types/components';

package/lib/dist-custom-elements/index.js

@@ -0,0 +1,37 @@
+/*!
+ * Built with Duet Design System
+ */
+export { s as setAssetPath, a as setPlatformOptions } from './p-1ad6b04e.js';
+
+const TAB_KEY = 9;
+const appGlobalScript = () => {
+  function listenKeys(event) {
+    if (event.keyCode === TAB_KEY) {
+      var components = document.querySelectorAll(".hydrated");
+      for (var i = 0; i < components.length; i++) {
+        components[i].classList.add("user-is-tabbing");
+      }
+      if (typeof window !== "undefined") {
+        window.removeEventListener("keydown", listenKeys);
+        window.addEventListener("mousedown", listenMouse, false);
+      }
+    }
+  }
+  function listenMouse() {
+    var components = document.querySelectorAll(".hydrated");
+    for (var i = 0; i < components.length; i++) {
+      components[i].classList.remove("user-is-tabbing");
+    }
+    if (typeof window !== "undefined") {
+      window.removeEventListener("mousedown", listenMouse);
+      window.addEventListener("keydown", listenKeys, false);
+    }
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("keydown", listenKeys, false);
+  }
+};
+
+const globalScripts = appGlobalScript;
+
+globalScripts();

package/lib/{esm/tokens-8ff8c570.js → dist-custom-elements/p-02305a1e.js}

@@ -141,14 +141,15 @@ const line_height_small = "1.25";
 const line_height_x_small = "1.1";
 const transition_quickly = "300ms ease";
 const transition_slowly = "600ms ease";
-const media_query_xx_small = "'(max-width: 22.5em)'";
-const media_query_x_small = "'(max-width: 35.9375em)'";
-const media_query_small = "'(min-width: 36em)'";
+const media_query_xxx_large = "'(min-width: 106.25em)'";
+const media_query_x_large = "'(min-width: 64.0625em)'";
 const media_query_medium = "'(min-width: 48em)'";
 const media_query_large = "'(min-width: 62em)'";
-const media_query_x_large = "'(min-width: 64.0625em)'";
 const media_query_xx_large = "'(min-width: 76.25em)'";
-const media_query_xxx_large = "'(min-width: 106.25em)'";
+const media_query_x_small = "'(max-width: 35.9375em)'";
+const media_query_xxx_small = "'(max-width: 20.5em)'";
+const media_query_small = "'(min-width: 36em)'";
+const media_query_xx_small = "'(max-width: 22.5em)'";
 const tokens = {
 	color_warning: color_warning,
 	color_gray_darker: color_gray_darker,
@@ -290,14 +291,15 @@ const tokens = {
 	line_height_x_small: line_height_x_small,
 	transition_quickly: transition_quickly,
 	transition_slowly: transition_slowly,
-	media_query_xx_small: media_query_xx_small,
-	media_query_x_small: media_query_x_small,
-	media_query_small: media_query_small,
+	media_query_xxx_large: media_query_xxx_large,
+	media_query_x_large: media_query_x_large,
 	media_query_medium: media_query_medium,
 	media_query_large: media_query_large,
-	media_query_x_large: media_query_x_large,
 	media_query_xx_large: media_query_xx_large,
-	media_query_xxx_large: media_query_xxx_large
+	media_query_x_small: media_query_x_small,
+	media_query_xxx_small: media_query_xxx_small,
+	media_query_small: media_query_small,
+	media_query_xx_small: media_query_xx_small
 };
 
 const tokens$1 = /*#__PURE__*/Object.freeze({
@@ -442,14 +444,15 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   line_height_x_small: line_height_x_small,
   transition_quickly: transition_quickly,
   transition_slowly: transition_slowly,
-  media_query_xx_small: media_query_xx_small,
-  media_query_x_small: media_query_x_small,
-  media_query_small: media_query_small,
+  media_query_xxx_large: media_query_xxx_large,
+  media_query_x_large: media_query_x_large,
   media_query_medium: media_query_medium,
   media_query_large: media_query_large,
-  media_query_x_large: media_query_x_large,
   media_query_xx_large: media_query_xx_large,
-  media_query_xxx_large: media_query_xxx_large,
+  media_query_x_small: media_query_x_small,
+  media_query_xxx_small: media_query_xxx_small,
+  media_query_small: media_query_small,
+  media_query_xx_small: media_query_xx_small,
   'default': tokens
 });
 

package/lib/dist-custom-elements/p-0b3f675e.js

@@ -0,0 +1,47 @@
+/*!
+ * Built with Duet Design System
+ */
+const debounce = (func, timeout = 250) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(undefined, args);
+    }, timeout);
+  };
+};
+/**
+ * The fieldSorter function is a helper function that takes an array of objects and returns
+ * a function that can be used to sort those objects. The returned sorting function takes two
+ * parameters, which are compared using the field values in the object. If one object's field value is greater than another's, then 1 is returned; if they're equal, 0 is returned; and if one object's field value is less than another's, - 1 will be returned. This allows for easy sorting by multiple fields in any order desired (e.g., first by name ascending and then by age descending).
+ *
+ *
+ * @param fields Sort the table
+ *
+ * @return A function that takes two objects and returns an integer
+ *
+ */
+function fieldSorter(fields) {
+  return function (a, b) {
+    return fields
+      .map(function (o) {
+      let dir = 1;
+      if (o[0] === "-") {
+        dir = -1;
+        o = o.substring(1);
+      }
+      if (a[o] > b[o]) {
+        return dir;
+      }
+      if (a[o] < b[o]) {
+        return -dir;
+      }
+      return 0;
+    })
+      .reduce(function firstNonZeroValue(p, n) {
+      return p ? p : n;
+    }, 0);
+  };
+}
+
+export { debounce as d, fieldSorter as f };

package/lib/{esm/focus-utils-559691b3.js → dist-custom-elements/p-0b8f16f1.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h } from './index-f600b8dc.js';
+import { h } from './p-b9058029.js';
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/dist-custom-elements/p-0ce83b83.js

@@ -0,0 +1,154 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { m as mediaQueryMedium, a as mediaQueryLarge, b as mediaQueryXLarge, c as mediaQueryXxLarge, d as mediaQueryXxxLarge, e as mediaQuerySmall, s as sizeNavigation, f as sizeHeader } from './p-266411cf.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as debounce } from './p-0b3f675e.js';
+
+const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}duet-table .duet-table-action-row td:last-child{justify-self:end;padding-right:20px !important;white-space:nowrap}.duet-table-flattened table,.duet-table-flattened thead,.duet-table-flattened tbody,.duet-table-flattened tfoot,.duet-table-flattened th,.duet-table-flattened td,.duet-table-flattened tr{display:block}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.duet-table-fixed th:first-child,.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-fixed th:last-child,.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-fixed th,.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:#444445}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.duet-theme-turva.duet-table-fixed tbody th,.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:#e4e4e6}.duet-table-fixed td,.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-fixed td:first-child,.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-fixed td:last-child,.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-fixed tbody td,.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-table-fixed tbody td,.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:#e4e4e6}.duet-table-flattened.duet-table-fixed tbody:first-of-type th,.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-fixed td,.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-fixed tr,.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-fixed tfoot td,.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-fixed table{table-layout:fixed}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td,.duet-table-fixed tbody tr td:first-child{padding:4px !important;vertical-align:text-bottom;border-bottom:0 none}.duet-table-fixed thead{display:none}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td{border-bottom:0 none}.duet-table-fixed:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}.duet-table-sortable tbody tr td:first-child,.duet-table-sortable thead tr th:first-child{padding:20px}.duet-table-sortable:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-actions table{table-layout:auto}.duet-table-actions thead th:last-child{width:1px;white-space:nowrap}.duet-editable-table-table.duet-table-flattened tr{display:grid;grid-template-columns:repeat(2, 1fr);grid-auto-rows:auto;gap:10px}.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before{padding:0;content:\"\"}.duet-editable-table-table.duet-table-flattened td{grid-column:1/2}.duet-editable-table-table.duet-table-flattened td:first-child{grid-row:1;grid-column:1}.duet-editable-table-table.duet-table-flattened td:last-child{grid-row:1;grid-column:2}";
+
+// remove wrapping speech marks.
+// media query tokens are wrapped in speech marks,
+// which need to be removed before use with matchMedia.
+const unwrap = (str) => str.substring(1, str.length - 1);
+const breakpointToToken = {
+  none: "all",
+  "none-scrollable": "all",
+  small: unwrap(mediaQuerySmall),
+  medium: unwrap(mediaQueryMedium),
+  large: unwrap(mediaQueryLarge),
+  "x-large": unwrap(mediaQueryXLarge),
+  "xx-large": unwrap(mediaQueryXxLarge),
+  "xxx-large": unwrap(mediaQueryXxxLarge),
+};
+const stickyTopValues = {
+  none: 0,
+  "with-links": parseFloat(sizeNavigation) * 16,
+  "without-links": parseFloat(sizeHeader) * 16,
+};
+const DuetTable = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Tracks whether the breakpoint is matched. This is set to true by default so that JavaScript disabled in SSR mode we get accessible table data first.
+     */
+    this.matchesBreakpoint = true;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Style variation of the table.
+     */
+    this.variation = "striped";
+    /**
+     * Controls whether the table has a sticky header.
+     * Sticky headers are not compatible with breakpoint="none-scrollable".
+     */
+    this.sticky = false;
+    /**
+     * Adjust the distance from top of the viewport (in pixels) when the
+     * table header becomes sticky.
+     */
+    this.stickyDistance = "with-links";
+    /**
+     * By default the table is responsive - it will be flattened at narrow viewport widths.
+     * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+     * Set to "none" to disable the responsive functionality.
+     * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+     * this is useful for comparison tables where it's important to maintain column and row layout.
+     */
+    this.breakpoint = "small";
+    this.handleMediaQueryChange = (mq) => {
+      this.matchesBreakpoint = mq.matches;
+    };
+  }
+  connectedCallback() {
+    this.mq = matchMedia(breakpointToToken[this.breakpoint]);
+    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
+    this.handleMediaQueryChange(this.mq);
+    this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.copyHeadingsToCells();
+    if (this.sticky && this.breakpoint === "none-scrollable") {
+      console.warn(`[DUET WARNING]: sticky and breakpoint="none-scrollable" are incompatible. Scrollable takes precedence`);
+    }
+    if (this.sticky) {
+      const stickyTop = stickyTopValues[this.stickyDistance];
+      const headingElements = this.element.querySelectorAll("thead th");
+      headingElements.forEach(th => (th.style.top = `${stickyTop}px`));
+    }
+  }
+  componentDidLoad() {
+    // this clears all pending mutations,
+    // that way we avoid dealing with any initial changes
+    // and only get genuine mutations as rows are added/removed
+    this.observer ? this.observer.takeRecords() : null;
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.observer = null;
+    this.mq.removeListener(this.handleMediaQueryChange);
+    this.mq = null;
+    this.matchesBreakpoint = true;
+  }
+  /**
+   * Local methods.
+   */
+  copyHeadingsToCells() {
+    const headingElements = this.element.querySelectorAll("thead th");
+    const rowElements = this.element.querySelectorAll("tbody tr");
+    const headings = Array.from(headingElements).map(th => th.textContent.trim());
+    rowElements.forEach(tr => {
+      tr.querySelectorAll("td").forEach((td, i) => {
+        if (headings[i]) {
+          td.dataset.heading = headings[i];
+        }
+      });
+    });
+  }
+  render() {
+    return (h(Host, { class: {
+        [`duet-table-${this.variation}`]: true,
+        "duet-table-flattened": !this.matchesBreakpoint,
+        // sticky only valid when in regular table layout
+        "duet-table-sticky": this.matchesBreakpoint && this.sticky,
+        "duet-table-scrollable": this.breakpoint === "none-scrollable",
+        "duet-m-0": this.margin === "none",
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("slot", null)));
+  }
+  get element() { return this; }
+  static get style() { return duetTableCss; }
+}, [4, "duet-table", {
+    "theme": [1025],
+    "margin": [1],
+    "variation": [1],
+    "sticky": [4],
+    "stickyDistance": [1, "sticky-distance"],
+    "breakpoint": [1],
+    "matchesBreakpoint": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetTable);
+      }
+      break;
+  } });
+}
+
+export { DuetTable as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-0f5b2dfe.js

@@ -0,0 +1,287 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { f as fieldSorter } from './p-0b3f675e.js';
+import { i as isKeyboardClick } from './p-d8549efe.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { h } from './p-b9058029.js';
+import { d as defineCustomElement$6 } from './p-e121eb6d.js';
+import { d as defineCustomElement$5 } from './p-4c52333e.js';
+import { d as defineCustomElement$4 } from './p-4f516732.js';
+import { d as defineCustomElement$3 } from './p-6cae0682.js';
+import { d as defineCustomElement$2 } from './p-0ce83b83.js';
+import { d as defineCustomElement$1 } from './p-53a0c93d.js';
+
+//simple functional component that renders the data in the table
+const TableData = ({ data, groupId, alignment }, _children) => {
+  const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
+  if (typeof data === "string") {
+    return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
+  }
+  else {
+    return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+  }
+};
+
+const duetEditableTableCss = ".sc-duet-editable-table-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-actions-menu.sc-duet-editable-table{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button.sc-duet-editable-table{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon.sc-duet-editable-table .duet-icon.sc-duet-editable-table{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row.sc-duet-editable-table .duet-text-right.sc-duet-editable-table{text-align:right}.duet-editable-table-header.sc-duet-editable-table tr.sc-duet-editable-table .duet-editable-table-header-hidden.sc-duet-editable-table{padding:0 !important;font-size:0;border-bottom:0}";
+
+const DuetEditableTable = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetTableToggle = createEvent(this, "duetTableToggle", 7);
+    this.duetMenuClick = createEvent(this, "duetMenuClick", 7);
+    /**
+     * Duet-table: margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Duet-table: Style variation of the table.
+     */
+    this.variation = "striped";
+    /**
+     * Duet-table: Controls whether the table has a sticky header.
+     * Sticky headers are not compatible with breakpoint="none-scrollable".
+     */
+    this.sticky = false;
+    /**
+     * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+     * table header becomes sticky.
+     */
+    this.stickyDistance = "with-links";
+    /**
+     * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+     * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+     * Set to "none" to disable the responsive functionality.
+     * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+     * this is useful for comparison tables where it's important to maintain column and row layout.
+     */
+    this.breakpoint = "small";
+    /**
+     * Define actions for all items in a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
+     */
+    this.actions = undefined;
+    /**
+     * Define columns for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
+     */
+    this.columns = undefined;
+    /**
+     * Define rows for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
+     */
+    this.rows = undefined;
+    /**
+     * Controls whether the table is sortable by headers
+     */
+    this.sortable = false;
+    /**
+     * Optional id that get passed to the table and used to setup ::parts
+     */
+    this.groupId = "";
+    /**
+     * Theme of the table.
+     */
+    this.theme = "";
+    /**
+     * Exposes the aria role for optimizing accessibility.
+     */
+    this.accessibleRole = undefined;
+    this.sortableDefaultLabel = {
+      fi: "Järjestä",
+      en: "Click to sort",
+      sv: "Klicka för att sortera",
+    };
+    this.actionColumnLabel = {
+      en: "Actions for rows",
+      fi: "Toiminnot rivillä",
+      sv: "Åtgärder för rader",
+    };
+    /**
+     * Private methods.
+     */
+    this.toggleColumn = (column, e) => {
+      e.preventDefault();
+      const { sort_order, direction, index, key } = column;
+      this.duetTableToggle.emit({
+        sort_order,
+        index,
+        direction,
+        key,
+        component: "duet-editable-table",
+        originalEvent: e,
+      });
+    };
+    this.handleKeyDown = (column, e) => {
+      if (isKeyboardClick(e)) {
+        this.toggleColumn(column, e);
+      }
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  createLabel(column) {
+    const { sort_order, direction, index, label } = column;
+    const i18nLabel = getLocaleString(label);
+    if (!this.sortable) {
+      return i18nLabel;
+    }
+    const getButtonIcon = () => {
+      // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
+      // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
+      // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
+      if (!!sort_order && direction === 1) {
+        return "action-arrow-down-small";
+      }
+      else if (!!sort_order && direction === -1) {
+        return "action-arrow-up-small";
+      }
+      return "action-subtract-small";
+    };
+    return (h$1("span", { class: "duet-table-label", "data-index": index }, h$1("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+  }
+  getSortedColumns() {
+    //create a new array from sort instead of mutating original
+    return [...this.columns].sort(fieldSorter(["index"]));
+  }
+  getRowSortOrder() {
+    //create a new array from sort instead of mutating original
+    const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
+    //return only key from objects that have sort_order
+    return fields
+      .filter(column => column.sort_order)
+      .map(column => {
+      // add - in-front of descending direction (required by field-sorter)
+      return column.direction === -1 ? `-${column.key}` : column.key;
+    });
+  }
+  renderTableHeader() {
+    if (!this.columns) {
+      return;
+    }
+    const sortedColumns = this.getSortedColumns();
+    return (h$1("tr", { class: {
+        "duet-table-action-header": !!this.actions,
+      } }, sortedColumns.map(column => {
+      if (column.display !== false) {
+        return h$1("th", { scope: "col" }, this.createLabel(column));
+      }
+    }), this.actions && (h$1("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h$1("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
+  }
+  renderActions(rowItem, index) {
+    // escape early
+    if (!this.actions) {
+      return;
+    }
+    // iterate through actions and add them in the sidebar
+    return (h$1("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
+      return (h$1("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background }));
+    })));
+  }
+  renderTableBody() {
+    const columns = this.getSortedColumns();
+    const rowSortOrder = this.getRowSortOrder();
+    const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
+    // return a tbody with rows for each item in sortedRows
+    return sortedRows.map((row, index) => (h$1("tr", { class: {
+        "duet-table-action-row": !!this.actions,
+        "duet-editable-table-row": true,
+        [`duet-editable-table-row-${this.groupId}`]: true,
+      }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
+      //if we don't have any data for this column, try getting an item instead (for backwards compatibility
+      const value = row[column.key] ? row[column.key] : row.item;
+      if (column.display !== false) {
+        return h$1(TableData, { data: value, groupId: this.groupId });
+      }
+    }), this.actions && this.renderActions(row, index))));
+  }
+  /**
+   * Render Methods
+   */
+  render() {
+    return (h$1(Host, { class: {
+        [`duet-editable-table-${this.variation}`]: true,
+        "duet-editable-table": true,
+        [`duet-editable-table-${this.theme}`]: true,
+        // sticky only valid when in regular table layout
+        "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
+        "duet-editable-table-sortable": this.sortable,
+        "duet-editable-table-actions": !!this.actions,
+        "duet-m-0": this.margin === "none",
+        "duet-theme-turva": this.theme === "turva",
+      } }, h$1("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint }, h$1("table", { role: this.accessibleRole }, h$1("caption", null, h$1("slot", { name: "tcaption" })), h$1("thead", null, h$1("tr", null, h$1("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { name: "thead-first" }))), this.renderTableHeader(), h$1("tr", null, h$1("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { name: "thead-last" })))), h$1("tbody", null, this.renderTableBody()), h$1("tfoot", null, h$1("tr", null, h$1("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h$1("slot", { name: "tfoot" }))))))));
+  }
+  get element() { return this; }
+  static get style() { return duetEditableTableCss; }
+}, [6, "duet-editable-table", {
+    "margin": [1],
+    "variation": [1],
+    "sticky": [4],
+    "stickyDistance": [1, "sticky-distance"],
+    "breakpoint": [1],
+    "actions": [1040],
+    "columns": [1040],
+    "rows": [1040],
+    "sortable": [4],
+    "groupId": [1, "group-id"],
+    "theme": [1025],
+    "accessibleRole": [1, "accessible-role"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-editable-table", "duet-action-button", "duet-button", "duet-icon", "duet-spinner", "duet-table", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-editable-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetEditableTable);
+      }
+      break;
+    case "duet-action-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetEditableTable as D, defineCustomElement as d };