@progressive-development/pd-spa-helper 0.1.101 → 0.1.102

package/.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/web-components';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/dist/src/PdSpaHelper.d.ts

@@ -64,6 +64,7 @@ export declare abstract class PdSpaHelper extends PdSpaHelper_base {
     render(): TemplateResult<1>;
     private _getMainClass;
     _renderMenu(pageConfig: NavigationPage, hideTeaser: boolean): "" | TemplateResult<1>;
+    _renderTopMenu(pageConfig: NavigationPage, hideTeaser: boolean): "" | TemplateResult<1>;
     _renderTeaser(): TemplateResult | string;
     _renderFooter(): TemplateResult<1>;
     /**

package/dist/src/PdSpaHelper.js

@@ -176,6 +176,7 @@ export class PdSpaHelper extends router(navigator(LitElement)) {
         const hideTeaser = this._teaserClosed || !(pageConf === null || pageConf === void 0 ? void 0 : pageConf.withTeaser);
         return html `
       <header id="headerElementId" class="default-header">
+        ${(pageConf === null || pageConf === void 0 ? void 0 : pageConf.hideTopMenu) ? '' : this._renderTopMenu(pageConf, hideTeaser)}
         ${hideTeaser ? '' : this._renderTeaser()}
         ${(pageConf === null || pageConf === void 0 ? void 0 : pageConf.hideMenu) ? '' : this._renderMenu(pageConf, hideTeaser)}
       </header>      
@@ -216,20 +217,31 @@ export class PdSpaHelper extends router(navigator(LitElement)) {
     }
     _renderMenu(pageConfig, hideTeaser) {
         const menuForPage = pageConfig ? (pageConfig.menu || []) : [];
-        const topMenuForPage = pageConfig ? (pageConfig.topMenu || []) : [];
         return menuForPage ? html `
-      <pd-menu      
+      <pd-menu
         id="pdHelperMenuId"
+        class="${hideTeaser ? "default-menu" : "default-menu-withteaser"}"
+        .menuItems=${menuForPage}
+        activeRoute="${this.route}"
+        headerSize="${this._getHeaderSize(hideTeaser)}"
+      >
+        ${hideTeaser ? this._getAppLogo() : ''}
+      </pd-menu>
+    ` : '';
+    }
+    _renderTopMenu(pageConfig, hideTeaser) {
+        const topMenuForPage = pageConfig ? pageConfig.topMenuItems : undefined;
+        return topMenuForPage ? html `
+      <pd-menu      
+        id="pdHelperTopMenuId"
         @locale-change="${this._localeChange}"
-        class="${hideTeaser ? "default-menu" : "default-menu-withteaser"}"        
+        class="${hideTeaser ? "default-top-menu" : "default-top-menu-withteaser"}"        
         .locales=${this._availableLocales}
         selectedLocale="${this._selectedLocale}"
-        .menuItems=${menuForPage}
         .topMenuItems=${topMenuForPage}
         activeRoute="${this.route}"
-        headerSize="${this._getHeaderSize(hideTeaser)}"
+        headerSize="${20}"
       >
-        ${hideTeaser ? this._getAppLogo() : ''}
       </pd-menu>
     ` : '';
     }
@@ -422,6 +434,13 @@ css `
       transition: background-color 1s;
     }
 
+    .default-top-menu, .default-top-menu-withteaser {      
+      --pd-menu-height: 20px;
+      --pd-menu-font-size: 1em;
+      --pd-menu-font-weight: normal;
+      --pd-menu-shadow: 0;
+    }    
+
     /* needed for pd-spa-padding-top, only for pages with teaser, check if refactor possible... */
     .default-main-padding {
       padding-top: calc(var(--pd-menu-height) + var(--pd-spa-padding-top, 120px));

package/dist/src/PdSpaHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PdSpaHelper.js","sourceRoot":"","sources":["../../src/PdSpaHelper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, css, CSSResultGroup, TemplateResult } from 'lit';\nimport { router, navigator } from 'lit-element-router';\nimport { property } from 'lit/decorators.js';\n\nimport '@progressive-development/pd-page/pd-menu.js';\nimport '@progressive-development/pd-page/pd-footer.js';\n\nimport { ServiceCallController } from './service-call-controller2.js';\nimport { initializeStore } from './store/mini-rx.store.js';\n\nimport { authStateChangedImpl, initAppImpl, isAuthenticatedImpl, setServiceProvider } from './service-provider/service-provider-impl.js';\nimport { AppConfiguration, Footer, FunctionResult, MenuElement, NavigationConfig, NavigationPage } from './service-provider/service-provider-model.js';\n\nimport './router/AppMain.js';\nimport './defaultpage/default-login.js';\nimport './tmpown/pd-panel-viewer.js';\nimport './tmpown/pd-panel.js';\n// eslint-disable-next-line import/no-duplicates\nimport './tmpown/pd-toast.js';\n\n// TODO: How to solve this import problem?\n// eslint-disable-next-line import/no-duplicates\nimport { PdToast } from './tmpown/pd-toast.js';\n\n\n// Footer Text\nconst MADE_BY = {\n  txt: \"made by PD Progressive Development\",\n  email: \"info@progressive-development.com\"};\n\n// Visible time for time-limited toast\nconst TOAST_DURATION = 6000;\n\n\n/**\n * Transformed routes, generated during startInit.\n */\nlet transformedRoutes:Array<any>;\nlet navigationConfig:NavigationConfig;\n\n/**\n * Internal helper functions to generate route elemets for lit-router. \n */\nconst transformRoutes = () => {\n\n  const transformAuthConfig = (withAuth:boolean) => \n    withAuth ? \n    {\n      unauthenticated: {\n        name: 'login',\n      },\n      authenticate: () => isAuthenticatedImpl(),\n    } : undefined;\n\n  let generatedRoutes:Array<any> = [];\n  navigationConfig.pages.forEach(cfEntry => {\n    const addAraay = cfEntry.pattern.map(routeMapPattern => (\n      {\n        name: cfEntry.name,\n        pattern: routeMapPattern,\n        authentication: transformAuthConfig(cfEntry.auth),\n      }\n    ));    \n    generatedRoutes = generatedRoutes.concat(addAraay);\n  });\n  \n  // add not-found route\n  generatedRoutes.push({\n    name: 'not-found',\n    pattern: '*',\n  });\n\n  return generatedRoutes;\n}\n\n\n/**\n * Init the firebase app and application services like\n * functions and firestore. Generate routes from navigationConfig.\n * \n * @param navigationConfig\n * @param firebaseConfig\n * @param functionsConfig\n */\nexport const startInit = (config: AppConfiguration) => {\n\n  // set service provider\n  setServiceProvider(config.serviceProvider);\n  \n  // init mini-rx store\n  if (config.storeConfigParam) {\n    initializeStore(config.storeConfigParam);\n  }\n\n  // init app\n  initAppImpl(config);\n\n  if (config.navigationConfigParam.includeLogin) {\n    config.navigationConfigParam.pages.push({\n      name: \"login\",\n      menu: [\n        {key: \"login\", name: \"Login\"}\n      ],\n      pattern: [\"login\"],\n      auth: false\n    });\n\n    // init ready, trigger by even (if getAuth is called before, error is thrown)    \n    document.dispatchEvent(new CustomEvent(\"init-app-event\"));\n    console.log(\"Init done, Event created\");\n  }\n\n  // generate routes from navigation config\n  navigationConfig = config.navigationConfigParam;\n  transformedRoutes = transformRoutes();    \n};\n\n/**\n * Abstract class for SPAs. Extend within the app main class.\n */\nexport abstract class PdSpaHelper extends router(navigator(LitElement)) {\n\n  protected functionsController = new ServiceCallController(this);\n\n  // not used at the moment\n  @property({ type: String }) \n  title = 'Hey there';\n\n  /**\n   * Properties needed for login/profile data.\n   */\n  @property({ type: Object, state: true }) \n  _user: unknown | undefined;\n\n  @property({ type: Object, state: true }) \n  _profile: any | undefined;\n \n  /**\n   * Properties needed for the router.\n   */\n  @property({ type: String, reflect: true }) \n  route = \"\";\n\n  @property({ type: Object }) \n  params = {};\n\n  @property({ type: Object }) \n  query = {};\n\n  /**\n   * Indicates if the teaser should closed (depends on scroll position).\n   */\n  @property({ type: Boolean })\n  _teaserClosed = false;  \n\n\n  @property({ type: String, state: true })\n  abstract _selectedLocale: string;\n\n  abstract _availableLocales: string[];\n  \n\n  static styles = \n    // Ref: Additional use classmap to add custom classes in concrete impl\n    css`\n\n    :host {\n      display: flex;\n      flex-flow: column;\n      height: 100%;\n    }\n\n    header {\n      flex-grow: 0;\n    }\n\n    main {\n      flex-grow: 1;\n      flex-basis: max-content;\n    }\n\n    footer {\n      flex-grow: 0;\n    }\n\n    .default-header {\n      width: 100%;\n      position: fixed;\n      top: 0;\n      display: block;\n      z-index: 99;\n    }\n\n    .default-teaser {\n      --pd-panel-overflow: hidden;\n      --pd-panel-height: var(--pd-teaser-height, 380px);\n      --pd-panel-width: 100%;      \n      --pd-panel-border-radius: 0;\n      --pd-panel-bg: var(--pd-default-col);\n      --pd-panel-viewer-bg-col: var(--pd-default-col);\n    }\n\n    .default-menu {      \n      transition: background-color 1s;\n    }\n\n    .default-menu-withteaser {      \n      --pd-menu-bg-col: #AFC1D2;\n      --pd-menu-font-col: #0A3A48;\n      transition: background-color 1s;\n    }\n\n    /* needed for pd-spa-padding-top, only for pages with teaser, check if refactor possible... */\n    .default-main-padding {\n      padding-top: calc(var(--pd-menu-height) + var(--pd-spa-padding-top, 120px));\n      transition: padding-top 1s;\n    }\n\n    .default-main {\n      padding-top: calc(var(--pd-menu-height) + 10px);\n      transition: padding-top 1s;\n    }    \n\n    .default-main-withteaser {\n      padding-top: calc(var(--pd-menu-height) + var(--pd-teaser-height, 380px) + 10px);\n      transition: padding-top 1s;\n    }\n\n  ` as CSSResultGroup;  \n\n  constructor() {\n\n    super();    \n\n    const doSomething = (scrollPos:number) => {\n      if (scrollPos <= 50) {\n        this._teaserClosed = false;\n      } else {\n        this._teaserClosed = true;\n      }\n    };\n\n    let ticking = false;\n    document.addEventListener('scroll', () => {\n      const lastKnownScrollPosition = window.scrollY;\n      if (!ticking) {\n        window.requestAnimationFrame(() => {\n          doSomething(lastKnownScrollPosition);\n          ticking = false;\n        });\n        ticking = true;\n      }\n    });\n\n    // add login handler after init => else error is thrown\n    // document.addEventListener(\"init-app-event\", this.activateLoginHandler.bind(this));\n    document.addEventListener(\"init-app-event\", () => {\n      console.log(\"Init event catched\");\n    });\n    if (navigationConfig.includeLogin) {\n      this.activateLoginHandler();\n    }\n\n    // For common toast messages (not for callfunction toasts => handelt by own controller)\n    this.addEventListener(\"toast-event\", this._createTemporaryToast);\n    this.addEventListener(\"route-event\", this._handleMenuRouteEvent);    \n  }\n\n  /**\n   * Non reactive private property for the index db class.\n   */\n  // private _indexDBClient?: YoIndexDBClient|null;  \n\n  /**\n   * Needed for the router.\n   * Return all configured routes.\n   */\n  static get routes() {\n    return transformedRoutes;  \n  }\n\n  /**\n   * Needed for the router.\n   * Set route params to internal members.\n   */\n  router(route:string, params:Object, query:Object) {\n    this.route = route;\n    this.params = params;\n    this.query = query;\n  }  \n\n\n  /**\n   * Call to activate onAuthState change with profile request callbacks.\n   * Only implemented for firebase provider.\n   */\n  activateLoginHandler() {\n    console.log(\"Activate Login Handler\");    \n    const callback = (user: unknown) => {\n      console.log(\"My callback user:\", user);\n      this._user = user;\n    };\n    authStateChangedImpl(callback);\n  }\n\n  render() {    \n    const pageConf = navigationConfig.pages.filter(p => p.name === this.route)[0];\n    const hideTeaser = this._teaserClosed || !pageConf?.withTeaser;\n    return html`\n      <header id=\"headerElementId\" class=\"default-header\">\n        ${hideTeaser ? '' : this._renderTeaser()}\n        ${pageConf?.hideMenu ? '' : this._renderMenu(pageConf, hideTeaser)}\n      </header>      \n\n      <main class=\"${this._getMainClass(hideTeaser, pageConf)}\">\n        <app-main active-route=${this.route}\n            @init-menu-sections=\"${this._initMenuSections}\"\n            @login-success=\"${this._loginSuccess}\">\n          ${this._renderRoutePages()}\n          ${navigationConfig.includeLogin ? html`\n            <default-login ?active=\"${this.route === \"login\"}\" route=\"login\"></default-login>` : ''}\n        </app-main>\n      </main>\n\n      ${this.functionsController.render({\n        complete: (result: FunctionResult) => this._renderSuccessResultInfo(result),\n        initial: () => '',\n        pending: () => this._renderPendingInfo(),\n        error: (e: any) => this._renderErrorInfo(e),\n      })}\n\n      ${pageConf?.withFooter ? html`\n      <footer class=\"default-footer\">\n        ${this._renderFooter()}\n      </footer>` : ''}\n    `;\n  }  \n\n  // eslint-disable-next-line class-methods-use-this\n  private _getMainClass(hideTeaser: boolean, pageConf: NavigationPage): string {\n    if (hideTeaser) {      \n      if (!pageConf) {\n        return \"default-main\";\n      }\n      // eslint-disable-next-line no-nested-ternary\n      return pageConf.mainClass ? pageConf.mainClass : (pageConf.withTeaser ? \"default-main-padding\" : \"default-main\");\n    }\n    return \"default-main-withteaser\";\n  }\n\n  _renderMenu(pageConfig:NavigationPage, hideTeaser:boolean) {\n    const menuForPage = pageConfig ? (pageConfig.menu || []) : [];\n    const topMenuForPage = pageConfig ? (pageConfig.topMenu || []) : [];\n    return menuForPage ? html`\n      <pd-menu      \n        id=\"pdHelperMenuId\"\n        @locale-change=\"${this._localeChange}\"\n        class=\"${hideTeaser ? \"default-menu\" : \"default-menu-withteaser\"}\"        \n        .locales=${this._availableLocales}\n        selectedLocale=\"${this._selectedLocale}\"\n        .menuItems=${menuForPage}\n        .topMenuItems=${topMenuForPage}\n        activeRoute=\"${this.route}\"\n        headerSize=\"${this._getHeaderSize(hideTeaser)}\"\n      >\n        ${hideTeaser ? this._getAppLogo() : ''}\n      </pd-menu>\n    ` : '';\n  }  \n\n  // eslint-disable-next-line class-methods-use-this\n  _renderTeaser(): TemplateResult | string {\n    const teaserContent = this._getTeaserContent();\n    if (!teaserContent || teaserContent.length <= 0) {\n      return '';\n    }\n    return html`\n      <pd-panel-viewer class=\"default-teaser\" id=\"teaserPanelViewerId\" deltaCalc=\"4\">\n        ${teaserContent.map(content => html`\n          <pd-panel>\n            ${content}\n          </pd-panel>\n        `)}\n      </pd-panel-viewer>\n      `;\n  }\n\n  _renderFooter() {\n    const footer = this._getFooter();\n    return html`\n      <pd-footer \n          class=\"default-footer\"\n          .footerLinks=\"${footer.links}\"\n          version=\"${footer.version}\" \n          copyright=\"PD Progressive Developent UG\" \n          .madeBy=\"${MADE_BY}\" \n          @footer-link=\"${this._handleFooterRouteEvent}\">\n      </pd-footer>\n    `;\n  }\n\n  /**\n   * Called when (any) cloud function call was finished.   \n   */\n  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n  _renderSuccessResultInfo(result: FunctionResult) {\n    return html`\n    <pd-toast isSuccess duration=\"${TOAST_DURATION}\">\n      ${this.functionsController.callDataPromise?.func.successTxt}\n    </pd-toast>`;\n  }\n\n  /**\n   * Called when (any) cloud function is currently running.   \n   */\n  _renderPendingInfo() {\n    return this.functionsController.callDataPromise?.func.fadeWindow ? html`\n    <p>Überblende und lade ${this.functionsController.callDataPromise?.func.name}...</p>` \n      : html`\n      <pd-toast duration=\"-1\">\n        ${this.functionsController.callDataPromise?.func.pendingTxt}\n      </pd-toast>`;        \n  }\n\n  /**\n   * Called when (any) cloud function stopped with errors.\n   */\n   // eslint-disable-next-line class-methods-use-this\n   _renderErrorInfo(error:any) {\n    return html`\n    <pd-toast isError duration=\"-1\">\n      ${error}\n    </pd-toast>`;\n  }\n\n  protected abstract _getTeaserContent(): Array<TemplateResult>;\n\n  protected abstract _getFooter(): Footer;\n\n  protected abstract _getAppLogo(): TemplateResult;\n\n  protected abstract _renderRoutePages(): any;  \n\n  protected abstract _loginSuccess(e: CustomEvent): void;\n\n  protected abstract _setLocale(locale:string): void;\n\n  protected abstract _getHeaderSize(hideTeaser: boolean): number;\n\n  _localeChange(e: CustomEvent): void {\n    this._setLocale(e.detail)\n    this._selectedLocale = e.detail;    \n  } \n  \n  // eslint-disable-next-line class-methods-use-this\n  _handleMenuRouteEvent(e:any) {\n    // test with el, to handel jumps also here, not used at the moment, same postion link problems...\n    if (e.detail.el) {\n      this._scrollToContent(e.detail.el);\n    } else {\n      PdSpaHelper._scrollToTop();\n      this.navigate(e.detail.route);\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  _handleFooterRouteEvent(e: CustomEvent) {    \n    const {linkObj} = e.detail;    \n    if (linkObj.link) {\n      PdSpaHelper._scrollToTop();\n      this.navigate(linkObj.link);    \n    }\n    if (linkObj.action ) {      \n      linkObj.action();\n    }\n  }\n  \n  // eslint-disable-next-line class-methods-use-this\n  _initMenuSections(e:any) {\n    // add link to configuration object\n    const menRefConf = navigationConfig.pages.filter(p => p.name === e.detail.name)[0];\n    if (menRefConf) {      \n      menRefConf.menu = menRefConf.menu?.map((menuElement:MenuElement, index:number) => ({\n        ...menuElement,\n        ref: e.detail.menuRefs[index]\n      }));\n    }\n  }\n\n  _createTemporaryToast(e: any) {\n    \n    // hide existing call function toast (old one still is visible for directly incoming errors)\n    this.functionsController.clear();\n    \n    const tmpToast = new PdToast();    \n    tmpToast.isError = e.detail.isError;\n    tmpToast.isSuccess = e.detail.isSuccess;\n    const slotContent = document.createTextNode(e.detail.txt);\n    tmpToast.appendChild(slotContent)    \n\n    this.shadowRoot?.appendChild(tmpToast);\n    tmpToast.duration = TOAST_DURATION;\n\n    // set timeout to remove toast (one second later)\n    setTimeout(() => {\n      this.shadowRoot?.removeChild(tmpToast);\n    }, TOAST_DURATION + 1000);\n  }\n\n  static _scrollToTop() {\n    window.scrollTo({\n      top: 0,\n      left: 0,\n      behavior: 'smooth',\n    });\n  }\n\n  // Test, not used at the moment, jump/menu problem...\n  // eslint-disable-next-line class-methods-use-this\n  _scrollToContent(el:HTMLElement) {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      console.log(\"Rect: \", rect);\n      console.log(\"Offset Top/Height: \", el.offsetTop, el.offsetHeight);\n      window.scrollBy({\n        top: rect.top - (this._teaserClosed ? 80 : 450),\n        left: 0,\n        behavior: 'smooth',\n      });\n    }\n  }\n\n}"]}
+{"version":3,"file":"PdSpaHelper.js","sourceRoot":"","sources":["../../src/PdSpaHelper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,6CAA6C,CAAC;AACrD,OAAO,+CAA+C,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AAGzI,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,gDAAgD;AAChD,OAAO,sBAAsB,CAAC;AAE9B,0CAA0C;AAC1C,gDAAgD;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,cAAc;AACd,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,oCAAoC;IACzC,KAAK,EAAE,kCAAkC;CAAC,CAAC;AAE7C,sCAAsC;AACtC,MAAM,cAAc,GAAG,IAAI,CAAC;AAG5B;;GAEG;AACH,IAAI,iBAA4B,CAAC;AACjC,IAAI,gBAAiC,CAAC;AAEtC;;GAEG;AACH,MAAM,eAAe,GAAG,GAAG,EAAE;IAE3B,MAAM,mBAAmB,GAAG,CAAC,QAAgB,EAAE,EAAE,CAC/C,QAAQ,CAAC,CAAC;QACV;YACE,eAAe,EAAE;gBACf,IAAI,EAAE,OAAO;aACd;YACD,YAAY,EAAE,GAAG,EAAE,CAAC,mBAAmB,EAAE;SAC1C,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,eAAe,GAAc,EAAE,CAAC;IACpC,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QACvC,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC,CACtD;YACE,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,OAAO,EAAE,eAAe;YACxB,cAAc,EAAE,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC;SAClD,CACF,CAAC,CAAC;QACH,eAAe,GAAG,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,sBAAsB;IACtB,eAAe,CAAC,IAAI,CAAC;QACnB,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,GAAG;KACb,CAAC,CAAC;IAEH,OAAO,eAAe,CAAC;AACzB,CAAC,CAAA;AAGD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,MAAwB,EAAE,EAAE;IAEpD,uBAAuB;IACvB,kBAAkB,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;IAE3C,qBAAqB;IACrB,IAAI,MAAM,CAAC,gBAAgB,EAAE;QAC3B,eAAe,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;KAC1C;IAED,WAAW;IACX,WAAW,CAAC,MAAM,CAAC,CAAC;IAEpB,IAAI,MAAM,CAAC,qBAAqB,CAAC,YAAY,EAAE;QAC7C,MAAM,CAAC,qBAAqB,CAAC,KAAK,CAAC,IAAI,CAAC;YACtC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE;gBACJ,EAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC;aAC9B;YACD,OAAO,EAAE,CAAC,OAAO,CAAC;YAClB,IAAI,EAAE,KAAK;SACZ,CAAC,CAAC;QAEH,iFAAiF;QACjF,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC1D,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;KACzC;IAED,yCAAyC;IACzC,gBAAgB,GAAG,MAAM,CAAC,qBAAqB,CAAC;IAChD,iBAAiB,GAAG,eAAe,EAAE,CAAC;AACxC,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAgB,WAAY,SAAQ,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAqHrE;QAEE,KAAK,EAAE,CAAC;QArHA,wBAAmB,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAEhE,yBAAyB;QAEzB,UAAK,GAAG,WAAW,CAAC;QAWpB;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;QAGX,WAAM,GAAG,EAAE,CAAC;QAGZ,UAAK,GAAG,EAAE,CAAC;QAEX;;WAEG;QAEH,kBAAa,GAAG,KAAK,CAAC;QAwFpB,MAAM,WAAW,GAAG,CAAC,SAAgB,EAAE,EAAE;YACvC,IAAI,SAAS,IAAI,EAAE,EAAE;gBACnB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;aAC3B;QACH,CAAC,CAAC;QAEF,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACvC,MAAM,uBAAuB,GAAG,MAAM,CAAC,OAAO,CAAC;YAC/C,IAAI,CAAC,OAAO,EAAE;gBACZ,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;oBAChC,WAAW,CAAC,uBAAuB,CAAC,CAAC;oBACrC,OAAO,GAAG,KAAK,CAAC;gBAClB,CAAC,CAAC,CAAC;gBACH,OAAO,GAAG,IAAI,CAAC;aAChB;QACH,CAAC,CAAC,CAAC;QAEH,uDAAuD;QACvD,qFAAqF;QACrF,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,GAAG,EAAE;YAC/C,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QACH,IAAI,gBAAgB,CAAC,YAAY,EAAE;YACjC,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QAED,uFAAuF;QACvF,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACjE,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACnE,CAAC;IAED;;OAEG;IACH,mDAAmD;IAEnD;;;OAGG;IACH,MAAM,KAAK,MAAM;QACf,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,KAAY,EAAE,MAAa,EAAE,KAAY;QAC9C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAGD;;;OAGG;IACH,oBAAoB;QAClB,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,CAAC,IAAa,EAAE,EAAE;YACjC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;YACvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC;QACF,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9E,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,CAAA,CAAC;QAC/D,OAAO,IAAI,CAAA;;UAEL,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,UAAU,CAAC;UACtE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;UACtC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,EAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,UAAU,CAAC;;;qBAGrD,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC;iCAC5B,IAAI,CAAC,KAAK;mCACR,IAAI,CAAC,iBAAiB;8BAC3B,IAAI,CAAC,aAAa;YACpC,IAAI,CAAC,iBAAiB,EAAE;YACxB,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;sCACV,IAAI,CAAC,KAAK,KAAK,OAAO,kCAAkC,CAAC,CAAC,CAAC,EAAE;;;;QAI3F,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;YAChC,QAAQ,EAAE,CAAC,MAAsB,EAAE,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE;YACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;YACxC,KAAK,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;SAC5C,CAAC;;QAEA,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAC,CAAC,CAAC,IAAI,CAAA;;UAEzB,IAAI,CAAC,aAAa,EAAE;gBACd,CAAC,CAAC,CAAC,EAAE;KAChB,CAAC;IACJ,CAAC;IAED,kDAAkD;IAC1C,aAAa,CAAC,UAAmB,EAAE,QAAwB;QACjE,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO,cAAc,CAAC;aACvB;YACD,6CAA6C;YAC7C,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;SAClH;QACD,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED,WAAW,CAAC,UAAyB,EAAE,UAAkB;QACvD,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,OAAO,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;iBAGZ,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,yBAAyB;qBACnD,WAAW;uBACT,IAAI,CAAC,KAAK;sBACX,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;;UAE3C,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEzC,CAAC,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,cAAc,CAAC,UAAyB,EAAE,UAAkB;QAC1D,MAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;QACxE,OAAO,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;;0BAGN,IAAI,CAAC,aAAa;iBAC3B,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,6BAA6B;mBAC7D,IAAI,CAAC,iBAAiB;0BACf,IAAI,CAAC,eAAe;wBACtB,cAAc;uBACf,IAAI,CAAC,KAAK;sBACX,EAAE;;;KAGnB,CAAC,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,kDAAkD;IAClD,aAAa;QACX,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC/C,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;YAC/C,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAA;;UAEL,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;cAE7B,OAAO;;SAEZ,CAAC;;OAEH,CAAC;IACN,CAAC;IAED,aAAa;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QACjC,OAAO,IAAI,CAAA;;;0BAGW,MAAM,CAAC,KAAK;qBACjB,MAAM,CAAC,OAAO;;qBAEd,OAAO;0BACF,IAAI,CAAC,uBAAuB;;KAEjD,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,qFAAqF;IACrF,wBAAwB,CAAC,MAAsB;;QAC7C,OAAO,IAAI,CAAA;oCACqB,cAAc;QAC1C,MAAA,IAAI,CAAC,mBAAmB,CAAC,eAAe,0CAAE,IAAI,CAAC,UAAU;gBACjD,CAAC;IACf,CAAC;IAED;;OAEG;IACH,kBAAkB;;QAChB,OAAO,CAAA,MAAA,IAAI,CAAC,mBAAmB,CAAC,eAAe,0CAAE,IAAI,CAAC,UAAU,EAAC,CAAC,CAAC,IAAI,CAAA;6BAC9C,MAAA,IAAI,CAAC,mBAAmB,CAAC,eAAe,0CAAE,IAAI,CAAC,IAAI,SAAS;YACnF,CAAC,CAAC,IAAI,CAAA;;UAEF,MAAA,IAAI,CAAC,mBAAmB,CAAC,eAAe,0CAAE,IAAI,CAAC,UAAU;kBACjD,CAAC;IACjB,CAAC;IAED;;OAEG;IACF,kDAAkD;IAClD,gBAAgB,CAAC,KAAS;QACzB,OAAO,IAAI,CAAA;;QAEP,KAAK;gBACG,CAAC;IACf,CAAC;IAgBD,aAAa,CAAC,CAAc;QAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QACzB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC;IAClC,CAAC;IAED,kDAAkD;IAClD,qBAAqB,CAAC,CAAK;QACzB,iGAAiG;QACjG,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;SACpC;aAAM;YACL,WAAW,CAAC,YAAY,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC;IAED,kDAAkD;IAClD,uBAAuB,CAAC,CAAc;QACpC,MAAM,EAAC,OAAO,EAAC,GAAG,CAAC,CAAC,MAAM,CAAC;QAC3B,IAAI,OAAO,CAAC,IAAI,EAAE;YAChB,WAAW,CAAC,YAAY,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,MAAM,EAAG;YACnB,OAAO,CAAC,MAAM,EAAE,CAAC;SAClB;IACH,CAAC;IAED,kDAAkD;IAClD,iBAAiB,CAAC,CAAK;;QACrB,mCAAmC;QACnC,MAAM,UAAU,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACnF,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,IAAI,GAAG,MAAA,UAAU,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,WAAuB,EAAE,KAAY,EAAE,EAAE,CAAC,CAAC;gBACjF,GAAG,WAAW;gBACd,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;aAC9B,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAED,qBAAqB,CAAC,CAAM;;QAE1B,4FAA4F;QAC5F,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;QAEjC,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAC;QAC/B,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QACpC,QAAQ,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;QACxC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1D,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QAEjC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;QACvC,QAAQ,CAAC,QAAQ,GAAG,cAAc,CAAC;QAEnC,iDAAiD;QACjD,UAAU,CAAC,GAAG,EAAE;;YACd,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;QACzC,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM,CAAC,YAAY;QACjB,MAAM,CAAC,QAAQ,CAAC;YACd,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAED,qDAAqD;IACrD,kDAAkD;IAClD,gBAAgB,CAAC,EAAc;QAC7B,IAAI,EAAE,EAAE;YACN,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;YACxC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAC5B,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;YAClE,MAAM,CAAC,QAAQ,CAAC;gBACd,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC/C,IAAI,EAAE,CAAC;gBACP,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;IACH,CAAC;;AApYM,kBAAM;AACX,sEAAsE;AACtE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEc,CAAC;AA7GpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;0CACb;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;6CACd;AAM1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC/B;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB;AAMX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACN;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;oDACP","sourcesContent":["import { html, LitElement, css, CSSResultGroup, TemplateResult } from 'lit';\nimport { router, navigator } from 'lit-element-router';\nimport { property } from 'lit/decorators.js';\n\nimport '@progressive-development/pd-page/pd-menu.js';\nimport '@progressive-development/pd-page/pd-footer.js';\n\nimport { ServiceCallController } from './service-call-controller2.js';\nimport { initializeStore } from './store/mini-rx.store.js';\n\nimport { authStateChangedImpl, initAppImpl, isAuthenticatedImpl, setServiceProvider } from './service-provider/service-provider-impl.js';\nimport { AppConfiguration, Footer, FunctionResult, MenuElement, NavigationConfig, NavigationPage } from './service-provider/service-provider-model.js';\n\nimport './router/AppMain.js';\nimport './defaultpage/default-login.js';\nimport './tmpown/pd-panel-viewer.js';\nimport './tmpown/pd-panel.js';\n// eslint-disable-next-line import/no-duplicates\nimport './tmpown/pd-toast.js';\n\n// TODO: How to solve this import problem?\n// eslint-disable-next-line import/no-duplicates\nimport { PdToast } from './tmpown/pd-toast.js';\n\n\n// Footer Text\nconst MADE_BY = {\n  txt: \"made by PD Progressive Development\",\n  email: \"info@progressive-development.com\"};\n\n// Visible time for time-limited toast\nconst TOAST_DURATION = 6000;\n\n\n/**\n * Transformed routes, generated during startInit.\n */\nlet transformedRoutes:Array<any>;\nlet navigationConfig:NavigationConfig;\n\n/**\n * Internal helper functions to generate route elemets for lit-router. \n */\nconst transformRoutes = () => {\n\n  const transformAuthConfig = (withAuth:boolean) => \n    withAuth ? \n    {\n      unauthenticated: {\n        name: 'login',\n      },\n      authenticate: () => isAuthenticatedImpl(),\n    } : undefined;\n\n  let generatedRoutes:Array<any> = [];\n  navigationConfig.pages.forEach(cfEntry => {\n    const addAraay = cfEntry.pattern.map(routeMapPattern => (\n      {\n        name: cfEntry.name,\n        pattern: routeMapPattern,\n        authentication: transformAuthConfig(cfEntry.auth),\n      }\n    ));    \n    generatedRoutes = generatedRoutes.concat(addAraay);\n  });\n  \n  // add not-found route\n  generatedRoutes.push({\n    name: 'not-found',\n    pattern: '*',\n  });\n\n  return generatedRoutes;\n}\n\n\n/**\n * Init the firebase app and application services like\n * functions and firestore. Generate routes from navigationConfig.\n * \n * @param navigationConfig\n * @param firebaseConfig\n * @param functionsConfig\n */\nexport const startInit = (config: AppConfiguration) => {\n\n  // set service provider\n  setServiceProvider(config.serviceProvider);\n  \n  // init mini-rx store\n  if (config.storeConfigParam) {\n    initializeStore(config.storeConfigParam);\n  }\n\n  // init app\n  initAppImpl(config);\n\n  if (config.navigationConfigParam.includeLogin) {\n    config.navigationConfigParam.pages.push({\n      name: \"login\",\n      menu: [\n        {key: \"login\", name: \"Login\"}\n      ],\n      pattern: [\"login\"],\n      auth: false\n    });\n\n    // init ready, trigger by even (if getAuth is called before, error is thrown)    \n    document.dispatchEvent(new CustomEvent(\"init-app-event\"));\n    console.log(\"Init done, Event created\");\n  }\n\n  // generate routes from navigation config\n  navigationConfig = config.navigationConfigParam;\n  transformedRoutes = transformRoutes();    \n};\n\n/**\n * Abstract class for SPAs. Extend within the app main class.\n */\nexport abstract class PdSpaHelper extends router(navigator(LitElement)) {\n\n  protected functionsController = new ServiceCallController(this);\n\n  // not used at the moment\n  @property({ type: String }) \n  title = 'Hey there';\n\n  /**\n   * Properties needed for login/profile data.\n   */\n  @property({ type: Object, state: true }) \n  _user: unknown | undefined;\n\n  @property({ type: Object, state: true }) \n  _profile: any | undefined;\n \n  /**\n   * Properties needed for the router.\n   */\n  @property({ type: String, reflect: true }) \n  route = \"\";\n\n  @property({ type: Object }) \n  params = {};\n\n  @property({ type: Object }) \n  query = {};\n\n  /**\n   * Indicates if the teaser should closed (depends on scroll position).\n   */\n  @property({ type: Boolean })\n  _teaserClosed = false;  \n\n\n  @property({ type: String, state: true })\n  abstract _selectedLocale: string;\n\n  abstract _availableLocales: string[];\n  \n\n  static styles = \n    // Ref: Additional use classmap to add custom classes in concrete impl\n    css`\n\n    :host {\n      display: flex;\n      flex-flow: column;\n      height: 100%;\n    }\n\n    header {\n      flex-grow: 0;\n    }\n\n    main {\n      flex-grow: 1;\n      flex-basis: max-content;\n    }\n\n    footer {\n      flex-grow: 0;\n    }\n\n    .default-header {\n      width: 100%;\n      position: fixed;\n      top: 0;\n      display: block;\n      z-index: 99;\n    }\n\n    .default-teaser {\n      --pd-panel-overflow: hidden;\n      --pd-panel-height: var(--pd-teaser-height, 380px);\n      --pd-panel-width: 100%;      \n      --pd-panel-border-radius: 0;\n      --pd-panel-bg: var(--pd-default-col);\n      --pd-panel-viewer-bg-col: var(--pd-default-col);\n    }\n\n    .default-menu {      \n      transition: background-color 1s;\n    }\n\n    .default-menu-withteaser {      \n      --pd-menu-bg-col: #AFC1D2;\n      --pd-menu-font-col: #0A3A48;\n      transition: background-color 1s;\n    }\n\n    .default-top-menu, .default-top-menu-withteaser {      \n      --pd-menu-height: 20px;\n      --pd-menu-font-size: 1em;\n      --pd-menu-font-weight: normal;\n      --pd-menu-shadow: 0;\n    }    \n\n    /* needed for pd-spa-padding-top, only for pages with teaser, check if refactor possible... */\n    .default-main-padding {\n      padding-top: calc(var(--pd-menu-height) + var(--pd-spa-padding-top, 120px));\n      transition: padding-top 1s;\n    }\n\n    .default-main {\n      padding-top: calc(var(--pd-menu-height) + 10px);\n      transition: padding-top 1s;\n    }    \n\n    .default-main-withteaser {\n      padding-top: calc(var(--pd-menu-height) + var(--pd-teaser-height, 380px) + 10px);\n      transition: padding-top 1s;\n    }\n\n  ` as CSSResultGroup;  \n\n  constructor() {\n\n    super();    \n\n    const doSomething = (scrollPos:number) => {\n      if (scrollPos <= 50) {\n        this._teaserClosed = false;\n      } else {\n        this._teaserClosed = true;\n      }\n    };\n\n    let ticking = false;\n    document.addEventListener('scroll', () => {\n      const lastKnownScrollPosition = window.scrollY;\n      if (!ticking) {\n        window.requestAnimationFrame(() => {\n          doSomething(lastKnownScrollPosition);\n          ticking = false;\n        });\n        ticking = true;\n      }\n    });\n\n    // add login handler after init => else error is thrown\n    // document.addEventListener(\"init-app-event\", this.activateLoginHandler.bind(this));\n    document.addEventListener(\"init-app-event\", () => {\n      console.log(\"Init event catched\");\n    });\n    if (navigationConfig.includeLogin) {\n      this.activateLoginHandler();\n    }\n\n    // For common toast messages (not for callfunction toasts => handelt by own controller)\n    this.addEventListener(\"toast-event\", this._createTemporaryToast);\n    this.addEventListener(\"route-event\", this._handleMenuRouteEvent);    \n  }\n\n  /**\n   * Non reactive private property for the index db class.\n   */\n  // private _indexDBClient?: YoIndexDBClient|null;  \n\n  /**\n   * Needed for the router.\n   * Return all configured routes.\n   */\n  static get routes() {\n    return transformedRoutes;  \n  }\n\n  /**\n   * Needed for the router.\n   * Set route params to internal members.\n   */\n  router(route:string, params:Object, query:Object) {\n    this.route = route;\n    this.params = params;\n    this.query = query;\n  }  \n\n\n  /**\n   * Call to activate onAuthState change with profile request callbacks.\n   * Only implemented for firebase provider.\n   */\n  activateLoginHandler() {\n    console.log(\"Activate Login Handler\");    \n    const callback = (user: unknown) => {\n      console.log(\"My callback user:\", user);\n      this._user = user;\n    };\n    authStateChangedImpl(callback);\n  }\n\n  render() {    \n    const pageConf = navigationConfig.pages.filter(p => p.name === this.route)[0];\n    const hideTeaser = this._teaserClosed || !pageConf?.withTeaser;\n    return html`\n      <header id=\"headerElementId\" class=\"default-header\">\n        ${pageConf?.hideTopMenu ? '' : this._renderTopMenu(pageConf, hideTeaser)}\n        ${hideTeaser ? '' : this._renderTeaser()}\n        ${pageConf?.hideMenu ? '' : this._renderMenu(pageConf, hideTeaser)}\n      </header>      \n\n      <main class=\"${this._getMainClass(hideTeaser, pageConf)}\">\n        <app-main active-route=${this.route}\n            @init-menu-sections=\"${this._initMenuSections}\"\n            @login-success=\"${this._loginSuccess}\">\n          ${this._renderRoutePages()}\n          ${navigationConfig.includeLogin ? html`\n            <default-login ?active=\"${this.route === \"login\"}\" route=\"login\"></default-login>` : ''}\n        </app-main>\n      </main>\n\n      ${this.functionsController.render({\n        complete: (result: FunctionResult) => this._renderSuccessResultInfo(result),\n        initial: () => '',\n        pending: () => this._renderPendingInfo(),\n        error: (e: any) => this._renderErrorInfo(e),\n      })}\n\n      ${pageConf?.withFooter ? html`\n      <footer class=\"default-footer\">\n        ${this._renderFooter()}\n      </footer>` : ''}\n    `;\n  }  \n\n  // eslint-disable-next-line class-methods-use-this\n  private _getMainClass(hideTeaser: boolean, pageConf: NavigationPage): string {\n    if (hideTeaser) {      \n      if (!pageConf) {\n        return \"default-main\";\n      }\n      // eslint-disable-next-line no-nested-ternary\n      return pageConf.mainClass ? pageConf.mainClass : (pageConf.withTeaser ? \"default-main-padding\" : \"default-main\");\n    }\n    return \"default-main-withteaser\";\n  }\n\n  _renderMenu(pageConfig:NavigationPage, hideTeaser:boolean) {\n    const menuForPage = pageConfig ? (pageConfig.menu || []) : [];\n    return menuForPage ? html`\n      <pd-menu\n        id=\"pdHelperMenuId\"\n        class=\"${hideTeaser ? \"default-menu\" : \"default-menu-withteaser\"}\"\n        .menuItems=${menuForPage}\n        activeRoute=\"${this.route}\"\n        headerSize=\"${this._getHeaderSize(hideTeaser)}\"\n      >\n        ${hideTeaser ? this._getAppLogo() : ''}\n      </pd-menu>\n    ` : '';\n  } \n\n  _renderTopMenu(pageConfig:NavigationPage, hideTeaser:boolean) {\n    const topMenuForPage = pageConfig ? pageConfig.topMenuItems : undefined;\n    return topMenuForPage ? html`\n      <pd-menu      \n        id=\"pdHelperTopMenuId\"\n        @locale-change=\"${this._localeChange}\"\n        class=\"${hideTeaser ? \"default-top-menu\" : \"default-top-menu-withteaser\"}\"        \n        .locales=${this._availableLocales}\n        selectedLocale=\"${this._selectedLocale}\"\n        .topMenuItems=${topMenuForPage}\n        activeRoute=\"${this.route}\"\n        headerSize=\"${20}\"\n      >\n      </pd-menu>\n    ` : '';\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  _renderTeaser(): TemplateResult | string {\n    const teaserContent = this._getTeaserContent();\n    if (!teaserContent || teaserContent.length <= 0) {\n      return '';\n    }\n    return html`\n      <pd-panel-viewer class=\"default-teaser\" id=\"teaserPanelViewerId\" deltaCalc=\"4\">\n        ${teaserContent.map(content => html`\n          <pd-panel>\n            ${content}\n          </pd-panel>\n        `)}\n      </pd-panel-viewer>\n      `;\n  }\n\n  _renderFooter() {\n    const footer = this._getFooter();\n    return html`\n      <pd-footer \n          class=\"default-footer\"\n          .footerLinks=\"${footer.links}\"\n          version=\"${footer.version}\" \n          copyright=\"PD Progressive Developent UG\" \n          .madeBy=\"${MADE_BY}\" \n          @footer-link=\"${this._handleFooterRouteEvent}\">\n      </pd-footer>\n    `;\n  }\n\n  /**\n   * Called when (any) cloud function call was finished.   \n   */\n  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n  _renderSuccessResultInfo(result: FunctionResult) {\n    return html`\n    <pd-toast isSuccess duration=\"${TOAST_DURATION}\">\n      ${this.functionsController.callDataPromise?.func.successTxt}\n    </pd-toast>`;\n  }\n\n  /**\n   * Called when (any) cloud function is currently running.   \n   */\n  _renderPendingInfo() {\n    return this.functionsController.callDataPromise?.func.fadeWindow ? html`\n    <p>Überblende und lade ${this.functionsController.callDataPromise?.func.name}...</p>` \n      : html`\n      <pd-toast duration=\"-1\">\n        ${this.functionsController.callDataPromise?.func.pendingTxt}\n      </pd-toast>`;        \n  }\n\n  /**\n   * Called when (any) cloud function stopped with errors.\n   */\n   // eslint-disable-next-line class-methods-use-this\n   _renderErrorInfo(error:any) {\n    return html`\n    <pd-toast isError duration=\"-1\">\n      ${error}\n    </pd-toast>`;\n  }\n\n  protected abstract _getTeaserContent(): Array<TemplateResult>;\n\n  protected abstract _getFooter(): Footer;\n\n  protected abstract _getAppLogo(): TemplateResult;\n\n  protected abstract _renderRoutePages(): any;  \n\n  protected abstract _loginSuccess(e: CustomEvent): void;\n\n  protected abstract _setLocale(locale:string): void;\n\n  protected abstract _getHeaderSize(hideTeaser: boolean): number;\n\n  _localeChange(e: CustomEvent): void {\n    this._setLocale(e.detail)\n    this._selectedLocale = e.detail;    \n  } \n  \n  // eslint-disable-next-line class-methods-use-this\n  _handleMenuRouteEvent(e:any) {\n    // test with el, to handel jumps also here, not used at the moment, same postion link problems...\n    if (e.detail.el) {\n      this._scrollToContent(e.detail.el);\n    } else {\n      PdSpaHelper._scrollToTop();\n      this.navigate(e.detail.route);\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  _handleFooterRouteEvent(e: CustomEvent) {    \n    const {linkObj} = e.detail;    \n    if (linkObj.link) {\n      PdSpaHelper._scrollToTop();\n      this.navigate(linkObj.link);    \n    }\n    if (linkObj.action ) {      \n      linkObj.action();\n    }\n  }\n  \n  // eslint-disable-next-line class-methods-use-this\n  _initMenuSections(e:any) {\n    // add link to configuration object\n    const menRefConf = navigationConfig.pages.filter(p => p.name === e.detail.name)[0];\n    if (menRefConf) {      \n      menRefConf.menu = menRefConf.menu?.map((menuElement:MenuElement, index:number) => ({\n        ...menuElement,\n        ref: e.detail.menuRefs[index]\n      }));\n    }\n  }\n\n  _createTemporaryToast(e: any) {\n    \n    // hide existing call function toast (old one still is visible for directly incoming errors)\n    this.functionsController.clear();\n    \n    const tmpToast = new PdToast();    \n    tmpToast.isError = e.detail.isError;\n    tmpToast.isSuccess = e.detail.isSuccess;\n    const slotContent = document.createTextNode(e.detail.txt);\n    tmpToast.appendChild(slotContent)    \n\n    this.shadowRoot?.appendChild(tmpToast);\n    tmpToast.duration = TOAST_DURATION;\n\n    // set timeout to remove toast (one second later)\n    setTimeout(() => {\n      this.shadowRoot?.removeChild(tmpToast);\n    }, TOAST_DURATION + 1000);\n  }\n\n  static _scrollToTop() {\n    window.scrollTo({\n      top: 0,\n      left: 0,\n      behavior: 'smooth',\n    });\n  }\n\n  // Test, not used at the moment, jump/menu problem...\n  // eslint-disable-next-line class-methods-use-this\n  _scrollToContent(el:HTMLElement) {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      console.log(\"Rect: \", rect);\n      console.log(\"Offset Top/Height: \", el.offsetTop, el.offsetHeight);\n      window.scrollBy({\n        top: rect.top - (this._teaserClosed ? 80 : 450),\n        left: 0,\n        behavior: 'smooth',\n      });\n    }\n  }\n\n}"]}

package/dist/src/service-provider/service-provider-model.d.ts

@@ -55,6 +55,8 @@ export interface NavigationPage {
     withTeaser?: boolean;
     withFooter?: boolean;
     hideMenu?: boolean;
+    hideTopMenu?: boolean;
+    topMenuItems?: Array<MenuElement>;
 }
 export interface NavigationConfig {
     pages: Array<NavigationPage>;

package/dist/src/service-provider/service-provider-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"service-provider-model.js","sourceRoot":"","sources":["../../../src/service-provider/service-provider-model.ts"],"names":[],"mappings":"","sourcesContent":["import { FirebaseOptions } from \"firebase/app\";\nimport { TemplateResult } from \"lit\";\n\n\n/**\n * Implemeted service provider\n */\nexport type ServiceProviderFirebase = \"firebase\";\nexport type ServiceProviderMock = \"mock\";\nexport type ServiceProviderConfiguration = ServiceProviderFirebase | ServiceProviderMock;\n\n\nexport interface FunctionResult {\n  resultData: unknown,\n  statusCode: number,\n}\n\n/**\n * Function model.\n */\n\nexport interface FunctionDefinition {\n  name: string,\n  successCodes: Array<Number>,    \n  // Fade window during function call (true) or show only background infos (false).\n  fadeWindow: boolean,\n  successTxt: string | TemplateResult,\n  pendingTxt: string | TemplateResult,\n  param?: any,\n  redirect?: string,\n  logoutOnFail?: boolean,\n}\n\nexport interface FunctionParam {\n  func: FunctionDefinition,\n  inputData: any,\n}\n\nexport interface FunctionsConfig {\n  region: string, // 'europe-west3'\n  functions: Array<FunctionDefinition>,\n  postLoginFunc?: FunctionDefinition,\n}\n\n\n/**\n * App data models.\n */\n\nexport interface MenuElement {\n  key: string,\n  name: string,\n  sec?: string,\n  route?: string,\n  action?: Function,\n  topItem?: boolean,\n  ref?: any,\n  icon?: string,\n}\n\nexport interface NavigationPage {\n  name: string,\n  mainClass?: string,\n  pattern: Array<string>,  \n  auth: boolean,\n  menu?: Array<MenuElement>,\n  topMenu?: Array<MenuElement>,\n  withTeaser?: boolean,\n  withFooter?: boolean\n  hideMenu?: boolean\n}\n\nexport interface NavigationConfig {\n  pages: Array<NavigationPage>,\n  includeLogin: boolean\n}\n\nexport interface LinkObj {\n  name: string,\n  key: string,\n  link?: string,\n  action?: Function\n}\n\nexport interface Footer {\n  version: string,\n  links: Array<LinkObj>\n}\n\n\nexport interface StoreConfig {\n  appName: string,\n  reducer: any,\n  effects: Array<any>\n}\n\nexport interface AppConfiguration {  \n  serviceProvider?: ServiceProviderConfiguration,\n  mockResponse?: Map<string, unknown>,\n  navigationConfigParam: NavigationConfig;\n  storeConfigParam?: StoreConfig;\n  firebaseConfig?: FirebaseOptions;\n  functionsConfig?: FunctionsConfig;\n}\n\n\n"]}
+{"version":3,"file":"service-provider-model.js","sourceRoot":"","sources":["../../../src/service-provider/service-provider-model.ts"],"names":[],"mappings":"","sourcesContent":["import { FirebaseOptions } from \"firebase/app\";\nimport { TemplateResult } from \"lit\";\n\n\n/**\n * Implemeted service provider\n */\nexport type ServiceProviderFirebase = \"firebase\";\nexport type ServiceProviderMock = \"mock\";\nexport type ServiceProviderConfiguration = ServiceProviderFirebase | ServiceProviderMock;\n\n\nexport interface FunctionResult {\n  resultData: unknown,\n  statusCode: number,\n}\n\n/**\n * Function model.\n */\n\nexport interface FunctionDefinition {\n  name: string,\n  successCodes: Array<Number>,    \n  // Fade window during function call (true) or show only background infos (false).\n  fadeWindow: boolean,\n  successTxt: string | TemplateResult,\n  pendingTxt: string | TemplateResult,\n  param?: any,\n  redirect?: string,\n  logoutOnFail?: boolean,\n}\n\nexport interface FunctionParam {\n  func: FunctionDefinition,\n  inputData: any,\n}\n\nexport interface FunctionsConfig {\n  region: string, // 'europe-west3'\n  functions: Array<FunctionDefinition>,\n  postLoginFunc?: FunctionDefinition,\n}\n\n\n/**\n * App data models.\n */\n\nexport interface MenuElement {\n  key: string,\n  name: string,\n  sec?: string,\n  route?: string,\n  action?: Function,\n  topItem?: boolean,\n  ref?: any,\n  icon?: string,\n}\n\nexport interface NavigationPage {\n  name: string,\n  mainClass?: string,\n  pattern: Array<string>,  \n  auth: boolean,\n  menu?: Array<MenuElement>,\n  topMenu?: Array<MenuElement>,\n  withTeaser?: boolean,\n  withFooter?: boolean\n  hideMenu?: boolean\n  hideTopMenu?: boolean\n  topMenuItems?: Array<MenuElement>,\n}\n\nexport interface NavigationConfig {\n  pages: Array<NavigationPage>,\n  includeLogin: boolean\n}\n\nexport interface LinkObj {\n  name: string,\n  key: string,\n  link?: string,\n  action?: Function\n}\n\nexport interface Footer {\n  version: string,\n  links: Array<LinkObj>\n}\n\n\nexport interface StoreConfig {\n  appName: string,\n  reducer: any,\n  effects: Array<any>\n}\n\nexport interface AppConfiguration {  \n  serviceProvider?: ServiceProviderConfiguration,\n  mockResponse?: Map<string, unknown>,\n  navigationConfigParam: NavigationConfig;\n  storeConfigParam?: StoreConfig;\n  firebaseConfig?: FirebaseOptions;\n  functionsConfig?: FunctionsConfig;\n}\n\n\n"]}

package/dist/src/stories/Button.d.ts

@@ -0,0 +1,27 @@
+import './button.css';
+export interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => import("lit").TemplateResult<1>;

package/dist/src/stories/Button.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import './button.css';
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, onClick }) => {
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return html `
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};
+//# sourceMappingURL=Button.js.map

package/dist/src/stories/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/stories/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,CAAC;AAwBtB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAe,EAAE,EAAE;IACxF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;IAEnF,OAAO,IAAI,CAAA;;;cAGC,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,IAAI,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;cAC7E,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;eAC5B,OAAO;;QAEd,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport './button.css';\n\nexport interface ButtonProps {\n  /**\n   * Is this the principal call to action on the page?\n   */\n  primary?: boolean;\n  /**\n   * What background color to use\n   */\n  backgroundColor?: string;\n  /**\n   * How large should the button be?\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Button contents\n   */\n  label: string;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n}\n/**\n * Primary UI component for user interaction\n */\nexport const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {\n  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n\n  return html`\n    <button\n      type=\"button\"\n      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}\n      style=${styleMap({ backgroundColor })}\n      @click=${onClick}\n    >\n      ${label}\n    </button>\n  `;\n};\n"]}

