@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.3

package/lib/dist-custom-elements/p-22147601.js

@@ -0,0 +1,642 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { i as spaceLarge, j as fontFamilyText, k as fontSizeMedium, l as fontFamilyTextTurva, n as colorSecondary, o as colorSecondaryTurva, p as fontWeightSemiBold, q as lineHeightSmall, r as colorGrayDarker, u as colorGrayDarkTurva, v as spaceMedium, w as spaceXxSmall, x as colorGrayLightest, a as mediaQueryXSmall, y as spaceSmall, z as colorGrayLight, A as colorGrayLightTurva, B as colorGrayDarkerTurva, C as colorPrimary, D as sizeNavigation, E as sizeHeader } from './p-cea716f7.js';
+import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
+import { d as debounce } from './p-9e371678.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
+import { a as breakpointTokensUpTo, b as breakpointToToken } from './p-1f4fbc7a.js';
+
+const styles = `
+duet-table {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: ${spaceLarge} !important;
+  display: block;
+  font-variant-numeric: tabular-nums;
+
+  table,
+  thead,
+  tbody,
+  tfoot,
+  th,
+  td,
+  tr {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: 0;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  &.duet-m-0 {
+    margin: 0 !important;
+  }
+
+  table {
+    width: 100%;
+    font-family: ${fontFamilyText};
+    font-size: ${fontSizeMedium};
+    text-align: left;
+    border-spacing: 0;
+    border-collapse: separate;
+  }
+
+  &.duet-table-hide-head-visually.duet-table-hide-head-visually {
+    thead,
+    thead * {
+      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-theme-turva table {
+    font-family: ${fontFamilyTextTurva};
+  }
+
+  td {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    color: ${colorSecondary};
+  }
+
+  &.duet-theme-turva td {
+    color: ${colorSecondaryTurva};
+  }
+
+  th {
+    font-weight: ${fontWeightSemiBold};
+    line-height: ${lineHeightSmall};
+    color: ${colorGrayDarker};
+    text-align: left;
+  }
+
+  &.duet-theme-turva th {
+    color: ${colorGrayDarkTurva};
+  }
+
+  tbody th {
+    font-weight: ${fontWeightSemiBold};
+    color: ${colorSecondary};
+  }
+
+  &.duet-theme-turva tbody th {
+    color: ${colorSecondaryTurva};
+  }
+
+  & .duet-table-action-row {
+    & td:last-child {
+      justify-self: end;
+      padding-right: ${spaceLarge} !important;
+      white-space: nowrap;
+    }
+  }
+
+  span.duet-table-cell-heading {
+    display: none;
+  }
+}
+
+.duet-table-flattened {
+  table,
+  thead,
+  tbody,
+  tfoot,
+  th,
+  td,
+  tr {
+    display: block;
+  }
+
+  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;
+  }
+
+  td {
+    line-height: ${lineHeightSmall};
+
+    &:not(:last-child) {
+      margin-bottom: ${spaceMedium};
+    }
+
+    span.duet-table-cell-heading {
+      margin-bottom: ${spaceXxSmall};
+      display: block;
+      font-size: ${fontSizeMedium};
+      font-weight: ${fontWeightSemiBold};
+      color: ${colorSecondary};
+    }
+  }
+
+  &.duet-theme-turva td span.duet-table-cell-heading {
+    color: ${colorSecondaryTurva};
+  }
+
+  tbody td,
+  tbody th,
+  tfoot td {
+    padding: 0 !important;
+    text-align: left !important;
+  }
+
+  tbody th {
+    font-weight: ${fontWeightSemiBold};
+    line-height: ${lineHeightSmall};
+    color: ${colorGrayDarker};
+    text-align: left;
+  }
+}
+
+.duet-table-sticky thead th {
+  position: sticky;
+  top: 0;
+  background: ${colorGrayLightest};
+}
+
+.duet-table-striped {
+  td,
+  th {
+    padding: ${spaceLarge} !important;
+    @media ${mediaQueryXSmall.replace("'", "").replace("'", "")} {
+      padding: ${spaceLarge} ${spaceSmall} !important;
+    }
+  }
+
+  tbody th {
+    background: ${colorGrayLightest};
+  }
+
+  &.duet-table-sticky {
+    thead th {
+      border-bottom: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva thead th {
+      border-bottom-color: ${colorGrayLightTurva};
+    }
+  }
+
+  tbody:not(:first-of-type) th {
+    padding-top: calc(${spaceLarge} * 2) !important;
+  }
+
+  tbody:only-of-type tr:nth-of-type(odd) {
+    background: rgba(4, 81, 128, 0.04);
+  }
+
+  &.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
+    background: rgba(${colorSecondaryTurva}, 0.04);
+  }
+
+  tbody:not(:only-of-type) tr:nth-of-type(even) {
+    background: rgba(4, 81, 128, 0.04);
+  }
+
+  &.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
+    background: rgba(${colorSecondaryTurva}, 0.04);
+  }
+
+  tfoot td {
+    border-top: 1px solid ${colorGrayLight};
+  }
+
+  &.duet-theme-turva tfoot td {
+    border-top-color: ${colorGrayLightTurva};
+  }
+
+  &.duet-table-flattened {
+    tbody:not(:first-of-type) th {
+      padding-top: ${spaceLarge} !important;
+    }
+
+    tr {
+      padding: ${spaceLarge} !important;
+    }
+
+    tfoot {
+      td {
+        border-top: 0;
+      }
+
+      tr {
+        border-top: 1px solid ${colorGrayLight};
+      }
+    }
+
+    &.duet-theme-turva tfoot tr {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+.duet-table-plain, .duet-table-fixed, .duet-table-minimal {
+  th {
+    padding: ${spaceMedium} !important;
+    border-bottom: 1px solid ${colorGrayDarker};
+
+    &:first-child {
+      padding-left: 0 !important;
+    }
+
+    &:last-child {
+      padding-right: 0 !important;
+    }
+  }
+
+  &.duet-theme-turva th {
+    border-bottom-color: ${colorGrayDarkerTurva};
+  }
+
+  tbody th {
+    padding-top: calc(${spaceLarge} * 2) !important;
+    border-bottom-color: ${colorGrayLight};
+  }
+
+  &.duet-theme-turva tbody th {
+    border-bottom-color: ${colorGrayLightTurva};
+  }
+
+  td {
+    padding: ${spaceMedium} !important;
+
+    &:first-child {
+      padding-left: 0 !important;
+    }
+
+    &:last-child {
+      padding-right: 0 !important;
+    }
+  }
+
+  tbody td {
+    border-bottom: 1px solid ${colorGrayLight};
+  }
+
+  &.duet-theme-turva tbody td {
+    border-bottom-color: ${colorGrayLightTurva};
+  }
+
+  &.duet-table-flattened {
+    tbody:first-of-type th {
+      padding-top: 0 !important;
+    }
+
+    td,
+    tbody th {
+      border-bottom: 0;
+    }
+
+    tr {
+      padding: ${spaceLarge} 0 !important;
+    }
+
+    tbody th {
+      padding-top: ${spaceLarge} !important;
+    }
+
+    tfoot td {
+      margin-bottom: ${spaceXxSmall} !important;
+    }
+
+    tbody:not(:only-of-type) tr:first-child {
+      border-bottom: 0;
+    }
+  }
+}
+
+.duet-table-plain {
+
+  &.duet-table-flattened {
+    tbody tr {
+      border-bottom: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tbody tr {
+      border-bottom-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+.duet-table-minimal {
+
+  tbody tr,
+  tbody tr td {
+    vertical-align: top;
+    border-bottom: 0 none;
+  }
+
+  tbody tr:last-of-type,
+  tbody tr:last-of-type td {
+    border-bottom: 1px solid ${colorGrayLight};
+  }
+
+  &.duet-table-flattened {
+    tbody tr,
+    tbody tr td {
+      border-bottom: 0 none;
+    }
+
+    tbody tr td[data-heading]::before {
+      display: none;
+    }
+
+    tfoot {
+      border-top: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tfoot {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+.duet-table-fixed {
+
+  table {
+    table-layout: fixed;
+  }
+
+  tbody tr,
+  tbody tr td,
+  tbody tr td:first-child {
+    padding: 4px !important;
+    vertical-align: text-bottom;
+    border-bottom: 0 none;
+  }
+
+  thead {
+    display: none;
+  }
+
+  tbody tr,
+  tbody tr td {
+    border-bottom: 0 none;
+  }
+
+  &:not(.duet-table-flattened) {
+    tfoot {
+      border-top: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tfoot {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+.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(${colorPrimary}, 0.08);
+
+  .duet-theme-turva & {
+    background: rgba(${colorGrayDarkerTurva}, 0.08);
+  }
+}
+
+.duet-table-sortable {
+  tbody tr td:first-child,
+  thead tr th:first-child {
+    padding: ${spaceLarge};
+  }
+
+  &:not(.duet-table-flattened) {
+    tfoot {
+      border-top: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tfoot {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+
+.duet-table-actions {
+  table {
+    table-layout: auto;
+  }
+
+  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-table-action-row td:last-child::before {
+      padding: 0;
+      content: "";
+    }
+  }
+
+  td {
+    grid-column: 1 / 2;
+
+    &:first-child {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    &:last-child {
+      grid-row: 1;
+      grid-column: 2;
+    }
+  }
+}
+`.replace(/[\n\r\t]/gm, "");
+function createStyles(element) {
+    const rootNode = element.getRootNode();
+    const isInShadowRoot = rootNode instanceof ShadowRoot;
+    if (isInShadowRoot) {
+        const sheet = new CSSStyleSheet();
+        sheet.replace(styles).then(() => {
+            rootNode.adoptedStyleSheets.push(sheet);
+        });
+    }
+    else {
+        const previousStyleElement = document.querySelector("style#duet-table-styles");
+        if (previousStyleElement) {
+            return;
+        }
+        const styleElement = document.createElement("style");
+        styleElement.id = "duet-table-styles";
+        styleElement.innerHTML = styles;
+        document.head.append(styleElement);
+    }
+}
+
+const stickyTopValues = {
+    none: 0,
+    "with-links": parseFloat(sizeNavigation) * 16, // convert rem -> px
+    "without-links": parseFloat(sizeHeader) * 16,
+};
+const DuetTable = /*@__PURE__*/ proxyCustomElement(class DuetTable extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
+        this.matchesBreakpoint = true;
+        this.language = getLanguage();
+        this.theme = undefined;
+        this.margin = "auto";
+        this.variation = "striped";
+        this.sticky = false;
+        this.stickyDistance = "with-links";
+        this.breakpoint = "small";
+        this.hideHeadVisually = false;
+    }
+    watchLanguageStateHandler(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setTimeout(() => this.copyHeadingsToCells(), 50);
+        }
+    }
+    connectedCallback() {
+        createStyles(this.element);
+        const token = this.breakpoint === "none" || this.breakpoint === "none-scrollable" ? "all" : breakpointToToken[this.breakpoint];
+        this.mq = matchMedia(token);
+        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(this.headingSelector);
+            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;
+        connectLanguageChangeObserver(this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+        this.observer = null;
+        this.mq.removeListener(this.handleMediaQueryChange);
+        this.mq = null;
+        this.matchesBreakpoint = true;
+        disconnectLanguageChangeObserver(this);
+    }
+    /**
+     * Local methods.
+     */
+    copyHeadingsToCells() {
+        const headingElements = this.element.querySelectorAll(this.headingSelector);
+        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]) {
+                    const previousSpan = td.querySelector(".duet-table-cell-heading");
+                    if (!previousSpan || previousSpan.textContent !== headings[i]) {
+                        previousSpan === null || previousSpan === void 0 ? void 0 : previousSpan.remove();
+                        const span = document.createElement("span");
+                        span.textContent = headings[i];
+                        span.classList.add("duet-table-cell-heading");
+                        span.setAttribute("aria-hidden", "true");
+                        span.inert = true;
+                        td.prepend(span);
+                    }
+                }
+            });
+        });
+    }
+    render() {
+        return (h(Host, { key: 'a02e59e614dfac870270c7e3d74e04fb2802c527', 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",
+                "duet-table-hide-head-visually": this.hideHeadVisually,
+            } }, h("slot", { key: 'd3938a251798e10cd525715687c827fd449272cc' })));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "language": ["watchLanguageStateHandler"]
+    }; }
+}, [1, "duet-table", {
+        "theme": [1025],
+        "margin": [1],
+        "variation": [1],
+        "sticky": [4],
+        "stickyDistance": [1, "sticky-distance"],
+        "breakpoint": [1],
+        "hideHeadVisually": [4, "hide-head-visually"],
+        "matchesBreakpoint": [32],
+        "language": [32]
+    }, undefined, {
+        "language": ["watchLanguageStateHandler"]
+    }]);
+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-1e88beeb.js → p-29be247b.js}

