@progressive-development/pd-spa-helper 0.0.1 → 0.0.2

package/src/router/AppMain.ts

@@ -0,0 +1,10 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {outlet} from 'lit-element-router';
+
+@customElement('app-main')
+export class AppMain extends outlet(LitElement) {
+  render() {
+    return html` <slot></slot> `;
+  }
+}

package/src/service-call-controller2.ts

@@ -0,0 +1,67 @@
+import {ReactiveControllerHost} from 'lit';
+import {initialState, StatusRenderer, Task} from '@lit-labs/task';
+
+import { FunctionDefinition, FunctionResult, initController } from './firebase/functions-client.js';
+
+export interface ServiceControllerInput {
+  promise: Promise<FunctionResult>,
+  func: FunctionDefinition,
+}
+
+export class ServiceCallController {
+
+  host: ReactiveControllerHost;
+
+  private task!: Task;
+
+  private _callDataPromise!: ServiceControllerInput;
+
+  constructor(host: ReactiveControllerHost) {
+    this.host = host;
+    this.task = new Task<[ServiceControllerInput], FunctionResult>(host,
+
+      async ([callDataPromise]: [ServiceControllerInput]) => {
+        if (!callDataPromise) {
+          return initialState;
+        }
+        try {
+          const result = await callDataPromise.promise;
+          return result as FunctionResult;
+        } catch (e) {
+          console.error("Error: ", e);
+          throw new Error(`Failed call function "${callDataPromise.func.name}"`);
+        }
+
+      }, () => [this.callDataPromise]
+
+    );
+    initController(this);
+  }
+
+  /*
+  set callData(value: FunctionParam) {
+    this._callData = value;
+    this.host.requestUpdate();
+  }
+
+  get callData(): FunctionParam { return this._callData; }
+  */
+
+  set callDataPromise(value: ServiceControllerInput) {
+    this._callDataPromise = value;
+    this.host.requestUpdate();
+  }
+
+  get callDataPromise(): ServiceControllerInput { return this._callDataPromise; }
+
+  clear() {
+    this.task.status = 0;
+    this.host.requestUpdate();
+  }
+
+  // TODO: Type definition FunctionResult do not work, but work in Homepage Project...
+  render(renderFunctions: any) {
+    return this.task.render(renderFunctions);
+  }
+
+}

package/src/tmpown/pd-login.ts

@@ -0,0 +1,126 @@
+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 { login } from '../firebase/auth.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;    
+
+      login(elMail?.value, elSec?.value)
+        .then(() => {
+          this.dispatchEvent(new CustomEvent("login-success"));
+        }).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

@@ -0,0 +1,193 @@
+/* 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;
+    }
+
+}

package/src/tmpown/pd-panel.ts

@@ -0,0 +1,43 @@
+// https://stackblitz.com/edit/lit-story-viewer?file=story-viewer.ts
+
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement("pd-panel")
+export class PdPanel extends LitElement { 
+
+  static styles =     
+      css`
+        :host {
+          background: var(--pd-panel-bg, #AFC1D2);
+          border-radius: var(--pd-panel-border-radius, 0.2em);
+        }
+
+        /* Default styles for content */
+        #content {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          padding: 2rem;
+          display: flex;
+          flex-direction: column;          
+          align-items: center;
+          justify-content: flex-start;
+        }
+        #content > slot::slotted(*) {
+          margin: 0;
+        }
+      `;
+
+  render() {   
+    return html`
+      <div id="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+
+}

package/src/tmpown/pd-toast.ts

@@ -0,0 +1,114 @@
+/* eslint-disable wc/no-self-class */
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement("pd-toast")
+export class PdToast extends LitElement {
+
+  @property({type: Boolean, reflect: true})
+  isError: boolean = false;
+
+  @property({type: Boolean, reflect: true})
+  isSuccess: boolean = false;
+
+  @property({type: Number})
+  duration: number = -100;
+
+  static styles = 
+    css`
+    :host {
+        --pd-icon-size: 1rem;        
+
+        transform: translateX(-150%);
+        transition: transform 1s;
+
+        /* Other styles */
+        position: fixed;
+        bottom: 30px;
+        left: 30px;
+        width: calc(100% - 60px);
+        max-width: 400px;
+
+        z-index: 5;
+
+        background: var(--app-primary-color, #ebcf57);
+        color: #0A3A48;
+        padding: .5rem;
+        border-radius: var(--item-border-radius, 2px);
+        box-shadow: 3px 5px 5px 3px lightgrey;
+        display: flex;
+    }
+
+    :host([isError]) {
+      background: darkred;
+      color: #fff;
+    }
+
+    :host([isSuccess]) {
+      background: green;
+      color: #fff;
+    }
+
+    :host(.show) {
+        transform: translateX(0%);
+    }
+
+    .close-link {
+        margin-left: auto;
+    }
+    
+    `;  
+
+  render() {
+    return html`
+      <slot></slot>
+      <pd-icon @click="${this._close}" icon="closeLink" class="close-link"></pd-icon>
+    `;
+  }
+
+  connectedCallback() {
+    // eslint-disable-next-line wc/guard-super-call
+    super.connectedCallback();
+    this.setAttribute('aria-live', 'polite');
+  }
+
+  updated(changedProps:any) {
+    if (changedProps.has('duration')) {
+      if (this.duration === -100) {
+        this._close();
+      } else {
+        this._show();
+      }
+    }
+  }
+
+  _show() {
+    return new Promise((resolve) => {
+      if (this.className === 'show') {
+        // Do nothing, prevent spamming
+      } else {
+        // 1000ms to not overlap fadein and fadeout animations
+        if (this.duration >= 1000) {
+          this.style.animation = `fadein 0.5s, fadeout 0.5s ${this.duration - 500}ms`;
+        }                
+        this.className = 'show';
+        
+        if (this.duration > 0) {
+          setTimeout(
+            () => {              
+              this._close();
+              resolve("Ok");
+            },
+            this.duration >= 1000 ? this.duration : 3000
+          );
+        }        
+      }
+    });
+  }
+
+  _close() {
+    this.style.animation = '';
+    this.className = this.className.replace('show', '');
+  }
+}
+

package/test/pd-spa-helper.test.ts

@@ -8,14 +8,14 @@ describe('PdSpaHelper', () => {
     const el = await fixture<PdSpaHelper>(html`<pd-spa-helper></pd-spa-helper>`);
 
     expect(el.title).to.equal('Hey there');
-    expect(el.counter).to.equal(5);
+    // expect(el.counter).to.equal(5);
   });
 
   it('increases the counter on button click', async () => {
     const el = await fixture<PdSpaHelper>(html`<pd-spa-helper></pd-spa-helper>`);
     el.shadowRoot!.querySelector('button')!.click();
 
-    expect(el.counter).to.equal(6);
+    // expect(el.counter).to.equal(6);
   });
 
   it('can override the title via attribute', async () => {