@salla.sa/twilight-components 2.12.10 → 2.12.12

package/dist/esm-es5/salla-filters-widget.entry.js

@@ -1,5 +1,5 @@
 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,r){function o(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n["throw"](t))}catch(t){r(t)}}function l(t){t.done?i(t.value):s(t.value).then(o,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return l([t,e])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(i=0)),i)try{if(n=1,s&&(r=a[0]&2?s["return"]:a[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,a[1])).done)return r;if(s=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=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(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(a[0]===6&&i.label<r[1]){i.label=r[1];r=a;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(a);break}if(r[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];s=0}finally{n=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
 /*!
  * Crafted with ❤ by Salla
- */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{H as Helper}from"./Helper-e4611a7c.js";import{a as FilterOptionTypes,F as FilterOptionInputType}from"./interfaces-5bea5a45.js";var sallaFiltersWidgetCss=":host{display:block}";var SallaFiltersWidget=function(){function t(t){registerInstance(this,t);this.changed=createEvent(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.getWithDefault("common.titles.more",t.showMoreLabel);t.showLessLabel=salla.lang.getWithDefault("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===FilterOptionTypes.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;Helper.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(![FilterOptionTypes.VALUES,FilterOptionTypes.MINIMUM,FilterOptionTypes.VARIANTS].includes(t.type)){return""}return t.values.map((function(i,n){var s=typeof i=="number"?i:i.key||i.value;return h("label",{class:"s-filters-label",htmlFor:"".concat(t.key,"-option-").concat(n)},h("input",{id:"".concat(t.key,"-option-").concat(n),name:t.key,type:t.inputType,checked:e.isSelectedOption(t,s),class:"s-filters-".concat(t.inputType),onChange:function(i){return e.changed.emit({event:i,option:t,value:s})}}),e.getOptionLabel(t,i))}))};t.prototype.isSelectedOption=function(t,e){if(!this.filtersData||!this.filtersData[t.key]){return false}return t.inputType===FilterOptionInputType.CHECKBOX?this.filtersData[t.key].includes(e):this.filtersData[t.key]==e};t.prototype.getOptionLabel=function(t,e){if(t.key=="rating"){return h("salla-rating-stars",{size:"small",value:e})}var i=e.value||"null";return h("span",{class:"s-filters-option-name"},i)};t.prototype.render=function(){var t=this;return h(Host,{class:"s-filters-widget-container"},h("h3",{class:"s-filters-widget-title",onClick:function(){return t.toggleWidget()}},h("span",null,this.widgetTitle),h("span",{class:"s-filters-widget-plusminus ".concat(this.isOpen?"s-filters-widget-plusminus-active":"")})),h("div",{class:"s-filters-widget-content",ref:function(e){return t.widgetContent=e}},h("div",{class:"s-filters-widget-values",ref:function(e){return t.widgetValues=e}},h("slot",null),this.option.type!==FilterOptionTypes.RANGE?this.renderFilterOption(this.option):h("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&&h("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 getElement(this)},enumerable:false,configurable:true});return t}();SallaFiltersWidget.style=sallaFiltersWidgetCss;export{SallaFiltersWidget as salla_filters_widget};
+ */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{H as Helper}from"./Helper-e4611a7c.js";import{a as FilterOptionTypes,F as FilterOptionInputType}from"./interfaces-5bea5a45.js";var sallaFiltersWidgetCss=":host{display:block}";var SallaFiltersWidget=function(){function t(t){registerInstance(this,t);this.changed=createEvent(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.getWithDefault("common.titles.more",t.showMoreLabel);t.showLessLabel=salla.lang.getWithDefault("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.setWidgetHeight=function(t){if(t===void 0){t=250}return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(i){this.widgetContent.removeAttribute("style");setTimeout((function(){var t=e.widgetContent.offsetHeight;e.widgetContent.style.height=t+"px"}),t);return[2]}))}))};t.prototype.reset=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.option.type===FilterOptionTypes.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;Helper.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(![FilterOptionTypes.VALUES,FilterOptionTypes.MINIMUM,FilterOptionTypes.VARIANTS].includes(t.type)){return""}return t.values.map((function(i,n){var s=typeof i=="number"?i:i.key||i.value;return h("label",{class:"s-filters-label",htmlFor:"".concat(t.key,"-option-").concat(n)},h("input",{id:"".concat(t.key,"-option-").concat(n),name:t.key,type:t.inputType,checked:e.isSelectedOption(t,s),class:"s-filters-".concat(t.inputType),onChange:function(i){return e.changed.emit({event:i,option:t,value:s})}}),e.getOptionLabel(t,i))}))};t.prototype.isSelectedOption=function(t,e){if(!this.filtersData||!this.filtersData[t.key]){return false}return t.inputType===FilterOptionInputType.CHECKBOX?this.filtersData[t.key].includes(e):this.filtersData[t.key]==e};t.prototype.getOptionLabel=function(t,e){if(t.key=="rating"){return h("salla-rating-stars",{size:"small",value:e})}var i=e.value||"null";return h("span",{class:"s-filters-option-name"},i)};t.prototype.render=function(){var t=this;return h(Host,{class:"s-filters-widget-container"},h("h3",{class:"s-filters-widget-title",onClick:function(){return t.toggleWidget()}},h("span",null,this.widgetTitle),h("span",{class:"s-filters-widget-plusminus ".concat(this.isOpen?"s-filters-widget-plusminus-active":"")})),h("div",{class:"s-filters-widget-content",ref:function(e){return t.widgetContent=e}},h("div",{class:"s-filters-widget-values",ref:function(e){return t.widgetValues=e}},h("slot",null),this.option.type!==FilterOptionTypes.RANGE?this.renderFilterOption(this.option):h("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&&h("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 getElement(this)},enumerable:false,configurable:true});return t}();SallaFiltersWidget.style=sallaFiltersWidgetCss;export{SallaFiltersWidget as salla_filters_widget};
 //# sourceMappingURL=salla-filters-widget.entry.js.map

package/dist/esm-es5/salla-filters-widget.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["sallaFiltersWidgetCss","SallaFiltersWidget","this","initHeight","class_1","prototype","connectedCallback","_this","withLoadMore","option","key","Array","isArray","values","length","widgetTitle","label","salla","lang","onLoaded","showMoreLabel","getWithDefault","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\n\n  /**\n   * Widget title.\n   */\n  @Prop({mutable: true}) widgetTitle: string;\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\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    this.widgetTitle = this.option.label;\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  /**\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.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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"}
+{"version":3,"names":["sallaFiltersWidgetCss","SallaFiltersWidget","this","initHeight","class_1","prototype","connectedCallback","_this","withLoadMore","option","key","Array","isArray","values","length","widgetTitle","label","salla","lang","onLoaded","showMoreLabel","getWithDefault","showLessLabel","componentDidLoad","widgetValues","scrollHeight","style","maxHeight","concat","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","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\n\n  /**\n   * Widget title.\n   */\n  @Prop({mutable: true}) widgetTitle: string;\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\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    this.widgetTitle = this.option.label;\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.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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"}

package/dist/esm-es5/salla-filters.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(t,e,r,i){function a(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,n){function s(t){try{o(i.next(t))}catch(t){n(t)}}function l(t){try{o(i["throw"](t))}catch(t){n(t)}}function o(t){t.done?r(t.value):a(t.value).then(s,l)}o((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,a,n,s;return s={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function l(t){return function(e){return o([t,e])}}function o(l){if(i)throw new TypeError("Generator is already executing.");while(s&&(s=0,l[0]&&(r=0)),r)try{if(i=1,a&&(n=l[0]&2?a["return"]:l[0]?a["throw"]||((n=a["return"])&&n.call(a),0):a.next)&&!(n=n.call(a,l[1])).done)return n;if(a=0,n)l=[l[0]&2,n.value];switch(l[0]){case 0:case 1:n=l;break;case 4:r.label++;return{value:l[1],done:false};case 5:r.label++;a=l[1];l=[0];continue;case 7:l=r.ops.pop();r.trys.pop();continue;default:if(!(n=r.trys,n=n.length>0&&n[n.length-1])&&(l[0]===6||l[0]===2)){r=0;continue}if(l[0]===3&&(!n||l[1]>n[0]&&l[1]<n[3])){r.label=l[1];break}if(l[0]===6&&r.label<n[1]){r.label=n[1];n=l;break}if(n&&r.label<n[2]){r.label=n[2];r.ops.push(l);break}if(n[2])r.ops.pop();r.trys.pop();continue}l=e.call(t,r)}catch(t){l=[6,t];a=0}finally{i=n=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};
 /*!
  * Crafted with ❤ by Salla
- */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{F as FilterOptionInputType,a as FilterOptionTypes}from"./interfaces-5bea5a45.js";var sallaFiltersCss=":host{display:block}.s-rating-stars-small{line-height:12px}.s-filters-radio{background-image:none !important}";var SallaFilters=function(){function t(t){var e=this;registerInstance(this,t);this.changed=createEvent(this,"changed",7);this.isReady=false;this.filters=undefined;this.isSidebarOpen=undefined;this.filtersData={};this.apply=undefined;this.reset=undefined;salla.event.on("filters::hidden",(function(){return e.host.style.display="none"}));salla.lang.onLoaded((function(){e.apply=salla.lang.get("pages.checkout.apply");e.reset=salla.lang.get("pages.categories.filters_reset")}));salla.event.on("filters::fetched",(function(t){var r=t.filters;e.host.style.display="";var i={};e.filters=r.map((function(t){t.label={category_id:salla.lang.get("common.titles.categories"),brand_id:salla.lang.get("common.titles.brands"),rating:salla.lang.get("pages.categories.filter_rating"),price:salla.lang.get("pages.categories.filter_price")}[t.key]||t.label;t.inputType=FilterOptionInputType.RADIO;if(t.key=="rating"){t.inputType=FilterOptionInputType.RADIO;var r=t.values,a=r.max,n=r.min;t.values=[5,4,3,2,1].filter((function(t){return t>=n||t<=a}))}if(e.filtersData[t.key]){i[t.key]=e.filtersData[t.key]}return t}));e.filtersData=i}))}t.prototype.connectedCallback=function(){try{var t=new URLSearchParams(window.location.search).get("filters");this.filtersData=t?JSON.parse(decodeURIComponent(t)):{}}catch(t){salla.logger.warn("failed to get filters from url",t.message)}};t.prototype.getFilters=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.filtersData]}))}))};t.prototype.applyFilters=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(r){if(!this.isReady){return[2]}t=Object.keys(this.filtersData).length>0;setTimeout((function(){var r;if(t){window.history.pushState({},"",salla.url.addParamToUrl("filters",encodeURIComponent(JSON.stringify(e.filtersData))))}else{var i=new URL(window.location.href);(r=i.searchParams)===null||r===void 0?void 0:r.delete("filters");window.history.pushState({},"",i.toString())}salla.event.emit("salla-filters::changed",e.filtersData);e.changed.emit(e.filtersData)}),300);return[2]}))}))};t.prototype.resetFilters=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.filtersData={};this.host.childNodes.forEach((function(t){return t.reset&&t.reset()}));salla.event.emit("salla-filters::reset");return[2,this.applyFilters()]}))}))};t.prototype.handleOptionChange=function(t,e,r){if(e.type===FilterOptionTypes.RANGE){this.filtersData[e.key]=r;return}var i=t.target.checked;if(e.type===FilterOptionTypes.VARIANTS){this.filtersData.variants=this.filtersData.variants||{};i&&(this.filtersData.variants[e.key]=r);i||delete this.filtersData.variants[e.key];return}if(t.target.type==FilterOptionInputType.RADIO){i&&(this.filtersData[e.key]=r);i||delete this.filtersData[e.key];return}this.filtersData[e.key]=this.filtersData[e.key]||[];if(i){this.filtersData[e.key].push(r);return}this.filtersData[e.key]=this.filtersData[e.key].filter((function(t){return t!=r}))};t.prototype.render=function(){var t=this;var e,r;return h(Host,null,(e=this.filters)===null||e===void 0?void 0:e.map((function(e){return h("salla-filters-widget",{option:e,filtersData:t.filtersData,onChanged:function(e){var r=e.detail,i=r.event,a=r.option,n=r.value;return t.handleOptionChange(i,a,n)}})})),((r=this.filters)===null||r===void 0?void 0:r.length)?h("div",{class:"s-filters-footer"},h("salla-button",{color:"primary",onClick:function(){return t.applyFilters()}},this.apply),h("salla-button",{color:"gray",fill:"outline",onClick:function(){return t.resetFilters()}},this.reset)):"")};t.prototype.componentDidLoad=function(){this.isReady=true};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaFilters.style=sallaFiltersCss;export{SallaFilters as salla_filters};
+ */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{F as FilterOptionInputType,a as FilterOptionTypes}from"./interfaces-5bea5a45.js";var sallaFiltersCss=":host{display:block}.s-rating-stars-small{line-height:12px}.s-filters-radio{background-image:none !important}";var SallaFilters=function(){function t(t){var e=this;registerInstance(this,t);this.changed=createEvent(this,"changed",7);this.isReady=false;this.filters=undefined;this.isSidebarOpen=undefined;this.filtersData={};this.apply=undefined;this.reset=undefined;salla.event.on("filters::hidden",(function(){return e.host.style.display="none"}));salla.lang.onLoaded((function(){e.apply=salla.lang.get("pages.checkout.apply");e.reset=salla.lang.get("pages.categories.filters_reset")}));salla.event.on("filters::fetched",(function(t){var r=t.filters;e.host.style.display="";var i={};e.filters=r.map((function(t){t.label={category_id:salla.lang.get("common.titles.categories"),brand_id:salla.lang.get("common.titles.brands"),rating:salla.lang.get("pages.categories.filter_rating"),price:salla.lang.get("pages.categories.filter_price")}[t.key]||t.label;t.inputType=FilterOptionInputType.RADIO;if(t.key=="rating"){t.inputType=FilterOptionInputType.RADIO;var r=t.values,a=r.max,n=r.min;t.values=[5,4,3,2,1].filter((function(t){return t>=n||t<=a}))}if(e.filtersData[t.key]){i[t.key]=e.filtersData[t.key]}return t}));e.filtersData=i;e.host.childNodes.forEach((function(t){return __awaiter(e,void 0,void 0,(function(){var e;return __generator(this,(function(r){switch(r.label){case 0:e=t.setWidgetHeight;if(!e)return[3,2];return[4,t.setWidgetHeight()];case 1:e=r.sent();r.label=2;case 2:return[2,e]}}))}))}))}))}t.prototype.connectedCallback=function(){try{var t=new URLSearchParams(window.location.search).get("filters");this.filtersData=t?JSON.parse(decodeURIComponent(t)):{}}catch(t){salla.logger.warn("failed to get filters from url",t.message)}};t.prototype.getFilters=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.filtersData]}))}))};t.prototype.applyFilters=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(r){if(!this.isReady){return[2]}t=Object.keys(this.filtersData).length>0;setTimeout((function(){var r;if(t){window.history.pushState({},"",salla.url.addParamToUrl("filters",encodeURIComponent(JSON.stringify(e.filtersData))))}else{var i=new URL(window.location.href);(r=i.searchParams)===null||r===void 0?void 0:r.delete("filters");window.history.pushState({},"",i.toString())}salla.event.emit("salla-filters::changed",e.filtersData);e.changed.emit(e.filtersData)}),300);return[2]}))}))};t.prototype.resetFilters=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.filtersData={};this.host.childNodes.forEach((function(t){return t.reset&&t.reset()}));salla.event.emit("salla-filters::reset");return[2,this.applyFilters()]}))}))};t.prototype.handleOptionChange=function(t,e,r){if(e.type===FilterOptionTypes.RANGE){this.filtersData[e.key]=r;return}var i=t.target.checked;if(e.type===FilterOptionTypes.VARIANTS){this.filtersData.variants=this.filtersData.variants||{};i&&(this.filtersData.variants[e.key]=r);i||delete this.filtersData.variants[e.key];return}if(t.target.type==FilterOptionInputType.RADIO){i&&(this.filtersData[e.key]=r);i||delete this.filtersData[e.key];return}this.filtersData[e.key]=this.filtersData[e.key]||[];if(i){this.filtersData[e.key].push(r);return}this.filtersData[e.key]=this.filtersData[e.key].filter((function(t){return t!=r}))};t.prototype.render=function(){var t=this;var e,r;return h(Host,null,(e=this.filters)===null||e===void 0?void 0:e.map((function(e){return h("salla-filters-widget",{option:e,filtersData:t.filtersData,onChanged:function(e){var r=e.detail,i=r.event,a=r.option,n=r.value;return t.handleOptionChange(i,a,n)}})})),((r=this.filters)===null||r===void 0?void 0:r.length)?h("div",{class:"s-filters-footer"},h("salla-button",{color:"primary",onClick:function(){return t.applyFilters()}},this.apply),h("salla-button",{color:"gray",fill:"outline",onClick:function(){return t.resetFilters()}},this.reset)):"")};t.prototype.componentDidLoad=function(){this.isReady=true};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaFilters.style=sallaFiltersCss;export{SallaFilters as salla_filters};
 //# sourceMappingURL=salla-filters.entry.js.map

