@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/components/textarea/textarea.css

@@ -0,0 +1,298 @@
+:root,
+.sdds-mode-light {
+  --sdds-textarea-background-primary: var(--sdds-grey-50);
+  --sdds-textarea-background-secondary: var(--sdds-white);
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
+  --sdds-textarea-color: var(--sdds-grey-868);
+  --sdds-textarea-placeholder: var(--sdds-grey-500);
+  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
+  --sdds-textarea-disabled-color: var(--sdds-grey-400);
+  --sdds-textarea-disabled-background: var(--sdds-white);
+  --sdds-textarea-disabled-placeholder: var(--sdds-grey-400);
+  --sdds-textarea-disabled-label: var(--sdds-grey-400);
+  --sdds-textarea-label-color: var(--sdds-grey-958);
+  --sdds-textarea-label-inside-color: var(--sdds-grey-700);
+  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
+  --sdds-textarea-helper: var(--sdds-grey-700);
+  --sdds-textarea-helper-error: var(--sdds-negative);
+  --sdds-textarea-bar: var(--sdds-blue-400);
+  --sdds-textarea-bar-error: var(--sdds-negative);
+  --sdds-textarea-textcounter: var(--sdds-grey-700);
+  --sdds-textarea-textcounter-divider: var(--sdds-grey-500);
+  --sdds-textarea-border-bottom: var(--sdds-grey-600);
+  --sdds-textarea-border-bottom-hover: var(--sdds-grey-800);
+  --sdds-textarea-border-bottom-success: var(--sdds-grey-958);
+  --sdds-textarea-border-bottom-error: var(--sdds-negative);
+  --sdds-textarea-icon-read-only-color: var(--sdds-grey-958);
+  --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-958);
+  --sdds-textarea-resize-icon: var(--sdds-grey-500);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-textarea-background: var(--sdds-textarea-background-secondary);
+}
+
+.sdds-mode-dark {
+  --sdds-textarea-background-primary: var(--sdds-grey-900);
+  --sdds-textarea-background-secondary: var(--sdds-grey-868);
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
+  --sdds-textarea-color: var(--sdds-grey-200);
+  --sdds-textarea-placeholder: var(--sdds-grey-600);
+  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-700);
+  --sdds-textarea-disabled-color: var(--sdds-grey-800);
+  --sdds-textarea-disabled-background: var(--sdds-grey-868);
+  --sdds-textarea-disabled-placeholder: var(--sdds-grey-800);
+  --sdds-textarea-disabled-label: var(--sdds-grey-700);
+  --sdds-textarea-label-color: var(--sdds-grey-100);
+  --sdds-textarea-label-inside-color: var(--sdds-grey-400);
+  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-700);
+  --sdds-textarea-helper: var(--sdds-grey-600);
+  --sdds-textarea-helper-error: var(--sdds-negative);
+  --sdds-textarea-bar: var(--sdds-blue-400);
+  --sdds-textarea-bar-error: var(--sdds-negative);
+  --sdds-textarea-textcounter: var(--sdds-grey-600);
+  --sdds-textarea-textcounter-divider: var(--sdds-grey-700);
+  --sdds-textarea-border-bottom: var(--sdds-grey-600);
+  --sdds-textarea-border-bottom-hover: var(--sdds-grey-400);
+  --sdds-textarea-border-bottom-success: var(--sdds-grey-50);
+  --sdds-textarea-border-bottom-error: var(--sdds-negative);
+  --sdds-textarea-icon-read-only-color: var(--sdds-grey-100);
+  --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-50);
+  --sdds-textarea-resize-icon: var(--sdds-grey-500);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-textarea-background: var(--sdds-textarea-background-secondary);
+}
+
+.sdds-textarea-container {
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  box-sizing: border-box;
+  height: auto;
+  width: 100%;
+  min-width: 208px;
+  display: inline-flex;
+  background-color: transparent;
+  flex-flow: row wrap;
+  border-bottom: 0;
+}
+
+.sdds-textarea-container .sdds-textarea-wrapper {
+  position: relative;
+  width: unset;
+  min-width: 100%;
+}
+
+.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before, .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after {
+  content: "";
+  height: 2px;
+  width: 0;
+  position: absolute;
+  background: var(--sdds-textarea-bar);
+  transition: 0.35s ease all;
+}
+.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before {
+  left: 50%;
+}
+.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after {
+  right: 50%;
+}
+.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after, .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before {
+  top: calc(100% - 2px);
+}
+
+.sdds-textarea-input {
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-textarea-color);
+  background-color: var(--sdds-textarea-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
+  display: block;
+  resize: vertical;
+  border-bottom: 1px solid var(--sdds-textarea-border-bottom);
+  transition: border-bottom-color 200ms ease;
+}
+.sdds-textarea-input::placeholder {
+  opacity: 1;
+  color: var(--sdds-textarea-placeholder);
+}
+.sdds-textarea-input:focus::placeholder {
+  color: var(--sdds-textarea-placeholder-focus-color);
+}
+.sdds-textarea-input:disabled {
+  background-color: var(--sdds-textarea-disabled-background);
+  color: var(--sdds-textarea-disabled-color);
+  cursor: not-allowed;
+}
+.sdds-textarea-input:disabled::placeholder {
+  color: var(--sdds-textarea-disabled-placeholder);
+}
+.sdds-textarea-input:disabled ~ .sdds-textfield-label-inside {
+  color: var(--sdds-textarea-disabled-label);
+}
+.sdds-textarea-input::-webkit-resizer {
+  display: none;
+}
+.sdds-textarea-input:hover {
+  border-bottom-color: var(--sdds-textarea-border-bottom-hover);
+}
+
+.sdds-textarea-resizer-icon {
+  color: var(--sdds-textarea-resize-icon);
+  position: absolute;
+  display: block;
+  bottom: 2px;
+  right: 1px;
+  padding-bottom: 2px;
+  padding-right: 2px;
+  pointer-events: none;
+  background-color: var(--sdds-textarea-background);
+}
+.sdds-textarea-resizer-icon svg {
+  display: block;
+}
+
+.sdds-textarea-label {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: block;
+  z-index: 1;
+  margin-bottom: var(--sdds-spacing-element-8);
+  color: var(--sdds-textarea-label-color);
+}
+
+.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-label {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  transition: 0.1s ease all;
+  color: var(--sdds-textarea-label-inside-color);
+  position: absolute;
+  top: var(--sdds-spacing-element-20);
+  left: var(--sdds-spacing-element-16);
+}
+.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input::placeholder {
+  color: transparent;
+}
+.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input ::placeholder {
+  color: transparent;
+}
+.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--sdds-textarea-placeholder-focus-color);
+}
+.sdds-textarea-container.sdds-textarea-focus.sdds-textarea-label-inside .sdds-textarea-label {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  top: var(--sdds-spacing-element-8);
+}
+.sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::before, .sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::after {
+  width: 50%;
+}
+.sdds-textarea-container.sdds-textarea-data.sdds-textarea-label-inside .sdds-textarea-label {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  top: var(--sdds-spacing-element-8);
+}
+
+.sdds-textarea-textcounter {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  color: var(--sdds-textarea-textcounter);
+  float: right;
+  flex-basis: 100%;
+  text-align: right;
+  padding-top: var(--sdds-spacing-element-4);
+}
+.sdds-textarea-textcounter .sdds-textfield-textcounter-divider {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  color: var(--sdds-textarea-textcounter-divider);
+}
+
+.sdds-textarea-helper {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-top: var(--sdds-spacing-element-4);
+  color: var(--sdds-textarea-helper);
+  flex-grow: 2;
+  flex-basis: auto;
+}
+.sdds-textarea-helper ~ .sdds-textarea-textcounter {
+  flex-basis: auto;
+}
+
+.sdds-textarea-success .sdds-textarea-input {
+  border-bottom-color: var(--sdds-textarea-border-bottom-success);
+}
+
+.sdds-textarea-error .sdds-textarea-input {
+  border-bottom-color: var(--sdds-textarea-border-bottom-error);
+}
+.sdds-textarea-error .sdds-textarea-wrapper::after, .sdds-textarea-error .sdds-textarea-wrapper::before {
+  background: var(--sdds-textarea-bar-error);
+}
+.sdds-textarea-error .sdds-textarea-helper {
+  color: var(--sdds-textarea-helper-error);
+}
+
+.sdds-textarea-disabled .sdds-textarea-input {
+  border-bottom-color: transparent;
+}
+.sdds-textarea-disabled .sdds-textarea-label {
+  color: var(--sdds-textarea-disabled-label);
+}
+
+.sdds-textarea-icon__readonly {
+  display: none;
+  position: absolute;
+  right: 18px;
+  top: 18px;
+  color: var(--sdds-textarea-icon-read-only-color);
+}
+.sdds-textarea-icon__readonly-label {
+  display: none;
+  position: absolute;
+  right: 18px;
+  top: 48px;
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  padding: 8px;
+  color: var(--sdds-textarea-icon-read-only-label-color);
+  background-color: var(--sdds-textarea-icon-read-only-label-background);
+  white-space: nowrap;
+  border-radius: 4px 0 4px 4px;
+}
+
+.sdds-textarea-readonly {
+  pointer-events: none;
+}
+.sdds-textarea-readonly .sdds-textarea-icon__readonly {
+  display: block;
+}
+.sdds-textarea-readonly .sdds-textarea-icon__readonly:hover ~ .sdds-textarea-icon__readonly-label {
+  display: block;
+}
+.sdds-textarea-readonly .sdds-textfield-input {
+  padding-right: 54px;
+  background-color: transparent;
+}
+.sdds-textarea-readonly .sdds-textfield-container {
+  background-color: transparent;
+}

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

