npm - @salla.sa/twilight-components - Versions diffs - 2.12.69 → 2.12.72 - Mend

@salla.sa/twilight-components 2.12.69 → 2.12.72

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-filters.js","sourceRoot":"","sources":["../../../src/components/salla-filters/salla-filters.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Event, EventEmitter, Host, Method, Prop, State } from '@stencil/core';\nimport { Filter, FilterOptionInputType, FilterOptionTypes } from \"./interfaces\";\n\n@Component({\n tag: 'salla-filters',\n styleUrl: 'salla-filters.scss',\n})\nexport class SallaFilters {\n\n constructor() {\n salla.event.on('filters::hidden', () => this.host.style.display = 'none');\n\n salla.lang.onLoaded(() => {\n this.apply = salla.lang.get('pages.checkout.apply');\n this.reset = salla.lang.get('pages.categories.filters_reset');\n });\n\n salla.event.on('filters::fetched', ({ filters }) => {\n this.host.style.display = '';\n let freshFilterData = {};\n this.filters = filters\n .map((filter: Filter) => {\n filter.label = {\n category_id: salla.lang.get('common.titles.categories'),\n brand_id: salla.lang.get('common.titles.brands'),\n rating: salla.lang.get('pages.categories.filter_rating'),\n price: salla.lang.get('pages.categories.filter_price'),\n }[filter.key] \|\| filter.label;\n filter.inputType = FilterOptionInputType.RADIO;//todo:: support FilterOptionInputType.CHECKBOX\n if (filter.key == 'rating') {\n filter.inputType = FilterOptionInputType.RADIO;\n //@ts-ignore\n let { max, min } = filter.values;\n //@ts-ignore\n filter.values = [5, 4, 3, 2, 1].filter(stars => stars >= min \|\| stars <= max)\n }\n\n //when getting new filters, maybe less than we had, so let's get from the old one, only what is existed now.\n if (this.filtersData[filter.key]) {\n freshFilterData[filter.key] = this.filtersData[filter.key];\n }\n\n return filter;\n });\n this.filtersData = freshFilterData;\n this.host.childNodes.forEach(async (widget: HTMLSallaFiltersWidgetElement) => widget.setWidgetHeight && await widget.setWidgetHeight())\n });\n }\n\n connectedCallback() {\n try {\n let filters = (new URLSearchParams(window.location.search)).get('filters')\n this.filtersData = filters ? JSON.parse(decodeURIComponent(filters)) : {};\n } catch (e) {\n salla.logger.warn('failed to get filters from url', e.message);\n }\n }\n\n @Element() host: HTMLElement;\n\n /*\n Array of filter options\n /\n @Prop({ reflect: true, mutable: true }) filters?: Filter[];\n\n private isReady = false;//to avoid triggering the changed event\n\n @State() isSidebarOpen: boolean;\n @State() filtersData: object \| any = {}\n @State() apply: string;\n @State() reset: string;\n\n /\n Custom event fired when the selected filters are changed.\n /\n @Event() changed: EventEmitter;\n\n /\n Method to get filter data.\n /\n @Method()\n async getFilters() {\n return this.filtersData;\n }\n\n /\n Apply filter action.\n /\n @Method()\n async applyFilters() {\n if (!this.isReady) {\n return;\n }\n let hasFilters = Object.keys(this.filtersData).length > 0;\n setTimeout(() => {\n if (hasFilters) {\n window.history.pushState({}, '', salla.url.addParamToUrl('filters', encodeURIComponent(JSON.stringify(this.filtersData))));\n } else {\n let url = new URL(window.location.href);\n url.searchParams?.delete('filters');\n window.history.pushState({}, '', url.toString());\n }\n salla.event.emit('salla-filters::changed', this.filtersData);\n this.changed.emit(this.filtersData);\n }, 300);\n }\n\n /\n Reset selected filters.\n /\n @Method()\n async resetFilters() {\n this.filtersData = {};\n this.host.childNodes.forEach((widget: HTMLSallaFiltersWidgetElement) => widget.reset && widget.reset())\n salla.event.emit('salla-filters::reset');\n return this.applyFilters();\n }\n\n\n /\n @param {{target:HTMLInputElement}} event\n * @param option\n * @param value\n * @private\n /\n private handleOptionChange(event, option: Filter, value) {\n if (option.type === FilterOptionTypes.RANGE) {\n this.filtersData[option.key] = value;\n\n }\n let isChecked = event.target.checked;\n\n if (option.type === FilterOptionTypes.VARIANTS) {\n this.filtersData.variants = this.filtersData.variants \|\| {};\n isChecked && (this.filtersData.variants[option.key] = value);\n isChecked \|\| (delete this.filtersData.variants[option.key]);\n\n }\n\n if (event.target.type == FilterOptionInputType.RADIO) {\n isChecked && (this.filtersData[option.key] = value);\n isChecked \|\| (delete this.filtersData[option.key]);\n }\n\n //it's checkbox\n // add if condition to avoid error when the filter is not existed in the filtersData\n if (event.target.type == FilterOptionInputType.CHECKBOX) {\n this.filtersData[option.key] = this.filtersData[option.key] \|\| [];\n if (isChecked) {\n this.filtersData[option.key].push(value);\n\n }\n this.filtersData[option.key] = this.filtersData[option.key].filter(val => val != value);\n }\n this.applyFilters();\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"]}
1	+ {"version":3,"file":"salla-filters.js","sourceRoot":"","sources":["../../../src/components/salla-filters/salla-filters.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Event, EventEmitter, Host, Method, Prop, State } from '@stencil/core';\nimport { Filter, FilterOptionInputType, FilterOptionTypes } from \"./interfaces\";\n\n@Component({\n tag: 'salla-filters',\n styleUrl: 'salla-filters.scss',\n})\nexport class SallaFilters {\n\n constructor() {\n salla.event.on('filters::hidden', () => this.host.style.display = 'none');\n\n salla.lang.onLoaded(() => {\n this.apply = salla.lang.get('pages.checkout.apply');\n this.reset = salla.lang.get('pages.categories.filters_reset');\n });\n\n salla.event.on('filters::fetched', ({ filters }) => {\n this.host.style.display = '';\n let freshFilterData = {};\n this.filters = filters\n .map((filter: Filter) => {\n filter.label = {\n category_id: salla.lang.get('common.titles.categories'),\n brand_id: salla.lang.get('common.titles.brands'),\n rating: salla.lang.get('pages.categories.filter_rating'),\n price: salla.lang.get('pages.categories.filter_price'),\n }[filter.key] \|\| filter.label;\n filter.inputType = FilterOptionInputType.RADIO;//todo:: support FilterOptionInputType.CHECKBOX\n if (filter.key == 'rating') {\n filter.inputType = FilterOptionInputType.RADIO;\n //@ts-ignore\n let { max, min } = filter.values;\n //@ts-ignore\n filter.values = [5, 4, 3, 2, 1].filter(stars => stars >= min \|\| stars <= max)\n }\n\n //when getting new filters, maybe less than we had, so let's get from the old one, only what is existed now.\n if (this.filtersData[filter.key]) {\n freshFilterData[filter.key] = this.filtersData[filter.key];\n }\n\n return filter;\n });\n this.filtersData = freshFilterData;\n this.host.childNodes.forEach(async (widget: HTMLSallaFiltersWidgetElement) => widget.setWidgetHeight && await widget.setWidgetHeight())\n });\n }\n\n connectedCallback() {\n try {\n const searchParams = new URLSearchParams(window.location.search);\n const filterObject = {};\n\n for (const [key, value] of searchParams.entries()) {\n const keys = key.replace(/\\]/g, '').split('[');\n keys.reduce((obj, keyPart, index, array) => {\n const isLastKey = index === array.length - 1;\n const finalKey = /^\\d+$/.test(keyPart) ? parseInt(keyPart, 10) : keyPart;\n if (isLastKey) {\n if (/^\\d+$/.test(keyPart)) {\n this.addObjectValue(obj, array[index - 1], value)\n return obj[array[index - 1]];\n } else if (obj[finalKey]) {\n obj[finalKey] = [obj[finalKey], value];\n } else {\n obj[finalKey] = value;\n }\n } else {\n obj[finalKey] = obj[finalKey] \|\| {};\n }\n\n return obj[finalKey];\n }, filterObject);\n }\n\n this.filtersData = this.flattenObject(filterObject[\"filters\"]) \|\| {};\n } catch (e) {\n salla.logger.warn('failed to get filters from url', e.message);\n }\n\n }\n\n private flattenObject(obj: any) {\n for (const key in obj) {\n if (typeof obj[key] === 'object') {\n if (obj[key][key] && Array.isArray(obj[key][key])) {\n obj[key] = obj[key][key];\n } else {\n this.flattenObject(obj[key]);\n }\n }\n }\n return obj;\n }\n\n\n private addObjectValue(obj, key, value) {\n if (obj.hasOwnProperty(key)) {\n if (Array.isArray(obj[key])) {\n obj[key].push(value);\n } else {\n obj[key] = [obj[key], value];\n }\n } else {\n obj[key] = [value];\n }\n }\n\n\n @Element() host: HTMLElement;\n\n /*\n Array of filter options\n /\n @Prop({ reflect: true, mutable: true }) filters?: Filter[];\n\n private isReady = false;//to avoid triggering the changed event\n\n @State() isSidebarOpen: boolean;\n @State() filtersData: object \| any = {}\n @State() apply: string;\n @State() reset: string;\n\n /\n Custom event fired when the selected filters are changed.\n /\n @Event() changed: EventEmitter;\n\n /\n Method to get filter data.\n /\n @Method()\n async getFilters() {\n return this.filtersData;\n }\n\n /\n Apply filter action.\n /\n @Method()\n async applyFilters() {\n if (!this.isReady) {\n return;\n }\n let hasFilters = Object.keys(this.filtersData).length > 0;\n setTimeout(() => {\n if (hasFilters) {\n let url = new URL(window.location.href);\n for (const [key] of url.searchParams.entries()) {\n if (key.startsWith(\"filters\")) {\n url.searchParams.delete(key);\n }\n }\n let encodedFilterValues = this.encodeFilters(this.filtersData)\n url.search = url.search ? url.search.split(\"&filters\")[0] + \"&\" + encodedFilterValues : `?${encodedFilterValues}`;\n window.history.pushState({}, '', url.href);\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 private encodeFilters(filters, parentKey = 'filters') {\n const encodedFilters = [];\n\n for (const key in filters) {\n if (Object.prototype.hasOwnProperty.call(filters, key)) {\n const value = filters[key];\n\n const fullKey = parentKey ? `${parentKey}[${key}]` : key;\n if (Array.isArray(value)) {\n for (let i = 0; i < value.length; i++) {\n encodedFilters.push(`${fullKey}[${i}]=${value[i]}`)\n }\n }\n else if (typeof value === 'object' && value !== null) {\n encodedFilters.push(this.encodeFilters(value, fullKey));\n } else {\n // const encodedKey = encodeURIComponent(fullKey);\n // const encodedValue = encodeURIComponent(value);\n let result = `${fullKey}=${value}`\n encodedFilters.push(result);\n }\n }\n }\n return encodedFilters.join('&');\n };\n\n /\n Reset selected filters.\n /\n @Method()\n async resetFilters() {\n this.removeFiltersQueryParams()\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 private removeFiltersQueryParams() {\n const searchParams = new URLSearchParams(window.location.search);\n\n const newUrl = Array.from(searchParams.keys())\n .filter(key => !key.startsWith('filters['))\n .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(searchParams.get(key))}`)\n .join('&');\n\n const finalUrl = newUrl ? `${window.location.pathname}?${newUrl}` : window.location.pathname;\n window.history.pushState({}, '', finalUrl);\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\n }\n let isChecked = event.target.checked;\n\n if (option.type === FilterOptionTypes.VARIANTS) {\n this.filtersData.variants = this.filtersData.variants \|\| {};\n isChecked && (this.filtersData.variants[option.key] = value);\n isChecked \|\| (delete this.filtersData.variants[option.key]);\n\n }\n\n if (event.target.type == FilterOptionInputType.RADIO) {\n isChecked && (this.filtersData[option.key] = value);\n isChecked \|\| (delete this.filtersData[option.key]);\n }\n\n //it's checkbox\n // add if condition to avoid error when the filter is not existed in the filtersData\n if (event.target.type == FilterOptionInputType.CHECKBOX) {\n this.filtersData[option.key] = this.filtersData[option.key] \|\| [];\n if (isChecked) {\n this.filtersData[option.key].push(value);\n\n }\n this.filtersData[option.key] = this.filtersData[option.key].filter(val => val != value);\n }\n this.applyFilters();\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"]}

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