package/dist/esm-es5/salla-filters.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["sallaFiltersCss","SallaFilters","class_1","hostRef","_this","this","isReady","salla","event","on","host","style","display","lang","onLoaded","apply","get","reset","_c","filters","freshFilterData","map","filter","label","category_id","brand_id","rating","price","key","inputType","FilterOptionInputType","RADIO","values","max_1","max","min_1","min","stars","filtersData","prototype","connectedCallback","URLSearchParams","window","location","search","JSON","parse","decodeURIComponent","e","logger","warn","message","getFilters","applyFilters","hasFilters","Object","keys","length","setTimeout","history","pushState","url","addParamToUrl","encodeURIComponent","stringify","URL","href","_a","searchParams","delete","toString","emit","changed","resetFilters","childNodes","forEach","widget","handleOptionChange","option","value","type","FilterOptionTypes","RANGE","isChecked","target","checked","VARIANTS","variants","push","val","render","h","Host","onChanged","_d","detail","_b","class","color","onClick","fill","componentDidLoad"],"sources":["src/components/salla-filters/salla-filters.scss?tag=salla-filters","src/components/salla-filters/salla-filters.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.s-rating-stars-small {\n  line-height: 12px;\n}\n.s-filters-radio{\n  background-image: none !important;\n}","import { Component, Element, h, Event, EventEmitter, Host, Method, Prop, State } from '@stencil/core';\nimport { Filter, FilterOptionInputType, FilterOptionTypes } from \"./interfaces\";\n\n@Component({\n  tag: 'salla-filters',\n  styleUrl: 'salla-filters.scss',\n})\nexport class SallaFilters {\n\n  constructor() {\n    salla.event.on('filters::hidden', () => this.host.style.display = 'none');\n\n    salla.lang.onLoaded(() => {\n      this.apply = salla.lang.get('pages.checkout.apply');\n      this.reset = salla.lang.get('pages.categories.filters_reset');\n    });\n\n    salla.event.on('filters::fetched', ({ filters }) => {\n      this.host.style.display = '';\n      let freshFilterData = {};\n      this.filters = filters\n        .map((filter: Filter) => {\n          filter.label = {\n            category_id: salla.lang.get('common.titles.categories'),\n            brand_id: salla.lang.get('common.titles.brands'),\n            rating: salla.lang.get('pages.categories.filter_rating'),\n            price: salla.lang.get('pages.categories.filter_price'),\n          }[filter.key] || filter.label;\n          filter.inputType = FilterOptionInputType.RADIO;//todo:: support FilterOptionInputType.CHECKBOX\n          if (filter.key == 'rating') {\n            filter.inputType = FilterOptionInputType.RADIO;\n            //@ts-ignore\n            let { max, min } = filter.values;\n            //@ts-ignore\n            filter.values = [5, 4, 3, 2, 1].filter(stars => stars >= min || stars <= max)\n          }\n\n          //when getting new filters, maybe less than we had, so let's get from the old one, only what is existed now.\n          if (this.filtersData[filter.key]) {\n            freshFilterData[filter.key] = this.filtersData[filter.key];\n          }\n\n          return filter;\n        });\n      this.filtersData = freshFilterData;\n    });\n  }\n\n  connectedCallback() {\n    try {\n      let filters = (new URLSearchParams(window.location.search)).get('filters')\n      this.filtersData = filters ? JSON.parse(decodeURIComponent(filters)) : {};\n    } catch (e) {\n      salla.logger.warn('failed to get filters from url', e.message);\n    }\n  }\n\n  @Element() host: HTMLElement;\n\n  /**\n   * Array of filter options\n   */\n  @Prop({ reflect: true, mutable: true }) filters?: Filter[];\n\n  private isReady = false;//to avoid triggering the changed event\n\n  @State() isSidebarOpen: boolean;\n  @State() filtersData: object|any = {}\n  @State() apply: string;\n  @State() reset: string;\n\n  /**\n   * Custom event fired when the selected filters are changed.\n   */\n  @Event() changed: EventEmitter;\n\n  /**\n   * Method to get filter data.\n   */\n  @Method()\n  async getFilters() {\n    return this.filtersData;\n  }\n\n  /**\n   * Apply filter action.\n   */\n  @Method()\n  async applyFilters() {\n    if (!this.isReady) {\n      return;\n    }\n    let hasFilters = Object.keys(this.filtersData).length > 0;\n    setTimeout(() => {\n      if (hasFilters) {\n        window.history.pushState({}, '', salla.url.addParamToUrl('filters', encodeURIComponent(JSON.stringify(this.filtersData))));\n      } else {\n        let url = new URL(window.location.href);\n        url.searchParams?.delete('filters');\n        window.history.pushState({}, '', url.toString());\n      }\n      salla.event.emit('salla-filters::changed', this.filtersData);\n      this.changed.emit(this.filtersData);\n    }, 300);\n  }\n\n  /**\n   * Reset selected filters.\n   */\n  @Method()\n  async resetFilters() {\n    this.filtersData = {};\n    this.host.childNodes.forEach((widget: HTMLSallaFiltersWidgetElement) => widget.reset && widget.reset())\n    salla.event.emit('salla-filters::reset');\n    return this.applyFilters();\n  }\n\n\n  /**\n   * @param {{target:HTMLInputElement}} event\n   * @param option\n   * @param value\n   * @private\n   */\n  private handleOptionChange(event, option: Filter, value) {\n    if (option.type === FilterOptionTypes.RANGE) {\n      this.filtersData[option.key] = value;\n      return;\n    }\n    let isChecked = event.target.checked;\n\n    if(option.type === FilterOptionTypes.VARIANTS){\n      this.filtersData.variants=this.filtersData.variants||{};\n      isChecked && (this.filtersData.variants[option.key] = value);\n      isChecked || (delete this.filtersData.variants[option.key]);\n      return;\n    }\n    \n    if (event.target.type == FilterOptionInputType.RADIO) {\n      isChecked && (this.filtersData[option.key] = value);\n      isChecked || (delete this.filtersData[option.key]);\n      return;\n    }\n\n    //it's checkbox\n    this.filtersData[option.key] = this.filtersData[option.key] || [];\n    if (isChecked) {\n      this.filtersData[option.key].push(value);\n      return;\n    }\n    this.filtersData[option.key] = this.filtersData[option.key].filter(val => val != value);\n  }\n\n  render() {\n    return <Host>\n      {this.filters?.map(option => <salla-filters-widget\n        option={option}\n        filtersData={this.filtersData}\n        onChanged={({ detail: { event, option, value } }) => this.handleOptionChange(event, option, value)} />)}\n\n      {this.filters?.length? <div class=\"s-filters-footer\">\n        <salla-button color='primary' onClick={() => this.applyFilters()}>{this.apply}</salla-button>\n        <salla-button color='gray' fill='outline' onClick={() => this.resetFilters()}>{this.reset}</salla-button>\n      </div>:''}\n    </Host>;\n  }\n\n  componentDidLoad() {\n    this.isReady = true;\n  }\n}\n\n"],"mappings":"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"}
+{"version":3,"names":["sallaFiltersCss","SallaFilters","class_1","hostRef","_this","this","isReady","salla","event","on","host","style","display","lang","onLoaded","apply","get","reset","_c","filters","freshFilterData","map","filter","label","category_id","brand_id","rating","price","key","inputType","FilterOptionInputType","RADIO","values","max_1","max","min_1","min","stars","filtersData","childNodes","forEach","widget","__awaiter","__generator","_d","setWidgetHeight","sent","prototype","connectedCallback","URLSearchParams","window","location","search","JSON","parse","decodeURIComponent","e","logger","warn","message","getFilters","applyFilters","hasFilters","Object","keys","length","setTimeout","history","pushState","url","addParamToUrl","encodeURIComponent","stringify","URL","href","_a","searchParams","delete","toString","emit","changed","resetFilters","handleOptionChange","option","value","type","FilterOptionTypes","RANGE","isChecked","target","checked","VARIANTS","variants","push","val","render","h","Host","onChanged","detail","_b","class","color","onClick","fill","componentDidLoad"],"sources":["src/components/salla-filters/salla-filters.scss?tag=salla-filters","src/components/salla-filters/salla-filters.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.s-rating-stars-small {\n  line-height: 12px;\n}\n.s-filters-radio{\n  background-image: none !important;\n}","import { Component, Element, h, Event, EventEmitter, Host, Method, Prop, State } from '@stencil/core';\nimport { Filter, FilterOptionInputType, FilterOptionTypes } from \"./interfaces\";\n\n@Component({\n  tag: 'salla-filters',\n  styleUrl: 'salla-filters.scss',\n})\nexport class SallaFilters {\n\n  constructor() {\n    salla.event.on('filters::hidden', () => this.host.style.display = 'none');\n\n    salla.lang.onLoaded(() => {\n      this.apply = salla.lang.get('pages.checkout.apply');\n      this.reset = salla.lang.get('pages.categories.filters_reset');\n    });\n\n    salla.event.on('filters::fetched', ({ filters }) => {\n      this.host.style.display = '';\n      let freshFilterData = {};\n      this.filters = filters\n        .map((filter: Filter) => {\n          filter.label = {\n            category_id: salla.lang.get('common.titles.categories'),\n            brand_id: salla.lang.get('common.titles.brands'),\n            rating: salla.lang.get('pages.categories.filter_rating'),\n            price: salla.lang.get('pages.categories.filter_price'),\n          }[filter.key] || filter.label;\n          filter.inputType = FilterOptionInputType.RADIO;//todo:: support FilterOptionInputType.CHECKBOX\n          if (filter.key == 'rating') {\n            filter.inputType = FilterOptionInputType.RADIO;\n            //@ts-ignore\n            let { max, min } = filter.values;\n            //@ts-ignore\n            filter.values = [5, 4, 3, 2, 1].filter(stars => stars >= min || stars <= max)\n          }\n\n          //when getting new filters, maybe less than we had, so let's get from the old one, only what is existed now.\n          if (this.filtersData[filter.key]) {\n            freshFilterData[filter.key] = this.filtersData[filter.key];\n          }\n\n          return filter;\n        });\n      this.filtersData = freshFilterData;\n      this.host.childNodes.forEach(async (widget: HTMLSallaFiltersWidgetElement) => widget.setWidgetHeight && await widget.setWidgetHeight())\n    });\n  }\n\n  connectedCallback() {\n    try {\n      let filters = (new URLSearchParams(window.location.search)).get('filters')\n      this.filtersData = filters ? JSON.parse(decodeURIComponent(filters)) : {};\n    } catch (e) {\n      salla.logger.warn('failed to get filters from url', e.message);\n    }\n  }\n\n  @Element() host: HTMLElement;\n\n  /**\n   * Array of filter options\n   */\n  @Prop({ reflect: true, mutable: true }) filters?: Filter[];\n\n  private isReady = false;//to avoid triggering the changed event\n\n  @State() isSidebarOpen: boolean;\n  @State() filtersData: object|any = {}\n  @State() apply: string;\n  @State() reset: string;\n\n  /**\n   * Custom event fired when the selected filters are changed.\n   */\n  @Event() changed: EventEmitter;\n\n  /**\n   * Method to get filter data.\n   */\n  @Method()\n  async getFilters() {\n    return this.filtersData;\n  }\n\n  /**\n   * Apply filter action.\n   */\n  @Method()\n  async applyFilters() {\n    if (!this.isReady) {\n      return;\n    }\n    let hasFilters = Object.keys(this.filtersData).length > 0;\n    setTimeout(() => {\n      if (hasFilters) {\n        window.history.pushState({}, '', salla.url.addParamToUrl('filters', encodeURIComponent(JSON.stringify(this.filtersData))));\n      } else {\n        let url = new URL(window.location.href);\n        url.searchParams?.delete('filters');\n        window.history.pushState({}, '', url.toString());\n      }\n      salla.event.emit('salla-filters::changed', this.filtersData);\n      this.changed.emit(this.filtersData);      \n    }, 300);\n  }\n\n  /**\n   * Reset selected filters.\n   */\n  @Method()\n  async resetFilters() {\n    this.filtersData = {};\n    this.host.childNodes.forEach((widget: HTMLSallaFiltersWidgetElement) => widget.reset && widget.reset())\n    salla.event.emit('salla-filters::reset');\n    return this.applyFilters();\n  }\n\n\n  /**\n   * @param {{target:HTMLInputElement}} event\n   * @param option\n   * @param value\n   * @private\n   */\n  private handleOptionChange(event, option: Filter, value) {\n    if (option.type === FilterOptionTypes.RANGE) {\n      this.filtersData[option.key] = value;\n      return;\n    }\n    let isChecked = event.target.checked;\n\n    if(option.type === FilterOptionTypes.VARIANTS){\n      this.filtersData.variants=this.filtersData.variants||{};\n      isChecked && (this.filtersData.variants[option.key] = value);\n      isChecked || (delete this.filtersData.variants[option.key]);\n      return;\n    }\n    \n    if (event.target.type == FilterOptionInputType.RADIO) {\n      isChecked && (this.filtersData[option.key] = value);\n      isChecked || (delete this.filtersData[option.key]);\n      return;\n    }\n\n    //it's checkbox\n    this.filtersData[option.key] = this.filtersData[option.key] || [];\n    if (isChecked) {\n      this.filtersData[option.key].push(value);\n      return;\n    }\n    this.filtersData[option.key] = this.filtersData[option.key].filter(val => val != value);\n  }\n\n  render() {\n    return <Host>\n      {this.filters?.map(option => <salla-filters-widget\n        option={option}\n        filtersData={this.filtersData}\n        onChanged={({ detail: { event, option, value } }) => this.handleOptionChange(event, option, value)} />)}\n\n      {this.filters?.length? <div class=\"s-filters-footer\">\n        <salla-button color='primary' onClick={() => this.applyFilters()}>{this.apply}</salla-button>\n        <salla-button color='gray' fill='outline' onClick={() => this.resetFilters()}>{this.reset}</salla-button>\n      </div>:''}\n    </Host>;\n  }\n\n  componentDidLoad() {\n    this.isReady = true;\n  }\n}\n\n"],"mappings":"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"}

package/dist/esm-es5/salla-product-options.entry.js

