@salla.sa/twilight-components
Version:
Salla Web Component
137 lines (130 loc) • 5.83 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { H as Helper } from './Helper.js';
var Add = `<!-- 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>add</title>
<path d="M26.667 14.667h-9.333v-9.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v9.333h-9.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h9.333v9.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.333h9.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
</svg>
`;
var Minus = `<!-- 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>minus</title>
<path d="M26.667 14.667h-21.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h21.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
</svg>
`;
const sallaQuantityInputCss = "";
const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuantityInput extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.hostAttributes = {};
this.hasIncrementSlot = false;
this.hasDecrementSlot = false;
this.didLoaded = false;
this.quantity = 1;
this.fireChangeEvent = true;
}
/**
* Workaround to fire change event for the input.
*/
watchPropHandler() {
if (!this.didLoaded) {
return;
}
if (!this.fireChangeEvent) {
this.fireChangeEvent = true;
return;
}
Helper.debounce(() => {
salla.document.event.fireEvent(this.textInput, 'change', {
bubbles: true,
detail: { productId: this.cartItemId, quantity: this.quantity }
});
});
}
componentWillLoad() {
this.quantity = parseInt(this.host.getAttribute('value')) || 1;
this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
}
componentDidLoad() {
this.didLoaded = true;
this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));
}
getInputAttributes() {
for (let i = 0; i < this.host.attributes.length; i++) {
if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
}
}
return this.hostAttributes;
}
/**
* decrease quantity by one.
* @return HTMLSallaQuantityInputElement
*/
async decrease() {
return this.setValue(this.quantity - 1);
}
/**
* increase quantity by one.
* @return HTMLSallaQuantityInputElement
*/
async increase() {
return this.setValue(Number(this.quantity) + 1);
}
/**
* set quantity by one.
* @return HTMLSallaQuantityInputElement
*/
async setValue(value, fireChangeEvent = true) {
this.fireChangeEvent = fireChangeEvent;
let maxQuantity = parseInt(this.host.getAttribute('max'));
if (maxQuantity && value > maxQuantity) {
value = maxQuantity;
}
if (value <= 1) {
value = 1;
}
this.quantity = value;
return this.host;
}
render() {
return (h(Host, { key: 'de0cc198484ba0ec14e49f771d9c74ff671c2420', class: "s-quantity-input" }, h("div", { key: '0e31c8cb1288c0e356a2f0a5233978e59b2a14ed', class: "s-quantity-input-container" }, h("button", { key: '72ab204f183a2c91a5d72bcf78905732d6011ba6', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: '2e59003a0db758ca4ac5918dace8d15c0460ee9e', name: "increment-button" })), h("input", Object.assign({ key: '8ac84390f46b08568240ebd638fd0a611975a079', class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), h("button", { key: '2e5e4cf2197bac3d4f65d2ffb35ed7da6bf49233', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: 'b38890f1b7579c2625232deaa9187540f98fba69', name: "decrement-button" })))));
}
get host() { return this; }
static get watchers() { return {
"quantity": ["watchPropHandler"]
}; }
static get style() { return sallaQuantityInputCss; }
}, [4, "salla-quantity-input", {
"cartItemId": [8, "cart-item-id"],
"quantity": [32],
"fireChangeEvent": [32],
"decrease": [64],
"increase": [64],
"setValue": [64]
}, undefined, {
"quantity": ["watchPropHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-quantity-input"];
components.forEach(tagName => { switch (tagName) {
case "salla-quantity-input":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaQuantityInput$1);
}
break;
} });
}
const SallaQuantityInput = SallaQuantityInput$1;
const defineCustomElement = defineCustomElement$1;
export { SallaQuantityInput, defineCustomElement };
//# sourceMappingURL=salla-quantity-input.js.map
//# sourceMappingURL=salla-quantity-input.js.map