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

package/dist/src/stories/pd-toast.stories.js

@@ -1,34 +0,0 @@
-import { html } from 'lit';
-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'],
-        },
-    },
-};
-export default meta;
-// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
-export const SuccessToast = {
-    args: {
-        isError: false,
-        isSuccess: true,
-        duration: -1,
-        content: html `Mit etwas Inhalt dann hier.`,
-    },
-};
-//# sourceMappingURL=pd-toast.stories.js.map

package/dist/src/stories/pd-toast.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-toast.stories.js","sourceRoot":"","sources":["../../../src/stories/pd-toast.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,uBAAuB,CAAC;AAG/B,8GAA8G;AAC9G,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,sBAAsB;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAEN,IAAI,CAAC,OAAO;oBACV,IAAI,CAAC,SAAS;mBACf,IAAI,CAAC,QAAQ;;MAE1B,IAAI,CAAC,OAAO;;GAEf;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QACrC,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;QAC9B,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;SACtC;KACF;CACa,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,uGAAuG;AACvG,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,IAAI,CAAA,6BAA6B;KAC3C;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../tmpown/pd-toast.js';\n\n\n// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction\nconst meta = {\n  title: 'PD Components/Toasts',  \n  render: (args) => html`\n    <pd-toast\n      .isError=\"${args.isError}\"\n      .isSuccess=\"${args.isSuccess}\"\n      .duration=\"${args.duration}\"\n    >\n    ${args.content}\n  </pd-toast>    \n  `,\n  argTypes: {\n    backgroundColor: { control: 'color' },\n    onClick: { action: 'onClick' },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large'],\n    },\n  },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\n\n// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args\nexport const SuccessToast: Story = {\n  args: {\n    isError: false,\n    isSuccess: true,\n    duration: -1,\n    content: html`Mit etwas Inhalt dann hier.`,\n  },\n};\n\n\n"]}

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

@@ -1,9 +0,0 @@
-import { LitElement, CSSResultGroup } from 'lit';
-import '@progressive-development/pd-icon/pd-icon.js';
-import { LoadingState } from '../model/spa-model.js';
-export declare class PdLoadingState extends LitElement {
-    loadingState?: LoadingState;
-    static styles: CSSResultGroup;
-    render(): "" | import("lit").TemplateResult<1>;
-    _renderContent(): "" | import("lit").TemplateResult<1>;
-}

