@govtechsg/sgds-web-component 2.0.1 → 2.1.1

package/react/components/Tab/sgds-tab.js

@@ -0,0 +1,110 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './tab.js';
+
+let id = 0;
+/**
+ * @summary Tabs are used within tab group to activate the tab panels
+ *
+ * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`
+ *
+ * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`
+ * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`
+ * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`
+ *
+ * @csspart base - The base wrapper of tab
+ *
+ *
+ */
+class SgdsTab extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**@internal */
+        this.attrId = ++id;
+        /**@internal */
+        this.componentId = `sgds-tab-${this.attrId}`;
+        /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+        this.panel = "";
+        /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */
+        this.active = false;
+        /** Disables the tab and prevents selection. */
+        this.disabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "tab");
+    }
+    /** Sets focus to the tab. */
+    focus(options) {
+        this.tab.focus(options);
+    }
+    /** Removes focus from the tab. */
+    blur() {
+        this.tab.blur();
+    }
+    /**@internal */
+    handleActiveChange() {
+        this.setAttribute("aria-selected", this.active ? "true" : "false");
+    }
+    /**@internal */
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+        if (this.disabled)
+            this.active = false;
+    }
+    render() {
+        // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+        this.id = this.id.length > 0 ? this.id : this.componentId;
+        const parentVariantAttr = this.closest("sgds-tab-group").getAttribute("variant");
+        const tabsInfo = html `
+      <div class="tabs-info-label">
+        <div><slot name="icon"></slot></div>
+        <div><slot name="label"></slot></div>
+      </div>
+      <div class="tabs-info-count"><slot name="count"></slot></div>
+    `;
+        return html `
+      <ul class="list-unstyled">
+        <li part="base" class="nav-item" tabindex=${this.disabled ? "-1" : "0"}>
+          <div
+            class="${classMap({
+            "nav-link": true,
+            [`${parentVariantAttr}`]: parentVariantAttr,
+            active: this.active,
+            disabled: this.disabled
+        })}"
+          >
+            ${parentVariantAttr === "tabs-info-toggle" ? tabsInfo : html `<slot></slot>`}
+          </div>
+        </li>
+      </ul>
+    `;
+    }
+}
+SgdsTab.styles = [css_248z];
+__decorate([
+    query(".nav-item")
+], SgdsTab.prototype, "tab", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsTab.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTab.prototype, "disabled", void 0);
+__decorate([
+    watch("active")
+], SgdsTab.prototype, "handleActiveChange", null);
+__decorate([
+    watch("disabled")
+], SgdsTab.prototype, "handleDisabledChange", null);
+
+export { SgdsTab, SgdsTab as default };
+//# sourceMappingURL=sgds-tab.js.map

package/react/components/Tab/sgds-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-tab.js","sources":["../../../../src/components/Tab/sgds-tab.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabStyle from \"./tab.css\";\n\nlet id = 0;\n/**\n * @summary Tabs are used within tab group to activate the tab panels\n *\n * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`\n *\n * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n *\n * @csspart base - The base wrapper of tab\n *\n *\n */\nexport class SgdsTab extends SgdsElement {\n  static styles = [tabStyle];\n  /**@internal */\n  @query(\".nav-item\") tab: HTMLElement;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-${this.attrId}`;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = \"\";\n\n  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"tab\");\n  }\n\n  /** Sets focus to the tab. */\n  public focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public blur() {\n    this.tab.blur();\n  }\n  /**@internal */\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-selected\", this.active ? \"true\" : \"false\");\n  }\n  /**@internal */\n  @watch(\"disabled\")\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n    if (this.disabled) this.active = false;\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    const parentVariantAttr = this.closest(\"sgds-tab-group\").getAttribute(\"variant\");\n    const tabsInfo = html`\n      <div class=\"tabs-info-label\">\n        <div><slot name=\"icon\"></slot></div>\n        <div><slot name=\"label\"></slot></div>\n      </div>\n      <div class=\"tabs-info-count\"><slot name=\"count\"></slot></div>\n    `;\n    return html`\n      <ul class=\"list-unstyled\">\n        <li part=\"base\" class=\"nav-item\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              [`${parentVariantAttr}`]: parentVariantAttr,\n              active: this.active,\n              disabled: this.disabled\n            })}\"\n          >\n            ${parentVariantAttr === \"tabs-info-toggle\" ? tabsInfo : html`<slot></slot>`}\n          </div>\n        </li>\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsTab;\n"],"names":["tabStyle"],"mappings":"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"}

