@govtechsg/sgds-web-component 3.20.0-rc.2 → 3.20.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.20.0-rc.2",
+  "version": "3.20.0-rc.3",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Table/sgds-table.cjs.js

@@ -173,16 +173,16 @@ tslib.__decorate([
     decorators_js.property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: String })
+    decorators_js.property({ type: String, reflect: true })
 ], SgdsTable.prototype, "headerPosition", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: Boolean })
+    decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "headerBackground", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: Boolean })
+    decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "tableBorder", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: String })
+    decorators_js.property({ type: String, reflect: true })
 ], SgdsTable.prototype, "layout", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean })

package/react/components/Table/sgds-table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { provide } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Specifies the responsive breakpoint for the table.\n   * Use \"sm\", \"md\", \"lg\", or \"xl\" to create responsive tables up to a particular breakpoint.\n   * From that breakpoint and up, the table will behave normally and not scroll horizontally.\n   * Use \"always\" to make the table always responsive.\n   *\n   * (@deprecated) Deprecated since 3.9.0 legacy from v2\n   * @type {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\"}\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Array of strings to populate row header cells.\n   * @type {string[]}\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Array of strings to populate column header cells.\n   * Only used when `headerPosition` is set to \"vertical\" or \"both\".\n   * @type {string[]}\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Two-dimensional array of strings or numbers to populate table data cells.\n   * @type {Array<(string | number)[]>}\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table.\n   * Use \"horizontal\" for top headers only, \"vertical\" for left headers only,\n   * or \"both\" for both row and column headers.\n   * @type {\"horizontal\" | \"vertical\" | \"both\"}\n   * @default \"horizontal\"\n   */\n  @property({ type: String }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /**\n   * Enables background styling on horizontal header rows.\n   * When true, applies background color to header cells for better visual distinction.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) headerBackground = false;\n\n  /**\n   * Enables borders around table cells.\n   * When true, displays visible borders between all table cells.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) tableBorder = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Indicates the presence of the default slot.\n   * Used for server-side rendering to determine table structure.\n   * @type {boolean}\n   * @internal\n   * @default false\n   */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  @provide({ context: TableHeaderBackgroundContext })\n  @state()\n  private _headerBackground = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    this._headerBackground = this.headerBackground;\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th><div></div></th>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th><div>${this.columnHeader[index]}</div></th>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th><div>${this.columnHeader[index]}</div></th>\n              ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <div role=\"table\">\n          <slot id=\"table-slot\" class=${classMap({ table: true, \"no-border\": !this.hasDefaultSlot })}></slot>\n\n          ${!this.hasDefaultSlot\n            ? html`<table class=\"table\">\n                ${this._renderTable()}\n              </table>`\n            : \"\"}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","HasSlotController","html","classMap","tableStyle","__decorate","property","provide","TableHeaderBackgroundContext","state"],"mappings":"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"}
+{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { provide } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Specifies the responsive breakpoint for the table.\n   * Use \"sm\", \"md\", \"lg\", or \"xl\" to create responsive tables up to a particular breakpoint.\n   * From that breakpoint and up, the table will behave normally and not scroll horizontally.\n   * Use \"always\" to make the table always responsive.\n   *\n   * (@deprecated) Deprecated since 3.9.0 legacy from v2\n   * @type {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\"}\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Array of strings to populate row header cells.\n   * @type {string[]}\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Array of strings to populate column header cells.\n   * Only used when `headerPosition` is set to \"vertical\" or \"both\".\n   * @type {string[]}\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Two-dimensional array of strings or numbers to populate table data cells.\n   * @type {Array<(string | number)[]>}\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table.\n   * Use \"horizontal\" for top headers only, \"vertical\" for left headers only,\n   * or \"both\" for both row and column headers.\n   * @type {\"horizontal\" | \"vertical\" | \"both\"}\n   * @default \"horizontal\"\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /**\n   * Enables background styling on horizontal header rows.\n   * When true, applies background color to header cells for better visual distinction.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) headerBackground = false;\n\n  /**\n   * Enables borders around table cells.\n   * When true, displays visible borders between all table cells.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) tableBorder = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Indicates the presence of the default slot.\n   * Used for server-side rendering to determine table structure.\n   * @type {boolean}\n   * @internal\n   * @default false\n   */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  @provide({ context: TableHeaderBackgroundContext })\n  @state()\n  private _headerBackground = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    this._headerBackground = this.headerBackground;\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th><div></div></th>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th><div>${this.columnHeader[index]}</div></th>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th><div>${this.columnHeader[index]}</div></th>\n              ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <div role=\"table\">\n          <slot id=\"table-slot\" class=${classMap({ table: true, \"no-border\": !this.hasDefaultSlot })}></slot>\n\n          ${!this.hasDefaultSlot\n            ? html`<table class=\"table\">\n                ${this._renderTable()}\n              </table>`\n            : \"\"}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","HasSlotController","html","classMap","tableStyle","__decorate","property","provide","TableHeaderBackgroundContext","state"],"mappings":"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"}

