@salla.sa/twilight-components 2.11.112 → 2.11.113

package/dist/twilight/p-d7a62fb3.system.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-System.register(["./p-5ee0461b.system.js"],(function(e){"use strict";var t,s,r,i;return{setters:[function(e){t=e.r;s=e.h;r=e.H;i=e.g}],execute:function(){var u="";var o=e("salla_products_slider",function(){function e(e){var s=this;t(this,e);this.blockTitle=undefined;this.subTitle=undefined;this.sliderId=undefined;this.displayAllUrl=undefined;this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.productsData=undefined;this.isReady=undefined;this.sourceValueIsValid=undefined;this.hasCustomComponent=undefined;this.apiUrl="";this.parsedSourceValue=undefined;salla.onReady((function(){s.sourceValueIsValid=!!(s.sourceValue||["latest","offers"].includes(s.getSource()))}));if(!this.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(this.getSource(),"]"));return}this.hasCustomComponent=!!customElements.get("custom-salla-product-card")}e.prototype.getItemHTML=function(e){if(this.hasCustomComponent){return s("div",{class:"s-products-slider-card"},s("custom-salla-product-card",{product:e,source:this.getSource(),"source-value":this.getSourceValue()}))}return s("div",{class:"s-products-slider-card"},s("salla-product-card",{"show-quantity":this.getSource()=="landing-page","hide-add-btn":this.getSource()=="landing-page","shadow-on-hover":true,product:e}))};e.prototype.getUrlPrefix=function(){var e="";if(this.limit){e="&per_page=".concat(this.limit>32?32:this.limit)}return e};e.prototype.getApiUrl=function(){if(this.getSource()==="json"){return}var e=this.getUrlPrefix();if(["offers","latest"].includes(this.getSource())){return salla.url.api("products?source=".concat(this.getSource()).concat(e))}if(["related","landing-page"].includes(this.getSource())){return salla.url.api("products?source=".concat(this.getSource(),"&source_value=").concat(this.getSourceValue()).concat(e))}try{return salla.url.api("products?source=".concat(this.getSource(),"&source_value[]=").concat(this.getSourceValue().join("&source_value[]=")).concat(e))}catch(e){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(this.getSource(),"]"));this.sourceValueIsValid=false}};e.prototype.getSource=function(){return{"brands.single":"brands","product.index":"categories","product.index.latest":"latest","product.index.offers":"offers","product.index.search":"search","landing-page":"landing-page","product.index.tag":"tags"}[this.source||salla.config.get("page.slug")]||this.source||"latest"};e.prototype.getSourceValue=function(){if(!["search","json"].includes(this.getSource())){if(Array.isArray(JSON.parse(this.sourceValue))&&JSON.parse(this.sourceValue).length){return JSON.parse(this.sourceValue)}if(typeof JSON.parse(this.sourceValue)=="number"){return[JSON.parse(this.sourceValue)]}}return this.sourceValue||salla.config.get("page.id")};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.componentWillLoad=function(){var e=this;if(this.source==="json"){this.productsData=this.getSourceValue();this.isReady=true;return}salla.api.request(this.getApiUrl(),null,"get").then((function(t){e.productsData=t.data;e.isReady=true}))};e.prototype.render=function(){var e=this;var t;if(this.getSource()=="related"&&!salla.config.get("store.settings.product.related_products_enabled")||!this.canRender()){return}return s(r,{class:"s-products-slider-wrapper"},s("salla-slider",{class:"s-products-slider-slider",id:this.sliderId||"s-products-slider-".concat(Math.random().toString(36).substr(2,9)),type:"carousel","block-title":this.blockTitle,"block-subTitle":this.subTitle,"display-all-url":this.displayAllUrl},s("div",{slot:"items"},(t=this.productsData)===null||t===void 0?void 0:t.map((function(t){return e.getItemHTML(t)})))))};Object.defineProperty(e.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});return e}());o.style=u}}}));
-//# sourceMappingURL=p-d7a62fb3.system.entry.js.map

