@salla.sa/twilight-components 2.13.44 → 2.13.46

package/dist/components/salla-breadcrumb.js

@@ -13,59 +13,69 @@ const SallaBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class SallaBreadcrumb
     var _a, _b;
     this.items = undefined;
     this.breadcrumbs = undefined;
-    this.currentPage = salla.config.get('page');
-    this.isRtl = salla.config.get('theme.is_rtl', true);
-    salla.onReady(() => {
-      this.isRtl = salla.config.get('theme.is_rtl', true);
-      this.currentPage = salla.config.get('page');
-    });
     // Initialize slot HTML or use default if not provided
     this.itemSlot = ((_a = this.host.querySelector('[slot="item"]')) === null || _a === void 0 ? void 0 : _a.outerHTML) || '<li class="s-breadcrumb-item"><a href={url}>{title}</a></li>';
     this.iconSlot = (_b = this.host.querySelector('[slot="icon"]')) === null || _b === void 0 ? void 0 : _b.outerHTML;
   }
-  /**
-   * Checks if the given index is the last index in the breadcrumbs array.
-   * @param index - The index to check.
-   * @returns True if the index is the last, false otherwise.
-   */
-  isLast(index) {
-    return index === this.breadcrumbs.length - 1;
-  }
-  async getBreadcrumbs() {
-    try {
-      let params = {
-        id: this.currentPage.id,
-        page: this.currentPage.slug
-      };
-      if (this.currentPage.slug == 'product.single') {
-        params['parent_id'] = this.currentPage.product_id;
+  componentWillLoad() {
+    return (new Promise(resolve => salla.onReady(() => salla.lang.onLoaded(resolve))))
+      .then(() => {
+      const page = salla.config.get("page");
+      if (!page || !page.slug) {
+        salla.logger.error('salla-breadcrumbs:: page object not existed on salla.config.get("page")!');
+        return [];
       }
-      let resp = await salla.api.landing.fetchBreadcrumbs(params);
-      this.breadcrumbs = resp.data[0];
-    }
-    catch (error) {
-      salla.error("Error fetching breadcrumbs");
+      //get from api on these pages
+      if (['product.single', 'product.index'].includes(page.slug)) {
+        return salla.api.navigation.fetchBreadcrumbs({ page: page.slug, id: page.id, referrer: document.referrer })
+          .then(resp => this.breadcrumbs = resp.data);
+      }
+      //otherwise generate the breadcrumb
+      this.breadcrumbs = [{ title: salla.lang.get('common.titles.home'), url: salla.url.get('') }];
+      //inject my_account on the breadcrumb
+      if (page.slug.includes("customer")) {
+        this.breadcrumbs.push({ title: salla.lang.get('common.titles.profile'), url: salla.url.get('profile') });
+      }
+      //inject blog on the breadcrumb
+      if (page.slug.includes("blog")) {
+        this.breadcrumbs.push({ title: salla.lang.get('blocks.footer.blog'), url: salla.url.get('blog') });
+      }
+      //inject brands on the breadcrumb
+      if (page.slug == 'brands.single') {
+        this.breadcrumbs.push({ title: salla.lang.get('common.titles.brands'), url: salla.url.get('brands') });
+      }
+      //add the current page title as the last breadcrumb item, only if it's not set before
+      if (page.title && !['customer.profile', 'brands.index', 'blog.index'].includes(page.slug)) {
+        this.breadcrumbs.push({ title: page.title });
+      }
+      return this.breadcrumbs;
+    })
+      .then(() => this.breadcrumbs.length && (this.breadcrumbs[this.breadcrumbs.length - 1].is_last = true))
+      .catch((error) => {
+      salla.logger.error('salla-breadcrumb:: unexpected error!', error);
       this.breadcrumbs = [];
-    }
+    });
   }
   /**
    * Renders the breadcrumb component.
    * @returns JSX for rendering breadcrumbs.
    */
   render() {
-    return (h("ol", { class: "s-breadcrumb-wrapper" }, !!this.breadcrumbs ? this.breadcrumbs.map((item, index) => (!this.isLast(index) ? ([h("div", { id: "breadcrumb-slot", innerHTML: this.itemSlot
-          .replace(/\{url\}/g, item.url)
-          .replace(/\{title\}/g, item.title) }), h("li", { class: "s-breadcrumb-arrow" }, h("div", { id: 'breadcrumb-icon-slot', class: { "s-breadcrumb-default-icon": !this.iconSlot }, innerHTML: this.iconSlot ? this.iconSlot : this.isRtl ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon }))
-    ]) : (h("div", { id: "breadcrumb-slot", innerHTML: this.itemSlot
-        .replace(/\{url\}/g, item.url)
-        .replace(/\{title\}/g, item.title) })))) : ''));
+    if (this.breadcrumbs.length <= 1) {
+      salla.log('salla-breadcrumb:: There is no breadcrumbs!', this.breadcrumbs);
+      return;
+    }
+    return (h("ol", { class: "s-breadcrumb-wrapper" }, this.breadcrumbs.map(item => [
+      h("div", { class: "s-breadcrumb-slot", innerHTML: this.itemSlot.replace(/\{url\}/g, item.url).replace(/\{title\}/g, item.title) }),
+      this.getArrowDomForItem(item),
+    ])));
   }
-  /**
-   * Lifecycle method called before the component is loaded.
-   * Parses the items string into breadcrumb items.
-   */
-  async componentWillLoad() {
-    await this.getBreadcrumbs();
+  getArrowDomForItem(item) {
+    if (item.is_last) {
+      return '';
+    }
+    let iconDom = this.iconSlot || (salla.config.get('theme.is_rtl', true) ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon);
+    return h("li", { class: "s-breadcrumb-arrow" }, h("div", { class: { "s-breadcrumb-icon-slot": true, "s-breadcrumb-default-icon": !this.iconSlot }, innerHTML: iconDom }));
   }
   /**
    * Lifecycle method called after the component is rendered.
@@ -74,27 +84,22 @@ const SallaBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class SallaBreadcrumb
    * - Replaces the last anchor tag in the breadcrumb with its content.
    */
   componentDidRender() {
-    var _a, _b;
+    var _a, _b, _c;
     // Reduces the number of elements in the DOM
-    this.host.querySelectorAll('#breadcrumb-slot').forEach(el => el.replaceWith(el.firstChild));
-    this.host.querySelectorAll('#breadcrumb-icon-slot.s-breadcrumb-default-icon').forEach(el => el.replaceWith(el.querySelector('svg')));
+    this.host.querySelectorAll('.s-breadcrumb-slot').forEach(el => el.replaceWith(el.firstChild));
+    this.host.querySelectorAll('.s-breadcrumb-icon-slot.s-breadcrumb-default-icon').forEach(el => el.replaceWith(el.querySelector('svg')));
     // Removes the slots parent elements if exists
     (_a = this.host.querySelector('[slot="item"]')) === null || _a === void 0 ? void 0 : _a.remove();
     (_b = this.host.querySelector('[slot="icon"]')) === null || _b === void 0 ? void 0 : _b.remove();
     // Removes the last anchor tag in the breadcrumb
-    this.host.querySelectorAll('.s-breadcrumb-item').forEach((el, index) => {
-      if (index === this.breadcrumbs.length - 1) {
-        el.querySelector('a').replaceWith(el.querySelector('a').firstChild);
-      }
-    });
+    let lastEl = (_c = this.host.querySelectorAll('.s-breadcrumb-item')[this.breadcrumbs.length - 1]) === null || _c === void 0 ? void 0 : _c.querySelector('a');
+    lastEl && lastEl.replaceWith(lastEl.firstChild);
   }
   get host() { return this; }
   static get style() { return sallaBreadcrumbCss; }
 }, [0, "salla-breadcrumb", {
     "items": [1],
-    "breadcrumbs": [32],
-    "currentPage": [32],
-    "isRtl": [32]
+    "breadcrumbs": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/salla-breadcrumb.js.map

@@ -1 +1 @@
-{"file":"salla-breadcrumb.js","mappings":"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","names":["SallaBreadcrumb"],"sources":["src/components/salla-breadcrumb/salla-breadcrumb.scss?tag=salla-breadcrumb","src/components/salla-breadcrumb/salla-breadcrumb.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Prop, State, h, Element } from '@stencil/core';\nimport { BreadcrumbItem } from './interfaces';\nimport KeyBoardArrowLeftIcon from \"../../assets/svg/keyboard_arrow_left.svg\"\nimport KeyBoardArrowRightIcon from \"../../assets/svg/keyboard_arrow_right.svg\"\n\n/**\n * @name SallaBreadcrumb\n * @description A StencilJS component for rendering breadcrumb navigation.\n * @tag salla-breadcrumb\n *\n * @slot item - Replaces breadcrumb item, has replaceable props `{url}`, `{title}`.\n * @slot icon - Replaces breadcrumb arrow icon.\n */\n@Component({\n  tag: 'salla-breadcrumb',\n  styleUrl: 'salla-breadcrumb.scss',\n})\nexport class SallaBreadcrumb {\n  constructor() {\n    salla.onReady(() => {\n      this.isRtl = salla.config.get('theme.is_rtl', true);\n      this.currentPage = salla.config.get('page');\n    });\n\n    // Initialize slot HTML or use default if not provided\n    this.itemSlot = this.host.querySelector('[slot=\"item\"]')?.outerHTML || '<li class=\"s-breadcrumb-item\"><a href={url}>{title}</a></li>';\n    this.iconSlot = this.host.querySelector('[slot=\"icon\"]')?.outerHTML\n  }\n\n  @Element() host: HTMLElement;\n\n  /**\n   * Breadcrumb items in array\n   */\n  @Prop() items: string;\n\n  private readonly itemSlot: string;\n  private readonly iconSlot: string\n\n  @State() breadcrumbs: BreadcrumbItem[];\n  @State() currentPage = salla.config.get('page');\n  @State() isRtl: boolean = salla.config.get('theme.is_rtl', true);\n\n  /**\n   * Checks if the given index is the last index in the breadcrumbs array.\n   * @param index - The index to check.\n   * @returns True if the index is the last, false otherwise.\n   */\n  private isLast(index: number): boolean {\n    return index === this.breadcrumbs.length - 1;\n  }\n\n  private async getBreadcrumbs() {\n    try {\n      let params = {\n        id: this.currentPage.id,\n        page: this.currentPage.slug\n      }\n      if (this.currentPage.slug == 'product.single') {\n        params['parent_id'] = this.currentPage.product_id;\n      }\n      let resp = await salla.api.landing.fetchBreadcrumbs(params);\n      this.breadcrumbs = resp.data[0];\n    } catch (error) {\n      salla.error(\"Error fetching breadcrumbs\");\n      this.breadcrumbs = [];\n    }\n\n  }\n\n  /**\n   * Renders the breadcrumb component.\n   * @returns JSX for rendering breadcrumbs.\n   */\n  render() {\n    return (\n      <ol class=\"s-breadcrumb-wrapper\">\n        {!!this.breadcrumbs ? this.breadcrumbs.map((item, index) => (\n          !this.isLast(index) ? (\n            [<div id=\"breadcrumb-slot\" innerHTML={this.itemSlot\n              .replace(/\\{url\\}/g, item.url)\n              .replace(/\\{title\\}/g, item.title)\n            }>\n            </div>,\n            <li class=\"s-breadcrumb-arrow\">\n              <div id='breadcrumb-icon-slot' class={{ \"s-breadcrumb-default-icon\": !this.iconSlot }} innerHTML={this.iconSlot ? this.iconSlot : this.isRtl ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon}></div>\n            </li>\n            ]\n          ) : (\n            <div id=\"breadcrumb-slot\" innerHTML={this.itemSlot\n              .replace(/\\{url\\}/g, item.url)\n              .replace(/\\{title\\}/g, item.title)\n            }>\n            </div>\n          )\n        )) : ''}\n      </ol>\n    );\n  }\n\n  /**\n   * Lifecycle method called before the component is loaded.\n   * Parses the items string into breadcrumb items.\n   */\n  async componentWillLoad() {\n    await this.getBreadcrumbs();\n    try {\n      // this.breadcrumbs = JSON.parse(this.items);\n\n    } catch (error) {\n      console.error(error);\n      this.breadcrumbs = [];\n    }\n  }\n\n  /**\n   * Lifecycle method called after the component is rendered.\n   * - Reduces the number of elements in the DOM.\n   * - Removes unnecessary slots parent elements.\n   * - Replaces the last anchor tag in the breadcrumb with its content.\n   */\n  componentDidRender() {\n    // Reduces the number of elements in the DOM\n    this.host.querySelectorAll('#breadcrumb-slot').forEach(el => el.replaceWith(el.firstChild));\n    this.host.querySelectorAll('#breadcrumb-icon-slot.s-breadcrumb-default-icon').forEach(el => el.replaceWith(el.querySelector('svg')));\n\n    // Removes the slots parent elements if exists\n    this.host.querySelector('[slot=\"item\"]')?.remove();\n    this.host.querySelector('[slot=\"icon\"]')?.remove();\n\n    // Removes the last anchor tag in the breadcrumb\n    this.host.querySelectorAll('.s-breadcrumb-item').forEach((el, index) => {\n      if (index === this.breadcrumbs.length - 1) {\n        el.querySelector('a').replaceWith(el.querySelector('a').firstChild);\n      }\n    });\n  }\n}\n"],"version":3}
+{"file":"salla-breadcrumb.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,sBAAsB;;MCiBpCA,iBAAe;EAC1B;;;;;;;IAGE,IAAI,CAAC,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,0CAAE,SAAS,KAAI,8DAA8D,CAAC;IACtI,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,0CAAE,SAAS,CAAA;GACpE;EAaD,iBAAiB;IACf,OAAO,CAAC,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;OAC9E,IAAI,CAAC;MACJ,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;MACtC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACvB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,0EAA0E,CAAC,CAAC;QAC/F,OAAO,EAAE,CAAC;OACX;;MAGD,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;QAC3D,OAAO,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC;WAC1G,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;OAC7C;;MAID,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;;MAG7F,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;QAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,uBAAuB,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OAC1G;;MAGD,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;QAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;OACpG;;MAGD,IAAI,IAAI,CAAC,IAAI,IAAI,eAAe,EAAE;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;OACxG;;MAGD,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,kBAAkB,EAAE,cAAc,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;QACzF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;OAC9C;MAED,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB,CAAC;OACD,IAAI,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;OACrG,KAAK,CAAC,CAAC,KAAK;MACX,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,sCAAsC,EAAE,KAAK,CAAC,CAAC;MAClE,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB,CAAC,CAAC;GACN;;;;;EAMD,MAAM;IACJ,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,EAAE;MAChC,KAAK,CAAC,GAAG,CAAC,6CAA6C,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MAC3E,OAAO;KACR;IACD,QACE,UAAI,KAAK,EAAC,sBAAsB,IAC7B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,IAAI;MAC5B,WAAK,KAAK,EAAC,mBAAmB,EAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,GAAQ;MAC/H,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;KAC9B,CACA,CACE,EACL;GACH;EAEO,kBAAkB,CAAC,IAAoB;IAC7C,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,OAAO,EAAE,CAAC;KACX;IACD,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG,qBAAqB,GAAG,sBAAsB,CAAC,CAAC;IAEzH,OAAO,UAAI,KAAK,EAAC,oBAAoB,IACnC,WAAK,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,2BAA2B,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,OAAO,GAAQ,CACpH,CAAC;GACP;;;;;;;EAQD,kBAAkB;;;IAEhB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAC9F,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mDAAmD,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;IAGvI,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,0CAAE,MAAM,EAAE,CAAC;IACnD,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,0CAAE,MAAM,EAAE,CAAC;;IAGnD,IAAI,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC/G,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;GACjD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaBreadcrumb"],"sources":["src/components/salla-breadcrumb/salla-breadcrumb.scss?tag=salla-breadcrumb","src/components/salla-breadcrumb/salla-breadcrumb.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Prop, State, h, Element } from '@stencil/core';\nimport { BreadcrumbItem } from './interfaces';\nimport KeyBoardArrowLeftIcon from \"../../assets/svg/keyboard_arrow_left.svg\"\nimport KeyBoardArrowRightIcon from \"../../assets/svg/keyboard_arrow_right.svg\"\n\n/**\n * @name SallaBreadcrumb\n * @description A StencilJS component for rendering breadcrumb navigation.\n * @tag salla-breadcrumb\n *\n * @slot item - Replaces breadcrumb item, has replaceable props `{url}`, `{title}`.\n * @slot icon - Replaces breadcrumb arrow icon.\n */\n@Component({\n  tag: 'salla-breadcrumb',\n  styleUrl: 'salla-breadcrumb.scss',\n})\nexport class SallaBreadcrumb {\n  constructor() {\n\n    // Initialize slot HTML or use default if not provided\n    this.itemSlot = this.host.querySelector('[slot=\"item\"]')?.outerHTML || '<li class=\"s-breadcrumb-item\"><a href={url}>{title}</a></li>';\n    this.iconSlot = this.host.querySelector('[slot=\"icon\"]')?.outerHTML\n  }\n\n  @Element() host: HTMLElement;\n\n  /**\n   * Breadcrumb items in array\n   */\n  @Prop() items: string;\n\n  private readonly itemSlot: string;\n  private readonly iconSlot: string;\n\n  @State() breadcrumbs: BreadcrumbItem[];\n  componentWillLoad() {\n    return (new Promise(resolve => salla.onReady(() => salla.lang.onLoaded(resolve))))\n      .then(() => {\n        const page = salla.config.get(\"page\");\n        if (!page || !page.slug) {\n          salla.logger.error('salla-breadcrumbs:: page object not existed on salla.config.get(\"page\")!');\n          return [];\n        }\n\n        //get from api on these pages\n        if (['product.single', 'product.index'].includes(page.slug)) {\n          return salla.api.navigation.fetchBreadcrumbs({ page: page.slug, id: page.id, referrer: document.referrer })\n          .then(resp => this.breadcrumbs = resp.data);\n        }\n\n        //otherwise generate the breadcrumb\n\n        this.breadcrumbs = [{ title: salla.lang.get('common.titles.home'), url: salla.url.get('') }];\n\n        //inject my_account on the breadcrumb\n        if (page.slug.includes(\"customer\")) {\n          this.breadcrumbs.push({ title: salla.lang.get('common.titles.profile'), url: salla.url.get('profile') });\n        }\n\n        //inject blog on the breadcrumb\n        if (page.slug.includes(\"blog\")) {\n          this.breadcrumbs.push({ title: salla.lang.get('blocks.footer.blog'), url: salla.url.get('blog') });\n        }\n\n        //inject brands on the breadcrumb\n        if (page.slug == 'brands.single') {\n          this.breadcrumbs.push({ title: salla.lang.get('common.titles.brands'), url: salla.url.get('brands') });\n        }\n\n        //add the current page title as the last breadcrumb item, only if it's not set before\n        if (page.title && !['customer.profile', 'brands.index', 'blog.index'].includes(page.slug)) {\n          this.breadcrumbs.push({ title: page.title });\n        }\n\n        return this.breadcrumbs;\n      })\n      .then(() => this.breadcrumbs.length && (this.breadcrumbs[this.breadcrumbs.length - 1].is_last = true))\n      .catch((error) => {\n        salla.logger.error('salla-breadcrumb:: unexpected error!', error);\n        this.breadcrumbs = [];\n      });\n  }\n\n  /**\n   * Renders the breadcrumb component.\n   * @returns JSX for rendering breadcrumbs.\n   */\n  render() {\n    if (this.breadcrumbs.length <= 1) {\n      salla.log('salla-breadcrumb:: There is no breadcrumbs!', this.breadcrumbs);\n      return;\n    }\n    return (\n      <ol class=\"s-breadcrumb-wrapper\">\n        {this.breadcrumbs.map(item => [\n          <div class=\"s-breadcrumb-slot\" innerHTML={this.itemSlot.replace(/\\{url\\}/g, item.url).replace(/\\{title\\}/g, item.title)}></div>,\n          this.getArrowDomForItem(item),\n        ]\n        )}\n      </ol>\n    );\n  }\n\n  private getArrowDomForItem(item: BreadcrumbItem) {\n    if (item.is_last) {\n      return '';\n    }\n    let iconDom = this.iconSlot || (salla.config.get('theme.is_rtl', true) ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon);\n\n    return <li class=\"s-breadcrumb-arrow\">\n      <div class={{ \"s-breadcrumb-icon-slot\": true, \"s-breadcrumb-default-icon\": !this.iconSlot }} innerHTML={iconDom}></div>\n    </li>;\n  }\n\n  /**\n   * Lifecycle method called after the component is rendered.\n   * - Reduces the number of elements in the DOM.\n   * - Removes unnecessary slots parent elements.\n   * - Replaces the last anchor tag in the breadcrumb with its content.\n   */\n  componentDidRender() {\n    // Reduces the number of elements in the DOM\n    this.host.querySelectorAll('.s-breadcrumb-slot').forEach(el => el.replaceWith(el.firstChild));\n    this.host.querySelectorAll('.s-breadcrumb-icon-slot.s-breadcrumb-default-icon').forEach(el => el.replaceWith(el.querySelector('svg')));\n\n    // Removes the slots parent elements if exists\n    this.host.querySelector('[slot=\"item\"]')?.remove();\n    this.host.querySelector('[slot=\"icon\"]')?.remove();\n\n    // Removes the last anchor tag in the breadcrumb\n    let lastEl = this.host.querySelectorAll('.s-breadcrumb-item')[this.breadcrumbs.length - 1]?.querySelector('a');\n    lastEl && lastEl.replaceWith(lastEl.firstChild);\n  }\n}\n"],"version":3}