@salla.sa/twilight-components 2.12.71 → 2.12.73

package/dist/twilight/p-27fb76ab.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-dd9b5ccb.js";import{H as l}from"./p-5ce4c61e.js";import{a,F as r}from"./p-61ac07f6.js";const n=":host{display:block}";const o=class{constructor(i){s(this,i);this.changed=t(this,"changed",7);this.initHeight=195;this.withLoadMore=undefined;this.filtersData=undefined;this.option=undefined;this.isOpen=true;this.isShowMore=false;this.showMoreLabel="عرض المزيد";this.showLessLabel="عرض أقل";this.page=salla.config.get("page")}connectedCallback(){this.withLoadMore=this.option.key!="price"&&Array.isArray(this.option.values)&&this.option.values.length>8;salla.onReady((()=>{this.page=salla.config.get("page")}));salla.lang.onLoaded((()=>{this.showMoreLabel=salla.lang.getWithDefault("common.titles.more",this.showMoreLabel);this.showLessLabel=salla.lang.getWithDefault("common.elements.show_less",this.showLessLabel)}))}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 setWidgetHeight(s=250){this.widgetContent.removeAttribute("style");setTimeout((()=>{let s=this.widgetContent.offsetHeight;this.widgetContent.style.height=s+"px"}),s)}async reset(){if(this.option.type===a.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(![a.VALUES,a.MINIMUM,a.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.page.slug=="product.index"&&this.option.key=="category_id"){return this.page.id==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.option.label),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!==a.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?this.showMoreLabel:this.showLessLabel)))}get host(){return h(this)}};o.style=n;export{o as salla_filters_widget};
-//# sourceMappingURL=p-27fb76ab.entry.js.map

package/dist/twilight/p-27fb76ab.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sallaFiltersWidgetCss","SallaFiltersWidget","this","initHeight","salla","config","get","connectedCallback","withLoadMore","option","key","Array","isArray","values","length","onReady","page","lang","onLoaded","showMoreLabel","getWithDefault","showLessLabel","componentDidLoad","widgetValues","scrollHeight","style","maxHeight","widgetContent","height","setWidgetHeight","delay","removeAttribute","setTimeout","currentWidgetHeight","offsetHeight","reset","type","FilterOptionTypes","RANGE","priceRange","from","host","querySelectorAll","forEach","input","checked","showMore","isShowMore","toggleWidget","isOpen","Helper","toggleElementClassIf","renderFilterOption","VALUES","MINIMUM","VARIANTS","includes","map","filterOption","index","value","h","class","htmlFor","id","name","inputType","isSelectedOption","onChange","e","changed","emit","event","getOptionLabel","slug","filtersData","FilterOptionInputType","CHECKBOX","size","label","render","Host","onClick","ref","el","onChanged","detail","price"],"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\n  /**\n   * Show more or less filter options.\n   */\n  @Prop({ mutable: true }) withLoadMore: boolean;\n\n  /**\n   * Selected filter options value.\n   */\n  @Prop({ reflect: true }) filtersData: object;\n\n  /**\n   * Filter option along with possible values.\n   */\n  @Prop({ reflect: true }) option: Filter;\n\n\n  priceRange: HTMLSallaPriceRangeElement\n\n\n  private widgetValues: HTMLElement;\n  private widgetContent: HTMLDivElement;\n  private initHeight: number = 195;\n\n  @State() isOpen: boolean = true;\n  @State() isShowMore: boolean = false;\n  @State() showMoreLabel: string = \"عرض المزيد\";\n  @State() showLessLabel: string = \"عرض أقل\";\n  @State() page: any = salla.config.get('page');\n\n  /**\n   * Custom event emitted up on filter option selection changes.\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 = this.option.key != 'price' && Array.isArray(this.option.values) && this.option.values.length > 8;\n    salla.onReady(() => {\n      this.page = salla.config.get('page');\n    })\n    salla.lang.onLoaded(() => {\n      this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel)\n      this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel)\n    })\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 setWidgetHeight(delay = 250) {\n    this.widgetContent.removeAttribute('style');\n    setTimeout(() => {\n      let currentWidgetHeight: number = this.widgetContent.offsetHeight;\n      this.widgetContent.style.height = currentWidgetHeight + 'px';\n    }, delay)\n  }\n\n  /**\n   * Reset selected filter options.\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  /**\n   * Action to show more or less filter options.\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  /**\n   * Action to toggle widget open or closed (expand/ collapse).\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.page.slug == 'product.index' && this.option.key == 'category_id') {\n      return this.page.id == value\n    }\n    \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.option.label}</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 ? this.showMoreLabel : this.showLessLabel}</a>\n          }\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}