@salla.sa/twilight-components 2.11.124 → 2.11.126

package/dist/twilight/p-9a9c63f6.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,o){function r(t){try{l(n.next(t))}catch(t){o(t)}}function a(t){try{l(n["throw"](t))}catch(t){o(t)}}function l(t){t.done?i(t.value):s(t.value).then(r,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,s,o,r;return r={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function a(t){return function(e){return l([t,e])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(r&&(r=0,a[0]&&(i=0)),i)try{if(n=1,s&&(o=a[0]&2?s["return"]:a[0]?s["throw"]||((o=s["return"])&&o.call(s),0):s.next)&&!(o=o.call(s,a[1])).done)return o;if(s=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;s=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(a[0]===6&&i.label<o[1]){i.label=o[1];o=a;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(a);break}if(o[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];s=0}finally{n=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
-/*!
- * Crafted with ❤ by Salla
- */System.register(["./p-5ee0461b.system.js","./p-77944169.system.js","./p-01a0d85b.system.js"],(function(t){"use strict";var e,i,n,s,o,r,a,l;return{setters:[function(t){e=t.r;i=t.c;n=t.h;s=t.H;o=t.g},function(t){r=t.H},function(t){a=t.a;l=t.F}],execute:function(){var u=":host{display:block}";var c=t("salla_filters_widget",function(){function t(t){e(this,t);this.changed=i(this,"changed",7);this.initHeight=195;this.widgetTitle=undefined;this.withLoadMore=undefined;this.filtersData=undefined;this.option=undefined;this.isOpen=true;this.isShowMore=false;this.showMoreLabel="عرض المزيد";this.showLessLabel="عرض أقل"}t.prototype.connectedCallback=function(){var t=this;this.withLoadMore=this.option.key!="price"&&Array.isArray(this.option.values)&&this.option.values.length>8;this.widgetTitle=this.option.label;salla.lang.onLoaded((function(){t.showMoreLabel=salla.lang.get("common.titles.more",t.showMoreLabel);t.showLessLabel=salla.lang.get("common.elements.show_less",t.showLessLabel)}))};t.prototype.componentDidLoad=function(){this.widgetValues.scrollHeight<this.initHeight&&(this.withLoadMore=false);this.withLoadMore&&this.widgetValues&&(this.widgetValues.style.maxHeight="".concat(this.initHeight,"px"));this.widgetContent.style.height="".concat(this.widgetContent.scrollHeight,"px")};t.prototype.reset=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.option.type===a.RANGE){this.priceRange.reset()}Array.from(this.host.querySelectorAll("input")).forEach((function(t){return t.checked=false}));return[2]}))}))};t.prototype.showMore=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.isShowMore=!this.isShowMore;this.widgetContent.style.height="auto";this.widgetValues.style.maxHeight=this.isShowMore?"".concat(this.widgetValues.scrollHeight,"px"):"".concat(this.initHeight,"px");setTimeout((function(){t.widgetContent.style.height="".concat(t.widgetContent.scrollHeight,"px")}),400);return[2]}))}))};t.prototype.toggleWidget=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.isOpen=!this.isOpen;r.toggleElementClassIf(this.widgetContent,"s-filters-widget-opened","s-filters-widget-closed",(function(){return t.isOpen}));return[2]}))}))};t.prototype.renderFilterOption=function(t){var e=this;if(![a.VALUES,a.MINIMUM,a.VARIANTS].includes(t.type)){return""}return t.values.map((function(i,s){var o=typeof i=="number"?i:i.key||i.value;return n("label",{class:"s-filters-label",htmlFor:"".concat(t.key,"-option-").concat(s)},n("input",{id:"".concat(t.key,"-option-").concat(s),name:t.key,type:t.inputType,checked:e.isSelectedOption(t,o),class:"s-filters-".concat(t.inputType),onChange:function(i){return e.changed.emit({event:i,option:t,value:o})}}),e.getOptionLabel(t,i))}))};t.prototype.isSelectedOption=function(t,e){if(!this.filtersData||!this.filtersData[t.key]){return false}return t.inputType===l.CHECKBOX?this.filtersData[t.key].includes(e):this.filtersData[t.key]==e};t.prototype.getOptionLabel=function(t,e){if(t.key=="rating"){return n("salla-rating-stars",{size:"small",value:e})}var i=e.value||"null";return n("span",{class:"s-filters-option-name"},i)};t.prototype.render=function(){var t=this;return n(s,{class:"s-filters-widget-container"},n("h3",{class:"s-filters-widget-title",onClick:function(){return t.toggleWidget()}},n("span",null,this.widgetTitle),n("span",{class:"s-filters-widget-plusminus ".concat(this.isOpen?"s-filters-widget-plusminus-active":"")})),n("div",{class:"s-filters-widget-content",ref:function(e){return t.widgetContent=e}},n("div",{class:"s-filters-widget-values",ref:function(e){return t.widgetValues=e}},n("slot",null),this.option.type!==a.RANGE?this.renderFilterOption(this.option):n("salla-price-range",{onChanged:function(e){return t.changed.emit(e.detail)},ref:function(e){return t.priceRange=e},filtersData:this.filtersData,option:this.option})),this.withLoadMore&&n("a",{class:"s-filters-widget-more",onClick:function(){return t.showMore()}},!this.isShowMore?this.showMoreLabel:this.showLessLabel)))};Object.defineProperty(t.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});return t}());c.style=u}}}));
-//# sourceMappingURL=p-9a9c63f6.system.entry.js.map

package/dist/twilight/p-9a9c63f6.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sallaFiltersWidgetCss","SallaFiltersWidget","exports","this","initHeight","class_1","prototype","connectedCallback","_this","withLoadMore","option","key","Array","isArray","values","length","widgetTitle","label","salla","lang","onLoaded","showMoreLabel","get","showLessLabel","componentDidLoad","widgetValues","scrollHeight","style","maxHeight","concat","widgetContent","height","reset","type","FilterOptionTypes","RANGE","priceRange","from","host","querySelectorAll","forEach","input","checked","showMore","isShowMore","setTimeout","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","filtersData","FilterOptionInputType","CHECKBOX","size","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  @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  @State() showMoreLabel: string=\"عرض المزيد\";\n  @State() showLessLabel: string=\"عرض أقل\";\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    this.widgetTitle = this.option.label;\n    salla.lang.onLoaded(() => {\n      this.showMoreLabel=salla.lang.get('common.titles.more', this.showMoreLabel)\n      this.showLessLabel=salla.lang.get('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 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 ?this.showMoreLabel : this.showLessLabel}</a>\n          }\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}