@salla.sa/twilight-components
Version:
Salla Web Component
208 lines (203 loc) • 10.5 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { I as IconArrowLeft } from './arrow-left.js';
import { d as defineCustomElement$1 } from './salla-button2.js';
var arrowRight = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>arrow-right</title>
<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>
</svg>
`;
const sallaPriceRangeCss = ":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{flex-direction:row-reverse}.rtl .form-select,.rtl select,[dir=rtl] .form-select,[dir=rtl] select{background-position:left 0.5rem center;padding-right:12px}.rtl .menu-divide li:not(:last-child):after,[dir=rtl] .menu-divide li:not(:last-child):after{left:0;right:auto}input[type=range]::-webkit-slider-thumb{pointer-events:all;width:24px;height:24px;-webkit-appearance:none}[type=checkbox]:checked{background-size:80%}";
const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.changed = createEvent(this, "changed", 7);
this.min = 0;
this.max = 10000;
this.moreThanLabel = "أكثر من";
this.lessThanLabel = "أقل من";
this.toLabel = "الى";
this.fromLabel = "من";
this.typing = false;
this.isMin = false;
this.isRTL = salla.config.get('theme.is_rtl', true);
this.filterValues = [];
}
connectedCallback() {
if (this.filtersData && this.filtersData?.price) {
this.minPrice = this.filtersData.price.min;
this.maxPrice = this.filtersData.price.max;
}
salla.lang.onLoaded(() => {
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) {
return;
}
//here we may receive too many prices, we will group all inputs to
if (this.option.values.length <= 5) {
this.filterValues = this.option.values;
return;
}
const chunkSize = Math.ceil(this.option.values.length / 5);
for (let i = 0; i < this.option.values.length; i += chunkSize) {
this.filterValues.push(this.option.values
.slice(i, i + chunkSize)
.reduce((final, currentValue) => {
final.to = currentValue.to;
final.count += currentValue.count;
return final;
}));
// do whatever
}
}
/**
* reset the price range inputs
*/
async reset() {
//@ts-ignore
this.minInput.value = null;
this.maxInput.value = null;
this.minPrice = null;
this.maxPrice = null;
}
getPriceLabel(filterValue) {
// @ts-ignore
if (isNaN(filterValue.from) || filterValue.from < 1) {
return `${this.lessThanLabel} ${salla.money(filterValue.to)}`;
}
// @ts-ignore
if (isNaN(filterValue.to) || filterValue.to < 1) {
return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;
}
return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;
}
minInputValidation(value) {
if (value && (value > this.max || (this.maxPrice && value > this.maxPrice))) {
// this.minPrice = this.maxPrice;
return;
}
if (value < this.min) {
this.minPrice = this.min;
return;
}
if (value) {
this.minPrice = value;
}
}
maxInputValidation(value) {
if (value && (value < this.min || (this.minPrice && value < this.minPrice))) {
// this.maxPrice = this.minPrice;
return;
}
if (value > this.max) {
this.maxPrice = this.max;
return;
}
}
async changedEventHandler(event) {
salla.helpers.inputDigitsOnly(this.minInput);
salla.helpers.inputDigitsOnly(this.maxInput);
const minInputValue = this.minPrice ? +this.minPrice * 1 : null;
const maxInputValue = this.maxPrice ? +this.maxPrice * 1 : null;
if (!this.maxPrice) {
this.maxPrice = '';
}
if (this.isMin) {
this.minInputValidation(minInputValue);
}
else {
if (!this.minPrice) {
this.minPrice = 0;
}
this.maxInputValidation(maxInputValue);
}
this.isReady && this.changed.emit({
event: event,
option: this.option,
value: { max: this.maxPrice, min: this.minPrice }
});
}
handleMinMaxPrice(event, value) {
//todo:: cover when from is star
this.minPrice = value.from;
this.maxPrice = value.to !== '*' ? value.to : "";
this.changedEventHandler(event);
}
isChecked(filterValue) {
if (!this.minPrice && !this.maxPrice) {
return false;
}
//1 filterValue.from zero or * and this.minPrice not set or zero
//2 filterValue.from == this.minPrice
//@ts-ignore
let isMinEqual = ((filterValue.from < 1 || filterValue.from == '*') && this.minPrice == 0) || filterValue.from == this.minPrice;
//1 filterValue.to == "*" or null
//2 filterValue.to == this.max
let isMaxEqual = filterValue.to == '*' || !filterValue.to || filterValue.to == this.maxPrice;
return isMinEqual && isMaxEqual;
}
handleMinPrice(event) {
this.isMin = true;
const value = event.target.value;
this.minPrice = value === '' ? 0 : value;
}
handleMaxPrice(event) {
this.isMin = false;
const value = event.target.value;
this.maxPrice = value === undefined ? '' : value;
}
render() {
return (h(Host, { key: 'e925357a9ad305bcdcb45e08b47328fe0551e966' }, this.filterValues.map((filterValue, index) => {
return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
}), h("div", { key: '402f820f0b39da9351495ef274b50508bc20df94', class: "flex justify-center items-center" }, h("div", { key: '9207efd9b9629b9167a0fe373ddb035c7ae319f9', class: "relative max-w-xl w-full" }, h("div", { key: 'aeac9d75de4cf783d03a53fd4c87d32e4dd7175d', class: "s-price-range-inputs" }, h("div", { key: 'b339efed61f4bcfe4553b0a7256cc8bf87b2a52f', class: "s-price-range-relative" }, h("div", { key: '68bee590d6b8a2201cde80044f91bcfcb738ead6', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '3f74c22f11c4b4e770e8ed729c845cee0496cb12', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '3e7dc99a3404a6f8498466a9be3b71db856c23f4', class: "s-price-range-gray-text" }, " -"), h("div", { key: 'fa2703140f2346df311bf329c40f67b4a16df247', class: "s-price-range-relative" }, h("div", { key: 'e0ac6ee63329b64b320c8fb12c4a94b903785443', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '5aeab39a70a9ff02654b2c04b4db908672ca2dd8', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '6b27214991ebac764b2220beb4cb31a339203657', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: '7713e50bc43c1be0610f5f64e7513c0bbe5ec249', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
}
componentDidLoad() {
this.isReady = true;
}
static get style() { return sallaPriceRangeCss; }
}, [0, "salla-price-range", {
"minPrice": [1032, "min-price"],
"maxPrice": [1032, "max-price"],
"option": [16],
"filtersData": [520, "filters-data"],
"min": [32],
"max": [32],
"priceOptions": [32],
"moreThanLabel": [32],
"lessThanLabel": [32],
"toLabel": [32],
"fromLabel": [32],
"typing": [32],
"isMin": [32],
"isRTL": [32],
"reset": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-price-range", "salla-button"];
components.forEach(tagName => { switch (tagName) {
case "salla-price-range":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaPriceRange);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { SallaPriceRange as S, defineCustomElement as d };