package/dist/src/tmpown/pd-loading-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-loading-state.js","sourceRoot":"","sources":["../../../src/tmpown/pd-loading-state.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,6CAA6C,CAAC;AAO9C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IA0H5C,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;YAE7B,IAAI,CAAC,cAAc,EAAE;;OAE1B,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC;YACnB,OAAO,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe;YAC3C,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,KAAK,IAAI;YAClG,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,eAAe,KAAK,IAAI;SACjE,CAAC;sBACY,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ;aAC3E,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YACvE,GAAG,CAAC,6BAA6B,EAAE,EAAC,EAAE,EAAE,6BAA6B,EAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,oCAAoC,EAAE,EAAC,EAAE,EAAE,8BAA8B,EAAC,CAAC,CAAC;;UAE1J,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEpE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;kBAGtC,IAAI,CAAC,UAAU;kBACf,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,2EAA2E;YAChG,CAAC,CAAC,IAAI,CAAA,yEAAyE;;;aAGpF,CAAC;;SAEL,CAAC,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;;AA7JM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiHF;CACgB,CAAC;AArHpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;oDACE;AAHjB,cAAc;IAF1B,SAAS,EAAE;IACX,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAoK1B;SApKY,cAAc","sourcesContent":["import { LitElement, html, css, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { localized, msg } from '@lit/localize';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@progressive-development/pd-icon/pd-icon.js';\n\nimport {LoadingState} from '../model/spa-model.js';\n\n\n@localized()\n@customElement('pd-loading-state')\nexport class PdLoadingState extends LitElement {\n\n  @property({ type: Object}) \n  loadingState?: LoadingState;\n\n  static styles = [        \n    css`\n      :host {\n        display: block;\n      }\n\n      /* The Modal (background) */\n      .modal {        \n        position: fixed; /* Stay in place */      \n        left: 0;\n        top: 0;\n        z-index: 500; /* Sit on top */\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n                \n        width: 100%; /* Full width */\n        height: 100%; /* Full height */        \n        overflow: auto; /* Enable scroll if needed */\n        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */\n        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8));        \n      }\n\n      /* Modal Content */\n      .no-modal-content {         \n        position: fixed; /* Stay in place */ \n        left: 50%;   \n        top: 50%;   \n        transform: translate(-50%, -50%);        \n      }\n\n      .content {\n        padding: 1em;\n        text-align: center;\n        background-color: var(--pd-loading-state-bg-col, #edf7fd);\n        border: 2px solid var(--pd-loading-state-bg-col, var(--pd-default-col, #067394));\n        z-index: 101; /* Sit on top */\n      }\n\n      .background-content {\n\n        position: fixed; /* Stay in place */ \n        right: 0em;   \n        bottom: 0em;   \n\n        padding: 1em;        \n        z-index: 600; /* Sit on top */\n\n        display: flex;\n        gap: 0.5em;\n        align-items: center;\n\n        background-color: white;\n      }\n\n      .loader {        \n        border: 16px solid var(--pd-heating-service-loader, #0A3A48);\n        border-top: 16px solid var(--pd-heating-service-loader-run, #067394);\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 2s linear infinite;\n        \n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .background-loader {        \n        border: 10px solid var(--pd-heating-service-loader, #0A3A48);\n        border-top: 10px solid var(--pd-heating-service-loader-run, #067394);\n        border-radius: 50%;\n        width: 10px;\n        height: 10px;\n        animation: spin 2s linear infinite;\n      }\n\n      .sub-ul {\n        text-align: start;\n      }\n\n      .sub-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding-right: 10px;\n      }\n\n      .sub-icon {\n        --pd-icon-size: 1rem;\n        padding: 0;\n        vertical-align: baseline;\n        margin: 0 .25rem 0 0;\n      }\n\n      .completed {\n        --pd-icon-stroke-col-active: green;\n        --pd-icon-col-active: green;\n      }\n\n      .loading {\n        --pd-icon-stroke-col-active: orange;\n        --pd-icon-col-active: orange;\n      }\n\n      @keyframes spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n    `\n  ] as CSSResultGroup;   \n\n  render() {    \n    if (!this.loadingState) {\n      return '';\n    }\n    return this.loadingState.modal ? html`\n        <div id=\"modalId\" class=\"modal\">\n          ${this._renderContent()}\n        </div>\n      ` : this._renderContent();\n  }\n\n  _renderContent() {\n    if (!this.loadingState) {\n      return '';\n    }\n    return html`\n      <div class=\"${classMap({\n          content: !this.loadingState.smallBackground,\n          \"no-modal-content\": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,\n          \"background-content\": this.loadingState.smallBackground === true,\n        })}\">\n        <div class=\"${this.loadingState.smallBackground ? \"background-loader\" : \"loader\"}\"></div>\n        <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? \n          msg(\"Daten werden synchronisiert\", {id: \"spaH.loadingstate.syncState\"}) : msg(\"Bitte warten, Daten werden geladen\", {id: \"spaH.loadingstate.pleaseWait\"}))}\n        </p>\n        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`\n        <ul class=\"sub-ul\">\n            ${this.loadingState.subTask.map(task => html`\n            <li>\n              <div class=\"sub-row\">\n                ${task.loadingTxt}\n                ${task.completed ? html`<pd-icon class=\"sub-icon completed\" icon=\"checkBox\" activeIcon></pd-icon>` \n                  : html`<pd-icon class=\"sub-icon loading\" icon=\"syncIcon\" activeIcon></pd-icon>`}\n              </div>\n            </li>\n            `)}\n        </ul>\n        ` : ''}\n      </div>\n    `\n  }\n\n}"]}

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

@@ -1,14 +0,0 @@
-import { LitElement } from 'lit';
-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';
-export declare class PdLogin extends LitElement {
-    /**
-     * @event login-success fired when login was successfully
-     */
-    static get styles(): import("lit").CSSResult[];
-    render(): import("lit").TemplateResult<1>;
-    _accessLogin(): void;
-    _dispatchToastEvent(txt: string): void;
-}

package/dist/src/tmpown/pd-login.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-login.js","sourceRoot":"","sources":["../../../src/tmpown/pd-login.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,wDAAwD,CAAC;AAChE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,+CAA+C,CAAC;AACvD,OAAO,gDAAgD,CAAC;AAExD,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AAIlE,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAErC;;OAEG;IAEH,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;OAeF;SACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;gCAciB,IAAI,CAAC,YAAY;;;;;;;;;;;;gCAYjB,IAAI,CAAC,YAAY;;;;;uEAKsB,IAAI,CAAC,YAAY;;;;;;KAMnF,CAAC;IACJ,CAAC;IAED,YAAY;;QAEV,gBAAgB;QAChB,MAAM,MAAM,GAAG;YACb,QAAQ,EAAE,IAAI,GAAG,EAAE;SACpB,CAAC;QACF,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,cAAc,CAAC,aAAa,CAAC,0CAAE,aAAa,CAC3D,IAAI,WAAW,CAAC,eAAe,EAAE,EAAC,MAAM,EAAC,CAAC,CAAC,CAAC;QAE9C,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE;YAE9B,yDAAyD;YACzD,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,cAAc,CAAC,OAAO,CAAqB,CAAC;YAC5E,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,cAAc,CAAC,OAAO,CAAqB,CAAC;YAE3E,SAAS,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC;iBACnC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;gBACb,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE;oBAClD,MAAM,EAAE,IAAI;oBACZ,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAC,CAAC;YACN,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;gBACf,QAAQ,KAAK,CAAC,IAAI,EAAE;oBAClB,KAAK,oBAAoB;wBACvB,8BAA8B;wBAC9B,8CAA8C;wBAC9C,IAAI,CAAC,mBAAmB,CAAC,0CAA0C,CAAC,CAAC;wBACrE,MAAM;oBACR,KAAK,qBAAqB,CAAC;oBAC3B,KAAK,qBAAqB;wBACxB,IAAI,CAAC,mBAAmB,CAAC,oDAAoD,CAAC,CAAC;wBAC/E,MAAM;oBACR;wBACE,IAAI,CAAC,mBAAmB,CAAC,+FAA+F,CAAC,CAAC;iBAC7H;YACH,CAAC,CAAC,CAAC;SACN;IACH,CAAC;IAED,mBAAmB,CAAC,GAAW;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAC;YAC/C,MAAM,EAAE;gBACN,GAAG,EAAE,OAAO,EAAE,IAAI;aACnB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;CAEF,CAAA;AAtHY,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAsHnB;SAtHY,OAAO","sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport '@progressive-development/pd-forms/pd-form-container.js';\nimport '@progressive-development/pd-forms/pd-form-row.js';\nimport '@progressive-development/pd-forms/pd-input.js';\nimport '@progressive-development/pd-forms/pd-button.js';\n\nimport { loginImpl } from '../service-provider/service-provider-impl.js';\n\n\n@customElement(\"pd-login\")\nexport class PdLogin extends LitElement {\n\n  /**\n   * @event login-success fired when login was successfully\n   */\n\n  static get styles() {\n    return [\n      css`\n        :host {\n            display: flex;\n            justify-content: center;\n            /*min-height: 100vh;\n            min-width: 100vh;*/            \n        }\n\n        .login-form {\n            display: flex;            \n            flex-flow: column;\n            justify-content: center;                        \n            --pd-form-row-allign: center;            \n        }\n        \n      `,\n    ];\n  }  \n\n  render() {\n    return html`\n    <div class=\"login-form\">\n        <pd-form-container id=\"loginFormId\">\n          \n          <pd-form-row>\n            <pd-input\n              id=\"eMail\"\n              class=\"quarter3\"\n              maxlength=\"250\"\n              field-type=\"mail\"\n              valueName=\"email\"\n              label=\"E-mail\"    \n              autoCompleteName=\"email\"\n              required\n              @enter-pressed=\"${this._accessLogin}\"\n            ></pd-input>\n          </pd-form-row>\n\n          <pd-form-row>\n            <pd-input\n              id=\"pWord\"\n              class=\"quarter3\"\n              secret        \n              maxlength=\"30\"\n              label=\"Password\"   \n              required         \n              @enter-pressed=\"${this._accessLogin}\"\n            ></pd-input>\n          </pd-form-row>\n          \n          <pd-form-row>\n            <pd-button class=\"quarter3\" primary text=\"Login\" @click=\"${this._accessLogin}\"></pd-button>          \n          </pd-form-row>\n\n        </pd-form-container>        \n    </div>\n\n    `;\n  }\n\n  _accessLogin() {\n    \n    // validate form\n    const detail = {\n      errorMap: new Map()\n    };\n    this.shadowRoot?.getElementById(\"loginFormId\")?.dispatchEvent(\n      new CustomEvent(\"validate-form\", {detail}));\n\n    if (detail.errorMap.size === 0) {\n      \n      // get form elements as input elements (for value access)\n      const elMail = this.shadowRoot?.getElementById('eMail') as HTMLInputElement;    \n      const elSec = this.shadowRoot?.getElementById('pWord') as HTMLInputElement;    \n\n      loginImpl(elMail?.value, elSec?.value)\n        .then((user) => {\n          this.dispatchEvent(new CustomEvent(\"login-success\", {\n            detail: user,\n            bubbles: true,\n            composed: true\n          }));\n        }).catch(error => {\n          switch (error.code) {\n            case 'auth/invalid-email':\n              // returnError.eType = 'user';\n              // returnError.logMsg = 'Invalid mail format';\n              this._dispatchToastEvent(\"E-Mail Format für Benutzer ist ungültig.\");\n              break;\n            case 'auth/wrong-password':\n            case 'auth/user-not-found':\n              this._dispatchToastEvent(\"Anmeldung fehlgeschlagen, ungültige Benutzerdaten.\");\n              break;\n            default:\n              this._dispatchToastEvent(\"Technisches Problem aufgetreten, die Anmeldung kann leider aktuell nicht durchgeführt werden.\");\n          }\n        });\n    }            \n  }\n\n  _dispatchToastEvent(txt: string) {\n    this.dispatchEvent(new CustomEvent(\"toast-event\",{\n      detail: {\n        txt, isError: true,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n}\n"]}

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