package/{components → react/components}/Tab/tab-group.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Tab/tab-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"tab-group.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Tab/tab-group.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.nav{display:flex;flex-wrap:wrap;list-style:none;margin-bottom:0;padding-left:0}.nav-tabs{border-bottom:none;gap:2rem}.sgds.nav-tabs[variant=tabs-basic-toggle]{gap:0}slot[name=nav][variant=tabs-basic-toggle]::slotted(sgds-tab){margin-left:-2px}`;
+
+export { css_248z as default };
+//# sourceMappingURL=tab-group.js.map

package/react/components/Tab/tab-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Tab/tab-panel.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Tab/tab-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"tab-panel.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Tab/tab-panel.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--tab-panel-padding-y:1rem;display:block}.tab-panel{display:block;padding:var(--tab-panel-padding-y) 0}.tab-panel:not(.tab-panel--active){display:none}`;
+
+export { css_248z as default };
+//# sourceMappingURL=tab-panel.js.map

package/react/components/Tab/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Tab/tab.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Tab/tab.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"tab.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Tab/tab.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{display:inline-block}ul{margin-bottom:1rem;margin-top:0;padding-left:0}.list-unstyled{list-style:none}.nav-link{color:var(--sgds-body-color);cursor:pointer;display:block;padding:.5rem 1rem;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link.tabs-info-toggle{background-color:var(--sgds-body-bg);border:1px solid var(--sgds-gray-400);border-radius:.3125rem;min-width:11.875rem;padding:.75rem}.nav-link:not(.disabled).tabs-info-toggle.active,.nav-link:not(.disabled).tabs-info-toggle:hover{border-color:var(--sgds-primary);color:var(--sgds-primary);font-weight:700}.nav-link.tabs-info-toggle .tabs-info-label{display:flex;justify-content:space-between;text-align:right}.nav-link.tabs-info-toggle .tabs-info-count{text-align:right}.nav-link.tabs-basic-toggle{background-color:var(--sgds-body-bg);border:1px solid var(--sgds-gray-400);border-radius:0;padding:.5rem 1.5rem}.nav-link.tabs-basic-toggle slot{align-items:center;display:flex;gap:1rem}.nav-link:not(.disabled).tabs-basic-toggle.active,.nav-link:not(.disabled).tabs-basic-toggle:hover{background-color:var(--sgds-info);color:var(--sgds-white)}.nav-link.disabled{background-color:var(--sgds-gray-200);border-color:var(--sgds-gray-400);color:var(--sgds-gray-400);cursor:not-allowed}.nav-link:not(.tabs-basic-toggle):not(.tabs-info-toggle){background-color:transparent;border:none;padding-left:0;padding-right:0;padding-top:0}.nav-link:not(.disabled):not(.tabs-basic-toggle):not(.tabs-info-toggle).active,.nav-link:not(.disabled):not(.tabs-basic-toggle):not(.tabs-info-toggle):hover{background-color:transparent;border-bottom:.125rem solid var(--sgds-info);font-weight:700}.nav-link:not(.tabs-basic-toggle):not(.tabs-info-toggle).disabled{background-color:var(--sgds-gray-200);background-color:transparent;border-color:var(--sgds-gray-400);color:var(--sgds-gray-400);cursor:not-allowed}`;
+
+export { css_248z as default };
+//# sourceMappingURL=tab.js.map

