npm - @salla.sa/twilight-components - Versions diffs - 2.11.122 → 2.11.124 - Mend

@salla.sa/twilight-components 2.11.122 → 2.11.124

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 (110) hide show

package/dist/components/salla-filters-widget2.js CHANGED Viewed

@@ -38,11 +38,17 @@ const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.option = undefined;
     this.isOpen = true;
     this.isShowMore = false;
+    this.showMoreLabel = "عرض المزيد";
+    this.showLessLabel = "عرض أقل";
   }
   connectedCallback() {
     //lets be smart and don't show 5 and more link for 8 options
     this.withLoadMore = this.option.key != 'price' && Array.isArray(this.option.values) && this.option.values.length > 8;
     this.widgetTitle = this.option.label;
+    salla.lang.onLoaded(() => {
+      this.showMoreLabel = salla.lang.get('common.titles.more', this.showMoreLabel);
+      this.showLessLabel = salla.lang.get('common.elements.show_less', this.showLessLabel);
+    });
   }
   componentDidLoad() {
     this.widgetValues.scrollHeight < this.initHeight && (this.withLoadMore = false);
@@ -100,7 +106,7 @@ const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     return (h(Host, { class: "s-filters-widget-container" }, h("h3", { class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", null, this.widgetTitle), h("span", { class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, h("div", { class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", null), this.option.type !== FilterOptionTypes.RANGE
       ? this.renderFilterOption(this.option)
       : h("salla-price-range", { onChanged: (event) => this.changed.emit(event.detail), ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore &&
-      h("a", { class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? 'عرض المزيد' : 'عرض أقل'))));
+      h("a", { class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
   }
   get host() { return this; }
   static get style() { return sallaFiltersWidgetCss; }
@@ -111,6 +117,8 @@ const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "option": [16],
     "isOpen": [32],
     "isShowMore": [32],
+    "showMoreLabel": [32],
+    "showLessLabel": [32],
     "reset": [64],
     "showMore": [64],
     "toggleWidget": [64]

package/dist/components/salla-filters-widget2.js.map CHANGED Viewed

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

package/dist/components/salla-filters.js CHANGED Viewed

@@ -34,7 +34,7 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
           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_range: salla.lang.get('pages.categories.filter_price'),
+          price: salla.lang.get('pages.categories.filter_price'),
         }[filter.key] || filter.label;
         filter.inputType = FilterOptionInputType.RADIO; //todo:: support FilterOptionInputType.CHECKBOX
         if (filter.key == 'rating') {

package/dist/components/salla-filters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-filters.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,+GAA+G;;MCU1HA,cAAY;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,EAAE,OAAO,EAAE;MAC7C,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~~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","names":["SallaFilters"],"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.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 @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 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 @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.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,+GAA+G;;MCU1HA,cAAY;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,EAAE,OAAO,EAAE;MAC7C,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,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,+BAA+B,CAAC;SACvD,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC;QAC9B,MAAM,CAAC,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC;QAC/C,IAAI,MAAM,CAAC,GAAG,IAAI,QAAQ,EAAE;UAC1B,MAAM,CAAC,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC;;UAE/C,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC;;UAEjC,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,IAAI,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC1D,UAAU,CAAC;;MACT,IAAI,UAAU,EAAE;QACd,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;OAC5H;WAAM;QACL,IAAI,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxC,MAAA,GAAG,CAAC,YAAY,0CAAE,MAAM,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;OAClD;MACD,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MAC7D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACrC,EAAE,GAAG,CAAC,CAAC;GACT;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,KAAK,iBAAiB,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,IAAI,qBAAqB,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,OAAO,EAAC,IAAI,QACT,MAAA,IAAI,CAAC,OAAO;SAAE,GAAG,CAAC,MAAM,IAAI,4BAC3B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAI,CAAC,EAExG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAI,WAAK,KAAK,EAAC,kBAAkB,IACpD,oBAAc,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,KAAK,CAAgB,EAC7F,oBAAc,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":["SallaFilters"],"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: 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 @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 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 @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/components/salla-price-range2.js CHANGED Viewed

@@ -18,6 +18,10 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.min = 0;
     this.max = 10000;
     this.priceOptions = undefined;
+    this.moreThanLabel = "أكثر من";
+    this.lessThanLabel = "أقل من";
+    this.toLabel = "الى";
+    this.fromLabel = "من";
   }
   connectedCallback() {
     var _a;
@@ -25,6 +29,12 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       this.minPrice = this.filtersData.price.min;
       this.maxPrice = this.filtersData.price.max;
     }
+    salla.lang.onLoaded(() => {
+      this.moreThanLabel = salla.lang.get('common.elements.more_than', this.moreThanLabel);
+      this.lessThanLabel = salla.lang.get('common.elements.less_than', this.lessThanLabel);
+      this.toLabel = salla.lang.get('common.elements.to', this.toLabel);
+      this.fromLabel = salla.lang.get('common.elements.from', this.fromLabel);
+    });
     //no need to show one option only
     if (this.option.values.length == 1) {
       return;
@@ -54,13 +64,13 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   getPriceLabel(filterValue) {
     // @ts-ignore
     if (isNaN(filterValue.from) || filterValue.from < 1) {
-      return `اقل من ${salla.money(filterValue.to)}`;
+      return `${this.lessThanLabel} ${salla.money(filterValue.to)}`;
     }
     // @ts-ignore
     if (isNaN(filterValue.to) || filterValue.to < 1) {
-      return `أكثر من ${salla.money(filterValue.from)}`;
+      return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;
     }
-    return `${salla.money(filterValue.from)} الى ${salla.money(filterValue.to)}`;
+    return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;
   }
   handleMinMaxPrice(event, value) {
     this.minPrice = value.from;
@@ -114,6 +124,7 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
     //1 filterValue.from zero or * and this.minPrice not set or zero
     //2 filterValue.from == this.minPrice
+    //@ts-ignore
     let isMinEqual = ((filterValue.from < 1 || filterValue.from == '*') && this.minPrice == 0) || filterValue.from == this.minPrice;
     //1 filterValue.to == "*" or null
     //2 filterValue.to == this.max
@@ -123,7 +134,7 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   render() {
     return (h(Host, null, this.filterValues.map((filterValue, index) => {
       return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}` }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), this.getPriceLabel(filterValue));
-    }), h("div", { class: "flex justify-center items-center" }, h("div", { class: "relative max-w-xl w-full" }, h("div", { class: "s-price-range-inputs" }, h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), 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" })), h("div", { class: "s-price-range-gray-text" }, " -"), h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), 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" })))))));
+    }), h("div", { class: "flex justify-center items-center" }, h("div", { class: "relative max-w-xl w-full" }, h("div", { class: "s-price-range-inputs" }, h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { type: "number", maxlength: "5", ref: el => this.minInput = el, onInput: (event) => this.changedEventHandler(event, true), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { class: "s-price-range-gray-text" }, " -"), h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { type: "number", maxlength: "5", placeholder: this.toLabel, 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.isReady = true;
@@ -137,6 +148,10 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "min": [32],
     "max": [32],
     "priceOptions": [32],
+    "moreThanLabel": [32],
+    "lessThanLabel": [32],
+    "toLabel": [32],
+    "fromLabel": [32],
     "reset": [64]
   }]);
 function defineCustomElement() {

package/dist/components/salla-price-range2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-price-range2.js","mappings":"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","names":[],"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, FilterValue} from \"../salla-filters/interfaces\";\n\n@Component({\n tag: 'salla-price-range',\n styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n @Prop({mutable: true}) minPrice;\n @Prop({mutable: true}) maxPrice;\n @Prop({reflect: true}) option: Filter;\n @Prop({reflect: true}) filtersData: any;\n @State() min = 0;\n @State() max = 10000;\n\n @State() priceOptions: any;\n\n @Event() changed: any;\n\n isReady: Boolean;\n minInput: HTMLInputElement;\n maxInput: HTMLInputElement;\n filterValues: Array<FilterValue> = [];\n\n\n connectedCallback() {\n if (this.filtersData && this.filtersData?.price) {\n this.minPrice = this.filtersData.price.min;\n this.maxPrice = this.filtersData.price.max;\n }\n\n //no need to show one option only\n if (this.option.values.length == 1) {\n return;\n }\n //here we may recive too many prices, we will group all inputs to\n if (this.option.values.length <= 5) {\n this.filterValues = this.option.values;\n return;\n }\n const chunkSize = Math.ceil(this.option.values.length / 5);\n for (let i = 0; i < this.option.values.length; i += chunkSize) {\n this.filterValues.push(\n this.option.values\n .slice(i, i + chunkSize)\n .reduce((final: FilterValue, currentValue: FilterValue) => {\n final.to = currentValue.to;\n final.count += currentValue.count;\n return final;\n })\n );\n // do whatever\n }\n }\n\n @Method()\n async reset() {\n //@ts-ignore\n this.minInput.value = null;\n this.maxInput.value = null;\n }\n\n private getPriceLabel(filterValue: FilterValue) {\n // @ts-ignore\n if (isNaN(filterValue.from) \|\| filterValue.from < 1) {\n return `اقل من ${salla.money(filterValue.to)}`;\n }\n // @ts-ignore\n if (isNaN(filterValue.to) \|\| filterValue.to < 1) {\n return `أكثر من ${salla.money(filterValue.from)}`;\n }\n\n return `${salla.money(filterValue.from)} الى ${salla.money(filterValue.to)}`;\n }\n\n\n private handleMinMaxPrice(event: Event, value: FilterValue): void {\n\n this.minPrice = value.from;\n this.maxPrice = value.to != '' ? value.to : null;\n\n this.changedEventHandler(event);\n }\n\n private async changedEventHandler(event, isMin = false) {\n salla.helpers.inputDigitsOnly(event.target)\n let value = event ? event.target.value 1 : null\n if (isMin) {\n this.minInputValidation(value);\n } else {\n this.maxInputValidation(value)\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\n private isChecked(filterValue: FilterValue) {\n if (!this.minPrice && !this.maxPrice) {\n return false;\n }\n\n //1 filterValue.from zero or * and this.minPrice not set or zero\n //2 filterValue.from == this.minPrice\n let isMinEqual = ((filterValue.from < 1 \|\| filterValue.from == '') && this.minPrice == 0) \|\| filterValue.from == this.minPrice;\n\n //1 filterValue.to == \"\" or null\n //2 filterValue.to == this.max\n let isMaxEqual = filterValue.to == '*' \|\| !filterValue.to \|\| filterValue.to == this.maxPrice;\n return isMinEqual && isMaxEqual;\n }\n\n\n render() {\n return (\n <Host>\n {\n this.filterValues.map((filterValue, index) => {\n return <label class=\"s-filters-label\" htmlFor={`${this.option.key}-${index}`}>\n <input\n id={`${this.option.key}-${index}`}\n name=\"price\"\n type=\"radio\"\n checked={this.isChecked(filterValue)}\n class=\"s-filters-radio\"\n onChange={e => this.handleMinMaxPrice(e, filterValue)}\n />\n {this.getPriceLabel(filterValue)}\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 this.isReady = true;\n }\n}\n"],"version":3}
1	+ {"file":"salla-price-range2.js","mappings":"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","names":[],"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, FilterValue} from \"../salla-filters/interfaces\";\n\n@Component({\n tag: 'salla-price-range',\n styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n @Prop({mutable: true}) minPrice;\n @Prop({mutable: true}) maxPrice;\n @Prop({reflect: true}) option: Filter;\n @Prop({reflect: true}) filtersData: any;\n @State() min = 0;\n @State() max = 10000;\n\n @State() priceOptions: any;\n @State() moreThanLabel: string=\"أكثر من\";\n @State() lessThanLabel: string=\"أقل من\";\n @State() toLabel: string=\"الى\";\n @State() fromLabel: string=\"من\";\n\n @Event() changed: any;\n\n isReady: Boolean;\n minInput: HTMLInputElement;\n maxInput: HTMLInputElement;\n filterValues: Array<FilterValue> = [];\n\n\n connectedCallback() {\n if (this.filtersData && this.filtersData?.price) {\n this.minPrice = this.filtersData.price.min;\n this.maxPrice = this.filtersData.price.max;\n }\n salla.lang.onLoaded(() => {\n this.moreThanLabel=salla.lang.get('common.elements.more_than', this.moreThanLabel)\n this.lessThanLabel=salla.lang.get('common.elements.less_than', this.lessThanLabel)\n this.toLabel=salla.lang.get('common.elements.to', this.toLabel)\n this.fromLabel=salla.lang.get('common.elements.from', this.fromLabel)\n })\n\n //no need to show one option only\n if (this.option.values.length == 1) {\n return;\n }\n //here we may recive too many prices, we will group all inputs to\n if (this.option.values.length <= 5) {\n this.filterValues = this.option.values;\n return;\n }\n const chunkSize = Math.ceil(this.option.values.length / 5);\n for (let i = 0; i < this.option.values.length; i += chunkSize) {\n this.filterValues.push(\n this.option.values\n .slice(i, i + chunkSize)\n .reduce((final: FilterValue, currentValue: FilterValue) => {\n final.to = currentValue.to;\n final.count += currentValue.count;\n return final;\n })\n );\n // do whatever\n }\n }\n\n @Method()\n async reset() {\n //@ts-ignore\n this.minInput.value = null;\n this.maxInput.value = null;\n }\n\n private getPriceLabel(filterValue: FilterValue) {\n // @ts-ignore\n if (isNaN(filterValue.from) \|\| filterValue.from < 1) {\n return `${this.lessThanLabel} ${salla.money(filterValue.to)}`;\n }\n // @ts-ignore\n if (isNaN(filterValue.to) \|\| filterValue.to < 1) {\n return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;\n }\n\n return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;\n }\n\n\n private handleMinMaxPrice(event: Event, value: FilterValue): void {\n\n this.minPrice = value.from;\n this.maxPrice = value.to != '' ? value.to : null;\n\n this.changedEventHandler(event);\n }\n\n private async changedEventHandler(event, isMin = false) {\n salla.helpers.inputDigitsOnly(event.target)\n let value = event ? event.target.value 1 : null\n if (isMin) {\n this.minInputValidation(value);\n } else {\n this.maxInputValidation(value)\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\n private isChecked(filterValue: FilterValue) {\n if (!this.minPrice && !this.maxPrice) {\n return false;\n }\n\n //1 filterValue.from zero or * and this.minPrice not set or zero\n //2 filterValue.from == this.minPrice\n //@ts-ignore\n let isMinEqual = ((filterValue.from < 1 \|\| filterValue.from == '') && this.minPrice == 0) \|\| filterValue.from == this.minPrice;\n\n //1 filterValue.to == \"\" or null\n //2 filterValue.to == this.max\n let isMaxEqual = filterValue.to == '*' \|\| !filterValue.to \|\| filterValue.to == this.maxPrice;\n return isMinEqual && isMaxEqual;\n }\n\n\n render() {\n return (\n <Host>\n {\n this.filterValues.map((filterValue, index) => {\n return <label class=\"s-filters-label\" htmlFor={`${this.option.key}-${index}`}>\n <input\n id={`${this.option.key}-${index}`}\n name=\"price\"\n type=\"radio\"\n checked={this.isChecked(filterValue)}\n class=\"s-filters-radio\"\n onChange={e => this.handleMinMaxPrice(e, filterValue)}\n />\n {this.getPriceLabel(filterValue)}\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={this.fromLabel}\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={this.toLabel}\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 this.isReady = true;\n }\n}\n"],"version":3}

package/dist/components/salla-quantity-input.js CHANGED Viewed

@@ -29,6 +29,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.hasDecrementSlot = false;
     this.didLoaded = false;
     this.quantity = 1;
+    this.fireChangeEvent = true;
   }
   /**
    * Workaround to fire change event for the input.
@@ -37,6 +38,10 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     if (!this.didLoaded) {
       return;
     }
+    if (!this.fireChangeEvent) {
+      this.fireChangeEvent = true;
+      return;
+    }
     Helper.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));
   }
   componentWillLoad() {
@@ -74,7 +79,8 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * set quantity by one.
    * @return HTMLSallaQuantityInputElement
    */
-  async setValue(value) {
+  async setValue(value, fireChangeEvent = true) {
+    this.fireChangeEvent = fireChangeEvent;
     let maxQuantity = parseInt(this.host.getAttribute('max'));
     if (maxQuantity && value > maxQuantity) {
       value = maxQuantity;
@@ -95,6 +101,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   static get style() { return sallaQuantityInputCss; }
 }, [4, "salla-quantity-input", {
     "quantity": [32],
+    "fireChangeEvent": [32],
     "decrease": [64],
     "increase": [64],
     "setValue": [64]

package/dist/components/salla-quantity-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-quantity-input.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,EAAE;;MCSnBA,oBAAkB;;;;IAIrB,mBAAc,GAAQ,EAAE,CAAC;IACzB,qBAAgB,GAAY,KAAK,CAAC;IAClC,qBAAgB,GAAY,KAAK,CAAC;IAGlC,cAAS,GAAY,KAAK,CAAC;oBAEP,CAAC;;;;;~~EAM7B~~,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,OAAO;KACR;IAED,MAAM,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;GACtG;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IAC/D,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC/E,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;GAChF;EAED,gBAAgB;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;GAClG;EAEO,kBAAkB;IACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACpD,IAAI,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE;QAC3E,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;OACnF;KACF;IAED,OAAO,IAAI,CAAC,cAAc,CAAC;GAC5B;;;;;EAOD,MAAM,QAAQ;IACZ,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;GACzC;;;;;EAOD,MAAM,QAAQ;IACZ,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;GACjD;;;;;EAOD,MAAM,QAAQ,CAAC,KAAK;~~IAClB~~,IAAI,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1D,IAAI,WAAW,IAAI,KAAK,GAAG,WAAW,EAAE;MACtC,KAAK,GAAG,WAAW,CAAC;KACrB;IACD,IAAI,KAAK,IAAI,CAAC,EAAE;MACd,KAAK,GAAG,CAAC,CAAC;KACX;IACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,IAC5B,WAAK,KAAK,EAAC,4BAA4B,IACrC,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,0DAA0D,EAAC,IAAI,EAAC,QAAQ,IACnH,CAAC,IAAI,CAAC,gBAAgB,GAAG,YAAM,SAAS,EAAE,GAAG,GAAS,GAAG,EAAE,EAC5D,YAAM,IAAI,EAAC,kBAAkB,GAAG,CACzB,EACT,2BAAO,KAAK,EAAC,wBAAwB,IAAK,IAAI,CAAC,kBAAkB,EAAE,IACjE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAsB,EACpD,OAAO,EAAE,CAAC,KAAU,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1D,GAAG,EAAC,GAAG,EACP,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,EAC1B,cAAQ,KAAK,EAAC,0DAA0D,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,QAAQ,IACnH,CAAC,IAAI,CAAC,gBAAgB,GAAG,YAAM,SAAS,EAAE,KAAK,GAAS,GAAG,EAAE,EAC9D,YAAM,IAAI,EAAC,kBAAkB,GAAG,CACzB,CACL,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SallaQuantityInput"],"sources":["./src/components/salla-quantity-input/salla-quantity-input.scss?tag=salla-quantity-input","./src/components/salla-quantity-input/salla-quantity-input.tsx"],"sourcesContent":["/\n Salla Qunatity Input Component: quantity input with increase & decrease buttons.\n* You can use these classes to target the elements in the component.\n/\n\n.s-quantity-input{\n &-input{\n \n }\n &-button{\n\n }\n}","import { Component, Element, Host, State, Watch, h, Method } from '@stencil/core';\nimport Add from \"../../assets/svg/add.svg\";\nimport Minus from \"../../assets/svg/minus.svg\";\nimport Helper from '../../Helpers/Helper';\n\n@Component({\n tag: 'salla-quantity-input',\n styleUrl: 'salla-quantity-input.scss'\n})\nexport class SallaQuantityInput {\n\n @Element() host: HTMLElement;\n\n private hostAttributes: any = {};\n private hasIncrementSlot: boolean = false;\n private hasDecrementSlot: boolean = false;\n private textInput: any;\n\n private didLoaded: boolean = false;\n\n @State() quantity: number = 1;\n\n /\n Workaround to fire change event for the input.\n /\n @Watch('quantity')\n watchPropHandler() {\n if (!this.didLoaded) {\n return;\n }\n\n Helper.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));\n }\n\n componentWillLoad() {\n this.quantity = parseInt(this.host.getAttribute('value')) \|\| 1;\n this.hasIncrementSlot = !!this.host.querySelector('[slot=\"increment-button\"]');\n this.hasDecrementSlot = !!this.host.querySelector('[slot=\"decrement-button\"]');\n }\n\n componentDidLoad() {\n this.didLoaded = true;\n this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));\n }\n\n private getInputAttributes() {\n for (let i = 0; i < this.host.attributes.length; i++) {\n if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {\n this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;\n }\n }\n\n return this.hostAttributes;\n }\n\n /\n decrease quantity by one.\n * @return HTMLSallaQuantityInputElement\n /\n @Method()\n async decrease() {\n return this.setValue(this.quantity - 1);\n }\n\n /\n increase quantity by one.\n * @return HTMLSallaQuantityInputElement\n /\n @Method()\n async increase() {\n return this.setValue(Number(this.quantity) + 1);\n }\n\n /\n set quantity by one.\n * @return HTMLSallaQuantityInputElement\n */\n @Method()\n async setValue(value) {\n let maxQuantity = parseInt(this.host.getAttribute('max'));\n if (maxQuantity && value > maxQuantity) {\n value = maxQuantity;\n }\n if (value <= 1) {\n value = 1;\n }\n this.quantity = value;\n return this.host;\n }\n\n render() {\n return (\n <Host class=\"s-quantity-input\">\n <div class=\"s-quantity-input-container\">\n <button onClick={() => this.increase()} class=\"s-quantity-input-increase-button s-quantity-input-button\" type=\"button\">\n {!this.hasIncrementSlot ? <span innerHTML={Add}></span> : ''}\n <slot name=\"increment-button\" />\n </button>\n <input class=\"s-quantity-input-input\" {...this.getInputAttributes()}\n ref={(el) => this.textInput = el as HTMLInputElement}\n onInput={(event: any) => this.setValue(event.target.value)}\n min=\"1\"\n value={this.quantity} />\n <button class=\"s-quantity-input-decrease-button s-quantity-input-button\" onClick={() => this.decrease()} type=\"button\">\n {!this.hasDecrementSlot ? <span innerHTML={Minus}></span> : ''}\n <slot name=\"decrement-button\" />\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"salla-quantity-input.js","mappings":"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","names":["SallaQuantityInput"],"sources":["./src/components/salla-quantity-input/salla-quantity-input.scss?tag=salla-quantity-input","./src/components/salla-quantity-input/salla-quantity-input.tsx"],"sourcesContent":["/\n Salla Qunatity Input Component: quantity input with increase & decrease buttons.\n* You can use these classes to target the elements in the component.\n/\n\n.s-quantity-input{\n &-input{\n \n }\n &-button{\n\n }\n}","import { Component, Element, Host, State, Watch, h, Method } from '@stencil/core';\nimport Add from \"../../assets/svg/add.svg\";\nimport Minus from \"../../assets/svg/minus.svg\";\nimport Helper from '../../Helpers/Helper';\n\n@Component({\n tag: 'salla-quantity-input',\n styleUrl: 'salla-quantity-input.scss'\n})\nexport class SallaQuantityInput {\n\n @Element() host: HTMLElement;\n\n private hostAttributes: any = {};\n private hasIncrementSlot: boolean = false;\n private hasDecrementSlot: boolean = false;\n private textInput: any;\n\n private didLoaded: boolean = false;\n\n @State() quantity: number = 1;\n @State() fireChangeEvent: boolean = true;\n\n /\n Workaround to fire change event for the input.\n /\n @Watch('quantity')\n watchPropHandler() {\n if (!this.didLoaded) {\n return;\n }\n\n if (!this.fireChangeEvent) {\n this.fireChangeEvent = true;\n return;\n }\n\n Helper.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));\n }\n\n componentWillLoad() {\n this.quantity = parseInt(this.host.getAttribute('value')) \|\| 1;\n this.hasIncrementSlot = !!this.host.querySelector('[slot=\"increment-button\"]');\n this.hasDecrementSlot = !!this.host.querySelector('[slot=\"decrement-button\"]');\n }\n\n componentDidLoad() {\n this.didLoaded = true;\n this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));\n }\n\n private getInputAttributes() {\n for (let i = 0; i < this.host.attributes.length; i++) {\n if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {\n this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;\n }\n }\n\n return this.hostAttributes;\n }\n\n /\n decrease quantity by one.\n * @return HTMLSallaQuantityInputElement\n /\n @Method()\n async decrease() {\n return this.setValue(this.quantity - 1);\n }\n\n /\n increase quantity by one.\n * @return HTMLSallaQuantityInputElement\n /\n @Method()\n async increase() {\n return this.setValue(Number(this.quantity) + 1);\n }\n\n /\n set quantity by one.\n * @return HTMLSallaQuantityInputElement\n */\n @Method()\n async setValue(value, fireChangeEvent = true) {\n this.fireChangeEvent = fireChangeEvent;\n let maxQuantity = parseInt(this.host.getAttribute('max'));\n if (maxQuantity && value > maxQuantity) {\n value = maxQuantity;\n }\n if (value <= 1) {\n value = 1;\n }\n this.quantity = value;\n return this.host;\n }\n\n render() {\n return (\n <Host class=\"s-quantity-input\">\n <div class=\"s-quantity-input-container\">\n <button onClick={() => this.increase()} class=\"s-quantity-input-increase-button s-quantity-input-button\" type=\"button\">\n {!this.hasIncrementSlot ? <span innerHTML={Add}></span> : ''}\n <slot name=\"increment-button\" />\n </button>\n <input class=\"s-quantity-input-input\" {...this.getInputAttributes()}\n ref={(el) => this.textInput = el as HTMLInputElement}\n onInput={(event: any) => this.setValue(event.target.value)}\n min=\"1\"\n value={this.quantity} />\n <button class=\"s-quantity-input-decrease-button s-quantity-input-button\" onClick={() => this.decrease()} type=\"button\">\n {!this.hasDecrementSlot ? <span innerHTML={Minus}></span> : ''}\n <slot name=\"decrement-button\" />\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/salla-quick-order.js CHANGED Viewed

@@ -183,6 +183,8 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.thanksMessage = data.thanks_message;
     this.quickOrderStyle = data.style;
     this.isAvailable = true;
+    // toggle oneClick if true
+    this.oneClick = this.oneClick && !this.isTermsRequired;
   }
   componentWillLoad() {
     return new Promise(resolve => salla.onReady(() => this.loadQuickOrderSettings().then(resolve)));
@@ -201,8 +203,8 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     return (h(Host, { class: `s-quick-order s-quick-order-${this.getDarkOrLight()}` }, h("div", { class: `s-quick-order-container s-quick-order-${this.quickOrderStyle}`, style: { backgroundColor: this.getStyleColor() } }, h("div", { class: "s-quick-order-button-cont" }, h("div", null, h("h3", null, this.quickOrderTitle), h("p", null, this.subTitle)), h("salla-button", { class: this.expanded ? "s-quick-order-btn-close" : "", onClick: (e) => this.submit(e, true), color: this.getBtnColor() }, this.oneClick
       ? this.confirmPayButtonTitle : this.expanded ? h("i", { innerHTML: Cancel }) : this.confirmPayButtonTitle)), h("form", { onSubmit: (e) => this.submit(e), class: 's-quick-order-expandable ' + (this.expanded ? 's-quick-order-shown' : '') }, Salla.config.isGuest() &&
       [
-        h("div", { class: "s-form-group" }, h("span", { innerHTML: PortraitIcon }), h("input", { type: "text", required: true, class: "s-form-control", name: 'name', placeholder: this.userNameLabel, ref: el => (this.nameInput = el) })),
-        h("div", { class: "s-quick-order-flex-input" }, h("div", { class: "s-form-group" }, h("span", { innerHTML: IphoneXIcon }), h("salla-tel-input", { ref: el => (this.phoneInput = el) })), h("div", { class: "s-form-group" }, h("span", { innerHTML: email }), h("input", { type: "email", class: "s-form-control", name: 'email', required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }))),
+        h("div", { class: "s-form-group" }, h("span", { innerHTML: PortraitIcon }), h("input", { type: "text", required: true, class: "s-form-control s-quick-order-phone-field", name: 'name', placeholder: this.userNameLabel, ref: el => (this.nameInput = el) })),
+        h("div", { class: "s-quick-order-flex-input" }, h("div", { class: "s-form-group" }, h("span", { innerHTML: IphoneXIcon }), h("salla-tel-input", { ref: el => (this.phoneInput = el) })), h("div", { class: "s-form-group" }, h("span", { innerHTML: email }), h("input", { type: "email", class: "s-form-control s-quick-order-email-field", name: 'email', required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }))),
       ], this.isTermsRequired && (h("label", { htmlFor: "terms", class: "s-quick-order-terms" }, h("input", { type: "checkbox", required: true, name: 'terms', id: 'terms', ref: el => (this.termsInput = el), onChange: () => (this.termsChecked = this.termsInput.checked), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", h("div", { innerHTML: this.formatAgreementText(this.agreementText, 150) }, this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText))), " "))), h("salla-button", { type: "submit", color: this.getBtnColor(), width: "wide", ref: el => (this.submitBtn = el) }, this.payButtonTitle)), h("salla-modal", { "modal-title": this.agreementModalHead, ref: modal => (this.agreementModal = modal) }, h("article", { innerHTML: this.agreementText })))));
   }
   componentDidLoad() {

package/dist/components/salla-quick-order.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-quick-order.js","mappings":"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","names":["SallaQuickOrder","CancelIcon","MailIcon"],"sources":["./src/components/salla-quick-order/salla-quick-order.scss?tag=salla-quick-order","./src/components/salla-quick-order/salla-quick-order.tsx"],"sourcesContent":["\n.s-quick-order{\n &-container{\n\n }\n &-button-cont{\n\n }\n // The collapsible content. Hidden by default\n &-expandable{\n\n }\n // Shown state of the collapsible content\n &-shown{\n\n }\n &-terms{\n\n }\n &-confirm{\n\n }\n}","import {Component, Host, h, Prop, State, Event, EventEmitter, Element} from '@stencil/core';\nimport CelebrationIcon from '../../assets/svg/party-horn.svg';\nimport PortraitIcon from '../../assets/svg/portrait.svg';\nimport IphoneXIcon from '../../assets/svg/iphone-x.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\nimport {CartRequest, QuickOrderSetting} from '@salla.sa/twilight/types/api/cart';\nimport quickOrderPayload = CartRequest.quickOrderPayload;\nimport CancelIcon from '../../assets/svg/cancel.svg';\n\n@Component({\n tag: 'salla-quick-order',\n styleUrl: 'salla-quick-order.scss',\n})\nexport class SallaQuickOrder {\n\n @Element() host: HTMLElement;\n\n\n // modal refs\n private agreementModal: HTMLSallaModalElement;\n\n // input refs\n private nameInput: HTMLInputElement;\n private emailInput: HTMLInputElement;\n private phoneInput: HTMLSallaTelInputElement;\n private termsInput: HTMLInputElement;\n private submitBtn: HTMLSallaButtonElement;\n\n /*\n quick order title\n /\n @Prop({mutable: true}) quickOrderTitle: string = 'ليش تنتظر؟';\n /\n quick order sub title\n /\n @Prop({mutable: true}) subTitle: string = 'احصل على المنتج مباشرة الآن';\n /\n quick order pay button text\n /\n @Prop({mutable: true}) payButtonTitle: string = 'اطلب المنتج';\n /\n quick order confirm pay button text\n /\n @Prop({mutable: true}) confirmPayButtonTitle: string = 'اشتر الآن';\n /\n agreement text from server or from props\n /\n @Prop({mutable: true}) agreementText: string = salla.lang.get(\n 'pages.checkout.show_full_agreement'\n );\n /\n is email required\n /\n @Prop({mutable: true}) isEmailRequired: boolean = false;\n /\n product id local or from page\n /\n @Prop({mutable: true}) productId: string;\n\n /\n product id local or from page\n /\n @Prop({mutable: true}) thanksMessage: string;\n\n /\n Quick Order Style\n /\n @Prop({mutable: true}) quickOrderStyle: 'gray' \| 'white' \| 'default' = 'default';\n\n /\n * states\n /\n\n @State() user: any;\n @State() isAvailable: boolean = false;\n @State() oneClick: boolean = false;\n @State() expanded: boolean = false;\n @State() isTermsRequired: boolean = false;\n @State() countryCode: string = salla.config.get('user.country_code', 'SA') \|\| 'SA';\n @State() submitSucess: boolean = false;\n //Langugae states\n @State() placeHolderEmail: string = salla.lang.get('common.elements.email');\n @State() emailOptional: string = salla.lang.get('common.elements.optional');\n @State() agreementShowText: string = salla.lang.get('pages.checkout.show_full_agreement');\n @State() agreementModalHead: string = salla.lang.get('pages.checkout.full_agreement');\n @State() userNameLabel: string = salla.lang.get('pages.products.your_name');\n @State() termsChecked: boolean = false;\n\n /\n Custome DOM event emitter when order gets submitted successfully.\n /\n @Event() quickOrderSubmited: EventEmitter;\n\n constructor() {\n salla.onReady(() => {\n this.productId = this.productId \|\| salla.config.get('page.id');\n })\n\n salla.lang.onLoaded(() => {\n this.placeHolderEmail = salla.lang.get('common.elements.email');\n this.emailOptional = salla.lang.get('common.elements.optional');\n this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');\n this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');\n this.userNameLabel = salla.lang.get('pages.products.your_name');\n });\n }\n\n private getBtnColor() {\n return this.quickOrderStyle === 'default' ? 'light' : 'primary';\n }\n\n private getErrorMessage(type, name) {\n return name == 'terms'\n ? salla.lang.get('pages.checkout.check_agreement')\n : salla.lang.get(`common.errors.${type}`, {attribute: name == 'name' ? this.userNameLabel : this.placeHolderEmail});\n }\n\n private handleInvalidInput(e) {\n let input = e.target;\n let validity = input.validity;\n let errorMessage;\n if (validity.valueMissing) {\n errorMessage = this.getErrorMessage('field_required', input.name);\n console.log(this.getErrorMessage('field_required', input.name));\n } else if (validity.typeMismatch) {\n errorMessage = this.getErrorMessage('invalid_value', input.name);\n }\n input.setCustomValidity(errorMessage);\n }\n\n\n private async setWrapperHeight() {\n let expandable: HTMLElement = this.host.querySelector('.s-quick-order-expandable') as HTMLElement;\n setTimeout(() => {\n if (expandable.style.maxHeight \|\| this.oneClick) {\n expandable.style.maxHeight = null;\n } else {\n expandable.style.maxHeight = expandable.scrollHeight + \"px\";\n }\n }, 50);\n }\n\n private getDarkOrLight() {\n return this.quickOrderStyle === 'default' && salla.config.get('theme.color.is_dark') ? 'dark' : 'light';\n }\n\n private getStyleColor() {\n return {\n gray: '#f3f3f3',\n white: '#ffffff',\n default: salla.config.get('theme.color.primary'),\n }[this.quickOrderStyle] \|\| '#f3f3f3';\n }\n\n async submit(e, checkOneClick: boolean = false) {\n e.preventDefault();\n if (checkOneClick && !this.oneClick) {\n this.expanded = !this.expanded;\n this.setWrapperHeight();\n return;\n }\n\n return this.submitBtn.load()\n .then(() => this.getPayload())\n .then((payload: quickOrderPayload) => salla.api.cart.createQuickOrder(payload))\n .then(() => {\n setTimeout(() => {\n this.submitBtn.stop();\n this.submitSucess = true;\n this.quickOrderSubmited.emit();\n }, 200);\n })\n .catch(error => error && (console.error(error), this.submitBtn.stop()));\n }\n\n private async getPayload(): Promise<CartRequest.quickOrderPayload \| Object \| false> {\n if (this.oneClick) {\n return {\n product_ids: [this.productId],\n agreement: true,\n };\n }\n\n return {\n product_ids: [this.productId],\n email: this.emailInput?.value,\n phone: Number((await this.phoneInput?.getValues())?.phone),\n country_code: (await this.phoneInput?.getValues())?.countryCode \|\| this.countryCode,\n name: this.nameInput?.value,\n agreement: this.termsChecked,\n };\n }\n\n formatAgreementText(agreement_text, length = 150) {\n if (!agreement_text) return '';\n if (agreement_text.length <= length) return agreement_text;\n const parsedToDOM = new DOMParser().parseFromString(agreement_text, 'text/html');\n return parsedToDOM.documentElement.innerText.substring(0, length) + '...';\n }\n\n private loadQuickOrderSettings() {\n let data = salla.config.get('store.settings.product.quick_order');\n if (!data) {\n return Promise.resolve();\n }\n\n this.user = salla.config.get('user') \|\| salla.storage.get('user') \|\| {};\n this.countryCode = this.user?.country_code \|\| this.countryCode;\n // make email required if user is gust or is required from server\n this.isEmailRequired = this.user?.email ? false : this.isEmailRequired;\n // check if one click is available\n this.oneClick = this.user?.email;\n this.initComponentData(data);\n return Promise.resolve();\n\n // return salla.api.withoutNotifier(() => salla.api.cart.getQuickOrderSettings().then(res => this.initComponentData(res.data)));\n }\n\n private initComponentData(data: QuickOrderSetting) {\n this.quickOrderTitle = data.title;\n this.subTitle = data.sub_title;\n this.payButtonTitle = data.order_now_button;\n this.isEmailRequired = data.is_email_required;\n this.isTermsRequired = data.show_agreement;\n this.agreementText = data.agreement;\n this.confirmPayButtonTitle = data.confirm_button;\n this.thanksMessage = data.thanks_message;\n this.quickOrderStyle = data.style;\n this.isAvailable = true;\n }\n\n componentWillLoad() {\n return new Promise(resolve => salla.onReady(() => this.loadQuickOrderSettings().then(resolve)))\n }\n\n render() {\n if (!this.isAvailable) {\n return;\n }\n if (this.submitSucess) {\n return (\n <Host class=\"s-quick-order\">\n <div class={'s-quick-order-confirm'} style={{\n backgroundColor: salla.config.get('theme.color.primary') + '10',\n borderColor: salla.config.get('theme.color.primary') + '10',\n color: salla.config.get('theme.color.primary')\n }}>\n <i innerHTML={CelebrationIcon}/>\n <span>{this.thanksMessage}</span>\n </div>\n </Host>\n );\n }\n return (\n <Host class={`s-quick-order s-quick-order-${this.getDarkOrLight()}`}>\n <div class={`s-quick-order-container s-quick-order-${this.quickOrderStyle}`}\n style={{backgroundColor: this.getStyleColor()}}>\n <div class=\"s-quick-order-button-cont\">\n {/todo:: if we can remove this dom, lets do it/}\n <div>\n <h3>{this.quickOrderTitle}</h3>\n <p>{this.subTitle}</p>\n </div>\n\n <salla-button class={this.expanded ? \"s-quick-order-btn-close\" : \"\"} onClick={(e) => this.submit(e, true)}\n color={this.getBtnColor()}>\n {this.oneClick\n ? this.confirmPayButtonTitle : this.expanded ? <i innerHTML={CancelIcon}/> : this.confirmPayButtonTitle}\n </salla-button>\n </div>\n <form onSubmit={(e) => this.submit(e)}\n class={'s-quick-order-expandable ' + (this.expanded ? 's-quick-order-shown' : '')}>\n {/we don't need to show name & phone & email unless it's guest/}\n {Salla.config.isGuest() &&\n [\n <div class=\"s-form-group\">\n <span innerHTML={PortraitIcon}/>\n <input type=\"text\"\n required\n class=\"s-form-control\"\n name='name'\n placeholder={this.userNameLabel}\n ref={el => (this.nameInput = el)}\n />\n </div>\n ,\n <div class=\"s-quick-order-flex-input\">\n <div class=\"s-form-group\">\n <span innerHTML={IphoneXIcon}/>\n <salla-tel-input ref={el => (this.phoneInput = el)}/>\n </div>\n <div class=\"s-form-group\">\n <span innerHTML={MailIcon}/>\n <input type=\"email\"\n class=\"s-form-control\"\n name='email'\n required={this.isEmailRequired}\n placeholder={this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional)}\n ref={el => (this.emailInput = el)}\n />\n </div>\n </div>,\n ]\n }\n {this.isTermsRequired && (\n <label htmlFor=\"terms\" class=\"s-quick-order-terms\">\n <input type=\"checkbox\" required name='terms' id='terms' ref={el => (this.termsInput = el)}\n onChange={() => (this.termsChecked = this.termsInput.checked)} class=\"s-checkbox\"/>\n <span class=\"s-form-label\"> <div innerHTML={this.formatAgreementText(this.agreementText, 150)}>\n {this.agreementText.length > 150 && (\n <salla-button shape=\"link\" onClick={() => this.agreementModal.open()}>\n {this.agreementShowText}\n </salla-button>\n )}\n </div> </span>\n </label>\n )}\n {/ @ts-ignore */}\n <salla-button type=\"submit\" color={this.getBtnColor()} width=\"wide\" ref={el => (this.submitBtn = el)}>\n {this.payButtonTitle}\n </salla-button>\n </form>\n <salla-modal modal-title={this.agreementModalHead} ref={modal => (this.agreementModal = modal)}>\n <article innerHTML={this.agreementText}/>\n </salla-modal>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.host.querySelectorAll('input').forEach(input => {\n input.addEventListener('invalid', e => {\n this.handleInvalidInput(e);\n });\n input.addEventListener('input', () => {\n input.setCustomValidity('');\n input.reportValidity();\n }\n );\n });\n }\n}\n"],"version":3}
1	+ {"file":"salla-quick-order.js","mappings":"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","names":["SallaQuickOrder","CancelIcon","MailIcon"],"sources":["./src/components/salla-quick-order/salla-quick-order.scss?tag=salla-quick-order","./src/components/salla-quick-order/salla-quick-order.tsx"],"sourcesContent":["\n.s-quick-order{\n &-container{\n\n }\n &-button-cont{\n\n }\n // The collapsible content. Hidden by default\n &-expandable{\n\n }\n // Shown state of the collapsible content\n &-shown{\n\n }\n &-terms{\n\n }\n &-confirm{\n\n }\n}","import {Component, Host, h, Prop, State, Event, EventEmitter, Element} from '@stencil/core';\nimport CelebrationIcon from '../../assets/svg/party-horn.svg';\nimport PortraitIcon from '../../assets/svg/portrait.svg';\nimport IphoneXIcon from '../../assets/svg/iphone-x.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\nimport {CartRequest, QuickOrderSetting} from '@salla.sa/twilight/types/api/cart';\nimport quickOrderPayload = CartRequest.quickOrderPayload;\nimport CancelIcon from '../../assets/svg/cancel.svg';\n\n@Component({\n tag: 'salla-quick-order',\n styleUrl: 'salla-quick-order.scss',\n})\nexport class SallaQuickOrder {\n\n @Element() host: HTMLElement;\n\n\n // modal refs\n private agreementModal: HTMLSallaModalElement;\n\n // input refs\n private nameInput: HTMLInputElement;\n private emailInput: HTMLInputElement;\n private phoneInput: HTMLSallaTelInputElement;\n private termsInput: HTMLInputElement;\n private submitBtn: HTMLSallaButtonElement;\n\n /*\n quick order title\n /\n @Prop({mutable: true}) quickOrderTitle: string = 'ليش تنتظر؟';\n /\n quick order sub title\n /\n @Prop({mutable: true}) subTitle: string = 'احصل على المنتج مباشرة الآن';\n /\n quick order pay button text\n /\n @Prop({mutable: true}) payButtonTitle: string = 'اطلب المنتج';\n /\n quick order confirm pay button text\n /\n @Prop({mutable: true}) confirmPayButtonTitle: string = 'اشتر الآن';\n /\n agreement text from server or from props\n /\n @Prop({mutable: true}) agreementText: string = salla.lang.get(\n 'pages.checkout.show_full_agreement'\n );\n /\n is email required\n /\n @Prop({mutable: true}) isEmailRequired: boolean = false;\n /\n product id local or from page\n /\n @Prop({mutable: true}) productId: string;\n\n /\n product id local or from page\n /\n @Prop({mutable: true}) thanksMessage: string;\n\n /\n Quick Order Style\n /\n @Prop({mutable: true}) quickOrderStyle: 'gray' \| 'white' \| 'default' = 'default';\n\n /\n * states\n /\n\n @State() user: any;\n @State() isAvailable: boolean = false;\n @State() oneClick: boolean = false;\n @State() expanded: boolean = false;\n @State() isTermsRequired: boolean = false;\n @State() countryCode: string = salla.config.get('user.country_code', 'SA') \|\| 'SA';\n @State() submitSucess: boolean = false;\n //Langugae states\n @State() placeHolderEmail: string = salla.lang.get('common.elements.email');\n @State() emailOptional: string = salla.lang.get('common.elements.optional');\n @State() agreementShowText: string = salla.lang.get('pages.checkout.show_full_agreement');\n @State() agreementModalHead: string = salla.lang.get('pages.checkout.full_agreement');\n @State() userNameLabel: string = salla.lang.get('pages.products.your_name');\n @State() termsChecked: boolean = false;\n\n /\n Custome DOM event emitter when order gets submitted successfully.\n /\n @Event() quickOrderSubmited: EventEmitter;\n\n constructor() {\n salla.onReady(() => {\n this.productId = this.productId \|\| salla.config.get('page.id');\n })\n\n salla.lang.onLoaded(() => {\n this.placeHolderEmail = salla.lang.get('common.elements.email');\n this.emailOptional = salla.lang.get('common.elements.optional');\n this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');\n this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');\n this.userNameLabel = salla.lang.get('pages.products.your_name');\n });\n }\n\n private getBtnColor() {\n return this.quickOrderStyle === 'default' ? 'light' : 'primary';\n }\n\n private getErrorMessage(type, name) {\n return name == 'terms'\n ? salla.lang.get('pages.checkout.check_agreement')\n : salla.lang.get(`common.errors.${type}`, {attribute: name == 'name' ? this.userNameLabel : this.placeHolderEmail});\n }\n\n private handleInvalidInput(e) {\n let input = e.target;\n let validity = input.validity;\n let errorMessage;\n if (validity.valueMissing) {\n errorMessage = this.getErrorMessage('field_required', input.name);\n console.log(this.getErrorMessage('field_required', input.name));\n } else if (validity.typeMismatch) {\n errorMessage = this.getErrorMessage('invalid_value', input.name);\n }\n input.setCustomValidity(errorMessage);\n }\n\n\n private async setWrapperHeight() {\n let expandable: HTMLElement = this.host.querySelector('.s-quick-order-expandable') as HTMLElement;\n setTimeout(() => {\n if (expandable.style.maxHeight \|\| this.oneClick) {\n expandable.style.maxHeight = null;\n } else {\n expandable.style.maxHeight = expandable.scrollHeight + \"px\";\n }\n }, 50);\n }\n\n private getDarkOrLight() {\n return this.quickOrderStyle === 'default' && salla.config.get('theme.color.is_dark') ? 'dark' : 'light';\n }\n\n private getStyleColor() {\n return {\n gray: '#f3f3f3',\n white: '#ffffff',\n default: salla.config.get('theme.color.primary'),\n }[this.quickOrderStyle] \|\| '#f3f3f3';\n }\n\n async submit(e, checkOneClick: boolean = false) {\n e.preventDefault();\n if (checkOneClick && !this.oneClick) {\n this.expanded = !this.expanded;\n this.setWrapperHeight();\n return;\n }\n\n return this.submitBtn.load()\n .then(() => this.getPayload())\n .then((payload: quickOrderPayload) => salla.api.cart.createQuickOrder(payload))\n .then(() => {\n setTimeout(() => {\n this.submitBtn.stop();\n this.submitSucess = true;\n this.quickOrderSubmited.emit();\n }, 200);\n })\n .catch(error => error && (console.error(error), this.submitBtn.stop()));\n }\n\n private async getPayload(): Promise<CartRequest.quickOrderPayload \| Object \| false> {\n if (this.oneClick) {\n return {\n product_ids: [this.productId],\n agreement: true,\n };\n }\n\n return {\n product_ids: [this.productId],\n email: this.emailInput?.value,\n phone: Number((await this.phoneInput?.getValues())?.phone),\n country_code: (await this.phoneInput?.getValues())?.countryCode \|\| this.countryCode,\n name: this.nameInput?.value,\n agreement: this.termsChecked,\n };\n }\n\n formatAgreementText(agreement_text, length = 150) {\n if (!agreement_text) return '';\n if (agreement_text.length <= length) return agreement_text;\n const parsedToDOM = new DOMParser().parseFromString(agreement_text, 'text/html');\n return parsedToDOM.documentElement.innerText.substring(0, length) + '...';\n }\n\n private loadQuickOrderSettings() {\n let data = salla.config.get('store.settings.product.quick_order');\n if (!data) {\n return Promise.resolve();\n }\n\n this.user = salla.config.get('user') \|\| salla.storage.get('user') \|\| {};\n this.countryCode = this.user?.country_code \|\| this.countryCode;\n // make email required if user is gust or is required from server\n this.isEmailRequired = this.user?.email ? false : this.isEmailRequired;\n // check if one click is available\n this.oneClick = this.user?.email;\n this.initComponentData(data);\n return Promise.resolve();\n\n // return salla.api.withoutNotifier(() => salla.api.cart.getQuickOrderSettings().then(res => this.initComponentData(res.data)));\n }\n\n private initComponentData(data: QuickOrderSetting) {\n this.quickOrderTitle = data.title;\n this.subTitle = data.sub_title;\n this.payButtonTitle = data.order_now_button;\n this.isEmailRequired = data.is_email_required;\n this.isTermsRequired = data.show_agreement;\n this.agreementText = data.agreement;\n this.confirmPayButtonTitle = data.confirm_button;\n this.thanksMessage = data.thanks_message;\n this.quickOrderStyle = data.style;\n this.isAvailable = true;\n // toggle oneClick if true\n this.oneClick = this.oneClick && !this.isTermsRequired\n }\n\n componentWillLoad() {\n return new Promise(resolve => salla.onReady(() => this.loadQuickOrderSettings().then(resolve)))\n }\n\n render() {\n if (!this.isAvailable) {\n return;\n }\n if (this.submitSucess) {\n return (\n <Host class=\"s-quick-order\">\n <div class={'s-quick-order-confirm'} style={{\n backgroundColor: salla.config.get('theme.color.primary') + '10',\n borderColor: salla.config.get('theme.color.primary') + '10',\n color: salla.config.get('theme.color.primary')\n }}>\n <i innerHTML={CelebrationIcon}/>\n <span>{this.thanksMessage}</span>\n </div>\n </Host>\n );\n }\n return (\n <Host class={`s-quick-order s-quick-order-${this.getDarkOrLight()}`}>\n <div class={`s-quick-order-container s-quick-order-${this.quickOrderStyle}`}\n style={{backgroundColor: this.getStyleColor()}}>\n <div class=\"s-quick-order-button-cont\">\n {/todo:: if we can remove this dom, lets do it/}\n <div>\n <h3>{this.quickOrderTitle}</h3>\n <p>{this.subTitle}</p>\n </div>\n\n <salla-button class={this.expanded ? \"s-quick-order-btn-close\" : \"\"} onClick={(e) => this.submit(e, true)}\n color={this.getBtnColor()}>\n {this.oneClick\n ? this.confirmPayButtonTitle : this.expanded ? <i innerHTML={CancelIcon}/> : this.confirmPayButtonTitle}\n </salla-button>\n </div>\n <form onSubmit={(e) => this.submit(e)}\n class={'s-quick-order-expandable ' + (this.expanded ? 's-quick-order-shown' : '')}>\n {/we don't need to show name & phone & email unless it's guest/}\n {Salla.config.isGuest() &&\n [\n <div class=\"s-form-group\">\n <span innerHTML={PortraitIcon}/>\n <input type=\"text\"\n required\n class=\"s-form-control s-quick-order-phone-field\"\n name='name'\n placeholder={this.userNameLabel}\n ref={el => (this.nameInput = el)}\n />\n </div>\n ,\n <div class=\"s-quick-order-flex-input\">\n <div class=\"s-form-group\">\n <span innerHTML={IphoneXIcon}/>\n <salla-tel-input ref={el => (this.phoneInput = el)}/>\n </div>\n <div class=\"s-form-group\">\n <span innerHTML={MailIcon}/>\n <input type=\"email\"\n class=\"s-form-control s-quick-order-email-field\"\n name='email'\n required={this.isEmailRequired}\n placeholder={this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional)}\n ref={el => (this.emailInput = el)}\n />\n </div>\n </div>,\n ]\n }\n {this.isTermsRequired && (\n <label htmlFor=\"terms\" class=\"s-quick-order-terms\">\n <input type=\"checkbox\" required name='terms' id='terms' ref={el => (this.termsInput = el)}\n onChange={() => (this.termsChecked = this.termsInput.checked)} class=\"s-checkbox\"/>\n <span class=\"s-form-label\"> <div innerHTML={this.formatAgreementText(this.agreementText, 150)}>\n {this.agreementText.length > 150 && (\n <salla-button shape=\"link\" onClick={() => this.agreementModal.open()}>\n {this.agreementShowText}\n </salla-button>\n )}\n </div> </span>\n </label>\n )}\n {/ @ts-ignore */}\n <salla-button type=\"submit\" color={this.getBtnColor()} width=\"wide\" ref={el => (this.submitBtn = el)}>\n {this.payButtonTitle}\n </salla-button>\n </form>\n <salla-modal modal-title={this.agreementModalHead} ref={modal => (this.agreementModal = modal)}>\n <article innerHTML={this.agreementText}/>\n </salla-modal>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.host.querySelectorAll('input').forEach(input => {\n input.addEventListener('invalid', e => {\n this.handleInvalidInput(e);\n });\n input.addEventListener('input', () => {\n input.setCustomValidity('');\n input.reportValidity();\n }\n );\n });\n }\n}\n"],"version":3}