@progressive-development/pd-forms 1.0.1 → 1.0.3

package/dist/pd-generic-form/pd-generic-form.styles.js

@@ -20,8 +20,8 @@ const pdGenericFormStyles = css`
 
   .view-item {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    align-items: baseline;
+    gap: 1rem;
     background: var(
       --pd-generic-form-view-item-bg,
       var(--pd-default-bg-light-col, #f8f9fc)
@@ -38,6 +38,8 @@ const pdGenericFormStyles = css`
   }
 
   .view-label {
+    flex: 0 0 auto;
+    max-width: 40%;
     font-weight: var(--pd-generic-form-view-label-weight, 500);
     font-size: var(
       --pd-generic-form-view-label-size,
@@ -51,13 +53,16 @@ const pdGenericFormStyles = css`
   }
 
   .view-value {
+    flex: 1 1 0;
+    min-width: 0;
+    text-align: right;
+    word-break: break-word;
     font-weight: var(--pd-generic-form-view-value-weight, 600);
     color: var(
       --pd-generic-form-view-value-col,
       var(--pd-default-col, #067394)
     );
     font-family: var(--pd-default-font-content-family);
-    white-space: nowrap;
   }
 
   .view-value a {
@@ -99,10 +104,12 @@ const pdGenericFormStyles = css`
       flex-direction: column;
       align-items: flex-start;
     }
+    .view-label {
+      max-width: none;
+    }
     .view-value {
       margin-top: 0.25rem;
-      white-space: normal;
-      word-break: break-word;
+      text-align: left;
     }
   }
 `;

package/dist/pd-input-image/PdInputImage.d.ts

@@ -0,0 +1,79 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
+export interface ImageSelection {
+    /** Bild-URL (Data-URL oder externe URL) */
+    src: string;
+    /** Optionaler Kommentar zum Bild (Phase 2) */
+    comment?: string;
+    /** Whether this image is selected (only used when selectable mode is enabled) */
+    selected?: boolean;
+}
+/**
+ * Multi-image input component with file upload and optional AI image generation.
+ *
+ * @tagname pd-input-image
+ * @summary Multi-image picker with thumbnail grid, file upload, and AI integration.
+ *
+ * @event pd-form-element-change - Fired when the images array changes.
+ * @event pd-form-element-register - Fired on first render for form integration.
+ * @event pd-form-element-unregister - Fired on disconnect for form cleanup.
+ * @event pd-ai-trigger - Fired when AI sparkle icon is clicked (requires aiOptions).
+ *
+ * @cssprop --pd-input-field-width - Container width. Default: `300px`.
+ * @cssprop --pd-input-field-bg-col - Background color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-input-field-border - Border style. Default: `1px solid var(--pd-default-light-col)`.
+ * @cssprop --pd-input-field-border-bottom - Bottom border. Default: `2px solid var(--pd-default-col)`.
+ * @cssprop --pd-input-image-grid-gap - Gap between thumbnails. Default: `var(--pd-spacing-sm, 8px)`.
+ * @cssprop --pd-input-image-thumb-size - Thumbnail tile size. Default: `120px`.
+ * @cssprop --pd-input-image-thumb-radius - Thumbnail border-radius. Default: `var(--pd-radius-md)`.
+ * @cssprop --pd-input-image-remove-bg - Remove button background. Default: `rgba(0,0,0,0.5)`.
+ * @cssprop --pd-input-image-remove-size - Remove button size. Default: `24px`.
+ */
+export declare class PdInputImage extends PdBaseUIInput {
+    /** Accepted file types for the file picker. */
+    accept: string;
+    /** Placeholder text shown when no image is set. */
+    placeholder: string;
+    /** Maximum number of images allowed. */
+    max: number;
+    /** Enable single-select mode: user can click a thumbnail to select it. */
+    selectable: boolean;
+    /** Internal images array – primary data source. */
+    private _images;
+    /** Index of the image currently shown in the preview overlay, or null. */
+    private _previewIndex;
+    /** Whether the URL input row is visible. */
+    private _showUrlInput;
+    /** Current value of the URL input field. */
+    private _urlInputValue;
+    static styles: CSSResultGroup;
+    private _boundHandleKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get value(): ImageSelection[];
+    set value(val: ImageSelection[]);
+    private _updateImages;
+    protected _dispatchChange(_value: string, eventName?: string): void;
+    protected _registerAtContainer(valid: boolean): void;
+    protected _getParsedValue(): ImageSelection[];
+    aiAdopt(value: string): void;
+    reset(): void;
+    clear(): void;
+    update(changedProps: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _onPlaceholderClick;
+    private _onSelectClick;
+    private _openFilePicker;
+    private _onContainerKeyDown;
+    private _onFileSelect;
+    private _openPreview;
+    private _closePreview;
+    private _onBackdropClick;
+    private _handleGlobalKeyDown;
+    private _removeImage;
+    private _selectImage;
+    private _getSelectedImage;
+    private _onUrlAddClick;
+    private _onUrlConfirm;
+}
+//# sourceMappingURL=PdInputImage.d.ts.map

package/dist/pd-input-image/PdInputImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdInputImage.d.ts","sourceRoot":"","sources":["../../src/pd-input-image/PdInputImage.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAiB,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMpE,OAAO,0CAA0C,CAAC;AAElD,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAI5D,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,+CAA+C;IAE/C,MAAM,SAAa;IAEnB,mDAAmD;IAEnD,WAAW,SAAoB;IAE/B,wCAAwC;IAExC,GAAG,SAAY;IAEf,0EAA0E;IAE1E,UAAU,UAAS;IAEnB,mDAAmD;IAEnD,OAAO,CAAC,OAAO,CAAwB;IAEvC,0EAA0E;IAE1E,OAAO,CAAC,aAAa,CAAuB;IAE5C,4CAA4C;IAE5C,OAAO,CAAC,aAAa,CAAS;IAE9B,4CAA4C;IAE5C,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAEF,OAAO,CAAC,mBAAmB,CAAwC;IAE1D,iBAAiB,IAAI,IAAI;IAkBzB,oBAAoB,IAAI,IAAI;IASrC,IAAI,KAAK,IAAI,cAAc,EAAE,CAE5B;IAGD,IAAI,KAAK,CAAC,GAAG,EAAE,cAAc,EAAE,EAE9B;IAID,OAAO,CAAC,aAAa;cAaF,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;cAyBzD,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;cAyB1C,eAAe,IAAI,cAAc,EAAE;IAItC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B,KAAK,IAAI,IAAI;IAqCb,KAAK,IAAI,IAAI;IAMpB,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoChD,MAAM;IAkQf,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;CAiBtB"}

package/dist/pd-input-image/PdInputImage.js

@@ -0,0 +1,553 @@
+import { nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
+import '../pd-button.js';
+import '../pd-input.js';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
+import { SharedInputStyles } from '../styles/shared-input-styles.js';
+import { pdInputImageStyles } from './pd-input-image.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdInputImage extends PdBaseUIInput {
+  constructor() {
+    super(...arguments);
+    this.accept = "image/*";
+    this.placeholder = "Bild hochladen";
+    this.max = Infinity;
+    this.selectable = false;
+    this._images = [];
+    this._previewIndex = null;
+    this._showUrlInput = false;
+    this._urlInputValue = "";
+    this._boundHandleKeyDown = this._handleGlobalKeyDown.bind(this);
+  }
+  static {
+    this.styles = [
+      PdBaseUIInput.styles,
+      SharedInputStyles,
+      pdInputImageStyles
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._validators.push((value) => {
+      if (!this.required) return null;
+      if (this._images.length < 1) {
+        return msg("Eingabe erforderlich", { id: "pd.form.field.required" });
+      }
+      if (this.selectable && !this._images.some((img) => img.selected)) {
+        return msg("Bitte ein Bild auswählen", {
+          id: "pd.form.field.selection-required"
+        });
+      }
+      return null;
+    });
+    document.addEventListener("keydown", this._boundHandleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this._boundHandleKeyDown);
+  }
+  // -- Value getter/setter overrides --
+  // Type intentionally widened from base class string to ImageSelection[] for multi-image support.
+  // @ts-expect-error – value type changed from string to ImageSelection[] (no backwards compat needed)
+  get value() {
+    return [...this._images];
+  }
+  // @ts-expect-error – value type changed from string to ImageSelection[] (no backwards compat needed)
+  set value(val) {
+    this._updateImages(val);
+  }
+  // -- Core update method --
+  _updateImages(newImages) {
+    this._images = [...newImages];
+    this._value = JSON.stringify(this._images);
+    this._pristine = false;
+    this._dirty = true;
+    this.runValidators().then(() => {
+      this._dispatchChange(this._value);
+    });
+  }
+  // -- Overrides for form integration --
+  _dispatchChange(_value, eventName) {
+    this.dispatchEvent(
+      new CustomEvent(eventName || "pd-form-element-change", {
+        detail: {
+          value: this._images,
+          name: this.valueName || this.id || "field",
+          parsedValue: this._images,
+          ...this.selectable ? { selectedImage: this._getSelectedImage() } : {},
+          state: {
+            pristine: this._pristine,
+            dirty: this._dirty,
+            touched: this._touched,
+            focused: this._focused,
+            valid: this._valid,
+            invalid: this._invalid
+          }
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _registerAtContainer(valid) {
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-register", {
+        detail: {
+          name: this.valueName || this.id || "field",
+          value: this._images,
+          parsedValue: this._images,
+          ...this.selectable ? { selectedImage: this._getSelectedImage() } : {},
+          state: {
+            pristine: this._pristine,
+            dirty: this._dirty,
+            touched: this._touched,
+            focused: this._focused,
+            valid,
+            invalid: !valid
+          }
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _getParsedValue() {
+    return this._images;
+  }
+  aiAdopt(value) {
+    if (this._images.length < this.max) {
+      this._updateImages([...this._images, { src: value }]);
+    }
+  }
+  reset() {
+    this._images = [];
+    this._value = "[]";
+    this._errorMsg = "";
+    this._valid = false;
+    this._invalid = false;
+    this._pristine = true;
+    this._dirty = false;
+    this._touched = false;
+    this._focused = false;
+    this.runValidators(true).then((result) => {
+      this.dispatchEvent(
+        new CustomEvent("pd-form-element-change", {
+          detail: {
+            value: this._images,
+            parsedValue: this._images,
+            name: this.valueName || this.id || "field",
+            ...this.selectable ? { selectedImage: this._getSelectedImage() } : {},
+            state: {
+              pristine: this._pristine,
+              dirty: this._dirty,
+              touched: this._touched,
+              focused: this._focused,
+              valid: result,
+              invalid: !result
+            }
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+  }
+  clear() {
+    this.reset();
+  }
+  // -- Handle initValue changes --
+  update(changedProps) {
+    if (changedProps.has("initValue") && this.initValue) {
+      let parsed = [];
+      try {
+        const json = JSON.parse(this.initValue);
+        if (Array.isArray(json)) {
+          parsed = json.map(
+            (item) => typeof item === "string" ? { src: item } : item
+          );
+        } else {
+          parsed = [{ src: this.initValue }];
+        }
+      } catch {
+        if (this.initValue) {
+          parsed = [{ src: this.initValue }];
+        }
+      }
+      if (this.selectable) {
+        let foundSelected = false;
+        parsed = parsed.map((img) => {
+          if (img.selected && !foundSelected) {
+            foundSelected = true;
+            return img;
+          }
+          return { ...img, selected: false };
+        });
+      }
+      this._images = parsed;
+      this._value = JSON.stringify(this._images);
+    }
+    super.update(changedProps);
+  }
+  // -- Render --
+  render() {
+    const inputId = `${this.id}Input`;
+    const errorId = `${this.id}Error`;
+    const hasImages = this._images.length > 0;
+    const isFull = this._images.length >= this.max;
+    const maxIsFinite = isFinite(this.max);
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="image-area">
+        ${hasImages ? html`
+              <div
+                class="${classMap(
+      this.getClassmap({
+        "image-container": true,
+        "has-images": true
+      })
+    )}"
+              >
+                <div class="thumb-grid">
+                  ${this._images.map(
+      (img, i) => html`
+                      <div
+                        class="${classMap({
+        "thumb-item": true,
+        selectable: this.selectable,
+        selected: !!img.selected
+      })}"
+                        @click="${this.selectable ? (e) => {
+        e.stopPropagation();
+        this._selectImage(i);
+      } : nothing}"
+                      >
+                        <img src="${img.src}" alt="Bild ${i + 1}" />
+                        ${this.selectable ? html`
+                              <pd-icon
+                                class="thumb-preview-btn round"
+                                icon="${pdIcons.ICON_DETAIL}"
+                                activeIcon
+                                tabindex="0"
+                                role="button"
+                                aria-label="Bild ${i + 1} vergrößern"
+                                @click="${(e) => {
+        e.stopPropagation();
+        this._openPreview(i);
+      }}"
+                                @keydown="${(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          this._openPreview(i);
+        }
+      }}"
+                              ></pd-icon>
+                              <div class="thumb-select-indicator">
+                                ${img.selected ? html`<pd-icon
+                                      icon="${pdIcons.ICON_CHECKBOX_ONLY_CHECK}"
+                                      class="check-icon"
+                                    ></pd-icon>` : nothing}
+                              </div>
+                            ` : html`
+                              <div
+                                class="thumb-overlay"
+                                @click="${(e) => {
+        e.stopPropagation();
+        this._openPreview(i);
+      }}"
+                                role="button"
+                                tabindex="0"
+                                aria-label="Bild ${i + 1} vergrößern"
+                                @keydown="${(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          this._openPreview(i);
+        }
+      }}"
+                              >
+                                <pd-icon
+                                  icon="${pdIcons.ICON_DETAIL}"
+                                  class="preview-icon"
+                                ></pd-icon>
+                              </div>
+                            `}
+                        ${!img.src.startsWith("data:") ? html`<span class="thumb-url-badge">URL</span>` : nothing}
+                        ${!this.disabled && !this.readonly ? html`
+                              <pd-icon
+                                class="thumb-remove round"
+                                icon="${pdIcons.ICON_DELETE_NEW}"
+                                activeIcon
+                                tabindex="0"
+                                role="button"
+                                aria-label="Bild ${i + 1} entfernen"
+                                @click="${(e) => {
+        e.stopPropagation();
+        this._removeImage(i);
+      }}"
+                                @keydown="${(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          this._removeImage(i);
+        }
+      }}"
+                              ></pd-icon>
+                            ` : nothing}
+                      </div>
+                    `
+    )}
+                </div>
+              </div>
+            ` : html`
+              <div
+                class="${classMap(
+      this.getClassmap({ "image-container": true })
+    )}"
+                aria-disabled="${this.disabled || this.readonly}"
+                @click="${this._onPlaceholderClick}"
+                @keydown="${this._onContainerKeyDown}"
+                tabindex="0"
+                role="button"
+                aria-label="${this.placeholder}"
+              >
+                <div class="placeholder">
+                  <pd-icon
+                    icon="${pdIcons.ICON_CAMERA}"
+                    class="placeholder-icon"
+                  ></pd-icon>
+                  <span>${this.placeholder}</span>
+                </div>
+              </div>
+            `}
+      </div>
+      <div class="action-row">
+        ${!isFull ? html`
+              <pd-button
+                text="Dateien auswählen"
+                size="sm"
+                ?disabled="${this.disabled || this.readonly}"
+                @button-clicked="${this._onSelectClick}"
+              ></pd-button>
+              <pd-button
+                text="URL hinzufügen"
+                size="sm"
+                ?disabled="${this.disabled || this.readonly}"
+                @button-clicked="${this._onUrlAddClick}"
+              ></pd-button>
+            ` : nothing}
+        ${maxIsFinite ? html`
+              <span class="image-count">
+                ${this._images.length} von ${this.max} Bildern
+              </span>
+            ` : nothing}
+        ${isFull && maxIsFinite ? html`
+              <span class="max-hint">
+                Entferne ein Bild um weitere hinzuzufügen.
+              </span>
+            ` : nothing}
+      </div>
+      ${this._showUrlInput ? html`
+            <div class="url-input-row">
+              <pd-input
+                placeholder="https://..."
+                .value="${this._urlInputValue}"
+                @pd-form-element-change="${(e) => {
+      this._urlInputValue = e.detail.value;
+    }}"
+                @enter-pressed="${this._onUrlConfirm}"
+              ></pd-input>
+              <pd-button
+                text="OK"
+                size="sm"
+                primary
+                @button-clicked="${this._onUrlConfirm}"
+              ></pd-button>
+              <pd-button
+                text="X"
+                size="sm"
+                @button-clicked="${() => {
+      this._showUrlInput = false;
+      this._urlInputValue = "";
+    }}"
+              ></pd-button>
+            </div>
+          ` : nothing}
+      <input
+        id="${inputId}"
+        type="file"
+        multiple
+        accept="${this.accept}"
+        class="file-input-hidden"
+        @change="${this._onFileSelect}"
+      />
+      ${this._renderErrorMsg(errorId)}
+      ${this._previewIndex !== null && this._images[this._previewIndex] ? html`
+            <div
+              class="image-preview-backdrop"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Bildvorschau"
+              @click="${this._onBackdropClick}"
+            >
+              <div class="image-preview-container">
+                <div class="image-preview-main">
+                  <img
+                    src="${this._images[this._previewIndex].src}"
+                    alt="Bild ${this._previewIndex + 1}"
+                  />
+                </div>
+                <pd-icon
+                  class="image-preview-close round"
+                  icon="${pdIcons.ICON_XCLOSE}"
+                  activeIcon
+                  role="button"
+                  tabindex="0"
+                  aria-label="Vorschau schließen"
+                  @click="${(e) => {
+      e.stopPropagation();
+      this._closePreview();
+    }}"
+                  @keydown="${(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        this._closePreview();
+      }
+    }}"
+                ></pd-icon>
+              </div>
+            </div>
+          ` : nothing}
+    `;
+  }
+  // -- Event handlers --
+  _onPlaceholderClick() {
+    if (this.disabled || this.readonly) return;
+    this._openFilePicker();
+  }
+  _onSelectClick(e) {
+    e.stopPropagation();
+    if (this.disabled || this.readonly) return;
+    this._openFilePicker();
+  }
+  _openFilePicker() {
+    const fileInput = this.shadowRoot?.querySelector(".file-input-hidden");
+    fileInput?.click();
+  }
+  _onContainerKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._onPlaceholderClick();
+    }
+  }
+  _onFileSelect(e) {
+    const input = e.target;
+    const files = Array.from(input.files || []);
+    if (files.length === 0) return;
+    const slotsAvailable = this.max - this._images.length;
+    const filesToProcess = files.slice(0, Math.max(0, slotsAvailable));
+    if (filesToProcess.length === 0) return;
+    const readPromises = filesToProcess.map(
+      (file) => new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.readAsDataURL(file);
+      })
+    );
+    Promise.all(readPromises).then((dataUrls) => {
+      const newSelections = dataUrls.map((url) => ({ src: url }));
+      this._updateImages([...this._images, ...newSelections]);
+    });
+    input.value = "";
+  }
+  _openPreview(index) {
+    this._previewIndex = index;
+  }
+  _closePreview() {
+    this._previewIndex = null;
+  }
+  _onBackdropClick(e) {
+    if (e.target === e.currentTarget) {
+      this._closePreview();
+    }
+  }
+  _handleGlobalKeyDown(e) {
+    if (e.key === "Escape" && this._previewIndex !== null) {
+      this._closePreview();
+    }
+  }
+  _removeImage(index) {
+    const newImages = this._images.filter((_, i) => i !== index);
+    this._updateImages(newImages);
+  }
+  _selectImage(index) {
+    if (!this.selectable) return;
+    const newImages = this._images.map((img, i) => ({
+      ...img,
+      selected: i === index
+    }));
+    this._updateImages(newImages);
+  }
+  _getSelectedImage() {
+    return this._images.find((img) => img.selected) ?? null;
+  }
+  _onUrlAddClick() {
+    if (this.disabled || this.readonly) return;
+    this._showUrlInput = true;
+    this._urlInputValue = "";
+  }
+  _onUrlConfirm() {
+    const url = this._urlInputValue.trim();
+    if (!url) return;
+    try {
+      new URL(url);
+    } catch {
+      return;
+    }
+    if (this._images.length < this.max) {
+      this._updateImages([...this._images, { src: url }]);
+    }
+    this._showUrlInput = false;
+    this._urlInputValue = "";
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdInputImage.prototype, "accept");
+__decorateClass([
+  property({ type: String })
+], PdInputImage.prototype, "placeholder");
+__decorateClass([
+  property({ type: Number })
+], PdInputImage.prototype, "max");
+__decorateClass([
+  property({ type: Boolean })
+], PdInputImage.prototype, "selectable");
+__decorateClass([
+  state()
+], PdInputImage.prototype, "_images");
+__decorateClass([
+  state()
+], PdInputImage.prototype, "_previewIndex");
+__decorateClass([
+  state()
+], PdInputImage.prototype, "_showUrlInput");
+__decorateClass([
+  state()
+], PdInputImage.prototype, "_urlInputValue");
+
+export { PdInputImage };

package/dist/pd-input-image/pd-input-image.d.ts

@@ -0,0 +1,4 @@
+import { PdInputImage } from './PdInputImage.js';
+export { PdInputImage };
+export type { ImageSelection } from './PdInputImage.js';
+//# sourceMappingURL=pd-input-image.d.ts.map

package/dist/pd-input-image/pd-input-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-image.d.ts","sourceRoot":"","sources":["../../src/pd-input-image/pd-input-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}