npm - @salla.sa/twilight-components - Versions diffs - 2.11.110 → 2.11.112 - Mend

@salla.sa/twilight-components 2.11.110 → 2.11.112

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

package/dist/cjs/salla-filters-widget.cjs.entry.js CHANGED Viewed

@@ -34,12 +34,8 @@ const SallaFiltersWidget = class {
     this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;
   }
   async reset() {
-    var _a, _b;
     if (this.option.type === interfaces.FilterOptionTypes.RANGE) {
-      this.priceRange.minPrice = (_a = this.option.values) === null || _a === void 0 ? void 0 : _a.min;
-      this.priceRange.maxPrice = (_b = this.option.values) === null || _b === void 0 ? void 0 : _b.max;
-      await this.priceRange.maxTrigger();
-      await this.priceRange.minTrigger();
+      this.priceRange.reset();
     }
     Array.from(this.host.querySelectorAll('input')).forEach(input => input.checked = false);
   }
@@ -55,27 +51,6 @@ const SallaFiltersWidget = class {
     this.isOpen = !this.isOpen;
     Helper.Helper.toggleElementClassIf(this.widgetContent, 's-filters-widget-opened', 's-filters-widget-closed', () => this.isOpen);
   }
-  /**
-   * @param {currentTarget: HTMLSallaPriceRangeElement} event
-   * @param option
-   * @private
-   */
-  handlePriceSelection(event, option) {
-    this.changed.emit({
-      event: event,
-      option: option,
-      value: {
-        max: event.currentTarget.maxPrice,
-        min: event.currentTarget.minPrice,
-      }
-    });
-  }
-  renderSliderOption(option) {
-    if (option.type !== interfaces.FilterOptionTypes.RANGE) {
-      return '';
-    }
-    return index.h("salla-price-range", { onMinPriceSelected: (event) => this.handlePriceSelection(event, option), onMaxPriceSelected: (event) => this.handlePriceSelection(event, option), ref: el => this.priceRange = el, "min-price": option.values.min, "max-price": option.values.max });
-  }
   renderFilterOption(option) {
     if (![interfaces.FilterOptionTypes.VALUES, interfaces.FilterOptionTypes.MINIMUM, interfaces.FilterOptionTypes.VARIANTS].includes(option.type)) {
       return '';
@@ -98,6 +73,7 @@ const SallaFiltersWidget = class {
   }
   getOptionLabel(option, filterOption) {
     if (option.key == 'rating') {
+      //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
       return index.h("salla-rating-stars", { size: "small", value: filterOption });
     }
     let label = filterOption.value || 'null';
@@ -105,7 +81,9 @@ const SallaFiltersWidget = class {
     return index.h("span", { class: "s-filters-option-name" }, label);
   }
   render() {
-    return (index.h(index.Host, { class: "s-filters-widget-container" }, index.h("h3", { class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, index.h("span", null, this.widgetTitle), index.h("span", { class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), index.h("div", { class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, index.h("div", { class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, index.h("slot", null), this.renderFilterOption(this.option), this.renderSliderOption(this.option)), this.withLoadMore &&
+    return (index.h(index.Host, { class: "s-filters-widget-container" }, index.h("h3", { class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, index.h("span", null, this.widgetTitle), index.h("span", { class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), index.h("div", { class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, index.h("div", { class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, index.h("slot", null), this.option.type !== interfaces.FilterOptionTypes.RANGE
+      ? this.renderFilterOption(this.option)
+      : index.h("salla-price-range", { onChanged: (event) => this.changed.emit(event.detail), ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore &&
       index.h("a", { class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? 'عرض المزيد' : 'عرض أقل'))));
   }
   get host() { return index.getElement(this); }

package/dist/cjs/salla-filters-widget.cjs.entry.js.map CHANGED Viewed

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

package/dist/cjs/salla-filters.cjs.entry.js CHANGED Viewed

@@ -42,7 +42,7 @@ const SallaFilters = class {
           //@ts-ignore
           let { max, min } = filter.values;
           //@ts-ignore
-          filter.values = [1, 2, 3, 4, 5].filter(stars => stars >= min || stars <= max);
+          filter.values = [5, 4, 3, 2, 1].filter(stars => stars >= min || stars <= max);
         }
         //when getting new filters, maybe less than we had, so let's get from the old one, only what is existed now.
         if (this.filtersData[filter.key]) {
@@ -70,9 +70,13 @@ const SallaFilters = class {
     if (!this.isReady) {
       return;
     }
-    window.history.pushState({}, '', salla.url.addParamToUrl('filters', encodeURIComponent(JSON.stringify(this.filtersData))));
-    salla.event.emit('salla-filters::changed', this.filtersData);
-    this.changed.emit(this.filtersData);
+    //todo:: why we need this🤔
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    setTimeout(() => {
+      window.history.pushState({}, '', salla.url.addParamToUrl('filters', encodeURIComponent(JSON.stringify(this.filtersData))));
+      salla.event.emit('salla-filters::changed', this.filtersData);
+      this.changed.emit(this.filtersData);
+    }, 300);
   }
   async resetFilters() {
     this.filtersData = {};

package/dist/cjs/salla-filters.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-filters.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,+GAA+G;;MCU1H,YAAY;EAEvB;;;IAkDQ,YAAO,GAAG,KAAK,CAAC;;;uBAEO,EAAE;;;IAnD/B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IAE1E,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;MACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;KAC/D,CAAC,CAAC;IAEH,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,kBAAkB,EAAE,CAAC,~~EAAC~~,OAAO,~~EAAC~~;~~MAC3C~~,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;MAC7B,IAAI,eAAe,GAAG,EAAE,CAAC;MACzB,IAAI,CAAC,OAAO,GAAG,OAAO;SACnB,GAAG,CAAC,CAAC,MAAc;QAClB,MAAM,CAAC,KAAK,GAAG;UACb,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,0BAA0B,CAAC;UACvD,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,sBAAsB,CAAC;UAChD,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gCAAgC,CAAC;UACxD,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,+BAA+B,CAAC;SAC7D,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC;QAC9B,MAAM,CAAC,SAAS,GAAGA,gCAAqB,CAAC,QAAQ,CAAC;QAClD,IAAI,MAAM,CAAC,GAAG,IAAI,QAAQ,EAAE;UAC1B,MAAM,CAAC,SAAS,GAAGA,gCAAqB,CAAC,KAAK,CAAC;;UAE/C,IAAI,~~EAAC~~,GAAG,EAAE,GAAG,~~EAAC~~,GAAG,MAAM,CAAC,MAAM,CAAC;;~~UAE/B~~,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,GAAG,CAAC,CAAA;SAC9E;;QAGD,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;UAChC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAC5D;QAED,OAAO,MAAM,CAAC;OACf,CAAC,CAAC;MACL,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;KACpC,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI;MACF,IAAI,OAAO,GAAG,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAA;MAC1E,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;KAC3E;IAAC,OAAO,CAAC,EAAE;MACV,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,gCAAgC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;KAChE;GACF;;EAaD,MAAM,UAAU;IACd,OAAO,IAAI,CAAC,WAAW,CAAC;GACzB;EAGD,MAAM,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAO;KACR;~~IACD~~,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,SAAS,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;~~IAC3H~~,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;~~IAC7D~~,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;~~GACrC~~;EAGD,MAAM,YAAY;IAChB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACtB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,MAAqC,KAAK,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC,CAAA;IACvG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;IACzC,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;GAC5B;;;;;;;EAQO,kBAAkB,CAAC,KAAK,EAAE,MAAc,EAAE,KAAK;IACrD,IAAI,MAAM,CAAC,IAAI,KAAKC,4BAAiB,CAAC,KAAK,EAAE;MAC3C,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;MACrC,OAAO;KACR;IACD,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;IACrC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAID,gCAAqB,CAAC,KAAK,EAAE;MACpD,SAAS,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;MACpD,SAAS,KAAK,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;MACnD,OAAO;KACR;;IAGD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;IAClE,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACzC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,KAAK,CAAC,CAAC;GACzF;EAED,MAAM;;IACJ,OAAOE,QAACC,UAAI,QACT,MAAA,IAAI,CAAC,OAAO;SAAE,GAAG,CAAC,MAAM,IAAID,kCAC3B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,CAAC,~~EAAC~~,MAAM,EAAE,~~EAAC~~,KAAK,EAAE,MAAM,EAAE,KAAK,~~EAAC~~,~~EAAC~~,KAAK,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,~~GAAG~~,CAAC,~~EAEnG~~,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAIA,iBAAK,KAAK,EAAC,kBAAkB,IACpDA,0BAAc,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,KAAK,CAAgB,EAC7FA,0BAAc,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,KAAK,CAAgB,CACrG,CACD,CAAC;GACT;EAED,gBAAgB;IACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;;;;;;;","names":["FilterOptionInputType","FilterOptionTypes","h","Host"],"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//todo::\n\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_range: salla.lang.get('pages.categories.filter_price'),\n }[filter.key] \|\| filter.label;\n filter.inputType = 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 = [1, 2, 3, 4, 5].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 @Prop({reflect: true, mutable: true}) filters?: Filter[];\n private isReady = false;//to avoid triggering the changed event\n @State() isSidebarOpen: boolean;\n @State() filtersData: object = {}\n @State() apply: string;\n @State() reset: string;\n @Event() changed: EventEmitter;\n\n //TODO:: move all @methods into one section\n @Method()\n async getFilters() {\n return this.filtersData;\n }\n\n @Method()\n async applyFilters() {\n if (!this.isReady) {\n return;\n }\n window.history.pushState({}, '', salla.url.addParamToUrl('filters', encodeURIComponent(JSON.stringify(this.filtersData))));\n salla.event.emit('salla-filters::changed', this.filtersData);\n this.changed.emit(this.filtersData);\n }\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 @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 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"],"version":3}
1	+ {"file":"salla-filters.entry.cjs.js","mappings":"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","names":["FilterOptionInputType","FilterOptionTypes","h","Host"],"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//todo::\n\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_range: salla.lang.get('pages.categories.filter_price'),\n }[filter.key] \|\| filter.label;\n filter.inputType = 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 @Prop({ reflect: true, mutable: true }) filters?: Filter[];\n private isReady = false;//to avoid triggering the changed event\n @State() isSidebarOpen: boolean;\n @State() filtersData: object = {}\n @State() apply: string;\n @State() reset: string;\n @Event() changed: EventEmitter;\n\n //TODO:: move all @methods into one section\n @Method()\n async getFilters() {\n return this.filtersData;\n }\n\n @Method()\n async applyFilters() {\n if (!this.isReady) {\n return;\n }\n //todo:: why we need this🤔\n window.scrollTo({top: 0,behavior: 'smooth'});\n setTimeout(() => {\n window.history.pushState({}, '', salla.url.addParamToUrl('filters', encodeURIComponent(JSON.stringify(this.filtersData))));\n salla.event.emit('salla-filters::changed', this.filtersData);\n this.changed.emit(this.filtersData);\n }, 300);\n }\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 @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 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"],"version":3}

package/dist/cjs/salla-price-range.cjs.entry.js CHANGED Viewed

@@ -12,68 +12,140 @@ const sallaPriceRangeCss = ":host{display:block}.rtl .rtl-range-slider,[dir=rtl]
 const SallaPriceRange = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.minPriceSelected = index.createEvent(this, "minPriceSelected", 7);
-    this.maxPriceSelected = index.createEvent(this, "maxPriceSelected", 7);
+    this.changed = index.createEvent(this, "changed", 7);
     this.minPrice = 1000;
     this.maxPrice = 5000;
+    this.option = undefined;
+    this.filtersData = undefined;
     this.min = 0;
     this.max = 10000;
     this.minthumb = 0;
     this.maxthumb = 0;
+    this.priceOptions = undefined;
+    this.generatePriceOptions();
   }
-  componentWillLoad() {
-    this.minTrigger();
-    this.maxTrigger();
+  async reset() {
+    var _a, _b;
+    //@ts-ignore
+    this.minInput.value = `${((_b = (_a = this.option) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.min) || 0}`;
+    this.maxInput.value = `${this.max}`;
   }
-  async minTrigger(event = null) {
-    let value = event ? event.target.value * 1 : null;
-    this.minInputValidation(value);
-    this.minthumb = ((this.minPrice - this.min) / (this.max - this.min)) * 100;
-    this.changeLeftHandle();
-    this.isReady && this.minPriceSelected.emit(value);
+  generatePriceOptions() {
+    const MAX_PRICE = this.max;
+    let option1 = Math.floor(MAX_PRICE / 100);
+    if (option1 < 1) {
+      option1 = Math.floor(MAX_PRICE / 10);
+    }
+    let option2 = Math.floor(MAX_PRICE / 2);
+    let option3 = Math.floor((MAX_PRICE / 3) * 2);
+    this.priceOptions = [option1, option2, option3];
+    // to be removed
+    console.log(`Price options for max price ${MAX_PRICE}: ${this.priceOptions.join(', ')}`);
+  }
+  getPriceLabel(price) {
+    if (price == Math.floor(this.max / 100)) {
+      return `اقل من ${salla.money(price)}`;
+    }
+    else if (price == Math.floor(this.max / 2)) {
+      return `${salla.money(this.priceOptions[0])} الى ${salla.money(this.priceOptions[2])}`;
+    }
+    else {
+      return `أكثر من ${salla.money(price)}`;
+    }
+  }
+  handleMinMaxPrice(event, option) {
+    const [firstOption, secondOption, thirdOption] = this.priceOptions;
+    switch (option) {
+      case firstOption:
+        this.minPrice = 0;
+        this.maxPrice = firstOption;
+        break;
+      case secondOption:
+        this.minPrice = firstOption;
+        this.maxPrice = thirdOption;
+        break;
+      case thirdOption:
+        this.minPrice = thirdOption;
+        this.maxPrice = this.max;
+        break;
+      default:
+        throw new Error(`Invalid price option: ${option}`);
+    }
+    // Update the input values
+    this.minInput.value = `${this.minPrice}`;
+    this.maxInput.value = `${this.maxPrice}`;
+    this.changedEventHandler(event);
   }
-  async maxTrigger(event = null) {
+  async changedEventHandler(event, isMin = false) {
     let value = event ? event.target.value * 1 : null;
-    this.maxInputValidation(value);
-    this.maxthumb = 100 - (((this.maxPrice - this.min) / (this.max - this.min)) * 100);
-    this.changeRightHandle();
-    this.isReady && this.maxPriceSelected.emit(value);
+    if (isMin) {
+      this.minInputValidation(value);
+      this.minthumb = ((this.minPrice - this.min) / (this.max - this.min)) * 100;
+    }
+    else {
+      this.maxInputValidation(value);
+      this.maxthumb = 100 - (((this.maxPrice - this.min) / (this.max - this.min)) * 100);
+    }
+    this.isReady && this.changed.emit({
+      event: event,
+      option: this.option,
+      value: { max: this.maxPrice, min: this.minPrice }
+    });
   }
-  async minInputValidation(value) {
-    if (value && (value > this.max || value > this.maxPrice))
+  minInputValidation(value) {
+    if (value && (value > this.max || value > this.maxPrice)) {
+      // this.minPrice = this.maxPrice;
       return;
-    else if (value < this.min) {
+    }
+    if (value < this.min) {
       this.minPrice = this.min;
+      return;
     }
-    else {
-      value && (this.minPrice = value);
+    if (value) {
+      this.minPrice = value;
     }
   }
-  async maxInputValidation(value) {
-    if (value && (value < this.min || value < this.minPrice))
+  maxInputValidation(value) {
+    if (value && (value < this.min || value < this.minPrice)) {
+      // this.maxPrice = this.minPrice;
       return;
-    else if (value > this.max) {
+    }
+    if (value > this.max) {
       this.maxPrice = this.max;
+      return;
     }
-    else {
-      value && (this.maxPrice = value);
+    if (value) {
+      this.maxPrice = value;
     }
   }
-  async changeRightHandle() {
-    this.rightHandle && (this.rightHandle.style.right = `${this.maxthumb}%`);
-    this.activeBar && (this.activeBar.style.right = `${this.maxthumb}%`);
-  }
-  async changeLeftHandle() {
-    this.leftHandle && (this.leftHandle.style.left = `${this.minthumb}%`);
-    this.activeBar && (this.activeBar.style.left = `${this.minthumb}%`);
+  isChecked(option) {
+    if (option == Math.floor(this.max / 100)) {
+      return this.minPrice == 0 && this.maxPrice == option;
+    }
+    if (option == Math.floor(this.max / 2)) {
+      return this.minPrice == this.priceOptions[0] && this.maxPrice == this.priceOptions[2];
+    }
+    if (option == Math.floor((this.max / 3) * 2)) {
+      return this.minPrice == option && this.maxPrice == this.max;
+    }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { style: { direction: 'ltr' }, class: "flex justify-center items-center" }, index.h("div", { class: "relative max-w-xl w-full" }, index.h("div", { class: "rtl-range-slider" }, index.h("input", { type: "range", step: "100", min: this.min, max: this.max, onInput: (event) => this.minTrigger(event), value: this.minPrice, class: "s-price-range-input" }), index.h("input", { type: "range", step: "100", min: this.min, max: this.max, onInput: (event) => this.maxTrigger(event), value: this.maxPrice, class: "s-price-range-input" }), index.h("div", { class: "s-price-range-bar-container" }, index.h("div", { class: "s-price-range-bar" }), index.h("div", { class: "s-price-range-active-bar", ref: (el) => this.activeBar = el }), index.h("div", { class: "s-price-range-left-handle", ref: (el) => this.leftHandle = el }), index.h("div", { class: "s-price-range-right-handle", ref: (el) => this.rightHandle = el }))), index.h("div", { class: "s-price-range-inputs" }, index.h("div", { class: "s-price-range-relative" }, index.h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), index.h("input", { type: "number", maxlength: "5", onInput: (event) => this.minTrigger(event), value: this.minPrice, class: "s-price-range-number-input" })), index.h("div", { class: "s-price-range-gray-text" }, " - "), index.h("div", { class: "s-price-range-relative" }, index.h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), index.h("input", { type: "number", maxlength: "5", onInput: (event) => this.maxTrigger(event), value: this.maxPrice, class: "s-price-range-number-input", placeholder: "0.00", "aria-describedby": "price-currency" })))))));
+    return (index.h(index.Host, null, this.priceOptions && this.priceOptions.map((option, index$1) => {
+      return index.h("label", { class: "s-filters-label", htmlFor: `${option}-${index$1}` }, index.h("input", { id: `${option}-${index$1}`, name: "price", type: "radio", checked: this.isChecked(option), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, option) }), this.getPriceLabel(option));
+    }), index.h("div", { class: "flex justify-center items-center" }, index.h("div", { class: "relative max-w-xl w-full" }, index.h("div", { class: "s-price-range-inputs" }, index.h("div", { class: "s-price-range-relative" }, index.h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), index.h("input", { type: "number", maxlength: "5", ref: el => this.minInput = el, onInput: (event) => this.changedEventHandler(event, true),
+      // value={this.minPrice}
+      placeholder: "\u0645\u0646", class: "s-price-range-number-input" })), index.h("div", { class: "s-price-range-gray-text" }, " -"), index.h("div", { class: "s-price-range-relative" }, index.h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), index.h("input", { type: "number", maxlength: "5", placeholder: "\u0627\u0644\u0649", ref: el => this.maxInput = el, onInput: (event) => this.changedEventHandler(event),
+      // value={this.maxPrice}
+      class: "s-price-range-number-input", "aria-describedby": "price-currency" })))))));
   }
   componentDidLoad() {
-    // this.max=this.maxPrice;
-    this.changeLeftHandle();
-    this.changeRightHandle();
+    var _a;
+    if (this.filtersData && ((_a = this.filtersData) === null || _a === void 0 ? void 0 : _a.price)) {
+      this.minPrice = this.filtersData.price.min;
+      this.maxPrice = this.filtersData.price.max;
+      this.maxInput.value = `${this.maxPrice}`;
+      this.minInput.value = `${this.minPrice}`;
+    }
     this.isReady = true;
   }
 };

package/dist/cjs/salla-price-range.cjs.entry.js.map CHANGED Viewed

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