feat(input): add step attribute that will be reflected to the native …

…input element

fix(input): avoid empty strings to be converted to the value zero

src/components/input/Input.js

@@ -56,6 +56,7 @@ const VALIDATION_MESSAGES = {
  * @prop {string} maxlength - The maximum length of the input element.
  * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
  * @prop {boolean} novalidate - Disables the browser's validation.
+ * @prop {string} step - The step value of the input element.
  *
  * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
  * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
@@ -91,12 +92,13 @@ export class LeuInput extends LitElement {
     /* Validation attributes */
     pattern: { type: String, reflect: true },
     type: { type: String, reflect: true },
-    min: { type: Number, reflect: true },
-    max: { type: Number, reflect: true },
-    maxlength: { type: Number, reflect: true },
-    minlength: { type: Number, reflect: true },
+    min: { type: String, reflect: true },
+    max: { type: String, reflect: true },
+    maxlength: { type: String, reflect: true },
+    minlength: { type: String, reflect: true },
     validationMessages: { type: Object },
     novalidate: { type: Boolean, reflect: true },
+    step: { type: String, reflect: true },
 
     /** @type {ValidityState} */
     _validity: { state: true },
@@ -407,6 +409,7 @@ export class LeuInput extends LitElement {
           max=${ifDefined(this.max)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
+          step=${ifDefined(this.step)}
           ref=${ref(this._inputRef)}
           aria-invalid=${isInvalid}
         />

src/components/input/stories/input.stories.js

@@ -42,12 +42,15 @@ function Template(args) {
     max,
     minlength,
     maxlength,
+    step,
     disabled = false,
     required = false,
     clearable = false,
     novalidate = false,
   } = args
 
+  console.log(min, max)
+
   return html`
     <leu-input
       value=${ifDefined(value)}
@@ -62,6 +65,7 @@ function Template(args) {
       max=${ifDefined(max)}
       minlength=${ifDefined(minlength)}
       maxlength=${ifDefined(maxlength)}
+      step=${ifDefined(step)}
       label=${label}
       ?disabled=${disabled}
       ?required=${required}
@@ -189,3 +193,12 @@ Search.parameters = {
     },
   },
 }
+
+export const Step = Template.bind({})
+Step.args = {
+  label: "Tage",
+  type: "number",
+  min: "1",
+  max: "7",
+  step: "1",
+}

src/components/input/test/input.test.js

@@ -21,6 +21,7 @@ async function defaultFixture(args = {}) {
       max=${ifDefined(args.max)}
       minlength=${ifDefined(args.minlength)}
       maxlength=${ifDefined(args.maxlength)}
+      step=${ifDefined(args.step)}
       label=${args.label || "Label"}
       ?disabled=${args.disabled}
       ?required=${args.required}