@@ -1,5 +1,5 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,i){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,a){function r(t){try{s(i.next(t))}catch(t){a(t)}}function l(t){try{s(i["throw"](t))}catch(t){a(t)}}function s(t){t.done?n(t.value):o(t.value).then(r,l)}s((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,o,a,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(t){return function(e){return s([t,e])}}function s(l){if(i)throw new TypeError("Generator is already executing.");while(r&&(r=0,l[0]&&(n=0)),n)try{if(i=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:n.label++;return{value:l[1],done:false};case 5:n.label++;o=l[1];l=[0];continue;case 7:l=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){n=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){n.label=l[1];break}if(l[0]===6&&n.label<a[1]){n.label=a[1];a=l;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(l);break}if(a[2])n.ops.pop();n.trys.pop();continue}l=e.call(t,n)}catch(t){l=[6,t];o=0}finally{i=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};
+var __awaiter=this&&this.__awaiter||function(t,n,e,i){function o(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,a){function r(t){try{s(i.next(t))}catch(t){a(t)}}function l(t){try{s(i["throw"](t))}catch(t){a(t)}}function s(t){t.done?e(t.value):o(t.value).then(r,l)}s((i=i.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,o,a,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(t){return function(n){return s([t,n])}}function s(l){if(i)throw new TypeError("Generator is already executing.");while(r&&(r=0,l[0]&&(e=0)),e)try{if(i=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:e.label++;return{value:l[1],done:false};case 5:e.label++;o=l[1];l=[0];continue;case 7:l=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){e=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){e.label=l[1];break}if(l[0]===6&&e.label<a[1]){e.label=a[1];a=l;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(l);break}if(a[2])e.ops.pop();e.trys.pop();continue}l=n.call(t,e)}catch(t){l=[6,t];o=0}finally{i=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};
 /*!
  * Crafted with ❤ by Salla
- */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{C as CameraIcon}from"./camera-647ab50f.js";var DisplayType;(function(t){t["COLOR"]="color";t["DATE"]="date";t["DATETIME"]="datetime";t["DONATION"]="donation";t["IMAGE"]="image";t["MULTIPLE_OPTIONS"]="multiple-options";t["NUMBER"]="number";t["SINGLE_OPTION"]="single-option";t["SPLITTER"]="splitter";t["TEXT"]="text";t["TEXTAREA"]="textarea";t["THUMBNAIL"]="thumbnail";t["TIME"]="time";t["RADIO"]="radio";t["CHECKBOX"]="checkbox";t["MAP"]="map";t["FILE"]="file";t["COLOR_PICKER"]="color_picker"})(DisplayType||(DisplayType={}));var Currency;(function(t){t["Sar"]="SAR"})(Currency||(Currency={}));var CheckCircleIcon='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>check</title>\n<path d="M27.521 6.976c-0.569-0.472-1.407-0.393-1.879 0.171l-12.567 15.080-7.003-4.668c-0.615-0.411-1.441-0.244-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l8 5.333c0.227 0.149 0.484 0.223 0.739 0.223 0.384 0 0.763-0.165 1.027-0.48l13.333-16c0.471-0.565 0.393-1.407-0.171-1.877z"></path>\n</svg>\n';var FileIcon='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>file-upload</title>\n<path d="M21.333 24c0.341 0 0.683-0.131 0.943-0.391 0.521-0.521 0.521-1.364 0-1.885l-5.333-5.333c-0.123-0.123-0.271-0.22-0.433-0.288-0.327-0.135-0.693-0.135-1.019 0-0.163 0.068-0.311 0.165-0.433 0.288l-5.333 5.333c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l3.057-3.057v10.115c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-10.115l3.057 3.057c0.26 0.26 0.601 0.391 0.943 0.391zM28.943 9.724l-9.333-9.333c-0.249-0.251-0.589-0.391-0.943-0.391h-12c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h4c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-4c-0.735 0-1.333-0.599-1.333-1.333v-24c0-0.735 0.599-1.333 1.333-1.333h11.448l8.552 8.552v16.781c0 0.735-0.599 1.333-1.333 1.333h-4c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h4c2.205 0 4-1.795 4-4v-17.333c0-0.353-0.14-0.693-0.391-0.943z"></path>\n</svg>\n';var sallaProductOptionsCss="";var SallaProductOptions=function(){function t(t){var e=this;registerInstance(this,t);this.changed=createEvent(this,"changed",7);this.fileTypes={pdf:"application/pdf",png:"image/png",jpg:"image/jpeg",word:"application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",exl:"application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",txt:"text/plain"};this.outSkus=[];this.optionsData=undefined;this.outOfStockText="";this.donationAmount=salla.lang.get("pages.products.donation_amount");this.selectedOptions=[];this.canDisabled=undefined;this.selectedSkus=undefined;this.selectedOutSkus=undefined;this.productId=salla.config.get("page.id");this.options=undefined;this.canDisabled=!salla.config.get("store.settings.products.notify_options_availability");salla.lang.onLoaded((function(){e.outOfStockText=salla.lang.get("pages.products.out_of_stock");e.donationAmount=salla.lang.get("pages.products.donation_amount")}));if(this.options){try{this.setOptionsData(Array.isArray(this.options)?this.options:JSON.parse(this.options));return}catch(t){salla.log("Bad json passed via options prop")}}if(!Array.isArray(this.optionsData)){salla.log("Options is not an array[] ---\x3e ",this.optionsData);this.setOptionsData([])}if(this.productId&&!salla.url.is_page("cart")){salla.api.product.getDetails(this.productId,["options"]).then((function(t){return e.setOptionsData(t.data.options)}))}}t.prototype.setOptionsData=function(t){var e,n;this.optionsData=t;var i=this;(n=(e=this.optionsData[0])===null||e===void 0?void 0:e.details)===null||n===void 0?void 0:n.forEach((function(t){Object.entries(t.skus_availability||{}).filter((function(t){return!t[1]})).map((function(t){return i.outSkus.push(Number(t[0]))}))}))};t.prototype.getSelectedOptionsData=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;return __generator(this,(function(n){t={};e=this.host.getElementSallaData();e.forEach((function(e,n){n.startsWith("options[")&&(t[n.replace("options[","").replace("]","")]=e)}));return[2,t]}))}))};t.prototype.reportValidity=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,n;return __generator(this,(function(i){t=this.host.querySelectorAll("[required]");e=true;for(n=0;n<t.length;n++){if("reportValidity"in t[n]&&!t[n].reportValidity()){e=false}}return[2,e]}))}))};t.prototype.hasOutOfStockOption=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;var n=this;return __generator(this,(function(i){return[2,this.selectedOptions.some((function(t){return t.is_out}))||((t=this.selectedSkus)===null||t===void 0?void 0:t.length)&&((e=this.selectedSkus)===null||e===void 0?void 0:e.every((function(t){return n.outSkus.includes(t)})))]}))}))};t.prototype.getSelectedOptions=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.selectedOptions]}))}))};t.prototype.getOption=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.optionsData.find((function(e){return e.id===t}))]}))}))};t.prototype.invalidHandler=function(t,e){var n=t.target.closest(".s-product-options-option");if(!salla.url.is_page("cart")){n.scrollIntoView({behavior:"smooth",block:"center"})}n.classList.add("s-product-options-option-error")};t.prototype.changedHandler=function(t,e){var n={event:t,option:e,detail:null};if(e.details){var i=e.details.find((function(e){return Number(e.id)===Number(t.target.value)}));n.detail=i}var o=t.target.closest(".s-product-options-option");if(t.target.value||(e.type==DisplayType.FILE||e.type==DisplayType.IMAGE)&&t.type==="added"||e.type==DisplayType.MAP&&t.type==="selected"&&(t.target.lat&&t.target.lng)){setTimeout((function(){o.classList.remove("s-product-options-option-error")}),200)}var a=this.selectedOptions.findIndex((function(t){return t.option_id===n.option.id}));a>-1?this.selectedOptions[a]=Object.assign(Object.assign({},n.detail),{option_id:n.option.id}):this.selectedOptions.push(Object.assign(Object.assign({},n.detail),{option_id:n.option.id}));this.setSelectedSkus();this.handleRequiredMultipleOptions(e);this.changed.emit(n);salla.event.emit("product-options::change",n)};t.prototype.setSelectedSkus=function(){this.selectedSkus=this.selectedOptions.map((function(t){return Object.keys(t.skus_availability||{})})).reduce((function(t,e){return t.filter((function(t){return e.includes(t)}))})).map((function(t){return Number(t)}))};t.prototype.handleRequiredMultipleOptions=function(t){if(t.type!==DisplayType.MULTIPLE_OPTIONS||!t.required){return}var e=this.host.querySelector('[data-option-id="'.concat(t.id,'"]'));var n=e.querySelectorAll("input:checked").length;e.querySelectorAll("input").forEach((function(t){return t.toggleAttribute("required",!n)}))};t.prototype.getLatLng=function(t,e){return t?t.split(",")[e=="lat"?0:1]:""};t.prototype.getDisplayForType=function(t){if(this["".concat(t.type,"Option")]){return this["".concat(t.type,"Option")](t)}if(t.type===DisplayType.COLOR_PICKER){return this.colorPickerOption(t)}if(t.type===DisplayType.MULTIPLE_OPTIONS){return this.multipleOptions(t)}if(t.type===DisplayType.SINGLE_OPTION){return this.singleOption(t)}salla.log("Couldn't find options type(".concat(t.type,")😢"));return""};t.prototype.getOptionShownWhen=function(t){return t.visibility_condition?{"data-show-when":"options[".concat(t.visibility_condition.option,"] ").concat(t.visibility_condition.operator," ").concat(t.visibility_condition.value)}:{}};t.prototype.componentWillLoad=function(){this.outOfStockText=salla.lang.get("pages.products.out_of_stock");return salla.api.cart.getCurrentCartId()};t.prototype.render=function(){var t=this;var e;if(((e=this.optionsData)===null||e===void 0?void 0:e.length)==0){return}return h(Host,{class:"s-product-options-wrapper"},h("salla-conditional-fields",null,this.optionsData.map((function(e){return h("div",Object.assign({class:"s-product-options-option-container".concat(e.visibility_condition?" hidden":""),"data-option-id":e.id},t.getOptionShownWhen(e)),e.name=="splitter"?t.splitterOption():h("div",{class:"s-product-options-option","data-option-type":e.type,"data-option-required":"".concat(e.required)},h("label",{htmlFor:"options["+e.id+"]",class:"s-product-options-option-label"},h("b",null,e.name,e.required&&h("span",null," * ")," "),h("small",null,e.placeholder)),h("div",{class:"s-product-options-option-content"},t.getDisplayForType(e))))}))))};t.prototype.donationOption=function(t,e){var n=this;var i;return h("div",{class:"s-product-options-donation-wrapper"},t.donation?h("div",{class:"s-product-options-donation-progress"},h("salla-progress-bar",{donation:t.donation})):"",((i=t.donation)===null||i===void 0?void 0:i.can_donate)?h("div",{class:"s-product-options-donation-input-group"},h("input",{type:"text",id:"donating-amount",name:"donating_amount",class:"s-form-control",value:t.value,required:true,placeholder:t.placeholder,onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)},onBlur:function(e){return n.changedHandler(e,t)},onInvalid:function(e){return n.invalidHandler(e,t)}}),h("span",{class:"s-product-options-donation-amount-currency"},salla.config.currency(salla.config.get("user.currency_code")).symbol)):"")};t.prototype.fileUploader=function(t,e){var n=this;if(e===void 0){e=null}return h("salla-file-upload",Object.assign({},e||{},{"payload-name":"file",value:t.value,"instant-upload":true,name:"options[".concat(t.id,"]"),required:t.required,height:"120px",onAdded:function(e){return n.changedHandler(e,t)},url:salla.cart.api.getUploadImageEndpoint(),"form-data":{cart_item_id:this.productId,product_id:this.productId},onInvalidInput:function(e){return n.invalidHandler(e,t)},class:{"s-product-options-image-input":true,required:t.required}}),h("div",{class:"s-product-options-filepond-placeholder"},h("span",{class:"s-product-options-filepond-placeholder-icon",innerHTML:e.accept&&e.accept.split(",").every((function(t){return t.includes("image")}))?CameraIcon:FileIcon}),h("p",{class:"s-product-options-filepond-placeholder-text"},salla.lang.get("common.uploader.drag_and_drop")),h("span",{class:"filepond--label-action"},salla.lang.get("common.uploader.browse"))))};t.prototype.imageOption=function(t){return this.fileUploader(t,{accept:"image/png,image/jpeg,image/jpg,image/gif"})};t.prototype.fileOption=function(t){var e=this;var n=t.details.map((function(t){return e.fileTypes[t.name]})).filter(Boolean);return(n===null||n===void 0?void 0:n.length)?this.fileUploader(t,{accept:n.join(",")}):"File types not selected."};t.prototype.numberOption=function(t){var e=this;return h("input",{type:"text",value:t.value,class:"s-form-control",required:t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onBlur:function(n){return e.changedHandler(n,t)},onInvalid:function(n){return e.invalidHandler(n,t)},onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)}})};t.prototype.splitterOption=function(){return h("div",{class:"s-product-options-splitter"})};t.prototype.textOption=function(t){var e=this;return h("div",{class:"s-product-options-text"},h("input",{type:"text",value:t.value,class:"s-form-control",required:t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(n){return e.invalidHandler(n,t)},onInput:function(n){return e.changedHandler(n,t)}}))};t.prototype.textareaOption=function(t){var e=this;return h("div",{class:"s-product-options-textarea"},h("div",{class:"mt-1"},h("textarea",{rows:4,value:t.value,class:"s-form-control",required:t.required,id:"options[".concat(t.id,"]"),name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(n){return e.invalidHandler(n,t)},onInput:function(n){return e.changedHandler(n,t)}})))};t.prototype.mapOption=function(t){var e=this;return h("salla-map",{zoom:15,lat:this.getLatLng(t.value,"lat"),lng:this.getLatLng(t.value,"lng"),name:"options[".concat(t.id,"]"),searchable:true,required:t.required,onInvalidInput:function(n){return e.invalidHandler(n,t)},onSelected:function(n){return e.changedHandler(n,t)}})};t.prototype.colorPickerOption=function(t){var e=this;return h("salla-color-picker",{onSubmitted:function(n){return e.changedHandler(n,t)},name:"options[".concat(t.id,"]"),required:t.required,onInvalidInput:function(n){return e.invalidHandler(n,t)},color:t.value})};t.prototype.timeOption=function(t){var e=this;return h("salla-datetime-picker",{noCalendar:true,enableTime:true,dateFormat:"h:i K",value:t.value,placeholder:t.name,required:t.required,name:"options[".concat(t.id,"]"),class:"s-product-options-time-element",onInvalidInput:function(n){return e.invalidHandler(n,t)},onPicked:function(n){return e.changedHandler(n,t)}})};t.prototype.dateOption=function(t){var e=this;return h("div",{class:"s-product-options-date-element"},h("salla-datetime-picker",{value:t.value,placeholder:t.name,required:t.required,minDate:new Date,name:"options[".concat(t.id,"]"),onInvalidInput:function(n){return e.invalidHandler(n,t)},onPicked:function(n){return e.changedHandler(n,t)}}))};t.prototype.datetimeOption=function(t){var e=this;return h("div",{class:"s-product-options-datetime-element"},h("salla-datetime-picker",{enableTime:true,value:t.value,dateFormat:"Y-m-d G:i:K",placeholder:t.name,required:t.required,name:"options[".concat(t.id,"]"),maxDate:t.to_date_time,minDate:t.from_date_time,onInvalidInput:function(n){return e.invalidHandler(n,t)},onPicked:function(n){return e.changedHandler(n,t)}}))};t.prototype.getOptionDetailName=function(t,e,n){if(e===void 0){e=true}if(n&&n==DisplayType.COLOR){return t.name+(e&&this.isOptionDetailOut(t)?" <br/> <p> ".concat(this.outOfStockText," </p>"):"")+(t.additional_price?" <p> (".concat(salla.money(t.additional_price),") </p>"):"")}return t.name+(e&&this.isOptionDetailOut(t)?" - ".concat(this.outOfStockText):"")+(t.additional_price?" (".concat(salla.money(t.additional_price),")"):"")};t.prototype.isOptionDetailOut=function(t){var e=this;var n;if(t.is_out||!t.skus_availability||!((n=this.selectedSkus)===null||n===void 0?void 0:n.length)){return t.is_out}var i=this.selectedOptions.filter((function(e){return e.id==t.id})).length;if(i&&this.selectedOptions.length==1){return false}if(i){var o=this.selectedSkus.filter((function(t){return e.outSkus.includes(t)}));return Object.keys(t.skus_availability).some((function(t){return o.includes(Number(t))}))}return this.selectedOptions.some((function(e){return e.is_out&&e.option_id!==t.option_id}))};t.prototype.singleOption=function(t){var e=this;return h("div",null,h("select",{name:"options[".concat(t.id,"]"),required:t.required,class:"s-form-control",onInvalid:function(n){return e.invalidHandler(n,t)},onChange:function(n){return e.changedHandler(n,t)}},h("option",{value:""},t.placeholder),t===null||t===void 0?void 0:t.details.map((function(t){return h("option",{value:t.id,disabled:e.canDisabled&&e.isOptionDetailOut(t),selected:t.is_selected},e.getOptionDetailName(t))}))))};t.prototype.multipleOptions=function(t){var e=this;var n=t.required&&!t.details.some((function(t){return t.is_selected}));return h("div",{class:{"s-product-options-multiple-options-wrapper":true,required:t.required}},t===null||t===void 0?void 0:t.details.map((function(i){return h("div",null,h("input",{type:"checkbox",value:i.id,disabled:e.isOptionDetailOut(i),checked:i.is_selected,required:n,name:"options[".concat(t.id,"][]"),id:"field-".concat(t.id,"-").concat(i.id),onChange:function(n){return e.changedHandler(n,t)},onInvalid:function(n){return e.invalidHandler(n,t)},"aria-describedby":"options[".concat(t.id,"]-description")}),h("label",{htmlFor:"field-".concat(t.id,"-").concat(i.id)},e.getOptionDetailName(i)))})))};t.prototype.colorOption=function(t){var e=this;return h("fieldset",{class:"s-product-options-colors-wrapper"},t===null||t===void 0?void 0:t.details.map((function(n){return h("div",{class:"s-product-options-colors-item"},h("input",{type:"radio",value:n.id,required:t.required,checked:n.is_selected,name:"options[".concat(t.id,"]"),disabled:e.canDisabled&&e.isOptionDetailOut(n),id:"color-".concat(e.productId,"-").concat(t.id,"-").concat(n.id),onInvalid:function(n){return e.invalidHandler(n,t)},onChange:function(n){return e.changedHandler(n,t)}}),h("label",{htmlFor:"color-".concat(e.productId,"-").concat(t.id,"-").concat(n.id)},h("span",{style:{"background-color":n.color}}),h("div",{innerHTML:e.getOptionDetailName(n,true,t.type)})))})))};t.prototype.thumbnailOption=function(t){var e=this;return h("div",{class:"s-product-options-thumbnails-wrapper"},t.details.map((function(n){return h("div",null,h("input",{type:"radio",value:n.id,"data-itemid":n.id,required:t.required,checked:n.is_selected,name:"options[".concat(t.id,"]"),"data-img-id":n.option_value,disabled:e.canDisabled&&e.isOptionDetailOut(n),id:"option_".concat(e.productId,"-").concat(t.id,"_").concat(n.id),onInvalid:function(n){return e.invalidHandler(n,t)},onChange:function(n){return e.changedHandler(n,t)}}),h("label",{htmlFor:"option_".concat(e.productId,"-").concat(t.id,"_").concat(n.id),"data-img-id":n.option_value,class:"go-to-slide"},h("img",{"data-src":n.image,src:n.image,title:n.name,alt:n.name}),h("span",{innerHTML:CheckCircleIcon,class:"s-product-options-thumbnails-icon"}),e.isOptionDetailOut(n)?[h("small",{class:"s-product-options-thumbnails-stock-badge"},e.outOfStockText),e.canDisabled?h("div",{class:"s-product-options-thumbnails-badge-overlay"}):""]:""),h("p",null,e.getOptionDetailName(n,false)," "))})))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaProductOptions.style=sallaProductOptionsCss;export{SallaProductOptions as salla_product_options};
+ */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{C as CameraIcon}from"./camera-647ab50f.js";var DisplayType;(function(t){t["COLOR"]="color";t["DATE"]="date";t["DATETIME"]="datetime";t["DONATION"]="donation";t["IMAGE"]="image";t["MULTIPLE_OPTIONS"]="multiple-options";t["NUMBER"]="number";t["SINGLE_OPTION"]="single-option";t["SPLITTER"]="splitter";t["TEXT"]="text";t["TEXTAREA"]="textarea";t["THUMBNAIL"]="thumbnail";t["TIME"]="time";t["RADIO"]="radio";t["CHECKBOX"]="checkbox";t["MAP"]="map";t["FILE"]="file";t["COLOR_PICKER"]="color_picker"})(DisplayType||(DisplayType={}));var Currency;(function(t){t["Sar"]="SAR"})(Currency||(Currency={}));var CheckCircleIcon='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>check</title>\n<path d="M27.521 6.976c-0.569-0.472-1.407-0.393-1.879 0.171l-12.567 15.080-7.003-4.668c-0.615-0.411-1.441-0.244-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l8 5.333c0.227 0.149 0.484 0.223 0.739 0.223 0.384 0 0.763-0.165 1.027-0.48l13.333-16c0.471-0.565 0.393-1.407-0.171-1.877z"></path>\n</svg>\n';var FileIcon='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>file-upload</title>\n<path d="M21.333 24c0.341 0 0.683-0.131 0.943-0.391 0.521-0.521 0.521-1.364 0-1.885l-5.333-5.333c-0.123-0.123-0.271-0.22-0.433-0.288-0.327-0.135-0.693-0.135-1.019 0-0.163 0.068-0.311 0.165-0.433 0.288l-5.333 5.333c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l3.057-3.057v10.115c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-10.115l3.057 3.057c0.26 0.26 0.601 0.391 0.943 0.391zM28.943 9.724l-9.333-9.333c-0.249-0.251-0.589-0.391-0.943-0.391h-12c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h4c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-4c-0.735 0-1.333-0.599-1.333-1.333v-24c0-0.735 0.599-1.333 1.333-1.333h11.448l8.552 8.552v16.781c0 0.735-0.599 1.333-1.333 1.333h-4c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h4c2.205 0 4-1.795 4-4v-17.333c0-0.353-0.14-0.693-0.391-0.943z"></path>\n</svg>\n';var sallaProductOptionsCss="";var SallaProductOptions=function(){function t(t){var n=this;registerInstance(this,t);this.changed=createEvent(this,"changed",7);this.fileTypes={pdf:"application/pdf",png:"image/png",jpg:"image/jpeg",word:"application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",exl:"application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",txt:"text/plain"};this.outSkus=[];this.handleDonationOptions=function(t){t.preventDefault();t.stopPropagation();n.isCustomDonation=t.target.value==="custom";if(n.donationInput){if(t.target.value==="custom"){n.donationInput.value="";n.donationInput.focus()}else{n.donationInput.value=t.target.value}}};this.optionsData=undefined;this.outOfStockText="";this.donationAmount=salla.lang.get("pages.products.donation_amount");this.selectDonationAmount=salla.lang.getWithDefault("pages.products.select_donation_amount","تحديد مبلغ التبرع");this.selectAmount=salla.lang.getWithDefault("pages.products.select_amount","اختر المبلغ");this.isCustomDonation=false;this.selectedOptions=[];this.canDisabled=undefined;this.selectedSkus=undefined;this.selectedOutSkus=undefined;this.productId=salla.config.get("page.id");this.options=undefined;this.canDisabled=!salla.config.get("store.settings.products.notify_options_availability");salla.lang.onLoaded((function(){n.outOfStockText=salla.lang.get("pages.products.out_of_stock");n.donationAmount=salla.lang.get("pages.products.donation_amount");n.selectDonationAmount=salla.lang.getWithDefault("pages.products.select_donation_amount","تحديد مبلغ التبرع");n.selectAmount=salla.lang.getWithDefault("pages.products.select_amount","اختر المبلغ")}));if(this.options){try{this.setOptionsData(Array.isArray(this.options)?this.options:JSON.parse(this.options));return}catch(t){salla.log("Bad json passed via options prop")}}if(!Array.isArray(this.optionsData)){salla.log("Options is not an array[] ---\x3e ",this.optionsData);this.setOptionsData([])}if(this.productId&&!salla.url.is_page("cart")){salla.api.product.getDetails(this.productId,["options"]).then((function(t){return n.setOptionsData(t.data.options)}))}}t.prototype.setOptionsData=function(t){var n,e;this.optionsData=t;var i=this;(e=(n=this.optionsData[0])===null||n===void 0?void 0:n.details)===null||e===void 0?void 0:e.forEach((function(t){Object.entries(t.skus_availability||{}).filter((function(t){return!t[1]})).map((function(t){return i.outSkus.push(Number(t[0]))}))}))};t.prototype.getSelectedOptionsData=function(){return __awaiter(this,void 0,void 0,(function(){var t,n;return __generator(this,(function(e){t={};n=this.host.getElementSallaData();n.forEach((function(n,e){e.startsWith("options[")&&(t[e.replace("options[","").replace("]","")]=n)}));return[2,t]}))}))};t.prototype.reportValidity=function(){return __awaiter(this,void 0,void 0,(function(){var t,n,e;return __generator(this,(function(i){t=this.host.querySelectorAll("[required]");n=true;for(e=0;e<t.length;e++){if("reportValidity"in t[e]&&!t[e].reportValidity()){n=false}}return[2,n]}))}))};t.prototype.hasOutOfStockOption=function(){return __awaiter(this,void 0,void 0,(function(){var t,n;var e=this;return __generator(this,(function(i){return[2,this.selectedOptions.some((function(t){return t.is_out}))||((t=this.selectedSkus)===null||t===void 0?void 0:t.length)&&((n=this.selectedSkus)===null||n===void 0?void 0:n.every((function(t){return e.outSkus.includes(t)})))]}))}))};t.prototype.getSelectedOptions=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.selectedOptions]}))}))};t.prototype.getOption=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){return[2,this.optionsData.find((function(n){return n.id===t}))]}))}))};t.prototype.invalidHandler=function(t,n){var e=t.target.closest(".s-product-options-option");if(!salla.url.is_page("cart")){e.scrollIntoView({behavior:"smooth",block:"center"})}e.classList.add("s-product-options-option-error")};t.prototype.changedHandler=function(t,n){var e={event:t,option:n,detail:null};if(n.details){var i=n.details.find((function(n){return Number(n.id)===Number(t.target.value)}));e.detail=i}var o=t.target.closest(".s-product-options-option");if(t.target.value||(n.type==DisplayType.FILE||n.type==DisplayType.IMAGE)&&t.type==="added"||n.type==DisplayType.MAP&&t.type==="selected"&&(t.target.lat&&t.target.lng)){setTimeout((function(){o.classList.remove("s-product-options-option-error")}),200)}var a=this.selectedOptions.findIndex((function(t){return t.option_id===e.option.id}));a>-1?this.selectedOptions[a]=Object.assign(Object.assign({},e.detail),{option_id:e.option.id}):this.selectedOptions.push(Object.assign(Object.assign({},e.detail),{option_id:e.option.id}));this.setSelectedSkus();this.handleRequiredMultipleOptions(n);this.changed.emit(e);salla.event.emit("product-options::change",e)};t.prototype.setSelectedSkus=function(){this.selectedSkus=this.selectedOptions.map((function(t){return Object.keys(t.skus_availability||{})})).reduce((function(t,n){return t.filter((function(t){return n.includes(t)}))})).map((function(t){return Number(t)}))};t.prototype.handleRequiredMultipleOptions=function(t){if(t.type!==DisplayType.MULTIPLE_OPTIONS||!t.required){return}var n=this.host.querySelector('[data-option-id="'.concat(t.id,'"]'));var e=n.querySelectorAll("input:checked").length;n.querySelectorAll("input").forEach((function(t){return t.toggleAttribute("required",!e)}))};t.prototype.getLatLng=function(t,n){return t?t.split(",")[n=="lat"?0:1]:""};t.prototype.getDisplayForType=function(t){if(this["".concat(t.type,"Option")]){return this["".concat(t.type,"Option")](t)}if(t.type===DisplayType.COLOR_PICKER){return this.colorPickerOption(t)}if(t.type===DisplayType.MULTIPLE_OPTIONS){return this.multipleOptions(t)}if(t.type===DisplayType.SINGLE_OPTION){return this.singleOption(t)}salla.log("Couldn't find options type(".concat(t.type,")😢"));return""};t.prototype.getOptionShownWhen=function(t){return t.visibility_condition?{"data-show-when":"options[".concat(t.visibility_condition.option,"] ").concat(t.visibility_condition.operator," ").concat(t.visibility_condition.value)}:{}};t.prototype.componentWillLoad=function(){this.outOfStockText=salla.lang.get("pages.products.out_of_stock");return salla.api.cart.getCurrentCartId()};t.prototype.render=function(){var t=this;var n;if(((n=this.optionsData)===null||n===void 0?void 0:n.length)==0){return}return h(Host,{class:"s-product-options-wrapper"},h("salla-conditional-fields",null,this.optionsData.map((function(n){return h("div",Object.assign({class:"s-product-options-option-container".concat(n.visibility_condition?" hidden":""),"data-option-id":n.id},t.getOptionShownWhen(n)),n.name=="splitter"?t.splitterOption():h("div",{class:"s-product-options-option","data-option-type":n.type,"data-option-required":"".concat(n.required)},h("label",{htmlFor:"options["+n.id+"]",class:"s-product-options-option-label"},h("b",null,n.name,n.required&&h("span",null," * ")," "),h("small",null,n.placeholder)),h("div",{class:"s-product-options-option-content"},t.getDisplayForType(n))))}))))};t.prototype.donationOption=function(t,n){var e=this;var i,o;return h("div",{class:"s-product-options-donation-wrapper"},t.donation?h("div",{class:"s-product-options-donation-progress"},h("salla-progress-bar",{donation:t.donation})):"",((i=t.donation)===null||i===void 0?void 0:i.can_donate)?[t.details.length?[h("h4",null,this.selectAmount),h("div",{class:"s-product-options-donation-options"},t.details.map((function(t,n){return h("div",{class:"s-product-options-donation-options-item"},h("input",{id:"donation-option-".concat(n),type:"radio",name:"donating_option",checked:t.is_selected,value:t.additional_price,onChange:function(t){return e.handleDonationOptions(t)}}),h("label",{htmlFor:"donation-option-".concat(n)},h("span",null,salla.money(t.name))))})),((o=t.donation)===null||o===void 0?void 0:o.custom_amount_enabled)?h("div",{class:"s-product-options-donation-options-item"},h("input",{id:"donation-option-custom",type:"radio",name:"donating_option",value:"custom",onChange:function(t){return e.handleDonationOptions(t)}}),h("label",{htmlFor:"donation-option-custom"},h("span",null," ",this.selectDonationAmount," "))):"")]:"",h("div",{class:{"s-product-options-donation-input-group":true,shown:!t.details.length||t.details.length&&this.isCustomDonation}},h("input",{type:"text",id:"donating-amount",name:"donation_amount",class:"s-form-control",ref:function(t){return e.donationInput=t},value:t.details.length&&t.details.some((function(t){return t.is_selected}))?t.details.find((function(t){return t.is_selected})).additional_price:t.value,placeholder:t.placeholder,onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)},onBlur:function(n){return e.changedHandler(n,t)},onInvalid:function(n){return e.invalidHandler(n,t)}}),h("span",{class:"s-product-options-donation-amount-currency"},salla.config.currency(salla.config.get("user.currency_code")).symbol))]:"")};t.prototype.fileUploader=function(t,n){var e=this;if(n===void 0){n=null}return h("salla-file-upload",Object.assign({},n||{},{"payload-name":"file",value:t.value,"instant-upload":true,name:"options[".concat(t.id,"]"),required:t.required,height:"120px",onAdded:function(n){return e.changedHandler(n,t)},url:salla.cart.api.getUploadImageEndpoint(),"form-data":{cart_item_id:this.productId,product_id:this.productId},onInvalidInput:function(n){return e.invalidHandler(n,t)},class:{"s-product-options-image-input":true,required:t.required}}),h("div",{class:"s-product-options-filepond-placeholder"},h("span",{class:"s-product-options-filepond-placeholder-icon",innerHTML:n.accept&&n.accept.split(",").every((function(t){return t.includes("image")}))?CameraIcon:FileIcon}),h("p",{class:"s-product-options-filepond-placeholder-text"},salla.lang.get("common.uploader.drag_and_drop")),h("span",{class:"filepond--label-action"},salla.lang.get("common.uploader.browse"))))};t.prototype.imageOption=function(t){return this.fileUploader(t,{accept:"image/png,image/jpeg,image/jpg,image/gif"})};t.prototype.fileOption=function(t){var n=this;var e=t.details.map((function(t){return n.fileTypes[t.name]})).filter(Boolean);return(e===null||e===void 0?void 0:e.length)?this.fileUploader(t,{accept:e.join(",")}):"File types not selected."};t.prototype.numberOption=function(t){var n=this;return h("input",{type:"text",value:t.value,class:"s-form-control",required:t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onBlur:function(e){return n.changedHandler(e,t)},onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)}})};t.prototype.splitterOption=function(){return h("div",{class:"s-product-options-splitter"})};t.prototype.textOption=function(t){var n=this;return h("div",{class:"s-product-options-text"},h("input",{type:"text",value:t.value,class:"s-form-control",required:t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(e){return n.changedHandler(e,t)}}))};t.prototype.textareaOption=function(t){var n=this;return h("div",{class:"s-product-options-textarea"},h("div",{class:"mt-1"},h("textarea",{rows:4,value:t.value,class:"s-form-control",required:t.required,id:"options[".concat(t.id,"]"),name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(e){return n.changedHandler(e,t)}})))};t.prototype.mapOption=function(t){var n=this;return h("salla-map",{zoom:15,lat:this.getLatLng(t.value,"lat"),lng:this.getLatLng(t.value,"lng"),name:"options[".concat(t.id,"]"),searchable:true,required:t.required,onInvalidInput:function(e){return n.invalidHandler(e,t)},onSelected:function(e){return n.changedHandler(e,t)}})};t.prototype.colorPickerOption=function(t){var n=this;return h("salla-color-picker",{onSubmitted:function(e){return n.changedHandler(e,t)},name:"options[".concat(t.id,"]"),required:t.required,onInvalidInput:function(e){return n.invalidHandler(e,t)},color:t.value})};t.prototype.timeOption=function(t){var n=this;return h("salla-datetime-picker",{noCalendar:true,enableTime:true,dateFormat:"h:i K",value:t.value,placeholder:t.name,required:t.required,name:"options[".concat(t.id,"]"),class:"s-product-options-time-element",onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}})};t.prototype.dateOption=function(t){var n=this;return h("div",{class:"s-product-options-date-element"},h("salla-datetime-picker",{value:t.value,placeholder:t.name,required:t.required,minDate:new Date,name:"options[".concat(t.id,"]"),onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}}))};t.prototype.datetimeOption=function(t){var n=this;return h("div",{class:"s-product-options-datetime-element"},h("salla-datetime-picker",{enableTime:true,value:t.value,dateFormat:"Y-m-d G:i:K",placeholder:t.name,required:t.required,name:"options[".concat(t.id,"]"),maxDate:t.to_date_time,minDate:t.from_date_time,onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}}))};t.prototype.getOptionDetailName=function(t,n,e){if(n===void 0){n=true}if(e&&e==DisplayType.COLOR){return t.name+(n&&this.isOptionDetailOut(t)?" <br/> <p> ".concat(this.outOfStockText," </p>"):"")+(t.additional_price?" <p> (".concat(salla.money(t.additional_price),") </p>"):"")}return t.name+(n&&this.isOptionDetailOut(t)?" - ".concat(this.outOfStockText):"")+(t.additional_price?" (".concat(salla.money(t.additional_price),")"):"")};t.prototype.isOptionDetailOut=function(t){var n=this;var e;if(t.is_out||!t.skus_availability||!((e=this.selectedSkus)===null||e===void 0?void 0:e.length)){return t.is_out}var i=this.selectedOptions.filter((function(n){return n.id==t.id})).length;if(i&&this.selectedOptions.length==1){return false}if(i){var o=this.selectedSkus.filter((function(t){return n.outSkus.includes(t)}));return Object.keys(t.skus_availability).some((function(t){return o.includes(Number(t))}))}return this.selectedOptions.some((function(n){return n.is_out&&n.option_id!==t.option_id}))};t.prototype.singleOption=function(t){var n=this;return h("div",null,h("select",{name:"options[".concat(t.id,"]"),required:t.required,class:"s-form-control",onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}},h("option",{value:""},t.placeholder),t===null||t===void 0?void 0:t.details.map((function(t){return h("option",{value:t.id,disabled:n.canDisabled&&n.isOptionDetailOut(t),selected:t.is_selected},n.getOptionDetailName(t))}))))};t.prototype.multipleOptions=function(t){var n=this;var e=t.required&&!t.details.some((function(t){return t.is_selected}));return h("div",{class:{"s-product-options-multiple-options-wrapper":true,required:t.required}},t===null||t===void 0?void 0:t.details.map((function(i){return h("div",null,h("input",{type:"checkbox",value:i.id,disabled:n.isOptionDetailOut(i),checked:i.is_selected,required:e,name:"options[".concat(t.id,"][]"),id:"field-".concat(t.id,"-").concat(i.id),onChange:function(e){return n.changedHandler(e,t)},onInvalid:function(e){return n.invalidHandler(e,t)},"aria-describedby":"options[".concat(t.id,"]-description")}),h("label",{htmlFor:"field-".concat(t.id,"-").concat(i.id)},n.getOptionDetailName(i)))})))};t.prototype.colorOption=function(t){var n=this;return h("fieldset",{class:"s-product-options-colors-wrapper"},t===null||t===void 0?void 0:t.details.map((function(e){return h("div",{class:"s-product-options-colors-item"},h("input",{type:"radio",value:e.id,required:t.required,checked:e.is_selected,name:"options[".concat(t.id,"]"),disabled:n.canDisabled&&n.isOptionDetailOut(e),id:"color-".concat(n.productId,"-").concat(t.id,"-").concat(e.id),onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}}),h("label",{htmlFor:"color-".concat(n.productId,"-").concat(t.id,"-").concat(e.id)},h("span",{style:{"background-color":e.color}}),h("div",{innerHTML:n.getOptionDetailName(e,true,t.type)})))})))};t.prototype.thumbnailOption=function(t){var n=this;return h("div",{class:"s-product-options-thumbnails-wrapper"},t.details.map((function(e){return h("div",null,h("input",{type:"radio",value:e.id,"data-itemid":e.id,required:t.required,checked:e.is_selected,name:"options[".concat(t.id,"]"),"data-img-id":e.option_value,disabled:n.canDisabled&&n.isOptionDetailOut(e),id:"option_".concat(n.productId,"-").concat(t.id,"_").concat(e.id),onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}}),h("label",{htmlFor:"option_".concat(n.productId,"-").concat(t.id,"_").concat(e.id),"data-img-id":e.option_value,class:"go-to-slide"},h("img",{"data-src":e.image,src:e.image,title:e.name,alt:e.name}),h("span",{innerHTML:CheckCircleIcon,class:"s-product-options-thumbnails-icon"}),n.isOptionDetailOut(e)?[h("small",{class:"s-product-options-thumbnails-stock-badge"},n.outOfStockText),n.canDisabled?h("div",{class:"s-product-options-thumbnails-badge-overlay"}):""]:""),h("p",null,n.getOptionDetailName(e,false)," "))})))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaProductOptions.style=sallaProductOptionsCss;export{SallaProductOptions as salla_product_options};
 //# sourceMappingURL=salla-product-options.entry.js.map

