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

package/src/defaultpage/default-dialog-popup.ts

@@ -1,105 +0,0 @@
-import { html, LitElement, css, CSSResultGroup, HTMLTemplateResult } from "lit";
-import { property } from "lit/decorators.js";
-
-import '@progressive-development/pd-dialog/pd-popup-dialog.js';
-import '@progressive-development/pd-forms/pd-form-container.js';
-
-import { ABORT_EVENT_NAME, KEY_ABORT, KEY_STORE, STORE_EVENT_NAME } from "./default-confirm-popup.js";
-
-
-export abstract class DefaultDialogPopup<T> extends LitElement {
-
-  @property({type: Array, state: true})
-  protected _dialogButtons: Array<any> = [
-    {key: KEY_ABORT, name: "Cancel"},
-    {key: KEY_STORE, name: "Save", disabled: true, primary: true}
-  ];
-
-  protected _requiredFieldInfo: boolean = true;  
-
-  abstract _formData:T;
-
-  abstract _popupTitle: string;
-
-  static styles = [        
-    css`
-      :host {
-        --pd-popup-max-width: 800px;
-        --pd-popup-header-height: 50px;
-        --pd-popup-header-font-size: 1em;
-        --pd-popup-header-col: var(--app-primary-dark-col);
-        
-        --pd-button-width: var(--pd-dialog-popup-button-width, 100px);
-        --pd-button-height: 35px;
-        --pd-button-font-size: 0.8rem;
-      }
-    `
-  ] as CSSResultGroup;
-  
-
-  render() {        
-    return html`
-      <pd-popup-dialog @submit-button-clicked="${this._handleButtonClick}"
-        title="${this._popupTitle}" .buttons="${this._dialogButtons}">
-                
-        <pd-form-container slot="content" id="formContainerId" ?requiredFieldInfo="${this._requiredFieldInfo}"
-          @field-change="${this._checkFormData}">
-
-          ${this._renderContent()}
-
-        </pd-form-container>
-
-      </pd-popup-dialog>
-    `;
-  }
-
-  protected _handleButtonClick(e: CustomEvent) {
-    let newEvent;
-    if (e.detail.button === KEY_STORE && this._isValidFormData()) {
-      this._dialogButtons = [
-        this._dialogButtons[0],
-        {
-          ...this._dialogButtons[1],
-          disabled: true
-        }
-      ];
-      newEvent = new CustomEvent(STORE_EVENT_NAME, 
-        {
-          detail: this._formData
-        }
-      );
-    } else {
-      newEvent = new CustomEvent(ABORT_EVENT_NAME);
-    }
-    this.dispatchEvent(newEvent);    
-  }
-
-  protected _checkFormData() {
-    this._dialogButtons = [
-      this._dialogButtons[0],
-      {
-        ...this._dialogButtons[1],
-        disabled: !this._isValidFormData()
-      }
-    ];
-  }
-
-  protected _triggerValidateForm() {
-    
-    // trigger validate by event (needed for form wich is initial filled, otherwise "Pflichfeld" occurs in red => must be fixed in the component)
-    const detail = {
-      errorMap: new Map()
-    };
-    this.shadowRoot?.getElementById("formContainerId")?.dispatchEvent(
-      new CustomEvent("validate-form", {detail})
-    );
-
-    // trigger also button check (initial valid)
-    this._dialogButtons[1].disabled = this._isValidFormData();
-  }
-
-  abstract _isValidFormData(): boolean;
-
-  abstract _renderContent(): HTMLTemplateResult;  
-
-}

package/src/defaultpage/default-login.ts

