@govtechsg/sgds-web-component 3.28.1-rc.0 → 3.29.1-rc.0

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-data-table.cjs.js","names":["SgdsElement","tableStyle","SgdsPagination","SgdsDataTableCell","SgdsDataTableHead","SgdsSkeleton","SgdsDataTableRow","nothing","property","state"],"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 SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\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 `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\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-skeleton\": SgdsSkeleton\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 }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\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 => this._getRowData(r));\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 _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\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.sortDirection = \"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<ISgdsDataTableSortEventDetail>).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.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\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  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\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.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || 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                .variant=${this.paginationVariant}\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          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-data-table.cjs.js","names":["SgdsElement","tableStyle","SgdsPagination","SgdsDataTableCell","SgdsDataTableHead","SgdsSkeleton","SgdsDataTableRow","nothing","property","state"],"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 SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\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 `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\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-skeleton\": SgdsSkeleton\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 }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\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  }\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 => this._getRowData(r));\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 _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\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.sortDirection = \"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<ISgdsDataTableSortEventDetail>).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.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\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  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\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.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\" role=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || 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                .variant=${this.paginationVariant}\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          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":"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"}

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

@@ -62,7 +62,6 @@ var SgdsDataTable = class extends SgdsElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.setAttribute("role", "table");
 	}
 	_isRowChecked(row) {
 		return row.checked || row.checkbox?.checked === true;
@@ -321,7 +320,7 @@ var SgdsDataTable = class extends SgdsElement {
 		return html`
       <div class="data-table">
         <div class="table-container">
-          <div class="table">
+          <div class="table" role="table">
             <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>
             ${this.loading ? this._renderLoadingSkeleton() : nothing}
           </div>

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-data-table.js","names":["tableStyle"],"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 SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\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 `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\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-skeleton\": SgdsSkeleton\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 }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\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 => this._getRowData(r));\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 _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\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.sortDirection = \"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<ISgdsDataTableSortEventDetail>).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.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\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  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\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.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || 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                .variant=${this.paginationVariant}\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          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-data-table.js","names":["tableStyle"],"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 SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\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 `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\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-skeleton\": SgdsSkeleton\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 }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\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  }\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 => this._getRowData(r));\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 _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\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.sortDirection = \"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<ISgdsDataTableSortEventDetail>).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.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\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  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\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.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\" role=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || 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                .variant=${this.paginationVariant}\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          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,gBAAb,cAAmC,YAAY;;;EAoBF,KAAA,cAAA;EAGF,KAAA,aAAA;EAGC,KAAA,cAAA;EAGC,KAAA,eAAA;EAGK,KAAA,oBAAA;EAGT,KAAA,UAAA;EAGG,KAAA,aAAA;EAGuD,KAAA,oBAAA;EAQ3B,KAAA,SAAA;EAOd,KAAA,OAAA;EAEP,KAAA,YAAA,CAAC;EACA,KAAA,aAAA,CAAC;EAEP,KAAA,eAAA,CAAC;EACd,KAAA,uCAAA,IAAI,QAAkC;EAC3B,KAAA,kCAAA;EAEnB,KAAA,+BAAA,IAAI,QAAyC;;;EAhEpD,KAAA,SAAA;GACd,GAAG,YAAY;GACfA;GACA,GAAG;;;;;EAKL;;;EAGsB,KAAA,eAAA;GACpB,mBAAmB;GACnB,wBAAwB;GACxB,wBAAwB;GACxB,iBAAiB;EACnB;;CAkDA,oBAAoB;EAClB,MAAM,kBAAkB;CAC1B;CAEA,cAAsB,KAAuB;EAC3C,OAAO,IAAI,WAAW,IAAI,UAAU,YAAY;CAClD;CAEA,wBAAgC;EAC9B,MAAM,eAAe,KAAK,UAAU,QAAO,MAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC;EAEvE,MAAM,aAAa,iBAAiB,KAAK,UAAU,UAAU,eAAe;EAE5E,KAAK,WAAW,SAAQ,MAAK;GAC3B,EAAE,UAAU;GACZ,IAAI,EAAE,UAAU;IACd,EAAE,SAAS,UAAU;IACrB,EAAE,SAAS,gBAAgB,eAAe,KAAK,CAAC;GAClD;EACF,CAAC;CACH;CAEA,MAAc,iCAAiC;EAC7C,IAAI,CAAC,KAAK,eAAe,KAAK,WAAW,WAAW,GAAG;EAEvD,MAAM,OAAO,CAAC,GAAG,KAAK,YAAY,GAAG,KAAK,SAAS;EACnD,MAAM,QAAQ,IAAI,KAAK,KAAI,QAAO,IAAI,cAAc,CAAC;EACrD,KAAK,sBAAsB;CAC7B;CAEA,iBAAyB;EACvB,MAAM,WAAW,KAAK,UAAU,QAAO,MAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,KAAI,MAAK,KAAK,YAAY,CAAC,CAAC;EAC/F,KAAK,KAAK,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvD;CAEA,mBAA2B,KAAuB;EAChD,MAAM,MAAM,KAAK,aAAa,IAAI,GAAG;EACrC,IAAI,KAAK,IAAI,oBAAoB,iBAAiB,GAAG;EAErD,MAAM,WAA0B,MAAa;GAC3C,MAAM,EAAE,YAAa,EAAwC;GAE7D,IAAI,KAAK,WAAW,SAAS,GAAG,GAC9B,KAAK,UAAU,SAAQ,MAAK;IAC1B,EAAE,UAAU;IACZ,IAAI,EAAE,UAAU,EAAE,SAAS,UAAU;GACvC,CAAC;QACI;IACL,IAAI,UAAU;IACd,KAAK,sBAAsB;GAC7B;GACA,KAAK,eAAe;EACtB;EAEA,KAAK,aAAa,IAAI,KAAK,OAAO;EAClC,IAAI,iBAAiB,iBAAiB,OAAO;CAC/C;CAEA,iBAAyB;EACvB,MAAM,YAAY,KAAK,UAAU,MAAK,MAAK,EAAE,MAAM;EACnD,MAAM,cAAc,KAAK,UAAU,SAAS;EAE5C,KAAK,WAAW,SAAQ,QAAO;GAC7B,IAAI,eAAe,KAAK;GACxB,IAAI,wBAAwB;GAC5B,IAAI,cAAc;GAClB,IAAI,KAAK,aAAa,KAAK,mBAAmB,GAAG;EACnD,CAAC;EAED,KAAK,UAAU,SAAQ,QAAO;GAC5B,IAAI,eAAe,KAAK;GACxB,IAAI,wBAAwB,CAAC,IAAI,UAAU;GAC3C,IAAI,KAAK,aAAa,KAAK,mBAAmB,GAAG;EACnD,CAAC;EAED,IAAI,KAAK,aACP,KAAK,+BAA+B;EAGtC,KAAK,sBAAsB;CAC7B;CAEA,wBAAgC;EAC9B,MAAM,mBAAmB,KAAK,aAAa,QAAiC,KAAK,WAAW;GAC1F,MAAM,OAAO,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,OAAO,OAAO,IAAI;GACnE,MAAM,YAAY,OAAO,aAAa;GACtC,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,KACxB,IAAI,KAAK,SAAS;GAEpB,OAAO;EACT,GAAG,CAAC,CAAC;EAEL,KAAK,WAAW,SAAQ,QAAO;GAC7B,IAAI,mBAAmB,CAAC,GAAG,gBAAgB;EAC7C,CAAC;EAED,KAAK,UAAU,SAAQ,QAAO;GAC5B,IAAI,mBAAmB,CAAC,GAAG,gBAAgB;EAC7C,CAAC;CACH;CAEA,iBAAyB,KAAuB,aAAqB;EACnE,MAAM,cAAc,IAAI,YAAY,WAAW;EAC/C,IAAI,aAAa,OAAO;EAIxB,QAFc,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QAAO,UAAS,MAAM,QAAQ,YAAY,MAAM,sBACtE,CAAC,CAAC,YACP,EAAE,eAAe,GAAA,CAAI,KAAK;CACxC;CAEA,YAAoB,KAA+C;EACjE,MAAM,OAA+B,CAAC;EACtC,KAAK,aAAa,SAAS,QAAQ,UAAU;GAC3C,MAAM,MAAM,OAAO,YAAY,OAAO,eAAe,GAAA,CAAI,KAAK,KAAK,OAAO;GAC1E,KAAK,OAAO,KAAK,iBAAiB,KAAK,KAAK;EAC9C,CAAC;EACD,OAAO;CACT;CAEA,mBAA2B,KAAuB,MAAc,aAAqB;EACnF,OAAO,KAAK,iBAAiB,KAAK,WAAW;CAC/C;CAEA,eAAuB,MAAe,OAAgB,WAAuC;EAC3F,IAAI,SAAS,OAAO,OAAO;EAE3B,MAAM,aAAa,OAAO,IAAI;EAC9B,MAAM,cAAc,OAAO,KAAK;EAGhC,IAFoB,OAAO,SAAS,UAAU,KAAK,OAAO,SAAS,WAAW,GAG5E,OAAO,cAAc,cAAc,aAAa,cAAc,cAAc;EAG9E,MAAM,MAAM,OAAO,IAAI,CAAC,CAAC,cAAc,OAAO,KAAK,GAAG,KAAA,GAAW;GAAE,SAAS;GAAM,aAAa;EAAO,CAAC;EACvG,OAAO,cAAc,cAAc,MAAM,CAAC;CAC5C;CAEA,4BAAoC,cAAwC;EAC1E,KAAK,aAAa,SAAQ,WAAU;GAClC,IAAI,WAAW,gBAAgB,OAAO,SACpC,OAAO,gBAAgB;EAE3B,CAAC;CACH;CAEA,+BAAuC,MAA0B;EAC/D,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,MAAM,UAAU;GACrC,MAAM,eAAe,KAAK,qBAAqB,IAAI,IAAI;GACvD,MAAM,gBAAgB,KAAK,qBAAqB,IAAI,KAAK;GAEzD,IAAI,iBAAiB,KAAA,KAAa,kBAAkB,KAAA,GAAW,OAAO;GACtE,IAAI,iBAAiB,KAAA,GAAW,OAAO;GACvC,IAAI,kBAAkB,KAAA,GAAW,OAAO;GACxC,OAAO,eAAe;EACxB,CAAC;CACH;CAEA,4BAAoC,MAA0B;EAC5D,IAAI,KAAK,iCAAiC;EAE1C,KAAK,SAAS,KAAK,UAAU;GAC3B,KAAK,qBAAqB,IAAI,KAAK,KAAK;EAC1C,CAAC;EAED,KAAK,kCAAkC;CACzC;CAEA,YAAoB,GAAU;EAC5B,MAAM,eAAe,EAAE,aAAa,CAAC,CAAC,MAAK,SAAQ,gBAAgB,iBAAiB;EAIpF,IAAI,CAAC,gBAAgB,CAAC,aAAa,SAAS;EAE5C,MAAM,EAAE,KAAK,cAAe,EAAiD;EAC7E,MAAM,cAAc,eAAe,KAAK,aAAa,QAAQ,YAAY,IAAI;EAE7E,KAAK,4BAA4B,YAAY;EAE7C,IAAI,KAAK,YAAY;GACnB,EAAE,gBAAgB;GAClB,KAAK,KAAK,aAAa,EAAE,QAAQ;IAAE;IAAK;GAAU,EAAE,CAAC;GACrD;EACF;EAEA,IAAI,cAAc,GAAG;EAErB,IAAI,cAAc,QAAQ;GACxB,KAAK,YAAY,KAAK,+BAA+B,KAAK,SAAS;GACnE,KAAK,iBAAiB;GACtB,KAAK,mBAAmB;GACxB;EACF;EAEA,IAAI,KAAK,SAAS,UAAU;GAC1B,MAAM,SAAS,KAAK,cAAc,KAAK,KAAK;GAC5C,MAAM,MAAM,QAAQ,KAAK;GACzB,MAAM,WAAW,CAAC,GAAG,KAAK,SAAS;GAEnC,MAAM,oBAAoB,SAAS,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,MAAM,UAAU;IACzE,MAAM,YAAY,KAAK,mBAAmB,MAAM,KAAK,WAAW;IAChE,MAAM,aAAa,KAAK,mBAAmB,OAAO,KAAK,WAAW;IAClE,OAAO,KAAK,eAAe,WAAW,YAAY,SAAS;GAC7D,CAAC;GACD,SAAS,OAAO,OAAO,kBAAkB,QAAQ,GAAG,iBAAiB;GAErE,KAAK,YAAY;GACjB,KAAK,iBAAiB;GACtB,KAAK,mBAAmB;GACxB;EACF;EAEA,KAAK,YAAY,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,MAAM,MAAM,UAAU;GACzD,MAAM,YAAY,KAAK,mBAAmB,MAAM,KAAK,WAAW;GAChE,MAAM,aAAa,KAAK,mBAAmB,OAAO,KAAK,WAAW;GAClE,OAAO,KAAK,eAAe,WAAW,YAAY,SAAS;EAC7D,CAAC;EAED,KAAK,iBAAiB;EACtB,KAAK,mBAAmB;CAC1B;CAEA,mBAA2B;EACzB,MAAM,SAAS,KAAK,UAAU,EAAE,EAAE;EAClC,IAAI,CAAC,QAAQ;EACb,KAAK,UAAU,SAAQ,QAAO,OAAO,YAAY,GAAG,CAAC;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,UAAW,EAAE,OAChB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QAAO,OAAM,cAAc,gBAAgB;EAE9C,MAAM,oBAAoB,QACxB,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QAAO,UAAS;GACvC,MAAM,UAAU,MAAM,QAAQ,YAAY;GAE1C,IAAI,EADgB,YAAY,0BAA0B,YAAY,yBACpD,OAAO;GACzB,OAAO,MAAM,aAAa,MAAM,MAAM;EACxC,CAAC;EAEH,KAAK,aAAa,QAAQ,QAAO,QAC/B,iBAAiB,GAAG,CAAC,CAAC,MAAK,UAAS,MAAM,QAAQ,YAAY,MAAM,sBAAsB,CAC5F;EAEA,KAAK,YAAY,QAAQ,QAAO,QAAO;GACrC,MAAM,WAAW,iBAAiB,GAAG;GACrC,OAAO,SAAS,SAAS,KAAK,SAAS,OAAM,UAAS,MAAM,QAAQ,YAAY,MAAM,sBAAsB;EAC9G,CAAC;EAED,KAAK,eAAe,KAAK,WAAW,QAA6B,KAAK,QAAQ;GAC5E,MAAM,UAAU,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QACvC,UAAS,iBAAiB,iBAC5B;GACA,IAAI,KAAK,GAAG,OAAO;GACnB,OAAO;EACT,GAAG,CAAC,CAAC;EAEL,KAAK,4BAA4B,KAAK,SAAS;EAE/C,KAAK,aAAa,SAAQ,WAAU;GAClC,IAAI,OAAO,WAAW,CAAC,OAAO,eAC5B,OAAO,gBAAgB;EAE3B,CAAC;EAED,KAAK,eAAe;EACpB,KAAK,mBAAmB;CAC1B;CAEA,qBAA6B;EAC3B,IAAI,KAAK,SAAS;GAChB,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,MAAO;GAC1D;EACF;EAEA,IAAI,KAAK,SAAS,UAAU;GAC1B,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,EAAG;GACtD;EACF;EAEA,MAAM,QAAQ,KAAK,cAAc,KAAK,UAAU;EAChD,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,KAAK,YAAY,CAAC;EACjE,IAAI,KAAK,cAAc,UAAU;GAC/B,KAAK,cAAc;GACnB;EACF;EACA,MAAM,SAAS,KAAK,cAAc,KAAK,KAAK;EAC5C,MAAM,UAAU,IAAI,IAAI,KAAK,UAAU,MAAM,OAAO,QAAQ,KAAK,YAAY,CAAC;EAC9E,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,QAAQ,IAAI,GAAG,IAAI,KAAK,MAAO;CACpF;CAEA,0BAAqG;EACnG,MAAM,oBAAoB,KAAK,aAAa,QAAQ,OAAO,WAAW;GAEpE,OAAO,SADM,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,OAAO,OAAO,IAAI;EAErE,GAAG,CAAC;EAEJ,MAAM,eAAe,KAAK,UAAU;EACpC,MAAM,0BAA0B,eAC5B,MAAM,KAAK,aAAa,QAAQ,CAAC,CAAC,QAAO,UAAS,iBAAiB,iBAAiB,CAAC,CAAC,SACtF;EAEJ,MAAM,YAAY,KAAK,UAAU,MAAK,QAAO,IAAI,MAAM;EAGvD,OAAO;GAAE,aAFW,qBAAqB,2BAA2B;GAE9C;GAAW,aAAa,KAAK;EAAY;CACjE;CAEA,yBAAiC;EAC/B,MAAM,EAAE,aAAa,WAAW,gBAAgB,KAAK,wBAAwB;EAC7E,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,gBAAgB,CAAC;EAEvD,OAAO,MAAM,KACX,EAAE,QAAQ,aAAa,SAErB,IAAI;YACA,YACE,IAAI;yCACuB,OAAO,UAAU,OAAO,iBAAiB,MAAM;wBAE1E,QAAQ;YACV,cACE,IAAI;yCACuB,OAAO,UAAU,OAAO,iBAAiB,MAAM;wBAE1E,QAAQ;YACV,MAAM,KACN,EAAE,QAAQ,YAAY,SAEpB,IAAI;yCACuB,OAAO,iBAAiB,MAAM;qBAE7D,EAAE;eAER;CACF;CAEA,QAAQ,SAA+B;EACrC,IAAI,QAAQ,IAAI,aAAa,KAAK,QAAQ,IAAI,cAAc,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,SAAS,GAC3G,KAAK,mBAAmB;EAE1B,IAAI,QAAQ,IAAI,aAAa,GAC3B,KAAK,eAAe;EAGtB,IAAI,KAAK,gBAAgB,QAAQ,IAAI,WAAW,KAAK,QAAQ,IAAI,YAAY,IAC3E,KAAK,+BAA+B;CAExC;CAEA,SAAS;EACP,MAAM,QAAQ,KAAK,cAAc,KAAK,UAAU;EAChD,MAAM,SAAS,KAAK,cAAc,KAAK,KAAK;EAC5C,MAAM,MAAM,KAAK,IAAI,QAAQ,KAAK,cAAc,KAAK;EACrD,MAAM,eAAe,UAAU,IAAI,IAAI,QAAQ;EAC/C,MAAM,aAAa,CAAC,KAAK,WAAW,KAAK,UAAU,WAAW;EAC9D,MAAM,aAAa,UAAU;EAE7B,OAAO,IAAI;;;;gCAIiB,KAAK,kBAAkB,gBAAgB,KAAK,YAAY;cAC1E,KAAK,UAAU,KAAK,uBAAuB,IAAI,QAAQ;;YAEzD,CAAC,KAAK,WAAW,aACf,IAAI,yFACJ,QAAQ;;;UAGZ,aACE,IAAI;gBACA,KAAK,UACH,IAAI,kBACJ,KAAK,qBAAqB,IAAI,iBAAiB,aAAa,MAAM,IAAI,MAAM,MAAM,iBAAiB;;8BAEvF,MAAM;+BACL,KAAK,YAAY;gCAChB,KAAK,aAAa;2BACvB,KAAK,kBAAkB;;qCAEb,MAAyD;GAC5E,KAAK,cAAc,EAAE,OAAO;GAC5B,KAAK,KAAK,kBAAkB;EAC9B,EAAE;;sBAGN,QAAQ;;;CAGlB;AACF;AAxbG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,gBAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,qBAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,WAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,qBAAA,KAAA,CAAA;AAQzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;AAOxC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;AAEzB,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA"}

package/react/components/Dropdown/sgds-dropdown.cjs.js

@@ -47,7 +47,7 @@ var SgdsDropdown = class extends require_dropdown_list_element.DropdownListEleme
 		this.hideMenu();
 	}
 	_handleCloseMenu() {
-		this._toggler[0]?.focus();
+		this._toggler[0]?.focus({ preventScroll: true });
 	}
 	async connectedCallback() {
 		super.connectedCallback();

package/react/components/Dropdown/sgds-dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.cjs.js","names":["DropdownListElement","dropdownStyle","dropdownMenuStyle","ref","property","queryAssignedElements","watch"],"sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String, reflect: true, state: false })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  private _handleTogglerSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    const button = elements[0];\n    if (button) {\n      button.setAttribute(\"aria-haspopup\", \"menu\");\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"menuIsOpen\")\n  _handleMenuIsOpenChange() {\n    const button = this._toggler[0];\n    if (button) {\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)}>\n          <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,eAAb,cAAkCA,8BAAAA,oBAAoB;;EACpC,KAAA,SAAA;GAAC,GAAGA,8BAAAA,oBAAoB;GAAQC,iBAAAA;GAAeC,sBAAAA;EAAiB;;CAEhF,cAAc;EACZ,MAAM;EAMC,KAAA,SAAA;EAIQ,KAAA,iBAAA;EAIK,KAAA,OAAA;EAIoB,KAAA,QAAA;EAjBxC,KAAK,WAAA,GAAUC,sBAAAA,IAAAA,CAAI;CACrB;CAuBA,MAAc,aAAa,GAAe;EACxC,IAAI,KAAK,UAAU;EAEnB,MAAM,iBAAiB,KAAK,SAAS;EAErC,IAAI,CAAC,gBAAgB;GACnB,KAAK,WAAW;GAChB;EACF;EAEA,IAAI,EAAE,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG;GAC7C,KAAK,WAAW;GAChB;EACF;EAGA,IAAI,CAAC,KAAK,YAAY;EACtB,MAAM,OAAO,KAAK,QAAQ;EAC1B,IAAI,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,GAAG;EAC7C,KAAK,SAAS;CAChB;CAEA,mBAA2B;EAEzB,KADoB,SAAS,EACvB,EAAE,MAAM;CAChB;CAEA,MAAM,oBAAoB;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,KAAK,gBAAgB;CAC1D;CAEA,MAAM,uBAAuB;EAC3B,KAAK,oBAAoB,aAAa,KAAK,gBAAgB;CAC7D;CAEA,MAAM,aAAa,mBAA2C;EAC5D,MAAM,aAAa,iBAAiB;EACpC,IAAI,KAAK,YACP,MAAM,KAAK,uBAAuB;EAEpC,KAAK,gBAAgB;CACvB;CAEA,yBAAiC,GAAU;EAGzC,MAAM,SAFO,EAAE,OACO,iBAAiB,EAAE,SAAS,KAAK,CACjC,CAAC,CAAC;EACxB,IAAI,QAAQ;GACV,OAAO,aAAa,iBAAiB,MAAM;GAC3C,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;EAC9D;CACF;CAEA,0BAC0B;EACxB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QACF,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;CAEhE;CAEA,kBACkB;EAChB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QAAQ;GACV,IAAI,KAAK,UACP,OAAO,aAAa,YAAY,MAAM;QAEtC,OAAO,aAAa,UAAU,KAAK,OAAO,gBAAgB,UAAU;EAExE;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI;qCACsB,KAAK,aAAa;0CACdA,GAAAA,sBAAAA,IAAAA,CAAI,KAAK,UAAU,EAAE;6CACjB,KAAK,yBAAyB;;kDAE1BA,GAAAA,sBAAAA,IAAAA,CAAI,KAAK,OAAO,EAAE;sCAC7B,KAAK,iBAAiB;;;;CAI1D;AACF;AA1GGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,UAAA,KAAA,CAAA;AAIvDA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,kBAAA,KAAA,CAAA;AAIvDA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;AAItDA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAGtDC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,sBAAAA,CAAsB;CAAE,MAAM;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AA2DxDC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,YAAY,CAAA,GAAA,aAAA,WAAA,2BAAA,IAAA;AAQlBA,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-dropdown.cjs.js","names":["DropdownListElement","dropdownStyle","dropdownMenuStyle","ref","property","queryAssignedElements","watch"],"sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String, reflect: true, state: false })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus({ preventScroll: true });\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  private _handleTogglerSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    const button = elements[0];\n    if (button) {\n      button.setAttribute(\"aria-haspopup\", \"menu\");\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"menuIsOpen\")\n  _handleMenuIsOpenChange() {\n    const button = this._toggler[0];\n    if (button) {\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)}>\n          <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"mappings":"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"}

package/react/components/Dropdown/sgds-dropdown.js

@@ -47,7 +47,7 @@ var SgdsDropdown = class extends DropdownListElement {
 		this.hideMenu();
 	}
 	_handleCloseMenu() {
-		this._toggler[0]?.focus();
+		this._toggler[0]?.focus({ preventScroll: true });
 	}
 	async connectedCallback() {
 		super.connectedCallback();

package/react/components/Dropdown/sgds-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.js","names":["dropdownStyle","dropdownMenuStyle"],"sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String, reflect: true, state: false })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  private _handleTogglerSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    const button = elements[0];\n    if (button) {\n      button.setAttribute(\"aria-haspopup\", \"menu\");\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"menuIsOpen\")\n  _handleMenuIsOpenChange() {\n    const button = this._toggler[0];\n    if (button) {\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)}>\n          <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,eAAb,cAAkC,oBAAoB;;EACpC,KAAA,SAAA;GAAC,GAAG,oBAAoB;GAAQA;GAAeC;EAAiB;;CAEhF,cAAc;EACZ,MAAM;EAMC,KAAA,SAAA;EAIQ,KAAA,iBAAA;EAIK,KAAA,OAAA;EAIoB,KAAA,QAAA;EAjBxC,KAAK,UAAU,IAAI;CACrB;CAuBA,MAAc,aAAa,GAAe;EACxC,IAAI,KAAK,UAAU;EAEnB,MAAM,iBAAiB,KAAK,SAAS;EAErC,IAAI,CAAC,gBAAgB;GACnB,KAAK,WAAW;GAChB;EACF;EAEA,IAAI,EAAE,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG;GAC7C,KAAK,WAAW;GAChB;EACF;EAGA,IAAI,CAAC,KAAK,YAAY;EACtB,MAAM,OAAO,KAAK,QAAQ;EAC1B,IAAI,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,GAAG;EAC7C,KAAK,SAAS;CAChB;CAEA,mBAA2B;EAEzB,KADoB,SAAS,EACvB,EAAE,MAAM;CAChB;CAEA,MAAM,oBAAoB;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,KAAK,gBAAgB;CAC1D;CAEA,MAAM,uBAAuB;EAC3B,KAAK,oBAAoB,aAAa,KAAK,gBAAgB;CAC7D;CAEA,MAAM,aAAa,mBAA2C;EAC5D,MAAM,aAAa,iBAAiB;EACpC,IAAI,KAAK,YACP,MAAM,KAAK,uBAAuB;EAEpC,KAAK,gBAAgB;CACvB;CAEA,yBAAiC,GAAU;EAGzC,MAAM,SAFO,EAAE,OACO,iBAAiB,EAAE,SAAS,KAAK,CACjC,CAAC,CAAC;EACxB,IAAI,QAAQ;GACV,OAAO,aAAa,iBAAiB,MAAM;GAC3C,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;EAC9D;CACF;CAEA,0BAC0B;EACxB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QACF,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;CAEhE;CAEA,kBACkB;EAChB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QAAQ;GACV,IAAI,KAAK,UACP,OAAO,aAAa,YAAY,MAAM;QAEtC,OAAO,aAAa,UAAU,KAAK,OAAO,gBAAgB,UAAU;EAExE;CACF;CAEA,SAAS;EACP,OAAO,IAAI;qCACsB,KAAK,aAAa;yCACd,IAAI,KAAK,UAAU,EAAE;6CACjB,KAAK,yBAAyB;;iDAE1B,IAAI,KAAK,OAAO,EAAE;sCAC7B,KAAK,iBAAiB;;;;CAI1D;AACF;AA1GG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,UAAA,KAAA,CAAA;AAIvD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,kBAAA,KAAA,CAAA;AAIvD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;AAItD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAGtD,WAAA,CAAA,sBAAsB;CAAE,MAAM;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AA2DxD,WAAA,CAAA,MAAM,YAAY,CAAA,GAAA,aAAA,WAAA,2BAAA,IAAA;AAQlB,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-dropdown.js","names":["dropdownStyle","dropdownMenuStyle"],"sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String, reflect: true, state: false })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus({ preventScroll: true });\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  private _handleTogglerSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    const button = elements[0];\n    if (button) {\n      button.setAttribute(\"aria-haspopup\", \"menu\");\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"menuIsOpen\")\n  _handleMenuIsOpenChange() {\n    const button = this._toggler[0];\n    if (button) {\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)}>\n          <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"mappings":"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"}

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

@@ -185,6 +185,7 @@ var SgdsInput = class extends require_validatorMixin.SgdsFormValidatorMixin(requ
 		return lit_static_html_js.html`<sgds-icon
       tabIndex="0"
       role="button"
+      aria-label=${this._showPassword ? "Hide password" : "Show password"}
       name=${this._showPassword ? "eye-slash-fill" : "eye-fill"}
       @click=${() => this._showPassword = !this._showPassword}
     ></sgds-icon>`;

package/react/components/Input/sgds-input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","classMap","nothing","ifDefined","live","property","defaultValue","state","watch"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-input.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","classMap","nothing","ifDefined","live","property","defaultValue","state","watch"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}

package/react/components/Input/sgds-input.js

@@ -185,6 +185,7 @@ var SgdsInput = class extends SgdsFormValidatorMixin(FormControlElement) {
 		return html$1`<sgds-icon
       tabIndex="0"
       role="button"
+      aria-label=${this._showPassword ? "Hide password" : "Show password"}
       name=${this._showPassword ? "eye-slash-fill" : "eye-fill"}
       @click=${() => this._showPassword = !this._showPassword}
     ></sgds-icon>`;

package/react/components/Input/sgds-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.js","names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-input.js","names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}