@progressive-development/pd-forms 0.8.6 → 0.9.1

package/dist/pd-form-container.js

@@ -1,273 +1,8 @@
-import { css, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { msg } from "@lit/localize";
-import { PdBaseUI } from "./pd-base-ui.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdFormContainer = class extends PdBaseUI {
-  constructor() {
-    super(...arguments);
-    this.requiredFieldInfo = false;
-    this.autoTrimm = false;
-    this.commonError = "";
-    this._fields = /* @__PURE__ */ new Map();
-    this._onRegister = (e) => {
-      const { name, value, parsedValue, state: state2 } = e.detail;
-      console.debug("###### _onRegister", name, value, state2);
-      if (!this._fields.has(name)) {
-        this._fields.set(name, {
-          name,
-          value,
-          parsedValue,
-          valid: state2.valid,
-          invalid: state2.invalid,
-          pristine: state2.pristine,
-          dirty: state2.dirty,
-          touched: state2.touched,
-          focused: state2.focus,
-          errors: {},
-          element: e.target
-        });
-        this.requestUpdate();
-        this.dispatchEvent(
-          new CustomEvent("pd-form-change", {
-            detail: {
-              overallValidity: this._getOverallValidity()
-            }
-          })
-        );
-      }
-      e.stopPropagation();
-    };
-    this._onUnRegister = (e) => {
-      const { name, value } = e.detail;
-      console.debug("###### _onUnRegister", name, value);
-      if (this._fields.has(name)) {
-        this._fields.delete(name);
-        this.requestUpdate();
-        this.dispatchEvent(
-          new CustomEvent("pd-form-change", {
-            detail: {
-              overallValidity: this._getOverallValidity()
-            }
-          })
-        );
-      }
-      e.stopPropagation();
-    };
-    this._onUnRegisterBound = this._onUnRegister.bind(this);
-    this._onChange = (e) => {
-      const { name, value, parsedValue, state: state2 } = e.detail;
-      console.debug("###### _onChange", name, value, state2);
-      const field = this._fields.get(name);
-      if (field) {
-        const oldValue = field.value;
-        field.value = value;
-        field.parsedValue = parsedValue;
-        field.pristine = state2.pristine;
-        field.dirty = state2.dirty;
-        field.touched = state2.touched;
-        field.focused = state2.focused;
-        field.valid = state2.valid;
-        field.invalid = state2.invalid;
-        this.requestUpdate();
-        if (value !== oldValue) {
-          this.dispatchEvent(
-            new CustomEvent("pd-form-change", {
-              detail: {
-                overallValidity: this._getOverallValidity()
-              }
-            })
-          );
-        }
-      }
-      e.stopPropagation();
-    };
-    this._onBlur = (e) => {
-      const { name } = e.detail;
-      const field = this._fields.get(name);
-      if (field) {
-        field.touched = true;
-        field.focused = false;
-      }
-      e.stopPropagation();
-    };
-    this._onFocus = (e) => {
-      const { name } = e.detail;
-      const field = this._fields.get(name);
-      if (field) {
-        field.focused = true;
-      }
-      e.stopPropagation();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener(
-      "pd-form-element-register",
-      this._onRegister
-    );
-    this.addEventListener(
-      "pd-form-element-change",
-      this._onChange
-    );
-    this.addEventListener(
-      "pd-form-element-blur",
-      this._onBlur
-    );
-    this.addEventListener(
-      "pd-form-element-focus",
-      this._onFocus
-    );
-    document.addEventListener(
-      "pd-form-element-unregister",
-      this._onUnRegisterBound
-    );
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener(
-      "pd-form-element-register",
-      this._onRegister
-    );
-    this.removeEventListener(
-      "pd-form-element-change",
-      this._onChange
-    );
-    this.removeEventListener(
-      "pd-form-element-blur",
-      this._onBlur
-    );
-    this.removeEventListener(
-      "pd-form-element-focus",
-      this._onFocus
-    );
-    document.removeEventListener(
-      "pd-form-element-unregister",
-      this._onUnRegisterBound
-    );
-  }
-  render() {
-    return html`
-      <form>
-        <slot></slot>
-        ${this.requiredFieldInfo || this.commonError ? this._renderValidationInfo() : ""}
-      </form>
-    `;
-  }
-  _renderValidationInfo() {
-    const allValid = this._getOverallValidity() && !this.commonError;
-    return html`
-      <p class="validation-info ${allValid ? "valid" : "invalid"}">
-        ${allValid ? msg("* Felder ausgefüllt", { id: "pd.form.required.valid" }) : this.commonError || msg("* Pflichtfeld fehlt oder fehlerhaft", {
-      id: "pd.form.required.missing"
-    })}
-      </p>
-    `;
-  }
-  _getOverallValidity() {
-    if (this._fields.size === 0) {
-      return false;
-    }
-    for (const field of this._fields.values()) {
-      if (field.invalid) {
-        return false;
-      }
-    }
-    return true;
-  }
-  async triggerValidate() {
-    const validations = [];
-    this._fields.forEach((field) => {
-      var _a;
-      const result = (_a = field.element) == null ? void 0 : _a.runValidators();
-      if (result instanceof Promise) {
-        validations.push(result);
-      }
-    });
-    await Promise.all(validations);
-    return this._getOverallValidity();
-  }
-  getValues() {
-    const origin = {};
-    const parsed = {};
-    this._fields.forEach((field, key) => {
-      let value = field.value;
-      if (this.autoTrimm === true && typeof value === "string") {
-        value = value.trim();
-      }
-      origin[key] = value;
-      parsed[key] = field.parsedValue;
-    });
-    return { origin, parsed };
-  }
-  reset() {
-    this._fields.forEach((field) => {
-      var _a;
-      (_a = field.element) == null ? void 0 : _a.reset();
-    });
-  }
-  getStatus() {
-    return this._fields;
-  }
-  get valid() {
-    return this._getOverallValidity();
-  }
-};
-PdFormContainer.styles = [
-  PdBaseUI.styles,
-  css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
+import { PdFormContainer } from './pd-form-container/PdFormContainer.js';
 
-      .validation-info {
-        font-family: var(--pd-default-font-content-family);
-        font-size: var(--pd-form-info-font-size, 0.8em);
-        padding-top: 0.8em;
-        color: var(--pd-form-container-default-col, var(--pd-default-dark-col));
-      }
+const tag = "pd-form-container";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdFormContainer);
+}
 
