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

package/src/stories/pd-loading-state.stories.ts

@@ -1,168 +0,0 @@
-import { html } from 'lit';
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-import '../tmpown/pd-loading-state.js';
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
-const meta = {
-  title: 'PD Components/LoadingState',  
-  render: (args) => html`
-    <pd-loading-state
-      .loadingState="${args.loadingState}"
-    ></pd-loading-state>    
-
-    ${args.doubleState ? html`
-      <pd-loading-state
-      .loadingState="${{
-        isLoading: true,
-        modal: true,
-        actionKey: ""
-      }}"
-    ></pd-loading-state>    
-      ` : ''}    
-
-    <p>
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-    </p>
-    <p>
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-      Hier steht noch sonst was an text. 
-    </p>
-  `,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    onClick: { action: 'onClick' },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-
-// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
-export const NoModalState: Story = {
-  args: {
-    loadingState: {
-      isLoading: true
-    }
-  },
-};
-
-export const ModalState: Story = {
-  args: {
-    loadingState: {
-      isLoading: true,
-      modal: true
-    }
-  },
-};
-
-export const CustomTxtState: Story = {
-  args: {
-    loadingState: {
-      isLoading: true,
-      loadingTxt: "Hier steht was anderes..."
-    }
-  },
-};
-
-export const BackgroundState: Story = {
-  args: {
-    loadingState: {
-      isLoading: true,
-      smallBackground: true,
-    }
-  },
-};
-
-export const ModalBackgroundState: Story = {
-  args: {
-    loadingState: {
-      isLoading: true,
-      smallBackground: true,
-      modal: true,
-    }
-  },
-};
-
-export const ModalWithBackgroundState: Story = {
-  args: {
-    loadingState: {
-      isLoading: true,
-      smallBackground: true,      
-    },
-    doubleState: true
-  },
-};
-
-export const ModalStateWithSubTasks: Story = {
-  args: {
-    loadingState: {
-      isLoading: true,
-      modal: true,
-      loadingTxt: "Sammelaufgabe wird erledigt",
-      subTask: [
-        {
-          actionKey: "",
-          completed: true,
-          loadingTxt: "SubTask 1"
-        },
-        {
-          actionKey: "",
-          completed: false,
-          loadingTxt: "SubTask 2"
-        },
-        {
-          actionKey: "",
-          completed: false,
-          loadingTxt: "SubTask 3"
-        },
-      ]
-    }
-  },
-};
-
-export const BackgroundWithSubTasks: Story = {
-  args: {
-    loadingState: {
-      isLoading: true,
-      modal: false,
-      smallBackground: true,
-      loadingTxt: "Sammelaufgabe wird erledigt",
-      subTask: [
-        {
-          actionKey: "",
-          completed: true,
-          loadingTxt: "SubTask 1"
-        },
-        {
-          actionKey: "",
-          completed: false,
-          loadingTxt: "SubTask 2"
-        },
-        {
-          actionKey: "",
-          completed: false,
-          loadingTxt: "SubTask 3"
-        },
-      ]
-    }
-  },
-};
-

package/src/stories/pd-toast.stories.ts

