feat: add missing native attributes to uui-input and uui-textarea (#484)

* pattern and other native attributes

* escape dot on email regex (storybook)

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: loivsen

packages/uui-input/lib/uui-input.element.ts

@@ -262,6 +262,25 @@ export class UUIInputElement extends FormControlMixin(
     this._type = value;
   }
 
+  /**
+   * Validates the input based on the Regex pattern
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  pattern?: string;
+
+  /**
+   * The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode|MDN} for further information
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  inputmode?: string;
+
   @query('#input')
   _input!: HTMLInputElement;
 
@@ -357,9 +376,11 @@ export class UUIInputElement extends FormControlMixin(
         .type=${this.type}
         .value=${this.value as string}
         .name=${this.name}
+        pattern=${ifDefined(this.pattern)}
         min=${ifDefined(this.min)}
         max=${ifDefined(this.max)}
         step=${ifDefined(this.step)}
+        spellcheck=${ifDefined(this.spellcheck)}
         autocomplete=${ifDefined(this.autocomplete as any)}
         placeholder=${this.placeholder}
         aria-label=${this.label}

packages/uui-input/lib/uui-input.story.ts

@@ -48,7 +48,16 @@ const Template: Story = props =>
       .type=${props.type}
       .name=${props.name}
       .placeholder=${props.placeholder}
-      .value=${props.value}></uui-input>
+      .value=${props.value}
+      .spellcheck=${props.spellcheck}
+      .autocomplete=${props.autocomplete}
+      .pattern=${props.pattern}
+      .errorMessage=${props.errorMessage}
+      .inputmode=${props.inputmode}
+      .minlength=${props.minlength}
+      .maxlength=${props.maxlength}
+      .minlength-message=${props.minlengthMessage}
+      .maxlength-message=${props.maxlengthMessage}></uui-input>
   `;
 
 export const AAAOverview = Template.bind({});
@@ -64,6 +73,39 @@ AAAOverview.parameters = {
   },
 };
 
+export const PatternAndInputmode: Story = props =>
+  html`Enter Email<br />
+    <uui-input
+      label="Email"
+      error-message=${props.errorMessage}
+      inputmode=${props.inputmode}
+      pattern=${props.pattern}></uui-input>`;
+
+PatternAndInputmode.args = {
+  pattern: '[a-zA-Z0-9_.+\\-]+@[a-zA-Z0-9\\-]+\\.[a-zA-Z0-9\\-.]+',
+  inputmode: 'email',
+  errorMessage: 'Not an email',
+};
+
+export const MinMaxLength = Template.bind({});
+MinMaxLength.args = {
+  minlength: 3,
+  maxlength: 4,
+  minlengthMessage: 'Minimum 3',
+  maxlengthMessage: 'Maximum 4',
+};
+MinMaxLength.parameters = {
+  docs: {
+    source: {
+      code: html`<uui-input
+        minlength="3"
+        maxlength="4"
+        minlength-message="Minimum 3"
+        maxlength-message="Maximum 4"></uui-input>`.strings,
+    },
+  },
+};
+
 export const NumberInput = Template.bind({});
 NumberInput.args = {
   placeholder: 'Input number',

packages/uui-textarea/lib/uui-textarea.element.ts

@@ -3,6 +3,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property, query } from 'lit/decorators.js';
 import { UUITextareaEvent } from './UUITextareaEvent';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * @element uui-textarea
@@ -209,6 +210,31 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
   @property({ type: String })
   public label!: string;
 
+  /**
+   * Sets the number of rows of the textarea
+   * @type {number}
+   * @attr
+   */
+  @property({ type: Number })
+  rows?: number;
+
+  /**
+   * Sets the number of cols of the textarea
+   * @type {number}
+   * @attr
+   */
+  @property({ type: Number })
+  cols?: number;
+
+  /**
+   * Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.
+   * @type {'soft' | 'hard' | 'off'}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  wrap?: 'soft' | 'hard' | 'off';
+
   constructor() {
     super();
 
@@ -293,8 +319,11 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
     return html`
       <textarea
         id="textarea"
+        .rows=${this.rows}
+        .cols=${this.cols}
         .value=${this.value as string}
         .name=${this.name}
+        wrap=${ifDefined(this.wrap)}
         placeholder=${this.placeholder}
         aria-label=${this.label}
         .disabled=${this.disabled}

packages/uui-textarea/lib/uui-textarea.story.ts

@@ -13,6 +13,9 @@ export default {
     value: '',
     label: 'Label',
     placeholder: 'Placeholder',
+    rows: '',
+    cols: '',
+    wrap: '',
   },
 };
 
@@ -39,6 +42,9 @@ export const AAAOverview: Story = props => {
     .placeholder=${props.placeholder}
     ?disabled=${props.disabled}
     ?readonly=${props.readonly}
+    .rows=${props.rows}
+    .cols="${props.cols}"
+    .wrap=${props.wrap}
     .name=${props.name}
     .error=${props.error}
     .value=${props.value}></uui-textarea>`;