@progressive-development/pd-spa-helper 0.3.101 → 0.3.103

package/dist/node_modules/@lit/reactive-element/decorators/custom-element.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e = (e2) => (n) => "function" == typeof n ? ((e3, n2) => (customElements.define(e3, n2), n2))(e2, n) : ((e3, n2) => {
+  const { kind: t, elements: s } = n2;
+  return { kind: t, elements: s, finisher(n3) {
+    customElements.define(e3, n3);
+  } };
+})(e2, n);
+export {
+  e as customElement
+};

package/dist/node_modules/@lit/reactive-element/decorators/property.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i = (i2, e2) => "method" === e2.kind && e2.descriptor && !("value" in e2.descriptor) ? { ...e2, finisher(n2) {
+  n2.createProperty(e2.key, i2);
+} } : { kind: "field", key: Symbol(), placement: "own", descriptor: {}, originalKey: e2.key, initializer() {
+  "function" == typeof e2.initializer && (this[e2.key] = e2.initializer.call(this));
+}, finisher(n2) {
+  n2.createProperty(e2.key, i2);
+} }, e = (i2, e2, n2) => {
+  e2.constructor.createProperty(n2, i2);
+};
+function n(n2) {
+  return (t, o) => void 0 !== o ? e(n2, t, o) : i(n2, t);
+}
+export {
+  n as property
+};

package/dist/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var n;
+null != (null === (n = window.HTMLSlotElement) || void 0 === n ? void 0 : n.prototype.assignedElements) ? (o, n2) => o.assignedElements(n2) : (o, n2) => o.assignedNodes(n2).filter((o2) => o2.nodeType === Node.ELEMENT_NODE);

package/dist/node_modules/@progressive-development/pd-dialog/pd-popup-dialog.js

@@ -0,0 +1,5 @@
+import { PdPopupDialog } from "./src/PdPopupDialog.js";
+window.customElements.define("pd-popup-dialog", PdPopupDialog);
+export {
+  PdPopupDialog
+};

package/dist/node_modules/@progressive-development/pd-dialog/pd-popup.js

@@ -0,0 +1,2 @@
+import { PdPopup } from "./src/PdPopup.js";
+window.customElements.define("pd-popup", PdPopup);

package/dist/node_modules/@progressive-development/pd-dialog/src/PdPopup.js