@@ -70,18 +70,22 @@ export class SallaFiltersWidget {
     if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {
       return '';
     }
-    //@ts-ignore
-    return option.values.map((filterOption, index) => {
+    const disabledAndSelectedOption = [];
+    const otherOptions = [];
+    option.values.forEach((filterOption, index) => {
       let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);
-      return h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${index}` }, h("input", { id: `${option.key}-option-${index}`, name: option.key, type: option.inputType,
-        //TODO:: debug more why sometimes it's not rendered as selected🤨
-        checked: this.isSelectedOption(option, value), class: `s-filters-${option.inputType}`, onChange: e => this.changed.emit({ event: e, option: option, value: value }) }), this.getOptionLabel(option, filterOption));
+      const isDisabledAndSelected = this.page.slug == 'product.index' && Number(filterOption.key) == this.page.id;
+      const label = (h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${index}`, style: { "opacity": isDisabledAndSelected ? "0.6" : "1" } }, h("input", { id: `${option.key}-option-${index}`, name: isDisabledAndSelected ? "current-category" : option.key, type: isDisabledAndSelected ? "checkbox" : option.inputType, checked: isDisabledAndSelected || this.isSelectedOption(option, value), disabled: isDisabledAndSelected, class: `s-filters-${isDisabledAndSelected ? "checkbox" : option.inputType}`, onChange: e => !isDisabledAndSelected ? this.changed.emit({ event: e, option: option, value: value }) : null }), this.getOptionLabel(option, filterOption)));
+      if (isDisabledAndSelected) {
+        disabledAndSelectedOption.unshift(label); // Add to the beginning of the disabledAndSelectedOption array
+      }
+      else {
+        otherOptions.push(label); // Add to the end of the otherOptions array
+      }
     });
