fix: improve text inputs (#168)

* fix: add type of the text-field component

* feat: add min and max properties to text-field component

* feat: add minLength and maxLenght properties to text-field component

* feat: add pattern property to text-field component

* feat: add step property to text-field component

* feat: add types for inputmode property to text-field component

* style: clean types

* style: clean types

* fix: simplify the textfield props

Author: amir78729

src/text-field/index.ts

@@ -13,15 +13,23 @@ import { inputStyles } from '../input';
  * @prop {string} [label=''] - The label for the text field.
  * @prop {string} [name=''] - The name of the text field.
  * @prop {string} [placeholder=''] - The placeholder text for the text field.
- * @prop {string} [inputmode=''] - The input mode for the text field.
- * @prop {string} [type=''] - The type of the text field.
+ * @prop {'none'|'text'|'tel'|'url'|'email'|'numeric'|'decimal'|'search'} [inputmode] - The input mode for the text field.
+ * @prop {'text'|'date'|'month'|'time'|'week'|'datetime-local'|'number'|'password'|'search'|'tel'|'url'|'email'} [type='text'] - The type of the text field.
  * @prop {string} [autocomplete=''] - The autocomplete attribute for the text field.
+ * @prop {number} [max] - The maximum value of the text field; only applying to text fields with these types: `date`, `month`, `week`, `time`, `datetime-local`, `number`.
+ * @prop {number} [min] - The minimum value of the text field; only applying to text fields with these types: `date`, `month`, `week`, `time`, `datetime-local`, `number`.
+ * @prop {number} [maxLength] - The maximum length of the text field; only applying to text fields with these types: `text`, `search`, `url`, `tel`, `email`, `password`.
+ * @prop {number} [minLength] - The minimum length of the text field; only applying to text fields with these types: `text`, `search`, `url`, `tel`, `email`, `password`.
+ * @prop {string} [pattern] - The allowed regex pattern of the text field; only applying to text fields with these types: `text`, `search`, `url`, `tel`, `email`, `password`.
+ * @prop {number} [step] - The step of the text field; only applying to text fields with these types: `date`, `month`, `week`, `time`, `datetime-local`, `number`.
  *
  * @csspart [field] - The main container for the text field.
  * @csspart [label] - The label for the text field.
  * @csspart [container] - The container for the input and any leading/trailing elements.
  * @csspart [input] - The input element.
  * @csspart [caption] - The caption for the text field.
+ * @csspart [leading] - The leading for the text field.
+ * @csspart [trailing] - The trailing for the text field.
  *
  * @slot [leading] - the leading slot of the text-field
  * @slot [trailing] - the trailing slot of the text-field

src/text-field/text-field.style.ts

@@ -25,6 +25,10 @@ export default css`
     font-family: inherit;
   }
 
+  .input::-webkit-calendar-picker-indicator {
+    filter: brightness(0);
+  }
+
   .input::placeholder {
     color: var(
       --tap-text-field-input-placeholder-color,

src/text-field/text-field.ts

@@ -1,20 +1,50 @@
-import { TemplateResult, html } from 'lit';
+import { TemplateResult, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { Input } from '../input';
 
 export class TextField extends Input {
-  @property({ type: String }) inputmode?: string; // TODO: add type
+  @property({ type: String }) inputmode?:
+    | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
 
-  @property({ type: String }) type?: string; // TODO: add type
+  @property({ type: String }) type:
+    | 'text'
+    | 'date'
+    | 'month'
+    | 'time'
+    | 'week'
+    | 'datetime-local'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'url'
+    | 'email' = 'text';
+
+  @property({ type: Number }) max?: number;
+  @property({ type: Number }) min?: number;
+
+  @property({ type: Number }) maxLength?: number;
+  @property({ type: Number }) minLength?: number;
+
+  @property({ type: String }) pattern?: string;
+
+  @property({ type: Number }) step?: number;
 
   @property({ type: String }) autocomplete?: string; // TODO: add type
 
   // TODO: check if using generic ids for caption and input is ok
   protected renderInput(): TemplateResult {
     return html`
-      <slot name="leading"></slot>
+      <slot part="leading" name="leading"></slot>
       <input
         id="input"
         class="input"
@@ -27,11 +57,17 @@ export class TextField extends Input {
         inputmode=${ifDefined(this.inputmode)}
         placeholder=${ifDefined(this.placeholder)}
         autocomplete=${ifDefined(this.autocomplete)}
-        type=${ifDefined(this.type)}
+        max=${ifDefined(this.min)}
+        min=${ifDefined(this.max)}
+        maxlength=${ifDefined(this.maxLength)}
+        minlength=${ifDefined(this.minLength)}
+        pattern=${ifDefined(this.pattern)}
+        step=${ifDefined(this.step)}
+        type=${this.type}
         .value=${live(this.value)}
         @input=${this.handleInput}
       />
-      <slot name="trailing"></slot>
+      <slot part="trailing" name="trailing"></slot>
     `;
   }
 }