@@ -0,0 +1,113 @@
+import { LitElement, css, html } from "lit";
+import { ICON_CLOSE } from "../../pd-icon/src/PdIcon.js";
+import "../../pd-icon/pd-icon.js";
+import { PDColorStyles } from "../../pd-shared-styles/src/shared-color-styles.js";
+import "../../pd-shared-styles/src/shared-font-styles.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdPopup extends LitElement {
+  static get styles() {
+    return [
+      PDColorStyles,
+      css`
+      :host {
+        display: block;
+      }
+
+      /* The Modal (background) */
+      .modal {
+        position: fixed; /* Stay in place */
+        z-index: 100; /* Sit on top */        
+        left: 0;
+        top: 0;
+        width: 100%; /* Full width */
+        height: 100%; /* Full height */
+        overflow: auto; /* Enable scroll if needed */
+        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
+        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8)); 
+
+        /* specific for PdPopup, abobe also used for PdPopupDialog */
+        display: var(--pd-popup-default-display, none); /* Hidden by default */
+        padding-top: 100px; /* Location of the box */        
+      }
+
+      /* Modal Content */
+      .modal-content {        
+        background-color: var(--pd-default-bg-col);
+        opacity: 1;
+        margin: auto;
+        padding: var(--pd-popup-modal-padding, 20px);
+        padding-bottom: 130px;
+        border: 2px solid var(--pd-default-col);
+        width: 80%;
+        max-width: 1200px;
+        position: relative;
+      }
+
+      .modal-content-slot {
+        max-width: var(--pd-popup-modal-slot-max-width, 1000px);
+        margin: var(--pd-popup-modal-slot-margin, 0 30px);
+      }
+
+      .close-icon {        
+        position: absolute;        
+        cursor: pointer;
+        right: 1.2em;
+        top: 1.2em;
+      }`
+    ];
+  }
+  render() {
+    return html`
+      <!-- Trigger/Open The Modal -->
+      <span @click="${this._activatePopup}" @keypress="${this._activatePopup}"
+        ><slot name="small-view"></slot
+      ></span>
+
+      <!-- The Modal -->
+      <div id="modalId" class="modal">
+        <!-- Modal content -->
+        <div class="modal-content">
+          <pd-icon icon="${ICON_CLOSE}" class="close-icon"
+            @click="${this._closePopup}"></pd-icon>          
+          <div class="modal-content-slot">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  showPopup() {
+    this._activatePopup();
+  }
+  hidePopup() {
+    this._closePopup();
+  }
+  _activatePopup() {
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "block";
+  }
+  _closePopup() {
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "none";
+    this.dispatchEvent(
+      new CustomEvent("popup-close", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /*
+    // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+  */
+}
+export {
+  PdPopup
+};

package/dist/node_modules/@progressive-development/pd-dialog/src/PdPopupDialog.js

@@ -0,0 +1,189 @@
+import { LitElement, css, html } from "lit";
+import "../../pd-forms/pd-button.js";
+import { PDColorStyles } from "../../pd-shared-styles/src/shared-color-styles.js";
+import { PDFontStyles } from "../../pd-shared-styles/src/shared-font-styles.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdPopupDialog extends LitElement {
+  /**
+   * @event submit-button-clicked - fired if one of the configured buttons was clicked.
+   */
+  static get styles() {
+    return [
+      PDColorStyles,
+      PDFontStyles,
+      css`
+      :host {
+        display: block;
+      }
+
+      /* The Modal (background) */
+      .modal {
+        position: fixed; /* Stay in place */
+        z-index: 100; /* Sit on top */        
+        left: 0;
+        top: 0;
+        width: 100%; /* Full width */
+        height: 100%; /* Full height */
+        overflow: auto; /* Enable scroll if needed */
+        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
+        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8)); 
+
+        display: block;        
+        padding-top: 150px; /* Location of the box */
+        padding-left: 10px;
+        padding-right: 10px;
+      }      
+
+      .modal-content {        
+        margin: auto;
+        border: 1px solid var(--pd-default-light-col);
+        box-shadow: -4px 4px 10px var(--pd-default-dark-col);
+        max-width: var(--pd-popup-max-width, 700px);
+      }
+
+      .header {        
+        display: flex;
+        gap: 0.5em;
+        align-items: center;
+        background-color: var(--pd-popup-header-col, var(--pd-default-col));
+        height: var(--pd-popup-header-height, 45px);
+        padding-left: 0.5em;
+      }
+
+      .header-txt {
+        font-family: var(--pd-default-font-title-family);
+        font-size: var(--pd-popup-header-font-size, 1.3em);
+        color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
+      }
+
+      .info-logo {
+        width: 2em;
+      }
+
+      .error {
+        --pd-icon-col: #FF3232;
+        --pd-icon-stroke-width: 0;
+      }
+
+      .info, .help {
+        --pd-icon-col: #6B86FF;
+        --pd-icon-stroke-width: 0;
+      }
+
+      .warn {
+        --pd-icon-col: #FFBF00;
+        --pd-icon-stroke-width: 0;
+      }
+
+      .content {
+        padding: 0.5rem 1rem 1rem 1rem;
+        background-color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
+        height: 100%;
+      }
+
+      .footer {
+        display: flex;        
+
+        background: linear-gradient(to right, 
+          var(--pd-popup-footer-col, var(--pd-default-light-col)) 0%, var(--pd-default-disabled-light-col) 100%);
+
+        height: 70px;
+        align-items: center;
+        justify-content: space-around;
+      }
+    `
+    ];
+  }
+  static get properties() {
+    return {
+      type: { type: String },
+      title: { type: String },
+      buttons: { type: Array }
+    };
+  }
+  constructor() {
+    super();
+    this.type = "info";
+    this.title = "Popup Title";
+    this.buttons = [];
+  }
+  render() {
+    return html`
+      <!-- The Modal -->
+      <div id="modalId" class="modal">
+        <!-- Modal content -->
+        <div class="modal-content">
+          <div class="header">
+            ${this._getIconForType()}
+            <span class="header-txt">${this.title}</span>
+          </div>
+          <div class="content">
+            <slot name="content"></slot>
+          </div>
+          <div class="footer">
+            ${this.buttons.map(
+      (bt) => html`
+                <pd-button
+                  data-key="${bt.key}"
+                  @button-clicked="${this._handleButtonEvent}"
+                  ?disabled="${bt.disabled}"
+                  ?primary="${bt.primary}"
+                  text="${bt.name}"
+                ></pd-button>
+              `
+    )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  _handleButtonEvent(e) {
+    this.dispatchEvent(
+      new CustomEvent("submit-button-clicked", {
+        detail: {
+          button: e.target.dataset.key
+        }
+      })
+    );
+  }
+  _getIconForType() {
+    if (!this.type || this.type === "") {
+      return "";
+    }
+    switch (this.type) {
+      case "warn":
+        return html`<pd-icon icon="warningIconFld" class="info-logo warn"></pd-icon>`;
+      case "error":
+        return html`<pd-icon icon="errorIconFld" class="info-logo error"></pd-icon>`;
+      case "help":
+        return html`<pd-icon icon="helpIconFld" class="info-logo help"></pd-icon>`;
+      default:
+        return html`<pd-icon icon="infoIconFld" class="info-logo info"></pd-icon>`;
+    }
+  }
+  showPopup() {
+    this._activatePopup();
+  }
+  _activatePopup() {
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "block";
+  }
+  _closePopup() {
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "none";
+  }
+  /*
+    // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+  */
+}
+export {
+  PdPopupDialog
+};