+    return disabledAndSelectedOption.concat(otherOptions);
   }
   isSelectedOption(option, value) {
-    if (this.page.slug == 'product.index' && this.option.key == 'category_id') {
-      return this.page.id == value;
-    }
     if (!this.filtersData || !this.filtersData[option.key]) {
       return false;
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-filters-widget.js","sourceRoot":"","sources":["../../../src/components/salla-filters-widget/salla-filters-widget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Method, State, Prop, Event, Element } from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\nimport { Filter, FilterOptionInputType, FilterOptionTypes } from \"../salla-filters/interfaces\";\n\n@Component({\n tag: 'salla-filters-widget',\n styleUrl: 'salla-filters-widget.scss',\n})\nexport class SallaFiltersWidget {\n @Element() host: HTMLElement;\n\n /*\n Show more or less filter options.\n /\n @Prop({ mutable: true }) withLoadMore: boolean;\n\n /\n Selected filter options value.\n /\n @Prop({ reflect: true }) filtersData: object;\n\n /\n Filter option along with possible values.\n /\n @Prop({ reflect: true }) option: Filter;\n\n\n priceRange: HTMLSallaPriceRangeElement\n\n\n private widgetValues: HTMLElement;\n private widgetContent: HTMLDivElement;\n private initHeight: number = 195;\n\n @State() isOpen: boolean = true;\n @State() isShowMore: boolean = false;\n @State() showMoreLabel: string = \"عرض المزيد\";\n @State() showLessLabel: string = \"عرض أقل\";\n @State() page: any = salla.config.get('page');\n\n /\n Custom event emitted up on filter option selection changes.\n /\n @Event() changed: any;\n\n connectedCallback() {\n //lets be smart and don't show 5 and more link for 8 options\n this.withLoadMore = this.option.key != 'price' && Array.isArray(this.option.values) && this.option.values.length > 8;\n salla.onReady(() => {\n this.page = salla.config.get('page');\n })\n salla.lang.onLoaded(() => {\n this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel)\n this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel)\n })\n }\n\n componentDidLoad() {\n this.widgetValues.scrollHeight < this.initHeight && (this.withLoadMore = false);\n (this.withLoadMore && this.widgetValues) && (this.widgetValues.style.maxHeight = `${this.initHeight}px`);\n this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n }\n\n @Method()\n async setWidgetHeight(delay = 250) {\n this.widgetContent.removeAttribute('style');\n setTimeout(() => {\n let currentWidgetHeight: number = this.widgetContent.offsetHeight;\n this.widgetContent.style.height = currentWidgetHeight + 'px';\n }, delay)\n }\n\n /\n Reset selected filter options.\n /\n @Method()\n async reset() {\n if (this.option.type === FilterOptionTypes.RANGE) {\n this.priceRange.reset()\n }\n Array.from(this.host.querySelectorAll('input')).forEach(input => input.checked = false);\n }\n\n\n /\n Action to show more or less filter options.\n /\n @Method()\n async showMore() {\n this.isShowMore = !this.isShowMore\n this.widgetContent.style.height = 'auto';\n this.widgetValues.style.maxHeight = this.isShowMore ? `${this.widgetValues.scrollHeight}px` : `${this.initHeight}px`;\n setTimeout(() => {\n this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n }, 400); // get height after time of collapse animtion (duration-300)\n }\n\n /\n Action to toggle widget open or closed (expand/ collapse).\n */\n @Method()\n async toggleWidget() {\n this.isOpen = !this.isOpen;\n Helper.toggleElementClassIf(this.widgetContent, 's-filters-widget-opened', 's-filters-widget-closed', () => this.isOpen);\n }\n\n renderFilterOption(option: Filter) {\n if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {\n return '';\n }\n //@ts-ignore\n return option.values.map((filterOption, index) => {\n let value = typeof filterOption == 'number' ? filterOption : (filterOption.key \|\| filterOption.value);\n\n return <label class=\"s-filters-label\" htmlFor={`${option.key}-option-${index}`}>\n <input\n id={`${option.key}-option-${index}`}\n name={option.key}\n type={option.inputType}\n //TODO:: debug more why sometimes it's not rendered as selected🤨\n checked={this.isSelectedOption(option, value)}\n class={`s-filters-${option.inputType}`}\n onChange={e => this.changed.emit({ event: e, option: option, value: value })}\n />\n {this.getOptionLabel(option, filterOption)}\n </label>\n }\n )\n }\n\n private isSelectedOption(option: Filter, value) {\n if (this.page.slug == 'product.index' && this.option.key == 'category_id') {\n return this.page.id == value\n }\n \n if (!this.filtersData \|\| !this.filtersData[option.key]) {\n return false\n }\n\n return option.inputType === FilterOptionInputType.CHECKBOX\n ? this.filtersData[option.key].includes(value)\n : this.filtersData[option.key] == value;\n }\n\n private getOptionLabel(option: Filter, filterOption) {\n if (option.key == 'rating') {\n //in amazon has stars & up, should we add it, to avoid those people who will come to say I selected 4 why I see 5 sars products\n return <salla-rating-stars size=\"small\" value={filterOption} />;\n }\n let label = filterOption.value \|\| 'null';\n //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';\n return <span class=\"s-filters-option-name\">{label}</span>;\n }\n\n render() {\n return (\n <Host class=\"s-filters-widget-container\">\n <h3 class=\"s-filters-widget-title\" onClick={() => this.toggleWidget()}>\n <span>{this.option.label}</span>\n <span class={`s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}`} />\n </h3>\n <div class=\"s-filters-widget-content\" ref={(el) => this.widgetContent = el}>\n <div class=\"s-filters-widget-values\" ref={(el) => this.widgetValues = el}>\n <slot />\n {\n this.option.type !== FilterOptionTypes.RANGE\n ? this.renderFilterOption(this.option)\n : <salla-price-range onChanged={(event) => this.changed.emit(event.detail)}\n ref={price => this.priceRange = price}\n filtersData={this.filtersData}\n option={this.option} />\n }\n </div>\n {this.withLoadMore &&\n <a class=\"s-filters-widget-more\"\n onClick={() => this.showMore()}>{!this.isShowMore ? this.showMoreLabel : this.showLessLabel}</a>\n }\n </div>\n </Host>\n );\n }\n\n}\n"]}
1	+ {"version":3,"file":"salla-filters-widget.js","sourceRoot":"","sources":["../../../src/components/salla-filters-widget/salla-filters-widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAU,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAM/F,MAAM,OAAO,kBAAkB;;IAwBrB,eAAU,GAAW,GAAG,CAAC;;;;kBAEN,IAAI;sBACA,KAAK;yBACH,YAAY;yBACZ,SAAS;gBACrB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;;EAO7C,iBAAiB;IACf,4DAA4D;IAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IACrH,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;MACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC,CAAC,CAAA;IACF,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;MACxF,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,2BAA2B,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IACjG,CAAC,CAAC,CAAA;EACJ,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC;IAChF,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;IACzG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,IAAI,CAAC;EAC3E,CAAC;EAGD,KAAK,CAAC,eAAe,CAAC,KAAK,GAAG,GAAG;IAC/B,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,mBAAmB,GAAW,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC;MAClE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC/D,CAAC,EAAE,KAAK,CAAC,CAAA;EACX,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC,KAAK,EAAE;MAChD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;KACxB;IACD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;EAC1F,CAAC;EAGD;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAA;IAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IACzC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC;IACrH,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,IAAI,CAAC;IAC3E,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,4DAA4D;EACvE,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC3B,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC3H,CAAC;EAED,kBAAkB,CAAC,MAAc;IAC/B,IAAI,CAAC,CAAC,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;MAC5G,OAAO,EAAE,CAAC;KACX;IAED,MAAM,yBAAyB,GAAG,EAAE,CAAC;IACrC,MAAM,YAAY,GAAG,EAAE,CAAC;IAExB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE;MAC5C,IAAI,KAAK,GAAG,OAAO,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;MAEtG,MAAM,qBAAqB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,eAAe,IAAI,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;MAE5G,MAAM,KAAK,GAAG,CACZ,aAAO,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,WAAW,KAAK,EAAE,EAAE,KAAK,EAAE,EAAC,SAAS,EAAG,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAC;QAC/H,aACE,EAAE,EAAE,GAAG,MAAM,CAAC,GAAG,WAAW,KAAK,EAAE,EACnC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAC7D,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAC3D,OAAO,EAAE,qBAAqB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,CAAC,EACtE,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,aAAa,qBAAqB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAC3E,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAC5G;QACD,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CACpC,CACT,CAAC;MAEF,IAAI,qBAAqB,EAAE;QACzB,yBAAyB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,8DAA8D;OACzG;WAAM;QACL,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,2CAA2C;OACtE;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,yBAAyB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;EACxD,CAAC;EAKO,gBAAgB,CAAC,MAAc,EAAE,KAAK;IAG5C,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;MACtD,OAAO,KAAK,CAAA;KACb;IAED,OAAO,MAAM,CAAC,SAAS,KAAK,qBAAqB,CAAC,QAAQ;MACxD,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;MAC9C,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC;EAC5C,CAAC;EAEO,cAAc,CAAC,MAAc,EAAE,YAAY;IACjD,IAAI,MAAM,CAAC,GAAG,IAAI,QAAQ,EAAE;MAC1B,+HAA+H;MAC/H,OAAO,0BAAoB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,GAAI,CAAC;KACjE;IACD,IAAI,KAAK,GAAG,YAAY,CAAC,KAAK,IAAI,MAAM,CAAC;IACzC,oFAAoF;IACpF,OAAO,YAAM,KAAK,EAAC,uBAAuB,IAAE,KAAK,CAAQ,CAAC;EAC5D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,4BAA4B;MACtC,UAAI,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;QACnE,gBAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ;QAChC,YAAM,KAAK,EAAE,8BAA8B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CACpG;MACL,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE;QACxE,WAAK,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE;UACtE,eAAQ;UAEN,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC,KAAK;YAC1C,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC;YACtC,CAAC,CAAC,yBAAmB,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACxE,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI,CAEzB;QACL,IAAI,CAAC,YAAY;UAChB,SAAG,KAAK,EAAC,uBAAuB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAK,CAEhG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Method, State, Prop, Event, Element } from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\nimport { Filter, FilterOptionInputType, FilterOptionTypes } from \"../salla-filters/interfaces\";\n\n@Component({\n tag: 'salla-filters-widget',\n styleUrl: 'salla-filters-widget.scss',\n})\nexport class SallaFiltersWidget {\n @Element() host: HTMLElement;\n\n /*\n Show more or less filter options.\n /\n @Prop({ mutable: true }) withLoadMore: boolean;\n\n /\n Selected filter options value.\n /\n @Prop({ reflect: true }) filtersData: object;\n\n /\n Filter option along with possible values.\n /\n @Prop({ reflect: true }) option: Filter;\n\n\n priceRange: HTMLSallaPriceRangeElement\n\n\n private widgetValues: HTMLElement;\n private widgetContent: HTMLDivElement;\n private initHeight: number = 195;\n\n @State() isOpen: boolean = true;\n @State() isShowMore: boolean = false;\n @State() showMoreLabel: string = \"عرض المزيد\";\n @State() showLessLabel: string = \"عرض أقل\";\n @State() page: any = salla.config.get('page');\n\n /\n Custom event emitted up on filter option selection changes.\n /\n @Event() changed: any;\n\n connectedCallback() {\n //lets be smart and don't show 5 and more link for 8 options\n this.withLoadMore = this.option.key != 'price' && Array.isArray(this.option.values) && this.option.values.length > 8;\n salla.onReady(() => {\n this.page = salla.config.get('page');\n })\n salla.lang.onLoaded(() => {\n this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel)\n this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel)\n })\n }\n\n componentDidLoad() {\n this.widgetValues.scrollHeight < this.initHeight && (this.withLoadMore = false);\n (this.withLoadMore && this.widgetValues) && (this.widgetValues.style.maxHeight = `${this.initHeight}px`);\n this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n }\n\n @Method()\n async setWidgetHeight(delay = 250) {\n this.widgetContent.removeAttribute('style');\n setTimeout(() => {\n let currentWidgetHeight: number = this.widgetContent.offsetHeight;\n this.widgetContent.style.height = currentWidgetHeight + 'px';\n }, delay)\n }\n\n /\n Reset selected filter options.\n /\n @Method()\n async reset() {\n if (this.option.type === FilterOptionTypes.RANGE) {\n this.priceRange.reset()\n }\n Array.from(this.host.querySelectorAll('input')).forEach(input => input.checked = false);\n }\n\n\n /\n Action to show more or less filter options.\n /\n @Method()\n async showMore() {\n this.isShowMore = !this.isShowMore\n this.widgetContent.style.height = 'auto';\n this.widgetValues.style.maxHeight = this.isShowMore ? `${this.widgetValues.scrollHeight}px` : `${this.initHeight}px`;\n setTimeout(() => {\n this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n }, 400); // get height after time of collapse animtion (duration-300)\n }\n\n /\n Action to toggle widget open or closed (expand/ collapse).\n */\n @Method()\n async toggleWidget() {\n this.isOpen = !this.isOpen;\n Helper.toggleElementClassIf(this.widgetContent, 's-filters-widget-opened', 's-filters-widget-closed', () => this.isOpen);\n }\n\n renderFilterOption(option: Filter) {\n if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {\n return '';\n }\n \n const disabledAndSelectedOption = [];\n const otherOptions = [];\n \n option.values.forEach((filterOption, index) => {\n let value = typeof filterOption == 'number' ? filterOption : (filterOption.key \|\| filterOption.value);\n \n const isDisabledAndSelected = this.page.slug == 'product.index' && Number(filterOption.key) == this.page.id;\n \n const label = (\n <label class=\"s-filters-label\" htmlFor={`${option.key}-option-${index}`} style={{\"opacity\" : isDisabledAndSelected ? \"0.6\" : \"1\"}}>\n <input\n id={`${option.key}-option-${index}`}\n name={isDisabledAndSelected ? \"current-category\" : option.key}\n type={isDisabledAndSelected ? \"checkbox\" : option.inputType}\n checked={isDisabledAndSelected \|\| this.isSelectedOption(option, value)}\n disabled={isDisabledAndSelected}\n class={`s-filters-${isDisabledAndSelected ? \"checkbox\" : option.inputType}`}\n onChange={e => !isDisabledAndSelected ? this.changed.emit({ event: e, option: option, value: value }) : null}\n />\n {this.getOptionLabel(option, filterOption)}\n </label>\n );\n \n if (isDisabledAndSelected) {\n disabledAndSelectedOption.unshift(label); // Add to the beginning of the disabledAndSelectedOption array\n } else {\n otherOptions.push(label); // Add to the end of the otherOptions array\n }\n });\n \n return disabledAndSelectedOption.concat(otherOptions);\n }\n \n \n \n\n private isSelectedOption(option: Filter, value) {\n\n \n if (!this.filtersData \|\| !this.filtersData[option.key]) {\n return false\n }\n\n return option.inputType === FilterOptionInputType.CHECKBOX\n ? this.filtersData[option.key].includes(value)\n : this.filtersData[option.key] == value;\n }\n\n private getOptionLabel(option: Filter, filterOption) {\n if (option.key == 'rating') {\n //in amazon has stars & up, should we add it, to avoid those people who will come to say I selected 4 why I see 5 sars products\n return <salla-rating-stars size=\"small\" value={filterOption} />;\n }\n let label = filterOption.value \|\| 'null';\n //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';\n return <span class=\"s-filters-option-name\">{label}</span>;\n }\n\n render() {\n return (\n <Host class=\"s-filters-widget-container\">\n <h3 class=\"s-filters-widget-title\" onClick={() => this.toggleWidget()}>\n <span>{this.option.label}</span>\n <span class={`s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}`} />\n </h3>\n <div class=\"s-filters-widget-content\" ref={(el) => this.widgetContent = el}>\n <div class=\"s-filters-widget-values\" ref={(el) => this.widgetValues = el}>\n <slot />\n {\n this.option.type !== FilterOptionTypes.RANGE\n ? this.renderFilterOption(this.option)\n : <salla-price-range onChanged={(event) => this.changed.emit(event.detail)}\n ref={price => this.priceRange = price}\n filtersData={this.filtersData}\n option={this.option} />\n }\n </div>\n {this.withLoadMore &&\n <a class=\"s-filters-widget-more\"\n onClick={() => this.showMore()}>{!this.isShowMore ? this.showMoreLabel : this.showLessLabel}</a>\n }\n </div>\n </Host>\n );\n }\n\n}\n"]}