package/dist/src/stories/Button.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { ButtonProps } from './Button';
+declare const meta: Meta<ButtonProps>;
+export default meta;
+type Story = StoryObj<ButtonProps>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/src/stories/Button.stories.js

@@ -0,0 +1,41 @@
+import { Button } from './Button';
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+    title: 'Example/Button',
+    tags: ['autodocs'],
+    render: (args) => Button(args),
+    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 Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+export const Secondary = {
+    args: {
+        label: 'Button',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/src/stories/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/stories/Button.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,8GAA8G;AAC9G,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;IAC9B,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;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,uGAAuG;AACvG,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { ButtonProps } from './Button';\nimport { Button } from './Button';\n\n// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction\nconst meta: Meta<ButtonProps> = {\n  title: 'Example/Button',\n  tags: ['autodocs'],\n  render: (args) => Button(args),\n  argTypes: {\n    backgroundColor: { control: 'color' },\n    onClick: { action: 'onClick' },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large'],\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<ButtonProps>;\n\n// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args\nexport const Primary: Story = {\n  args: {\n    primary: true,\n    label: 'Button',\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    label: 'Button',\n  },\n};\n\nexport const Large: Story = {\n  args: {\n    size: 'large',\n    label: 'Button',\n  },\n};\n\nexport const Small: Story = {\n  args: {\n    size: 'small',\n    label: 'Button',\n  },\n};\n"]}

package/dist/src/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("lit").TemplateResult<1>;
+export {};

package/dist/src/stories/Header.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import { Button } from './Button';
+import './header.css';
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html `
+  <header>
+    <div class="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        ${user
+    ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
+    : html `${Button({
+        size: 'small',
+        onClick: onLogin,
+        label: 'Log in',
+    })}
+            ${Button({
+        primary: true,
+        size: 'small',
+        onClick: onCreateAccount,
+        label: 'Sign up',
+    })}`}
+      </div>
+    </div>
+  </header>
+`;
+//# sourceMappingURL=Header.js.map

package/dist/src/stories/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/stories/Header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,cAAc,CAAC;AAatB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAe,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;UAuB/E,IAAI;IACJ,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAChE,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,CAAC;QACZ,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC;cACA,MAAM,CAAC;QACP,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,SAAS;KACjB,CAAC,EAAE;;;;CAIf,CAAC","sourcesContent":["import { html } from 'lit';\n\nimport { Button } from './Button';\nimport './header.css';\n\ntype User = {\n  name: string;\n};\n\nexport interface HeaderProps {\n  user?: User;\n  onLogin: () => void;\n  onLogout: () => void;\n  onCreateAccount: () => void;\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`\n  <header>\n    <div class=\"storybook-header\">\n      <div>\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <path\n              d=\"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z\"\n              fill=\"#FFF\"\n            />\n            <path\n              d=\"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z\"\n              fill=\"#555AB9\"\n            />\n            <path\n              d=\"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z\"\n              fill=\"#91BAF8\"\n            />\n          </g>\n        </svg>\n        <h1>Acme</h1>\n      </div>\n      <div>\n        ${user\n          ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })\n          : html`${Button({\n              size: 'small',\n              onClick: onLogin,\n              label: 'Log in',\n            })}\n            ${Button({\n              primary: true,\n              size: 'small',\n              onClick: onCreateAccount,\n              label: 'Sign up',\n            })}`}\n      </div>\n    </div>\n  </header>\n`;\n"]}

package/dist/src/stories/Header.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { HeaderProps } from './Header';
+declare const meta: Meta<HeaderProps>;
+export default meta;
+type Story = StoryObj<HeaderProps>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/src/stories/Header.stories.js

@@ -0,0 +1,17 @@
+import { Header } from './Header';
+const meta = {
+    title: 'Example/Header',
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/web-components/writing-docs/autodocs
+    tags: ['autodocs'],
+    render: (args) => Header(args),
+};
+export default meta;
+export const LoggedIn = {
+    args: {
+        user: {
+            name: 'Jonh Doe',
+        },
+    },
+};
+export const LoggedOut = {};
+//# sourceMappingURL=Header.stories.js.map

package/dist/src/stories/Header.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../../src/stories/Header.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,gBAAgB;IACvB,yIAAyI;IACzI,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,IAAI,EAAE,UAAU;SACjB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { HeaderProps } from './Header';\nimport { Header } from './Header';\n\nconst meta: Meta<HeaderProps> = {\n  title: 'Example/Header',\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/web-components/writing-docs/autodocs\n  tags: ['autodocs'],\n  render: (args: HeaderProps) => Header(args),\n};\n\nexport default meta;\ntype Story = StoryObj<HeaderProps>;\n\nexport const LoggedIn: Story = {\n  args: {\n    user: {\n      name: 'Jonh Doe',\n    },\n  },\n};\n\nexport const LoggedOut: Story = {};\n"]}

package/dist/src/stories/Page.d.ts

@@ -0,0 +1,12 @@
+import './page.css';
+type User = {
+    name: string;
+};
+export interface PageProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+export declare const Page: ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => import("lit").TemplateResult<1>;
+export {};

package/dist/src/stories/Page.js

@@ -0,0 +1,61 @@
+import { html } from 'lit';
+import { Header } from './Header';
+import './page.css';
+export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html `
+  <article>
+    ${Header({
+    user,
+    onLogin,
+    onLogout,
+    onCreateAccount,
+})}
+
+    <section class="storybook-page">
+      <h2>Pages in Storybook</h2>
+      <p>
+        We recommend building UIs with a
+        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <strong>component-driven</strong> </a
+        >process starting with atomic components and ending with pages.
+      </p>
+      <p>
+        Render pages with mock data. This makes it easy to build and review page states without
+        needing to navigate to them in your app. Here are some handy patterns for managing page data
+        in Storybook:
+      </p>
+      <ul>
+        <li>
+          Use a higher-level connected component. Storybook helps you compose such data from the
+          "args" of child component stories
+        </li>
+        <li>
+          Assemble data in the page component from your services. You can mock these services out
+          using Storybook.
+        </li>
+      </ul>
+      <p>
+        Get a guided tutorial on component-driven development at
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          Storybook tutorials
+        </a>
+        . Read more in the
+        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
+        .
+      </p>
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
+        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+              id="a"
+              fill="#999"
+            />
+          </g>
+        </svg>
+        Viewports addon in the toolbar
+      </div>
+    </section>
+  </article>
+`;
+//# sourceMappingURL=Page.js.map

package/dist/src/stories/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/stories/Page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,YAAY,CAAC;AAapB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;MAE/E,MAAM,CAAC;IACP,IAAI;IACJ,OAAO;IACP,QAAQ;IACR,eAAe;CAChB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDL,CAAC","sourcesContent":["import { html } from 'lit';\nimport { Header } from './Header';\nimport './page.css';\n\ntype User = {\n  name: string;\n};\n\nexport interface PageProps {\n  user?: User;\n  onLogin: () => void;\n  onLogout: () => void;\n  onCreateAccount: () => void;\n}\n\nexport const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html`\n  <article>\n    ${Header({\n      user,\n      onLogin,\n      onLogout,\n      onCreateAccount,\n    })}\n\n    <section class=\"storybook-page\">\n      <h2>Pages in Storybook</h2>\n      <p>\n        We recommend building UIs with a\n        <a href=\"https://componentdriven.org\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <strong>component-driven</strong> </a\n        >process starting with atomic components and ending with pages.\n      </p>\n      <p>\n        Render pages with mock data. This makes it easy to build and review page states without\n        needing to navigate to them in your app. Here are some handy patterns for managing page data\n        in Storybook:\n      </p>\n      <ul>\n        <li>\n          Use a higher-level connected component. Storybook helps you compose such data from the\n          \"args\" of child component stories\n        </li>\n        <li>\n          Assemble data in the page component from your services. You can mock these services out\n          using Storybook.\n        </li>\n      </ul>\n      <p>\n        Get a guided tutorial on component-driven development at\n        <a href=\"https://storybook.js.org/tutorials/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          Storybook tutorials\n        </a>\n        . Read more in the\n        <a href=\"https://storybook.js.org/docs\" target=\"_blank\" rel=\"noopener noreferrer\"> docs </a>\n        .\n      </p>\n      <div class=\"tip-wrapper\">\n        <span class=\"tip\">Tip</span> Adjust the width of the canvas with the\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <path\n              d=\"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z\"\n              id=\"a\"\n              fill=\"#999\"\n            />\n          </g>\n        </svg>\n        Viewports addon in the toolbar\n      </div>\n    </section>\n  </article>\n`;\n"]}

package/dist/src/stories/Page.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { PageProps } from './Page';
+declare const meta: Meta<PageProps>;
+export default meta;
+type Story = StoryObj<PageProps>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/src/stories/Page.stories.js

@@ -0,0 +1,19 @@
+import { Page } from './Page';
+import * as HeaderStories from './Header.stories';
+const meta = {
+    title: 'Example/Page',
+    render: (args) => Page(args),
+};
+export default meta;
+export const LoggedIn = {
+    args: {
+        // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+        ...HeaderStories.LoggedIn.args,
+    },
+};
+export const LoggedOut = {
+    args: {
+        ...HeaderStories.LoggedOut.args,
+    },
+};
+//# sourceMappingURL=Page.stories.js.map

package/dist/src/stories/Page.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.stories.js","sourceRoot":"","sources":["../../../src/stories/Page.stories.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAElD,MAAM,IAAI,GAAoB;IAC5B,KAAK,EAAE,cAAc;IACrB,MAAM,EAAE,CAAC,IAAe,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC;CACxC,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,6GAA6G;QAC7G,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI;KAC/B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,aAAa,CAAC,SAAS,CAAC,IAAI;KAChC;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport type { PageProps } from './Page';\nimport { Page } from './Page';\nimport * as HeaderStories from './Header.stories';\n\nconst meta: Meta<PageProps> = {\n  title: 'Example/Page',\n  render: (args: PageProps) => Page(args),\n};\n\nexport default meta;\ntype Story = StoryObj<PageProps>;\n\nexport const LoggedIn: Story = {\n  args: {\n    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition\n    ...HeaderStories.LoggedIn.args,\n  },\n};\n\nexport const LoggedOut: Story = {\n  args: {\n    ...HeaderStories.LoggedOut.args,\n  },\n};\n"]}