@@ -1,43 +0,0 @@
-import { html } from 'lit';
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-import '../tmpown/pd-toast.js';
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
-const meta = {
-  title: 'PD Components/Toasts',  
-  render: (args) => html`
-    <pd-toast
-      .isError="${args.isError}"
-      .isSuccess="${args.isSuccess}"
-      .duration="${args.duration}"
-    >
-    ${args.content}
-  </pd-toast>    
-  `,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    onClick: { action: 'onClick' },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-
-// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
-export const SuccessToast: Story = {
-  args: {
-    isError: false,
-    isSuccess: true,
-    duration: -1,
-    content: html`Mit etwas Inhalt dann hier.`,
-  },
-};
-
-

package/src/tmpown/pd-loading-state.ts

@@ -1,177 +0,0 @@
-import { LitElement, html, css, CSSResultGroup } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { localized, msg } from '@lit/localize';
-import { classMap } from 'lit/directives/class-map.js';
-
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import {LoadingState} from '../model/spa-model.js';
-
-
-@localized()
-@customElement('pd-loading-state')
-export class PdLoadingState extends LitElement {
-
-  @property({ type: Object}) 
-  loadingState?: LoadingState;
-
-  static styles = [        
-    css`
-      :host {
-        display: block;
-      }
-
-      /* The Modal (background) */
-      .modal {        
-        position: fixed; /* Stay in place */      
-        left: 0;
-        top: 0;
-        z-index: 500; /* Sit on top */
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-                
-        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));        
-      }
-
-      /* Modal Content */
-      .no-modal-content {         
-        position: fixed; /* Stay in place */ 
-        left: 50%;   
-        top: 50%;   
-        transform: translate(-50%, -50%);        
-      }
-
-      .content {
-        padding: 1em;
-        text-align: center;
-        background-color: var(--pd-loading-state-bg-col, #edf7fd);
-        border: 2px solid var(--pd-loading-state-bg-col, var(--pd-default-col, #067394));
-        z-index: 101; /* Sit on top */
-      }
-
-      .background-content {
-
-        position: fixed; /* Stay in place */ 
-        right: 0em;   
-        bottom: 0em;   
-
-        padding: 1em;        
-        z-index: 600; /* Sit on top */
-
-        display: flex;
-        gap: 0.5em;
-        align-items: center;
-
-        background-color: white;
-      }
-
-      .loader {        
-        border: 16px solid var(--pd-heating-service-loader, #0A3A48);
-        border-top: 16px solid var(--pd-heating-service-loader-run, #067394);
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        animation: spin 2s linear infinite;
-        
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .background-loader {        
-        border: 10px solid var(--pd-heating-service-loader, #0A3A48);
-        border-top: 10px solid var(--pd-heating-service-loader-run, #067394);
-        border-radius: 50%;
-        width: 10px;
-        height: 10px;
-        animation: spin 2s linear infinite;
-      }
-
-      .sub-ul {
-        text-align: start;
-      }
-
-      .sub-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-right: 10px;
-      }
-
-      .sub-icon {
-        --pd-icon-size: 1rem;
-        padding: 0;
-        vertical-align: baseline;
-        margin: 0 .25rem 0 0;
-      }
-
-      .completed {
-        --pd-icon-stroke-col-active: green;
-        --pd-icon-col-active: green;
-      }
-
-      .loading {
-        --pd-icon-stroke-col-active: orange;
-        --pd-icon-col-active: orange;
-      }
-
-      @keyframes spin {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-
-    `
-  ] as CSSResultGroup;   
-
-  render() {    
-    if (!this.loadingState) {
-      return '';
-    }
-    return this.loadingState.modal ? html`
-        <div id="modalId" class="modal">
-          ${this._renderContent()}
-        </div>
-      ` : this._renderContent();
-  }
-
-  _renderContent() {
-    if (!this.loadingState) {
-      return '';
-    }
-    return html`
-      <div class="${classMap({
-          content: !this.loadingState.smallBackground,
-          "no-modal-content": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,
-          "background-content": this.loadingState.smallBackground === true,
-        })}">
-        <div class="${this.loadingState.smallBackground ? "background-loader" : "loader"}"></div>
-        <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? 
-          msg("Daten werden synchronisiert", {id: "spaH.loadingstate.syncState"}) : msg("Bitte warten, Daten werden geladen", {id: "spaH.loadingstate.pleaseWait"}))}
-        </p>
-        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`
-        <ul class="sub-ul">
-            ${this.loadingState.subTask.map(task => html`
-            <li>
-              <div class="sub-row">
-                ${task.loadingTxt}
-                ${task.completed ? html`<pd-icon class="sub-icon completed" icon="checkBox" activeIcon></pd-icon>` 
-                  : html`<pd-icon class="sub-icon loading" icon="syncIcon" activeIcon></pd-icon>`}
-              </div>
-            </li>
-            `)}
-        </ul>
-        ` : ''}
-      </div>
-    `
-  }
-
-}

package/src/tmpown/pd-login.ts

@@ -1,131 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import '@progressive-development/pd-forms/pd-form-container.js';
-import '@progressive-development/pd-forms/pd-form-row.js';
-import '@progressive-development/pd-forms/pd-input.js';
-import '@progressive-development/pd-forms/pd-button.js';
-
-import { loginImpl } from '../service-provider/service-provider-impl.js';
-
-
-@customElement("pd-login")
-export class PdLogin extends LitElement {
-
-  /**
-   * @event login-success fired when login was successfully
-   */
-
-  static get styles() {
-    return [
-      css`
-        :host {
-            display: flex;
-            justify-content: center;
-            /*min-height: 100vh;
-            min-width: 100vh;*/            
-        }
-
-        .login-form {
-            display: flex;            
-            flex-flow: column;
-            justify-content: center;                        
-            --pd-form-row-allign: center;            
-        }
-        
-      `,
-    ];
-  }  
-
-  render() {
-    return html`
-    <div class="login-form">
-        <pd-form-container id="loginFormId">
-          
-          <pd-form-row>
-            <pd-input
-              id="eMail"
-              class="quarter3"
-              maxlength="250"
-              field-type="mail"
-              valueName="email"
-              label="E-mail"    
-              autoCompleteName="email"
-              required
-              @enter-pressed="${this._accessLogin}"
-            ></pd-input>
-          </pd-form-row>
-
-          <pd-form-row>
-            <pd-input
-              id="pWord"
-              class="quarter3"
-              secret        
-              maxlength="30"
-              label="Password"   
-              required         
-              @enter-pressed="${this._accessLogin}"
-            ></pd-input>
-          </pd-form-row>
-          
-          <pd-form-row>
-            <pd-button class="quarter3" primary text="Login" @click="${this._accessLogin}"></pd-button>          
-          </pd-form-row>
-
-        </pd-form-container>        
-    </div>
-
-    `;
-  }
-
-  _accessLogin() {
-    
-    // validate form
-    const detail = {
-      errorMap: new Map()
-    };
-    this.shadowRoot?.getElementById("loginFormId")?.dispatchEvent(
-      new CustomEvent("validate-form", {detail}));
-
-    if (detail.errorMap.size === 0) {
-      
-      // get form elements as input elements (for value access)
-      const elMail = this.shadowRoot?.getElementById('eMail') as HTMLInputElement;    
-      const elSec = this.shadowRoot?.getElementById('pWord') as HTMLInputElement;    
-
-      loginImpl(elMail?.value, elSec?.value)
-        .then((user) => {
-          this.dispatchEvent(new CustomEvent("login-success", {
-            detail: user,
-            bubbles: true,
-            composed: true
-          }));
-        }).catch(error => {
-          switch (error.code) {
-            case 'auth/invalid-email':
-              // returnError.eType = 'user';
-              // returnError.logMsg = 'Invalid mail format';
-              this._dispatchToastEvent("E-Mail Format für Benutzer ist ungültig.");
-              break;
-            case 'auth/wrong-password':
-            case 'auth/user-not-found':
-              this._dispatchToastEvent("Anmeldung fehlgeschlagen, ungültige Benutzerdaten.");
-              break;
-            default:
-              this._dispatchToastEvent("Technisches Problem aufgetreten, die Anmeldung kann leider aktuell nicht durchgeführt werden.");
-          }
-        });
-    }            
-  }
-
-  _dispatchToastEvent(txt: string) {
-    this.dispatchEvent(new CustomEvent("toast-event",{
-      detail: {
-        txt, isError: true,
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-}

package/src/tmpown/pd-panel-viewer.ts

@@ -1,193 +0,0 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-// https://stackblitz.com/edit/lit-story-viewer?file=story-viewer.ts
-
-import { html, css, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import 'hammerjs';
-
-import '@progressive-development/pd-icon/pd-icon.js';
-
-let timer:any;
-
-@customElement("pd-panel-viewer")
-export class PdPanelViewer extends LitElement {
-
-    @property({type: Boolean})
-    withProgress = false;
-
-    @property({type: Number})
-    deltaCalc = 3;
-
-    @property({type: Number, state: true})
-    _index = 0;
-
-    @property({type: Object, state: true})
-    // eslint-disable-next-line no-undef
-    _panData:any = {};
-
-    @property({type: Boolean, state: true})
-    _update = {};
-
-    static styles = css`
-
-        :host {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            max-width: var(--pd-panel-width, 1170px);
-            overflow: var(--pd-panel-overflow, hidden);
-            background-color: var(--pd-panel-viewer-bg-col);
-        }
-
-        .panel-container {
-            position: relative;
-            height: var(--pd-panel-height, 60vh);
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            padding: 0 2rem;
-            box-sizing: border-box;
-        }
-
-        pd-icon {
-            position: absolute;
-            top: calc(50% - 25px);
-            height: 50px;
-            cursor: pointer;
-        }
-
-        #prev {
-            left: 0;
-        }
-
-        #next {
-            right: 0;
-        }
-
-        #progress {
-            position: relative;
-            height: 20px;
-            width: 50%;
-            margin: .5rem auto;
-            display: grid;
-            grid-auto-flow: column;
-            grid-auto-columns: 1fr;
-            grid-gap: 10px;
-            align-content: center;
-            align-self: flex-end;
-        }
-
-        #progress > div {
-            background: var(--pd-panel-progress-col, grey);
-            height: 4px;
-            transition: background 0.3s linear;
-            cursor: pointer;
-        }
-
-        #progress > div.watched {
-            background: var(--pd-panel-progress-col, yellow);
-        }
-
-        ::slotted(*) {
-            position: absolute;
-            width: 100%;
-            height: calc(100%);
-            transition: transform 0.35s ease-out;
-            left: 0;
-        }
-        `;
-
-    get index() {
-        return this._index;
-    }
-
-    set index(value) {
-        this.children[this._index].dispatchEvent(new CustomEvent('exited'));
-        this.children[value].dispatchEvent(new CustomEvent('entered'));
-        this._index = value;
-    }
-
-    render() {
-        return html`
-            <div class="panel-container">
-                <slot></slot>
-                <pd-icon id="prev" icon="previousArrow" activeIcon ?disabled="${this.index <= 0}" @click=${this.previous}></pd-icon>
-                <pd-icon id="next" icon="nextArrow" activeIcon ?disabled="${this.index === (this.children.length - 1)}" @click=${this.next}></pd-icon>
-            </div>
-            ${this.withProgress ? html`
-            <div id="progress">
-                ${Array.from(this.children).map((childEl, i) => html`
-                <div @click="${() => {this._index = i;}}" class=${classMap({watched: i <= this.index})}></div>`)}
-            </div>` : ''}
-        `;
-      }
-
-
-    firstUpdated() {
-        const hammerVal = new Hammer(this);
-        // listen to events
-        hammerVal.on('pan', (panEvent: any) => {
-            this._panData = panEvent;
-        });
-
-        // Do updates to rerender panel viewer, timeout to reduce updates
-        // https://web.dev/resize-observer/
-        const ro = new ResizeObserver(entries => {
-            entries.forEach(() => {
-              window.clearTimeout(timer);
-              timer = setTimeout(() => {
-                this.requestUpdate();
-                }, 100);
-            });
-        });
-        ro.observe(this);
-    }
-
-    update(changedProperties:any) {
-        const {isFinal = false} = this._panData;
-        let {deltaX = 0} = this._panData;
-
-        const width = this.clientWidth;
-        const minScale = 0.8;
-
-        // Guard against an infinite loop by looking for index.
-        if (!changedProperties.has("_index") && isFinal) {
-            if ( deltaX > (width / this.deltaCalc)) {
-                this.previous();
-            } else if(deltaX < (-width / this.deltaCalc)) {
-                this.next();
-            }
-        }
-
-        // We don't want the latent deltaX when releasing a pan.
-        deltaX = (isFinal ? 0 : deltaX);
-
-        Array.from(this.children).forEach((el:any, i) => {
-            const x = (i - this.index) * width + deltaX;
-            // Piecewise scale(deltaX), looks like: __/\__
-            const u = deltaX / width + (i - this.index);
-            const v = -Math.abs(u * (1 - minScale)) + 1;
-            const scale = Math.max(v, minScale);
-            // eslint-disable-next-line no-param-reassign
-            el.style.transform = `translate3d(${x}px,0,0) scale(${scale})`;
-            // eslint-disable-next-line no-param-reassign
-            el.style.opacity = scale;
-        });
-        super.update(changedProperties);
-    }
-
-    /* Advance to the next story card if possible */
-    next() {
-        this.index = Math.max(0, Math.min(this.children.length - 1, this.index + 1));
-        this._update = false;
-    }
-
-    /* Go back to the previous story card if possible */
-    previous() {
-        this.index = Math.max(0, Math.min(this.children.length - 1, this.index - 1));
-        this._update = false;
-    }
-
-}