@@ -1,18 +0,0 @@
-import { LitElement } from 'lit';
-import 'hammerjs';
-import '@progressive-development/pd-icon/pd-icon.js';
-export declare class PdPanelViewer extends LitElement {
-    withProgress: boolean;
-    deltaCalc: number;
-    _index: number;
-    _panData: any;
-    _update: {};
-    static styles: import("lit").CSSResult;
-    get index(): number;
-    set index(value: number);
-    render(): import("lit").TemplateResult<1>;
-    firstUpdated(): void;
-    update(changedProperties: any): void;
-    next(): void;
-    previous(): void;
-}

package/dist/src/tmpown/pd-panel-viewer.js

@@ -1,188 +0,0 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-// https://stackblitz.com/edit/lit-story-viewer?file=story-viewer.ts
-import { __decorate } from "tslib";
-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;
-let PdPanelViewer = class PdPanelViewer extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.withProgress = false;
-        this.deltaCalc = 3;
-        this._index = 0;
-        // eslint-disable-next-line no-undef
-        this._panData = {};
-        this._update = {};
-    }
-    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) => {
-            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) {
-        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, 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;
-    }
-};
-PdPanelViewer.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;
-        }
-        `;
-__decorate([
-    property({ type: Boolean })
-], PdPanelViewer.prototype, "withProgress", void 0);
-__decorate([
-    property({ type: Number })
-], PdPanelViewer.prototype, "deltaCalc", void 0);
-__decorate([
-    property({ type: Number, state: true })
-], PdPanelViewer.prototype, "_index", void 0);
-__decorate([
-    property({ type: Object, state: true })
-    // eslint-disable-next-line no-undef
-], PdPanelViewer.prototype, "_panData", void 0);
-__decorate([
-    property({ type: Boolean, state: true })
-], PdPanelViewer.prototype, "_update", void 0);
-PdPanelViewer = __decorate([
-    customElement("pd-panel-viewer")
-], PdPanelViewer);
-export { PdPanelViewer };
-//# sourceMappingURL=pd-panel-viewer.js.map

package/dist/src/tmpown/pd-panel-viewer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-panel-viewer.js","sourceRoot":"","sources":["../../../src/tmpown/pd-panel-viewer.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,oEAAoE;;AAEpE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,UAAU,CAAC;AAElB,OAAO,6CAA6C,CAAC;AAErD,IAAI,KAAS,CAAC;AAGP,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAGH,iBAAY,GAAG,KAAK,CAAC;QAGrB,cAAS,GAAG,CAAC,CAAC;QAGd,WAAM,GAAG,CAAC,CAAC;QAGX,oCAAoC;QACpC,aAAQ,GAAO,EAAE,CAAC;QAGlB,YAAO,GAAG,EAAE,CAAC;IAkKjB,CAAC;IA3FG,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACX,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;QACpE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,MAAM;QACF,OAAO,IAAI,CAAA;;;gFAG6D,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ;4EAC5C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,YAAY,IAAI,CAAC,IAAI;;cAE5H,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAEpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;+BACrC,GAAG,EAAE,GAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA,CAAC,WAAW,QAAQ,CAAC,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,EAAC,CAAC,SAAS,CAAC;mBAC7F,CAAC,CAAC,CAAC,EAAE;SACf,CAAC;IACJ,CAAC;IAGH,YAAY;QACR,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC;QACnC,mBAAmB;QACnB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,QAAa,EAAE,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,iEAAiE;QACjE,mCAAmC;QACnC,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACpC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;gBACnB,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;gBAC3B,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;oBACtB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,CAAC,EAAE,GAAG,CAAC,CAAC;YACZ,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC;IAED,MAAM,CAAC,iBAAqB;QACxB,MAAM,EAAC,OAAO,GAAG,KAAK,EAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACxC,IAAI,EAAC,MAAM,GAAG,CAAC,EAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAEjC,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAC/B,MAAM,QAAQ,GAAG,GAAG,CAAC;QAErB,uDAAuD;QACvD,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,OAAO,EAAE;YAC7C,IAAK,MAAM,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE;gBACpC,IAAI,CAAC,QAAQ,EAAE,CAAC;aACnB;iBAAM,IAAG,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE;gBAC1C,IAAI,CAAC,IAAI,EAAE,CAAC;aACf;SACJ;QAED,wDAAwD;QACxD,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAEhC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAM,EAAE,CAAC,EAAE,EAAE;YAC5C,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC;YAC5C,8CAA8C;YAC9C,MAAM,CAAC,GAAG,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5C,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;YAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;YACpC,6CAA6C;YAC7C,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,eAAe,CAAC,iBAAiB,KAAK,GAAG,CAAC;YAC/D,6CAA6C;YAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACpC,CAAC;IAED,gDAAgD;IAChD,IAAI;QACA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;QAC7E,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,oDAAoD;IACpD,QAAQ;QACJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;QAC7E,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,CAAC;;AA9JM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAmEd,CAAC;AAlFN;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;mDACL;AAGrB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACX;AAGd;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC;6CAC3B;AAIX;IAFC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC;IACtC,oCAAoC;+CAClB;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC;8CAC1B;AAhBJ,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAkLzB;SAlLY,aAAa","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\n// https://stackblitz.com/edit/lit-story-viewer?file=story-viewer.ts\n\nimport { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport 'hammerjs';\n\nimport '@progressive-development/pd-icon/pd-icon.js';\n\nlet timer:any;\n\n@customElement(\"pd-panel-viewer\")\nexport class PdPanelViewer extends LitElement {\n\n    @property({type: Boolean})\n    withProgress = false;\n\n    @property({type: Number})\n    deltaCalc = 3;\n\n    @property({type: Number, state: true})\n    _index = 0;\n\n    @property({type: Object, state: true})\n    // eslint-disable-next-line no-undef\n    _panData:any = {};\n\n    @property({type: Boolean, state: true})\n    _update = {};\n\n    static styles = css`\n\n        :host {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            max-width: var(--pd-panel-width, 1170px);\n            overflow: var(--pd-panel-overflow, hidden);\n            background-color: var(--pd-panel-viewer-bg-col);\n        }\n\n        .panel-container {\n            position: relative;\n            height: var(--pd-panel-height, 60vh);\n            width: 100%;\n            display: flex;\n            flex-direction: column;\n            padding: 0 2rem;\n            box-sizing: border-box;\n        }\n\n        pd-icon {\n            position: absolute;\n            top: calc(50% - 25px);\n            height: 50px;\n            cursor: pointer;\n        }\n\n        #prev {\n            left: 0;\n        }\n\n        #next {\n            right: 0;\n        }\n\n        #progress {\n            position: relative;\n            height: 20px;\n            width: 50%;\n            margin: .5rem auto;\n            display: grid;\n            grid-auto-flow: column;\n            grid-auto-columns: 1fr;\n            grid-gap: 10px;\n            align-content: center;\n            align-self: flex-end;\n        }\n\n        #progress > div {\n            background: var(--pd-panel-progress-col, grey);\n            height: 4px;\n            transition: background 0.3s linear;\n            cursor: pointer;\n        }\n\n        #progress > div.watched {\n            background: var(--pd-panel-progress-col, yellow);\n        }\n\n        ::slotted(*) {\n            position: absolute;\n            width: 100%;\n            height: calc(100%);\n            transition: transform 0.35s ease-out;\n            left: 0;\n        }\n        `;\n\n    get index() {\n        return this._index;\n    }\n\n    set index(value) {\n        this.children[this._index].dispatchEvent(new CustomEvent('exited'));\n        this.children[value].dispatchEvent(new CustomEvent('entered'));\n        this._index = value;\n    }\n\n    render() {\n        return html`\n            <div class=\"panel-container\">\n                <slot></slot>\n                <pd-icon id=\"prev\" icon=\"previousArrow\" activeIcon ?disabled=\"${this.index <= 0}\" @click=${this.previous}></pd-icon>\n                <pd-icon id=\"next\" icon=\"nextArrow\" activeIcon ?disabled=\"${this.index === (this.children.length - 1)}\" @click=${this.next}></pd-icon>\n            </div>\n            ${this.withProgress ? html`\n            <div id=\"progress\">\n                ${Array.from(this.children).map((childEl, i) => html`\n                <div @click=\"${() => {this._index = i;}}\" class=${classMap({watched: i <= this.index})}></div>`)}\n            </div>` : ''}\n        `;\n      }\n\n\n    firstUpdated() {\n        const hammerVal = new Hammer(this);\n        // listen to events\n        hammerVal.on('pan', (panEvent: any) => {\n            this._panData = panEvent;\n        });\n\n        // Do updates to rerender panel viewer, timeout to reduce updates\n        // https://web.dev/resize-observer/\n        const ro = new ResizeObserver(entries => {\n            entries.forEach(() => {\n              window.clearTimeout(timer);\n              timer = setTimeout(() => {\n                this.requestUpdate();\n                }, 100);\n            });\n        });\n        ro.observe(this);\n    }\n\n    update(changedProperties:any) {\n        const {isFinal = false} = this._panData;\n        let {deltaX = 0} = this._panData;\n\n        const width = this.clientWidth;\n        const minScale = 0.8;\n\n        // Guard against an infinite loop by looking for index.\n        if (!changedProperties.has(\"_index\") && isFinal) {\n            if ( deltaX > (width / this.deltaCalc)) {\n                this.previous();\n            } else if(deltaX < (-width / this.deltaCalc)) {\n                this.next();\n            }\n        }\n\n        // We don't want the latent deltaX when releasing a pan.\n        deltaX = (isFinal ? 0 : deltaX);\n\n        Array.from(this.children).forEach((el:any, i) => {\n            const x = (i - this.index) * width + deltaX;\n            // Piecewise scale(deltaX), looks like: __/\\__\n            const u = deltaX / width + (i - this.index);\n            const v = -Math.abs(u * (1 - minScale)) + 1;\n            const scale = Math.max(v, minScale);\n            // eslint-disable-next-line no-param-reassign\n            el.style.transform = `translate3d(${x}px,0,0) scale(${scale})`;\n            // eslint-disable-next-line no-param-reassign\n            el.style.opacity = scale;\n        });\n        super.update(changedProperties);\n    }\n\n    /* Advance to the next story card if possible */\n    next() {\n        this.index = Math.max(0, Math.min(this.children.length - 1, this.index + 1));\n        this._update = false;\n    }\n\n    /* Go back to the previous story card if possible */\n    previous() {\n        this.index = Math.max(0, Math.min(this.children.length - 1, this.index - 1));\n        this._update = false;\n    }\n\n}\n"]}

