@sebgroup/green-core 2.19.0 → 2.20.0-rc.20251215154321804

package/components/pagination/pagination.component.js

@@ -0,0 +1,441 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _GdsPagination_instances, pageCount_get, config_get, getVisiblePages_fn, renderPageButton_fn, renderPageButtons_fn, renderJumpFirstButton_fn, renderPreviousButton_fn, renderNextButton_fn, renderJumpLastButton_fn, renderNavigationControls_fn, renderPageSizeOption_fn, renderPageSizeMenu_fn, renderLabel_fn, handlePageChange_fn, handlePageSizeMenuClick_fn, handlePopoverStateChange_fn, handleCustomPageInput_fn;
+import { localized, msg } from "@lit/localize";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from "lit/directives/when.js";
+import { GdsElement } from "../../gds-element.js";
+import { tokens } from "../../tokens.style.js";
+import { watchMediaQuery } from "../../utils/decorators/index.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsButton } from "../button/button.component.js";
+import {
+  GdsContextMenu,
+  GdsMenuItem
+} from "../context-menu/context-menu.component.js";
+import { GdsDropdown } from "../dropdown/dropdown.component.js";
+import { IconChevronBottom } from "../icon/icons/chevron-bottom.component.js";
+import { IconChevronDoubleLeft } from "../icon/icons/chevron-double-left.component.js";
+import { IconChevronDoubleRight } from "../icon/icons/chevron-double-right.component.js";
+import { IconChevronLeftSmall } from "../icon/icons/chevron-left-small.component.js";
+import { IconChevronRightSmall } from "../icon/icons/chevron-right-small.component.js";
+import { IconChevronRight } from "../icon/icons/chevron-right.component.js";
+import { GdsInput } from "../input/input.component.js";
+import { GdsPopover } from "../popover/popover.component.js";
+import { GdsText } from "../text/text.component.js";
+import { PaginationStyles } from "./pagination.styles.js";
+const DENSITY_CONFIG = {
+  compact: {
+    button: "small",
+    font: "detail-book-s",
+    gap: "xl",
+    navGap: "xs",
+    input: "small",
+    inputWidth: "140px",
+    inputPadding: "m"
+  },
+  comfortable: {
+    button: "small",
+    font: "detail-book-s",
+    gap: "2xl",
+    navGap: "s",
+    input: "small",
+    inputWidth: "140px",
+    inputPadding: "m"
+  },
+  spacious: {
+    button: "medium",
+    font: "detail-book-m",
+    gap: "2xl",
+    navGap: "s",
+    input: "large",
+    inputWidth: "200px",
+    inputPadding: "xl"
+  }
+};
+let GdsPagination = class extends withMarginProps(
+  withSizeXProps(withLayoutChildProps(GdsElement))
+) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _GdsPagination_instances);
+    this.page = 1;
+    this.rows = 10;
+    this.total = 0;
+    this.options = [5, 10, 25, 50];
+    this.jump = false;
+    this.density = "comfortable";
+    this.label = "";
+    this._isMobile = false;
+    this._jumpPopoverOpen = false;
+  }
+  _handleMobile(matches) {
+    this._isMobile = matches;
+  }
+  render() {
+    return html`
+      <gds-flex
+        align-items="center"
+        justify-content="space-between"
+        width="100%"
+        gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}"
+      >
+        ${__privateMethod(this, _GdsPagination_instances, renderLabel_fn).call(this)}
+        <gds-flex aling-items="center" gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}" flex="1">
+          ${[__privateMethod(this, _GdsPagination_instances, renderNavigationControls_fn).call(this), __privateMethod(this, _GdsPagination_instances, renderPageSizeMenu_fn).call(this)]}
+        </gds-flex>
+      </gds-flex>
+    `;
+  }
+};
+_GdsPagination_instances = new WeakSet();
+pageCount_get = function() {
+  return Math.ceil(this.total / this.rows);
+};
+config_get = function() {
+  return DENSITY_CONFIG[this.density];
+};
+getVisiblePages_fn = function(pageCount) {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, i) => i + 1);
+  }
+  const lastPage = pageCount;
+  const pages = [];
+  pages.push(1);
+  if (this.page <= 4) {
+    pages.push(2, 3, 4, 5, "...", lastPage);
+  } else if (this.page >= pageCount - 3) {
+    pages.push(
+      "...",
+      pageCount - 4,
+      pageCount - 3,
+      pageCount - 2,
+      pageCount - 1,
+      lastPage
+    );
+  } else {
+    pages.push(
+      "...",
+      this.page - 1,
+      this.page,
+      this.page + 1,
+      "...",
+      lastPage
+    );
+  }
+  return pages;
+};
+renderPageButton_fn = function(page) {
+  if (page === "...") {
+    return html`
+        <gds-popover
+          disableMobileStyles
+          @gds-ui-state=${__privateMethod(this, _GdsPagination_instances, handlePopoverStateChange_fn)}
+        >
+          <gds-button
+            size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+            rank="tertiary"
+            slot="trigger"
+            label="${msg("Jump to page")}"
+            aria-expanded="${this._jumpPopoverOpen}"
+            aria-haspopup="dialog"
+          >
+            ...
+          </gds-button>
+          <gds-flex
+            flex-direction="column"
+            padding="${__privateGet(this, _GdsPagination_instances, config_get).inputPadding}"
+            width="${__privateGet(this, _GdsPagination_instances, config_get).inputWidth}"
+            max-height="280px"
+          >
+            <gds-input
+              size="${__privateGet(this, _GdsPagination_instances, config_get).input}"
+              label="${msg("Go to page")}"
+              type="number"
+              min="1"
+              max="${__privateGet(this, _GdsPagination_instances, pageCount_get)}"
+              @change=${__privateMethod(this, _GdsPagination_instances, handleCustomPageInput_fn)}
+            >
+              <gds-button
+                size="xs"
+                label="${msg("Go")}"
+                rank="secondary"
+                @click=${__privateMethod(this, _GdsPagination_instances, handleCustomPageInput_fn)}
+                slot="trail"
+              >
+                <gds-icon-chevron-right></gds-icon-chevron-right>
+              </gds-button>
+            </gds-input>
+          </gds-flex>
+        </gds-popover>
+      `;
+  }
+  const pageNum = page;
+  const isActive = this.page === pageNum;
+  const currentPageLabel = `${msg("Current page")}, ${msg("page")} ${pageNum}`;
+  const goToPageLabel = `${msg("Go to page")} ${pageNum}`;
+  const label = isActive ? currentPageLabel : goToPageLabel;
+  return html`
+      <gds-button
+        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+        rank="${isActive ? "primary" : "tertiary"}"
+        label="${label}"
+        aria-current="${isActive ? "page" : "false"}"
+        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, pageNum)}
+      >
+        ${pageNum}
+      </gds-button>
+    `;
+};
+renderPageButtons_fn = function() {
+  const pageCount = __privateGet(this, _GdsPagination_instances, pageCount_get);
+  const visiblePages = __privateMethod(this, _GdsPagination_instances, getVisiblePages_fn).call(this, pageCount);
+  return html`${visiblePages.map((page) => __privateMethod(this, _GdsPagination_instances, renderPageButton_fn).call(this, page))}`;
+};
+renderJumpFirstButton_fn = function() {
+  return html`
+      <gds-button
+        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+        rank="secondary"
+        label="${msg("Go to first page")}"
+        ?disabled=${this.page === 1}
+        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, 1)}
+      >
+        <gds-icon-chevron-double-left size="l"></gds-icon-chevron-double-left>
+      </gds-button>
+    `;
+};
+renderPreviousButton_fn = function() {
+  return html`
+      <gds-button
+        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+        rank="secondary"
+        label="${msg("Go to previous page")}"
+        ?disabled=${this.page === 1}
+        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, this.page - 1)}
+      >
+        <gds-icon-chevron-left-small size="l"></gds-icon-chevron-left-small>
+      </gds-button>
+    `;
+};
+renderNextButton_fn = function() {
+  const pageCount = __privateGet(this, _GdsPagination_instances, pageCount_get);
+  return html`
+      <gds-button
+        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+        rank="secondary"
+        label="${msg("Go to next page")}"
+        ?disabled=${this.page === pageCount}
+        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, this.page + 1)}
+      >
+        <gds-icon-chevron-right-small size="l"></gds-icon-chevron-right-small>
+      </gds-button>
+    `;
+};
+renderJumpLastButton_fn = function() {
+  const pageCount = __privateGet(this, _GdsPagination_instances, pageCount_get);
+  return html`
+      <gds-button
+        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+        rank="secondary"
+        label="${msg("Go to last page")}"
+        ?disabled=${this.page === pageCount}
+        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, pageCount)}
+      >
+        <gds-icon-chevron-double-right size="l"></gds-icon-chevron-double-right>
+      </gds-button>
+    `;
+};
+renderNavigationControls_fn = function() {
+  return html`
+      <gds-flex
+        gap="${__privateGet(this, _GdsPagination_instances, config_get).navGap}"
+        align-items="center"
+        class="navigation-controls"
+        justify-content="center; m{flex-end}"
+        flex="1"
+      >
+        ${[
+    when(this.jump, () => __privateMethod(this, _GdsPagination_instances, renderJumpFirstButton_fn).call(this)),
+    __privateMethod(this, _GdsPagination_instances, renderPreviousButton_fn).call(this)
+  ]}
+        <gds-flex gap="4xs" align-items="center">
+          ${__privateMethod(this, _GdsPagination_instances, renderPageButtons_fn).call(this)}
+        </gds-flex>
+        ${[
+    __privateMethod(this, _GdsPagination_instances, renderNextButton_fn).call(this),
+    when(this.jump, () => __privateMethod(this, _GdsPagination_instances, renderJumpLastButton_fn).call(this))
+  ]}
+      </gds-flex>
+    `;
+};
+renderPageSizeOption_fn = function(size) {
+  const isSelected = this.rows === size;
+  return html`
+      <gds-menu-item
+        data-value=${size}
+        class=${classMap({ selected: isSelected })}
+        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+      >
+        ${size}
+      </gds-menu-item>
+    `;
+};
+renderPageSizeMenu_fn = function() {
+  if (this._isMobile) return null;
+  const rowsLabel = `${msg("Rows per page")}, ${this.rows} ${msg("selected")}`;
+  return html`
+      <gds-flex align-items="center" gap="s">
+        <gds-text
+          font="${__privateGet(this, _GdsPagination_instances, config_get).font}"
+          color="neutral-01"
+          id="rows-per-page-label"
+        >
+          ${msg("Rows per page")}
+        </gds-text>
+        <gds-context-menu @gds-menu-item-click=${__privateMethod(this, _GdsPagination_instances, handlePageSizeMenuClick_fn)}>
+          <gds-button
+            slot="trigger"
+            size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
+            rank="secondary"
+            label="${rowsLabel}"
+            aria-labelledby="rows-per-page-label"
+          >
+            ${this.rows}
+            <gds-icon-chevron-bottom
+              slot="trail"
+              size="m"
+            ></gds-icon-chevron-bottom>
+          </gds-button>
+          ${this.options.map((size) => __privateMethod(this, _GdsPagination_instances, renderPageSizeOption_fn).call(this, size))}
+        </gds-context-menu>
+      </gds-flex>
+    `;
+};
+renderLabel_fn = function() {
+  if (this._isMobile || !this.label) return null;
+  return html`
+      <gds-text
+        font="${__privateGet(this, _GdsPagination_instances, config_get).font}"
+        color="neutral-02"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        ${this.label}
+      </gds-text>
+    `;
+};
+handlePageChange_fn = function(newPage) {
+  this.dispatchEvent(
+    new CustomEvent("gds-page-change", {
+      detail: { page: newPage },
+      bubbles: true
+    })
+  );
+};
+handlePageSizeMenuClick_fn = function(e) {
+  const item = e.target;
+  const limit = parseInt(item.dataset.value || "10");
+  if (limit !== this.rows) {
+    this.dispatchEvent(
+      new CustomEvent("gds-rows-change", {
+        detail: { rows: limit },
+        bubbles: true
+      })
+    );
+  }
+};
+handlePopoverStateChange_fn = function(e) {
+  this._jumpPopoverOpen = e.detail.open;
+  if (e.detail.open) {
+    const popover = e.target;
+    const input = popover.querySelector("gds-input");
+    if (input) {
+      requestAnimationFrame(() => {
+        input.focus();
+      });
+    }
+  }
+};
+handleCustomPageInput_fn = function(e) {
+  const input = e.target;
+  const pageInput = input.closest("gds-input");
+  if (pageInput) {
+    const pageNum = parseInt(pageInput.value, 10);
+    if (pageNum && pageNum >= 1 && pageNum <= __privateGet(this, _GdsPagination_instances, pageCount_get)) {
+      __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, pageNum);
+      const popover = pageInput.closest("gds-popover");
+      if (popover) popover.hide();
+    }
+  }
+};
+GdsPagination.styles = [tokens, PaginationStyles];
+__decorateClass([
+  property({ type: Number })
+], GdsPagination.prototype, "page", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsPagination.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsPagination.prototype, "total", 2);
+__decorateClass([
+  property({ type: Array })
+], GdsPagination.prototype, "options", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsPagination.prototype, "jump", 2);
+__decorateClass([
+  property({ reflect: false })
+], GdsPagination.prototype, "density", 2);
+__decorateClass([
+  property()
+], GdsPagination.prototype, "label", 2);
+__decorateClass([
+  query("#page-input")
+], GdsPagination.prototype, "_elInput", 2);
+__decorateClass([
+  state()
+], GdsPagination.prototype, "_isMobile", 2);
+__decorateClass([
+  state()
+], GdsPagination.prototype, "_jumpPopoverOpen", 2);
+__decorateClass([
+  watchMediaQuery("(max-width: 768px)")
+], GdsPagination.prototype, "_handleMobile", 1);
+GdsPagination = __decorateClass([
+  localized(),
+  gdsCustomElement("gds-pagination", {
+    dependsOn: [
+      GdsButton,
+      GdsPopover,
+      GdsText,
+      GdsInput,
+      GdsDropdown,
+      GdsContextMenu,
+      GdsMenuItem,
+      IconChevronBottom,
+      IconChevronLeftSmall,
+      IconChevronDoubleLeft,
+      IconChevronRight,
+      IconChevronRightSmall,
+      IconChevronDoubleRight
+    ]
+  })
+], GdsPagination);
+export {
+  GdsPagination
+};