-      .valid {
-        color: var(
-          --pd-form-container-valid-col,
-          var(--pd-default-success-dark-col)
-        );
-      }
-
-      .invalid {
-        color: var(
-          --pd-form-container-invalid-col,
-          var(--pd-default-error-dark-col)
-        );
-      }
-    `
-];
-__decorateClass([
-  property({ type: Boolean })
-], PdFormContainer.prototype, "requiredFieldInfo", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdFormContainer.prototype, "autoTrimm", 2);
-__decorateClass([
-  property({ type: String })
-], PdFormContainer.prototype, "commonError", 2);
-__decorateClass([
-  state()
-], PdFormContainer.prototype, "_fields", 2);
-PdFormContainer = __decorateClass([
-  customElement("pd-form-container")
-], PdFormContainer);
-export {
-  PdFormContainer
-};
+export { PdFormContainer };

package/dist/pd-form-row/PdFormRow.d.ts

@@ -0,0 +1,15 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+/**
+ * Ein flexibles Container-Element zur Darstellung von Formularzeilen mit Slot-Unterstützung.
+ *
+ * @slot - Standard-Slot für Formularelemente
+ * @tagname pd-form-row
+ *
+ * @since 2.0.0
+ */
+export declare class PdFormRow extends PdBaseUI {
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=PdFormRow.d.ts.map

package/dist/pd-form-row/PdFormRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdFormRow.d.ts","sourceRoot":"","sources":["../../src/pd-form-row/PdFormRow.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;;GAOG;AACH,qBAAa,SAAU,SAAQ,QAAQ;IACrC,OAAgB,MAAM,EAAE,cAAc,CA6FpC;IAEF,MAAM;CAGP"}

package/dist/pd-form-row/PdFormRow.js

@@ -0,0 +1,110 @@
+import { css, html } from 'lit';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdFormRow extends PdBaseUI {
+  static {
+    this.styles = [
+      PdBaseUI.styles,
+      css`
+      :host {
+        /* Define size for row, depends on media queries */
+        --my-row-width: var(--pd-form-row-base-width, 800px);
+        --my-gap: var(--pd-form-row-gap, 20px);
+        display: flex;
+        flex: 1 1 100%;
+        /*margin: 0 0 .5rem 0;*/
+        box-sizing: border-box;
+        width: 100%;
+        gap: var(--my-gap);
+        align-items: var(--pd-form-row-align-item, flex-start);
+        justify-content: var(--pd-form-row-justify-content, flex-start);
+        padding-top: var(--pd-form-row-padding-top, 0.8rem);
+      }
+
+      ::slotted(.full-size) {
+        --pd-input-field-width: 100%;
+      }
+
+      ::slotted(.quarter1) {
+        --pd-input-field-width: calc(
+          var(--my-row-width) * 0.25 - (var(--my-gap) * 0.75)
+        );
+      }
+
+      ::slotted(.quarter1-area) {
+        --pd-input-field-width: calc(
+          (var(--my-row-width) - 5px) * 0.25 - (var(--my-gap) * 0.75)
+        );
+      }
+
+      ::slotted(.quarter2) {
+        --pd-input-field-width: calc(
+          (var(--my-row-width) * 0.5) - (var(--my-gap) / 2)
+        );
+      }
+
+      ::slotted(.quarter2-area) {
+        --pd-input-field-width: calc(
+          ((var(--my-row-width) - 8px) * 0.5) - (var(--my-gap) / 2)
+        );
+      }
+
+      ::slotted(.quarter3) {
+        --pd-input-field-width: calc(
+          var(--my-row-width) * 0.75 - (var(--my-gap) * 0.25)
+        );
+      }
+
+      ::slotted(.quarter3-area) {
+        --pd-input-field-width: calc(
+          (var(--my-row-width) - 10px) * 0.75 - (var(--my-gap) * 0.25)
+        );
+      }
+
+      ::slotted(.quarter4) {
+        --pd-input-field-width: var(--my-row-width);
+      }
+
+      ::slotted(.quarter4-area) {
+        --pd-input-field-width: calc(var(--my-row-width) - 15px);
+      }
+
+      @media (max-width: 930px) {
+        :host {
+          --my-row-width: 600px;
+        }
+      }
+
+      @media (max-width: 665px) {
+        :host {
+          --my-row-width: 400px;
+          --my-gap: 10px;
+        }
+      }
+
+      @media (max-width: 465px) {
+        :host {
+          --my-row-width: 320px;
+          --my-gap: 8px;
+        }
+      }
+
+      @media (max-width: 390px) {
+        :host {
+          --my-row-width: 260px;
+          --my-gap: 8px;
+        }
+      }
+    `
+    ];
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+export { PdFormRow };

package/dist/pd-form-row/pd-form-row.d.ts

@@ -0,0 +1,3 @@
+import { PdFormRow } from './PdFormRow.js';
+export { PdFormRow };
+//# sourceMappingURL=pd-form-row.d.ts.map

package/dist/pd-form-row/pd-form-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-row.d.ts","sourceRoot":"","sources":["../../src/pd-form-row/pd-form-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO3C,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/{stories/form-row.stories.d.ts → pd-form-row/pd-form-row.stories.d.ts}

@@ -24,4 +24,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj;
 export declare const FormRow: Story;
-//# sourceMappingURL=form-row.stories.d.ts.map
+//# sourceMappingURL=pd-form-row.stories.d.ts.map

package/dist/pd-form-row/pd-form-row.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-row.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-row/pd-form-row.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,kBAAkB,CAAC;AAG1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/dist/pd-form-row.d.ts

@@ -1,12 +1,2 @@
-import { CSSResultGroup } from 'lit';
-import { PdBaseUI } from './pd-base-ui.js';
-/**
- * Ein flexibles Container-Element zur Darstellung von Formularzeilen mit Slot-Unterstützung.
- *
- * @slot - Standard-Slot für Formularelemente
- */
-export declare class PdFormRow extends PdBaseUI {
-    static styles: CSSResultGroup;
-    render(): import('lit-html').TemplateResult<1>;
-}
-//# sourceMappingURL=pd-form-row.d.ts.map
+export * from './pd-form-row/pd-form-row'
+export {}

package/dist/pd-form-row.js

@@ -1,116 +1,8 @@
-import { css, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { PdBaseUI } from "./pd-base-ui.js";
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(result) || result;
-  return result;
-};
-let PdFormRow = class extends PdBaseUI {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-PdFormRow.styles = [
-  PdBaseUI.styles,
-  css`
-      :host {
-        /* Define size for row, depends on media queries */
-        --my-row-width: var(--pd-form-row-base-width, 800px);
-        --my-gap: var(--pd-form-row-gap, 20px);
-        display: flex;
-        flex: 1 1 100%;
-        /*margin: 0 0 .5rem 0;*/
-        box-sizing: border-box;
-        width: 100%;
-        gap: var(--my-gap);
-        align-items: var(--pd-form-row-align-item, flex-start);
-        justify-content: var(--pd-form-row-justify-content, flex-start);
-        padding-top: var(--pd-form-row-padding-top, 0.8rem);
-      }
+import { PdFormRow } from './pd-form-row/PdFormRow.js';
 
