@progressive-development/pd-spa-helper 0.9.0 → 0.9.2

package/dist/tmpown/pd-login.d.ts

@@ -1,13 +0,0 @@
-import { LitElement } from 'lit';
-export declare class PdLogin extends LitElement {
-    /**
-     * @event login-success fired when login was successfully
-     */
-    protected _validForm: boolean;
-    private _formElement;
-    static get styles(): import('lit').CSSResult[];
-    render(): import('lit').TemplateResult<1>;
-    _accessLogin(): void;
-    _dispatchToastEvent(txt: string): void;
-}
-//# sourceMappingURL=pd-login.d.ts.map

package/dist/tmpown/pd-login.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-login.d.ts","sourceRoot":"","sources":["../../src/tmpown/pd-login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAM3D,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IAGH,SAAS,CAAC,UAAU,EAAE,OAAO,CAAS;IAGtC,OAAO,CAAC,YAAY,CAAmB;IAEvC,MAAM,KAAK,MAAM,8BA6BhB;IAED,MAAM;IAmDN,YAAY;IA2CZ,mBAAmB,CAAC,GAAG,EAAE,MAAM;CAYhC"}

package/dist/tmpown/pd-login.js

@@ -1,165 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { state, query, customElement } from 'lit/decorators.js';
-import '@progressive-development/pd-forms/pd-form-container';
-import '@progressive-development/pd-forms/pd-form-row';
-import '@progressive-development/pd-forms/pd-input';
-import '@progressive-development/pd-forms/pd-panel-button';
-import { loginImpl } from '../service-provider/service-provider-impl.js';
-import { pdIcons } from '@progressive-development/pd-icon';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdLogin = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._validForm = false;
-  }
-  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;
-
-          background-color: var(--pd-login-bg-color);
-          padding: 1rem;
-          border-radius: var(--pd-login-border-radius);
-        }
-
-        .pwd-link {
-          display: block;
-          text-align: right;
-          padding-top: 0.5em;
-          padding-bottom: 0.5em;
-        }
-      `
-    ];
-  }
-  render() {
-    return html`
-      <div class="login-form">
-        <pd-form-container
-          id="loginFormId"
-          @pd-form-change="${(e) => {
-      this._validForm = e.detail.overallValidity;
-      e.stopPropagation();
-    }}"
-        >
-          <pd-form-row>
-            <pd-input
-              id="eMail"
-              class="quarter3"
-              maxlength="250"
-              fieldType="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>
-          <span class="pwd-link"><a href="#">Passwort vergessen?</a></span>
-
-          <pd-form-row>
-            <pd-panel-button
-              class="quarter3"
-              buttonText="Login"
-              pdButtonIcon="${pdIcons.ICON_USER}"
-              ?disabled="${!this._validForm}"
-              @click="${this._accessLogin}"
-            ></pd-panel-button>
-          </pd-form-row>
-        </pd-form-container>
-      </div>
-    `;
-  }
-  _accessLogin() {
-    if (!this._formElement.valid) {
-      this._dispatchToastEvent("Invalid form");
-      return;
-    }
-    this._validForm = false;
-    const formValues = this._formElement.getValues().origin;
-    loginImpl(formValues.email, formValues?.pWord).then((user) => {
-      this.dispatchEvent(
-        new CustomEvent("login-success", {
-          detail: user,
-          bubbles: true,
-          composed: true
-        })
-      );
-      this._validForm = true;
-    }).catch((error) => {
-      this._validForm = true;
-      switch (error.code) {
-        case "auth/invalid-email":
-          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) {
-    this.dispatchEvent(
-      new CustomEvent("toast-event", {
-        detail: {
-          txt,
-          isError: true
-        },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-};
-__decorateClass([
-  state()
-], PdLogin.prototype, "_validForm", 2);
-__decorateClass([
-  query("#loginFormId")
-], PdLogin.prototype, "_formElement", 2);
-PdLogin = __decorateClass([
-  customElement("pd-login")
-], PdLogin);
-
-export { PdLogin };

package/dist/tmpown/pd-toast.d.ts

@@ -1,13 +0,0 @@
-import { LitElement } from 'lit';
-export declare class PdToast extends LitElement {
-    isError: boolean;
-    isSuccess: boolean;
-    duration: number;
-    static styles: import('lit').CSSResult;
-    render(): import('lit').TemplateResult<1>;
-    connectedCallback(): void;
-    updated(changedProps: any): void;
-    _show(): Promise<unknown>;
-    _close(): void;
-}
-//# sourceMappingURL=pd-toast.d.ts.map

package/dist/tmpown/pd-toast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-toast.d.ts","sourceRoot":"","sources":["../../src/tmpown/pd-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,OAAQ,SAAQ,UAAU;IAErC,OAAO,EAAE,OAAO,CAAS;IAGzB,SAAS,EAAE,OAAO,CAAS;IAG3B,QAAQ,EAAE,MAAM,CAAQ;IAExB,MAAM,CAAC,MAAM,0BA6CX;IAEF,MAAM;IAWN,iBAAiB;IAKjB,OAAO,CAAC,YAAY,EAAE,GAAG;IAUzB,KAAK;IAwBL,MAAM;CAIP"}

package/dist/tmpown/pd-toast.js

@@ -1,127 +0,0 @@
-import { css, LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdToast = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.isError = false;
-    this.isSuccess = false;
-    this.duration = -100;
-  }
-  render() {
-    return html`
-      <slot></slot>
-      <pd-icon
-        @click="${this._close}"
-        icon="closeLink"
-        class="close-link"
-      ></pd-icon>
-    `;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("aria-live", "polite");
-  }
-  updated(changedProps) {
-    if (changedProps.has("duration")) {
-      if (this.duration === -100) {
-        this._close();
-      } else {
-        this._show();
-      }
-    }
-  }
-  _show() {
-    return new Promise((resolve) => {
-      if (this.className === "show") ; else {
-        if (this.duration >= 1e3) {
-          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 >= 1e3 ? this.duration : 3e3
-          );
-        }
-      }
-    });
-  }
-  _close() {
-    this.style.animation = "";
-    this.className = this.className.replace("show", "");
-  }
-};
-PdToast.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: 105;
-
-      background: var(--app-primary-color, #ebcf57);
-      color: #0a3a48;
-      padding: 0.6rem;
-      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 {
-      --pd-icon-size: 1.4rem;
-      position: absolute;
-      right: 0;
-      top: 0;
-      cursor: pointer;
-    }
-  `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdToast.prototype, "isError", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdToast.prototype, "isSuccess", 2);
-__decorateClass([
-  property({ type: Number })
-], PdToast.prototype, "duration", 2);
-PdToast = __decorateClass([
-  customElement("pd-toast")
-], PdToast);
-
-export { PdToast };