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

package/dist/node_modules/@progressive-development/pd-order/dist/node_modules/@progressive-development/pd-content/src/PdCollapse.js

@@ -0,0 +1,136 @@
+import { LitElement, css, html } from "lit";
+import { ICON_TOGGLE_COLLAPSE } from "../../pd-icon/src/PdIcon.js";
+import "../../pd-icon/pd-icon.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 PdCollapse extends LitElement {
+  static get properties() {
+    return {
+      active: { type: Boolean },
+      icon: { type: String }
+    };
+  }
+  constructor() {
+    super();
+    this.active = false;
+  }
+  static get styles() {
+    return [
+      PDColorStyles,
+      PDFontStyles,
+      css`
+        :host {          
+          display: block;
+          width: 100%;
+          position: relative;
+          overflow: visible;
+        }
+        
+        :host .content.open {
+          border: 2px solid var(--pd-default-light-col);
+          background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
+          margin-bottom: 1rem;
+          position: relative;
+          overflow: visible;
+        }
+
+        pd-icon {
+          --pd-icon-stroke-col-active: var(--pd-default-bg-col);
+          --pd-icon-col-active: var(--pd-default-dark-col);      
+          --pd-icon-col-hover: var(--pd-default-dark-col);
+          --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
+          --pd-icon-col-active-hover: var(--pd-default-dark-col);
+          --pd-icon-stroke-col-active-hover: var(--pd-default-hover-col);
+        }
+
+        .trigger {
+          background: var(--pd-collapse-bg-col, var(--pd-default-col));
+          font-family: var(--pd-default-font-title-family);
+          font-weight: bold;
+          color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
+          transition-property: box-shadow, background;
+          transition: 0.2s ease-in;
+          cursor: pointer;
+          font-size: var(--pd-collapse-header-font-size, 1rem);
+          padding: 0.5rem;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+          position: relative;
+        }
+
+        ::slotted(.header) {
+          display: flex;
+          align-items: center;
+        }
+
+        .trigger:hover {
+          background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));          
+        }
+
+        .trigger.closed {
+          margin-bottom: 1rem;
+        }
+
+        .content {
+          will-change: transform;
+          height: 0;
+          overflow: hidden;
+          transition-property: visibility, transform;
+          transition-duration: 0.2s;
+          visibility: hidden;
+          transform: translate3d(0, -100%, 0);
+          box-sizing: border-box;
+
+          padding: 0.5em;
+        }
+
+        .content.open {
+          visibility: visible;
+          height: auto;
+          transform: translate3d(0, 0, 0);
+          overflow-y: auto;
+        }
+      `
+    ];
+  }
+  open() {
+    this.active = true;
+  }
+  close() {
+    this.active = false;
+  }
+  onClick() {
+    this.active = !this.active;
+    this.dispatchEvent(
+      new CustomEvent("toggle-accordion", {
+        bubbles: true,
+        composed: true,
+        detail: this.active
+      })
+    );
+  }
+  render() {
+    return html`<div
+        class="trigger ${this.active ? "open" : "closed"}"
+        @click="${this.onClick}"
+      >
+        <slot name="header"></slot>
+        <pd-icon
+          icon="${ICON_TOGGLE_COLLAPSE}"
+          ?activeIcon="${this.active}"
+          class="small primary"          
+        ></pd-icon>
+      </div>
+      <div class="content ${this.active ? "open" : "closed"}">
+        <slot name="content"></slot>
+      </div> `;
+  }
+}
+export {
+  PdCollapse
+};

package/dist/node_modules/@progressive-development/pd-order/dist/node_modules/@progressive-development/pd-content/src/PdEditContent.js

