@sebgroup/green-core 1.71.2 → 1.72.0

package/components/details/details-icon/details-icon.component.d.ts

@@ -0,0 +1,14 @@
+import { GdsElement } from '../../../gds-element';
+/**
+ * @element gds-icon-details
+ * @status beta
+ */
+export declare class GdsIconDetails extends GdsElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Controls if the details is open
+     */
+    open: boolean;
+    render(): any;
+    updated(changedProperties: Map<string, any>): void;
+}

package/components/details/details-icon/details-icon.component.js

@@ -0,0 +1,71 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { GdsElement } from "../../../gds-element.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../../utils/helpers/custom-element-scoping.js";
+import { styles } from "./details-icon.style.js";
+let GdsIconDetails = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+  }
+  render() {
+    return html`
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        id="plus"
+      >
+        <line x1="4" y1="10" x2="16" y2="10" />
+        <line x1="10" y1="4" x2="10" y2="16">
+          <animate
+            attributeName="y1"
+            dur="240ms"
+            from="${this.open ? "4" : "10"}"
+            to="${this.open ? "10" : "4"}"
+            begin="plus.toggle"
+            fill="freeze"
+          />
+          <animate
+            attributeName="y2"
+            dur="240ms"
+            from="${this.open ? "16" : "10"}"
+            to="${this.open ? "10" : "16"}"
+            begin="plus.toggle"
+            fill="freeze"
+          />
+        </line>
+      </svg>
+    `;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      const svg = this.shadowRoot?.querySelector("svg");
+      if (svg) {
+        const event = new CustomEvent("toggle", {
+          bubbles: true,
+          composed: true
+        });
+        svg.dispatchEvent(event);
+      }
+    }
+  }
+};
+GdsIconDetails.styles = [styles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsIconDetails.prototype, "open", 2);
+GdsIconDetails = __decorateClass([
+  gdsCustomElement("gds-icon-details")
+], GdsIconDetails);
+export {
+  GdsIconDetails
+};

package/components/details/details-icon/details-icon.d.ts

@@ -0,0 +1,2 @@
+import { GdsIconDetails } from './details-icon.component';
+export { GdsIconDetails };

package/components/details/details-icon/details-icon.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { GdsIconDetails } from "./details-icon.component.js";
+GdsIconDetails.define();
+export {
+  GdsIconDetails
+};

package/components/details/details-icon/details-icon.style.d.ts

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

package/components/details/details-icon/details-icon.style.js

@@ -0,0 +1,10 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const styles = css`
+  :host {
+    display: contents;
+  }
+`;
+export {
+  styles
+};

package/components/details/details.component.d.ts

@@ -0,0 +1,46 @@
+import { GdsElement } from '../../gds-element';
+export type DetailsSize = 'large' | 'small';
+declare const GdsDetails_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof GdsElement;
+/**
+ * Details component that provides collapsible content sections.
+ *
+ * @element gds-details
+ * @status beta
+ *
+ * @slot - Default slot for details content
+ * @event gds-ui-state - Fired when details opens or closes
+ *
+ * @example
+ * ```html
+ * <gds-details summary="Section Title">
+ *   <p>Details content here</p>
+ * </gds-details>
+ * ```
+ */
+export declare class GdsDetails extends GdsDetails_base {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The summary text displayed in the details header
+     */
+    summary: string;
+    /**
+     * Group identifier for details behavior synchronization
+     */
+    name: string;
+    /**
+     * Controls the expanded state of the details
+     */
+    open: boolean;
+    /**
+     * Controls the size variant of the details
+     */
+    size: DetailsSize;
+    private _content?;
+    private _openIconSlot?;
+    private _closedIconSlot?;
+    protected firstUpdated(): void;
+    private __handleOpenChange;
+    render(): any;
+}
+export {};

package/components/details/details.component.js