package/dist/twilight/p-d7a62fb3.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sallaProductsSliderCss","SallaProductsSlider","exports","class_1","hostRef","_this","this","salla","onReady","sourceValueIsValid","sourceValue","includes","getSource","logger","warn","concat","hasCustomComponent","customElements","get","prototype","getItemHTML","product","h","class","source","getSourceValue","getUrlPrefix","urlPrefix","limit","getApiUrl","prefixes","url","api","join","e","config","Array","isArray","JSON","parse","length","canRender","isReady","componentWillLoad","productsData","request","then","res","data","render","Host","id","sliderId","Math","random","toString","substr","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';\n\n@Component({\n  tag: 'salla-products-slider',\n  styleUrl: 'salla-products-slider.scss'\n})\nexport class SallaProductsSlider {\n  constructor() {\n    salla.onReady(() => {\n      this.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.getSource()));\n    });\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  @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   * 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  private getUrlPrefix() {\n    let urlPrefix = '';\n    if (this.limit) {\n      urlPrefix = `&per_page=${this.limit > 32 ? 32 : this.limit}`;\n    }\n    return urlPrefix;\n  }\n\n  getApiUrl() {\n    if (this.getSource() === 'json') {\n      return;\n    }\n    let prefixes = this.getUrlPrefix();\n    if (['offers', 'latest'].includes(this.getSource())) {\n      return salla.url.api(`products?source=${this.getSource()}${prefixes}`);\n    }\n    if (['related', 'landing-page'].includes(this.getSource())) {\n      return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${prefixes}`);\n    }\n\n    try {\n      return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${prefixes}`);\n    } catch (e) {\n      salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.getSource()}]`);\n      this.sourceValueIsValid = false;\n    }\n  }\n  private getSource(){\n    return {\n      'brands.single': 'brands',\n      'product.index': 'categories',\n      'product.index.latest': 'latest',\n      'product.index.offers': 'offers',\n      'product.index.search': 'search',\n      'landing-page': 'landing-page',\n      'product.index.tag': 'tags',\n    }[this.source || salla.config.get('page.slug')] || this.source ||'latest';\n  }\n\n  private getSourceValue() {\n     if (!['search', 'json'].includes(this.getSource())) {\n      if (Array.isArray(JSON.parse(this.sourceValue)) && JSON.parse(this.sourceValue).length) {\n        return JSON.parse(this.sourceValue);\n      }\n\n      if (typeof JSON.parse(this.sourceValue) == 'number') {\n        return [JSON.parse(this.sourceValue)];\n      }\n    }\n    return this.sourceValue || salla.config.get('page.id');\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    salla.api.request(this.getApiUrl(), null, 'get').then(res => {\n      this.productsData = res.data\n      this.isReady = true\n    })\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          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) =>\n              this.getItemHTML(product)\n            )}\n          </div>\n        </salla-slider>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":";;;0JAAA,IAAMA,EAAyB,G,ICMlBC,EAAmBC,EAAA,mCAC9B,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,K,0TAwE0B,G,iCAvExBC,MAAMC,SAAQ,WACZH,EAAKI,sBAAwBJ,EAAKK,aAAe,CAAC,SAAU,UAAUC,SAASN,EAAKO,a,IAEtF,IAAKN,KAAKG,mBAAoB,CAC5BF,MAAMM,OAAOC,KAAK,6CAAAC,OAA6CT,KAAKM,YAAW,MAC/E,M,CAEFN,KAAKU,qBAAuBC,eAAeC,IAAI,4B,CAmEzCf,EAAAgB,UAAAC,YAAA,SAAYC,GAClB,GAAIf,KAAKU,mBAAoB,CAC3B,OAAOM,EAAA,OAAKC,MAAM,0BAChBD,EAAA,6BAA2BD,QAASA,EAASG,OAAQlB,KAAKM,YAAW,eAAgBN,KAAKmB,mB,CAI9F,OAAOH,EAAA,OAAKC,MAAM,0BAChBD,EAAA,sCACiBhB,KAAKM,aAAe,eAAc,eACnCN,KAAKM,aAAe,eAAc,kBAC/B,KACjBS,QAASA,I,EAIPlB,EAAAgB,UAAAO,aAAA,WACN,IAAIC,EAAY,GAChB,GAAIrB,KAAKsB,MAAO,CACdD,EAAY,aAAAZ,OAAaT,KAAKsB,MAAQ,GAAK,GAAKtB,KAAKsB,M,CAEvD,OAAOD,C,EAGTxB,EAAAgB,UAAAU,UAAA,WACE,GAAIvB,KAAKM,cAAgB,OAAQ,CAC/B,M,CAEF,IAAIkB,EAAWxB,KAAKoB,eACpB,GAAI,CAAC,SAAU,UAAUf,SAASL,KAAKM,aAAc,CACnD,OAAOL,MAAMwB,IAAIC,IAAI,mBAAAjB,OAAmBT,KAAKM,aAAWG,OAAGe,G,CAE7D,GAAI,CAAC,UAAW,gBAAgBnB,SAASL,KAAKM,aAAc,CAC1D,OAAOL,MAAMwB,IAAIC,IAAI,mBAAAjB,OAAmBT,KAAKM,YAAW,kBAAAG,OAAiBT,KAAKmB,kBAAgBV,OAAGe,G,CAGnG,IACE,OAAOvB,MAAMwB,IAAIC,IAAI,mBAAAjB,OAAmBT,KAAKM,YAAW,oBAAAG,OAAmBT,KAAKmB,iBAAiBQ,KAAK,qBAAmBlB,OAAGe,G,CAC5H,MAAOI,GACP3B,MAAMM,OAAOC,KAAK,sFAAAC,OAAsFT,KAAKM,YAAW,MACxHN,KAAKG,mBAAqB,K,GAGtBN,EAAAgB,UAAAP,UAAA,WACN,MAAO,CACL,gBAAiB,SACjB,gBAAiB,aACjB,uBAAwB,SACxB,uBAAwB,SACxB,uBAAwB,SACxB,eAAgB,eAChB,oBAAqB,QACrBN,KAAKkB,QAAUjB,MAAM4B,OAAOjB,IAAI,eAAiBZ,KAAKkB,QAAS,Q,EAG3DrB,EAAAgB,UAAAM,eAAA,WACL,IAAK,CAAC,SAAU,QAAQd,SAASL,KAAKM,aAAc,CACnD,GAAIwB,MAAMC,QAAQC,KAAKC,MAAMjC,KAAKI,eAAiB4B,KAAKC,MAAMjC,KAAKI,aAAa8B,OAAQ,CACtF,OAAOF,KAAKC,MAAMjC,KAAKI,Y,CAGzB,UAAW4B,KAAKC,MAAMjC,KAAKI,cAAgB,SAAU,CACnD,MAAO,CAAC4B,KAAKC,MAAMjC,KAAKI,a,EAG5B,OAAOJ,KAAKI,aAAeH,MAAM4B,OAAOjB,IAAI,U,EAEtCf,EAAAgB,UAAAsB,UAAA,WACN,OAAOnC,KAAKG,oBAAsBH,KAAKoC,O,EAGzCvC,EAAAgB,UAAAwB,kBAAA,eAAAtC,EAAAC,KACE,GAAIA,KAAKkB,SAAW,OAAQ,CAC1BlB,KAAKsC,aAAetC,KAAKmB,iBACzBnB,KAAKoC,QAAU,KACf,M,CAEFnC,MAAMyB,IAAIa,QAAQvC,KAAKuB,YAAa,KAAM,OAAOiB,MAAK,SAAAC,GACpD1C,EAAKuC,aAAeG,EAAIC,KACxB3C,EAAKqC,QAAU,I,KAInBvC,EAAAgB,UAAA8B,OAAA,eAAA5C,EAAAC,K,MACE,GAAKA,KAAKM,aAAe,YAAcL,MAAM4B,OAAOjB,IAAI,qDAAwDZ,KAAKmC,YAAa,CAChI,M,CAEF,OACEnB,EAAC4B,EAAI,CAAC3B,MAAM,6BACVD,EAAA,gBACEC,MAAM,2BACN4B,GAAI7C,KAAK8C,UAAY,qBAAArC,OAAqBsC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,IAC/EC,KAAK,WAAU,cACFnD,KAAKoD,WAAU,iBACZpD,KAAKqD,SAAQ,kBACZrD,KAAKsD,eAEtBtC,EAAA,OAAKuC,KAAK,UACPC,EAAAxD,KAAKsC,gBAAY,MAAAkB,SAAA,SAAAA,EAAEC,KAAI,SAAC1C,GACvB,OAAAhB,EAAKe,YAAYC,EAAjB,M,yHA/KkB,I"}

