@roadtrip/components 2.42.0 → 2.44.0

package/dist/collection/components/counter/counter.js

@@ -1,290 +1,317 @@
-import { Component, h, Prop, Element, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 export class Counter {
   constructor() {
+    this.leftIconClasses = "";
+    this.rightIconClasses = "";
+    this.isDustbinVisible = false;
     /**
      * The id of counter
      */
     this.inputId = `road-counter-${counterIds++}`;
+    /**
+     * The minimum value, which must not be greater than its maximum (max attribute) value.
+     */
+    this.min = 0;
     /**
      * The value of the counter.
      */
     this.value = 1;
     /**
-    * Set to `true` to add icon.
+    * Set to `true` to add the dustbin icon if the value is equal to the min.
     */
-    this.icon = false;
-    this.increase = () => {
-      this.el.querySelector('input').stepUp();
-      var valueInput = this.el.querySelector('input').value;
-      var nb = parseInt(valueInput);
-      if (this.icon && nb > 1) {
-        let attribut = document.getElementById("iconCounterLess");
-        attribut.setAttribute('name', 'navigation-add-less');
+    this.dustbin = false;
+    this.setIsDustbinVisible = (valueInput) => {
+      if (valueInput > this.min) {
+        this.isDustbinVisible = false;
       }
-      else if (this.icon) {
-        let attribut = document.getElementById("iconCounterLess");
-        attribut.setAttribute('name', 'delete-forever');
+      else if (this.dustbin) {
+        this.isDustbinVisible = true;
+      }
+      else {
+        this.isDustbinVisible = false;
       }
-      this.roadincrease.emit();
-      this.roadIncrease.emit();
+    };
+    this.increase = () => {
+      this.inputElement.querySelector('input').stepUp();
+      let valueInput = parseInt(this.inputElement.querySelector('input').value);
+      if (!valueInput) {
+        valueInput = this.min;
+      }
+      ;
+      this.onValueChange(valueInput);
+      this.roadIncrease.emit({ value: valueInput });
     };
     this.decrease = () => {
-      this.el.querySelector('input').stepDown();
-      var valueInput = this.el.querySelector('input').value;
-      var nb = parseInt(valueInput);
-      if (this.icon && nb > 1) {
-        let attribut = document.getElementById("iconCounterLess");
-        attribut.setAttribute('name', 'navigation-add-less');
+      if (this.isDustbinVisible) {
+        this.roadDustbinClick.emit();
+        return;
+      }
+      this.inputElement.querySelector('input').stepDown();
+      let valueInput = parseInt(this.inputElement.querySelector('input').value);
+      if (!valueInput) {
+        valueInput = this.min;
+      }
+      ;
+      this.onValueChange(valueInput);
+      this.roadDecrease.emit({ value: valueInput });
+    };
+    this.checkValue = (ev) => {
+      const input = ev.target;
+      const value = input.value && parseInt(input.value);
+      if (value == null || value === "")
+        return;
+      if (value < this.min) {
+        input.value = this.min.toString();
+      }
+      else if (this.max && value > this.max) {
+        input.value = this.max.toString();
       }
-      else if (this.icon) {
-        let attribut = document.getElementById("iconCounterLess");
-        attribut.setAttribute('name', 'delete-forever');
+      this.onValueChange(parseInt(input.value));
+    };
+    this.onRoadChange = (ev) => {
+      ev.stopPropagation();
+      const input = ev.target;
+      const value = input.value && parseInt(input.value);
+      if (value !== null && value !== "") {
+        if (value < this.min) {
+          this.roadChange.emit({ value: this.min });
+        }
+        else if (this.max && value > this.max) {
+          this.roadChange.emit({ value: this.max });
+        }
+        else {
+          this.roadChange.emit({ value: parseInt(input.value) });
+        }
+      }
+      else {
+        this.roadChange.emit({ value: null });
       }
-      this.roaddecrease.emit();
-      this.roadDecrease.emit();
     };
   }
+  onValueChange(valueInput) {
+    this.setIsDustbinVisible(valueInput);
+    this.setIconsClasses(valueInput);
+  }
+  setIconsClasses(valueInput) {
+    valueInput = valueInput !== null && valueInput !== void 0 ? valueInput : parseInt(this.inputElement.querySelector('input').value);
+    this.leftIconClasses = valueInput <= this.min && !this.dustbin ? "disabled" : "";
+    this.rightIconClasses = this.max && valueInput >= this.max ? "disabled" : "";
+  }
+  componentWillLoad() {
+    this.onValueChange(this.value);
+  }
   render() {
-    var icon = this.icon ? 'delete-forever' : 'navigation-add-less';
-    return (h("road-input-group", { class: this.size && `counter-${this.size}` },
-      h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease },
-        h("road-icon", { name: icon, id: "iconCounterLess" })),
-      h("road-input", { type: "number", min: this.min, max: this.max, step: this.step, value: this.value }),
-      h("road-button", { slot: "append", size: this.size, onClick: this.increase },
-        h("road-icon", { name: "navigation-add-more" }))));
+    return (h("road-input-group", { class: this.size && `counter-${this.size}` }, h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses }, h("road-icon", { name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size })), h("road-input", { ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue }), h("road-button", { slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses }, h("road-icon", { name: "navigation-add-more", size: this.size }))));
   }
   static get is() { return "road-counter"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["counter.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["counter.css"]
-  }; }
-  static get properties() { return {
-    "inputId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The id of counter"
-      },
-      "attribute": "input-id",
-      "reflect": false,
-      "defaultValue": "`road-counter-${counterIds++}`"
-    },
-    "min": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The minimum value, which must not be greater than its maximum (max attribute) value."
-      },
-      "attribute": "min",
-      "reflect": false
-    },
-    "max": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The maximum value, which must not be less than its minimum (min attribute) value."
-      },
-      "attribute": "max",
-      "reflect": false
-    },
-    "step": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number."
-      },
-      "attribute": "step",
-      "reflect": false
-    },
-    "value": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the counter."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'sm' | 'md'",
-        "resolved": "\"md\" | \"sm\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The size of the counter."
-      },
-      "attribute": "size",
-      "reflect": false
-    },
-    "icon": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to add icon."
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "roadincrease",
-      "name": "roadincrease",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the plus button is clicked"
+  static get originalStyleUrls() {
+    return {
+      "$": ["counter.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["counter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "inputId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The id of counter"
+        },
+        "attribute": "input-id",
+        "reflect": false,
+        "defaultValue": "`road-counter-${counterIds++}`"
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "roadIncrease",
-      "name": "roadIncrease",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The minimum value, which must not be greater than its maximum (max attribute) value."
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "checkvalue",
-      "name": "checkvalue",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value, which must not be less than its minimum (min attribute) value."
+        },
+        "attribute": "max",
+        "reflect": false
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "checkValue",
-      "name": "checkValue",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+      "step": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number."
+        },
+        "attribute": "step",
+        "reflect": false
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "roaddecrease",
-      "name": "roaddecrease",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the minus button is clicked"
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the counter."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "roadDecrease",
-      "name": "roadDecrease",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md'",
+          "resolved": "\"md\" | \"sm\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the counter."
+        },
+        "attribute": "size",
+        "reflect": false
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+      "dustbin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to add the dustbin icon if the value is equal to the min."
+        },
+        "attribute": "dustbin",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "leftIconClasses": {},
+      "rightIconClasses": {},
+      "isDustbinVisible": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "roadIncrease",
+        "name": "roadIncrease",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the plus button is clicked"
+        },
+        "complexType": {
+          "original": "{\n    value: number | undefined | null;\n  }",
+          "resolved": "{ value: number | null | undefined; }",
+          "references": {}
+        }
+      }, {
+        "method": "roadDecrease",
+        "name": "roadDecrease",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the minus button is clicked"
+        },
+        "complexType": {
+          "original": "{\n    value: number | undefined | null;\n  }",
+          "resolved": "{ value: number | null | undefined; }",
+          "references": {}
+        }
+      }, {
+        "method": "roadChange",
+        "name": "roadChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the minus button is clicked"
+        },
+        "complexType": {
+          "original": "{\n    value: number | undefined | null;\n  }",
+          "resolved": "{ value: number | null | undefined; }",
+          "references": {}
+        }
+      }, {
+        "method": "roadDustbinClick",
+        "name": "roadDustbinClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the dustbin is clicked"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }
 let counterIds = 0;

package/dist/collection/components/counter/counter.stories.js

@@ -31,19 +31,9 @@ export default {
     value: {
       control: 'number',
     },
-    icon: {
+    dustbin: {
       control: 'boolean',
     },
-    roaddecrease: {
-      control: {
-        type: null,
-      },
-    },
-    roadincrease: {
-      control: {
-        type: null,
-      },
-    },
     '--counter-margin-bottom': {
       table: {
         defaultValue: { summary: '1rem' },
@@ -58,7 +48,7 @@ export default {
     max: 20,
     step: 1,
     value: 1,
-    icon: false,
+    dustbin: false,
   },
 };
 
@@ -69,7 +59,7 @@ const Template = (args) => html`
     max="${ifDefined(args.max)}" 
     step="${ifDefined(args.step)}" 
     value="${ifDefined(args.value)}"
-    icon="${ifDefined(args.icon)}"
+    dustbin="${ifDefined(args.dustbin)}"
     input-id="${ifDefined(args['input-id'])}"
     ></road-counter>
 `;