@progressive-development/pd-forms 1.0.2 → 1.0.3

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"}

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

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+export declare const pdInputImageStyles: import('lit').CSSResult;
+//# sourceMappingURL=pd-input-image.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-image.styles.d.ts","sourceRoot":"","sources":["../../src/pd-input-image/pd-input-image.styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,kBAAkB,yBAuS9B,CAAC"}