Set min or max values on blur for outside boundaries (#17)

* Set min or max values on blur for outside boundaries

* Use `&&` operator instead of `||`

* Extract `validateMinMax` method

* Add input min max validation docs

Author: Jonezzyboy

docs/pages/components/input.md

@@ -165,6 +165,14 @@ the [Properties table](#properties) for the full list of options.
 <br />
 ```
 
+### Min Max Validation
+
+```html:preview
+<zn-input type="date" label="Input type: Date" placeholder="Date" help-text="Calendar icon opens the browser default date picker" min="01/01/1970"></zn-input>
+<br />
+<zn-input type="number" label="Input type: Number" min="10" max="100"></zn-input>
+```
+
 ### Prefix & Suffix Icons
 
 Several input types have specific `prefix` and `suffix` elements or icons that are displayed by default. You can also

src/components/input/input.component.ts

@@ -245,8 +245,21 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     return this.input.validationMessage;
   }
 
+  private validateMinMax(): void {
+    if (this.type !== 'number' && this.type !== 'date') {
+      return;
+    }
+    if (typeof this.min !== 'undefined' && parseInt(this.value as string) < parseInt(this.min as string)) {
+      this.value = this.min.toString();
+    }
+    if (typeof this.max !== 'undefined' && parseInt(this.value as string) > parseInt(this.max as string)) {
+      this.value = this.max.toString();
+    }
+  }
+
   private handleBlur() {
     this.hasFocus = false;
+    this.validateMinMax();
     this.emit('zn-blur');
   }
 
@@ -464,7 +477,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                  'input--disabled': this.disabled,
                  'input--focused': this.hasFocus,
                  'input--empty': !this.value,
-                 'input--no-spin-buttons': this.noSpinButtons || this.type !== 'currency',
+                 'input--no-spin-buttons': this.noSpinButtons && this.type !== 'currency',
                })}>
 
             <span part="prefix" class="input__prefix">