@progressive-development/pd-spa-helper 0.4.0 → 0.5.0

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

@@ -1,136 +0,0 @@
-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

@@ -1,224 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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
-};