package/dist/twilight/p-def222e1.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import{r as s,h as t,H as e,g as r}from"./p-3c7d3f26.js";const i="";const a=class{constructor(t){s(this,t);this.blockTitle=undefined;this.subTitle=undefined;this.sliderId=undefined;this.displayAllUrl=undefined;this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.productsData=undefined;this.isReady=undefined;this.sourceValueIsValid=undefined;this.hasCustomComponent=undefined;this.apiUrl="";this.parsedSourceValue=undefined;salla.onReady((()=>{this.sourceValueIsValid=!!(this.sourceValue||["latest","offers"].includes(this.getSource()))}));if(!this.sourceValueIsValid){salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);return}this.hasCustomComponent=!!customElements.get("custom-salla-product-card")}getItemHTML(s){if(this.hasCustomComponent){return t("div",{class:"s-products-slider-card"},t("custom-salla-product-card",{product:s,source:this.getSource(),"source-value":this.getSourceValue()}))}return t("div",{class:"s-products-slider-card"},t("salla-product-card",{"show-quantity":this.getSource()=="landing-page","hide-add-btn":this.getSource()=="landing-page","shadow-on-hover":true,product:s}))}getUrlPrefix(){let s="";if(this.limit){s=`&per_page=${this.limit>32?32:this.limit}`}return s}getApiUrl(){if(this.getSource()==="json"){return}let s=this.getUrlPrefix();if(["offers","latest"].includes(this.getSource())){return salla.url.api(`products?source=${this.getSource()}${s}`)}if(["related","landing-page"].includes(this.getSource())){return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${s}`)}try{return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join("&source_value[]=")}${s}`)}catch(s){salla.logger.warn(`source-value prop should be array of ids ex source-value="[1,2,3]" for the source [${this.getSource()}]`);this.sourceValueIsValid=false}}getSource(){return{"brands.single":"brands","product.index":"categories","product.index.latest":"latest","product.index.offers":"offers","product.index.search":"search","landing-page":"landing-page","product.index.tag":"tags"}[this.source||salla.config.get("page.slug")]||this.source||"latest"}getSourceValue(){if(!["search","json"].includes(this.getSource())){if(Array.isArray(JSON.parse(this.sourceValue))&&JSON.parse(this.sourceValue).length){return JSON.parse(this.sourceValue)}if(typeof JSON.parse(this.sourceValue)=="number"){return[JSON.parse(this.sourceValue)]}}return this.sourceValue||salla.config.get("page.id")}canRender(){return this.sourceValueIsValid&&this.isReady}componentWillLoad(){if(this.source==="json"){this.productsData=this.getSourceValue();this.isReady=true;return}salla.api.request(this.getApiUrl(),null,"get").then((s=>{this.productsData=s.data;this.isReady=true}))}render(){var s;if(this.getSource()=="related"&&!salla.config.get("store.settings.product.related_products_enabled")||!this.canRender()){return}return t(e,{class:"s-products-slider-wrapper"},t("salla-slider",{class:"s-products-slider-slider",id:this.sliderId||`s-products-slider-${Math.random().toString(36).substr(2,9)}`,type:"carousel","block-title":this.blockTitle,"block-subTitle":this.subTitle,"display-all-url":this.displayAllUrl},t("div",{slot:"items"},(s=this.productsData)===null||s===void 0?void 0:s.map((s=>this.getItemHTML(s))))))}get host(){return r(this)}};a.style=i;export{a as salla_products_slider};
-//# sourceMappingURL=p-def222e1.entry.js.map