package/react/components/Tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Table/sgds-table.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -0,0 +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\";\nimport tableStyle from \"./table.css\";\n/**\n * @summary The use of a table is to organise a collections of data into readable rows\n *\n * @cssproperty --table-bg - Table's background color\n * @cssproperty --table-accent-bg - Table's accent background color\n * @cssproperty --table-striped-color - Text color for striped table\n * @cssproperty --table-striped-bg - Background color for striped table\n * @cssproperty --table-active-color - Active text color for hovered row\n * @cssproperty --table-active-bg - Active background color for hovered row\n * @cssproperty --table-hover-color - Hovered text color for hover table\n * @cssproperty --table-hover-bg - Hovered background color for hover table\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Adds zebra-striping using striped to table row within the <tbody>\n   */\n  @property({ type: Boolean, reflect: true }) striped = false;\n\n  /**\n   * Add borders to all sides of table and cells\n   */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /**\n   * Remove all borders to table and cells\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Add hoverable state on table rows\n   */\n  @property({ type: Boolean, reflect: true }) hover = false;\n\n  /**\n   * Add <code>.table-sm</code> to make table more compact\n   */\n  @property({ type: String, reflect: true }) size: string;\n\n  /**\n   * Use contextual classes to add colors to table\n   */\n  @property({ type: String, reflect: true }) variant: string;\n\n  /**\n   * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.\n   */\n  @property({ type: Boolean, reflect: true }) sort = false;\n\n  /**\n   * When removableSort is present, the third click removes the sorting from the column.\n   */\n  @property({ type: Boolean, reflect: true }) removableSort = false;\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate header cells using Arrays\n   */\n  @property({ type: Array }) tableHeaders: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /** @internal */\n  @state() sortColumn: number | null = null;\n\n  /** @internal */\n  @state() sortAsc = true;\n\n  //TODO aria-sort\n\n  /** @internal */\n  @state() activeColumn: number | null = null;\n\n  /** @internal */\n  @state() sortClickCount = 0;\n\n  /** @internal */\n  @state() clickCount = 0;\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  handleHeaderClick(columnIndex: number) {\n    if (this.sort) {\n      if (this.sortColumn === columnIndex) {\n        this.sortAsc = !this.sortAsc;\n      } else {\n        this.sortColumn = columnIndex;\n        this.sortAsc = true;\n      }\n\n      this.tableData = [...this.tableData].sort((a, b) => {\n        const aValue = a[columnIndex];\n        const bValue = b[columnIndex];\n\n        if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n          return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);\n        } else {\n          return this.sortAsc ? (aValue as number) - (bValue as number) : (bValue as number) - (aValue as number);\n        }\n      });\n\n      // update the active column\n      if (this.activeColumn === columnIndex) {\n        this.clickCount++;\n        if (this.clickCount === 3 && this.removableSort) {\n          this.activeColumn = null;\n          this.clickCount = 0;\n          this.tableData = [...this.originalTableData];\n        }\n      } else {\n        this.activeColumn = columnIndex;\n        this.clickCount = 1;\n      }\n\n      // add the .active class to the clicked header cell\n      const thElements = this.shadowRoot?.querySelectorAll(\"th\");\n      thElements.forEach((thElement, index) => {\n        if (index === columnIndex) {\n          thElement.classList.add(\"active\");\n        } else {\n          thElement.classList.remove(\"active\");\n        }\n      });\n    }\n  }\n\n  getIcon(columnIndex: number) {\n    if (this.activeColumn !== columnIndex) {\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-arrow-down-up ms-2 align-self-center\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z\"\n        />\n      </svg>`;\n    } else {\n      return this.sortAsc\n        ? html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-up-alt ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z\"\n            />\n          </svg>`\n        : html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-down ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z\"\n            />\n          </svg>`;\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        <table\n          class=\"table sgds ${classMap({\n            [`table-striped`]: this.striped,\n            [`table-bordered`]: this.bordered,\n            [`table-borderless`]: this.borderless,\n            [`table-hover`]: this.hover,\n            [`table-${this.size}`]: this.size,\n            [`table-${this.variant}`]: this.variant\n          })}\"\n        >\n          <thead>\n            <tr>\n              ${this.tableHeaders.map(\n                (header: string, index: number) => html`\n                  <th\n                    class=\"${classMap({\n                      \"sortable-header\": this.sort,\n                      active: this.activeColumn === index\n                    })}\"\n                    @click=${() => this.handleHeaderClick(index)}\n                    //TODO aria-sort \n                  >\n                    ${header} ${this.sort ? this.getIcon(index) : null}\n                  </th>\n                `\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.tableData.map(\n              row => html`\n                <tr>\n                  ${row.map((cell: string) => html`<td>${cell}</td>`)}\n                </tr>\n              `\n            )}\n          </tbody>\n        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","html","classMap","tableStyle","__decorate","property","state"],"mappings":"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"}

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

