@salla.sa/twilight-components 1.0.57 → 1.0.60

package/dist/collection/components/salla-quantity-input/salla-quantity-input.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/salla-quantity-input/salla-quantity-input.js

@@ -0,0 +1,74 @@
+import { Component, Element, Host, State, Watch, h } from '@stencil/core';
+export class SallaQuantityInput {
+  constructor() {
+    this.hostAttributes = {};
+    this.hasIncrementSlot = false;
+    this.hasDecrementSlot = false;
+    this.didLoaded = false;
+    this.quantity = 1;
+  }
+  /**
+   * Workaround to fire change event for the input.
+   */
+  watchPropHandler() {
+    if (!this.didLoaded) {
+      return;
+    }
+    salla.helpers.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }))();
+  }
+  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;
+  }
+  decrement() {
+    if (this.quantity <= 1) {
+      return;
+    }
+    this.quantity--;
+  }
+  increment() {
+    let maxQuantity = parseInt(this.host.getAttribute('max'));
+    if (maxQuantity && this.quantity >= maxQuantity) {
+      return;
+    }
+    this.quantity++;
+  }
+  render() {
+    return (h(Host, { class: "s-quantity-input s-quantity-input-container" },
+      h("button", { onClick: () => this.increment(), class: "s-quantity-input-button", type: "button" },
+        !this.hasIncrementSlot ? h("i", { class: "sicon-add" }) : '',
+        h("slot", { name: "increment-button" })),
+      h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { min: "1", value: this.quantity, ref: (el) => this.textInput = el })),
+      h("button", { class: "s-quantity-input-button", onClick: () => this.decrement(), type: "button" },
+        !this.hasDecrementSlot ? h("i", { class: "sicon-minus" }) : '',
+        h("slot", { name: "decrement-button" }))));
+  }
+  static get is() { return "salla-quantity-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-quantity-input.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-quantity-input.css"]
+  }; }
+  static get states() { return {
+    "quantity": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "quantity",
+      "methodName": "watchPropHandler"
+    }]; }
+}