@@ -0,0 +1,185 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _initializeContentHeight, _updateContentHeight, _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _renderHeader, _renderIconButton, _renderContent;
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { GdsElement } from "../../gds-element.js";
+import { tokens } from "../../tokens.style.js";
+import { watch } from "../../utils/decorators/watch.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 { GdsIconDetails } from "./details-icon/details-icon.component.js";
+import { styles } from "./details.styles.js";
+let GdsDetails = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(GdsElement))
+) {
+  constructor() {
+    super(...arguments);
+    this.summary = "";
+    this.name = "";
+    this.open = false;
+    this.size = "large";
+    __privateAdd(this, _initializeContentHeight, () => {
+      if (!this._content)
+        return;
+      __privateGet(this, _updateContentHeight).call(this);
+    });
+    __privateAdd(this, _updateContentHeight, () => {
+      if (!this._content)
+        return;
+      requestAnimationFrame(() => {
+        this._content?.style.setProperty(
+          "--_max-height",
+          this.open ? `${this._content.scrollHeight}px` : "0"
+        );
+      });
+    });
+    __privateAdd(this, _handleToggle, () => {
+      this.open = !this.open;
+      __privateGet(this, _dispatchStateEvent).call(this);
+    });
+    __privateAdd(this, _handleKeydown, (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        __privateGet(this, _handleToggle).call(this);
+      }
+    });
+    __privateAdd(this, _syncGroupState, () => {
+      if (!this.open || !this.name)
+        return;
+      document.querySelectorAll('[gds-element="gds-details"]').forEach((details) => {
+        var _a, _b;
+        if (details !== this && details.name === this.name) {
+          const other = details;
+          other.open = false;
+          __privateGet(_a = other, _updateContentHeight).call(_a);
+          __privateGet(_b = other, _dispatchStateEvent).call(_b);
+        }
+      });
+    });
+    __privateAdd(this, _dispatchStateEvent, () => {
+      this.dispatchEvent(
+        new CustomEvent("gds-ui-state", {
+          bubbles: true,
+          composed: true,
+          detail: this.open
+        })
+      );
+    });
+    __privateAdd(this, _renderHeader, () => {
+      return html`
+      <div
+        class="summary"
+        part="summary"
+        role="button"
+        tabindex="0"
+        @click=${__privateGet(this, _handleToggle)}
+        @keydown=${__privateGet(this, _handleKeydown)}
+        aria-expanded="${this.open}"
+        aria-controls="content-${this.name || "default"}"
+      >
+        <div id="summary-${this.name || "default"}" class="summary-label">
+          ${this.summary || "Summary"}
+        </div>
+        ${__privateGet(this, _renderIconButton).call(this)}
+      </div>
+    `;
+    });
+    __privateAdd(this, _renderIconButton, () => {
+      return html`
+      <div class="summary-icon" role="presentation" aria-hidden="true">
+        <gds-button
+          rank="tertiary"
+          size=${this.size === "small" ? "xs" : "medium"}
+          role="presentation"
+          tabindex="-1"
+        >
+          <gds-icon-details .open=${this.open}></gds-icon-details>
+        </gds-button>
+      </div>
+    `;
+    });
+    __privateAdd(this, _renderContent, () => {
+      return html`
+      <div
+        id="content-${this.name || "default"}"
+        class="content"
+        aria-hidden="${!this.open}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    });
+  }
+  firstUpdated() {
+    __privateGet(this, _initializeContentHeight).call(this);
+  }
+  __handleOpenChange() {
+    __privateGet(this, _updateContentHeight).call(this);
+    __privateGet(this, _syncGroupState).call(this);
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      details: true,
+      open: this.open,
+      small: this.size === "small"
+    })}
+      >
+        ${__privateGet(this, _renderHeader).call(this)} ${__privateGet(this, _renderContent).call(this)}
+      </div>
+    `;
+  }
+};
+_initializeContentHeight = new WeakMap();
+_updateContentHeight = new WeakMap();
+_handleToggle = new WeakMap();
+_handleKeydown = new WeakMap();
+_syncGroupState = new WeakMap();
+_dispatchStateEvent = new WeakMap();
+_renderHeader = new WeakMap();
+_renderIconButton = new WeakMap();
+_renderContent = new WeakMap();
+GdsDetails.styles = [tokens, styles];
+__decorateClass([
+  property({ type: String })
+], GdsDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ type: String })
+], GdsDetails.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDetails.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], GdsDetails.prototype, "size", 2);
+__decorateClass([
+  query(".content")
+], GdsDetails.prototype, "_content", 2);
+__decorateClass([
+  query('slot[name="summary-icon-open"]')
+], GdsDetails.prototype, "_openIconSlot", 2);
+__decorateClass([
+  query('slot[name="summary-icon-closed"]')
+], GdsDetails.prototype, "_closedIconSlot", 2);
+__decorateClass([
+  watch("open")
+], GdsDetails.prototype, "__handleOpenChange", 1);
+GdsDetails = __decorateClass([
+  gdsCustomElement("gds-details", { dependsOn: [GdsButton, GdsIconDetails] })
+], GdsDetails);
+export {
+  GdsDetails
+};

