@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/dist-custom-elements/p-959f2240.js

@@ -1,645 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.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 { b as breakpointTokensUpTo, a as breakpointToToken } from './p-0562173d.js';
-
-const rgbable = (value) => {
-    return value.replace("rgb(", "").replace(")", "");
-};
-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(${rgbable(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(${rgbable(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(${rgbable(colorPrimary)}, 0.08);
-
-  .duet-theme-turva & {
-    background: rgba(${rgbable(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: '72de844955aa9838e7c02ea85e8b01a7b93ab62e', 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: 'd04cc4bc3ee738f5dea148cac4ed37999c699ded' })));
-    }
-    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 };