@@ -1,41 +0,0 @@
-import { html, css, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import { DefaultViewPage } from "./default-view-page.js";
-import { isAuthenticatedImpl } from "../service-provider/service-provider-impl.js";
-import { pdStore } from "../store/mini-rx.store.js";
-import { routeAction } from "../store/spa-app-actions.js";
-
-import '../tmpown/pd-login.js';
-
-
-@customElement("default-login")
-export class DefaultLogin extends DefaultViewPage {
-
-  static styles = [    
-    css`          
-      :host {
-        padding-top: 3em;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }                    
-      `
-  ];
-
-  protected update(changedProperties: PropertyValues): void {
-    if (changedProperties.has("active") && this.active) {
-      if (isAuthenticatedImpl()) {
-        pdStore().dispatch(routeAction(""));
-      }
-    }
-    super.update(changedProperties);
-  }
-
-  render() {
-    return html`
-      <pd-login></pd-login>
-    `;
-  }
-
-}

package/src/defaultpage/default-popup.ts

@@ -1,26 +0,0 @@
-import { html, LitElement, css, CSSResultGroup, HTMLTemplateResult } from "lit";
-
-import '@progressive-development/pd-dialog/pd-popup.js';
-
-export abstract class DefaultPopup extends LitElement {  
-
-  static styles = [        
-    css`
-      :host {
-        --pd-popup-default-display: block;
-        /* --pd-popup-modal-bg-rgba */
-      }
-    `
-  ] as CSSResultGroup;
-
-  render() {        
-    return html`
-      <pd-popup id="pdPopupId">
-        ${this._renderContent()}
-      </pd-popup>
-    `;
-  }
-
-  abstract _renderContent(): HTMLTemplateResult;
-
-}

package/src/defaultpage/default-step-address.ts

@@ -1,57 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-
-import '@progressive-development/pd-order/pd-order-contacts.js';
-
-import { DefaultWizardStep } from './default-wizard-step.js';
-
-
-export abstract class DefaultStepAddress<T> extends DefaultWizardStep<T, any> {
-
-  @property({type: Object})
-  match?: unknown;
-
-  @property({type: Object})
-  contacts?: any;
-
-  @property({type: Boolean})
-  withPayment: boolean = false;
-
-  _formId: string = "orderContactId";
-
-  abstract _addressTitle:string;  
-
-  abstract _addressInfo?:string;
-
-  abstract _requiredFields?:string[];
-
-
-  renderContacts() {
-    return html`
-      ${this._addressInfo ? html`
-      <p>${this._addressInfo}</p>
-      ` : ""}
-      <pd-order-contacts ?withPayment="${this.withPayment}" id="${this._formId}" .match="${this.match}"
-        .orderContact="${this.contacts?.orderContact}" .billingContact="${this.contacts?.billingContact}"
-        .requiredFields="${this._requiredFields}"
-      ></pd-order-contacts>
-    `;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  setFormData(currentOrder: T, eventDetailFormData: any) {
-    return {
-      ...currentOrder,
-      contacts: {
-        orderContact: eventDetailFormData.orderContactId,
-        billingContact: eventDetailFormData.billingContactId,
-      }
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  _initWithValidation(): boolean {
-    // not needed, pd-order-contacts already implement that process internally
-    return false;
-  }
-}

package/src/defaultpage/default-step-summary.ts

@@ -1,88 +0,0 @@
-import { HTMLTemplateResult, html, css, CSSResultGroup } from 'lit';
-import { property } from 'lit/decorators.js';
-  
-import '@progressive-development/pd-order/pd-order-summary.js';
-  
-import { DefaultWizardStep } from './default-wizard-step.js';
-
-export interface OrderStep {
-  key: string,
-  name: string,
-  data?: Array<{
-    name: string,
-    val?: string
-  }>
-}
-
-export abstract class DefaultStepSummary<T> extends DefaultWizardStep<T, any> {  
-
-  @property({type: Boolean})
-  withPayment: boolean = false;
-
-  @property({type: Object})
-  orderForSummary?:T;
-
-  // Refactor: merge together with order steps => contains information content, wizardSteps contains the steps wich are configured for that wizard
-  @property({ type: Array, state: true })
-  wizardSteps: Array<{
-    title: string,    
-    name: string,
-    key: string
-  }> = [];
-
-  @property({type: Array, state: true})
-  _orderSteps:OrderStep[] = [];
-
-  _formId:string = "orderSummaryId";
-  
-  
-  abstract _withAgreement:boolean;
-
-  static styles = [
-    css`
-      pd-order-summary {
-        padding-bottom: 1.3em;
-      }
-    `
-  ] as CSSResultGroup;  
-
-
-  update(changedProps: any) {
-    if (changedProps.has("orderForSummary") && this.orderForSummary) {
-      this._orderSteps = this._prepareOrderSteps();
-    }
-    super.update(changedProps);
-  }
-
-  render() {
-    return html`
-      <pd-order-summary id="${this._formId}"
-          ?withPayment="${this.withPayment}"
-          .order="${this.orderForSummary}"
-          ?withAgreement="${this._withAgreement}"
-          .orderSteps="${this._orderSteps}">
-          ${this._withAgreement ? html`<span slot="legal">${this._getConditions()}</span>` : ''}
-      </pd-order-summary>
-    `;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  setFormData(order: T) {
-    // no validation/manipulation needed, return the order
-    return order;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  _initWithValidation(): boolean {
-    // not needed for summary
-    return false;
-  }
-
-  abstract _prepareOrderSteps(): OrderStep[];
-  
-  abstract _getConditions(): HTMLTemplateResult;
-
-}
-  
-  
-  

package/src/defaultpage/default-view-page.ts

@@ -1,58 +0,0 @@
-import { LitElement, css, CSSResultGroup } from "lit";
-import { property } from "lit/decorators.js";
-import { localized } from "@lit/localize";
-
-
-@localized()
-export class DefaultViewPage extends LitElement {
-
-  @property({type: Boolean})
-  active: boolean = false;
-
-  /**
-   * Define some default classes for view-pages, could - but most not - used.
-   */
-  static styles = [        
-    css`
-
-      :host {
-        min-height: 100%;
-      }
-
-      /**
-       * Use for full-content sites. Additional padding could set via custom propertie.
-       */
-      .full-content {
-        padding: var(--pd-view-page-padding, 15px);
-      }
-
-      /**
-       * Use for sized-content sites. For example text sites with centered text display.
-       */
-      .sized-content {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: var(--pd-view-page-sized-align, left);
-        justify-content: var(--pd-view-page-sized-align, flex-start);
-        flex-grow: 1;
-        max-width: var(--pd-view-page-sized-width, 1170px);
-        margin: 0 auto;
-        text-align: var(--pd-view-page-sized-text-align, left);
-
-        padding: var(--pd-view-page-padding, 15px);
-      }
-
-      .no-top-padding {
-        padding-top: 0;
-      }
-
-    `
-  ] as CSSResultGroup;
-
-  // Only render this page if it's actually visible.
-  shouldUpdate() {
-    return this.active;
-  }
-
-}

package/src/defaultpage/default-wizard-step.ts

@@ -1,142 +0,0 @@
-import { LitElement } from "lit";
-import { property } from "lit/decorators.js";
-
-const DELAY_TIME = 3000;
-let timeoutInputRef:any;
-
-/**
- * TODO: Move inside pd-wizard.
- */
-export abstract class DefaultWizardStep<T, F> extends LitElement {
-
-  @property({type: Number})
-  stepNumber: number = 0;
-
-  @property({type: Boolean})
-  withRequiredInfo: boolean = false;
-
-  @property({type: String, state: true})
-  _errorMsg: string = "";
-
-  abstract _formId:string;
-
-  private _elRef: any;
-
-
-  firstUpdated() {
-    this._formInit(this.shadowRoot?.getElementById(this._formId));
-
-    // first validation if form is already filled (edit)
-    if (this._initWithValidation()) {
-      const detail = {
-        errorMap: new Map()
-      }
-      this.shadowRoot?.getElementById(this._formId)?.dispatchEvent(
-        new CustomEvent("validate-form", {detail})
-      );
-    }
-  }
-
-  _formInit(elRef: any) {
-    // add validation event listener
-    this.addEventListener('validate-form', this._validateForm);
-    this._elRef = elRef;
-  }
-
-  _validateForm(e: any) {
-
-    // vaidate required fields => dispatch event down    
-    if (e.detail && !e.detail.singleElement) {
-
-      if (this._elRef) {
-        this._elRef.dispatchEvent(
-          new CustomEvent('validate-form', {
-            detail: e.detail,
-          })
-        );
-      }
-
-      // no error found TODO: Clear bei Fehler noch übernehmen, da keine Daten für nicht validierte Wizard Schritte verbleiben sollten
-      if (e.detail.errorMap.size === 0 && this.setFormData) {
-        try {
-          const preparedOrder = this.setFormData(
-            e.detail.currentOrder,
-            e.detail.formData
-          );
-          if (preparedOrder) {
-            e.detail.preparedOrder = this._prepareOrderAfterStepUpdate(preparedOrder);
-            this._errorMsg = "";
-          } else {
-            e.detail.errorMap.set('validation-error', 'test');
-          }
-        } catch (error: any) {          
-          e.detail.errorMap.set('validation-error', error.message);
-          this._errorMsg = error.message;
-        }
-      }      
-    }    
-  }
-
-  /**
-   * Prepare the order (trigger side-effets) after update from order step.
-   * Used to reset the tax after heating (house age) oder contact (business), but could use for anything else.
-   * 
-   * The default implementation just returns the updated order to prevent all clients from implementing the method.
-   * 
-   * @param updatedOrder order with updates from step.
-   * @returns preparedOrder - with (e.g. prices) changes triggered by step update.
-   */
-  // eslint-disable-next-line class-methods-use-this  
-  protected _prepareOrderAfterStepUpdate(updatedOrder: T): T {
-    return updatedOrder;
-  }  
-
-  // eslint-disable-next-line class-methods-use-this
-  protected _prepareDataFromForm() {
-    // do nothing, overwrite in implementing class
-    return {};
-  };
-
-  // eslint-disable-next-line class-methods-use-this
-  protected _doInputChange() {
-
-    if (timeoutInputRef) {
-      console.log("_doInputChange: Reset Timeout");
-      window.clearTimeout(timeoutInputRef);
-    }
-
-    timeoutInputRef = window.setTimeout(() => {
-      console.log("_doInputChange: Timeout expired");
-
-      this.dispatchEvent(
-        new CustomEvent("wizard-step-update", {
-          detail: this._prepareDataFromForm(),
-          bubbles: true,
-          composed: true,
-        })
-      )
-
-    }, DELAY_TIME);
-  }
-
-  protected setFormData(currentOrder: T, formData?: F): T  {
-    return {
-      ...currentOrder,
-      ...this._prepareDataFromForm(),
-    };
-  }
-
-  /**
-   * Call from wizard.
-   * 
-   * @param reloadedOrder 
-   */
-  // eslint-disable-next-line class-methods-use-this
-  reloadFromOrder(reloadedOrder: T): void {
-    // do nothing, overwrite in implementing class
-  }  
-  
-  abstract _initWithValidation(): boolean;
-  
-}
-