package/dist/src/tmpown/pd-panel.d.ts

@@ -1,5 +0,0 @@
-import { LitElement } from 'lit';
-export declare class PdPanel extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
-}

package/dist/src/tmpown/pd-panel.js

@@ -1,41 +0,0 @@
-// https://stackblitz.com/edit/lit-story-viewer?file=story-viewer.ts
-import { __decorate } from "tslib";
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let PdPanel = class PdPanel extends LitElement {
-    render() {
-        return html `
-      <div id="content">
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-PdPanel.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;
-        }
-      `;
-PdPanel = __decorate([
-    customElement("pd-panel")
-], PdPanel);
-export { PdPanel };
-//# sourceMappingURL=pd-panel.js.map

package/dist/src/tmpown/pd-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-panel.js","sourceRoot":"","sources":["../../../src/tmpown/pd-panel.ts"],"names":[],"mappings":"AAAA,oEAAoE;;AAEpE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IA2BrC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AA/BM,cAAM,GACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;OAsBF,CAAC;AAzBK,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAoCnB;SApCY,OAAO","sourcesContent":["// https://stackblitz.com/edit/lit-story-viewer?file=story-viewer.ts\n\nimport { html, LitElement, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement(\"pd-panel\")\nexport class PdPanel extends LitElement { \n\n  static styles =     \n      css`\n        :host {\n          background: var(--pd-panel-bg, #AFC1D2);\n          border-radius: var(--pd-panel-border-radius, 0.2em);\n        }\n\n        /* Default styles for content */\n        #content {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          padding: 2rem;\n          display: flex;\n          flex-direction: column;          \n          align-items: center;\n          justify-content: flex-start;\n        }\n        #content > slot::slotted(*) {\n          margin: 0;\n        }\n      `;\n\n  render() {   \n    return html`\n      <div id=\"content\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n\n}"]}

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

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

package/dist/src/tmpown/pd-toast.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-toast.js","sourceRoot":"","sources":["../../../src/tmpown/pd-toast.ts"],"names":[],"mappings":";AAAA,qCAAqC;AACrC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGL,YAAO,GAAY,KAAK,CAAC;QAGzB,cAAS,GAAY,KAAK,CAAC;QAG3B,aAAQ,GAAW,CAAC,GAAG,CAAC;IAsG1B,CAAC;IAnDC,MAAM;QACJ,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,MAAM;KAC/B,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,+CAA+C;QAC/C,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,CAAC,YAAgB;QACtB,IAAI,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAChC,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,GAAG,EAAE;gBAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;aACf;iBAAM;gBACL,IAAI,CAAC,KAAK,EAAE,CAAC;aACd;SACF;IACH,CAAC;IAED,KAAK;QACH,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE;gBAC7B,+BAA+B;aAChC;iBAAM;gBACL,sDAAsD;gBACtD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,EAAE;oBACzB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,6BAA6B,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC;iBAC7E;gBACD,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;gBAExB,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;oBACrB,UAAU,CACR,GAAG,EAAE;wBACH,IAAI,CAAC,MAAM,EAAE,CAAC;wBACd,OAAO,CAAC,IAAI,CAAC,CAAC;oBAChB,CAAC,EACD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAC7C,CAAC;iBACH;aACF;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACtD,CAAC;;AAnGM,cAAM,GACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8CF,CAAC;AAvDJ;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAChB;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CACd;AAG3B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCACD;AATb,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA+GnB;SA/GY,OAAO","sourcesContent":["/* eslint-disable wc/no-self-class */\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement(\"pd-toast\")\nexport class PdToast extends LitElement {\n\n  @property({type: Boolean, reflect: true})\n  isError: boolean = false;\n\n  @property({type: Boolean, reflect: true})\n  isSuccess: boolean = false;\n\n  @property({type: Number})\n  duration: number = -100;\n\n  static styles = \n    css`\n    :host {\n        --pd-icon-size: 1rem;        \n\n        transform: translateX(-150%);\n        transition: transform 1s;\n\n        /* Other styles */\n        position: fixed;\n        bottom: 30px;\n        left: 30px;\n        width: calc(100% - 60px);\n        max-width: 400px;\n\n        z-index: 5;\n\n        background: var(--app-primary-color, #ebcf57);\n        color: #0A3A48;\n        padding: 0.6rem;\n        border-radius: var(--item-border-radius, 2px);\n        box-shadow: 3px 5px 5px 3px lightgrey;\n        display: flex;\n    }\n\n    :host([isError]) {\n      background: darkred;\n      color: #fff;\n    }\n\n    :host([isSuccess]) {\n      background: green;\n      color: #fff;\n    }\n\n    :host(.show) {\n        transform: translateX(0%);\n    }\n\n    .close-link {\n      --pd-icon-size: 1.4rem;\n      position: absolute;\n      right: 0;\n      top: 0;\n      cursor: pointer;\n    }\n    \n    `;  \n\n  render() {\n    return html`\n      <slot></slot>\n      <pd-icon @click=\"${this._close}\" icon=\"closeLink\" class=\"close-link\"></pd-icon>\n    `;\n  }\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this.setAttribute('aria-live', 'polite');\n  }\n\n  updated(changedProps:any) {\n    if (changedProps.has('duration')) {\n      if (this.duration === -100) {\n        this._close();\n      } else {\n        this._show();\n      }\n    }\n  }\n\n  _show() {\n    return new Promise((resolve) => {\n      if (this.className === 'show') {\n        // Do nothing, prevent spamming\n      } else {\n        // 1000ms to not overlap fadein and fadeout animations\n        if (this.duration >= 1000) {\n          this.style.animation = `fadein 0.5s, fadeout 0.5s ${this.duration - 500}ms`;\n        }                \n        this.className = 'show';\n        \n        if (this.duration > 0) {\n          setTimeout(\n            () => {              \n              this._close();\n              resolve(\"Ok\");\n            },\n            this.duration >= 1000 ? this.duration : 3000\n          );\n        }        \n      }\n    });\n  }\n\n  _close() {\n    this.style.animation = '';\n    this.className = this.className.replace('show', '');\n  }\n}\n\n"]}

package/dist/stories/index.stories.d.ts

@@ -1,33 +0,0 @@
-import { TemplateResult } from 'lit';
-import '../src/pd-spa-helper.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        title: {
-            control: string;
-        };
-        counter: {
-            control: string;
-        };
-        textColor: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    title?: string;
-    counter?: number;
-    textColor?: string;
-    slot?: TemplateResult;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const CustomTitle: Story<ArgTypes>;
-export declare const CustomCounter: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -1,37 +0,0 @@
-import { html } from 'lit';
-import '../src/pd-spa-helper.js';
-export default {
-    title: 'PdSpaHelper',
-    component: 'pd-spa-helper',
-    argTypes: {
-        title: { control: 'text' },
-        counter: { control: 'number' },
-        textColor: { control: 'color' },
-    },
-};
-const Template = ({ title = 'Hello world', counter = 5, textColor, slot, }) => html `
-  <pd-spa-helper
-    style="--pd-spa-helper-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
-    ${slot}
-  </pd-spa-helper>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'My title',
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456,
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } },
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,aAAa,EACrB,OAAO,GAAG,CAAC,EACX,SAAS,EACT,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;;yCAEqB,SAAS,IAAI,OAAO;aAChD,KAAK;eACH,OAAO;;MAEhB,IAAI;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/pd-spa-helper.js';\n\nexport default {\n  title: 'PdSpaHelper',\n  component: 'pd-spa-helper',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  title?: string;\n  counter?: number;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = 'Hello world',\n  counter = 5,\n  textColor,\n  slot,\n}: ArgTypes) => html`\n  <pd-spa-helper\n    style=\"--pd-spa-helper-text-color: ${textColor || 'black'}\"\n    .title=${title}\n    .counter=${counter}\n  >\n    ${slot}\n  </pd-spa-helper>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomTitle = Template.bind({});\nCustomTitle.args = {\n  title: 'My title',\n};\n\nexport const CustomCounter = Template.bind({});\nCustomCounter.args = {\n  counter: 123456,\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}

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