package/components/pagination/pagination.d.ts

@@ -0,0 +1,2 @@
+import { GdsPagination } from './pagination.component';
+export { GdsPagination };

package/components/pagination/pagination.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { GdsPagination } from "./pagination.component.js";
+GdsPagination.define();
+export {
+  GdsPagination
+};

package/components/pagination/pagination.styles.d.ts

@@ -0,0 +1 @@
+export declare const PaginationStyles: import("lit").CSSResult;

package/components/pagination/pagination.styles.js

@@ -0,0 +1,19 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { css } from "lit";
+const PaginationStyles = css`
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gds-sys-space-xl);
+    --_appearance-spin-button: none;
+  }
+
+  .navigation-controls ::part(_button) {
+    padding: 0;
+    aspect-ratio: 1/1;
+  }
+`;
+export {
+  PaginationStyles
+};

package/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './table';
+export * as Types from './table.types';

package/components/table/index.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+export * from "./table.js";
+import * as Types from "./table.types";
+export {
+  Types
+};

package/components/table/table.component.d.ts

@@ -0,0 +1,140 @@
+import { GdsElement } from '../../gds-element';
+import * as Types from './table.types';
+export * as Types from './table.types';
+/**
+ * @element gds-table
+ * @status beta
+ *
+ * @summary A data table component with async data loading, pagination, sorting, filtering, and customizable cell rendering.
+ *
+ * @slot `header-lead` - Content displayed at the start of the table header (after search).
+ * @slot `header-trail` - Content displayed at the end of the table header (before settings).
+ * @slot `error` - Custom error state content when data loading fails.
+ * @slot `empty` - Custom empty state content when no data is available.
+ * @slot `no-results` - Custom no results content when search returns empty.
+ *
+ * @event gds-table-data-loaded - Fired when data is successfully loaded.
+ * @event gds-table-data-error - Fired when data loading fails.
+ * @event gds-table-selection - Fired when row selection changes.
+ */
+export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Configurable options for rows per page.
+     * Accepts: number array (e.g., `[5, 10, 20, 50, 100]`)
+     */
+    options: number[];
+    /**
+     * Current page number in pagination.
+     */
+    page: number;
+    /**
+     * Number of rows displayed per page.
+     */
+    rows: number;
+    /**
+     * Defines table column structure.
+     * Accepts: array of column configurations with keys, labels, etc.
+     */
+    columns: Types.Column[];
+    /**
+     * Asynchronous data provider function.
+     * Accepts: function that returns Promise with rows and total count
+     */
+    data: (request: Types.Request) => Promise<Types.Response<T>>;
+    /**
+     * Controls row density.
+     * Accepts: `comfortable`, `compact`, `spacious`
+     */
+    density: Types.Density;
+    /**
+     * Enables row selection functionality.
+     */
+    selectable: boolean;
+    /**
+     * Transforms table layout for mobile screens.
+     */
+    responsive: boolean;
+    /**
+     * Removes table header and footer.
+     */
+    plain: boolean;
+    /**
+     * Adds search input for data filtering.
+     */
+    searchable: boolean;
+    /**
+     * Enables column visibility settings.
+     */
+    settings: boolean;
+    /**
+     * Applies alternating row background colors.
+     */
+    striped: boolean;
+    /**
+     * Defines row-level actions.
+     * Accepts: action configuration or custom rendering function
+     */
+    actions?: Types.Actions | ((row: T, index: number) => any);
+    /**
+     * Disables data caching mechanism.
+     */
+    nocache: boolean;
+    /**
+     * Key to trigger data reloading when changed. Setting this to a new value
+     * forces the table to clear the cache and request new data from the data provider.
+     *
+     * The value can be any string that is not equal to the previous value.
+     */
+    dataLoadKey?: string;
+    /**
+     * Style Expression Property that controls the height property.
+     * Supports space tokens and all valid CSS width values.
+     *
+     * Sets the height of the table content area and enables vertical scrolling
+     * with a sticky header that remains visible.
+     */
+    height?: string;
+    /**
+     * Sets the visual variant of the table container card.
+     * Forwards to the underlying `gds-card` component.
+     * Accepts: `primary`, `secondary` (default), `tertiary`.
+     *
+     * > Variant naming will change in the next major release.
+     */
+    variant: 'primary' | 'secondary' | 'tertiary';
+    private _isMobile;
+    private _handleMobile;
+    private _view;
+    private _loaded;
+    private _loading;
+    private _rowsState;
+    private _total;
+    private _selected;
+    private _error;
+    private _onDataChange;
+    private _onColumnsChange;
+    connectedCallback(): void;
+    render(): any;
+    /**
+     * Public API
+     * Clear all selections
+     */
+    clearSelection(): void;
+    /**
+     * Select all rows
+     */
+    selectAll(): void;
+    /**
+     * Select specific rows by indices
+     */
+    setSelection(indices: number[]): void;
+    /**
+     * Get selected row data
+     */
+    getSelection(): {
+        indices: number[];
+        data: T[];
+    };
+}