@progressive-development/pd-content 1.1.0 → 1.1.1

package/dist/pd-code-snippet/PdCodeSnippet.d.ts

@@ -68,6 +68,16 @@ export declare class PdCodeSnippet extends LitElement {
      * Whether to show line numbers.
      */
     showLineNumbers: boolean;
+    /**
+     * Whether to show the edit button in the header.
+     * When visible, the user can toggle between view and edit mode.
+     */
+    editable: boolean;
+    /**
+     * Whether the editor is currently in edit mode (internal).
+     * @ignore
+     */
+    private _editing;
     /**
      * Copy button state.
      * @ignore
@@ -78,8 +88,15 @@ export declare class PdCodeSnippet extends LitElement {
      * @ignore
      */
     private _slotCode;
+    /** @ignore */
+    private _cmHost?;
+    /** @ignore */
+    private _cmEditor?;
+    /** @ignore */
+    private _cmInitialized;
     static styles: CSSResultGroup;
     updated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
     /**
      * Extract code from slotted content.
@@ -97,6 +114,18 @@ export declare class PdCodeSnippet extends LitElement {
      * Copy code to clipboard.
      */
     private _copyToClipboard;
+    /**
+     * Toggle between view and edit mode.
+     */
+    private _toggleEditing;
+    /**
+     * Lazy-initialize CodeMirror editor.
+     */
+    private _initCodeMirror;
+    /**
+     * Destroy CodeMirror editor instance.
+     */
+    private _destroyCodeMirror;
     /**
      * Format URL for display (truncate if too long).
      */

package/dist/pd-code-snippet/PdCodeSnippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdCodeSnippet.d.ts","sourceRoot":"","sources":["../../src/pd-code-snippet/PdCodeSnippet.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEL,cAAc,EAEd,UAAU,EAEV,cAAc,EACf,MAAM,KAAK,CAAC;AAMb,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,KAAK,GACL,UAAU,GACV,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,EAAE,YAAY,CAAgB;IAEtC;;OAEG;IAEH,GAAG,SAAM;IAET;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,eAAe,UAAS;IAExB;;;OAGG;IAEH,OAAO,CAAC,OAAO,CAAS;IAExB;;;OAGG;IAEH,OAAO,CAAC,SAAS,CAAM;IAEvB,OAAgB,MAAM,EAAE,cAAc,CAwRpC;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAahD,MAAM;IA4Ff;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB;;OAEG;IACH,OAAO,CAAC,cAAc;IAyBtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAoBnB;;OAEG;YACW,gBAAgB;IAgB9B;;OAEG;IACH,OAAO,CAAC,UAAU;CASnB"}
+{"version":3,"file":"PdCodeSnippet.d.ts","sourceRoot":"","sources":["../../src/pd-code-snippet/PdCodeSnippet.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEL,cAAc,EAEd,UAAU,EAEV,cAAc,EACf,MAAM,KAAK,CAAC;AAMb,OAAO,6CAA6C,CAAC;AAGrD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,KAAK,GACL,UAAU,GACV,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,EAAE,YAAY,CAAgB;IAEtC;;OAEG;IAEH,GAAG,SAAM;IAET;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,eAAe,UAAS;IAExB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;;OAGG;IAEH,OAAO,CAAC,OAAO,CAAS;IAExB;;;OAGG;IAEH,OAAO,CAAC,SAAS,CAAM;IAEvB,cAAc;IAEd,OAAO,CAAC,OAAO,CAAC,CAAc;IAE9B,cAAc;IACd,OAAO,CAAC,SAAS,CAAC,CAAa;IAE/B,cAAc;IACd,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAqQpC;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA8BhD,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IA6Ff;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB;;OAEG;IACH,OAAO,CAAC,cAAc;IAyBtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAoBnB;;OAEG;YACW,gBAAgB;IAgB9B;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;YACW,eAAe;IAwB7B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAQ1B;;OAEG;IACH,OAAO,CAAC,UAAU;CASnB"}

package/dist/pd-code-snippet/PdCodeSnippet.js

@@ -1,6 +1,8 @@
 import { LitElement, css, nothing, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, state, query } from 'lit/decorators.js';
 import Prism from '../_virtual/prism.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-forms/pd-button';
 import '../_virtual/prism-typescript.js';
 import '../node_modules/.pnpm/prismjs@1.30.0/node_modules/prismjs/components/prism-bash.js';
 import '../node_modules/.pnpm/prismjs@1.30.0/node_modules/prismjs/components/prism-json.js';
@@ -27,8 +29,12 @@ class PdCodeSnippet extends LitElement {
     this.url = "";
     this.code = "";
     this.showLineNumbers = false;
+    this.editable = false;
+    this._editing = false;
     this._copied = false;
     this._slotCode = "";
+    /** @ignore */
+    this._cmInitialized = false;
   }
   static {
     this.styles = [
@@ -38,7 +44,7 @@ class PdCodeSnippet extends LitElement {
         --_width: var(--pd-code-snippet-width, 100%);
         --_radius: var(
           --pd-code-snippet-border-radius,
-          var(--pd-radius-md, 8px)
+          var(--pd-radius-md, 4px)
         );
         --_padding: var(--pd-code-snippet-padding, var(--pd-spacing-md, 1rem));
 
@@ -139,41 +145,9 @@ class PdCodeSnippet extends LitElement {
         gap: 0.75rem;
       }
 
-      /* Copy button */
-      .copy-button {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        padding: 0.25rem 0.5rem;
-        border: 1px solid var(--_border-col);
-        border-radius: 4px;
-        background: transparent;
-        color: var(--_header-col);
-        font-size: 0.75rem;
-        cursor: pointer;
-        transition: all 0.2s ease;
-      }
-
-      .copy-button:hover {
-        background: var(--pd-default-hover-col, #ffc857);
-        color: var(--pd-on-secondary-col, #0a3a48);
-        border-color: var(--pd-default-hover-col, #ffc857);
-      }
-
-      .copy-button:focus-visible {
-        outline: 2px solid var(--pd-focus-ring-col, #067394);
-        outline-offset: 2px;
-      }
-
-      .copy-button.copied {
-        color: var(--pd-default-success-col, #348b11);
-        border-color: var(--pd-default-success-col, #348b11);
-      }
-
-      .copy-icon {
-        width: 14px;
-        height: 14px;
-        fill: currentColor;
+      .header-actions pd-button {
+        --pd-button-font-size: 0.75rem;
+        --pd-button-height: 1.75rem;
       }
 
       /* Code area */
@@ -250,6 +224,19 @@ class PdCodeSnippet extends LitElement {
         flex-shrink: 0;
       }
 
+      /* CodeMirror editor host */
+      .cm-host {
+        min-height: 120px;
+      }
+
+      .cm-host .cm-editor {
+        outline: none;
+      }
+
+      .cm-host .cm-editor.cm-focused {
+        outline: none;
+      }
+
       /* Hidden slot for extracting text content */
       .hidden-slot {
         display: none;
@@ -315,16 +302,33 @@ class PdCodeSnippet extends LitElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("code") || changedProperties.has("language") || changedProperties.has("_slotCode")) {
-      this._highlightCode();
+    if (this._editing) {
+      this._initCodeMirror();
+      if (this._cmEditor && changedProperties.has("code")) {
+        const doc = this._cmEditor.state.doc.toString();
+        if (this.code !== doc) {
+          this._cmEditor.dispatch({
+            changes: { from: 0, to: doc.length, insert: this.code }
+          });
+        }
+      }
+    } else {
+      this._destroyCodeMirror();
+      if (changedProperties.has("code") || changedProperties.has("language") || changedProperties.has("_slotCode") || changedProperties.has("_editing")) {
+        this._highlightCode();
+      }
     }
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._destroyCodeMirror();
+  }
   render() {
     const codeContent = this.code || this._slotCode;
     const lineCount = codeContent.split("\n").length;
     return html`
       <div class="snippet-container">
-        ${this.title || this.language !== "plain" ? html`
+        ${this.title || this.language !== "plain" || this.editable ? html`
               <div class="header">
                 <div class="title-area">
                   ${this.title ? html`<h4 class="title">${this.title}</h4>` : html`<span class="language-badge"
@@ -333,41 +337,38 @@ class PdCodeSnippet extends LitElement {
                 </div>
                 <div class="header-actions">
                   ${this.title && this.language !== "plain" ? html`<span class="language-badge">${this.language}</span>` : nothing}
-                  <button
-                    class="copy-button ${this._copied ? "copied" : ""}"
-                    @click=${this._copyToClipboard}
-                    aria-label="Copy code to clipboard"
-                  >
-                    ${this._copied ? html`
-                          <svg class="copy-icon" viewBox="0 0 24 24">
-                            <path
-                              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-                            />
-                          </svg>
-                          Copied
-                        ` : html`
-                          <svg class="copy-icon" viewBox="0 0 24 24">
-                            <path
-                              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
-                            />
-                          </svg>
-                          Copy
-                        `}
-                  </button>
+                  ${this.editable ? html`
+                        <pd-button
+                          outline
+                          text=""
+                          icon="${pdIcons.ICON_EDIT_NEW}"
+                          icon-label="${this._editing ? "Vorschau" : "Bearbeiten"}"
+                          @button-clicked=${this._toggleEditing}
+                        ></pd-button>
+                      ` : nothing}
+                  <pd-button
+                    outline
+                    text=""
+                    icon="${pdIcons.ICON_COPY}"
+                    icon-label="Code kopieren"
+                    @button-clicked=${this._copyToClipboard}
+                  ></pd-button>
                 </div>
               </div>
             ` : nothing}
 
         <div class="code-wrapper">
-          ${this.showLineNumbers ? html`
-                <div class="line-numbers" aria-hidden="true">
-                  ${Array.from(
+          ${this._editing ? html`<div class="cm-host"></div>` : html`
+                ${this.showLineNumbers ? html`
+                      <div class="line-numbers" aria-hidden="true">
+                        ${Array.from(
       { length: lineCount },
       (_, i) => html`${i + 1}<br />`
     )}
-                </div>
-              ` : nothing}
-          <pre><code id="code-block"></code></pre>
+                      </div>
+                    ` : nothing}
+                <pre><code id="code-block"></code></pre>
+              `}
         </div>
 
         ${this.url ? html`
@@ -466,6 +467,46 @@ class PdCodeSnippet extends LitElement {
       console.error("Failed to copy code:", err);
     }
   }
+  /**
+   * Toggle between view and edit mode.
+   */
+  _toggleEditing() {
+    this._editing = !this._editing;
+  }
+  /**
+   * Lazy-initialize CodeMirror editor.
+   */
+  async _initCodeMirror() {
+    if (this._cmInitialized || !this._cmHost) return;
+    this._cmInitialized = true;
+    const { createCodeMirrorEditor } = await import('./codemirror-setup.js');
+    const codeContent = this.code || this._slotCode;
+    this._cmEditor = createCodeMirrorEditor({
+      parent: this._cmHost,
+      code: codeContent,
+      language: this.language,
+      onChange: (newCode) => {
+        this.code = newCode;
+        this.dispatchEvent(
+          new CustomEvent("pd-code-change", {
+            detail: { code: newCode },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    });
+  }
+  /**
+   * Destroy CodeMirror editor instance.
+   */
+  _destroyCodeMirror() {
+    if (this._cmEditor) {
+      this._cmEditor.destroy();
+      this._cmEditor = void 0;
+      this._cmInitialized = false;
+    }
+  }
   /**
    * Format URL for display (truncate if too long).
    */
@@ -494,11 +535,20 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], PdCodeSnippet.prototype, "showLineNumbers");
+__decorateClass([
+  property({ type: Boolean })
+], PdCodeSnippet.prototype, "editable");
+__decorateClass([
+  state()
+], PdCodeSnippet.prototype, "_editing");
 __decorateClass([
   state()
 ], PdCodeSnippet.prototype, "_copied");
 __decorateClass([
   state()
 ], PdCodeSnippet.prototype, "_slotCode");
+__decorateClass([
+  query(".cm-host")
+], PdCodeSnippet.prototype, "_cmHost");
 
 export { PdCodeSnippet };

package/dist/pd-code-snippet/codemirror-setup.d.ts

@@ -0,0 +1,10 @@
+import { EditorView } from '@codemirror/view';
+import { CodeLanguage } from './PdCodeSnippet.js';
+export interface CodeMirrorConfig {
+    parent: HTMLElement;
+    code: string;
+    language: CodeLanguage;
+    onChange: (code: string) => void;
+}
+export declare function createCodeMirrorEditor(config: CodeMirrorConfig): EditorView;
+//# sourceMappingURL=codemirror-setup.d.ts.map

package/dist/pd-code-snippet/codemirror-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codemirror-setup.d.ts","sourceRoot":"","sources":["../../src/pd-code-snippet/codemirror-setup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EACL,UAAU,EAKX,MAAM,kBAAkB,CAAC;AAgB1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AA2EvD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,gBAAgB,GAAG,UAAU,CA4B3E"}

package/dist/pd-code-snippet/codemirror-setup.js

@@ -0,0 +1,101 @@
+import { EditorView, lineNumbers, highlightActiveLine, highlightActiveLineGutter, keymap } from '../node_modules/.pnpm/@codemirror_view@6.40.0/node_modules/@codemirror/view/dist/index.js';
+import { EditorState } from '../node_modules/.pnpm/@codemirror_state@6.6.0/node_modules/@codemirror/state/dist/index.js';
+import { bracketMatching, indentOnInput, syntaxHighlighting, defaultHighlightStyle } from '../node_modules/.pnpm/@codemirror_language@6.12.3/node_modules/@codemirror/language/dist/index.js';
+import { html } from '../node_modules/.pnpm/@codemirror_lang-html@6.4.11/node_modules/@codemirror/lang-html/dist/index.js';
+import { javascript } from '../node_modules/.pnpm/@codemirror_lang-javascript@6.2.5/node_modules/@codemirror/lang-javascript/dist/index.js';
+import { css } from '../node_modules/.pnpm/@codemirror_lang-css@6.3.1/node_modules/@codemirror/lang-css/dist/index.js';
+import { json } from '../node_modules/.pnpm/@codemirror_lang-json@6.0.2/node_modules/@codemirror/lang-json/dist/index.js';
+import { python } from '../node_modules/.pnpm/@codemirror_lang-python@6.2.1/node_modules/@codemirror/lang-python/dist/index.js';
+import { java } from '../node_modules/.pnpm/@codemirror_lang-java@6.0.2/node_modules/@codemirror/lang-java/dist/index.js';
+import { markdown } from '../node_modules/.pnpm/@codemirror_lang-markdown@6.5.0/node_modules/@codemirror/lang-markdown/dist/index.js';
+
+const LANGUAGE_MAP = {
+  html: () => html(),
+  javascript: () => javascript(),
+  typescript: () => javascript({ typescript: true }),
+  css: () => css(),
+  json: () => json(),
+  python: () => python(),
+  java: () => java(),
+  markdown: () => markdown()
+};
+const pdTheme = EditorView.theme({
+  "&": {
+    fontSize: "var(--_font-size, 0.875rem)",
+    fontFamily: "var(--_font-family, 'Fira Code', 'Consolas', 'Monaco', monospace)",
+    backgroundColor: "transparent"
+  },
+  ".cm-content": {
+    caretColor: "var(--_text-col, #353738)",
+    color: "var(--_text-col, #353738)",
+    lineHeight: "var(--_line-height, 1.5)",
+    padding: "0",
+    fontFamily: "inherit"
+  },
+  ".cm-cursor": {
+    borderLeftColor: "var(--_text-col, #353738)"
+  },
+  ".cm-gutters": {
+    backgroundColor: "transparent",
+    color: "var(--_line-number-col, #6b7280)",
+    border: "none",
+    paddingRight: "0.5rem",
+    fontFamily: "inherit",
+    fontSize: "inherit"
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "transparent",
+    color: "var(--_text-col, #353738)"
+  },
+  ".cm-activeLine": {
+    backgroundColor: "rgba(0, 0, 0, 0.04)"
+  },
+  ".cm-selectionBackground": {
+    backgroundColor: "rgba(6, 115, 148, 0.15) !important"
+  },
+  "&.cm-focused .cm-selectionBackground": {
+    backgroundColor: "rgba(6, 115, 148, 0.2) !important"
+  },
+  ".cm-scroller": {
+    overflow: "auto",
+    fontFamily: "inherit"
+  }
+});
+const tabBinding = keymap.of([
+  {
+    key: "Tab",
+    run: (view) => {
+      view.dispatch(view.state.replaceSelection("  "));
+      return true;
+    }
+  }
+]);
+function createCodeMirrorEditor(config) {
+  const extensions = [
+    pdTheme,
+    lineNumbers(),
+    highlightActiveLine(),
+    highlightActiveLineGutter(),
+    bracketMatching(),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle),
+    tabBinding,
+    EditorView.lineWrapping,
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        config.onChange(update.state.doc.toString());
+      }
+    })
+  ];
+  const langFactory = LANGUAGE_MAP[config.language];
+  if (langFactory) extensions.push(langFactory());
+  return new EditorView({
+    state: EditorState.create({
+      doc: config.code,
+      extensions
+    }),
+    parent: config.parent
+  });
+}
+
+export { createCodeMirrorEditor };

package/dist/pd-more-info/PdMoreInfo.d.ts

@@ -2,11 +2,30 @@ import { LitElement, CSSResultGroup } from 'lit';
 /**
  * @tagname pd-more-info
  *
- * `pd-more-info` Komponente zeigt zuerst einen kompakten Text (Slot `small-view`)
- * und erlaubt es dem Nutzer, bei Klick weitere Informationen (Slot `large-view`) einzublenden.
+ * `pd-more-info` Komponente zeigt zuerst einen kompakten Text und erlaubt es
+ * dem Nutzer, bei Klick weitere Informationen einzublenden.
  *
- * @slot small-view - Compact text block shown in the initial collapsed view.
- * @slot large-view - Extended text block revealed after clicking "More information".
+ * ## Modi
+ *
+ * ### Auto-Truncation (empfohlen)
+ * Content in den Default-Slot legen und via `maxLength` oder `maxLines` kürzen:
+ * ```html
+ * <pd-more-info max-length="120">Langer Text…</pd-more-info>
+ * <pd-more-info max-lines="3">Mehrzeiliger Text…</pd-more-info>
+ * ```
+ *
+ * ### Named Slots (Legacy / Rich-Content)
+ * Für vollständige Kontrolle über Kurz- und Langansicht:
+ * ```html
+ * <pd-more-info>
+ *   <span slot="small-view">Kurz</span>
+ *   <span slot="large-view"><ul><li>Rich</li></ul></span>
+ * </pd-more-info>
+ * ```
+ *
+ * @slot - Default slot for auto-truncation content (used with `maxLength` or `maxLines`).
+ * @slot small-view - Compact text block shown in the initial collapsed view (legacy mode).
+ * @slot large-view - Extended text block revealed after clicking "More information" (legacy mode).
  *
  * @cssprop --pd-default-font-content-col - Textfarbe
  * @cssprop --pd-default-font-content-size - Textgröße
@@ -18,14 +37,39 @@ import { LitElement, CSSResultGroup } from 'lit';
  * @cssprop --pd-default-font-link-col-hover - Hoverfarbe für Link
  */
 export declare class PdMoreInfo extends LitElement {
+    /**
+     * Maximum number of characters before truncation.
+     * Uses word-boundary truncation with ellipsis.
+     * Takes precedence over `maxLines`.
+     */
+    maxLength?: number;
+    /**
+     * Maximum number of visible lines before truncation (CSS line-clamp).
+     * Ignored when `maxLength` is set.
+     */
+    maxLines?: number;
     /**
      * When set, disables the automatic scroll-into-view when collapsing.
      */
     noAutoScroll: boolean;
     /** @ignore */
     private _lessInfo;
+    /** @ignore */
+    private _fullText;
+    /** @ignore */
+    private _isOverflowing;
     static styles: CSSResultGroup;
     render(): import('lit').TemplateResult<1>;
+    updated(): void;
+    private _renderMaxLength;
+    private _truncateText;
+    private _onSlotChange;
+    private _renderMaxLines;
+    private _onMaxLinesSlotChange;
+    private _checkOverflow;
+    private _renderLegacy;
+    private _moreLink;
+    private _lessLink;
     private _onKeyDown;
     private _showMoreInfo;
     private _showLessInfo;

package/dist/pd-more-info/PdMoreInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdMoreInfo.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/PdMoreInfo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IAEH,YAAY,UAAS;IAErB,cAAc;IAEd,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAmCpC;IAEO,MAAM;IA8Bf,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAatB"}
+{"version":3,"file":"PdMoreInfo.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/PdMoreInfo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,YAAY,UAAS;IAErB,cAAc;IAEd,OAAO,CAAC,SAAS,CAAQ;IAEzB,cAAc;IAEd,OAAO,CAAC,SAAS,CAAM;IAEvB,cAAc;IAEd,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CA6CpC;IAEO,MAAM;IAUN,OAAO;IAUhB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,SAAS;IAajB,OAAO,CAAC,SAAS;IAiBjB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAYtB"}