@@ -0,0 +1,402 @@
+import { h } from '@stencil/core';
+export class Textarea {
+  constructor() {
+    this.label = '';
+    this.name = '';
+    this.helper = undefined;
+    this.cols = undefined;
+    this.rows = undefined;
+    this.labelPosition = 'no-label';
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readOnly = false;
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.modeVariant = null;
+    this.autoFocus = false;
+    this.focusInput = undefined;
+  }
+  handleChange(event) {
+    this.sddsChange.emit(event);
+  }
+  handleBlur(event) {
+    this.sddsBlur.emit(event);
+    this.focusInput = false;
+  }
+  // Data input event in value prop
+  handleInput(event) {
+    this.sddsInput.emit(event);
+    this.value = event.target.value;
+  }
+  /* Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocus(event) {
+    this.textEl.focus();
+    this.focusInput = true;
+    this.sddsFocus.emit(event);
+  }
+  render() {
+    var _a;
+    return (h("div", { class: `
+        sdds-textarea-container
+        ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}
+        ${this.focusInput ? 'sdds-textarea-focus' : ''}
+        ${this.disabled ? 'sdds-textarea-disabled' : ''}
+        ${this.readOnly ? 'sdds-textarea-readonly' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${this.value ? 'sdds-textarea-data' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `sdds-textarea-${this.state}` : ''}
+        ` }, this.labelPosition !== 'no-label' && (h("span", { class: 'sdds-textarea-label' }, this.label)), h("div", { class: "sdds-textarea-wrapper" }, h("textarea", { class: 'sdds-textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autoFocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+        if (!this.readOnly) {
+          this.handleFocus(event);
+        }
+      }, onBlur: (event) => {
+        if (!this.readOnly) {
+          this.handleBlur(event);
+        }
+      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "sdds-textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "sdds-textarea-icon__readonly" }, h("sdds-icon", { name: "edit_inactive" })), h("span", { class: "sdds-textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'sdds-textarea-helper' }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'sdds-textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+  }
+  static get is() { return "sdds-textarea"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["textarea.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["textarea.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name attribute"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Helper text"
+        },
+        "attribute": "helper",
+        "reflect": false
+      },
+      "cols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Textarea cols attribute"
+        },
+        "attribute": "cols",
+        "reflect": false
+      },
+      "rows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Textarea rows attribute"
+        },
+        "attribute": "rows",
+        "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inside' | 'outside' | 'no-label'",
+          "resolved": "\"inside\" | \"no-label\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the label for the textfield."
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'no-label'"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of the input text"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in readonly state"
+        },
+        "attribute": "read-only",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'error' | 'success' | 'default'",
+          "resolved": "\"default\" | \"error\" | \"success\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Error state of input"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Max length of input"
+        },
+        "attribute": "max-length",
+        "reflect": false
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mode variant of the textarea"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Control of autofocus"
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focusInput": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event for the textarea"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "sddsBlur",
+        "name": "sddsBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Blur event for the textarea"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsInput",
+        "name": "sddsInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input event for the textarea"
+        },
+        "complexType": {
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsFocus",
+        "name": "sddsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the textarea"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+}