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

package/dist/PdSpaHelper.js

@@ -1,492 +0,0 @@
-import { LitElement, unsafeCSS, css, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import '@progressive-development/pd-page/pd-menu';
-import '@progressive-development/pd-page/pd-footer';
-import '@progressive-development/pd-content/pd-panel-viewer';
-import '@progressive-development/pd-content/pd-panel';
-import { pdStore, initializeStore } from './store/mini-rx.store.js';
-import { authStateChangedImpl, setServiceProvider, initAppImpl } from './service-provider/service-provider-impl.js';
-import { getLoadingSelector } from './store/spa-app-selector.js';
-import { setRouteElement } from './store/spa-app-effects.js';
-import { APP_CONF_EVENT } from './model/spa-model.js';
-import { loginSucess, nologin } from './store/spa-app-actions.js';
-import './defaultpage/default-login.js';
-import './defaultpage/default-not-found.js';
-import { PdToast } from './tmpown/pd-toast.js';
-import './tmpown/pd-loading-state.js';
-import { setCurrentFormatLocale } from './helper/locale-format.js';
-import { pdRouterService } from './router/PdRouterService.js';
-import { createLogger } from './helper/logger.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const POST_LOGIN_REDIRECT_KEY = "postLoginRedirect";
-const MADE_BY = {
-  txt: "made by PD Progressive Development",
-  email: "info@progressive-development.com"
-};
-const TOAST_DURATION = 6e3;
-let routeMap;
-let transformedRoutes;
-let navigationConfig;
-const getNavigationPage = (routeName) => {
-  const page = routeMap.get(routeName);
-  if (!page) throw new Error(`Navigation page not defined for: ${routeName}`);
-  return page;
-};
-const transformRoutes = () => {
-  const routeDefs = [];
-  navigationConfig.pages.forEach((page) => {
-    const patterns = page.pattern;
-    const routeDef = {
-      name: page.name,
-      pattern: patterns,
-      auth: page.auth,
-      authFallback: page.authFallback
-      // optional: du kannst hier später eine `action` mit Lazy Loading ergänzen
-    };
-    routeDefs.push(routeDef);
-  });
-  return routeDefs;
-};
-const spaLogger = createLogger("PdSpaHelper");
-const startInit = (config) => {
-  spaLogger.debug("Start init for config: ", config);
-  setServiceProvider(config.serviceProvider);
-  if (config.storeConfigParam) {
-    initializeStore(config.storeConfigParam);
-  }
-  initAppImpl(config);
-  navigationConfig = config.navigationConfigParam;
-  if (navigationConfig.includeLogin) {
-    navigationConfig.pages.push({
-      name: "login",
-      menu: [],
-      pattern: ["/login"],
-      auth: false
-    });
-  }
-  navigationConfig.pages.push({
-    name: "unauthorized",
-    menu: [],
-    pattern: ["/unauthorized"],
-    auth: false
-  });
-  navigationConfig.pages.push({
-    name: "not-found",
-    menu: [],
-    pattern: ["/:wildcard"],
-    auth: false
-  });
-  transformedRoutes = transformRoutes();
-  routeMap = new Map(navigationConfig.pages.map((p) => [p.name, p]));
-  pdRouterService.configureRoutes(transformedRoutes);
-  document.dispatchEvent(new CustomEvent("init-app-event"));
-  spaLogger.debug("Init done, init-app-event created");
-};
-const TOP_MENU_HEIGHT = 30;
-const _PdSpaHelper = class _PdSpaHelper extends LitElement {
-  constructor() {
-    super();
-    this.title = "Hey there";
-    this._loadingState = [];
-    this._route = "";
-    this._params = {};
-    this._query = {};
-    this._teaserClosed = false;
-    this._singleLocaleMenu = false;
-    setRouteElement(this);
-    const doSomething = (scrollPos) => {
-      if (scrollPos <= 50) {
-        this._teaserClosed = false;
-      } else {
-        this._teaserClosed = true;
-      }
-    };
-    let ticking = false;
-    document.addEventListener("scroll", () => {
-      const lastKnownScrollPosition = window.scrollY;
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          doSomething(lastKnownScrollPosition);
-          ticking = false;
-        });
-        ticking = true;
-      }
-    });
-    document.addEventListener("init-app-event", () => {
-      spaLogger.debug("Init event catched, ignore here...");
-    });
-    if (navigationConfig.includeLogin) {
-      spaLogger.debug("Login included, activate login handler");
-      this.activateLoginHandler();
-    }
-    this.addEventListener("toast-event", this._createTemporaryToast);
-    this.addEventListener("route-event", this._handleMenuRouteEvent);
-  }
-  static {
-    this.styles = // Ref: Additional use classmap to add custom classes in concrete impl
-    css`
-      :host {
-        display: flex;
-        flex-flow: column;
-        height: 100%;
-      }
-
-      header {
-        flex-grow: 0;
-      }
-
-      main {
-        flex-grow: 1;
-        flex-basis: max-content;
-      }
-
-      footer {
-        flex-grow: 0;
-      }
-
-      .default-header {
-        width: 100%;
-        position: fixed;
-        top: 0;
-        display: block;
-        z-index: 99;
-      }
-
-      .default-teaser {
-        --pd-panel-overflow: hidden;
-        --pd-panel-height: var(--pd-teaser-height, 380px);
-        --pd-panel-width: 100%;
-        --pd-panel-border-radius: 0;
-        --pd-panel-bg: var(--pd-default-col);
-        --pd-panel-viewer-bg-col: var(--pd-default-col);
-      }
-
-      .default-menu {
-        transition: background-color 2s;
-      }
-
-      .default-menu-withteaser {
-        --pd-menu-bg-col: var(--pd-spa-menu-change-col, #afc1d2);
-        --pd-menu-font-col: var(--pd-spa-menu-change-font-col, #0a3a48);
-        transition: background-color 2s;
-      }
-
-      .default-top-menu,
-      .default-top-menu-withteaser {
-        --pd-menu-height: ${unsafeCSS(TOP_MENU_HEIGHT)}px;
-        --pd-menu-font-size: 0.8em;
-        --pd-menu-shadow: 0;
-      }
-
-      .default-top-menu-withteaser {
-        --pd-menu-bg-col: var(--pd-teaser-bg-col);
-      }
-
-      /* 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)
-        );
-        transition: padding-top 2s;
-      }
-
-      .default-main {
-        padding-top: calc(var(--pd-menu-height));
-        transition: padding-top 2s;
-      }
-
-      .default-main-withteaser {
-        padding-top: calc(
-          var(--pd-menu-height) + var(--pd-teaser-height, 380px)
-        );
-        transition: padding-top 2s;
-      }
-    `;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    pdRouterService.onRouteChange(({ route, params, query }) => {
-      this._route = route;
-      this._params = params;
-      this._query = query;
-    });
-    this.addEventListener(APP_CONF_EVENT, this._setConfInDetail);
-    this._subscription = pdStore().select(getLoadingSelector).subscribe((loadingState) => {
-      spaLogger.debug("Loading State: ", loadingState);
-      this._loadingState = loadingState;
-    });
-  }
-  disconnectedCallback() {
-    this.removeEventListener(APP_CONF_EVENT, this._setConfInDetail);
-    this._subscription?.unsubscribe();
-    super.disconnectedCallback();
-  }
-  _setConfInDetail(event) {
-    const { detail } = event;
-    if (detail) {
-      detail.appConf = {
-        ...this._getAppConfiguration()
-      };
-    }
-  }
-  /**
-   * Non reactive private property for the index db class.
-   */
-  // private _indexDBClient?: YoIndexDBClient|null;
-  /**
-   * Call to activate onAuthState change with profile request callbacks.
-   * Only implemented for firebase provider.
-   */
-  activateLoginHandler() {
-    spaLogger.debug("Activate Login Handler");
-    const callback = async (user) => {
-      spaLogger.debug(
-        "Activate Login Handler => callback called for user:",
-        user?.email
-      );
-      if (user) {
-        const tokenResult = await user.getIdTokenResult();
-        const claims = tokenResult.claims;
-        pdStore().dispatch(
-          loginSucess({
-            uid: user.uid,
-            email: user.email,
-            emailVerified: user.emailVerified,
-            claims,
-            providerId: user.providerData[0]?.providerId ?? "firebase"
-          })
-        );
-      } else {
-        pdStore().dispatch(nologin());
-      }
-    };
-    authStateChangedImpl(callback);
-  }
-  render() {
-    if (this._route === "") {
-      return html`<p>Routing page...</p>`;
-    }
-    const pageConf = getNavigationPage(this._route);
-    const hideTeaser = this._teaserClosed || !pageConf?.withTeaser;
-    return html`
-      <header id="headerElementId" class="default-header">
-        ${pageConf?.hideTopMenu ? "" : this._renderTopMenu(pageConf, hideTeaser)}
-        ${hideTeaser ? "" : this._renderTeaser()}
-        ${pageConf?.hideMenu ? "" : this._renderMenu(pageConf, hideTeaser)}
-      </header>
-
-      <main
-        class="${this._getMainClass(hideTeaser, pageConf)}"
-        @init-menu-sections="${this._initMenuSections}"
-        @login-success="${this._loginSuccess}"
-      >
-        ${this._loadingState.map(
-      (ls) => html`<pd-loading-state .loadingState="${ls}"></pd-loading-state>`
-    )}
-        ${this._renderRoutePages()}
-        ${this._route === "login" ? html` <default-login active></default-login>` : ""}
-        ${this._route === "not-found" ? html`<default-not-found active=""></default-not-found>` : ""}
-      </main>
-
-      ${pageConf?.withFooter ? html` <footer class="default-footer">${this._renderFooter()}</footer>` : ""}
-    `;
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _getMainClass(hideTeaser, pageConf) {
-    if (hideTeaser) {
-      if (!pageConf) {
-        return "default-main";
-      }
-      return pageConf.mainClass ? pageConf.mainClass : pageConf.withTeaser ? "default-main-padding" : "default-main";
-    }
-    return "default-main-withteaser";
-  }
-  _renderMenu(pageConfig, hideTeaser) {
-    const menuForPage = pageConfig ? pageConfig.menu || [] : [];
-    return menuForPage ? html`
-          <pd-menu
-            id="pdHelperMenuId"
-            class="${hideTeaser ? "default-menu" : "default-menu-withteaser"}"
-            @locale-change="${this._localeChange}"
-            selectedLocale="${this._selectedLocale}"
-            .locales=${this._singleLocaleMenu ? this._availableLocales : []}
-            .menuItems=${menuForPage}
-            .topMenuItems=${[]}
-            activeRoute="${this._route}"
-            logoRoute="${pageConfig?.menuLogoRoute || ""}"
-            headerSize="${this._getHeaderSize(hideTeaser) + TOP_MENU_HEIGHT}"
-          >
-            ${hideTeaser ? this._getAppLogo() : ""}
-          </pd-menu>
-        ` : "";
-  }
-  _renderTopMenu(pageConfig, hideTeaser) {
-    const topMenuForPage = pageConfig ? pageConfig.topMenuItems : void 0;
-    return topMenuForPage ? html`
-          <pd-menu
-            id="pdHelperTopMenuId"
-            noBurgerMenu
-            @locale-change="${this._localeChange}"
-            class="${hideTeaser ? "default-top-menu" : "default-top-menu-withteaser"}"
-            .locales=${this._availableLocales}
-            selectedLocale="${this._selectedLocale}"
-            .topMenuItems=${topMenuForPage}
-            activeRoute="${this._route}"
-          >
-          </pd-menu>
-        ` : "";
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _renderTeaser() {
-    const teaserContent = this._getTeaserContent();
-    if (!teaserContent || teaserContent.length <= 0) {
-      return "";
-    }
-    return html`
-      <pd-panel-viewer
-        class="default-teaser"
-        id="teaserPanelViewerId"
-        deltaCalc="4"
-      >
-        ${teaserContent.map(
-      (content) => html` <pd-panel> ${content} </pd-panel> `
-    )}
-      </pd-panel-viewer>
-    `;
-  }
-  _renderFooter() {
-    const footer = this._getFooter();
-    return html`
-      <pd-footer
-        .footerLinks="${footer.links}"
-        version="${footer.version}"
-        copyright="${footer.copyright || "PD Progressive Developent UG"}"
-        .madeBy="${MADE_BY}"
-        @footer-link="${this._handleFooterRouteEvent}"
-      >
-      </pd-footer>
-    `;
-  }
-  _loginSuccess(e) {
-    const redirectRoute = sessionStorage.getItem(POST_LOGIN_REDIRECT_KEY);
-    if (redirectRoute) {
-      const routeToNavigate = redirectRoute && redirectRoute !== "/login" ? redirectRoute : "";
-      sessionStorage.removeItem(POST_LOGIN_REDIRECT_KEY);
-      this.dispatchEvent(
-        new CustomEvent("route-event", {
-          detail: { route: routeToNavigate },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-    spaLogger.debug("Login Event: ", e, window.location.href, redirectRoute);
-  }
-  _localeChange(e) {
-    const newLocale = e.detail;
-    this._setLocale(newLocale);
-    this._selectedLocale = newLocale;
-    setCurrentFormatLocale(newLocale);
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _handleMenuRouteEvent(e) {
-    if (e.detail.el) {
-      this._scrollToContent(e.detail.el);
-    } else {
-      this._navigateToPage(e.detail.route);
-    }
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _handleFooterRouteEvent(e) {
-    const { linkObj } = e.detail;
-    if (linkObj.link) {
-      this._navigateToPage(linkObj.link);
-    }
-    if (linkObj.action) {
-      linkObj.action();
-    }
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _initMenuSections(e) {
-    const pageConf = getNavigationPage(this._route);
-    if (pageConf) {
-      pageConf.menu = pageConf.menu?.map(
-        (menuElement, index) => ({
-          ...menuElement,
-          ref: e.detail.menuRefs[index]
-        })
-      );
-    }
-  }
-  _createTemporaryToast(e) {
-    const tmpToast = new PdToast();
-    tmpToast.isError = e.detail.isError;
-    tmpToast.isSuccess = e.detail.isSuccess;
-    const slotContent = document.createTextNode(e.detail.txt);
-    tmpToast.appendChild(slotContent);
-    this.shadowRoot?.appendChild(tmpToast);
-    tmpToast.duration = e.detail.duration || TOAST_DURATION;
-  }
-  static _scrollToTop() {
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: "smooth"
-    });
-  }
-  // Test, not used at the moment, jump/menu problem...
-  // eslint-disable-next-line class-methods-use-this
-  _scrollToContent(el) {
-    if (el) {
-      const rect = el.getBoundingClientRect();
-      window.scrollBy({
-        top: rect.top - (this._teaserClosed ? 80 : 450),
-        left: 0,
-        behavior: "smooth"
-      });
-    }
-  }
-  _navigateToPage(routeURL) {
-    _PdSpaHelper._scrollToTop();
-    pdRouterService.navigate(routeURL);
-  }
-};
-__decorateClass([
-  property({ type: String })
-], _PdSpaHelper.prototype, "title");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_user");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_profile");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_loadingState");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_route");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_params");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_query");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_teaserClosed");
-__decorateClass([
-  state()
-], _PdSpaHelper.prototype, "_selectedLocale");
-let PdSpaHelper = _PdSpaHelper;
-
-export { POST_LOGIN_REDIRECT_KEY, PdSpaHelper, startInit };

package/dist/defaultpage/default-confirm-popup.d.ts

@@ -1,19 +0,0 @@
-import { LitElement, CSSResultGroup, HTMLTemplateResult } from 'lit';
-export declare const KEY_ABORT = "1";
-export declare const ABORT_EVENT_NAME = "close-popup";
-export declare const KEY_STORE = "2";
-export declare const STORE_EVENT_NAME = "store";
-export type PopupType = "info" | "help" | "warn" | "error";
-export declare abstract class DefaultConfirmPopup extends LitElement {
-    abstract _popupTitle: string;
-    abstract _type?: PopupType;
-    abstract _singleButton: boolean;
-    okButtonText: string;
-    cancelButtonText: string;
-    static styles: CSSResultGroup;
-    render(): import('lit').TemplateResult<1>;
-    private _generateButtons;
-    protected _handleButtonClick(e: CustomEvent): void;
-    abstract _renderContent(): HTMLTemplateResult;
-}
-//# sourceMappingURL=default-confirm-popup.d.ts.map

package/dist/defaultpage/default-confirm-popup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-confirm-popup.d.ts","sourceRoot":"","sources":["../../src/defaultpage/default-confirm-popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAO,cAAc,EAAE,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,oDAAoD,CAAC;AAE5D,eAAO,MAAM,SAAS,MAAM,CAAC;AAC7B,eAAO,MAAM,gBAAgB,gBAAgB,CAAC;AAE9C,eAAO,MAAM,SAAS,MAAM,CAAC;AAC7B,eAAO,MAAM,gBAAgB,UAAU,CAAC;AAExC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,8BAAsB,mBAAoB,SAAQ,UAAU;IAC1D,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAE7B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAE3B,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAGhC,YAAY,EAAE,MAAM,CAAQ;IAG5B,gBAAgB,EAAE,MAAM,CAAY;IAEpC,MAAM,CAAC,MAAM,EAMR,cAAc,CAAC;IAEpB,MAAM;IAcN,OAAO,CAAC,gBAAgB;IAUxB,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW;IAQ3C,QAAQ,CAAC,cAAc,IAAI,kBAAkB;CAC9C"}

package/dist/defaultpage/default-confirm-popup.js

@@ -1,70 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import '@progressive-development/pd-dialog/pd-popup-dialog';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const KEY_ABORT = "1";
-const ABORT_EVENT_NAME = "close-popup";
-const KEY_STORE = "2";
-const STORE_EVENT_NAME = "store";
-class DefaultConfirmPopup extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.okButtonText = "Ok";
-    this.cancelButtonText = "Cancel";
-  }
-  static {
-    this.styles = [
-      css`
-      :host {
-        --pd-popup-max-width: 600px;
-      }
-    `
-    ];
-  }
-  render() {
-    const buttons = this._generateButtons();
-    return html`
-      <pd-popup-dialog
-        @submit-button-clicked="${this._handleButtonClick}"
-        title="${this._popupTitle}"
-        .buttons="${buttons}"
-        type="${this._type || "info"}"
-      >
-        <div slot="content">${this._renderContent()}</div>
-      </pd-popup-dialog>
-    `;
-  }
-  _generateButtons() {
-    if (this._singleButton) {
-      return [{ key: KEY_STORE, name: this.okButtonText, primary: true }];
-    }
-    return [
-      { key: KEY_ABORT, name: this.cancelButtonText },
-      { key: KEY_STORE, name: this.okButtonText, primary: true }
-    ];
-  }
-  _handleButtonClick(e) {
-    this.dispatchEvent(
-      new CustomEvent(
-        e.detail.button === KEY_STORE ? STORE_EVENT_NAME : ABORT_EVENT_NAME
-      )
-    );
-  }
-}
-__decorateClass([
-  property({ type: String })
-], DefaultConfirmPopup.prototype, "okButtonText");
-__decorateClass([
-  property({ type: String })
-], DefaultConfirmPopup.prototype, "cancelButtonText");
-
-export { ABORT_EVENT_NAME, DefaultConfirmPopup, KEY_ABORT, KEY_STORE, STORE_EVENT_NAME };

package/dist/defaultpage/default-dialog-popup.d.ts

@@ -1,19 +0,0 @@
-import { LitElement, CSSResultGroup, HTMLTemplateResult } from 'lit';
-export declare abstract class DefaultDialogPopup<T> extends LitElement {
-    protected _requiredFieldInfo: boolean;
-    abstract _formData: T;
-    abstract _popupTitle: string;
-    protected _dialogButtons: Array<any>;
-    protected _validationError?: string;
-    protected _validForm: boolean;
-    private _formElement;
-    static styles: CSSResultGroup;
-    render(): import('lit').TemplateResult<1>;
-    private _generateButtons;
-    protected _handleButtonClick(e: CustomEvent): void;
-    abstract _isValidFormData(): boolean;
-    abstract _renderContent(): HTMLTemplateResult;
-    private _disableStoreButtonTemporarily;
-    reset(): void;
-}
-//# sourceMappingURL=default-dialog-popup.d.ts.map

package/dist/defaultpage/default-dialog-popup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-dialog-popup.d.ts","sourceRoot":"","sources":["../../src/defaultpage/default-dialog-popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAEV,cAAc,EACd,kBAAkB,EAEnB,MAAM,KAAK,CAAC;AAKb,OAAO,oDAAoD,CAAC;AAC5D,OAAO,qDAAqD,CAAC;AAW7D,8BAAsB,kBAAkB,CAAC,CAAC,CAAE,SAAQ,UAAU;IAC5D,SAAS,CAAC,kBAAkB,EAAE,OAAO,CAAQ;IAE7C,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAEtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAI7B,SAAS,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,CAAC,CAGlC;IAGF,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAGpC,SAAS,CAAC,UAAU,EAAE,OAAO,CAAS;IAGtC,OAAO,CAAC,YAAY,CAAmB;IAEvC,MAAM,CAAC,MAAM,EAMR,cAAc,CAAC;IAEpB,MAAM;IAyBN,OAAO,CAAC,gBAAgB;IAUxB,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW;IAa3C,QAAQ,CAAC,gBAAgB,IAAI,OAAO;IAEpC,QAAQ,CAAC,cAAc,IAAI,kBAAkB;IAE7C,OAAO,CAAC,8BAA8B;IAS/B,KAAK;CAGb"}