package/dist/node_modules/@progressive-development/pd-forms/pd-button.js

@@ -0,0 +1,2 @@
+import { PdButton } from "./src/PdButton.js";
+window.customElements.define("pd-button", PdButton);

package/dist/node_modules/@progressive-development/pd-forms/pd-form-container.js

@@ -0,0 +1,2 @@
+import { PdFormContainer } from "./src/PdFormContainer.js";
+window.customElements.define("pd-form-container", PdFormContainer);

package/dist/node_modules/@progressive-development/pd-forms/pd-form-row.js

@@ -0,0 +1,2 @@
+import { PdFormRow } from "./src/PdFormRow.js";
+window.customElements.define("pd-form-row", PdFormRow);

package/dist/node_modules/@progressive-development/pd-forms/pd-hover-box.js

@@ -0,0 +1,2 @@
+import { PdHoverBox } from "./src/PdHoverBox.js";
+window.customElements.define("pd-hover-box", PdHoverBox);

package/dist/node_modules/@progressive-development/pd-forms/pd-input.js

@@ -0,0 +1,2 @@
+import { PdInput } from "./src/PdInput.js";
+window.customElements.define("pd-input", PdInput);

package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseInputElement.js

@@ -0,0 +1,86 @@
+import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
+import { SharedInputFieldStyles } from "./shared-input-field-styles.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *
+ * Abstract base lit class for pd-input elements.
+ *
+ * Used from:
+ * - pd-input
+ * - pd-input-area
+ * - pd-select
+ *
+ * Used to:
+ * - define element specific css
+ * - handle auto completion
+ *
+ * Events:
+ * - TODO
+ *
+ * Custom Properties (shared-input-field-styles):
+ * ... TODO
+ *
+ */
+class PdBaseInputElement extends PdBaseUIInput {
+  /**
+   * Fire when the `pd-input` loses focus.
+   * @event focus-lost
+   */
+  static get styles() {
+    return [PdBaseUIInput.styles, SharedInputFieldStyles];
+  }
+  static get properties() {
+    return {
+      placeHolder: { type: String },
+      /* not used at the moment */
+      name: { type: String },
+      autoCompleteName: { type: String }
+    };
+  }
+  constructor() {
+    super();
+    this.placeHolder = "";
+    this.name = "";
+    this._input = {};
+  }
+  firstUpdated() {
+    this._input = this.shadowRoot.querySelector(this._getElementName());
+  }
+  focus() {
+    this._input.focus();
+  }
+  _onBlur(event) {
+    this.dispatchEvent(
+      new CustomEvent("focus-lost", {
+        detail: {
+          value: this._input.value
+        },
+        composed: true,
+        bubbles: true
+      })
+    );
+    this._handleChangedValue(this._input.value, event, true, true);
+  }
+  _onKeyUp(event) {
+    this._handleChangedValue(this._input.value, event, true);
+  }
+  _getElementName() {
+    switch (this._inputType) {
+      case INPUT_TYPE_AREA:
+        return "textarea";
+      case INPUT_TYPE_SELECT:
+        return "select";
+      case INPUT_TYPE_FILE:
+      case INPUT_TYPE_TEXT:
+        return "input";
+      case INPUT_TYPE_DATE:
+        return "pd-input";
+      default:
+        return "";
+    }
+  }
+}
+export {
+  PdBaseInputElement
+};

package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseUi.js

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+import { updateWhenLocaleChanges } from "@lit/localize";
+import { PDColorStyles } from "../../pd-shared-styles/src/shared-color-styles.js";
+import { PDFontStyles } from "../../pd-shared-styles/src/shared-font-styles.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *  
+ * Abstract base lit class for all pd-form elements.
+ * Import shared-global-style to make common custom properties available to all components.
+ * 
+ * Used from:
+ * - pd-base-ui-input
+ * 
+ * Used to:
+ * - define css (import shared-global-styles.js)
+ * - define common properties (detailieren, aktuell keine)
+ * - define updateWhenLocaleChanges for all pd-elements (check, aktuell nur für pd-form-container benötigt)
+ * 
+ * Custom Properties (shared-global-styles):
+ * ... TODO
+ */
+class PdBaseUI extends LitElement {
+  static get styles() {
+    return [PDColorStyles, PDFontStyles];
+  }
+  constructor() {
+    super();
+    updateWhenLocaleChanges(this);
+  }
+}
+export {
+  PdBaseUI
+};