@@ -1 +0,0 @@
-import '../src/pd-spa-helper.js';

package/dist/test/pd-spa-helper.test.js

@@ -1,22 +0,0 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-import '../src/pd-spa-helper.js';
-describe('PdSpaHelper', () => {
-    it('has a default title "Hey there" and counter 5', async () => {
-        const el = await fixture(html `<pd-spa-helper></pd-spa-helper>`);
-        expect(el.title).to.equal('Hey there');
-    });
-    it('increases the counter on button click', async () => {
-        const el = await fixture(html `<pd-spa-helper></pd-spa-helper>`);
-        el.shadowRoot.querySelector('button').click();
-    });
-    it('can override the title via attribute', async () => {
-        const el = await fixture(html `<pd-spa-helper title="attribute title"></pd-spa-helper>`);
-        expect(el.title).to.equal('attribute title');
-    });
-    it('passes the a11y audit', async () => {
-        const el = await fixture(html `<pd-spa-helper></pd-spa-helper>`);
-        await expect(el).shadowDom.to.be.accessible();
-    });
-});
-//# sourceMappingURL=pd-spa-helper.test.js.map

package/dist/test/pd-spa-helper.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-spa-helper.test.js","sourceRoot":"","sources":["../../test/pd-spa-helper.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,yBAAyB,CAAC;AAEjC,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,iCAAiC,CAAC,CAAC;QAC7E,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,iCAAiC,CAAC,CAAC;QAC7E,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,yDAAyD,CAAC,CAAC;QACrG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,iCAAiC,CAAC,CAAC;QAC7E,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { PdSpaHelper } from '../src';\nimport '../src/pd-spa-helper.js';\n\ndescribe('PdSpaHelper', () => {\n  it('has a default title \"Hey there\" and counter 5', async () => {\n    const el = await fixture<PdSpaHelper>(html`<pd-spa-helper></pd-spa-helper>`);\n    expect(el.title).to.equal('Hey there');\n  });\n\n  it('increases the counter on button click', async () => {\n    const el = await fixture<PdSpaHelper>(html`<pd-spa-helper></pd-spa-helper>`);\n    el.shadowRoot!.querySelector('button')!.click();\n  });\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<PdSpaHelper>(html`<pd-spa-helper title=\"attribute title\"></pd-spa-helper>`);\n    expect(el.title).to.equal('attribute title');\n  });\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<PdSpaHelper>(html`<pd-spa-helper></pd-spa-helper>`);\n    await expect(el).shadowDom.to.be.accessible();\n  });\n});\n"]}