@@ -38,7 +38,7 @@ const DuetOverlay = /*@__PURE__*/ proxyCustomElement(class DuetOverlay extends H
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '06582c6852e2d6982612c3acc9fa8bbd09a275e3', "aria-hidden": "true" }, h("div", { key: '4e3a9651ea3d397a1ea974216514c2e29ff35082', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: 'd8f034b2c2abc3f7adc006ba65c93afe843bdb2b', "aria-hidden": "true" }, h("div", { key: '25c36326e9753e221143c4fbcb502ed37e31a2d2', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,

package/lib/dist-custom-elements/{p-64139e5c.js → p-2c70b9f4.js}

@@ -19,14 +19,14 @@ const DuetListItem = /*@__PURE__*/ proxyCustomElement(class DuetListItem extends
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b6d3629f682ab9c7962c63213a42d93633b7b5ae', class: {
+        return (h(Host, { key: '95db1eb8cfa0c88dad6a34ca300fd710a8f2d773', class: {
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: '6fd5bb285e0657c6669dcd1aa45983655ae96e44' }, h("slot", { key: '3042541fb55b198c4f183ddcbd5d3a318f20c0f6', name: "label" })), h("dd", { key: 'd925ef59c712ea7ea6308c65ff10e8e2293202bb' }, h("slot", { key: 'e38113683d53d0a1a23f80c900784c148ade05de', name: "value" }))));
+            } }, h("dt", { key: '27457dbebf1c7f29cd87199d1044d1830e00e1f9' }, h("slot", { key: '6760928d435314ff885b768ab2f74917a7891a46', name: "label" })), h("dd", { key: '97ae930888f789b056413956ee6bc8240252d9c6' }, h("slot", { key: '9a1daf78702df7b6b000e8d10aa8a848058f38ca', name: "value" }))));
     }
     static get style() { return DuetListItemStyle0; }
 }, [1, "duet-list-item", {