@@ -0,0 +1,267 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './table.js';
+
+/**
+ * @summary The use of a table is to organise a collections of data into readable rows
+ *
+ * @cssproperty --table-bg - Table's background color
+ * @cssproperty --table-accent-bg - Table's accent background color
+ * @cssproperty --table-striped-color - Text color for striped table
+ * @cssproperty --table-striped-bg - Background color for striped table
+ * @cssproperty --table-active-color - Active text color for hovered row
+ * @cssproperty --table-active-bg - Active background color for hovered row
+ * @cssproperty --table-hover-color - Hovered text color for hover table
+ * @cssproperty --table-hover-bg - Hovered background color for hover table
+ */
+class SgdsTable extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Adds zebra-striping using striped to table row within the <tbody>
+         */
+        this.striped = false;
+        /**
+         * Add borders to all sides of table and cells
+         */
+        this.bordered = false;
+        /**
+         * Remove all borders to table and cells
+         */
+        this.borderless = false;
+        /**
+         * Add hoverable state on table rows
+         */
+        this.hover = false;
+        /**
+         * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.
+         */
+        this.sort = false;
+        /**
+         * When removableSort is present, the third click removes the sorting from the column.
+         */
+        this.removableSort = false;
+        /**
+         * Populate header cells using Arrays
+         */
+        this.tableHeaders = [];
+        /**
+         * Populate data cells using Arrays
+         */
+        this.tableData = [];
+        /** @internal */
+        this.sortColumn = null;
+        /** @internal */
+        this.sortAsc = true;
+        //TODO aria-sort
+        /** @internal */
+        this.activeColumn = null;
+        /** @internal */
+        this.sortClickCount = 0;
+        /** @internal */
+        this.clickCount = 0;
+        /** @internal */
+        this.originalTableData = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.originalTableData = [...this.tableData];
+    }
+    handleHeaderClick(columnIndex) {
+        var _a;
+        if (this.sort) {
+            if (this.sortColumn === columnIndex) {
+                this.sortAsc = !this.sortAsc;
+            }
+            else {
+                this.sortColumn = columnIndex;
+                this.sortAsc = true;
+            }
+            this.tableData = [...this.tableData].sort((a, b) => {
+                const aValue = a[columnIndex];
+                const bValue = b[columnIndex];
+                if (typeof aValue === "string" && typeof bValue === "string") {
+                    return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+                }
+                else {
+                    return this.sortAsc ? aValue - bValue : bValue - aValue;
+                }
+            });
+            // update the active column
+            if (this.activeColumn === columnIndex) {
+                this.clickCount++;
+                if (this.clickCount === 3 && this.removableSort) {
+                    this.activeColumn = null;
+                    this.clickCount = 0;
+                    this.tableData = [...this.originalTableData];
+                }
+            }
+            else {
+                this.activeColumn = columnIndex;
+                this.clickCount = 1;
+            }
+            // add the .active class to the clicked header cell
+            const thElements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("th");
+            thElements.forEach((thElement, index) => {
+                if (index === columnIndex) {
+                    thElement.classList.add("active");
+                }
+                else {
+                    thElement.classList.remove("active");
+                }
+            });
+        }
+    }
+    getIcon(columnIndex) {
+        if (this.activeColumn !== columnIndex) {
+            return html `<svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-arrow-down-up ms-2 align-self-center"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"
+        />
+      </svg>`;
+        }
+        else {
+            return this.sortAsc
+                ? html `<svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-sort-up-alt ms-2 align-self-center"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z"
+            />
+          </svg>`
+                : html `<svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-sort-down ms-2 align-self-center"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"
+            />
+          </svg>`;
+        }
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            "table-responsive": this.responsive === "always",
+            "table-responsive-sm": this.responsive === "sm",
+            "table-responsive-md": this.responsive === "md",
+            "table-responsive-lg": this.responsive === "lg",
+            "table-responsive-xl": this.responsive === "xl"
+        })}
+        tabindex="0"
+      >
+        <table
+          class="table sgds ${classMap({
+            [`table-striped`]: this.striped,
+            [`table-bordered`]: this.bordered,
+            [`table-borderless`]: this.borderless,
+            [`table-hover`]: this.hover,
+            [`table-${this.size}`]: this.size,
+            [`table-${this.variant}`]: this.variant
+        })}"
+        >
+          <thead>
+            <tr>
+              ${this.tableHeaders.map((header, index) => html `
+                  <th
+                    class="${classMap({
+            "sortable-header": this.sort,
+            active: this.activeColumn === index
+        })}"
+                    @click=${() => this.handleHeaderClick(index)}
+                    //TODO aria-sort 
+                  >
+                    ${header} ${this.sort ? this.getIcon(index) : null}
+                  </th>
+                `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.tableData.map(row => html `
+                <tr>
+                  ${row.map((cell) => html `<td>${cell}</td>`)}
+                </tr>
+              `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+    }
+}
+SgdsTable.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTable.prototype, "striped", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTable.prototype, "bordered", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTable.prototype, "borderless", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTable.prototype, "hover", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsTable.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsTable.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTable.prototype, "sort", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTable.prototype, "removableSort", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsTable.prototype, "responsive", void 0);
+__decorate([
+    property({ type: Array })
+], SgdsTable.prototype, "tableHeaders", void 0);
+__decorate([
+    property({ type: Array })
+], SgdsTable.prototype, "tableData", void 0);
+__decorate([
+    state()
+], SgdsTable.prototype, "sortColumn", void 0);
+__decorate([
+    state()
+], SgdsTable.prototype, "sortAsc", void 0);
+__decorate([
+    state()
+], SgdsTable.prototype, "activeColumn", void 0);
+__decorate([
+    state()
+], SgdsTable.prototype, "sortClickCount", void 0);
+__decorate([
+    state()
+], SgdsTable.prototype, "clickCount", void 0);
+__decorate([
+    state()
+], SgdsTable.prototype, "originalTableData", void 0);
+
+export { SgdsTable, SgdsTable as default };
+//# sourceMappingURL=sgds-table.js.map

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