package/components/details/details.d.ts

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

package/components/details/details.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsDetails } from "./details.component.js";
+GdsDetails.define();
+export {
+  GdsDetails
+};

package/components/details/details.styles.d.ts

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

package/components/details/details.styles.js

@@ -0,0 +1,112 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const styles = css`
+  @layer base, reset;
+  @layer base {
+    .details {
+      border-bottom: solid var(--gds-space-4xs)
+        var(--gds-color-l2-border-primary);
+      font-size: var(--gds-text-size-body-m);
+      line-height: var(--gds-text-line-height-body-m);
+      color: var(--gds-color-l2-content-secondary);
+      transition: border-color 240ms linear;
+    }
+
+    .summary {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      list-style: none;
+      user-select: none;
+      outline-offset: var(--gds-space-2xs);
+      outline-color: currentColor;
+      transition: all 120ms;
+      color: var(--gds-color-l2-content-primary);
+    }
+
+    .summary-icon {
+      border-radius: var(--gds-space-max);
+      background-color: transparent;
+      transition: all 280ms;
+      aspect-ratio: 1;
+      width: max-content;
+      height: max-content;
+      line-height: 1;
+    }
+
+    .summary:focus {
+      outline-color: var(--gds-color-l3-content-tertiary);
+
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
+    @media (pointer: fine) {
+      .summary:is(:hover, :focus-within) .summary-icon {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-light-hover)
+        );
+      }
+
+      .summary:active .summary-icon {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-light-pressed)
+        );
+      }
+
+      .details:hover,
+      .details:focus-within {
+        border-color: var(--gds-color-l2-border-quaternary);
+      }
+    }
+
+    .summary-label {
+      font-size: var(--gds-text-size-heading-xs);
+      line-height: var(--gds-text-line-height-heading-xs);
+      font-weight: var(--gds-text-weight-regular);
+      padding-block: var(--gds-space-m);
+      cursor: pointer;
+      flex: 1;
+      outline: none;
+    }
+
+    .details.small .summary-label {
+      font-size: var(--gds-text-size-heading-2xs);
+      line-height: var(--gds-text-line-height-heading-2xs);
+      padding-block: var(--gds-space-s);
+    }
+
+    .details.small .content {
+      font-size: var(--gds-text-size-heading-2xs);
+      line-height: var(--gds-text-line-height-heading-2xs);
+    }
+
+    .details:focus-visible {
+      border-radius: var(--gds-space-2xs);
+    }
+
+    .details.open .content {
+      display: flex;
+      padding-block-end: var(--gds-space-l);
+    }
+
+    .details.small.open .content {
+      padding-block-end: var(--gds-space-s);
+    }
+
+    .content {
+      max-height: var(--_max-height, 0);
+      overflow: hidden;
+      transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
+      outline: none;
+    }
+  }
+`;
+export {
+  styles
+};

package/components/details/index.d.ts

@@ -0,0 +1 @@
+export * from './details';

package/components/details/index.js

@@ -0,0 +1 @@
+export * from "./details.js";