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

package/dist/src/stories/pd-loading-state.stories.js

@@ -1,153 +0,0 @@
-import { html } from 'lit';
-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'],
-        },
-    },
-};
-export default meta;
-// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
-export const NoModalState = {
-    args: {
-        loadingState: {
-            isLoading: true
-        }
-    },
-};
-export const ModalState = {
-    args: {
-        loadingState: {
-            isLoading: true,
-            modal: true
-        }
-    },
-};
-export const CustomTxtState = {
-    args: {
-        loadingState: {
-            isLoading: true,
-            loadingTxt: "Hier steht was anderes..."
-        }
-    },
-};
-export const BackgroundState = {
-    args: {
-        loadingState: {
-            isLoading: true,
-            smallBackground: true,
-        }
-    },
-};
-export const ModalBackgroundState = {
-    args: {
-        loadingState: {
-            isLoading: true,
-            smallBackground: true,
-            modal: true,
-        }
-    },
-};
-export const ModalWithBackgroundState = {
-    args: {
-        loadingState: {
-            isLoading: true,
-            smallBackground: true,
-        },
-        doubleState: true
-    },
-};
-export const ModalStateWithSubTasks = {
-    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 = {
-    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"
-                },
-            ]
-        }
-    },
-};
-//# sourceMappingURL=pd-loading-state.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pd-loading-state.stories.js","sourceRoot":"","sources":["../../../src/stories/pd-loading-state.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../tmpown/pd-loading-state.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/LoadingState',  \n  render: (args) => html`\n    <pd-loading-state\n      .loadingState=\"${args.loadingState}\"\n    ></pd-loading-state>    \n\n    ${args.doubleState ? html`\n      <pd-loading-state\n      .loadingState=\"${{\n        isLoading: true,\n        modal: true,\n        actionKey: \"\"\n      }}\"\n    ></pd-loading-state>    \n      ` : ''}    \n\n    <p>\n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n    </p>\n    <p>\n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n      Hier steht noch sonst was an text. \n    </p>\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 NoModalState: Story = {\n  args: {\n    loadingState: {\n      isLoading: true\n    }\n  },\n};\n\nexport const ModalState: Story = {\n  args: {\n    loadingState: {\n      isLoading: true,\n      modal: true\n    }\n  },\n};\n\nexport const CustomTxtState: Story = {\n  args: {\n    loadingState: {\n      isLoading: true,\n      loadingTxt: \"Hier steht was anderes...\"\n    }\n  },\n};\n\nexport const BackgroundState: Story = {\n  args: {\n    loadingState: {\n      isLoading: true,\n      smallBackground: true,\n    }\n  },\n};\n\nexport const ModalBackgroundState: Story = {\n  args: {\n    loadingState: {\n      isLoading: true,\n      smallBackground: true,\n      modal: true,\n    }\n  },\n};\n\nexport const ModalWithBackgroundState: Story = {\n  args: {\n    loadingState: {\n      isLoading: true,\n      smallBackground: true,      \n    },\n    doubleState: true\n  },\n};\n\nexport const ModalStateWithSubTasks: Story = {\n  args: {\n    loadingState: {\n      isLoading: true,\n      modal: true,\n      loadingTxt: \"Sammelaufgabe wird erledigt\",\n      subTask: [\n        {\n          actionKey: \"\",\n          completed: true,\n          loadingTxt: \"SubTask 1\"\n        },\n        {\n          actionKey: \"\",\n          completed: false,\n          loadingTxt: \"SubTask 2\"\n        },\n        {\n          actionKey: \"\",\n          completed: false,\n          loadingTxt: \"SubTask 3\"\n        },\n      ]\n    }\n  },\n};\n\nexport const BackgroundWithSubTasks: Story = {\n  args: {\n    loadingState: {\n      isLoading: true,\n      modal: false,\n      smallBackground: true,\n      loadingTxt: \"Sammelaufgabe wird erledigt\",\n      subTask: [\n        {\n          actionKey: \"\",\n          completed: true,\n          loadingTxt: \"SubTask 1\"\n        },\n        {\n          actionKey: \"\",\n          completed: false,\n          loadingTxt: \"SubTask 2\"\n        },\n        {\n          actionKey: \"\",\n          completed: false,\n          loadingTxt: \"SubTask 3\"\n        },\n      ]\n    }\n  },\n};\n\n"]}

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

@@ -1,23 +0,0 @@
-import type { StoryObj } from '@storybook/web-components';
-import '../tmpown/pd-toast.js';
-declare const meta: {
-    title: string;
-    render: (args: import("@storybook/types").Args) => import("lit").TemplateResult<1>;
-    argTypes: {
-        backgroundColor: {
-            control: string;
-        };
-        onClick: {
-            action: string;
-        };
-        size: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-    };
-};
-export default meta;
-type Story = StoryObj;
-export declare const SuccessToast: Story;

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":"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","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>;