@@ -0,0 +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\";\nimport tableStyle from \"./table.css\";\n/**\n * @summary The use of a table is to organise a collections of data into readable rows\n *\n * @cssproperty --table-bg - Table's background color\n * @cssproperty --table-accent-bg - Table's accent background color\n * @cssproperty --table-striped-color - Text color for striped table\n * @cssproperty --table-striped-bg - Background color for striped table\n * @cssproperty --table-active-color - Active text color for hovered row\n * @cssproperty --table-active-bg - Active background color for hovered row\n * @cssproperty --table-hover-color - Hovered text color for hover table\n * @cssproperty --table-hover-bg - Hovered background color for hover table\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Adds zebra-striping using striped to table row within the <tbody>\n   */\n  @property({ type: Boolean, reflect: true }) striped = false;\n\n  /**\n   * Add borders to all sides of table and cells\n   */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /**\n   * Remove all borders to table and cells\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Add hoverable state on table rows\n   */\n  @property({ type: Boolean, reflect: true }) hover = false;\n\n  /**\n   * Add <code>.table-sm</code> to make table more compact\n   */\n  @property({ type: String, reflect: true }) size: string;\n\n  /**\n   * Use contextual classes to add colors to table\n   */\n  @property({ type: String, reflect: true }) variant: string;\n\n  /**\n   * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.\n   */\n  @property({ type: Boolean, reflect: true }) sort = false;\n\n  /**\n   * When removableSort is present, the third click removes the sorting from the column.\n   */\n  @property({ type: Boolean, reflect: true }) removableSort = false;\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate header cells using Arrays\n   */\n  @property({ type: Array }) tableHeaders: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /** @internal */\n  @state() sortColumn: number | null = null;\n\n  /** @internal */\n  @state() sortAsc = true;\n\n  //TODO aria-sort\n\n  /** @internal */\n  @state() activeColumn: number | null = null;\n\n  /** @internal */\n  @state() sortClickCount = 0;\n\n  /** @internal */\n  @state() clickCount = 0;\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  handleHeaderClick(columnIndex: number) {\n    if (this.sort) {\n      if (this.sortColumn === columnIndex) {\n        this.sortAsc = !this.sortAsc;\n      } else {\n        this.sortColumn = columnIndex;\n        this.sortAsc = true;\n      }\n\n      this.tableData = [...this.tableData].sort((a, b) => {\n        const aValue = a[columnIndex];\n        const bValue = b[columnIndex];\n\n        if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n          return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);\n        } else {\n          return this.sortAsc ? (aValue as number) - (bValue as number) : (bValue as number) - (aValue as number);\n        }\n      });\n\n      // update the active column\n      if (this.activeColumn === columnIndex) {\n        this.clickCount++;\n        if (this.clickCount === 3 && this.removableSort) {\n          this.activeColumn = null;\n          this.clickCount = 0;\n          this.tableData = [...this.originalTableData];\n        }\n      } else {\n        this.activeColumn = columnIndex;\n        this.clickCount = 1;\n      }\n\n      // add the .active class to the clicked header cell\n      const thElements = this.shadowRoot?.querySelectorAll(\"th\");\n      thElements.forEach((thElement, index) => {\n        if (index === columnIndex) {\n          thElement.classList.add(\"active\");\n        } else {\n          thElement.classList.remove(\"active\");\n        }\n      });\n    }\n  }\n\n  getIcon(columnIndex: number) {\n    if (this.activeColumn !== columnIndex) {\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-arrow-down-up ms-2 align-self-center\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z\"\n        />\n      </svg>`;\n    } else {\n      return this.sortAsc\n        ? html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-up-alt ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z\"\n            />\n          </svg>`\n        : html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-down ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z\"\n            />\n          </svg>`;\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        <table\n          class=\"table sgds ${classMap({\n            [`table-striped`]: this.striped,\n            [`table-bordered`]: this.bordered,\n            [`table-borderless`]: this.borderless,\n            [`table-hover`]: this.hover,\n            [`table-${this.size}`]: this.size,\n            [`table-${this.variant}`]: this.variant\n          })}\"\n        >\n          <thead>\n            <tr>\n              ${this.tableHeaders.map(\n                (header: string, index: number) => html`\n                  <th\n                    class=\"${classMap({\n                      \"sortable-header\": this.sort,\n                      active: this.activeColumn === index\n                    })}\"\n                    @click=${() => this.handleHeaderClick(index)}\n                    //TODO aria-sort \n                  >\n                    ${header} ${this.sort ? this.getIcon(index) : null}\n                  </th>\n                `\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.tableData.map(\n              row => html`\n                <tr>\n                  ${row.map((cell: string) => html`<td>${cell}</td>`)}\n                </tr>\n              `\n            )}\n          </tbody>\n        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}

