@roadtrip/components 2.21.0

package/dist/collection/components/textarea/textarea.js

@@ -0,0 +1,490 @@
+import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
+export class Textarea {
+  constructor() {
+    /**
+     * The id of input
+     */
+    this.textareaId = `road-textarea-${textareaIds++}`;
+    /**
+     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+     */
+    this.autocapitalize = 'none';
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.textareaId;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.readonly = false;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    this.required = false;
+    /**
+     * If `true`, the element will have its spelling and grammar checked.
+     */
+    this.spellcheck = false;
+    /**
+     * The value of the input.
+     */
+    this.value = '';
+    /**
+     * Label for the field
+     */
+    this.label = `${this.textareaId}-label`;
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+      this.roadInput.emit(ev);
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+    };
+    this.onFocus = () => {
+      this.roadFocus.emit();
+    };
+  }
+  /**
+   * Update the native input element when the value changes
+   */
+  valueChanged() {
+    this.roadChange.emit({ value: this.value });
+  }
+  getValue() {
+    return this.value || '';
+  }
+  render() {
+    const value = this.getValue();
+    const labelId = this.textareaId + '-label';
+    const hasValueClass = this.value !== '' ? 'has-value' : '';
+    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null },
+      h("textarea", { class: `form-control textarea-control ${hasValueClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }),
+      h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label),
+      this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+  }
+  static get is() { return "road-textarea"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["textarea.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["textarea.css"]
+  }; }
+  static get properties() { return {
+    "textareaId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of input"
+      },
+      "attribute": "textarea-id",
+      "reflect": false,
+      "defaultValue": "`road-textarea-${textareaIds++}`"
+    },
+    "autocapitalize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user."
+      },
+      "attribute": "autocapitalize",
+      "reflect": false,
+      "defaultValue": "'none'"
+    },
+    "autofocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+      },
+      "attribute": "autofocus",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot interact with the input."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "inputmode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+        "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A hint to the browser for which keyboard to display.\nThis attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`."
+      },
+      "attribute": "inputmode",
+      "reflect": false
+    },
+    "enterkeyhint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`."
+      },
+      "attribute": "enterkeyhint",
+      "reflect": false
+    },
+    "maxlength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
+      },
+      "attribute": "maxlength",
+      "reflect": false
+    },
+    "minlength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
+      },
+      "attribute": "minlength",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the control, which is submitted with the form data."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "this.textareaId"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Instructional text that shows before the input has a value."
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot modify the value."
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user must fill in a value before submitting a form."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "spellcheck": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the element will have its spelling and grammar checked."
+      },
+      "attribute": "spellcheck",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "cols": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
+      },
+      "attribute": "cols",
+      "reflect": false
+    },
+    "rows": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The number of rows of the control."
+      },
+      "attribute": "rows",
+      "reflect": false
+    },
+    "wrap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'hard' | 'soft' | 'off'",
+        "resolved": "\"hard\" | \"off\" | \"soft\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Indicates how the control wraps text."
+      },
+      "attribute": "wrap",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The value of the input."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label for the field"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "`${this.textareaId}-label`"
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Error message for the field"
+      },
+      "attribute": "error",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "roadInput",
+      "name": "roadInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a keyboard input occurred."
+      },
+      "complexType": {
+        "original": "KeyboardEvent",
+        "resolved": "KeyboardEvent",
+        "references": {
+          "KeyboardEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the value has changed."
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null\n  }",
+        "resolved": "{ value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadBlur",
+      "name": "roadBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadFocus",
+      "name": "roadFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueChanged"
+    }]; }
+}
+let textareaIds = 0;

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

@@ -0,0 +1,141 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+
+export default {
+  title: 'Forms/Textarea',
+  component: 'road-textarea',
+  parameters: {
+    actions: {
+      handles: ['roadBlur', 'roadFocus'],
+    },
+  },
+};
+
+export const Playground = (args) => html`
+  <road-textarea
+    label="${args.label}"
+    disabled="${args.disabled}"
+    required="${args.required}"
+    autofocus="${args.autofocus}"
+    error="${ifDefined(args.error)}"
+    maxlength="${ifDefined(args.maxlength)}"
+    minlength="${ifDefined(args.minlength)}"
+    value="${ifDefined(args.value)}" 
+    spellcheck="${args.spellcheck}"
+    placeholder="${ifDefined(args.placeholder)}"
+    autocapitalize="${args.autocapitalize}"
+    enterkeyhint="${ifDefined(args.enterkeyhint)}"
+    inputmode="${ifDefined(args.inputmode)}"
+    rows="${args.rows}"
+    cols="${ifDefined(args.cols)}"
+    wrap="${ifDefined(args.wrap)}"
+    readonly="${args.readonly}"
+    @roadChange=${event => args.roadChange(event.detail.value)}
+    @roadInput=${event => args.roadInput(event.target.value)}
+  ></road-textarea>
+`;
+Playground.args = {
+  label: 'Label',
+  disabled: false,
+  readonly: false,
+  required: false,
+  autofocus: false,
+  spellcheck: false,
+  rows: 5,
+};
+Playground.argTypes = {
+  disabled: {
+    control: 'boolean',
+  },
+  readonly: {
+    control: 'boolean',
+  },
+  required: {
+    control: 'boolean',
+  },
+  autofocus: {
+    control: 'boolean',
+  },
+  spellcheck: {
+    control: 'boolean',
+  },
+  error: {
+    control: 'text',
+  },
+  label: {
+    control: 'text',
+  },
+  name: {
+    control: 'text',
+  },
+  placeholder: {
+    control: 'text',
+  },
+  minlength: {
+    control: 'number',
+  },
+  maxlength: {
+    control: 'number',
+  },
+  value: {
+    control: 'number',
+  },
+  autocapitalize: {
+    options: ['on', 'off'],
+    control: {
+      type: 'select',
+    },
+  },
+  enterkeyhint: {
+    options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
+    control: {
+      type: 'select',
+    },
+  },
+  inputmode: {
+    options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
+    control: {
+      type: 'select',
+    },
+  },
+  rows: {
+    control: {
+      type: 'number',
+      min: 0,
+    },
+  },
+  cols: {
+    control: {
+      type: 'number',
+      min: 0,
+    },
+  },
+  wrap: {
+    options: ['hard', 'off', 'soft'],
+    control: {
+      type: 'select',
+    },
+  },
+  roadChange: {
+    action: 'roadChange',
+  },
+  roadInput: {
+    action: 'roadInput',
+  },
+};
+
+export const Default = () => html`
+  <road-textarea label="Label" rows="5"></road-textarea>
+`;
+
+export const WithValue = () => html`
+  <road-textarea label="Label" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium pharetra semper. Fusce lacus metus, facilisis sit amet lacus ut, facilisis dapibus urna." rows="5"></road-textarea>
+`;
+
+export const Disabled = () => html`
+  <road-textarea label="Label" disabled rows="5"></road-textarea>
+`;
+
+export const Error = () => html`
+  <road-textarea label="Label" rows="5" error="This field is required" required></road-textarea>
+`;