package/dist/collection/components/salla-price-range/salla-price-range.js CHANGED Viewed

@@ -16,6 +16,8 @@ export class SallaPriceRange {
     this.lessThanLabel = "أقل من";
     this.toLabel = "الى";
     this.fromLabel = "من";
+    this.typing = false;
+    this.debounce = setTimeout(() => '', 1000);
   }
   connectedCallback() {
     var _a;
@@ -72,26 +74,37 @@ export class SallaPriceRange {
   handleMinMaxPrice(event, value) {
     //todo:: cover when from is star
     this.minPrice = value.from;
-    this.maxPrice = value.to != '*' ? value.to : null;
+    this.maxPrice = value.to != '*' ? value.to : "";
     this.changedEventHandler(event);
   }
   async changedEventHandler(event, isMin = false) {
+    this.typing = true;
     salla.helpers.inputDigitsOnly(event.target);
-    let value = event ? event.target.value * 1 : null;
-    if (isMin) {
-      this.minInputValidation(value);
-    }
-    else {
-      this.maxInputValidation(value);
-    }
-    this.isReady && this.changed.emit({
-      event: event,
-      option: this.option,
-      value: { max: this.maxPrice, min: this.minPrice }
-    });
+    let value = event ? event.target.value * 1 : "";
+    clearTimeout(this.debounce);
+    this.debounce = setTimeout(() => {
+      this.typing = false;
+      if (isMin) {
+        if (!this.maxPrice && value) {
+          this.maxPrice = '';
+        }
+        this.minInputValidation(value);
+      }
+      else {
+        if (!this.minPrice && value) {
+          this.minPrice = 0;
+        }
+        this.maxInputValidation(value);
+      }
+      this.isReady && this.changed.emit({
+        event: event,
+        option: this.option,
+        value: { max: this.maxPrice, min: this.minPrice }
+      });
+    }, 1000);
   }
   minInputValidation(value) {
-    if (value && (value > this.max || value > this.maxPrice)) {
+    if (value && (value > this.max || (this.maxPrice && value > this.maxPrice))) {
       // this.minPrice = this.maxPrice;
       return;
     }
@@ -104,7 +117,7 @@ export class SallaPriceRange {
     }
   }
   maxInputValidation(value) {
-    if (value && (value < this.min || value < this.minPrice)) {
+    if (value && (value < this.min || (this.minPrice && value < this.minPrice))) {
       // this.maxPrice = this.minPrice;
       return;
     }
@@ -232,7 +245,9 @@ export class SallaPriceRange {
       "moreThanLabel": {},
       "lessThanLabel": {},
       "toLabel": {},
-      "fromLabel": {}
+      "fromLabel": {},
+      "typing": {},
+      "debounce": {}
     };
   }
   static get events() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-price-range.js","sourceRoot":"","sources":["../../../src/components/salla-price-range/salla-price-range.tsx"],"names":[],"mappings":"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","sourcesContent":["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 /*\n Minimum price threshold value\n /\n @Prop({mutable: true}) minPrice;\n\n /\n Maximum price threshold value\n /\n @Prop({mutable: true}) maxPrice;\n\n /\n Product price range filter option object instance\n /\n @Prop({reflect: true}) option: Filter;\n\n /\n Currently selected price filter data\n /\n @Prop({reflect: true}) filtersData: any;\n\n\n @State() min = 0;\n @State() max = 10000;\n @State() priceOptions: any;\n @State() moreThanLabel: string=\"أكثر من\";\n @State() lessThanLabel: string=\"أقل من\";\n @State() toLabel: string=\"الى\";\n @State() fromLabel: string=\"من\";\n\n /\n Custome event emitted when there is a change in price input.\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.getWithDefault('common.elements.more_than', this.moreThanLabel)\n this.lessThanLabel=salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel)\n this.toLabel=salla.lang.getWithDefault('common.elements.to', this.toLabel)\n this.fromLabel=salla.lang.getWithDefault('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 receive 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 /\n reset the price range inputs\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 private handleMinMaxPrice(event: Event, value: FilterValue): void {\n\n //todo:: cover when from is star\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: FilterValue, index: number) => {\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"]}
1	+ {"version":3,"file":"salla-price-range.js","sourceRoot":"","sources":["../../../src/components/salla-price-range/salla-price-range.tsx"],"names":[],"mappings":"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","sourcesContent":["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 /*\n Minimum price threshold value\n /\n @Prop({ mutable: true }) minPrice;\n\n /\n Maximum price threshold value\n /\n @Prop({ mutable: true }) maxPrice;\n\n /\n Product price range filter option object instance\n /\n @Prop({ reflect: true }) option: Filter;\n\n /\n Currently selected price filter data\n /\n @Prop({ reflect: true }) filtersData: any;\n\n\n @State() min = 0;\n @State() max = 10000;\n @State() priceOptions: any;\n @State() moreThanLabel: string = \"أكثر من\";\n @State() lessThanLabel: string = \"أقل من\";\n @State() toLabel: string = \"الى\";\n @State() fromLabel: string = \"من\";\n @State() typing: boolean = false;\n @State() debounce: ReturnType<typeof setTimeout> = setTimeout(() => '', 1000);\n /\n Custome event emitted when there is a change in price input.\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.getWithDefault('common.elements.more_than', this.moreThanLabel)\n this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel)\n this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel)\n this.fromLabel = salla.lang.getWithDefault('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 receive 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 /\n reset the price range inputs\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 private handleMinMaxPrice(event: Event, value: FilterValue): void {\n\n //todo:: cover when from is star\n this.minPrice = value.from;\n this.maxPrice = value.to != '' ? value.to : \"\";\n\n this.changedEventHandler(event);\n }\n\n private async changedEventHandler(event, isMin = false) {\n this.typing = true;\n salla.helpers.inputDigitsOnly(event.target)\n let value = event ? event.target.value * 1 : \"\"\n clearTimeout(this.debounce)\n this.debounce = setTimeout(() => {\n this.typing = false\n if (isMin) {\n if (!this.maxPrice && value) {\n this.maxPrice = '';\n }\n this.minInputValidation(value);\n } else {\n if (!this.minPrice && value) {\n this.minPrice = 0;\n }\n this.maxInputValidation(value)\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 }, 1000)\n }\n\n\n minInputValidation(value) {\n if (value && (value > this.max \|\| (this.maxPrice && 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 \|\| (this.minPrice && 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: FilterValue, index: number) => {\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"]}

package/dist/collection/components/salla-products-list/salla-products-list.js CHANGED Viewed

@@ -13,16 +13,25 @@ export class SallaProductsList {
     this.sortBy = undefined;
     this.filtersResults = undefined;
     this.horizontalCards = undefined;
+    this.autoload = false;
+    this.loadMoreText = undefined;
     this.productCardComponent = 'custom-salla-product-card';
     this.page = 1;
     this.nextPage = undefined;
     this.hasInfiniteScroll = undefined;
     this.hasCustomComponent = undefined;
     this.sourceValueIsValid = undefined;
-    this.placeholderText = undefined;
+    this.placeholderText = salla.lang.get('pages.categories.no_products');
+    this.endOfText = salla.lang.get('common.elements.end_of_content');
+    this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
     this.isReady = undefined;
     this.showPlaceholder = undefined;
     this.parsedFilters = undefined;
+    salla.lang.onLoaded(() => {
+      this.placeholderText = salla.lang.get('pages.categories.no_products');
+      this.endOfText = salla.lang.get('common.elements.end_of_content');
+      this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
+    });
   }
   connectedCallback() {
     salla.event.on('salla-filters::changed', filters => this.setFilters(filters));
@@ -43,6 +52,7 @@ export class SallaProductsList {
    * Reload the list of products (entire content of the component).
    */
   async reload() {
+    !this.autoload && this.loadMoreWrapper && (this.loadMoreWrapper.style.display = 'none');
     salla.infiniteScroll.destroy(this.infiniteScroll);
     this.buildNextPageUrl();
     // TODO: this is problematic in testing, for the time being it's been resolved like this
@@ -66,23 +76,6 @@ export class SallaProductsList {
       },
     });
   }
-  createStatusDom() {
-    this.status = document.createElement('div');
-    this.status.className = 's-infinite-scroll-wrapper';
-    this.status.innerHTML = `<div class="s-infinite-scroll-status">
-        <p class="s-infinite-scroll-last infinite-scroll-last s-hidden" >${salla.lang.get('common.elements.end_of_content')}</p>
-        <p class="s-infinite-scroll-error infinite-scroll-error s-hidden">${salla.lang.get('common.elements.failed_to_load_more')}</p>
-      </div>
-      <a href="#" class="s-infinite-scroll-btn s-button-btn">
-        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
-      </a>`;
-    this.btnLoader = this.status.querySelector('.s-button-loader');
-    salla.lang.onLoaded(() => {
-      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
-      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
-      this.placeholderText = salla.lang.get('pages.categories.no_products');
-    });
-  }
   initBaseNextPageUrl(source) {
     this.nextPage = salla.url.api(`products?source=${source}`);
     if (this.limit) {
@@ -131,8 +124,17 @@ export class SallaProductsList {
       this.sourceValueIsValid = false;
     }
   }
-  loading(isLoading = true) {
-    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
+  loading(isLoading = true, isBtn = false) {
+    if (!isLoading) {
+      if (!this.autoload) {
+        this.btnLoader && (this.btnLoader.style.display = 'none');
+      }
+      this.loader && (this.loader.style.display = 'none');
+    }
+    else {
+      let currentLoader = isBtn && !this.autoload ? this.btnLoader : this.loader;
+      currentLoader && (currentLoader.style.display = 'inherit');
+    }
   }
   getItemHTML(product) {
     //as a request they don't want to let the user to open the product details
@@ -209,14 +211,16 @@ export class SallaProductsList {
     if (!this.hasInfiniteScroll) {
       return;
     }
-    this.host.insertAdjacentElement('beforeend', this.status);
     this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {
       path: () => this.nextPage,
       history: false,
       nextPage: this.nextPage,
-      scrollThreshold: 100,
+      scrollThreshold: this.autoload ? 100 : false,
+      loadOnScroll: this.autoload,
     }, /* infinite via api*/ true);
-    (_a = this.infiniteScroll) === null || _a === void 0 ? void 0 : _a.on('request', () => this.loading());
+    (_a = this.infiniteScroll) === null || _a === void 0 ? void 0 : _a.on('request', () => {
+      this.loading(true, this.autoload ? false : true);
+    });
     (_b = this.infiniteScroll) === null || _b === void 0 ? void 0 : _b.on('load', response => {
       var _a;
       if (!((_a = response.data) === null || _a === void 0 ? void 0 : _a.length) && this.infiniteScroll.pageIndex == 2) {
@@ -234,6 +238,9 @@ export class SallaProductsList {
         /*if (['categories', 'brands', 'tags', 'search', 'latest'].includes(this.getSource())) {
           this.appendDataLayer(response.data);
         }*/
+        if (!this.autoload && this.nextPage) {
+          this.loadMoreWrapper.style.display = 'block';
+        }
         this.animateItems();
       }
     });
@@ -243,6 +250,10 @@ export class SallaProductsList {
     });
     salla.onReady(() => salla.infiniteScroll.loadNextPage(this.infiniteScroll));
   }
+  async loadMore() {
+    var _a;
+    (_a = this.infiniteScroll) === null || _a === void 0 ? void 0 : _a.loadNextPage();
+  }
   componentWillLoad() {
     return Helper.onSallaReadyPromise(() => {
       this.hasCustomComponent = !!customElements.get(this.productCardComponent);
@@ -251,14 +262,30 @@ export class SallaProductsList {
       try {
         let searchParams = new URLSearchParams(window.location.search);
         this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');
-        let filters = searchParams.get('filters');
-        this.parsedFilters = filters ? JSON.parse(decodeURIComponent(filters)) : {};
+        let filters = {};
+        searchParams.forEach((value, key) => {
+          // Assuming the key is in the format filters[xxx]
+          const matches = key.match(/^filters\[(\w+)\](\[(\w+)\])?$/);
+          if (matches) {
+            const filterName = matches[1]; // e.g. "price" for filters[price]
+            const nestedKey = matches[3]; // e.g. "min" or "max" for filters[price][min] or filters[price][max]
+            if (nestedKey) {
+              // Handle nested object
+              filters[filterName] = filters[filterName] || {};
+              filters[filterName][nestedKey] = value;
+            }
+            else {
+              // Handle regular key
+              filters[filterName] = value;
+            }
+          }
+        });
+        this.parsedFilters = filters;
       }
       catch (e) {
         salla.logger.warn('failed to get filters from url', e.message);
       }
       this.buildNextPageUrl();
-      this.createStatusDom();
       this.isReady = true;
       if (!this.sourceValueIsValid) {
         salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);
@@ -310,7 +337,7 @@ export class SallaProductsList {
         's-products-list-horizontal-cards': this.horizontalCards && !this.filtersResults,
         's-products-list-vertical-cards': !this.horizontalCards && !this.filtersResults,
         's-products-list-filters-results': this.filtersResults,
-      }, ref: wrapper => this.wrapper = wrapper })));
+      }, ref: wrapper => this.wrapper = wrapper }), h("div", { class: "s-infinite-scroll-status", ref: status => this.status = status }, h("p", { class: "s-infinite-scroll-last infinite-scroll-last s-hidden" }, this.endOfText), h("p", { class: "s-infinite-scroll-error infinite-scroll-error s-hidden" }, this.failedLoadMore)), this.hasInfiniteScroll && h("div", { class: "s-products-list-loading-wrapper", style: { "display": "none" }, ref: loader => this.loader = loader }, h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" })), this.hasInfiniteScroll && this.nextPage && !this.autoload ? (h("div", { class: "s-infinite-scroll-wrapper", style: { "display": "none" }, ref: loadMoreWrapper => this.loadMoreWrapper = loadMoreWrapper }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))) : ""));
   }
   componentDidLoad() {
     this.hasInfiniteScroll && this.init();
@@ -482,6 +509,41 @@ export class SallaProductsList {
         "attribute": "horizontal-cards",
         "reflect": true
       },
+      "autoload": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Autoload next page when scroll"
+        },
+        "attribute": "autoload",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "loadMoreText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Load more text"
+        },
+        "attribute": "load-more-text",
+        "reflect": false
+      },
       "productCardComponent": {
         "type": "string",
         "mutable": false,
@@ -513,6 +575,8 @@ export class SallaProductsList {
       "hasCustomComponent": {},
       "sourceValueIsValid": {},
       "placeholderText": {},
+      "endOfText": {},
+      "failedLoadMore": {},
       "isReady": {},
       "showPlaceholder": {},
       "parsedFilters": {}