@@ -0,0 +1,224 @@
+import { html, LitElement, css } from "lit";
+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.
+ */
+const editIcon = html`<svg
+                    class="edit"
+                    id="Layer_1"
+                    version="1.1"
+                    viewBox="0 0 19 19"
+                    xml:space="preserve"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    >
+                    <g>
+                      <path
+                        d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69   C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041   c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
+                        fill="var(--edit-fill-color)"
+                      />
+                      <path
+                        d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798   C18.867,3.205,18.824,2.209,18.183,1.568z"
+                        fill="var(--edit-fill-color)"
+                      />
+                      <path
+                        d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293   c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
+                        fill="var(--edit-fill-color)"
+                      />
+                    </g>
+                  </svg>`;
+class PdEditContent extends LitElement {
+  /**
+   * @event edit-content
+   */
+  static get styles() {
+    return [
+      PDColorStyles,
+      PDFontStyles,
+      css`
+       :host { 
+         display: block;
+       }
+ 
+       h4 {
+         font-family: var(--pd-default-font-title-family);
+         font-size: var(--pd-ec-font-title-size, 1.2em);
+         margin-top: 0px;
+         margin-bottom: 2px;
+         line-height: 40px;
+         color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
+         padding-left: 5px;
+       }
+ 
+       .header {
+         display: flex;
+         gap: 5px;
+         background-color: var(--pd-ec-bg-col, var(--pd-default-col));
+         align-items: center;
+       }
+ 
+       .circle {
+         margin-left: 5px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         width: 27px;
+         height: 27px;
+         border-radius: 50%;
+         background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
+       }
+ 
+       .step-number {
+         font-family: var(--pd-default-font-title-family);
+         font-size: var(--pd-ec-font-title-size, 1.2em);    
+         font-weight: var(--pd-ec-nr-font-weight, bold);    ;
+         color: var(--pd-ec-bg-col, var(--pd-default-col));
+       }
+ 
+       /* Temporär? Hier noch sehr aufwendig mit div/span? */
+ 
+       .label {
+         display: inline-block;
+         font-weight: bold;
+         width: 200px;
+         padding-top: 10px;
+       }
+ 
+       /* Temporär */
+       a {
+        cursor: pointer; 
+        font-family: var(--pd-default-font-link-family);
+        font-size: var(--pd-default-font-link-size);
+        color: var(--pd-default-font-link-col);
+        --edit-fill-color: var(--pd-default-font-link-col);
+       }
+       a:hover {
+         color: var(--pd-default-font-link-col-hover);         
+         --edit-fill-color: var(--pd-default-font-link-col-hover);
+       }
+ 
+       .edit {
+         width: 1.1em;
+       }
+       /* 
+        could used as class for given svg icons, workaround class 
+        hard coded for specific icon => maybe use custom properties here, but not for that hack...
+       */
+       .own-edit-icon {
+          width: 2em;
+          margin-top: -10px;          
+       }
+
+       .link-row {
+          padding-top: 5px;
+          padding-bottom: 5px;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 15px;
+       }
+
+       .link-item {
+          display: flex;
+          gap: 2px;
+          white-space: nowrap;
+          align-items: center;
+          pointer-events: none;
+       }
+
+       .param-data {
+         padding-bottom: 10px;
+       }
+ 
+       @media (max-width: 360px) {
+         .label {
+           width: 130px;
+         }
+       }
+     `
+    ];
+  }
+  static get properties() {
+    return {
+      stepNumber: { type: Number },
+      contentTitle: { type: String },
+      data: { type: Array },
+      editLinks: { type: Array },
+      // TODO: [TIM-37] Put together with edit icon/editDisabled
+      editDisabled: { type: Boolean }
+    };
+  }
+  constructor() {
+    super();
+    this.stepNumber = void 0;
+    this.contentTitle = "";
+    this.data = [];
+    this.editLinks = [];
+    this.editDisabled = false;
+  }
+  render() {
+    return html`
+       <div class="header">
+         ${this.stepNumber ? html`
+               <div class="circle">
+                 <span class="step-number">${this.stepNumber}</span>
+               </div>
+             ` : ""}
+         <h4>${this.contentTitle}</h4>
+       </div>
+       <div>
+         ${this.data ? html`
+              <div class="param-data">
+                ${this.data.map(
+      (dataEntry) => html`
+                  <div>
+                    <span class="label">${dataEntry.name}</span>
+                    <span class="value">${dataEntry.val}</span>
+                  </div>
+                `
+    )}
+              </div>` : ""}
+         <slot></slot>
+         <div class="link-row">
+           ${this.editDisabled ? "" : html`
+                 <a @click="${this._editContent}">
+                   <div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
+                 </a>
+               `}
+           ${this.editLinks.map(
+      (link) => html`
+             <a data-link="${link.key}" @click="${this._editContent}">
+                <div class="link-item">${PdEditContent._getLinkLogo(link)} ${link.txt}</div>
+             </a>`
+    )}
+         </div>
+       </div>
+     `;
+  }
+  static _getLinkLogo(link) {
+    if (link.icon) {
+      return link.icon;
+    }
+    if (link.defaultIcon) {
+      return editIcon;
+    }
+    return "";
+  }
+  _editContent(e) {
+    const { link } = e.target.dataset;
+    this.dispatchEvent(
+      new CustomEvent("edit-content", {
+        detail: {
+          step: this.stepNumber,
+          link
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+}
+export {
+  PdEditContent
+};

package/dist/node_modules/@progressive-development/pd-order/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-order/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-order/dist/node_modules/@progressive-development/pd-forms/pd-checkbox.js

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

package/dist/node_modules/@progressive-development/pd-order/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-order/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-order/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-order/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-order/dist/node_modules/@progressive-development/pd-forms/pd-radio-group.js

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

package/dist/node_modules/@progressive-development/pd-order/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-order/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
+};