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

package/components/pagination/pagination.component.d.ts

@@ -0,0 +1,82 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * Centralized density configuration
+ */
+declare const DENSITY_CONFIG: {
+    readonly compact: {
+        readonly button: "small";
+        readonly font: "detail-book-s";
+        readonly gap: "xl";
+        readonly navGap: "xs";
+        readonly input: "small";
+        readonly inputWidth: "140px";
+        readonly inputPadding: "m";
+    };
+    readonly comfortable: {
+        readonly button: "small";
+        readonly font: "detail-book-s";
+        readonly gap: "2xl";
+        readonly navGap: "s";
+        readonly input: "small";
+        readonly inputWidth: "140px";
+        readonly inputPadding: "m";
+    };
+    readonly spacious: {
+        readonly button: "medium";
+        readonly font: "detail-book-m";
+        readonly gap: "2xl";
+        readonly navGap: "s";
+        readonly input: "large";
+        readonly inputWidth: "200px";
+        readonly inputPadding: "xl";
+    };
+};
+type DensityMode = keyof typeof DENSITY_CONFIG;
+declare const GdsPagination_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof GdsElement;
+/**
+ * @element gds-pagination
+ * @status beta
+ *
+ * @summary A pagination component with page navigation, configurable rows per page, and responsive layout.
+ *
+ * @event gds-page-change - Fired when the active page changes.
+ * @event gds-rows-change - Fired when the rows per page value changes.
+ */
+export declare class GdsPagination extends GdsPagination_base {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Sets the active page, initially the first page.
+     */
+    page: number;
+    /**
+     * Sets the numbers of rows to show, defaults to 10
+     */
+    rows: number;
+    total: number;
+    /**
+     * Options array to set the nunber of items per page.
+     * Defaults to `[5, 10, 25, 50]`
+     */
+    options: number[];
+    /**
+     * Enables first and last button
+     */
+    jump: boolean;
+    /**
+     * Controls density mode on pagination
+     * Accepts: `comfortable`, `compact`, `spacious`
+     */
+    density: DensityMode;
+    /**
+     * The text summary to display on the left side (e.g. "1-10 of 100").
+     * If a slot named "label" is provided, this property is ignored.
+     */
+    label: string;
+    private _elInput?;
+    private _isMobile;
+    private _jumpPopoverOpen;
+    private _handleMobile;
+    render(): any;
+}
+export {};

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/segmented-control/segmented-control.component.d.ts

@@ -8,6 +8,8 @@ declare const GdsSegmentedControl_base: (new (...args: any[]) => import("../../u
  *
  * @slot - Segments to display in the control
  *
+ * @subcomponent gds-segment - Defines a segment in the segmented control
+ *
  * @event change - Fires when the selected segment is changed
  */
 export declare class GdsSegmentedControl<ValueT = any> extends GdsSegmentedControl_base {

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
+};