package/dist/twilight/p-def222e1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sallaProductsSliderCss","SallaProductsSlider","constructor","hostRef","salla","onReady","this","sourceValueIsValid","sourceValue","includes","getSource","logger","warn","hasCustomComponent","customElements","get","getItemHTML","product","h","class","source","getSourceValue","getUrlPrefix","urlPrefix","limit","getApiUrl","prefixes","url","api","join","e","config","Array","isArray","JSON","parse","length","canRender","isReady","componentWillLoad","productsData","request","then","res","data","render","Host","id","sliderId","Math","random","toString","substr","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';\n\n@Component({\n  tag: 'salla-products-slider',\n  styleUrl: 'salla-products-slider.scss'\n})\nexport class SallaProductsSlider {\n  constructor() {\n    salla.onReady(() => {\n      this.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.getSource()));\n    });\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  @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   * 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  private getUrlPrefix() {\n    let urlPrefix = '';\n    if (this.limit) {\n      urlPrefix = `&per_page=${this.limit > 32 ? 32 : this.limit}`;\n    }\n    return urlPrefix;\n  }\n\n  getApiUrl() {\n    if (this.getSource() === 'json') {\n      return;\n    }\n    let prefixes = this.getUrlPrefix();\n    if (['offers', 'latest'].includes(this.getSource())) {\n      return salla.url.api(`products?source=${this.getSource()}${prefixes}`);\n    }\n    if (['related', 'landing-page'].includes(this.getSource())) {\n      return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${prefixes}`);\n    }\n\n    try {\n      return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${prefixes}`);\n    } catch (e) {\n      salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.getSource()}]`);\n      this.sourceValueIsValid = false;\n    }\n  }\n  private getSource(){\n    return {\n      'brands.single': 'brands',\n      'product.index': 'categories',\n      'product.index.latest': 'latest',\n      'product.index.offers': 'offers',\n      'product.index.search': 'search',\n      'landing-page': 'landing-page',\n      'product.index.tag': 'tags',\n    }[this.source || salla.config.get('page.slug')] || this.source ||'latest';\n  }\n\n  private getSourceValue() {\n     if (!['search', 'json'].includes(this.getSource())) {\n      if (Array.isArray(JSON.parse(this.sourceValue)) && JSON.parse(this.sourceValue).length) {\n        return JSON.parse(this.sourceValue);\n      }\n\n      if (typeof JSON.parse(this.sourceValue) == 'number') {\n        return [JSON.parse(this.sourceValue)];\n      }\n    }\n    return this.sourceValue || salla.config.get('page.id');\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    salla.api.request(this.getApiUrl(), null, 'get').then(res => {\n      this.productsData = res.data\n      this.isReady = true\n    })\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          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) =>\n              this.getItemHTML(product)\n            )}\n          </div>\n        </salla-slider>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":";;;yDAAA,MAAMA,EAAyB,G,MCMlBC,EAAmB,MAC9BC,YAAAC,G,0TAwE0B,G,iCAvExBC,MAAMC,SAAQ,KACZC,KAAKC,sBAAwBD,KAAKE,aAAe,CAAC,SAAU,UAAUC,SAASH,KAAKI,aAAa,IAEnG,IAAKJ,KAAKC,mBAAoB,CAC5BH,MAAMO,OAAOC,KAAK,6CAA6CN,KAAKI,gBACpE,M,CAEFJ,KAAKO,qBAAuBC,eAAeC,IAAI,4B,CAmEzCC,YAAYC,GAClB,GAAIX,KAAKO,mBAAoB,CAC3B,OAAOK,EAAA,OAAKC,MAAM,0BAChBD,EAAA,6BAA2BD,QAASA,EAASG,OAAQd,KAAKI,YAAW,eAAgBJ,KAAKe,mB,CAI9F,OAAOH,EAAA,OAAKC,MAAM,0BAChBD,EAAA,sCACiBZ,KAAKI,aAAe,eAAc,eACnCJ,KAAKI,aAAe,eAAc,kBAC/B,KACjBO,QAASA,I,CAIPK,eACN,IAAIC,EAAY,GAChB,GAAIjB,KAAKkB,MAAO,CACdD,EAAY,aAAajB,KAAKkB,MAAQ,GAAK,GAAKlB,KAAKkB,O,CAEvD,OAAOD,C,CAGTE,YACE,GAAInB,KAAKI,cAAgB,OAAQ,CAC/B,M,CAEF,IAAIgB,EAAWpB,KAAKgB,eACpB,GAAI,CAAC,SAAU,UAAUb,SAASH,KAAKI,aAAc,CACnD,OAAON,MAAMuB,IAAIC,IAAI,mBAAmBtB,KAAKI,cAAcgB,I,CAE7D,GAAI,CAAC,UAAW,gBAAgBjB,SAASH,KAAKI,aAAc,CAC1D,OAAON,MAAMuB,IAAIC,IAAI,mBAAmBtB,KAAKI,4BAA4BJ,KAAKe,mBAAmBK,I,CAGnG,IACE,OAAOtB,MAAMuB,IAAIC,IAAI,mBAAmBtB,KAAKI,8BAA8BJ,KAAKe,iBAAiBQ,KAAK,sBAAsBH,I,CAC5H,MAAOI,GACP1B,MAAMO,OAAOC,KAAK,sFAAsFN,KAAKI,gBAC7GJ,KAAKC,mBAAqB,K,EAGtBG,YACN,MAAO,CACL,gBAAiB,SACjB,gBAAiB,aACjB,uBAAwB,SACxB,uBAAwB,SACxB,uBAAwB,SACxB,eAAgB,eAChB,oBAAqB,QACrBJ,KAAKc,QAAUhB,MAAM2B,OAAOhB,IAAI,eAAiBT,KAAKc,QAAS,Q,CAG3DC,iBACL,IAAK,CAAC,SAAU,QAAQZ,SAASH,KAAKI,aAAc,CACnD,GAAIsB,MAAMC,QAAQC,KAAKC,MAAM7B,KAAKE,eAAiB0B,KAAKC,MAAM7B,KAAKE,aAAa4B,OAAQ,CACtF,OAAOF,KAAKC,MAAM7B,KAAKE,Y,CAGzB,UAAW0B,KAAKC,MAAM7B,KAAKE,cAAgB,SAAU,CACnD,MAAO,CAAC0B,KAAKC,MAAM7B,KAAKE,a,EAG5B,OAAOF,KAAKE,aAAeJ,MAAM2B,OAAOhB,IAAI,U,CAEtCsB,YACN,OAAO/B,KAAKC,oBAAsBD,KAAKgC,O,CAGzCC,oBACE,GAAIjC,KAAKc,SAAW,OAAQ,CAC1Bd,KAAKkC,aAAelC,KAAKe,iBACzBf,KAAKgC,QAAU,KACf,M,CAEFlC,MAAMwB,IAAIa,QAAQnC,KAAKmB,YAAa,KAAM,OAAOiB,MAAKC,IACpDrC,KAAKkC,aAAeG,EAAIC,KACxBtC,KAAKgC,QAAU,IAAI,G,CAIvBO,S,MACE,GAAKvC,KAAKI,aAAe,YAAcN,MAAM2B,OAAOhB,IAAI,qDAAwDT,KAAK+B,YAAa,CAChI,M,CAEF,OACEnB,EAAC4B,EAAI,CAAC3B,MAAM,6BACVD,EAAA,gBACEC,MAAM,2BACN4B,GAAIzC,KAAK0C,UAAY,qBAAqBC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,KAC/EC,KAAK,WAAU,cACF/C,KAAKgD,WAAU,iBACZhD,KAAKiD,SAAQ,kBACZjD,KAAKkD,eAEtBtC,EAAA,OAAKuC,KAAK,UACPC,EAAApD,KAAKkC,gBAAY,MAAAkB,SAAA,SAAAA,EAAEC,KAAK1C,GACvBX,KAAKU,YAAYC,O"}

