@govtechsg/sgds-web-component 3.26.0 → 3.26.1-rc.1

package/react/components/DataTable/sgds-data-table.js

@@ -0,0 +1,406 @@
+'use client';
+import { __decorate } from 'tslib';
+import { css, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './data-table.js';
+import { SgdsPagination } from '../Pagination/sgds-pagination.js';
+import { SgdsDataTableRow } from './sgds-data-table-row.js';
+import { SgdsDataTableCell } from './sgds-data-table-cell.js';
+import { SgdsDataTableHead } from './sgds-data-table-head.js';
+import { SgdsSpinner } from '../Spinner/sgds-spinner.js';
+
+/**
+ * @summary A data table container with pagination, row selection, loading, and sorting support.
+ *
+ * @slot default - Insert one or more `sgds-data-table-row` elements.
+ * @slot no-data - Custom content rendered when no body rows are available and `isLoading` is false.
+ *
+ * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: rowData[] }`.
+ * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.
+ * Detail: `{ key: string; direction: "ascending" | "descending" | "none" }`.
+ * @event sgds-page-change - Emitted when pagination changes page.
+ */
+class SgdsDataTable extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** If true, renders a checkbox column for row selection. */
+        this.multiSelect = false;
+        /** Total number of data items (for server-side pagination). */
+        this.dataLength = 0;
+        /** Current page (1-based). */
+        this.currentPage = 1;
+        /** Number of rows per page. */
+        this.itemsPerPage = 5;
+        /** Custom text shown on the footer's left side. */
+        this.footerText = "";
+        /** If true, hides the footer (summary text and pagination controls). */
+        this.hideFooter = false;
+        /** When true, shows a loading state and hides body rows. */
+        this.isLoading = false;
+        /** When true, emits sort events for external handling instead of local sorting. */
+        this.serverSort = false;
+        /**
+         * Controls the CSS `table-layout` algorithm.
+         * Use "auto" to let the browser size columns based on content, or "fixed" to distribute column widths evenly regardless of content.
+         * @type {"auto" | "fixed"}
+         * @default "auto"
+         */
+        this.layout = "auto";
+        /**
+         * Pagination mode. `client` (default) slices rows and renders pagination controls.
+         * `server` renders all slotted rows as-is — the caller is responsible for passing
+         * the correct page of data and handling `sgds-page-change` externally.
+         */
+        this.mode = "client";
+        this.tableRows = [];
+        this.headerRows = [];
+        this._headerCells = [];
+        this._initialRowPositions = new WeakMap();
+        this._hasCapturedInitialRowPositions = false;
+        this._rowHandlers = new WeakMap();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "table");
+    }
+    _isRowChecked(row) {
+        var _a;
+        return row.checked || ((_a = row.checkbox) === null || _a === void 0 ? void 0 : _a.checked) === true;
+    }
+    _updateHeaderCheckbox() {
+        const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;
+        const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;
+        this.headerRows.forEach(r => {
+            r.checked = allChecked;
+            if (r.checkbox) {
+                r.checkbox.checked = allChecked;
+                r.checkbox.indeterminate = checkedCount > 0 && !allChecked;
+            }
+        });
+    }
+    async _syncHeaderCheckboxAfterRender() {
+        if (!this.multiSelect || this.headerRows.length === 0)
+            return;
+        const rows = [...this.headerRows, ...this.tableRows];
+        await Promise.all(rows.map(row => row.updateComplete));
+        this._updateHeaderCheckbox();
+    }
+    _emitRowSelect() {
+        const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => r.rowData);
+        this.emit("sgds-row-select", { detail: { selected } });
+    }
+    _attachRowListener(row) {
+        const old = this._rowHandlers.get(row);
+        if (old)
+            row.removeEventListener("i-sgds-change", old);
+        const handler = (e) => {
+            const { checked } = e.detail;
+            if (this.headerRows.includes(row)) {
+                this.tableRows.forEach(r => {
+                    r.checked = checked;
+                    if (r.checkbox)
+                        r.checkbox.checked = checked;
+                });
+            }
+            else {
+                row.checked = checked;
+                this._updateHeaderCheckbox();
+            }
+            this._emitRowSelect();
+        };
+        this._rowHandlers.set(row, handler);
+        row.addEventListener("i-sgds-change", handler);
+    }
+    _configureRows() {
+        const hasExpand = this.tableRows.some(r => r.expand);
+        const hasDataRows = this.tableRows.length > 0;
+        this.headerRows.forEach(row => {
+            row.showCheckbox = this.multiSelect;
+            row.showExpandPlaceholder = hasExpand;
+            row.hasDataRows = hasDataRows;
+            if (this.multiSelect)
+                this._attachRowListener(row);
+        });
+        this.tableRows.forEach(row => {
+            row.showCheckbox = this.multiSelect;
+            row.showExpandPlaceholder = !row.expand && hasExpand;
+            if (this.multiSelect)
+                this._attachRowListener(row);
+        });
+        if (this.multiSelect) {
+            this._syncHeaderCheckboxAfterRender();
+        }
+        this._applyColumnAlignment();
+    }
+    _applyColumnAlignment() {
+        const headerAlignments = this._headerCells.reduce((acc, header) => {
+            var _a;
+            const span = Number(header.colspan) > 0 ? Number(header.colspan) : 1;
+            const alignment = (_a = header.textAlign) !== null && _a !== void 0 ? _a : "left";
+            for (let i = 0; i < span; i++) {
+                acc.push(alignment);
+            }
+            return acc;
+        }, []);
+        this.headerRows.forEach(row => {
+            row.columnAlignments = [...headerAlignments];
+        });
+        this.tableRows.forEach(row => {
+            row.columnAlignments = [...headerAlignments];
+        });
+    }
+    _extractCellText(row, columnIndex) {
+        const rowCellText = row.getCellText(columnIndex);
+        if (rowCellText)
+            return rowCellText;
+        const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === "sgds-data-table-cell");
+        const cell = cells[columnIndex];
+        return ((cell === null || cell === void 0 ? void 0 : cell.textContent) || "").trim();
+    }
+    _toComparableValue(row, key, columnIndex) {
+        if (key && row.rowData && key in row.rowData) {
+            return row.rowData[key];
+        }
+        return this._extractCellText(row, columnIndex);
+    }
+    _compareValues(left, right, direction) {
+        if (left === right)
+            return 0;
+        const leftNumber = Number(left);
+        const rightNumber = Number(right);
+        const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);
+        if (bothNumeric) {
+            return direction === "ascending" ? leftNumber - rightNumber : rightNumber - leftNumber;
+        }
+        const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: "base" });
+        return direction === "ascending" ? cmp : -cmp;
+    }
+    _resetOtherHeaderSortStates(activeHeader) {
+        this._headerCells.forEach(header => {
+            if (header !== activeHeader && header.sorting) {
+                header.ariasort = "none";
+            }
+        });
+    }
+    _getRowsInInitialPositionOrder(rows) {
+        return [...rows].sort((left, right) => {
+            const leftPosition = this._initialRowPositions.get(left);
+            const rightPosition = this._initialRowPositions.get(right);
+            if (leftPosition === undefined && rightPosition === undefined)
+                return 0;
+            if (leftPosition === undefined)
+                return 1;
+            if (rightPosition === undefined)
+                return -1;
+            return leftPosition - rightPosition;
+        });
+    }
+    _captureInitialRowPositions(rows) {
+        if (this._hasCapturedInitialRowPositions)
+            return;
+        rows.forEach((row, index) => {
+            this._initialRowPositions.set(row, index);
+        });
+        this._hasCapturedInitialRowPositions = true;
+    }
+    _handleSort(e) {
+        const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead);
+        if (!activeHeader || !activeHeader.sorting)
+            return;
+        const { key, direction } = e
+            .detail;
+        const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;
+        this._resetOtherHeaderSortStates(activeHeader);
+        if (this.serverSort) {
+            e.stopPropagation();
+            this.emit("sgds-sort", { detail: { key, direction } });
+            return;
+        }
+        if (columnIndex < 0)
+            return;
+        if (direction === "none") {
+            this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);
+            this._syncDomRowOrder();
+            this._updateVisibleRows();
+            return;
+        }
+        if (this.mode === "client") {
+            const start = (this.currentPage - 1) * this.itemsPerPage;
+            const end = start + this.itemsPerPage;
+            const nextRows = [...this.tableRows];
+            const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {
+                const leftValue = this._toComparableValue(left, key, columnIndex);
+                const rightValue = this._toComparableValue(right, key, columnIndex);
+                return this._compareValues(leftValue, rightValue, direction);
+            });
+            nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);
+            this.tableRows = nextRows;
+            this._syncDomRowOrder();
+            this._updateVisibleRows();
+            return;
+        }
+        this.tableRows = [...this.tableRows].sort((left, right) => {
+            const leftValue = this._toComparableValue(left, key, columnIndex);
+            const rightValue = this._toComparableValue(right, key, columnIndex);
+            return this._compareValues(leftValue, rightValue, direction);
+        });
+        this._syncDomRowOrder();
+        this._updateVisibleRows();
+    }
+    _syncDomRowOrder() {
+        var _a;
+        const parent = (_a = this.tableRows[0]) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent)
+            return;
+        this.tableRows.forEach(row => parent.appendChild(row));
+    }
+    _handleSlotChange(e) {
+        const slotted = e.target
+            .assignedElements({ flatten: true })
+            .filter(el => el instanceof SgdsDataTableRow);
+        const rowTableChildren = (row) => Array.from(row.children).filter(child => {
+            const tagName = child.tagName.toLowerCase();
+            const isTableCell = tagName === "sgds-data-table-cell" || tagName === "sgds-data-table-head";
+            if (!isTableCell)
+                return false;
+            return child.getAttribute("slot") !== "content";
+        });
+        this.headerRows = slotted.filter(row => rowTableChildren(row).some(child => child.tagName.toLowerCase() === "sgds-data-table-head"));
+        this.tableRows = slotted.filter(row => {
+            const children = rowTableChildren(row);
+            return children.length > 0 && children.every(child => child.tagName.toLowerCase() === "sgds-data-table-cell");
+        });
+        this._headerCells = this.headerRows.reduce((acc, row) => {
+            const headers = Array.from(row.children).filter(child => child instanceof SgdsDataTableHead);
+            acc.push(...headers);
+            return acc;
+        }, []);
+        this._captureInitialRowPositions(this.tableRows);
+        this._headerCells.forEach(header => {
+            if (header.sorting && !header.ariasort) {
+                header.ariasort = "none";
+            }
+        });
+        this._configureRows();
+        this._updateVisibleRows();
+    }
+    _updateVisibleRows() {
+        if (this.mode === "server") {
+            this.tableRows.forEach(row => (row.style.display = this.isLoading ? "none" : ""));
+            return;
+        }
+        const total = this.dataLength || this.tableRows.length;
+        const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));
+        if (this.currentPage > lastPage) {
+            this.currentPage = lastPage;
+            return;
+        }
+        const start = (this.currentPage - 1) * this.itemsPerPage;
+        const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));
+        this.tableRows.forEach(row => (row.style.display = visible.has(row) ? "" : "none"));
+    }
+    updated(changed) {
+        if (changed.has("currentPage") || changed.has("itemsPerPage") || changed.has("mode") || changed.has("isLoading")) {
+            this._updateVisibleRows();
+        }
+        if (changed.has("multiSelect")) {
+            this._configureRows();
+        }
+        if (this.multiSelect && (changed.has("tableRows") || changed.has("headerRows"))) {
+            this._syncHeaderCheckboxAfterRender();
+        }
+    }
+    render() {
+        const total = this.dataLength || this.tableRows.length;
+        const start = (this.currentPage - 1) * this.itemsPerPage;
+        const end = Math.min(start + this.itemsPerPage, total);
+        const displayStart = total === 0 ? 0 : start + 1;
+        const showNoData = !this.isLoading && this.tableRows.length === 0;
+        return html `
+      <div class="data-table">
+        <div>
+          <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort} class="table"></slot>
+          ${this.isLoading
+            ? html `<div class="loading" role="status" aria-live="polite">
+                <div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>
+              </div>`
+            : showNoData
+                ? html `<slot name="no-data" class="no-data" role="status" aria-live="polite">No data</slot>`
+                : nothing}
+        </div>
+
+        ${this.hideFooter
+            ? nothing
+            : html `<div class="footer">
+              ${this.footerText || html `<span>Showing ${displayStart} to ${end} of ${total} results</span>`}
+              <sgds-pagination
+                .dataLength=${total}
+                .currentPage=${this.currentPage}
+                .itemsPerPage=${this.itemsPerPage}
+                size="sm"
+                @sgds-page-change=${(e) => {
+                this.currentPage = e.detail.currentPage;
+                this.emit("sgds-page-change");
+            }}
+              ></sgds-pagination>
+            </div>`}
+      </div>
+    `;
+    }
+}
+SgdsDataTable.styles = [
+    ...SgdsElement.styles,
+    css_248z,
+    css `
+      :host {
+        display: block;
+      }
+    `
+];
+/** @internal */
+SgdsDataTable.dependencies = {
+    "sgds-pagination": SgdsPagination,
+    "sgds-data-table-cell": SgdsDataTableCell,
+    "sgds-data-table-head": SgdsDataTableHead,
+    "sgds-spinner": SgdsSpinner
+};
+__decorate([
+    property({ type: Boolean })
+], SgdsDataTable.prototype, "multiSelect", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsDataTable.prototype, "dataLength", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsDataTable.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsDataTable.prototype, "itemsPerPage", void 0);
+__decorate([
+    property({ type: String })
+], SgdsDataTable.prototype, "footerText", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsDataTable.prototype, "hideFooter", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsDataTable.prototype, "isLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsDataTable.prototype, "serverSort", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsDataTable.prototype, "layout", void 0);
+__decorate([
+    property({ type: String })
+], SgdsDataTable.prototype, "mode", void 0);
+__decorate([
+    state()
+], SgdsDataTable.prototype, "tableRows", void 0);
+__decorate([
+    state()
+], SgdsDataTable.prototype, "headerRows", void 0);
+
+export { SgdsDataTable, SgdsDataTable as default };
+//# sourceMappingURL=sgds-data-table.js.map

package/react/components/DataTable/sgds-data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-data-table.js","sources":["../../../../src/components/DataTable/sgds-data-table.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./data-table.css\";\nimport SgdsPagination from \"../Pagination/sgds-pagination\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"../Pagination/sgds-pagination\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n\n/**\n * @summary A data table container with pagination, row selection, loading, and sorting support.\n *\n * @slot default - Insert one or more `sgds-data-table-row` elements.\n * @slot no-data - Custom content rendered when no body rows are available and `isLoading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: rowData[] }`.\n * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.\n * Detail: `{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }`.\n * @event sgds-page-change - Emitted when pagination changes page.\n */\nexport class SgdsDataTable extends SgdsElement {\n  static styles = [\n    ...SgdsElement.styles,\n    tableStyle,\n    css`\n      :host {\n        display: block;\n      }\n    `\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-pagination\": SgdsPagination,\n    \"sgds-data-table-cell\": SgdsDataTableCell,\n    \"sgds-data-table-head\": SgdsDataTableHead,\n    \"sgds-spinner\": SgdsSpinner\n  };\n\n  /** If true, renders a checkbox column for row selection. */\n  @property({ type: Boolean }) multiSelect = false;\n\n  /** Total number of data items (for server-side pagination). */\n  @property({ type: Number }) dataLength = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number }) currentPage = 1;\n\n  /** Number of rows per page. */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Custom text shown on the footer's left side. */\n  @property({ type: String }) footerText = \"\";\n\n  /** If true, hides the footer (summary text and pagination controls). */\n  @property({ type: Boolean }) hideFooter = false;\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) isLoading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Pagination mode. `client` (default) slices rows and renders pagination controls.\n   * `server` renders all slotted rows as-is — the caller is responsible for passing\n   * the correct page of data and handling `sgds-page-change` externally.\n   */\n  @property({ type: String }) mode: \"client\" | \"server\" = \"client\";\n\n  @state() private tableRows: SgdsDataTableRow[] = [];\n  @state() private headerRows: SgdsDataTableRow[] = [];\n\n  private _headerCells: SgdsDataTableHead[] = [];\n  private _initialRowPositions = new WeakMap<SgdsDataTableRow, number>();\n  private _hasCapturedInitialRowPositions = false;\n\n  private _rowHandlers = new WeakMap<SgdsDataTableRow, EventListener>();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"table\");\n  }\n\n  private _isRowChecked(row: SgdsDataTableRow) {\n    return row.checked || row.checkbox?.checked === true;\n  }\n\n  private _updateHeaderCheckbox() {\n    const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;\n\n    const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;\n\n    this.headerRows.forEach(r => {\n      r.checked = allChecked;\n      if (r.checkbox) {\n        r.checkbox.checked = allChecked;\n        r.checkbox.indeterminate = checkedCount > 0 && !allChecked;\n      }\n    });\n  }\n\n  private async _syncHeaderCheckboxAfterRender() {\n    if (!this.multiSelect || this.headerRows.length === 0) return;\n\n    const rows = [...this.headerRows, ...this.tableRows];\n    await Promise.all(rows.map(row => row.updateComplete));\n    this._updateHeaderCheckbox();\n  }\n\n  private _emitRowSelect() {\n    const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => r.rowData);\n    this.emit(\"sgds-row-select\", { detail: { selected } });\n  }\n\n  private _attachRowListener(row: SgdsDataTableRow) {\n    const old = this._rowHandlers.get(row);\n    if (old) row.removeEventListener(\"i-sgds-change\", old);\n\n    const handler: EventListener = (e: Event) => {\n      const { checked } = (e as CustomEvent<{ checked: boolean }>).detail;\n\n      if (this.headerRows.includes(row)) {\n        this.tableRows.forEach(r => {\n          r.checked = checked;\n          if (r.checkbox) r.checkbox.checked = checked;\n        });\n      } else {\n        row.checked = checked;\n        this._updateHeaderCheckbox();\n      }\n      this._emitRowSelect();\n    };\n\n    this._rowHandlers.set(row, handler);\n    row.addEventListener(\"i-sgds-change\", handler);\n  }\n\n  private _configureRows() {\n    const hasExpand = this.tableRows.some(r => r.expand);\n    const hasDataRows = this.tableRows.length > 0;\n\n    this.headerRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = hasExpand;\n      row.hasDataRows = hasDataRows;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    this.tableRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = !row.expand && hasExpand;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    if (this.multiSelect) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n\n    this._applyColumnAlignment();\n  }\n\n  private _applyColumnAlignment() {\n    const headerAlignments = this._headerCells.reduce<Array<\"left\" | \"right\">>((acc, header) => {\n      const span = Number(header.colspan) > 0 ? Number(header.colspan) : 1;\n      const alignment = header.textAlign ?? \"left\";\n      for (let i = 0; i < span; i++) {\n        acc.push(alignment);\n      }\n      return acc;\n    }, []);\n\n    this.headerRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n\n    this.tableRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n  }\n\n  private _extractCellText(row: SgdsDataTableRow, columnIndex: number) {\n    const rowCellText = row.getCellText(columnIndex);\n    if (rowCellText) return rowCellText;\n\n    const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    const cell = cells[columnIndex];\n    return (cell?.textContent || \"\").trim();\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, key: string, columnIndex: number) {\n    if (key && row.rowData && key in row.rowData) {\n      return row.rowData[key];\n    }\n\n    return this._extractCellText(row, columnIndex);\n  }\n\n  private _compareValues(left: unknown, right: unknown, direction: \"ascending\" | \"descending\") {\n    if (left === right) return 0;\n\n    const leftNumber = Number(left);\n    const rightNumber = Number(right);\n    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);\n\n    if (bothNumeric) {\n      return direction === \"ascending\" ? leftNumber - rightNumber : rightNumber - leftNumber;\n    }\n\n    const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: \"base\" });\n    return direction === \"ascending\" ? cmp : -cmp;\n  }\n\n  private _resetOtherHeaderSortStates(activeHeader: SgdsDataTableHead | null) {\n    this._headerCells.forEach(header => {\n      if (header !== activeHeader && header.sorting) {\n        header.ariasort = \"none\";\n      }\n    });\n  }\n\n  private _getRowsInInitialPositionOrder(rows: SgdsDataTableRow[]) {\n    return [...rows].sort((left, right) => {\n      const leftPosition = this._initialRowPositions.get(left);\n      const rightPosition = this._initialRowPositions.get(right);\n\n      if (leftPosition === undefined && rightPosition === undefined) return 0;\n      if (leftPosition === undefined) return 1;\n      if (rightPosition === undefined) return -1;\n      return leftPosition - rightPosition;\n    });\n  }\n\n  private _captureInitialRowPositions(rows: SgdsDataTableRow[]) {\n    if (this._hasCapturedInitialRowPositions) return;\n\n    rows.forEach((row, index) => {\n      this._initialRowPositions.set(row, index);\n    });\n\n    this._hasCapturedInitialRowPositions = true;\n  }\n\n  private _handleSort(e: Event) {\n    const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead) as\n      | SgdsDataTableHead\n      | undefined;\n\n    if (!activeHeader || !activeHeader.sorting) return;\n\n    const { key, direction } = (e as CustomEvent<{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }>)\n      .detail;\n    const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;\n\n    this._resetOtherHeaderSortStates(activeHeader);\n\n    if (this.serverSort) {\n      e.stopPropagation();\n      this.emit(\"sgds-sort\", { detail: { key, direction } });\n      return;\n    }\n\n    if (columnIndex < 0) return;\n\n    if (direction === \"none\") {\n      this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    if (this.mode === \"client\") {\n      const start = (this.currentPage - 1) * this.itemsPerPage;\n      const end = start + this.itemsPerPage;\n      const nextRows = [...this.tableRows];\n\n      const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {\n        const leftValue = this._toComparableValue(left, key, columnIndex);\n        const rightValue = this._toComparableValue(right, key, columnIndex);\n        return this._compareValues(leftValue, rightValue, direction);\n      });\n      nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);\n\n      this.tableRows = nextRows;\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    this.tableRows = [...this.tableRows].sort((left, right) => {\n      const leftValue = this._toComparableValue(left, key, columnIndex);\n      const rightValue = this._toComparableValue(right, key, columnIndex);\n      return this._compareValues(leftValue, rightValue, direction);\n    });\n\n    this._syncDomRowOrder();\n    this._updateVisibleRows();\n  }\n\n  private _syncDomRowOrder() {\n    const parent = this.tableRows[0]?.parentElement;\n    if (!parent) return;\n    this.tableRows.forEach(row => parent.appendChild(row));\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slotted = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof SgdsDataTableRow) as SgdsDataTableRow[];\n\n    const rowTableChildren = (row: SgdsDataTableRow) =>\n      Array.from(row.children).filter(child => {\n        const tagName = child.tagName.toLowerCase();\n        const isTableCell = tagName === \"sgds-data-table-cell\" || tagName === \"sgds-data-table-head\";\n        if (!isTableCell) return false;\n        return child.getAttribute(\"slot\") !== \"content\";\n      });\n\n    this.headerRows = slotted.filter(row =>\n      rowTableChildren(row).some(child => child.tagName.toLowerCase() === \"sgds-data-table-head\")\n    );\n\n    this.tableRows = slotted.filter(row => {\n      const children = rowTableChildren(row);\n      return children.length > 0 && children.every(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    });\n\n    this._headerCells = this.headerRows.reduce<SgdsDataTableHead[]>((acc, row) => {\n      const headers = Array.from(row.children).filter(\n        child => child instanceof SgdsDataTableHead\n      ) as SgdsDataTableHead[];\n      acc.push(...headers);\n      return acc;\n    }, []);\n\n    this._captureInitialRowPositions(this.tableRows);\n\n    this._headerCells.forEach(header => {\n      if (header.sorting && !header.ariasort) {\n        header.ariasort = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = this.isLoading ? \"none\" : \"\"));\n      return;\n    }\n\n    const total = this.dataLength || this.tableRows.length;\n    const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));\n    if (this.currentPage > lastPage) {\n      this.currentPage = lastPage;\n      return;\n    }\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));\n    this.tableRows.forEach(row => (row.style.display = visible.has(row) ? \"\" : \"none\"));\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"isLoading\")) {\n      this._updateVisibleRows();\n    }\n    if (changed.has(\"multiSelect\")) {\n      this._configureRows();\n    }\n\n    if (this.multiSelect && (changed.has(\"tableRows\") || changed.has(\"headerRows\"))) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n  }\n\n  render() {\n    const total = this.dataLength || this.tableRows.length;\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const end = Math.min(start + this.itemsPerPage, total);\n    const displayStart = total === 0 ? 0 : start + 1;\n    const showNoData = !this.isLoading && this.tableRows.length === 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div>\n          <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort} class=\"table\"></slot>\n          ${this.isLoading\n            ? html`<div class=\"loading\" role=\"status\" aria-live=\"polite\">\n                <div class=\"loading-menu\"><sgds-spinner size=\"xs\" tone=\"brand\"></sgds-spinner>Loading...</div>\n              </div>`\n            : showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${this.hideFooter\n          ? nothing\n          : html`<div class=\"footer\">\n              ${this.footerText || html`<span>Showing ${displayStart} to ${end} of ${total} results</span>`}\n              <sgds-pagination\n                .dataLength=${total}\n                .currentPage=${this.currentPage}\n                .itemsPerPage=${this.itemsPerPage}\n                size=\"sm\"\n                @sgds-page-change=${(e: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => {\n                  this.currentPage = e.detail.currentPage;\n                  this.emit(\"sgds-page-change\");\n                }}\n              ></sgds-pagination>\n            </div>`}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"names":["tableStyle"],"mappings":"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"}

package/react/components/Input/input.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
+var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{align-items:center;color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);height:100%;justify-content:center}.form-control-prefix{border-right:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-right:var(--sgds-form-padding-x)}.form-control-suffix{border-left:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-left:var(--sgds-form-padding-x)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=input.cjs.js.map

package/react/components/Input/input.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
+var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{align-items:center;color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);height:100%;justify-content:center}.form-control-prefix{border-right:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-right:var(--sgds-form-padding-x)}.form-control-suffix{border-left:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-left:var(--sgds-form-padding-x)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=input.js.map

package/react/components/Modal/sgds-modal.cjs.js

@@ -247,7 +247,7 @@ class SgdsModal extends sgdsElement["default"] {
             : lit.nothing}
             <div class="modal-header">
               <div class="modal-header__title-description">
-                <slot class="modal-title" id="title" name="title"></slot>
+                <div id="title"><slot class="modal-title" name="title"></slot></div>
                 <slot name="description"></slot>
               </div>
             </div>

package/react/components/Modal/sgds-modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-modal.cjs.js","sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the dialog */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n        ]));\n\n      this.emit(\"sgds-after-show\");\n\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n            this.overlay.hidden = true;\n          }),\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n            this.panel.hidden = true;\n          })\n        ]));\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n\n      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasFooterSlot\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <div class=\"modal-body\">\n              <slot></slot>\n            </div>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["SgdsElement","HasSlotController","Modal","unlockBodyScrolling","lockBodyScrolling","SM_BREAKPOINT","MD_BREAKPOINT","waitForEvent","getAnimation","animateTo","stopAnimations","html","classMap","nothing","headerStyles","svgStyles","modalStyle","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-modal.cjs.js","sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the dialog */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n        ]));\n\n      this.emit(\"sgds-after-show\");\n\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n            this.overlay.hidden = true;\n          }),\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n            this.panel.hidden = true;\n          })\n        ]));\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n\n      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasFooterSlot\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <div id=\"title\"><slot class=\"modal-title\" name=\"title\"></slot></div>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <div class=\"modal-body\">\n              <slot></slot>\n            </div>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["SgdsElement","HasSlotController","Modal","unlockBodyScrolling","lockBodyScrolling","SM_BREAKPOINT","MD_BREAKPOINT","waitForEvent","getAnimation","animateTo","stopAnimations","html","classMap","nothing","headerStyles","svgStyles","modalStyle","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Modal/sgds-modal.js

@@ -243,7 +243,7 @@ class SgdsModal extends SgdsElement {
             : nothing}
             <div class="modal-header">
               <div class="modal-header__title-description">
-                <slot class="modal-title" id="title" name="title"></slot>
+                <div id="title"><slot class="modal-title" name="title"></slot></div>
                 <slot name="description"></slot>
               </div>
             </div>