package/dist/esm-es5/salla-product-options.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["DisplayType","Currency","sallaProductOptionsCss","SallaProductOptions","class_1","hostRef","_this","this","fileTypes","pdf","png","jpg","word","exl","txt","outSkus","salla","lang","get","config","canDisabled","onLoaded","outOfStockText","donationAmount","options","setOptionsData","Array","isArray","JSON","parse","e","log","optionsData","productId","url","is_page","api","product","getDetails","then","resp","data","prototype","that","_b","_a","details","forEach","detail","Object","entries","skus_availability","filter","sku","map","push","Number","getSelectedOptionsData","selectedOptions","formData","host","getElementSallaData","value","key","startsWith","replace","reportValidity","requiredElements","querySelectorAll","pass","i","length","hasOutOfStockOption","some","option","is_out","selectedSkus","every","includes","getSelectedOptions","getOption","option_id","find","id","invalidHandler","event","closestProductOption","target","closest","scrollIntoView","behavior","block","classList","add","changedHandler","optionElement","type","FILE","IMAGE","MAP","lat","lng","setTimeout","remove","index","findIndex","assign","setSelectedSkus","handleRequiredMultipleOptions","changed","emit","keys","reduce","p","c","MULTIPLE_OPTIONS","required","optionContainer","querySelector","concat","hasChecked","input","toggleAttribute","getLatLng","split","getDisplayForType","COLOR_PICKER","colorPickerOption","multipleOptions","SINGLE_OPTION","singleOption","getOptionShownWhen","visibility_condition","operator","componentWillLoad","cart","getCurrentCartId","render","h","Host","class","name","splitterOption","htmlFor","placeholder","donationOption","donation","can_donate","onInput","helpers","inputDigitsOnly","onBlur","onInvalid","currency","symbol","fileUploader","additions","height","onAdded","getUploadImageEndpoint","cart_item_id","product_id","onInvalidInput","innerHTML","accept","CameraIcon","FileIcon","imageOption","fileOption","types","Boolean","join","numberOption","textOption","textareaOption","rows","mapOption","zoom","searchable","onSelected","onSubmitted","color","timeOption","noCalendar","enableTime","dateFormat","onPicked","dateOption","minDate","Date","datetimeOption","maxDate","to_date_time","from_date_time","getOptionDetailName","outOfStock","optionType","COLOR","isOptionDetailOut","additional_price","money","isDetailSelected","outSelectableSkus_1","onChange","disabled","selected","is_selected","is_required","checked","colorOption","style","thumbnailOption","option_value","image","src","title","alt","CheckCircleIcon"],"sources":["src/components/salla-product-options/interfaces.ts","src/components/salla-product-options/salla-product-options.scss?tag=salla-product-options","src/components/salla-product-options/salla-product-options.tsx"],"sourcesContent":["export enum DisplayType {\n  COLOR = \"color\",\n  DATE = \"date\",\n  DATETIME = \"datetime\",\n  DONATION = \"donation\",\n  IMAGE = \"image\",\n  MULTIPLE_OPTIONS = \"multiple-options\",\n  NUMBER = \"number\",\n  SINGLE_OPTION = \"single-option\",\n  SPLITTER = \"splitter\",\n  TEXT = \"text\",\n  TEXTAREA = \"textarea\",\n  THUMBNAIL = \"thumbnail\",\n  TIME = \"time\",\n  RADIO = \"radio\",\n  CHECKBOX = \"checkbox\",\n  MAP = \"map\",\n  FILE = \"file\", // similar to image type (file-uploader component)\n  COLOR_PICKER = \"color_picker\"\n\n}\n\nexport interface ProductDetail {\n  id: string;\n  sku: string;\n  name: string;\n  description: string;\n  url: string;\n  promotion_title: string;\n  subtitle: string;\n  type: string;\n  status: string;\n  price: number;\n  sale_price: number;\n  regular_price: number;\n  starting_price: null;\n  quantity: number;\n  max_quantity: number;\n  discount_ends: number;\n  is_taxable: boolean;\n  has_read_more: boolean;\n  can_add_note: boolean;\n  can_show_remained_quantity: boolean;\n  can_upload_file: boolean;\n  has_custom_form: boolean;\n  is_on_sale: boolean;\n  is_hidden_quantity: boolean;\n  is_available: boolean;\n  is_out_of_stock: boolean;\n  weight: null;\n  calories: null;\n  image: SimpleImage;\n  brand: Brand;\n  donation?: ProductDonation;\n  images: Image[];\n  tags: Tag[];\n  notify_availability: null;\n  rating: Rating;\n  options: Option[];\n  sold_quantity: number;\n  category: Category;\n}\n\nexport interface SimpleImage {\n  url: string;\n  alt: string;\n}\n\nexport interface Category {\n  name: string;\n  url: string;\n  icon: string;\n}\n\nexport interface ProductDonation {\n  target_message?: string;\n  collected_amount?: number;\n  target_amount?: number;\n  target_percent?: number;\n  target_end_date?: string;\n  can_donate: boolean;\n}\n\nexport interface Image {\n  id: number;\n  url: string;\n  main: boolean;\n  three_d_image_url: string;\n  alt: string;\n  video_url: string;\n  type: string;\n  sort: number;\n}\n\nexport interface Option {\n  id: number;\n  name: string;\n  required: boolean;\n  type: string;\n  placeholder: string;\n  option_type: string;\n  not_same_day_order: boolean;\n  availability_range: number;\n  from_date_time: null;\n  to_date_time: null;\n  visibility_condition?: { option: number, operator: \"=\" | \"!=\", value: number };\n  details?: Detail[];\n  condition_attributes: string;\n  value?: any;\n  donation?: Donation\n}\n\nexport interface Donation {\n  target_message?: string;\n  target_date: string | \"2023-04-18\";\n  target_end_date: string | \"2023-04-18\";\n  target_amount: number;\n  collected_amount: number;\n  can_donate: boolean;\n}\n\nexport interface Detail {\n  id: number;\n  option_id: number;\n  name: string;\n  additional_price: number;\n  option_value: null | string;\n  image: null | string;\n  color: null | string;\n  is_out: boolean;\n  skus_availability?: { [sku_id: number]: boolean };\n  is_selected: boolean;\n}\n\nexport interface Brand {\n  id: string;\n  url: string;\n  name: string;\n  logo: string;\n}\n\nexport interface PreTaxPrice {\n  amount: number;\n  currency: Currency;\n}\n\nexport enum Currency {\n  Sar = \"SAR\",\n}\n\nexport interface Promotion {\n  title: string;\n  sub_title: string;\n}\n\nexport interface Rating {\n  count: number;\n  stars: number;\n}\n\nexport interface Tag {\n  name: string;\n  url: string;\n}\n","\n.s-product-options{\n  &-wrapper{\n\n  }\n  &-option-container{\n\n  }\n  &-option{\n\n  }\n  &-option-label{\n\n  }\n  &-option-content{\n\n  }\n  &-colors-wrapper{\n\n  }\n  &-date-element{\n\n  }\n  &-time-element{\n    \n  }\n  &-datetime-element{\n\n  }\n  &-image-input{\n\n  }\n  &-multiple-options-wrapper{\n\n  }\n  &-splitter{\n\n  }\n  &-text{\n\n  }\n  &-textarea{\n\n  }\n  &-thumbnails-wrapper{\n\n  }\n}","import {Component, Prop, h, State, Element, Host, Event, EventEmitter, Method} from '@stencil/core';\nimport {Option, DisplayType, Detail} from './interfaces';\nimport CheckCircleIcon from '../../assets/svg/check.svg';\nimport CameraIcon from '../../assets/svg/camera.svg';\nimport FileIcon from '../../assets/svg/file-upload.svg';\n\n\n@Component({\n  tag: 'salla-product-options',\n  styleUrl: 'salla-product-options.scss',\n})\nexport class SallaProductOptions {\n\n  constructor() {\n    this.canDisabled = !salla.config.get('store.settings.products.notify_options_availability');\n    salla.lang.onLoaded(() => {\n      this.outOfStockText = salla.lang.get(\"pages.products.out_of_stock\");\n      this.donationAmount = salla.lang.get('pages.products.donation_amount');\n    });\n\n    if (this.options) {\n      try {\n        this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));\n        return;\n      } catch (e) {\n        salla.log('Bad json passed via options prop');\n      }\n    }\n    if (!Array.isArray(this.optionsData)) {\n      salla.log('Options is not an array[] ---> ', this.optionsData);\n      this.setOptionsData([]);\n    }\n\n    if (this.productId && !salla.url.is_page('cart')) {\n      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));\n    }\n  }\n\n  private setOptionsData(optionsData: Option[]) {\n    this.optionsData = optionsData;\n    let that = this\n    this.optionsData[0]?.details?.forEach(function (detail) {\n      Object.entries(detail.skus_availability || {})\n        .filter(sku => !sku[1])\n        .map(sku => that.outSkus.push(Number(sku[0])));\n    });\n  }\n\n\n  @Element() host: HTMLElement;\n\n  private fileTypes: Object = {\n    pdf: 'application/pdf',\n    png: 'image/png',\n    jpg: 'image/jpeg',\n    word: 'application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    txt: 'text/plain',\n  };\n\n  @State() optionsData: Option[];\n  @State() outOfStockText: string = ''\n  @State() donationAmount: string = salla.lang.get('pages.products.donation_amount')\n  @State() selectedOptions: Array<any> = [];\n  @State() canDisabled: boolean;\n  @State() selectedSkus?: Array<string | number>;\n  @State() selectedOutSkus?: Array<string | number>;\n  private outSkus: Array<string | number> = [];\n\n\n  /**\n   * The id of the product to which the options are going to be fetched for.\n   */\n  @Prop() productId: number = salla.config.get('page.id');\n\n  /**\n   * Product detail information.\n   */\n  @Prop() options: string;\n\n  /**\n   * Get the id's of the selected options.\n   * */\n  @Method()\n  async getSelectedOptionsData() {\n    let selectedOptions = {}\n    let formData = (this.host as any).getElementSallaData();\n    formData.forEach(function (value, key) {\n      key.startsWith('options[') && (selectedOptions[key.replace('options[', '').replace(']', '')] = value);\n    });\n    return selectedOptions;\n  }\n\n  /**\n   * Report options form validity.\n   * */\n  @Method()\n  async reportValidity() {\n    let requiredElements: Array<HTMLInputElement> = this.host.querySelectorAll('[required]') as any;\n    let pass = true;\n    for (let i = 0; i < requiredElements.length; i++) {\n      //if there is only one invalid option, return false\n      if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {\n        pass = false;\n      }\n    }\n    return pass;\n  }\n\n  /**\n   * Return true if there is any out of stock options are selected and vise versa.\n   * */\n  @Method()\n  async hasOutOfStockOption() {\n    return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus?.length && this.selectedSkus?.every(sku => this.outSkus.includes(sku)));\n  }\n\n  /**\n   * Get selected options.\n   * */\n  @Method()\n  async getSelectedOptions() {\n    return this.selectedOptions;\n  }\n\n  /**\n   * Get a specific option by its id.\n   * */\n  @Method()\n  async getOption(option_id) {\n    return this.optionsData.find(option => option.id === option_id);\n  }\n\n  /**\n   * An event that emitted when any option is changed.\n   */\n  @Event() changed: EventEmitter;\n\n  // @ts-ignore\n  private invalidHandler(event, option: Option) {\n    const closestProductOption = (event.target as HTMLInputElement).closest('.s-product-options-option') as HTMLElement;\n    if (!salla.url.is_page('cart')) {\n      closestProductOption.scrollIntoView({behavior: 'smooth', block: 'center'});\n    }\n    closestProductOption.classList.add('s-product-options-option-error');\n  }\n\n  private changedHandler(event, option) {\n    let data = {event: event, option: option, detail: null};\n    if (option.details) {\n      let detail = option.details.find((detail) => {\n        return Number(detail.id) === Number(event.target.value);\n      });\n      data.detail = detail\n    }\n\n    let optionElement = event.target.closest('.s-product-options-option');\n    if (event.target.value\n      || ((option.type == DisplayType.FILE || option.type == DisplayType.IMAGE) && event.type === 'added')\n      || (option.type == DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {\n      setTimeout(() => {\n        optionElement.classList.remove('s-product-options-option-error');\n      }, 200);\n    }\n\n    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);\n    index > -1 ? this.selectedOptions[index] = {\n      ...data.detail,\n      option_id: data.option.id\n    } : this.selectedOptions.push({...data.detail, option_id: data.option.id})\n\n    this.setSelectedSkus();\n    this.handleRequiredMultipleOptions(option);\n    this.changed.emit(data);\n    salla.event.emit('product-options::change', data);\n  }\n\n  /**\n   * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;\n   */\n  private setSelectedSkus() {\n    this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))\n      .reduce((p, c) => p.filter(e => c.includes(e)))\n      .map(sku => Number(sku));\n  }\n\n  private handleRequiredMultipleOptions(option) {\n    if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {\n      return;\n    }\n    const optionContainer = this.host.querySelector(`[data-option-id=\"${option.id}\"]`);\n    const hasChecked = optionContainer.querySelectorAll('input:checked').length;\n    optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));\n  }\n\n  private getLatLng(value, type: 'lat' | 'lng') {\n    return value\n      ? value.split(',')[type == 'lat' ? 0 : 1]\n      : '';\n  }\n\n  private getDisplayForType(option: Option) {\n    if (this[`${option.type}Option`]) {\n      return this[`${option.type}Option`](option);\n    }\n\n    if (option.type === DisplayType.COLOR_PICKER) {\n      return this.colorPickerOption(option)\n    }\n\n    if (option.type === DisplayType.MULTIPLE_OPTIONS) {\n      return this.multipleOptions(option);\n    }\n\n    if (option.type === DisplayType.SINGLE_OPTION) {\n      return this.singleOption(option);\n    }\n    salla.log(`Couldn't find options type(${option.type})😢`);\n    return '';\n  }\n\n  protected getOptionShownWhen(option: Option) {\n    return option.visibility_condition\n      ? {\"data-show-when\": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}`}\n      : {};\n  }\n\n  //we need the cart Id for productOption Image\n  componentWillLoad() {\n    this.outOfStockText = salla.lang.get('pages.products.out_of_stock')\n    return salla.api.cart.getCurrentCartId();\n  }\n\n  render() {\n    if (this.optionsData?.length == 0) {\n      return;\n    }\n\n    return (\n      <Host class=\"s-product-options-wrapper\">\n        {/* TODO:: move salla-conditional-field logic to here, no need of another component*/}\n        <salla-conditional-fields>\n          {this.optionsData.map((option: Option) =>\n            <div class={`s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`}\n                 data-option-id={option.id}\n                 {...this.getOptionShownWhen(option)}>\n              {option.name == 'splitter' ?\n                this.splitterOption()\n                : <div class=\"s-product-options-option\" data-option-type={option.type}\n                       data-option-required={`${option.required}`}>\n                  <label htmlFor={'options[' + option.id + ']'} class=\"s-product-options-option-label\">\n                    <b>\n                      {option.name}\n                      {option.required && <span> * </span>} </b>\n                    <small>{option.placeholder}</small>\n                  </label>\n                  <div class=\"s-product-options-option-content\">\n                    {this.getDisplayForType(option)}\n                  </div>\n                </div>}\n            </div>\n          )}\n        </salla-conditional-fields>\n      </Host>\n    );\n\n  }\n\n  //@ts-ignore\n  private donationOption(option: Option, product: Product) {\n    return <div class=\"s-product-options-donation-wrapper\">\n      {\n        option.donation ?\n          <div class=\"s-product-options-donation-progress\">\n            <salla-progress-bar donation={option.donation}>\n            </salla-progress-bar>\n          </div>\n          : ''\n      }\n      {option.donation?.can_donate ? <div class=\"s-product-options-donation-input-group\">\n        <input\n          type=\"text\"\n          id=\"donating-amount\"\n          name=\"donating_amount\"\n          class=\"s-form-control\"\n          value={option.value}\n          required\n          placeholder={option.placeholder}\n          onInput={e => salla.helpers.inputDigitsOnly(e.target)}\n          onBlur={e => this.changedHandler(e, option)}\n          onInvalid={(e) => this.invalidHandler(e, option)}\n        />\n        {/* value={option.value} */}\n        <span class=\"s-product-options-donation-amount-currency\">\n          {salla.config.currency(salla.config.get('user.currency_code')).symbol}\n        </span>\n      </div> : ''}\n    </div>\n  }\n\n  private fileUploader(option: Option, additions: Object | null = null) {\n    return <salla-file-upload\n      {...(additions || {})}\n      payload-name=\"file\"\n      value={option.value}\n      instant-upload={true}\n      name={`options[${option.id}]`}\n      required={option.required}\n      height=\"120px\"\n      onAdded={(e) => this.changedHandler(e, option)}\n      url={salla.cart.api.getUploadImageEndpoint()}\n      form-data={{cart_item_id: this.productId, product_id: this.productId}}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      class={{\"s-product-options-image-input\": true, required: option.required}}\n    >\n      <div class=\"s-product-options-filepond-placeholder\">\n        <span class=\"s-product-options-filepond-placeholder-icon\"\n              innerHTML={(additions as any).accept && (additions as any).accept.split(',').every(type => type.includes('image'))\n                ? CameraIcon\n                : FileIcon}\n        />\n        <p class=\"s-product-options-filepond-placeholder-text\">{salla.lang.get('common.uploader.drag_and_drop')}</p>\n        <span class=\"filepond--label-action\">{salla.lang.get('common.uploader.browse')}</span>\n      </div>\n    </salla-file-upload>\n  }\n\n  //@ts-ignore\n  private imageOption(option: Option) {\n    return this.fileUploader(option, {accept: 'image/png,image/jpeg,image/jpg,image/gif'});\n  }\n\n  //@ts-ignore\n  private fileOption(option: Option) {\n    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);\n    return types?.length\n      ? this.fileUploader(option, {accept: types.join(',')})\n      : 'File types not selected.';\n  }\n\n  // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption\n  //@ts-ignore\n  private numberOption(option: Option) {\n    return <input\n      type=\"text\"\n      value={option.value}\n      class=\"s-form-control\"\n      required={option.required}\n      name={`options[${option.id}]`}\n      placeholder={option.placeholder}\n      onBlur={e => this.changedHandler(e, option)}\n      onInvalid={(e) => this.invalidHandler(e, option)}\n      onInput={e => salla.helpers.inputDigitsOnly(e.target)}/>\n  }\n\n  //@ts-ignore\n  private splitterOption() {\n    return <div class=\"s-product-options-splitter\"/>\n  }\n\n  //@ts-ignore\n  private textOption(option: Option) {\n    return <div class=\"s-product-options-text\">\n      <input\n        type=\"text\"\n        value={option.value}\n        class='s-form-control'\n        required={option.required}\n        name={`options[${option.id}]`}\n        placeholder={option.placeholder}\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onInput={e => this.changedHandler(e, option)}/>\n    </div>\n  }\n\n  //@ts-ignore\n  private textareaOption(option: Option) {\n    //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great\n    return <div class=\"s-product-options-textarea\">\n      <div class=\"mt-1\">\n        <textarea\n          rows={4}\n          value={option.value}\n          class=\"s-form-control\"\n          required={option.required}\n          id={`options[${option.id}]`}\n          name={`options[${option.id}]`}\n          placeholder={option.placeholder}\n          onInvalid={(e) => this.invalidHandler(e, option)}\n          onInput={(e) => this.changedHandler(e, option)}/>\n      </div>\n    </div>\n  }\n\n  //@ts-ignore\n  private mapOption(option: Option) {\n    return <salla-map\n      zoom={15}\n      lat={this.getLatLng(option.value, 'lat')}\n      lng={this.getLatLng(option.value, 'lng')}\n      name={`options[${option.id}]`}\n      searchable={true}\n      required={option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onSelected={e => this.changedHandler(e, option)}/>\n  }\n\n  private colorPickerOption(option: Option) {\n    return <salla-color-picker\n      onSubmitted={e => this.changedHandler(e, option)}\n      name={`options[${option.id}]`}\n      required={option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      color={option.value}/>\n  }\n\n  /**\n   * ============= Date Time options =============\n   */\n  //@ts-ignore\n  private timeOption(option: Option) {\n    return <salla-datetime-picker\n      noCalendar={true}\n      enableTime={true}\n      dateFormat=\"h:i K\"\n      value={option.value}\n      placeholder={option.name}\n      required={option.required}\n      name={`options[${option.id}]`}\n      class=\"s-product-options-time-element\"\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onPicked={e => this.changedHandler(e, option)}/>\n  }\n\n  //@ts-ignore\n  private dateOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-date-element\">\n      <salla-datetime-picker\n        value={option.value}\n        placeholder={option.name}\n        required={option.required}\n        minDate={new Date()}\n        name={`options[${option.id}]`}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)}/>\n    </div>\n  }\n\n  //@ts-ignore\n  private datetimeOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-datetime-element\">\n      <salla-datetime-picker\n        enableTime={true}\n        value={option.value}\n        dateFormat=\"Y-m-d G:i:K\"\n        placeholder={option.name}\n        required={option.required}\n        name={`options[${option.id}]`}\n        maxDate={option.to_date_time}\n        minDate={option.from_date_time}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)}/>\n    </div>\n  }\n\n  /**\n   * ============= Advanced options =============\n   */\n  protected getOptionDetailName(detail: Detail, outOfStock: boolean = true, optionType?: string) {\n    if (optionType && optionType == DisplayType.COLOR) {\n      return detail.name\n        + ((outOfStock && this.isOptionDetailOut(detail)) ? ` <br/> <p> ${this.outOfStockText} </p>` : '')\n        + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price)}) </p>` : '');\n    }\n\n    return detail.name\n      + ((outOfStock && this.isOptionDetailOut(detail)) ? ` - ${this.outOfStockText}` : '')\n      + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');\n  }\n\n\n  protected isOptionDetailOut(detail: Detail) {\n    if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {\n      return detail.is_out;\n    }\n\n    let isDetailSelected = this.selectedOptions.filter(option => option.id == detail.id).length;\n    //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet\n    if (isDetailSelected && this.selectedOptions.length == 1) {\n      return false;\n    }\n\n    //if current details has sku in the possible outSkus it's out for sure\n    if (isDetailSelected) {\n      //here we will get the possible outSkus for current selected options\n      let outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));\n      return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)))\n    }\n\n    return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id)\n\n  }\n\n  private singleOption(option: Option) {\n    return <div>\n      <select name={`options[${option.id}]`}\n              required={option.required}\n              class=\"s-form-control\"\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              onChange={e => this.changedHandler(e, option)}>\n        <option value=\"\">{option.placeholder}</option>\n        {\n          option?.details.map((detail: Detail) => {\n            return <option value={detail.id} disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n                           selected={detail.is_selected}>\n              {this.getOptionDetailName(detail)}\n            </option>\n          })\n        }\n      </select>\n    </div>\n  }\n\n  private multipleOptions(option: Option) {\n    let is_required = option.required && !option.details.some(detail => detail.is_selected);\n    return <div class={{\"s-product-options-multiple-options-wrapper\": true, 'required': option.required}}>\n      {\n        option?.details.map((detail: Detail) => {\n          return <div>\n            <input type=\"checkbox\"\n                   value={detail.id}\n                   disabled={this.isOptionDetailOut(detail)}\n                   checked={detail.is_selected}\n                   required={is_required}\n                   name={`options[${option.id}][]`}\n                   id={`field-${option.id}-${detail.id}`}\n                   onChange={(e) => this.changedHandler(e, option)}\n                   onInvalid={(e) => this.invalidHandler(e, option)}\n                   aria-describedby={`options[${option.id}]-description`}/>\n            <label htmlFor={`field-${option.id}-${detail.id}`}>{this.getOptionDetailName(detail)}</label>\n          </div>\n        })\n      }\n    </div>\n  }\n\n  //@ts-ignore\n  private colorOption(option: Option) {\n    return <fieldset class=\"s-product-options-colors-wrapper\">\n      {\n        option?.details.map((detail) =>\n          <div class=\"s-product-options-colors-item\">\n            <input type=\"radio\"\n                   value={detail.id}\n                   required={option.required}\n                   checked={detail.is_selected}\n                   name={`options[${option.id}]`}\n                   disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n                   id={`color-${this.productId}-${option.id}-${detail.id}`}\n                   onInvalid={(e) => this.invalidHandler(e, option)}\n                   onChange={e => this.changedHandler(e, option)}/>\n            <label htmlFor={`color-${this.productId}-${option.id}-${detail.id}`}>\n              <span style={{\"background-color\": detail.color}}/>\n              <div innerHTML={this.getOptionDetailName(detail, true, option.type)}></div>\n            </label>\n          </div>\n        )\n      }\n    </fieldset>\n  }\n\n  //@ts-ignore\n  private thumbnailOption(option: Option) {\n    return <div class=\"s-product-options-thumbnails-wrapper\">\n      {option.details.map((detail: Detail) => {\n        return <div>\n          <input type=\"radio\"\n                 value={detail.id}\n                 data-itemid={detail.id} //todo:: why need this? it's already in the value!\n                 required={option.required}\n                 checked={detail.is_selected}\n                 name={`options[${option.id}]`}\n                 data-img-id={detail.option_value}\n                 disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n                 id={`option_${this.productId}-${option.id}_${detail.id}`}\n                 onInvalid={(e) => this.invalidHandler(e, option)}\n                 onChange={(e) => this.changedHandler(e, option)}/>\n          <label htmlFor={`option_${this.productId}-${option.id}_${detail.id}`}\n                 data-img-id={detail.option_value}\n                 class=\"go-to-slide\">\n            <img data-src={detail.image} src={detail.image} title={detail.name} alt={detail.name}/>\n            <span innerHTML={CheckCircleIcon} class=\"s-product-options-thumbnails-icon\"/>\n            {this.isOptionDetailOut(detail) ?\n              [\n                <small class=\"s-product-options-thumbnails-stock-badge\">{this.outOfStockText}</small>,\n                this.canDisabled ? <div class=\"s-product-options-thumbnails-badge-overlay\"/> : '',\n              ]\n              : ''}\n          </label>\n          <p>{this.getOptionDetailName(detail, false)} </p>\n        </div>\n      })}\n    </div>\n  }\n}\n"],"mappings":";;;yJAAA,IAAYA,aAAZ,SAAYA,GACVA,EAAA,iBACAA,EAAA,eACAA,EAAA,uBACAA,EAAA,uBACAA,EAAA,iBACAA,EAAA,uCACAA,EAAA,mBACAA,EAAA,iCACAA,EAAA,uBACAA,EAAA,eACAA,EAAA,uBACAA,EAAA,yBACAA,EAAA,eACAA,EAAA,iBACAA,EAAA,uBACAA,EAAA,aACAA,EAAA,eACAA,EAAA,8BAED,EApBD,CAAYA,0BAAW,KAkJvB,IAAYC,UAAZ,SAAYA,GACVA,EAAA,YACD,EAFD,CAAYA,oBAAQ,K,g+CClJpB,IAAMC,uBAAyB,G,ICWlBC,oBAAmB,WAE9B,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,K,oEAsCQA,KAAAC,UAAoB,CAC1BC,IAAK,kBACLC,IAAK,YACLC,IAAK,aACLC,KAAM,gIACNC,IAAK,yJACLC,IAAK,cAUCP,KAAAQ,QAAkC,G,+CANR,G,oBACAC,MAAMC,KAAKC,IAAI,kC,qBACV,G,qGAUXF,MAAMG,OAAOD,IAAI,W,uBA3D3CX,KAAKa,aAAeJ,MAAMG,OAAOD,IAAI,uDACrCF,MAAMC,KAAKI,UAAS,WAClBf,EAAKgB,eAAiBN,MAAMC,KAAKC,IAAI,+BACrCZ,EAAKiB,eAAiBP,MAAMC,KAAKC,IAAI,iC,IAGvC,GAAIX,KAAKiB,QAAS,CAChB,IACEjB,KAAKkB,eAAeC,MAAMC,QAAQpB,KAAKiB,SAAWjB,KAAKiB,QAAUI,KAAKC,MAAMtB,KAAKiB,UACjF,M,CACA,MAAOM,GACPd,MAAMe,IAAI,mC,EAGd,IAAKL,MAAMC,QAAQpB,KAAKyB,aAAc,CACpChB,MAAMe,IAAI,qCAAmCxB,KAAKyB,aAClDzB,KAAKkB,eAAe,G,CAGtB,GAAIlB,KAAK0B,YAAcjB,MAAMkB,IAAIC,QAAQ,QAAS,CAChDnB,MAAMoB,IAAIC,QAAQC,WAAW/B,KAAK0B,UAAW,CAAC,YAAYM,MAAK,SAAAC,GAAQ,OAAAlC,EAAKmB,eAAee,EAAKC,KAAKjB,QAA9B,G,EAInEpB,EAAAsC,UAAAjB,eAAA,SAAeO,G,QACrBzB,KAAKyB,YAAcA,EACnB,IAAIW,EAAOpC,MACXqC,GAAAC,EAAAtC,KAAKyB,YAAY,MAAE,MAAAa,SAAA,SAAAA,EAAEC,WAAO,MAAAF,SAAA,SAAAA,EAAEG,SAAQ,SAAUC,GAC9CC,OAAOC,QAAQF,EAAOG,mBAAqB,IACxCC,QAAO,SAAAC,GAAO,OAACA,EAAI,EAAL,IACdC,KAAI,SAAAD,GAAO,OAAAV,EAAK5B,QAAQwC,KAAKC,OAAOH,EAAI,IAA7B,G,KAwCZjD,EAAAsC,UAAAe,uBAAN,W,6FACMC,EAAkB,GAClBC,EAAYpD,KAAKqD,KAAaC,sBAClCF,EAASZ,SAAQ,SAAUe,EAAOC,GAChCA,EAAIC,WAAW,cAAgBN,EAAgBK,EAAIE,QAAQ,WAAY,IAAIA,QAAQ,IAAK,KAAOH,E,IAEjG,SAAOJ,E,QAOHtD,EAAAsC,UAAAwB,eAAN,W,+FACMC,EAA4C5D,KAAKqD,KAAKQ,iBAAiB,cACvEC,EAAO,KACX,IAASC,EAAI,EAAGA,EAAIH,EAAiBI,OAAQD,IAAK,CAEhD,GAAI,mBAAoBH,EAAiBG,KAAOH,EAAiBG,GAAGJ,iBAAkB,CACpFG,EAAO,K,EAGX,SAAOA,E,QAOHjE,EAAAsC,UAAA8B,oBAAN,W,wGACE,SAAOjE,KAAKmD,gBAAgBe,MAAK,SAAAC,GAAU,OAAAA,EAAOC,MAAP,OAAmB9B,EAAAtC,KAAKqE,gBAAY,MAAA/B,SAAA,SAAAA,EAAE0B,WAAU3B,EAAArC,KAAKqE,gBAAY,MAAAhC,SAAA,SAAAA,EAAEiC,OAAM,SAAAxB,GAAO,OAAA/C,EAAKS,QAAQ+D,SAASzB,EAAtB,K,QAOvHjD,EAAAsC,UAAAqC,mBAAN,W,qFACE,SAAOxE,KAAKmD,gB,QAORtD,EAAAsC,UAAAsC,UAAN,SAAgBC,G,qFACd,SAAO1E,KAAKyB,YAAYkD,MAAK,SAAAR,GAAU,OAAAA,EAAOS,KAAOF,CAAd,I,QASjC7E,EAAAsC,UAAA0C,eAAA,SAAeC,EAAOX,GAC5B,IAAMY,EAAwBD,EAAME,OAA4BC,QAAQ,6BACxE,IAAKxE,MAAMkB,IAAIC,QAAQ,QAAS,CAC9BmD,EAAqBG,eAAe,CAACC,SAAU,SAAUC,MAAO,U,CAElEL,EAAqBM,UAAUC,IAAI,iC,EAG7BzF,EAAAsC,UAAAoD,eAAA,SAAeT,EAAOX,GAC5B,IAAIjC,EAAO,CAAC4C,MAAOA,EAAOX,OAAQA,EAAQ1B,OAAQ,MAClD,GAAI0B,EAAO5B,QAAS,CAClB,IAAIE,EAAS0B,EAAO5B,QAAQoC,MAAK,SAAClC,GAChC,OAAOQ,OAAOR,EAAOmC,MAAQ3B,OAAO6B,EAAME,OAAOzB,M,IAEnDrB,EAAKO,OAASA,C,CAGhB,IAAI+C,EAAgBV,EAAME,OAAOC,QAAQ,6BACzC,GAAIH,EAAME,OAAOzB,QACVY,EAAOsB,MAAQhG,YAAYiG,MAAQvB,EAAOsB,MAAQhG,YAAYkG,QAAUb,EAAMW,OAAS,SACxFtB,EAAOsB,MAAQhG,YAAYmG,KAAOd,EAAMW,OAAS,aAAeX,EAAME,OAAOa,KAAOf,EAAME,OAAOc,KAAO,CAC5GC,YAAW,WACTP,EAAcH,UAAUW,OAAO,iC,GAC9B,I,CAGL,IAAMC,EAAQjG,KAAKmD,gBAAgB+C,WAAU,SAAA/B,GAAU,OAAAA,EAAOO,YAAcxC,EAAKiC,OAAOS,EAAjC,IACvDqB,GAAS,EAAIjG,KAAKmD,gBAAgB8C,GAAMvD,OAAAyD,OAAAzD,OAAAyD,OAAA,GACnCjE,EAAKO,QAAM,CACdiC,UAAWxC,EAAKiC,OAAOS,KACrB5E,KAAKmD,gBAAgBH,KAAIN,OAAAyD,OAAAzD,OAAAyD,OAAA,GAAKjE,EAAKO,QAAM,CAAEiC,UAAWxC,EAAKiC,OAAOS,MAEtE5E,KAAKoG,kBACLpG,KAAKqG,8BAA8BlC,GACnCnE,KAAKsG,QAAQC,KAAKrE,GAClBzB,MAAMqE,MAAMyB,KAAK,0BAA2BrE,E,EAMtCrC,EAAAsC,UAAAiE,gBAAA,WACNpG,KAAKqE,aAAerE,KAAKmD,gBAAgBJ,KAAI,SAAAN,GAAU,OAAAC,OAAO8D,KAAK/D,EAAOG,mBAAqB,GAAxC,IACpD6D,QAAO,SAACC,EAAGC,GAAM,OAAAD,EAAE7D,QAAO,SAAAtB,GAAK,OAAAoF,EAAEpC,SAAShD,EAAX,GAAd,IACjBwB,KAAI,SAAAD,GAAO,OAAAG,OAAOH,EAAP,G,EAGRjD,EAAAsC,UAAAkE,8BAAA,SAA8BlC,GACpC,GAAIA,EAAOsB,OAAShG,YAAYmH,mBAAqBzC,EAAO0C,SAAU,CACpE,M,CAEF,IAAMC,EAAkB9G,KAAKqD,KAAK0D,cAAc,oBAAAC,OAAoB7C,EAAOS,GAAE,OAC7E,IAAMqC,EAAaH,EAAgBjD,iBAAiB,iBAAiBG,OACrE8C,EAAgBjD,iBAAiB,SAASrB,SAAQ,SAAA0E,GAAS,OAAAA,EAAMC,gBAAgB,YAAaF,EAAnC,G,EAGrDpH,EAAAsC,UAAAiF,UAAA,SAAU7D,EAAOkC,GACvB,OAAOlC,EACHA,EAAM8D,MAAM,KAAK5B,GAAQ,MAAQ,EAAI,GACrC,E,EAGE5F,EAAAsC,UAAAmF,kBAAA,SAAkBnD,GACxB,GAAInE,KAAK,GAAAgH,OAAG7C,EAAOsB,KAAI,WAAW,CAChC,OAAOzF,KAAK,GAAAgH,OAAG7C,EAAOsB,KAAI,WAAUtB,E,CAGtC,GAAIA,EAAOsB,OAAShG,YAAY8H,aAAc,CAC5C,OAAOvH,KAAKwH,kBAAkBrD,E,CAGhC,GAAIA,EAAOsB,OAAShG,YAAYmH,iBAAkB,CAChD,OAAO5G,KAAKyH,gBAAgBtD,E,CAG9B,GAAIA,EAAOsB,OAAShG,YAAYiI,cAAe,CAC7C,OAAO1H,KAAK2H,aAAaxD,E,CAE3B1D,MAAMe,IAAI,8BAAAwF,OAA8B7C,EAAOsB,KAAI,QACnD,MAAO,E,EAGC5F,EAAAsC,UAAAyF,mBAAA,SAAmBzD,GAC3B,OAAOA,EAAO0D,qBACV,CAAC,iBAAkB,WAAAb,OAAW7C,EAAO0D,qBAAqB1D,OAAM,MAAA6C,OAAK7C,EAAO0D,qBAAqBC,SAAQ,KAAAd,OAAI7C,EAAO0D,qBAAqBtE,QACzI,E,EAIN1D,EAAAsC,UAAA4F,kBAAA,WACE/H,KAAKe,eAAiBN,MAAMC,KAAKC,IAAI,+BACrC,OAAOF,MAAMoB,IAAImG,KAAKC,kB,EAGxBpI,EAAAsC,UAAA+F,OAAA,eAAAnI,EAAAC,K,MACE,KAAIsC,EAAAtC,KAAKyB,eAAW,MAAAa,SAAA,SAAAA,EAAE0B,SAAU,EAAG,CACjC,M,CAGF,OACEmE,EAACC,KAAI,CAACC,MAAM,6BAEVF,EAAA,gCACGnI,KAAKyB,YAAYsB,KAAI,SAACoB,GACrB,OAAAgE,EAAA,MAAAzF,OAAAyD,OAAA,CAAKkC,MAAO,qCAAArB,OAAqC7C,EAAO0D,qBAAuB,UAAY,IAAI,iBAC1E1D,EAAOS,IACnB7E,EAAK6H,mBAAmBzD,IAC9BA,EAAOmE,MAAQ,WACdvI,EAAKwI,iBACHJ,EAAA,OAAKE,MAAM,2BAA0B,mBAAmBlE,EAAOsB,KAAI,uBACxC,GAAAuB,OAAG7C,EAAO0C,WACrCsB,EAAA,SAAOK,QAAS,WAAarE,EAAOS,GAAK,IAAKyD,MAAM,kCAClDF,EAAA,SACGhE,EAAOmE,KACPnE,EAAO0C,UAAYsB,EAAA,mBAAgB,KACtCA,EAAA,aAAQhE,EAAOsE,cAEjBN,EAAA,OAAKE,MAAM,oCACRtI,EAAKuH,kBAAkBnD,KAdhC,K,EA0BFtE,EAAAsC,UAAAuG,eAAA,SAAevE,EAAgBrC,GAA/B,IAAA/B,EAAAC,K,MACN,OAAOmI,EAAA,OAAKE,MAAM,sCAEdlE,EAAOwE,SACLR,EAAA,OAAKE,MAAM,uCACTF,EAAA,sBAAoBQ,SAAUxE,EAAOwE,YAGrC,KAELrG,EAAA6B,EAAOwE,YAAQ,MAAArG,SAAA,SAAAA,EAAEsG,YAAaT,EAAA,OAAKE,MAAM,0CACxCF,EAAA,SACE1C,KAAK,OACLb,GAAG,kBACH0D,KAAK,kBACLD,MAAM,iBACN9E,MAAOY,EAAOZ,MACdsD,SAAQ,KACR4B,YAAatE,EAAOsE,YACpBI,QAAS,SAAAtH,GAAK,OAAAd,MAAMqI,QAAQC,gBAAgBxH,EAAEyD,OAAhC,EACdgE,OAAQ,SAAAzH,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,EACb8E,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,IAGpBgE,EAAA,QAAME,MAAM,8CACT5H,MAAMG,OAAOsI,SAASzI,MAAMG,OAAOD,IAAI,uBAAuBwI,SAE1D,G,EAILtJ,EAAAsC,UAAAiH,aAAA,SAAajF,EAAgBkF,GAA7B,IAAAtJ,EAAAC,KAA6B,GAAAqJ,SAAA,GAAAA,EAAA,IAA+B,CAClE,OAAOlB,EAAA,oBAAAzF,OAAAyD,OAAA,GACAkD,GAAa,GAAE,gBACP,OACb9F,MAAOY,EAAOZ,MAAK,iBACH,KAChB+E,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1BiC,SAAU1C,EAAO0C,SACjByC,OAAO,QACPC,QAAS,SAAChI,GAAM,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,EAChBxC,IAAKlB,MAAMuH,KAAKnG,IAAI2H,yBAAwB,YACjC,CAACC,aAAczJ,KAAK0B,UAAWgI,WAAY1J,KAAK0B,WAC3DiI,eAAgB,SAACpI,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EACvBkE,MAAO,CAAC,gCAAiC,KAAMxB,SAAU1C,EAAO0C,YAEhEsB,EAAA,OAAKE,MAAM,0CACTF,EAAA,QAAME,MAAM,8CACNuB,UAAYP,EAAkBQ,QAAWR,EAAkBQ,OAAOxC,MAAM,KAAK/C,OAAM,SAAAmB,GAAQ,OAAAA,EAAKlB,SAAS,QAAd,IACvFuF,WACAC,WAEV5B,EAAA,KAAGE,MAAM,+CAA+C5H,MAAMC,KAAKC,IAAI,kCACvEwH,EAAA,QAAME,MAAM,0BAA0B5H,MAAMC,KAAKC,IAAI,4B,EAMnDd,EAAAsC,UAAA6H,YAAA,SAAY7F,GAClB,OAAOnE,KAAKoJ,aAAajF,EAAQ,CAAC0F,OAAQ,4C,EAIpChK,EAAAsC,UAAA8H,WAAA,SAAW9F,GAAX,IAAApE,EAAAC,KACN,IAAIkK,EAAQ/F,EAAO5B,QAAQQ,KAAI,SAAAN,GAAU,OAAA1C,EAAKE,UAAUwC,EAAO6F,KAAtB,IAA6BzF,OAAOsH,SAC7E,OAAOD,IAAK,MAALA,SAAK,SAALA,EAAOlG,QACVhE,KAAKoJ,aAAajF,EAAQ,CAAC0F,OAAQK,EAAME,KAAK,OAC9C,0B,EAKEvK,EAAAsC,UAAAkI,aAAA,SAAalG,GAAb,IAAApE,EAAAC,KACN,OAAOmI,EAAA,SACL1C,KAAK,OACLlC,MAAOY,EAAOZ,MACd8E,MAAM,iBACNxB,SAAU1C,EAAO0C,SACjByB,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1B6D,YAAatE,EAAOsE,YACpBO,OAAQ,SAAAzH,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,EACb8E,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EAClB0E,QAAS,SAAAtH,GAAK,OAAAd,MAAMqI,QAAQC,gBAAgBxH,EAAEyD,OAAhC,G,EAIVnF,EAAAsC,UAAAoG,eAAA,WACN,OAAOJ,EAAA,OAAKE,MAAM,8B,EAIZxI,EAAAsC,UAAAmI,WAAA,SAAWnG,GAAX,IAAApE,EAAAC,KACN,OAAOmI,EAAA,OAAKE,MAAM,0BAChBF,EAAA,SACE1C,KAAK,OACLlC,MAAOY,EAAOZ,MACd8E,MAAM,iBACNxB,SAAU1C,EAAO0C,SACjByB,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1B6D,YAAatE,EAAOsE,YACpBQ,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EAClB0E,QAAS,SAAAtH,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,I,EAKZtE,EAAAsC,UAAAoI,eAAA,SAAepG,GAAf,IAAApE,EAAAC,KAEN,OAAOmI,EAAA,OAAKE,MAAM,8BAChBF,EAAA,OAAKE,MAAM,QACTF,EAAA,YACEqC,KAAM,EACNjH,MAAOY,EAAOZ,MACd8E,MAAM,iBACNxB,SAAU1C,EAAO0C,SACjBjC,GAAI,WAAAoC,OAAW7C,EAAOS,GAAE,KACxB0D,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1B6D,YAAatE,EAAOsE,YACpBQ,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EAClB0E,QAAS,SAACtH,GAAM,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,K,EAMhBtE,EAAAsC,UAAAsI,UAAA,SAAUtG,GAAV,IAAApE,EAAAC,KACN,OAAOmI,EAAA,aACLuC,KAAM,GACN7E,IAAK7F,KAAKoH,UAAUjD,EAAOZ,MAAO,OAClCuC,IAAK9F,KAAKoH,UAAUjD,EAAOZ,MAAO,OAClC+E,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1B+F,WAAY,KACZ9D,SAAU1C,EAAO0C,SACjB8C,eAAgB,SAACpI,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EACvByG,WAAY,SAAArJ,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,G,EAGbtE,EAAAsC,UAAAqF,kBAAA,SAAkBrD,GAAlB,IAAApE,EAAAC,KACN,OAAOmI,EAAA,sBACL0C,YAAa,SAAAtJ,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,EAClBmE,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1BiC,SAAU1C,EAAO0C,SACjB8C,eAAgB,SAACpI,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EACvB2G,MAAO3G,EAAOZ,O,EAOV1D,EAAAsC,UAAA4I,WAAA,SAAW5G,GAAX,IAAApE,EAAAC,KACN,OAAOmI,EAAA,yBACL6C,WAAY,KACZC,WAAY,KACZC,WAAW,QACX3H,MAAOY,EAAOZ,MACdkF,YAAatE,EAAOmE,KACpBzB,SAAU1C,EAAO0C,SACjByB,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1ByD,MAAM,iCACNsB,eAAgB,SAACpI,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EACvBgH,SAAU,SAAA5J,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,G,EAIXtE,EAAAsC,UAAAiJ,WAAA,SAAWjH,GAAX,IAAApE,EAAAC,KAEN,OAAOmI,EAAA,OAAKE,MAAM,kCAChBF,EAAA,yBACE5E,MAAOY,EAAOZ,MACdkF,YAAatE,EAAOmE,KACpBzB,SAAU1C,EAAO0C,SACjBwE,QAAS,IAAIC,KACbhD,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1B+E,eAAgB,SAACpI,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EACvBgH,SAAU,SAAA5J,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,I,EAKbtE,EAAAsC,UAAAoJ,eAAA,SAAepH,GAAf,IAAApE,EAAAC,KAEN,OAAOmI,EAAA,OAAKE,MAAM,sCAChBF,EAAA,yBACE8C,WAAY,KACZ1H,MAAOY,EAAOZ,MACd2H,WAAW,cACXzC,YAAatE,EAAOmE,KACpBzB,SAAU1C,EAAO0C,SACjByB,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1B4G,QAASrH,EAAOsH,aAChBJ,QAASlH,EAAOuH,eAChB/B,eAAgB,SAACpI,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EACvBgH,SAAU,SAAA5J,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,I,EAOXtE,EAAAsC,UAAAwJ,oBAAA,SAAoBlJ,EAAgBmJ,EAA4BC,GAA5B,GAAAD,SAAA,GAAAA,EAAA,IAA0B,CACtE,GAAIC,GAAcA,GAAcpM,YAAYqM,MAAO,CACjD,OAAOrJ,EAAO6F,MACRsD,GAAc5L,KAAK+L,kBAAkBtJ,GAAW,cAAAuE,OAAchH,KAAKe,eAAc,SAAU,KAC5F0B,EAAOuJ,iBAAmB,SAAAhF,OAASvG,MAAMwL,MAAMxJ,EAAOuJ,kBAAiB,UAAW,G,CAGzF,OAAOvJ,EAAO6F,MACRsD,GAAc5L,KAAK+L,kBAAkBtJ,GAAW,MAAAuE,OAAMhH,KAAKe,gBAAmB,KAC/E0B,EAAOuJ,iBAAmB,KAAAhF,OAAKvG,MAAMwL,MAAMxJ,EAAOuJ,kBAAiB,KAAM,G,EAItEnM,EAAAsC,UAAA4J,kBAAA,SAAkBtJ,GAAlB,IAAA1C,EAAAC,K,MACR,GAAIyC,EAAO2B,SAAW3B,EAAOG,sBAAsBN,EAAAtC,KAAKqE,gBAAY,MAAA/B,SAAA,SAAAA,EAAE0B,QAAQ,CAC5E,OAAOvB,EAAO2B,M,CAGhB,IAAI8H,EAAmBlM,KAAKmD,gBAAgBN,QAAO,SAAAsB,GAAU,OAAAA,EAAOS,IAAMnC,EAAOmC,EAApB,IAAwBZ,OAErF,GAAIkI,GAAoBlM,KAAKmD,gBAAgBa,QAAU,EAAG,CACxD,OAAO,K,CAIT,GAAIkI,EAAkB,CAEpB,IAAIC,EAAoBnM,KAAKqE,aAAaxB,QAAO,SAAAC,GAAO,OAAA/C,EAAKS,QAAQ+D,SAASzB,EAAtB,IACxD,OAAOJ,OAAO8D,KAAK/D,EAAOG,mBAAmBsB,MAAK,SAAApB,GAAO,OAAAqJ,EAAkB5H,SAAStB,OAAOH,GAAlC,G,CAG3D,OAAO9C,KAAKmD,gBAAgBe,MAAK,SAAAC,GAAU,OAAAA,EAAOC,QAAUD,EAAOO,YAAcjC,EAAOiC,SAA7C,G,EAIrC7E,EAAAsC,UAAAwF,aAAA,SAAaxD,GAAb,IAAApE,EAAAC,KACN,OAAOmI,EAAA,WACLA,EAAA,UAAQG,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1BiC,SAAU1C,EAAO0C,SACjBwB,MAAM,iBACNY,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EAClBiI,SAAU,SAAA7K,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,GACrBgE,EAAA,UAAQ5E,MAAM,IAAIY,EAAOsE,aAEvBtE,IAAM,MAANA,SAAM,SAANA,EAAQ5B,QAAQQ,KAAI,SAACN,GACnB,OAAO0F,EAAA,UAAQ5E,MAAOd,EAAOmC,GAAIyH,SAAUtM,EAAKc,aAAed,EAAKgM,kBAAkBtJ,GACvE6J,SAAU7J,EAAO8J,aAC7BxM,EAAK4L,oBAAoBlJ,G,OAQ9B5C,EAAAsC,UAAAsF,gBAAA,SAAgBtD,GAAhB,IAAApE,EAAAC,KACN,IAAIwM,EAAcrI,EAAO0C,WAAa1C,EAAO5B,QAAQ2B,MAAK,SAAAzB,GAAU,OAAAA,EAAO8J,WAAP,IACpE,OAAOpE,EAAA,OAAKE,MAAO,CAAC,6CAA8C,KAAMxB,SAAY1C,EAAO0C,WAEvF1C,IAAM,MAANA,SAAM,SAANA,EAAQ5B,QAAQQ,KAAI,SAACN,GACnB,OAAO0F,EAAA,WACLA,EAAA,SAAO1C,KAAK,WACLlC,MAAOd,EAAOmC,GACdyH,SAAUtM,EAAKgM,kBAAkBtJ,GACjCgK,QAAShK,EAAO8J,YAChB1F,SAAU2F,EACVlE,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,OAC1BA,GAAI,SAAAoC,OAAS7C,EAAOS,GAAE,KAAAoC,OAAIvE,EAAOmC,IACjCwH,SAAU,SAAC7K,GAAM,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,EACjB8E,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EAA8B,mBAC9B,WAAA6C,OAAW7C,EAAOS,GAAE,mBAC7CuD,EAAA,SAAOK,QAAS,SAAAxB,OAAS7C,EAAOS,GAAE,KAAAoC,OAAIvE,EAAOmC,KAAO7E,EAAK4L,oBAAoBlJ,I,MAQ/E5C,EAAAsC,UAAAuK,YAAA,SAAYvI,GAAZ,IAAApE,EAAAC,KACN,OAAOmI,EAAA,YAAUE,MAAM,oCAEnBlE,IAAM,MAANA,SAAM,SAANA,EAAQ5B,QAAQQ,KAAI,SAACN,GACnB,OAAA0F,EAAA,OAAKE,MAAM,iCACTF,EAAA,SAAO1C,KAAK,QACLlC,MAAOd,EAAOmC,GACdiC,SAAU1C,EAAO0C,SACjB4F,QAAShK,EAAO8J,YAChBjE,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAC1ByH,SAAUtM,EAAKc,aAAed,EAAKgM,kBAAkBtJ,GACrDmC,GAAI,SAAAoC,OAASjH,EAAK2B,UAAS,KAAAsF,OAAI7C,EAAOS,GAAE,KAAAoC,OAAIvE,EAAOmC,IACnDqE,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EAClBiI,SAAU,SAAA7K,GAAK,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,IACtBgE,EAAA,SAAOK,QAAS,SAAAxB,OAASjH,EAAK2B,UAAS,KAAAsF,OAAI7C,EAAOS,GAAE,KAAAoC,OAAIvE,EAAOmC,KAC7DuD,EAAA,QAAMwE,MAAO,CAAC,mBAAoBlK,EAAOqI,SACzC3C,EAAA,OAAKyB,UAAW7J,EAAK4L,oBAAoBlJ,EAAQ,KAAM0B,EAAOsB,SAZlE,I,EAqBA5F,EAAAsC,UAAAyK,gBAAA,SAAgBzI,GAAhB,IAAApE,EAAAC,KACN,OAAOmI,EAAA,OAAKE,MAAM,wCACflE,EAAO5B,QAAQQ,KAAI,SAACN,GACnB,OAAO0F,EAAA,WACLA,EAAA,SAAO1C,KAAK,QACLlC,MAAOd,EAAOmC,GAAE,cACHnC,EAAOmC,GACpBiC,SAAU1C,EAAO0C,SACjB4F,QAAShK,EAAO8J,YAChBjE,KAAM,WAAAtB,OAAW7C,EAAOS,GAAE,KAAG,cAChBnC,EAAOoK,aACpBR,SAAUtM,EAAKc,aAAed,EAAKgM,kBAAkBtJ,GACrDmC,GAAI,UAAAoC,OAAUjH,EAAK2B,UAAS,KAAAsF,OAAI7C,EAAOS,GAAE,KAAAoC,OAAIvE,EAAOmC,IACpDqE,UAAW,SAAC1H,GAAM,OAAAxB,EAAK8E,eAAetD,EAAG4C,EAAvB,EAClBiI,SAAU,SAAC7K,GAAM,OAAAxB,EAAKwF,eAAehE,EAAG4C,EAAvB,IACxBgE,EAAA,SAAOK,QAAS,UAAAxB,OAAUjH,EAAK2B,UAAS,KAAAsF,OAAI7C,EAAOS,GAAE,KAAAoC,OAAIvE,EAAOmC,IAAI,cAChDnC,EAAOoK,aACpBxE,MAAM,eACXF,EAAA,kBAAe1F,EAAOqK,MAAOC,IAAKtK,EAAOqK,MAAOE,MAAOvK,EAAO6F,KAAM2E,IAAKxK,EAAO6F,OAChFH,EAAA,QAAMyB,UAAWsD,gBAAiB7E,MAAM,sCACvCtI,EAAKgM,kBAAkBtJ,GACtB,CACE0F,EAAA,SAAOE,MAAM,4CAA4CtI,EAAKgB,gBAC9DhB,EAAKc,YAAcsH,EAAA,OAAKE,MAAM,+CAAiD,IAE/E,IAENF,EAAA,SAAIpI,EAAK4L,oBAAoBlJ,EAAQ,OAAM,K,sIA9kBrB,G"}
+{"version":3,"names":["DisplayType","Currency","sallaProductOptionsCss","SallaProductOptions","class_1","hostRef","_this","this","fileTypes","pdf","png","jpg","word","exl","txt","outSkus","handleDonationOptions","event","preventDefault","stopPropagation","isCustomDonation","target","value","donationInput","focus","salla","lang","get","getWithDefault","config","canDisabled","onLoaded","outOfStockText","donationAmount","selectDonationAmount","selectAmount","options","setOptionsData","Array","isArray","JSON","parse","e","log","optionsData","productId","url","is_page","api","product","getDetails","then","resp","data","prototype","that","_b","_a","details","forEach","detail","Object","entries","skus_availability","filter","sku","map","push","Number","getSelectedOptionsData","selectedOptions","formData","host","getElementSallaData","key","startsWith","replace","reportValidity","requiredElements","querySelectorAll","pass","i","length","hasOutOfStockOption","some","option","is_out","selectedSkus","every","includes","getSelectedOptions","getOption","option_id","find","id","invalidHandler","closestProductOption","closest","scrollIntoView","behavior","block","classList","add","changedHandler","optionElement","type","FILE","IMAGE","MAP","lat","lng","setTimeout","remove","index","findIndex","assign","setSelectedSkus","handleRequiredMultipleOptions","changed","emit","keys","reduce","p","c","MULTIPLE_OPTIONS","required","optionContainer","querySelector","concat","hasChecked","input","toggleAttribute","getLatLng","split","getDisplayForType","COLOR_PICKER","colorPickerOption","multipleOptions","SINGLE_OPTION","singleOption","getOptionShownWhen","visibility_condition","operator","componentWillLoad","cart","getCurrentCartId","render","h","Host","class","name","splitterOption","htmlFor","placeholder","donationOption","donation","can_donate","checked","is_selected","additional_price","onChange","money","custom_amount_enabled","shown","ref","el","onInput","helpers","inputDigitsOnly","onBlur","onInvalid","currency","symbol","fileUploader","additions","height","onAdded","getUploadImageEndpoint","cart_item_id","product_id","onInvalidInput","innerHTML","accept","CameraIcon","FileIcon","imageOption","fileOption","types","Boolean","join","numberOption","textOption","textareaOption","rows","mapOption","zoom","searchable","onSelected","onSubmitted","color","timeOption","noCalendar","enableTime","dateFormat","onPicked","dateOption","minDate","Date","datetimeOption","maxDate","to_date_time","from_date_time","getOptionDetailName","outOfStock","optionType","COLOR","isOptionDetailOut","isDetailSelected","outSelectableSkus_1","disabled","selected","is_required","colorOption","style","thumbnailOption","option_value","image","src","title","alt","CheckCircleIcon"],"sources":["src/components/salla-product-options/interfaces.ts","src/components/salla-product-options/salla-product-options.scss?tag=salla-product-options","src/components/salla-product-options/salla-product-options.tsx"],"sourcesContent":["export enum DisplayType {\n  COLOR = \"color\",\n  DATE = \"date\",\n  DATETIME = \"datetime\",\n  DONATION = \"donation\",\n  IMAGE = \"image\",\n  MULTIPLE_OPTIONS = \"multiple-options\",\n  NUMBER = \"number\",\n  SINGLE_OPTION = \"single-option\",\n  SPLITTER = \"splitter\",\n  TEXT = \"text\",\n  TEXTAREA = \"textarea\",\n  THUMBNAIL = \"thumbnail\",\n  TIME = \"time\",\n  RADIO = \"radio\",\n  CHECKBOX = \"checkbox\",\n  MAP = \"map\",\n  FILE = \"file\", // similar to image type (file-uploader component)\n  COLOR_PICKER = \"color_picker\"\n\n}\n\nexport interface ProductDetail {\n  id: string;\n  sku: string;\n  name: string;\n  description: string;\n  url: string;\n  promotion_title: string;\n  subtitle: string;\n  type: string;\n  status: string;\n  price: number;\n  sale_price: number;\n  regular_price: number;\n  starting_price: null;\n  quantity: number;\n  max_quantity: number;\n  discount_ends: number;\n  is_taxable: boolean;\n  has_read_more: boolean;\n  can_add_note: boolean;\n  can_show_remained_quantity: boolean;\n  can_upload_file: boolean;\n  has_custom_form: boolean;\n  is_on_sale: boolean;\n  is_hidden_quantity: boolean;\n  is_available: boolean;\n  is_out_of_stock: boolean;\n  weight: null;\n  calories: null;\n  image: SimpleImage;\n  brand: Brand;\n  donation?: ProductDonation;\n  images: Image[];\n  tags: Tag[];\n  notify_availability: null;\n  rating: Rating;\n  options: Option[];\n  sold_quantity: number;\n  category: Category;\n}\n\nexport interface SimpleImage {\n  url: string;\n  alt: string;\n}\n\nexport interface Category {\n  name: string;\n  url: string;\n  icon: string;\n}\n\nexport interface ProductDonation {\n  target_message?: string;\n  collected_amount?: number;\n  target_amount?: number;\n  target_percent?: number;\n  target_end_date?: string;\n  can_donate: boolean;\n  custom_amount_enabled: boolean;\n}\n\nexport interface Image {\n  id: number;\n  url: string;\n  main: boolean;\n  three_d_image_url: string;\n  alt: string;\n  video_url: string;\n  type: string;\n  sort: number;\n}\n\nexport interface Option {\n  id: number;\n  name: string;\n  required: boolean;\n  type: string;\n  placeholder: string;\n  option_type: string;\n  not_same_day_order: boolean;\n  availability_range: number;\n  from_date_time: null;\n  to_date_time: null;\n  visibility_condition?: { option: number, operator: \"=\" | \"!=\", value: number };\n  details?: Detail[];\n  condition_attributes: string;\n  value?: any;\n  donation?: Donation\n}\n\nexport interface Donation {\n  custom_amount_enabled: boolean;\n  target_message?: string;\n  target_date: string | \"2023-04-18\";\n  target_end_date: string | \"2023-04-18\";\n  target_amount: number;\n  collected_amount: number;\n  can_donate: boolean;\n}\n\nexport interface Detail {\n  id: number;\n  option_id: number;\n  name: string;\n  additional_price: number;\n  option_value: null | string;\n  image: null | string;\n  color: null | string;\n  is_out: boolean;\n  skus_availability?: { [sku_id: number]: boolean };\n  is_selected: boolean;\n}\n\nexport interface Brand {\n  id: string;\n  url: string;\n  name: string;\n  logo: string;\n}\n\nexport interface PreTaxPrice {\n  amount: number;\n  currency: Currency;\n}\n\nexport enum Currency {\n  Sar = \"SAR\",\n}\n\nexport interface Promotion {\n  title: string;\n  sub_title: string;\n}\n\nexport interface Rating {\n  count: number;\n  stars: number;\n}\n\nexport interface Tag {\n  name: string;\n  url: string;\n}\n","\n.s-product-options{\n  &-wrapper{\n\n  }\n  &-option-container{\n\n  }\n  &-option{\n\n  }\n  &-option-label{\n\n  }\n  &-option-content{\n\n  }\n  &-colors-wrapper{\n\n  }\n  &-date-element{\n\n  }\n  &-time-element{\n    \n  }\n  &-datetime-element{\n\n  }\n  &-image-input{\n\n  }\n  &-multiple-options-wrapper{\n\n  }\n  &-splitter{\n\n  }\n  &-text{\n\n  }\n  &-textarea{\n\n  }\n  &-thumbnails-wrapper{\n\n  }\n}","import { Component, Prop, h, State, Element, Host, Event, EventEmitter, Method } from '@stencil/core';\nimport { Option, DisplayType, Detail } from './interfaces';\nimport CheckCircleIcon from '../../assets/svg/check.svg';\nimport CameraIcon from '../../assets/svg/camera.svg';\nimport FileIcon from '../../assets/svg/file-upload.svg';\n\n\n@Component({\n  tag: 'salla-product-options',\n  styleUrl: 'salla-product-options.scss',\n})\nexport class SallaProductOptions {\n\n  constructor() {\n    this.canDisabled = !salla.config.get('store.settings.products.notify_options_availability');\n    salla.lang.onLoaded(() => {\n      this.outOfStockText = salla.lang.get(\"pages.products.out_of_stock\");\n      this.donationAmount = salla.lang.get('pages.products.donation_amount');\n      this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');\n      this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');\n    });\n\n    if (this.options) {\n      try {\n        this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));\n        return;\n      } catch (e) {\n        salla.log('Bad json passed via options prop');\n      }\n    }\n    if (!Array.isArray(this.optionsData)) {\n      salla.log('Options is not an array[] ---> ', this.optionsData);\n      this.setOptionsData([]);\n    }\n\n    if (this.productId && !salla.url.is_page('cart')) {\n      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));\n    }\n  }\n\n  private setOptionsData(optionsData: Option[]) {\n    this.optionsData = optionsData;\n    let that = this\n    this.optionsData[0]?.details?.forEach(function (detail) {\n      Object.entries(detail.skus_availability || {})\n        .filter(sku => !sku[1])\n        .map(sku => that.outSkus.push(Number(sku[0])));\n    });\n  }\n\n  @Element() host: HTMLElement;\n\n  private fileTypes: Object = {\n    pdf: 'application/pdf',\n    png: 'image/png',\n    jpg: 'image/jpeg',\n    word: 'application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    txt: 'text/plain',\n  };\n\n  @State() optionsData: Option[];\n  @State() outOfStockText: string = ''\n  @State() donationAmount: string = salla.lang.get('pages.products.donation_amount')\n  @State() selectDonationAmount: string = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع')\n  @State() selectAmount: string = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ')\n  @State() isCustomDonation: boolean = false;\n  @State() selectedOptions: Array<any> = [];\n  @State() canDisabled: boolean;\n  @State() selectedSkus?: Array<string | number>;\n  @State() selectedOutSkus?: Array<string | number>;\n  private outSkus: Array<string | number> = [];\n  private donationInput?: HTMLInputElement;\n\n  /**\n   * The id of the product to which the options are going to be fetched for.\n   */\n  @Prop() productId: number = salla.config.get('page.id');\n\n  /**\n   * Product detail information.\n   */\n  @Prop() options: string;\n\n  /**\n   * Get the id's of the selected options.\n   * */\n  @Method()\n  async getSelectedOptionsData() {\n    let selectedOptions = {}\n    let formData = (this.host as any).getElementSallaData();\n    formData.forEach(function (value, key) {\n      key.startsWith('options[') && (selectedOptions[key.replace('options[', '').replace(']', '')] = value);\n    });\n    return selectedOptions;\n  }\n\n  /**\n   * Report options form validity.\n   * */\n  @Method()\n  async reportValidity() {\n    let requiredElements: Array<HTMLInputElement> = this.host.querySelectorAll('[required]') as any;\n    let pass = true;\n    for (let i = 0; i < requiredElements.length; i++) {\n      //if there is only one invalid option, return false\n      if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {\n        pass = false;\n      }\n    }\n    return pass;\n  }\n\n  /**\n   * Return true if there is any out of stock options are selected and vise versa.\n   * */\n  @Method()\n  async hasOutOfStockOption() {\n    return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus?.length && this.selectedSkus?.every(sku => this.outSkus.includes(sku)));\n  }\n\n  /**\n   * Get selected options.\n   * */\n  @Method()\n  async getSelectedOptions() {\n    return this.selectedOptions;\n  }\n\n  /**\n   * Get a specific option by its id.\n   * */\n  @Method()\n  async getOption(option_id) {\n    return this.optionsData.find(option => option.id === option_id);\n  }\n\n  /**\n   * An event that emitted when any option is changed.\n   */\n  @Event() changed: EventEmitter;\n\n  // @ts-ignore\n  private invalidHandler(event, option: Option) {\n    const closestProductOption = (event.target as HTMLInputElement).closest('.s-product-options-option') as HTMLElement;\n    if (!salla.url.is_page('cart')) {\n      closestProductOption.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    }\n    closestProductOption.classList.add('s-product-options-option-error');\n  }\n\n  private changedHandler(event, option) {\n    let data = { event: event, option: option, detail: null };\n    if (option.details) {\n      let detail = option.details.find((detail) => {\n        return Number(detail.id) === Number(event.target.value);\n      });\n      data.detail = detail\n    }\n\n    let optionElement = event.target.closest('.s-product-options-option');\n    if (event.target.value\n      || ((option.type == DisplayType.FILE || option.type == DisplayType.IMAGE) && event.type === 'added')\n      || (option.type == DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {\n      setTimeout(() => {\n        optionElement.classList.remove('s-product-options-option-error');\n      }, 200);\n    }\n\n    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);\n    index > -1 ? this.selectedOptions[index] = {\n      ...data.detail,\n      option_id: data.option.id\n    } : this.selectedOptions.push({ ...data.detail, option_id: data.option.id })\n\n    this.setSelectedSkus();\n    this.handleRequiredMultipleOptions(option);\n    this.changed.emit(data);\n    salla.event.emit('product-options::change', data);\n  }\n\n\n  private handleDonationOptions = (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isCustomDonation = event.target.value === 'custom';\n    if (this.donationInput) {\n      if (event.target.value === 'custom') {\n        this.donationInput.value = '';\n        this.donationInput.focus()\n      } else {\n        this.donationInput.value = event.target.value;\n      }\n    } \n  }\n  /**\n   * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;\n   */\n  private setSelectedSkus() {\n    this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))\n      .reduce((p, c) => p.filter(e => c.includes(e)))\n      .map(sku => Number(sku));\n  }\n\n  private handleRequiredMultipleOptions(option) {\n    if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {\n      return;\n    }\n    const optionContainer = this.host.querySelector(`[data-option-id=\"${option.id}\"]`);\n    const hasChecked = optionContainer.querySelectorAll('input:checked').length;\n    optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));\n  }\n\n  private getLatLng(value, type: 'lat' | 'lng') {\n    return value\n      ? value.split(',')[type == 'lat' ? 0 : 1]\n      : '';\n  }\n\n  private getDisplayForType(option: Option) {\n    if (this[`${option.type}Option`]) {\n      return this[`${option.type}Option`](option);\n    }\n\n    if (option.type === DisplayType.COLOR_PICKER) {\n      return this.colorPickerOption(option)\n    }\n\n    if (option.type === DisplayType.MULTIPLE_OPTIONS) {\n      return this.multipleOptions(option);\n    }\n\n    if (option.type === DisplayType.SINGLE_OPTION) {\n      return this.singleOption(option);\n    }\n    salla.log(`Couldn't find options type(${option.type})😢`);\n    return '';\n  }\n\n  protected getOptionShownWhen(option: Option) {\n    return option.visibility_condition\n      ? { \"data-show-when\": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }\n      : {};\n  }\n\n  //we need the cart Id for productOption Image\n  componentWillLoad() {\n    this.outOfStockText = salla.lang.get('pages.products.out_of_stock')\n    return salla.api.cart.getCurrentCartId();\n  }\n\n  render() {\n    if (this.optionsData?.length == 0) {\n      return;\n    }\n\n    return (\n      <Host class=\"s-product-options-wrapper\">\n        {/* TODO:: move salla-conditional-field logic to here, no need of another component*/}\n        <salla-conditional-fields>\n          {this.optionsData.map((option: Option) =>\n            <div class={`s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`}\n              data-option-id={option.id}\n              {...this.getOptionShownWhen(option)}>\n              {option.name == 'splitter' ?\n                this.splitterOption()\n                : <div class=\"s-product-options-option\" data-option-type={option.type}\n                  data-option-required={`${option.required}`}>\n                  <label htmlFor={'options[' + option.id + ']'} class=\"s-product-options-option-label\">\n                    <b>\n                      {option.name}\n                      {option.required && <span> * </span>} </b>\n                    <small>{option.placeholder}</small>\n                  </label>\n                  <div class=\"s-product-options-option-content\">\n                    {this.getDisplayForType(option)}\n                  </div>\n                </div>}\n            </div>\n          )}\n        </salla-conditional-fields>\n      </Host>\n    );\n\n  }\n\n  //@ts-ignore\n  private donationOption(option: Option, product: Product) {\n    return <div class=\"s-product-options-donation-wrapper\">\n      {\n        option.donation ?\n          <div class=\"s-product-options-donation-progress\">\n            <salla-progress-bar donation={option.donation}>\n            </salla-progress-bar>\n          </div>\n          : ''\n      }\n\n      {option.donation?.can_donate ?\n\n        [option.details.length ?\n          [<h4>{this.selectAmount}</h4>,\n          <div class=\"s-product-options-donation-options\">\n            {option.details.map((detail, i) =>\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-${i}`} type=\"radio\" name=\"donating_option\" checked={detail.is_selected} value={detail.additional_price} onChange={e => this.handleDonationOptions(e)} />\n                <label htmlFor={`donation-option-${i}`}>\n                  <span>{salla.money(detail.name)}</span>\n                </label>\n              </div>\n            )}\n\n            {option.donation?.custom_amount_enabled ?\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-custom`} type=\"radio\" name=\"donating_option\" value=\"custom\" onChange={e => this.handleDonationOptions(e)} />\n                <label htmlFor={`donation-option-custom`}>\n                  <span> {this.selectDonationAmount} </span>\n                </label>\n              </div>\n              : ''\n            }\n          </div>] : '',\n\n        <div class={{ \"s-product-options-donation-input-group\": true, \"shown\": !option.details.length || (option.details.length && this.isCustomDonation) }}>\n          <input\n            type=\"text\"\n            id=\"donating-amount\"\n            name=\"donation_amount\"\n            class=\"s-form-control\"\n            ref={el => this.donationInput = el as HTMLInputElement}\n            value={\n              option.details.length\n                && option.details.some(detail => detail.is_selected)\n                ? option.details.find(detail => detail.is_selected).additional_price\n                : option.value}\n            // required\n            placeholder={option.placeholder}\n            onInput={e => salla.helpers.inputDigitsOnly(e.target)}\n            onBlur={e => this.changedHandler(e, option)}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n          />\n          {/* value={option.value} */}\n          <span class=\"s-product-options-donation-amount-currency\">\n            {salla.config.currency(salla.config.get('user.currency_code')).symbol}\n          </span>\n        </div>\n        ] : ''}\n    </div>\n  }\n\n  private fileUploader(option: Option, additions: Object | null = null) {\n    return <salla-file-upload\n      {...(additions || {})}\n      payload-name=\"file\"\n      value={option.value}\n      instant-upload={true}\n      name={`options[${option.id}]`}\n      required={option.required}\n      height=\"120px\"\n      onAdded={(e) => this.changedHandler(e, option)}\n      url={salla.cart.api.getUploadImageEndpoint()}\n      form-data={{ cart_item_id: this.productId, product_id: this.productId }}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      class={{ \"s-product-options-image-input\": true, required: option.required }}\n    >\n      <div class=\"s-product-options-filepond-placeholder\">\n        <span class=\"s-product-options-filepond-placeholder-icon\"\n          innerHTML={(additions as any).accept && (additions as any).accept.split(',').every(type => type.includes('image'))\n            ? CameraIcon\n            : FileIcon}\n        />\n        <p class=\"s-product-options-filepond-placeholder-text\">{salla.lang.get('common.uploader.drag_and_drop')}</p>\n        <span class=\"filepond--label-action\">{salla.lang.get('common.uploader.browse')}</span>\n      </div>\n    </salla-file-upload>\n  }\n\n  //@ts-ignore\n  private imageOption(option: Option) {\n    return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });\n  }\n\n  //@ts-ignore\n  private fileOption(option: Option) {\n    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);\n    return types?.length\n      ? this.fileUploader(option, { accept: types.join(',') })\n      : 'File types not selected.';\n  }\n\n  // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption\n  //@ts-ignore\n  private numberOption(option: Option) {\n    return <input\n      type=\"text\"\n      value={option.value}\n      class=\"s-form-control\"\n      required={option.required}\n      name={`options[${option.id}]`}\n      placeholder={option.placeholder}\n      onBlur={e => this.changedHandler(e, option)}\n      onInvalid={(e) => this.invalidHandler(e, option)}\n      onInput={e => salla.helpers.inputDigitsOnly(e.target)} />\n  }\n\n  //@ts-ignore\n  private splitterOption() {\n    return <div class=\"s-product-options-splitter\" />\n  }\n\n  //@ts-ignore\n  private textOption(option: Option) {\n    return <div class=\"s-product-options-text\">\n      <input\n        type=\"text\"\n        value={option.value}\n        class='s-form-control'\n        required={option.required}\n        name={`options[${option.id}]`}\n        placeholder={option.placeholder}\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onInput={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private textareaOption(option: Option) {\n    //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great\n    return <div class=\"s-product-options-textarea\">\n      <div class=\"mt-1\">\n        <textarea\n          rows={4}\n          value={option.value}\n          class=\"s-form-control\"\n          required={option.required}\n          id={`options[${option.id}]`}\n          name={`options[${option.id}]`}\n          placeholder={option.placeholder}\n          onInvalid={(e) => this.invalidHandler(e, option)}\n          onInput={(e) => this.changedHandler(e, option)} />\n      </div>\n    </div>\n  }\n\n  //@ts-ignore\n  private mapOption(option: Option) {\n    return <salla-map\n      zoom={15}\n      lat={this.getLatLng(option.value, 'lat')}\n      lng={this.getLatLng(option.value, 'lng')}\n      name={`options[${option.id}]`}\n      searchable={true}\n      required={option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onSelected={e => this.changedHandler(e, option)} />\n  }\n\n  private colorPickerOption(option: Option) {\n    return <salla-color-picker\n      onSubmitted={e => this.changedHandler(e, option)}\n      name={`options[${option.id}]`}\n      required={option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      color={option.value} />\n  }\n\n  /**\n   * ============= Date Time options =============\n   */\n  //@ts-ignore\n  private timeOption(option: Option) {\n    return <salla-datetime-picker\n      noCalendar={true}\n      enableTime={true}\n      dateFormat=\"h:i K\"\n      value={option.value}\n      placeholder={option.name}\n      required={option.required}\n      name={`options[${option.id}]`}\n      class=\"s-product-options-time-element\"\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onPicked={e => this.changedHandler(e, option)} />\n  }\n\n  //@ts-ignore\n  private dateOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-date-element\">\n      <salla-datetime-picker\n        value={option.value}\n        placeholder={option.name}\n        required={option.required}\n        minDate={new Date()}\n        name={`options[${option.id}]`}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private datetimeOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-datetime-element\">\n      <salla-datetime-picker\n        enableTime={true}\n        value={option.value}\n        dateFormat=\"Y-m-d G:i:K\"\n        placeholder={option.name}\n        required={option.required}\n        name={`options[${option.id}]`}\n        maxDate={option.to_date_time}\n        minDate={option.from_date_time}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  /**\n   * ============= Advanced options =============\n   */\n  protected getOptionDetailName(detail: Detail, outOfStock: boolean = true, optionType?: string) {\n    if (optionType && optionType == DisplayType.COLOR) {\n      return detail.name\n        + ((outOfStock && this.isOptionDetailOut(detail)) ? ` <br/> <p> ${this.outOfStockText} </p>` : '')\n        + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price)}) </p>` : '');\n    }\n\n    return detail.name\n      + ((outOfStock && this.isOptionDetailOut(detail)) ? ` - ${this.outOfStockText}` : '')\n      + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');\n  }\n\n\n  protected isOptionDetailOut(detail: Detail) {\n    if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {\n      return detail.is_out;\n    }\n\n    let isDetailSelected = this.selectedOptions.filter(option => option.id == detail.id).length;\n    //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet\n    if (isDetailSelected && this.selectedOptions.length == 1) {\n      return false;\n    }\n\n    //if current details has sku in the possible outSkus it's out for sure\n    if (isDetailSelected) {\n      //here we will get the possible outSkus for current selected options\n      let outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));\n      return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)))\n    }\n\n    return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id)\n\n  }\n\n  private singleOption(option: Option) {\n    return <div>\n      <select name={`options[${option.id}]`}\n        required={option.required}\n        class=\"s-form-control\"\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onChange={e => this.changedHandler(e, option)}>\n        <option value=\"\">{option.placeholder}</option>\n        {\n          option?.details.map((detail: Detail) => {\n            return <option value={detail.id} disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              selected={detail.is_selected}>\n              {this.getOptionDetailName(detail)}\n            </option>\n          })\n        }\n      </select>\n    </div>\n  }\n\n  private multipleOptions(option: Option) {\n    let is_required = option.required && !option.details.some(detail => detail.is_selected);\n    return <div class={{ \"s-product-options-multiple-options-wrapper\": true, 'required': option.required }}>\n      {\n        option?.details.map((detail: Detail) => {\n          return <div>\n            <input type=\"checkbox\"\n              value={detail.id}\n              disabled={this.isOptionDetailOut(detail)}\n              checked={detail.is_selected}\n              required={is_required}\n              name={`options[${option.id}][]`}\n              id={`field-${option.id}-${detail.id}`}\n              onChange={(e) => this.changedHandler(e, option)}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              aria-describedby={`options[${option.id}]-description`} />\n            <label htmlFor={`field-${option.id}-${detail.id}`}>{this.getOptionDetailName(detail)}</label>\n          </div>\n        })\n      }\n    </div>\n  }\n\n  //@ts-ignore\n  private colorOption(option: Option) {\n    return <fieldset class=\"s-product-options-colors-wrapper\">\n      {\n        option?.details.map((detail) =>\n          <div class=\"s-product-options-colors-item\">\n            <input type=\"radio\"\n              value={detail.id}\n              required={option.required}\n              checked={detail.is_selected}\n              name={`options[${option.id}]`}\n              disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              id={`color-${this.productId}-${option.id}-${detail.id}`}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              onChange={e => this.changedHandler(e, option)} />\n            <label htmlFor={`color-${this.productId}-${option.id}-${detail.id}`}>\n              <span style={{ \"background-color\": detail.color }} />\n              <div innerHTML={this.getOptionDetailName(detail, true, option.type)}></div>\n            </label>\n          </div>\n        )\n      }\n    </fieldset>\n  }\n\n  //@ts-ignore\n  private thumbnailOption(option: Option) {\n    return <div class=\"s-product-options-thumbnails-wrapper\">\n      {option.details.map((detail: Detail) => {\n        return <div>\n          <input type=\"radio\"\n            value={detail.id}\n            data-itemid={detail.id} //todo:: why need this? it's already in the value!\n            required={option.required}\n            checked={detail.is_selected}\n            name={`options[${option.id}]`}\n            data-img-id={detail.option_value}\n            disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n            id={`option_${this.productId}-${option.id}_${detail.id}`}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n            onChange={(e) => this.changedHandler(e, option)} />\n          <label htmlFor={`option_${this.productId}-${option.id}_${detail.id}`}\n            data-img-id={detail.option_value}\n            class=\"go-to-slide\">\n            <img data-src={detail.image} src={detail.image} title={detail.name} alt={detail.name} />\n            <span innerHTML={CheckCircleIcon} class=\"s-product-options-thumbnails-icon\" />\n            {this.isOptionDetailOut(detail) ?\n              [\n                <small class=\"s-product-options-thumbnails-stock-badge\">{this.outOfStockText}</small>,\n                this.canDisabled ? <div class=\"s-product-options-thumbnails-badge-overlay\" /> : '',\n              ]\n              : ''}\n          </label>\n          <p>{this.getOptionDetailName(detail, false)} </p>\n        </div>\n      })}\n    </div>\n  }\n}\n"],"mappings":"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"}