package/dist/twilight/p-e393f123.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import{r as t,c as i,h as s,H as e}from"./p-3c7d3f26.js";const r=":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.rtl .form-select,.rtl select,[dir=rtl] .form-select,[dir=rtl] select{background-position:left 0.5rem center;padding-right:12px}.rtl .menu-divide li:not(:last-child):after,[dir=rtl] .menu-divide li:not(:last-child):after{left:0;right:auto}input[type=range]::-webkit-slider-thumb{pointer-events:all;width:24px;height:24px;-webkit-appearance:none}[type=checkbox]:checked{background-size:80%}";const h=class{constructor(s){t(this,s);this.changed=i(this,"changed",7);this.minPrice=1e3;this.maxPrice=5e3;this.option=undefined;this.filtersData=undefined;this.min=0;this.max=1e4;this.minthumb=0;this.maxthumb=0;this.priceOptions=undefined;this.generatePriceOptions()}async reset(){var t,i;this.minInput.value=`${((i=(t=this.option)===null||t===void 0?void 0:t.values)===null||i===void 0?void 0:i.min)||0}`;this.maxInput.value=`${this.max}`}generatePriceOptions(){const t=this.max;let i=Math.floor(t/100);if(i<1){i=Math.floor(t/10)}let s=Math.floor(t/2);let e=Math.floor(t/3*2);this.priceOptions=[i,s,e];console.log(`Price options for max price ${t}: ${this.priceOptions.join(", ")}`)}getPriceLabel(t){if(t==Math.floor(this.max/100)){return`اقل من ${salla.money(t)}`}else if(t==Math.floor(this.max/2)){return`${salla.money(this.priceOptions[0])} الى ${salla.money(this.priceOptions[2])}`}else{return`أكثر من ${salla.money(t)}`}}handleMinMaxPrice(t,i){const[s,e,r]=this.priceOptions;switch(i){case s:this.minPrice=0;this.maxPrice=s;break;case e:this.minPrice=s;this.maxPrice=r;break;case r:this.minPrice=r;this.maxPrice=this.max;break;default:throw new Error(`Invalid price option: ${i}`)}this.minInput.value=`${this.minPrice}`;this.maxInput.value=`${this.maxPrice}`;this.changedEventHandler(t)}async changedEventHandler(t,i=false){let s=t?t.target.value*1:null;if(i){this.minInputValidation(s);this.minthumb=(this.minPrice-this.min)/(this.max-this.min)*100}else{this.maxInputValidation(s);this.maxthumb=100-(this.maxPrice-this.min)/(this.max-this.min)*100}this.isReady&&this.changed.emit({event:t,option:this.option,value:{max:this.maxPrice,min:this.minPrice}})}minInputValidation(t){if(t&&(t>this.max||t>this.maxPrice)){return}if(t<this.min){this.minPrice=this.min;return}if(t){this.minPrice=t}}maxInputValidation(t){if(t&&(t<this.min||t<this.minPrice)){return}if(t>this.max){this.maxPrice=this.max;return}if(t){this.maxPrice=t}}isChecked(t){if(t==Math.floor(this.max/100)){return this.minPrice==0&&this.maxPrice==t}if(t==Math.floor(this.max/2)){return this.minPrice==this.priceOptions[0]&&this.maxPrice==this.priceOptions[2]}if(t==Math.floor(this.max/3*2)){return this.minPrice==t&&this.maxPrice==this.max}}render(){return s(e,null,this.priceOptions&&this.priceOptions.map(((t,i)=>s("label",{class:"s-filters-label",htmlFor:`${t}-${i}`},s("input",{id:`${t}-${i}`,name:"price",type:"radio",checked:this.isChecked(t),class:"s-filters-radio",onChange:i=>this.handleMinMaxPrice(i,t)}),this.getPriceLabel(t)))),s("div",{class:"flex justify-center items-center"},s("div",{class:"relative max-w-xl w-full"},s("div",{class:"s-price-range-inputs"},s("div",{class:"s-price-range-relative"},s("div",{class:"s-price-range-currency"}," ",salla.config.currency().symbol),s("input",{type:"number",maxlength:"5",ref:t=>this.minInput=t,onInput:t=>this.changedEventHandler(t,true),placeholder:"من",class:"s-price-range-number-input"})),s("div",{class:"s-price-range-gray-text"}," -"),s("div",{class:"s-price-range-relative"},s("div",{class:"s-price-range-currency"}," ",salla.config.currency().symbol),s("input",{type:"number",maxlength:"5",placeholder:"الى",ref:t=>this.maxInput=t,onInput:t=>this.changedEventHandler(t),class:"s-price-range-number-input","aria-describedby":"price-currency"}))))))}componentDidLoad(){var t;if(this.filtersData&&((t=this.filtersData)===null||t===void 0?void 0:t.price)){this.minPrice=this.filtersData.price.min;this.maxPrice=this.filtersData.price.max;this.maxInput.value=`${this.maxPrice}`;this.minInput.value=`${this.minPrice}`}this.isReady=true}};h.style=r;export{h as salla_price_range};
-//# sourceMappingURL=p-e393f123.entry.js.map

