@salla.sa/twilight-components 2.12.35 → 2.12.36

package/dist/esm-es5/salla-products-slider.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["sallaProductsSliderCss","SallaProductsSlider","hostRef","_this","this","salla","onReady","sourceValueIsValid","getSourceValue","isSourceWithoutValue","logger","warn","concat","getSource","hasCustomComponent","customElements","get","prototype","includes","getItemHTML","product","h","class","source","canRender","isReady","componentWillLoad","productsData","fetchProducts","api","withoutNotifier","fetch","source_value","limit","then","res","data","event","emit","catch","log","getHeaders","setTimeout","Helper","getProductsSource","getProductsSourceValue","sourceValue","render","config","Host","id","sliderId","Math","random","toString","substr","autoplay","type","blockTitle","subTitle","displayAllUrl","slot","_a","map"],"sources":["src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n  &-wrapper{\n\n  }\n  &-slider{\n\n  }\n  &-card{\n\n  }\n}","import { Component, Host, h, Prop, Element, State } from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\n@Component({\n  tag: 'salla-products-slider',\n  styleUrl: 'salla-products-slider.scss'\n})\n\n//todo:: extends this component from salla-products-list or the opposite\nexport class SallaProductsSlider {\n  constructor() {\n    salla.onReady(() => {\n      this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());\n      if (!this.sourceValueIsValid) {\n        salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);\n        return;\n      }\n      this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n    });\n  }\n  private isSourceWithoutValue() {\n    return ['offers', 'latest', 'sales'].includes(this.getSource());\n  }\n\n  @Element() host: HTMLElement;\n  //todo:: support limit, default =10, make sure that maximum is 32,\n\n  /**\n   * Title of the block - works only if slider is true\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() blockTitle: string;\n\n  /**\n   * Sub title of the block - works only if slider is true\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() subTitle: string;\n\n  /**\n   * Slider Id, if not provided will be generated automatically\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() sliderId: string;\n\n  /**\n   * Display 'ALL' URL\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() displayAllUrl: string;\n\n  /**\n  * autoplay option for products slider\n  */\n  @Prop({ mutable: true }) autoplay: boolean\n\n  /**\n   * Source of the products, if api will get the products from the API, if json will get the products from the products prop\n   * @type {string}\n   * @default ''\n   * */\n  @Prop({\n    reflect: true,\n    mutable: true\n  }) source: 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'tags' | 'selected' | 'offers' | 'landing-page';\n\n  /**\n   * The source value, cloud be different values as following:\n   * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n   * - products payload when `source` = 'json'\n   * - product_id when `source` = 'related'\n   *\n   * @type {string}\n   * */\n  @Prop() sourceValue: string;\n\n  /**\n   * Limit for number of products in the list.\n   */\n  @Prop({ mutable: true }) limit: number;\n\n\n  @State() productsData: any;\n  @State() isReady: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() apiUrl: string = '';\n  @State() parsedSourceValue: any;\n\n  private getItemHTML(product) {\n    if (this.hasCustomComponent) {\n      return <div class=\"s-products-slider-card\">\n        <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()} />\n      </div>;\n    }\n\n    return <div class=\"s-products-slider-card\">\n      <salla-product-card\n        show-quantity={this.getSource() == 'landing-page'}\n        hide-add-btn={this.getSource() == 'landing-page'}\n        shadow-on-hover={true}\n        product={product} />\n    </div>;\n  }\n\n\n\n  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n\n  componentWillLoad() {\n    if (this.source === 'json') {\n      this.productsData = this.getSourceValue();\n      this.isReady = true\n      return;\n    }\n    return this.fetchProducts();\n\n  }\n\n  private fetchProducts() {\n    return salla.api.withoutNotifier(() => \n      salla.product.api.fetch({\n        source: this.getSource(),\n        source_value: this.getSourceValue(),\n        limit: this.limit,\n      }).then(res => {\n        this.productsData = res.data\n        this.isReady = true\n        salla.event.emit('salla-products-slider::products.fetched', res.data);\n      }).catch(() => {\n        // TODO: Find the real issue and fix it\n        salla.log('Request headers', salla.api.getHeaders());\n        setTimeout(() => this.fetchProducts(), 1000);\n      })\n    )\n  }\n  private getSource() {\n    return Helper.getProductsSource(this.source);\n  }\n\n  private getSourceValue() {\n    return Helper.getProductsSourceValue(this.source, this.sourceValue);\n  }\n\n  render() {\n    if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled')) || !this.canRender()) {\n      return;\n    }\n    return (\n      <Host class=\"s-products-slider-wrapper\">\n        <salla-slider\n          class=\"s-products-slider-slider\"\n          id={this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n          auto-play={this.autoplay}\n          type=\"carousel\"\n          block-title={this.blockTitle}\n          block-subTitle={this.subTitle}\n          display-all-url={this.displayAllUrl}\n        >\n          <div slot=\"items\">\n            {this.productsData?.map(product => this.getItemHTML(product))}\n          </div>\n        </salla-slider>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":";;;iIAAA,IAAMA,uBAAyB,G,ICQlBC,oBAAmB,WAC9B,SAAAA,EAAAC,GAAA,IAAAC,EAAAC,K,iWAgF0B,G,iCA/ExBC,MAAMC,SAAQ,WACZH,EAAKI,sBAAwBJ,EAAKK,kBAAoBL,EAAKM,wBAC3D,IAAKN,EAAKI,mBAAoB,CAC5BF,MAAMK,OAAOC,KAAK,6CAAAC,OAA6CT,EAAKU,YAAW,MAC/E,M,CAEFV,EAAKW,qBAAuBC,eAAeC,IAAI,4B,IAG3Cf,EAAAgB,UAAAR,qBAAA,WACN,MAAO,CAAC,SAAU,SAAU,SAASS,SAASd,KAAKS,Y,EAwE7CZ,EAAAgB,UAAAE,YAAA,SAAYC,GAClB,GAAIhB,KAAKU,mBAAoB,CAC3B,OAAOO,EAAA,OAAKC,MAAM,0BAChBD,EAAA,6BAA2BD,QAASA,EAASG,OAAQnB,KAAKS,YAAW,eAAgBT,KAAKI,mB,CAI9F,OAAOa,EAAA,OAAKC,MAAM,0BAChBD,EAAA,sCACiBjB,KAAKS,aAAe,eAAc,eACnCT,KAAKS,aAAe,eAAc,kBAC/B,KACjBO,QAASA,I,EAMPnB,EAAAgB,UAAAO,UAAA,WACN,OAAOpB,KAAKG,oBAAsBH,KAAKqB,O,EAGzCxB,EAAAgB,UAAAS,kBAAA,WACE,GAAItB,KAAKmB,SAAW,OAAQ,CAC1BnB,KAAKuB,aAAevB,KAAKI,iBACzBJ,KAAKqB,QAAU,KACf,M,CAEF,OAAOrB,KAAKwB,e,EAIN3B,EAAAgB,UAAAW,cAAA,eAAAzB,EAAAC,KACN,OAAOC,MAAMwB,IAAIC,iBAAgB,WAC/B,OAAAzB,MAAMe,QAAQS,IAAIE,MAAM,CACtBR,OAAQpB,EAAKU,YACbmB,aAAc7B,EAAKK,iBACnByB,MAAO9B,EAAK8B,QACXC,MAAK,SAAAC,GACNhC,EAAKwB,aAAeQ,EAAIC,KACxBjC,EAAKsB,QAAU,KACfpB,MAAMgC,MAAMC,KAAK,0CAA2CH,EAAIC,K,IAC/DG,OAAM,WAEPlC,MAAMmC,IAAI,kBAAmBnC,MAAMwB,IAAIY,cACvCC,YAAW,WAAM,OAAAvC,EAAKyB,eAAL,GAAsB,I,GAXzC,G,EAeI3B,EAAAgB,UAAAJ,UAAA,WACN,OAAO8B,OAAOC,kBAAkBxC,KAAKmB,O,EAG/BtB,EAAAgB,UAAAT,eAAA,WACN,OAAOmC,OAAOE,uBAAuBzC,KAAKmB,OAAQnB,KAAK0C,Y,EAGzD7C,EAAAgB,UAAA8B,OAAA,eAAA5C,EAAAC,K,MACE,GAAKA,KAAKS,aAAe,YAAcR,MAAM2C,OAAOhC,IAAI,qDAAwDZ,KAAKoB,YAAa,CAChI,M,CAEF,OACEH,EAAC4B,KAAI,CAAC3B,MAAM,6BACVD,EAAA,gBACEC,MAAM,2BACN4B,GAAI9C,KAAK+C,UAAY,qBAAAvC,OAAqBwC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,IAAI,YACxEnD,KAAKoD,SAChBC,KAAK,WAAU,cACFrD,KAAKsD,WAAU,iBACZtD,KAAKuD,SAAQ,kBACZvD,KAAKwD,eAEtBvC,EAAA,OAAKwC,KAAK,UACPC,EAAA1D,KAAKuB,gBAAY,MAAAmC,SAAA,SAAAA,EAAEC,KAAI,SAAA3C,GAAW,OAAAjB,EAAKgB,YAAYC,EAAjB,M,kIA7Jf,G"}
+{"version":3,"names":["sallaProductsSliderCss","SallaProductsSlider","prototype","isSourceWithoutValue","includes","this","getSource","getItemHTML","product","hasCustomComponent","h","class","source","getSourceValue","canRender","sourceValueIsValid","isReady","componentWillLoad","_this","Helper","onSallaReadyPromise","salla","logger","warn","concat","customElements","get","productsData","fetchProducts","limit","then","res","data","event","emit","getProductsSource","getProductsSourceValue","sourceValue","render","config","Host","id","sliderId","Math","random","toString","substr","autoplay","type","blockTitle","subTitle","displayAllUrl","slot","_a","map"],"sources":["src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n  &-wrapper{\n\n  }\n  &-slider{\n\n  }\n  &-card{\n\n  }\n}","import { Component, Host, h, Prop, Element, State } from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\n@Component({\n  tag: 'salla-products-slider',\n  styleUrl: 'salla-products-slider.scss'\n})\n\n//todo:: extends this component from salla-products-list or the opposite\nexport class SallaProductsSlider {\n  private isSourceWithoutValue() {\n    return ['offers', 'latest', 'sales'].includes(this.getSource());\n  }\n\n  @Element() host: HTMLElement;\n  //todo:: support limit, default =10, make sure that maximum is 32,\n\n  /**\n   * Title of the block - works only if slider is true\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() blockTitle: string;\n\n  /**\n   * Sub title of the block - works only if slider is true\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() subTitle: string;\n\n  /**\n   * Slider Id, if not provided will be generated automatically\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() sliderId: string;\n\n  /**\n   * Display 'ALL' URL\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() displayAllUrl: string;\n\n  /**\n  * autoplay option for products slider\n  */\n  @Prop({ mutable: true }) autoplay: boolean\n\n  /**\n   * Source of the products, if api will get the products from the API, if json will get the products from the products prop\n   * @type {string}\n   * @default ''\n   * */\n  @Prop({\n    reflect: true,\n    mutable: true\n  }) source: 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'tags' | 'selected' | 'offers' | 'landing-page';\n\n  /**\n   * The source value, cloud be different values as following:\n   * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n   * - products payload when `source` = 'json'\n   * - product_id when `source` = 'related'\n   *\n   * @type {string}\n   * */\n  @Prop() sourceValue: string;\n\n  /**\n   * Limit for number of products in the list.\n   */\n  @Prop({ mutable: true }) limit: number;\n\n\n  @State() productsData: any;\n  @State() isReady: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() apiUrl: string = '';\n  @State() parsedSourceValue: any;\n\n  private getItemHTML(product) {\n    if (this.hasCustomComponent) {\n      return <div class=\"s-products-slider-card\">\n        <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()} />\n      </div>;\n    }\n\n    return <div class=\"s-products-slider-card\">\n      <salla-product-card\n        show-quantity={this.getSource() == 'landing-page'}\n        hide-add-btn={this.getSource() == 'landing-page'}\n        shadow-on-hover={true}\n        product={product} />\n    </div>;\n  }\n\n\n\n  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n  componentWillLoad() {\n      return Helper.onSallaReadyPromise(() => {\n          this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());\n          if (!this.sourceValueIsValid) {\n              salla.logger.warn(`source-value prop is required for source [${\n                  this.getSource()\n              }]`);\n              return;\n          }\n          this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n\n          if (this.source === 'json') {\n              this.productsData = this.getSourceValue();\n              this.isReady = true\n              return;\n          }\n          return Helper.fetchProducts(this.getSource(), this.getSourceValue(), this.limit).then(res => {\n              this.productsData = res.data\n              this.isReady = true\n              salla.event.emit('salla-products-slider::products.fetched', res.data);\n          });\n      });\n  }\n\n  private getSource() {\n    return Helper.getProductsSource(this.source);\n  }\n\n  private getSourceValue() {\n    return Helper.getProductsSourceValue(this.source, this.sourceValue);\n  }\n\n  render() {\n    if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled')) || !this.canRender()) {\n      return;\n    }\n    return (\n      <Host class=\"s-products-slider-wrapper\">\n        <salla-slider\n          class=\"s-products-slider-slider\"\n          id={this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n          auto-play={this.autoplay}\n          type=\"carousel\"\n          block-title={this.blockTitle}\n          block-subTitle={this.subTitle}\n          display-all-url={this.displayAllUrl}\n        >\n          <div slot=\"items\">\n            {this.productsData?.map(product => this.getItemHTML(product))}\n          </div>\n        </salla-slider>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":";;;iIAAA,IAAMA,uBAAyB,G,ICQlBC,oBAAmB,W,+WAuEJ,G,iCAtElBA,EAAAC,UAAAC,qBAAA,WACN,MAAO,CAAC,SAAU,SAAU,SAASC,SAASC,KAAKC,Y,EAwE7CL,EAAAC,UAAAK,YAAA,SAAYC,GAClB,GAAIH,KAAKI,mBAAoB,CAC3B,OAAOC,EAAA,OAAKC,MAAM,0BAChBD,EAAA,6BAA2BF,QAASA,EAASI,OAAQP,KAAKC,YAAW,eAAgBD,KAAKQ,mB,CAI9F,OAAOH,EAAA,OAAKC,MAAM,0BAChBD,EAAA,sCACiBL,KAAKC,aAAe,eAAc,eACnCD,KAAKC,aAAe,eAAc,kBAC/B,KACjBE,QAASA,I,EAMPP,EAAAC,UAAAY,UAAA,WACN,OAAOT,KAAKU,oBAAsBV,KAAKW,O,EAEzCf,EAAAC,UAAAe,kBAAA,eAAAC,EAAAb,KACI,OAAOc,OAAOC,qBAAoB,WAC9BF,EAAKH,sBAAwBG,EAAKL,kBAAoBK,EAAKf,wBAC3D,IAAKe,EAAKH,mBAAoB,CAC1BM,MAAMC,OAAOC,KAAK,6CAAAC,OACdN,EAAKZ,YACT,MACA,M,CAEJY,EAAKT,qBAAuBgB,eAAeC,IAAI,6BAE/C,GAAIR,EAAKN,SAAW,OAAQ,CACxBM,EAAKS,aAAeT,EAAKL,iBACzBK,EAAKF,QAAU,KACf,M,CAEJ,OAAOG,OAAOS,cAAcV,EAAKZ,YAAaY,EAAKL,iBAAkBK,EAAKW,OAAOC,MAAK,SAAAC,GAClFb,EAAKS,aAAeI,EAAIC,KACxBd,EAAKF,QAAU,KACfK,MAAMY,MAAMC,KAAK,0CAA2CH,EAAIC,K,QAKpE/B,EAAAC,UAAAI,UAAA,WACN,OAAOa,OAAOgB,kBAAkB9B,KAAKO,O,EAG/BX,EAAAC,UAAAW,eAAA,WACN,OAAOM,OAAOiB,uBAAuB/B,KAAKO,OAAQP,KAAKgC,Y,EAGzDpC,EAAAC,UAAAoC,OAAA,eAAApB,EAAAb,K,MACE,GAAKA,KAAKC,aAAe,YAAce,MAAMkB,OAAOb,IAAI,qDAAwDrB,KAAKS,YAAa,CAChI,M,CAEF,OACEJ,EAAC8B,KAAI,CAAC7B,MAAM,6BACVD,EAAA,gBACEC,MAAM,2BACN8B,GAAIpC,KAAKqC,UAAY,qBAAAlB,OAAqBmB,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,IAAI,YACxEzC,KAAK0C,SAChBC,KAAK,WAAU,cACF3C,KAAK4C,WAAU,iBACZ5C,KAAK6C,SAAQ,kBACZ7C,KAAK8C,eAEtBzC,EAAA,OAAK0C,KAAK,UACPC,EAAAhD,KAAKsB,gBAAY,MAAA0B,SAAA,SAAAA,EAAEC,KAAI,SAAA9C,GAAW,OAAAU,EAAKX,YAAYC,EAAjB,M,kIA/If,G"}