-      ::slotted(.full-size) {
-        --pd-input-field-width: 100%;
-      }
+const tag = "pd-form-row";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdFormRow);
+}
 
-      ::slotted(.quarter1) {
-        --pd-input-field-width: calc(
-          var(--my-row-width) * 0.25 - (var(--my-gap) * 0.75)
-        );
-      }
-
-      ::slotted(.quarter1-area) {
-        --pd-input-field-width: calc(
-          (var(--my-row-width) - 5px) * 0.25 - (var(--my-gap) * 0.75)
-        );
-      }
-
-      ::slotted(.quarter2) {
-        --pd-input-field-width: calc(
-          (var(--my-row-width) * 0.5) - (var(--my-gap) / 2)
-        );
-      }
-
-      ::slotted(.quarter2-area) {
-        --pd-input-field-width: calc(
-          ((var(--my-row-width) - 8px) * 0.5) - (var(--my-gap) / 2)
-        );
-      }
-
-      ::slotted(.quarter3) {
-        --pd-input-field-width: calc(
-          var(--my-row-width) * 0.75 - (var(--my-gap) * 0.25)
-        );
-      }
-
-      ::slotted(.quarter3-area) {
-        --pd-input-field-width: calc(
-          (var(--my-row-width) - 10px) * 0.75 - (var(--my-gap) * 0.25)
-        );
-      }
-
-      ::slotted(.quarter4) {
-        --pd-input-field-width: var(--my-row-width);
-      }
-
-      ::slotted(.quarter4-area) {
-        --pd-input-field-width: calc(var(--my-row-width) - 15px);
-      }
-
-      @media (max-width: 930px) {
-        :host {
-          --my-row-width: 600px;
-        }
-      }
-
-      @media (max-width: 665px) {
-        :host {
-          --my-row-width: 400px;
-          --my-gap: 10px;
-        }
-      }
-
-      @media (max-width: 465px) {
-        :host {
-          --my-row-width: 320px;
-          --my-gap: 8px;
-        }
-      }
-
-      @media (max-width: 390px) {
-        :host {
-          --my-row-width: 260px;
-          --my-gap: 8px;
-        }
-      }
-    `
-];
-PdFormRow = __decorateClass([
-  customElement("pd-form-row")
-], PdFormRow);
-export {
-  PdFormRow
-};
+export { PdFormRow };

package/dist/pd-hover-box/PdHoverBox.d.ts

@@ -0,0 +1,31 @@
+import { TemplateResult, CSSResultGroup } from 'lit';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+/**
+ * @tagname pd-hover-box
+ * A floating hover container for displaying slot-based info.
+ *
+ * @slot normal-view - Trigger (e.g. icon)
+ * @slot info-view - Info content
+ * @event toggle-info - Fired when info box is toggled
+ */
+export declare class PdHoverBox extends PdBaseUI {
+    /**
+     * Controls visibility of the info box
+     */
+    private _visible;
+    /**
+     * True if the info box should open downward
+     */
+    private _toBottom;
+    static styles: CSSResultGroup;
+    render(): TemplateResult;
+    /**
+     * Activates and positions the info box based on current viewport height.
+     */
+    private _activateInfo;
+    /**
+     * Hides the info box again
+     */
+    private _closeInfo;
+}
+//# sourceMappingURL=PdHoverBox.d.ts.map

package/dist/pd-hover-box/PdHoverBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdHoverBox.d.ts","sourceRoot":"","sources":["../../src/pd-hover-box/PdHoverBox.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;;GAOG;AACH,qBAAa,UAAW,SAAQ,QAAQ;IACtC;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAgB,MAAM,EAAE,cAAc,CAqDpC;IAEO,MAAM,IAAI,cAAc;IAqBjC;;OAEG;IACH,OAAO,CAAC,aAAa;IAqBrB;;OAEG;IACH,OAAO,CAAC,UAAU;CAGnB"}