package/dist/twilight/p-e393f123.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sallaPriceRangeCss","SallaPriceRange","constructor","hostRef","this","generatePriceOptions","async","minInput","value","_b","_a","option","values","min","maxInput","max","MAX_PRICE","option1","Math","floor","option2","option3","priceOptions","console","log","join","getPriceLabel","price","salla","money","handleMinMaxPrice","event","firstOption","secondOption","thirdOption","minPrice","maxPrice","Error","changedEventHandler","isMin","target","minInputValidation","minthumb","maxInputValidation","maxthumb","isReady","changed","emit","isChecked","render","h","Host","map","index","class","htmlFor","id","name","type","checked","onChange","e","config","currency","symbol","maxlength","ref","el","onInput","placeholder","componentDidLoad","filtersData"],"sources":["./src/components/salla-price-range/salla-price-range.scss?tag=salla-price-range","./src/components/salla-price-range/salla-price-range.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n\n.rtl, [dir=\"rtl\"] {\n  .rtl-range-slider {\n      transform: rotateY(180deg);\n  }\n\n  .rtl-range-numbers{\n      flex-direction: row-reverse;\n  }\n\n  .form-select, select{\n      background-position: left 0.5rem center;\n      padding-right: 12px;\n  }   \n\n  // divide\n.menu-divide {\n  li {\n      &:not(:last-child) {\n          &:after {\n              left: 0;\n              right: auto;\n          }\n      }\n  }\n}\n}\n\ninput[type=range]::-webkit-slider-thumb {\n  pointer-events: all;\n  width: 24px;\n  height: 24px;\n  -webkit-appearance: none;\n}\n\n[type='checkbox']:checked{\n  background-size: 80%;\n}","import { Component, Host, h, State, Prop, Event, Method } from '@stencil/core';\nimport { Filter } from \"../salla-filters/interfaces\";\n\n@Component({\n  tag: 'salla-price-range',\n  styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n  constructor() {\n    this.generatePriceOptions();\n  }\n  @Prop({ mutable: true }) minPrice = 1000;\n  @Prop({ mutable: true }) maxPrice = 5000;\n  @Prop({ reflect: true }) option: Filter;\n  @Prop({ reflect: true }) filtersData: any;\n  @State() min = 0;\n  @State() max = 10000;\n\n  @State() minthumb = 0;\n  @State() maxthumb = 0;\n  @State() priceOptions: any;\n\n  @Event() changed: any;\n\n  isReady: Boolean;\n  rightHandle: HTMLDivElement;\n  leftHandle: HTMLDivElement;\n  activeBar: HTMLDivElement;\n  minInput: HTMLInputElement;\n  maxInput: HTMLInputElement;\n\n  @Method()\n  async reset() {\n    //@ts-ignore\n    this.minInput.value = `${this.option?.values?.min || 0}`;\n    this.maxInput.value = `${this.max}`;\n  }\n\n  private generatePriceOptions() {\n    const MAX_PRICE = this.max;\n    let option1 = Math.floor(MAX_PRICE / 100);\n    if (option1 < 1) {\n      option1 = Math.floor(MAX_PRICE / 10);\n    }\n    let option2 = Math.floor(MAX_PRICE / 2);\n    let option3 = Math.floor((MAX_PRICE / 3) * 2);\n    this.priceOptions = [option1, option2, option3];\n\n    // to be removed\n    console.log(`Price options for max price ${MAX_PRICE}: ${this.priceOptions.join(', ')}`);\n  }\n  private getPriceLabel(price) {\n    if (price == Math.floor(this.max / 100)) {\n      return `اقل من ${salla.money(price)}`;\n    } else if (price == Math.floor(this.max / 2)) {\n      return `${salla.money(this.priceOptions[0])} الى ${salla.money(this.priceOptions[2])}`;\n    } else {\n      return `أكثر من ${salla.money(price)}`;\n    }\n  }\n\n  private handleMinMaxPrice(event: Event, option: string): void {\n    const [firstOption, secondOption, thirdOption] = this.priceOptions;\n    switch (option) {\n      case firstOption:\n        this.minPrice = 0;\n        this.maxPrice = firstOption;\n        break;\n      case secondOption:\n        this.minPrice = firstOption;\n        this.maxPrice = thirdOption;\n        break;\n      case thirdOption:\n        this.minPrice = thirdOption;\n        this.maxPrice = this.max;\n        break;\n      default:\n        throw new Error(`Invalid price option: ${option}`);\n    }\n\n    // Update the input values\n    this.minInput.value = `${this.minPrice}`;\n    this.maxInput.value = `${this.maxPrice}`;\n    this.changedEventHandler(event);\n  }\n\n  private async changedEventHandler(event, isMin = false) {\n\n    let value = event ? event.target.value * 1 : null\n    if (isMin) {\n      this.minInputValidation(value);\n      this.minthumb = ((this.minPrice - this.min) / (this.max - this.min)) * 100;\n    } else {\n      this.maxInputValidation(value)\n      this.maxthumb = 100 - (((this.maxPrice - this.min) / (this.max - this.min)) * 100);\n    }\n\n\n    this.isReady && this.changed.emit({\n      event: event,\n      option: this.option,\n      value: { max: this.maxPrice, min: this.minPrice }\n    })\n  }\n\n\n  minInputValidation(value) {\n    if (value && (value > this.max || value > this.maxPrice)) {\n      // this.minPrice = this.maxPrice;\n      return;\n    }\n\n    if (value < this.min) {\n      this.minPrice = this.min;\n      return;\n    }\n\n    if (value) {\n      this.minPrice = value;\n    }\n  }\n\n  maxInputValidation(value) {\n    if (value && (value < this.min || value < this.minPrice)) {\n      // this.maxPrice = this.minPrice;\n      return;\n    }\n    if (value > this.max) {\n      this.maxPrice = this.max;\n      return;\n    }\n\n    if (value) {\n      this.maxPrice = value;\n    }\n  }\n  private isChecked(option) {\n    if (option == Math.floor(this.max / 100)) {\n      return this.minPrice == 0 && this.maxPrice == option;\n    }\n    if (option == Math.floor(this.max / 2)) {\n      return this.minPrice == this.priceOptions[0] && this.maxPrice == this.priceOptions[2];\n    }\n    if (option == Math.floor((this.max / 3) * 2)) {\n\n      return this.minPrice == option && this.maxPrice == this.max;\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        {\n          this.priceOptions && this.priceOptions.map((option, index) => {\n            return <label class=\"s-filters-label\" htmlFor={`${option}-${index}`}>\n              <input\n                id={`${option}-${index}`}\n                name=\"price\"\n                type=\"radio\"\n                checked={this.isChecked(option)}\n                class=\"s-filters-radio\"\n                onChange={e => this.handleMinMaxPrice(e, option)}\n              />\n              {this.getPriceLabel(option)}\n            </label>\n          })\n        }\n\n\n        <div class=\"flex justify-center items-center\">\n          <div class=\"relative max-w-xl w-full\">\n            <div class=\"s-price-range-inputs\">\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input\n                  type=\"number\"\n                  maxlength=\"5\"\n                  ref={el => this.minInput = el}\n                  onInput={(event) => this.changedEventHandler(event, true)}\n                  // value={this.minPrice}\n                  placeholder=\"من\"\n                  class=\"s-price-range-number-input\"\n                />\n              </div>\n\n              <div class=\"s-price-range-gray-text\"> -</div>\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input type=\"number\" maxlength=\"5\"\n                  placeholder=\"الى\"\n                  ref={el => this.maxInput = el}\n                  onInput={(event) => this.changedEventHandler(event)}\n                  // value={this.maxPrice}\n                  class=\"s-price-range-number-input\" aria-describedby=\"price-currency\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (this.filtersData && this.filtersData?.price) {\n      this.minPrice = this.filtersData.price.min;\n      this.maxPrice = this.filtersData.price.max;\n      this.maxInput.value = `${this.maxPrice}`;\n      this.minInput.value = `${this.minPrice}`;\n    }\n    this.isReady = true;\n  }\n}\n"],"mappings":"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"}