package/{components → react/components}/Table/table.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Table/table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"table.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Table/table.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--table-bg:transparent;--table-accent-bg:transparent;--table-striped-color:var(--sgds-gray-600);--table-striped-bg:rgba(0,0,0,.05);--table-active-color:var(--sgds-gray-600);--table-active-bg:rgba(0,0,0,.1);--table-hover-color:var(--sgds-gray-600);--table-hover-bg:rgba(0,0,0,.075)}tbody,td,th,thead,tr{border:0 solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{--sgds-table-color-type:initial;--sgds-table-bg-type:initial;--sgds-table-color-state:initial;--sgds-table-bg-state:initial;--sgds-table-color:var(--sgds-emphasis-color);--sgds-table-bg:var(--table-bg);--sgds-table-border-color:var(--sgds-border-color);--sgds-table-accent-bg:var(--table-accent-bg);--sgds-table-striped-color:var(--table-striped-color);--sgds-table-striped-bg:var(--table-striped-bg);--sgds-table-active-color:var(--table-striped-color);--sgds-table-active-bg:rgba(0,0,0,.1);--sgds-table-hover-color:var(--table-striped-color);--sgds-table-hover-bg:rgba(0,0,0,.075);border-color:var(--sgds-table-border-color);margin-bottom:1rem;vertical-align:top;width:100%}.table>:not(caption)>*>*{background-color:var(--sgds-table-bg);border-bottom-width:var(--sgds-border-width);box-shadow:inset 0 0 0 9999px var(--sgds-table-bg-state,var(--sgds-table-bg-type,var(--sgds-table-accent-bg)));color:var(--sgds-table-color-state,var(--sgds-table-color-type,var(--sgds-table-color)));padding:1rem}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table-sm>:not(caption)>*>*{padding:.5rem}.table-bordered>:not(caption)>*{border-width:var(--sgds-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 var(--sgds-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table>:not(:first-child){border-top:2px solid}.table-borderless>:not(:first-child){border-top-width:0}.table-striped-columns>:not(caption)>tr>:nth-child(2n),.table-striped>tbody>tr:nth-of-type(odd)>*{--sgds-table-color-type:var(--sgds-table-striped-color);--sgds-table-bg-type:var(--sgds-table-striped-bg)}.table-active{--sgds-table-color-state:var(--sgds-table-active-color);--sgds-table-bg-state:var(--sgds-table-active-bg)}.table-hover>tbody>tr:hover>*{--sgds-table-color-state:var(--sgds-table-hover-color);--sgds-table-bg-state:var(--sgds-table-hover-bg)}.table-light{--sgds-table-color:#000;--sgds-table-bg:#b1b1b1;--sgds-table-border-color:#9f9f9f;--sgds-table-striped-bg:#a8a8a8;--sgds-table-striped-color:#000;--sgds-table-active-bg:#9f9f9f;--sgds-table-active-color:#000;--sgds-table-hover-bg:#a4a4a4;--sgds-table-hover-color:#000}.table-dark,.table-light{border-color:var(--sgds-table-border-color);color:var(--sgds-table-color)}.table-dark{--sgds-table-color:#fff;--sgds-table-bg:#252525;--sgds-table-border-color:#3b3b3b;--sgds-table-striped-bg:#303030;--sgds-table-striped-color:#fff;--sgds-table-active-bg:#3b3b3b;--sgds-table-active-color:#fff;--sgds-table-hover-bg:#353535;--sgds-table-hover-color:#fff}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}.sgds.table{font-size:1rem}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}@media (min-width:576px){.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}}@media (min-width:768px){.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}}@media (min-width:992px){.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}}@media (min-width:1200px){.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}}@media (min-width:1400px){.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}}@media print{.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}}.sortable-header{cursor:pointer}`;
+
+export { css_248z as default };
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Textarea/sgds-textarea.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/Textarea/sgds-textarea.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-textarea.cjs.js","sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { property, query } 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 SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\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 textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n */\nexport class SgdsTextarea extends SgdsElement implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's label */\n  @property({ type: String, reflect: true }) label = \"label\";\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the textarea. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the textarea a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: String, reflect: true }) autocorrect: string;\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  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** @internal The textarea's unique id */\n  private textareaId = genId(\"textarea\", \"input\");\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n    this.updateComplete.then(() => {\n      this.setTextareaHeight();\n      this.resizeObserver.observe(this.textarea);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this.textarea);\n  }\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.textarea.reportValidity();\n  }\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  handleChange(event: string) {\n    this.value = this.textarea.value;\n    this.emit(event);\n  }\n\n  handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\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.textarea.disabled = this.disabled;\n    this.invalid = !this.textarea.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    this.invalid = !this.textarea.checkValidity();\n    this.updateComplete.then(() => this.setTextareaHeight());\n  }\n\n  render() {\n    // if maxlength is defined\n    const wordCount = html` <div class=\"form-text\">${this.value.length}/${this.maxlength}</div> `;\n\n    return html`\n      <div class=\"text-area-label-wrapper\">\n        <label for=${this.textareaId} class=\"form-label\">${this.label}</label>\n        ${this.maxlength > 0 ? wordCount : undefined}\n      </div>\n\n      <textarea\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid,\n          \"textarea-resize-none\": this.resize === \"none\",\n          \"textarea-resize-vertical\": this.resize === \"vertical\",\n          \"textarea-resize-auto\": this.resize === \"auto\"\n        })}\n        id=${this.textareaId}\n        name=${ifDefined(this.name)}\n        rows=${ifDefined(this.rows)}\n        placeholder=${ifDefined(this.placeholder)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        .value=${live(this.value)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        spellcheck=${ifDefined(this.spellcheck)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        ?autofocus=${this.autofocus}\n        autocorrect=${ifDefined(this.autocorrect)}\n        inputmode=${ifDefined(this.inputmode)}\n        @keyup=${this.handleValueChange}\n        @input=${() => this.handleChange(\"sgds-input\")}\n        @change=${() => this.handleChange(\"sgds-change\")}\n        @invalid=${(e: Event) => this.handleInvalid(e)}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n      </textarea>\n\n      ${this.hasFeedback\n        ? html`<div id=\"${this.textareaId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n        : \"\"}\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","feedbackStyles","formHintStyles","formLabelStyles","textareaStyle","__decorate","query","property","defaultValue","watch"],"mappings":"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"}