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

@salla.sa/twilight-components 2.11.124 → 2.11.125

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

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

@@ -30,8 +30,8 @@ const SallaFiltersWidget = class {
     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);
+      this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
+      this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
     });
   }
   componentDidLoad() {

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

	@@ -1 +1 @@
1	- {"file":"salla-filters-widget.entry.cjs.js","mappings":"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","names":["FilterOptionTypes","Helper","index","h","FilterOptionInputType","Host"],"sources":["./src/components/salla-filters-widget/salla-filters-widget.scss?tag=salla-filters-widget","./src/components/salla-filters-widget/salla-filters-widget.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import {Component, Host, h, Method, State, Prop, Event, Element} from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\nimport {Filter, FilterOptionInputType, FilterOptionTypes} from \"../salla-filters/interfaces\";\n\n@Component({\n tag: 'salla-filters-widget',\n styleUrl: 'salla-filters-widget.scss',\n})\nexport class SallaFiltersWidget {\n @Element() host: HTMLElement;\n @Prop({mutable: true}) widgetTitle: string;\n @Prop({mutable: true}) withLoadMore: boolean;\n @Prop({reflect: true}) filtersData: object;\n @Prop({reflect: true}) option: Filter;\n priceRange: HTMLSallaPriceRangeElement\n\n\n private widgetValues: HTMLElement;\n private widgetContent: HTMLDivElement;\n private initHeight: number = 195;\n @State() isOpen: boolean = true;\n @State() isShowMore: boolean = false;\n @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}
1	+ {"file":"salla-filters-widget.entry.cjs.js","mappings":"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","names":["FilterOptionTypes","Helper","index","h","FilterOptionInputType","Host"],"sources":["./src/components/salla-filters-widget/salla-filters-widget.scss?tag=salla-filters-widget","./src/components/salla-filters-widget/salla-filters-widget.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import {Component, Host, h, Method, State, Prop, Event, Element} from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\nimport {Filter, FilterOptionInputType, FilterOptionTypes} from \"../salla-filters/interfaces\";\n\n@Component({\n tag: 'salla-filters-widget',\n styleUrl: 'salla-filters-widget.scss',\n})\nexport class SallaFiltersWidget {\n @Element() host: HTMLElement;\n @Prop({mutable: true}) widgetTitle: string;\n @Prop({mutable: true}) withLoadMore: boolean;\n @Prop({reflect: true}) filtersData: object;\n @Prop({reflect: true}) option: Filter;\n priceRange: HTMLSallaPriceRangeElement\n\n\n private widgetValues: HTMLElement;\n private widgetContent: HTMLDivElement;\n private initHeight: number = 195;\n @State() isOpen: boolean = true;\n @State() isShowMore: boolean = false;\n @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.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 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/cjs/salla-price-range.cjs.entry.js CHANGED Viewed

@@ -33,10 +33,10 @@ const SallaPriceRange = class {
       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);
+      this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
+      this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
+      this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
+      this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel);
     });
     //no need to show one option only
     if (this.option.values.length == 1) {

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

	@@ -1 +1 @@
1	- {"file":"salla-price-range.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["./src/components/salla-price-range/salla-price-range.scss?tag=salla-price-range","./src/components/salla-price-range/salla-price-range.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n\n.rtl, [dir=\"rtl\"] {\n .rtl-range-slider {\n transform: rotateY(180deg);\n }\n\n .rtl-range-numbers{\n flex-direction: row-reverse;\n }\n\n .form-select, select{\n background-position: left 0.5rem center;\n padding-right: 12px;\n } \n\n // divide\n.menu-divide {\n li {\n &:not(:last-child) {\n &:after {\n left: 0;\n right: auto;\n }\n }\n }\n}\n}\n\ninput[type=range]::-webkit-slider-thumb {\n pointer-events: all;\n width: 24px;\n height: 24px;\n -webkit-appearance: none;\n}\n\n[type='checkbox']:checked{\n background-size: 80%;\n}","import {Component, Host, h, State, Prop, Event, Method} from '@stencil/core';\nimport {Filter, 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}
1	+ {"file":"salla-price-range.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["./src/components/salla-price-range/salla-price-range.scss?tag=salla-price-range","./src/components/salla-price-range/salla-price-range.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n\n.rtl, [dir=\"rtl\"] {\n .rtl-range-slider {\n transform: rotateY(180deg);\n }\n\n .rtl-range-numbers{\n flex-direction: row-reverse;\n }\n\n .form-select, select{\n background-position: left 0.5rem center;\n padding-right: 12px;\n } \n\n // divide\n.menu-divide {\n li {\n &:not(:last-child) {\n &:after {\n left: 0;\n right: auto;\n }\n }\n }\n}\n}\n\ninput[type=range]::-webkit-slider-thumb {\n pointer-events: all;\n width: 24px;\n height: 24px;\n -webkit-appearance: none;\n}\n\n[type='checkbox']:checked{\n background-size: 80%;\n}","import {Component, Host, h, State, Prop, Event, Method} from '@stencil/core';\nimport {Filter, 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.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 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/collection/components/salla-filters-widget/salla-filters-widget.js CHANGED Viewed

@@ -21,8 +21,8 @@ export class SallaFiltersWidget {
     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);
+      this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
+      this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
     });
   }
   componentDidLoad() {

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 @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"]}
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 @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.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 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"]}

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

@@ -24,10 +24,10 @@ export class SallaPriceRange {
       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);
+      this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
+      this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
+      this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
+      this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel);
     });
     //no need to show one option only
     if (this.option.values.length == 1) {

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 @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"]}
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 @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.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 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"]}

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

@@ -46,8 +46,8 @@ const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     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);
+      this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
+      this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
     });
   }
   componentDidLoad() {

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

	@@ -1 +1 @@
1	- {"file":"salla-filters-widget2.js","mappings":";;;;;;;;IAAY;AAAZ,WAAY,iBAAiB;;;;;;EAM3B,sCAAiB,CAAA;EACjB,0CAAqB,CAAA;EACrB,wCAAmB,CAAA;EACnB,oCAAe,CAAA;AACjB,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B;IAEW;AAAZ,WAAY,qBAAqB;EAC/B,8CAAqB,CAAA;EACrB,wCAAe,CAAA;AACjB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB;;ACZjC,MAAM,qBAAqB,GAAG,sBAAsB;;MCQvC,kBAAkB;;;;;IAWrB,eAAU,GAAW,GAAG,CAAC;;;;;kBACN,IAAI;sBACA,KAAK;yBACL,YAAY;yBACZ,SAAS;;EAIxC,iBAAiB;;IAEf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAE,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IACnH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IACrC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,aAAa,GAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;MAC3E,IAAI,CAAC,aAAa,GAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,2BAA2B,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;KACnF,CAAC,CAAA;GACH;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC;IAChF,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,MAAM,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;GAC1E;EAGD,MAAM,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,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;GACzF;EAID,MAAM,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,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,IAAI,GAAG,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC;IACrH,UAAU,CAAC;MACT,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,IAAI,CAAC;KAC1E,EAAE,GAAG,CAAC,CAAC;GACT;EAGD,MAAM,YAAY;IAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC3B,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC;GAC1H;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,OAAO,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK;MACzC,IAAI,KAAK,GAAG,OAAO,YAAY,IAAI,QAAQ,GAAG,YAAY,IAAI,YAAY,CAAC,GAAG,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;MAEtG,OAAO,aAAO,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,WAAW,KAAK,EAAE,IAC5E,aACE,EAAE,EAAE,GAAG,MAAM,CAAC,GAAG,WAAW,KAAK,EAAE,EACnC,IAAI,EAAE,MAAM,CAAC,GAAG,EAChB,IAAI,EAAE,MAAM,CAAC,SAAS;;QAEtB,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,CAAC,EAC7C,KAAK,EAAE,aAAa,MAAM,CAAC,SAAS,EAAE,EACtC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAC,CAAC,GAC1E,EACD,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CACpC,CAAA;KACT,CACF,CAAA;GACF;EAEO,gBAAgB,CAAC,MAAc,EAAE,KAAK;IAC5C,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;QACtD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC5C,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC;GAC3C;EAEO,cAAc,CAAC,MAAc,EAAE,YAAY;IACjD,IAAI,MAAM,CAAC,GAAG,IAAI,QAAQ,EAAE;;MAE1B,OAAO,0BAAoB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,GAAG,CAAC;KAChE;IACD,IAAI,KAAK,GAAG,YAAY,CAAC,KAAK,IAAI,MAAM,CAAC;;IAEzC,OAAO,YAAM,KAAK,EAAC,uBAAuB,IAAE,KAAK,CAAQ,CAAC;GAC3D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,4BAA4B,IACtC,UAAI,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IACnE,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAC/B,YAAM,KAAK,EAAE,8BAA8B,IAAI,CAAC,MAAM,GAAG,mCAAmC,GAAG,EAAE,EAAE,GAAG,CACnG,EACL,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,IACxE,WAAK,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,IACtE,eAAO,EAEL,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC,KAAK;QACxC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC;QACpC,yBAAmB,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACrD,GAAG,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,CAE3C,EACL,IAAI,CAAC,YAAY;MAClB,SAAG,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAG,CAAC,IAAI,CAAC,UAAU,GAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAK,CAE9F,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}
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.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 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-price-range2.js CHANGED Viewed

@@ -30,10 +30,10 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       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);
+      this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
+      this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
+      this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
+      this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel);
     });
     //no need to show one option only
     if (this.option.values.length == 1) {

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 @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}
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.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 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/esm/salla-filters-widget.entry.js CHANGED Viewed

@@ -26,8 +26,8 @@ const SallaFiltersWidget = class {
     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);
+      this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
+      this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
     });
   }
   componentDidLoad() {

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

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

@@ -29,10 +29,10 @@ const SallaPriceRange = class {
       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);
+      this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
+      this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
+      this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
+      this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel);
     });
     //no need to show one option only
     if (this.option.values.length == 1) {