package/dist/twilight/p-e3dc0687.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import{r as s,c as t,h as i,H as e,g as h}from"./p-3c7d3f26.js";import{H as l}from"./p-dad8bacc.js";import{a as n,F as r}from"./p-d3cc3770.js";const a=":host{display:block}";const o=class{constructor(i){s(this,i);this.changed=t(this,"changed",7);this.initHeight=195;this.widgetTitle=undefined;this.withLoadMore=undefined;this.filtersData=undefined;this.option=undefined;this.isOpen=true;this.isShowMore=false}connectedCallback(){this.withLoadMore=Array.isArray(this.option.values)&&this.option.values.length>8;this.widgetTitle=this.option.label}componentDidLoad(){this.widgetValues.scrollHeight<this.initHeight&&(this.withLoadMore=false);this.withLoadMore&&this.widgetValues&&(this.widgetValues.style.maxHeight=`${this.initHeight}px`);this.widgetContent.style.height=`${this.widgetContent.scrollHeight}px`}async reset(){if(this.option.type===n.RANGE){this.priceRange.reset()}Array.from(this.host.querySelectorAll("input")).forEach((s=>s.checked=false))}async showMore(){this.isShowMore=!this.isShowMore;this.widgetContent.style.height="auto";this.widgetValues.style.maxHeight=this.isShowMore?`${this.widgetValues.scrollHeight}px`:`${this.initHeight}px`;setTimeout((()=>{this.widgetContent.style.height=`${this.widgetContent.scrollHeight}px`}),400)}async toggleWidget(){this.isOpen=!this.isOpen;l.toggleElementClassIf(this.widgetContent,"s-filters-widget-opened","s-filters-widget-closed",(()=>this.isOpen))}renderFilterOption(s){if(![n.VALUES,n.MINIMUM,n.VARIANTS].includes(s.type)){return""}return s.values.map(((t,e)=>{let h=typeof t=="number"?t:t.key||t.value;return i("label",{class:"s-filters-label",htmlFor:`${s.key}-option-${e}`},i("input",{id:`${s.key}-option-${e}`,name:s.key,type:s.inputType,checked:this.isSelectedOption(s,h),class:`s-filters-${s.inputType}`,onChange:t=>this.changed.emit({event:t,option:s,value:h})}),this.getOptionLabel(s,t))}))}isSelectedOption(s,t){if(!this.filtersData||!this.filtersData[s.key]){return false}return s.inputType===r.CHECKBOX?this.filtersData[s.key].includes(t):this.filtersData[s.key]==t}getOptionLabel(s,t){if(s.key=="rating"){return i("salla-rating-stars",{size:"small",value:t})}let e=t.value||"null";return i("span",{class:"s-filters-option-name"},e)}render(){return i(e,{class:"s-filters-widget-container"},i("h3",{class:"s-filters-widget-title",onClick:()=>this.toggleWidget()},i("span",null,this.widgetTitle),i("span",{class:`s-filters-widget-plusminus ${this.isOpen?"s-filters-widget-plusminus-active":""}`})),i("div",{class:"s-filters-widget-content",ref:s=>this.widgetContent=s},i("div",{class:"s-filters-widget-values",ref:s=>this.widgetValues=s},i("slot",null),this.option.type!==n.RANGE?this.renderFilterOption(this.option):i("salla-price-range",{onChanged:s=>this.changed.emit(s.detail),ref:s=>this.priceRange=s,filtersData:this.filtersData,option:this.option})),this.withLoadMore&&i("a",{class:"s-filters-widget-more",onClick:()=>this.showMore()},!this.isShowMore?"عرض المزيد":"عرض أقل")))}get host(){return h(this)}};o.style=a;export{o as salla_filters_widget};
-//# sourceMappingURL=p-e3dc0687.entry.js.map