package/react/components/Table/sgds-table.js

@@ -169,16 +169,16 @@ __decorate([
     property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SgdsTable.prototype, "headerPosition", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "headerBackground", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "tableBorder", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SgdsTable.prototype, "layout", void 0);
 __decorate([
     property({ type: Boolean })

package/react/components/Table/sgds-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { provide } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Specifies the responsive breakpoint for the table.\n   * Use \"sm\", \"md\", \"lg\", or \"xl\" to create responsive tables up to a particular breakpoint.\n   * From that breakpoint and up, the table will behave normally and not scroll horizontally.\n   * Use \"always\" to make the table always responsive.\n   *\n   * (@deprecated) Deprecated since 3.9.0 legacy from v2\n   * @type {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\"}\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Array of strings to populate row header cells.\n   * @type {string[]}\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Array of strings to populate column header cells.\n   * Only used when `headerPosition` is set to \"vertical\" or \"both\".\n   * @type {string[]}\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Two-dimensional array of strings or numbers to populate table data cells.\n   * @type {Array<(string | number)[]>}\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table.\n   * Use \"horizontal\" for top headers only, \"vertical\" for left headers only,\n   * or \"both\" for both row and column headers.\n   * @type {\"horizontal\" | \"vertical\" | \"both\"}\n   * @default \"horizontal\"\n   */\n  @property({ type: String }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /**\n   * Enables background styling on horizontal header rows.\n   * When true, applies background color to header cells for better visual distinction.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) headerBackground = false;\n\n  /**\n   * Enables borders around table cells.\n   * When true, displays visible borders between all table cells.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) tableBorder = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Indicates the presence of the default slot.\n   * Used for server-side rendering to determine table structure.\n   * @type {boolean}\n   * @internal\n   * @default false\n   */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  @provide({ context: TableHeaderBackgroundContext })\n  @state()\n  private _headerBackground = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    this._headerBackground = this.headerBackground;\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th><div></div></th>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th><div>${this.columnHeader[index]}</div></th>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th><div>${this.columnHeader[index]}</div></th>\n              ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <div role=\"table\">\n          <slot id=\"table-slot\" class=${classMap({ table: true, \"no-border\": !this.hasDefaultSlot })}></slot>\n\n          ${!this.hasDefaultSlot\n            ? html`<table class=\"table\">\n                ${this._renderTable()}\n              </table>`\n            : \"\"}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-table.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { provide } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Specifies the responsive breakpoint for the table.\n   * Use \"sm\", \"md\", \"lg\", or \"xl\" to create responsive tables up to a particular breakpoint.\n   * From that breakpoint and up, the table will behave normally and not scroll horizontally.\n   * Use \"always\" to make the table always responsive.\n   *\n   * (@deprecated) Deprecated since 3.9.0 legacy from v2\n   * @type {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\"}\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Array of strings to populate row header cells.\n   * @type {string[]}\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Array of strings to populate column header cells.\n   * Only used when `headerPosition` is set to \"vertical\" or \"both\".\n   * @type {string[]}\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Two-dimensional array of strings or numbers to populate table data cells.\n   * @type {Array<(string | number)[]>}\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table.\n   * Use \"horizontal\" for top headers only, \"vertical\" for left headers only,\n   * or \"both\" for both row and column headers.\n   * @type {\"horizontal\" | \"vertical\" | \"both\"}\n   * @default \"horizontal\"\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /**\n   * Enables background styling on horizontal header rows.\n   * When true, applies background color to header cells for better visual distinction.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) headerBackground = false;\n\n  /**\n   * Enables borders around table cells.\n   * When true, displays visible borders between all table cells.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) tableBorder = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Indicates the presence of the default slot.\n   * Used for server-side rendering to determine table structure.\n   * @type {boolean}\n   * @internal\n   * @default false\n   */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  @provide({ context: TableHeaderBackgroundContext })\n  @state()\n  private _headerBackground = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    this._headerBackground = this.headerBackground;\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th><div></div></th>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th><div>${this.columnHeader[index]}</div></th>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th><div>${this.columnHeader[index]}</div></th>\n              ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <div role=\"table\">\n          <slot id=\"table-slot\" class=${classMap({ table: true, \"no-border\": !this.hasDefaultSlot })}></slot>\n\n          ${!this.hasDefaultSlot\n            ? html`<table class=\"table\">\n                ${this._renderTable()}\n              </table>`\n            : \"\"}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}