package/dist/twilight/p-e3dc0687.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sallaFiltersWidgetCss","SallaFiltersWidget","this","initHeight","connectedCallback","withLoadMore","Array","isArray","option","values","length","widgetTitle","label","componentDidLoad","widgetValues","scrollHeight","style","maxHeight","widgetContent","height","async","type","FilterOptionTypes","RANGE","priceRange","reset","from","host","querySelectorAll","forEach","input","checked","isShowMore","setTimeout","isOpen","Helper","toggleElementClassIf","renderFilterOption","VALUES","MINIMUM","VARIANTS","includes","map","filterOption","index","value","key","h","class","htmlFor","id","name","inputType","isSelectedOption","onChange","e","changed","emit","event","getOptionLabel","filtersData","FilterOptionInputType","CHECKBOX","size","render","Host","onClick","toggleWidget","ref","el","onChanged","detail","price","showMore"],"sources":["./src/components/salla-filters-widget/salla-filters-widget.scss?tag=salla-filters-widget","./src/components/salla-filters-widget/salla-filters-widget.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import {Component, Host, h, Method, State, Prop, Event, Element} from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\nimport {Filter, FilterOptionInputType, FilterOptionTypes} from \"../salla-filters/interfaces\";\n\n@Component({\n  tag: 'salla-filters-widget',\n  styleUrl: 'salla-filters-widget.scss',\n})\nexport class SallaFiltersWidget {\n  @Element() host: HTMLElement;\n  @Prop({mutable: true}) widgetTitle: string;\n  @Prop({mutable: true}) withLoadMore: boolean;\n  @Prop({reflect: true}) filtersData: object;\n  @Prop({reflect: true}) option: Filter;\n  priceRange: HTMLSallaPriceRangeElement\n\n\n  private widgetValues: HTMLElement;\n  private widgetContent: HTMLDivElement;\n  private initHeight: number = 195;\n  @State() isOpen: boolean = true;\n  @State() isShowMore: boolean = false;\n\n  @Event() changed: any;\n\n  connectedCallback() {\n    //lets be smart and don't show 5 and more link for 8 options\n    this.withLoadMore = Array.isArray(this.option.values) && this.option.values.length > 8;\n    this.widgetTitle = this.option.label;\n  }\n\n  componentDidLoad() {\n    this.widgetValues.scrollHeight < this.initHeight && (this.withLoadMore = false);\n    (this.withLoadMore && this.widgetValues) && (this.widgetValues.style.maxHeight = `${this.initHeight}px`);\n    this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n  }\n\n  @Method()\n  async reset() {\n    if (this.option.type === FilterOptionTypes.RANGE) {\n      this.priceRange.reset()\n    }\n    Array.from(this.host.querySelectorAll('input')).forEach(input => input.checked = false);\n  }\n\n\n  @Method()\n  async showMore() {\n    this.isShowMore = !this.isShowMore\n    this.widgetContent.style.height = 'auto';\n    this.widgetValues.style.maxHeight = this.isShowMore ? `${this.widgetValues.scrollHeight}px` : `${this.initHeight}px`;\n    setTimeout(() => {\n      this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n    }, 400); // get height after time of collapse animtion (duration-300)\n  }\n\n  @Method()\n  async toggleWidget() {\n    this.isOpen = !this.isOpen;\n    Helper.toggleElementClassIf(this.widgetContent, 's-filters-widget-opened', 's-filters-widget-closed', () => this.isOpen);\n  }\n\n  renderFilterOption(option: Filter) {\n    if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {\n      return '';\n    }\n    //@ts-ignore\n    return option.values.map((filterOption, index) => {\n        let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);\n\n        return <label class=\"s-filters-label\" htmlFor={`${option.key}-option-${index}`}>\n          <input\n            id={`${option.key}-option-${index}`}\n            name={option.key}\n            type={option.inputType}\n            //TODO:: debug more why sometimes it's not rendered as selected🤨\n            checked={this.isSelectedOption(option, value)}\n            class={`s-filters-${option.inputType}`}\n            onChange={e => this.changed.emit({event: e, option: option, value: value})}\n          />\n          {this.getOptionLabel(option, filterOption)}\n        </label>\n      }\n    )\n  }\n\n  private isSelectedOption(option: Filter, value) {\n    if (!this.filtersData || !this.filtersData[option.key]) {\n      return false\n    }\n\n    return option.inputType === FilterOptionInputType.CHECKBOX\n      ? this.filtersData[option.key].includes(value)\n      : this.filtersData[option.key] == value;\n  }\n\n  private getOptionLabel(option: Filter, filterOption) {\n    if (option.key == 'rating') {\n      //in amazon has stars & up, should we add it, to avoid those people who will come to say I selected 4 why I see 5 sars products\n      return <salla-rating-stars size=\"small\" value={filterOption}/>;\n    }\n    let label = filterOption.value || 'null';\n    //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';\n    return <span class=\"s-filters-option-name\">{label}</span>;\n  }\n\n  render() {\n    return (\n      <Host class=\"s-filters-widget-container\">\n        <h3 class=\"s-filters-widget-title\" onClick={() => this.toggleWidget()}>\n          <span>{this.widgetTitle}</span>\n          <span class={`s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}`}/>\n        </h3>\n        <div class=\"s-filters-widget-content\" ref={(el) => this.widgetContent = el}>\n          <div class=\"s-filters-widget-values\" ref={(el) => this.widgetValues = el}>\n            <slot/>\n            {\n              this.option.type !== FilterOptionTypes.RANGE\n                ? this.renderFilterOption(this.option)\n                : <salla-price-range onChanged={(event) => this.changed.emit(event.detail)}\n                                     ref={price => this.priceRange = price}\n                                     filtersData={this.filtersData}\n                                     option={this.option}/>\n            }\n          </div>\n          {this.withLoadMore &&\n          <a class=\"s-filters-widget-more\"\n             onClick={() => this.showMore()}>{!this.isShowMore ? 'عرض المزيد' : 'عرض أقل'}</a>\n          }\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}