@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/textfield/textfield.js

@@ -1,359 +1,439 @@
-import { h } from '@stencil/core';
-export class Textfield {
-  constructor() {
-    this.type = 'text';
-    this.labelPosition = 'no-label';
-    this.label = '';
-    this.placeholder = '';
-    this.value = '';
-    this.disabled = false;
-    this.readonly = false;
-    this.size = 'lg';
-    this.modeVariant = 'primary';
-    this.noMinWidth = false;
-    this.name = '';
-    this.state = 'default';
-    this.maxLength = undefined;
-    this.autofocus = false;
-    this.focusInput = undefined;
-  }
-  // Data input event in value prop
-  handleInput(e) {
-    this.value = e.target.value;
-  }
-  // Change event isn't a composed:true by default in for input
-  handleChange(e) {
-    this.customChange.emit(e);
-  }
-  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
-  handleFocusClick() {
-    this.textInput.focus();
-    this.focusInput = true;
-  }
-  render() {
-    var _a;
-    let className = ' sdds-textfield-input';
-    if (this.size === 'md') {
-      className += `${className}-md`;
-    }
-    if (this.size === 'sm') {
-      className += `${className}-sm`;
-    }
+import { h } from '@stencil/core';
+export class Textfield {
+  constructor() {
+    this.type = 'text';
+    this.labelPosition = 'no-label';
+    this.label = '';
+    this.helper = undefined;
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readOnly = false;
+    this.size = 'lg';
+    this.modeVariant = null;
+    this.noMinWidth = false;
+    this.name = '';
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.autofocus = false;
+    this.focusInput = undefined;
+  }
+  handleChange(event) {
+    this.sddsChange.emit(event);
+  }
+  // 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.textInput.focus();
+    this.focusInput = true;
+    this.sddsFocus.emit(event);
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleBlur(event) {
+    this.focusInput = false;
+    this.sddsBlur.emit(event);
+  }
+  render() {
+    var _a;
+    let className = ' sdds-textfield-input';
+    if (this.size === 'md') {
+      className += `${className}-md`;
+    }
+    if (this.size === 'sm') {
+      className += `${className}-sm`;
+    }
     return (h("div", { class: `
         ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
-        ${this.focusInput && !this.disabled
-        ? 'sdds-form-textfield sdds-textfield-focus'
+        ${this.focusInput && !this.disabled
+        ? 'sdds-form-textfield sdds-textfield-focus'
         : ' sdds-form-textfield'}
         ${this.value ? 'sdds-textfield-data' : ''}
-        ${this.labelPosition === 'inside' && this.size !== 'sm'
-        ? 'sdds-textfield-container-label-inside'
+        ${this.labelPosition === 'inside' && this.size !== 'sm'
+        ? 'sdds-textfield-container-label-inside'
         : ''}
         ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
-        ${this.readonly ? 'sdds-form-textfield-readonly' : ''}
-        ${this.modeVariant === 'primary' ? 'sdds-on-white-bg' : ''}
+        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
         ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
         ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
-        ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-textfield-${this.state}`
+        ${this.state === 'error' || this.state === 'success'
+        ? `sdds-form-textfield-${this.state}`
         : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "sdds-textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.handleFocusClick(), class: "sdds-textfield-container" }, h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-prefix" })), h("div", { class: "sdds-textfield-input-container" }, h("input", { onFocus: (e) => {
-        if (this.readonly) {
-          e.preventDefault();
-          this.textInput.blur();
-          return;
-        }
-        this.focusInput = true;
-      }, onBlur: () => {
-        this.focusInput = false;
-      }, ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e) }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "sdds-textfield-label-inside" }, this.label))), h("div", { class: "sdds-textfield-bar" }), h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-suffix" })), h("svg", { class: "sdds-textfield-icon__readonly", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6242 10.7946L17.1365 7.28228C17.6247 6.79412 17.6247 6.00266 17.1365 5.5145L14.485 2.86295C13.9968 2.37479 13.2054 2.37479 12.7172 2.86295L9.20483 6.3753L10.0887 7.25919L11.3914 5.95654L14.0429 8.6081L12.7403 9.91075L13.6242 10.7946ZM13.6011 3.74684L16.2526 6.39839L14.9268 7.72421L12.2753 5.07265L13.6011 3.74684Z", fill: "#0D0F13" }), h("path", { d: "M7.43707 9.91075L5.00974 12.3381L4.01561 15.9837L7.6613 14.9896L10.0886 12.5623L10.9725 13.4462L8.54519 15.8735C8.39136 16.0274 8.20004 16.1384 7.99014 16.1956L3.28932 17.4774C3.07294 17.5364 2.84154 17.475 2.68295 17.3164C2.52436 17.1578 2.46291 16.9264 2.52191 16.71L3.80377 12.0092C3.861 11.7993 3.97202 11.608 4.12585 11.4542L6.55318 9.02686L7.43707 9.91075Z", fill: "#0D0F13" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.43306 1.43306C1.67714 1.18898 2.07287 1.18898 2.31695 1.43306L18.5671 17.6832C18.8112 17.9273 18.8112 18.323 18.5671 18.5671C18.323 18.8112 17.9273 18.8112 17.6832 18.5671L1.43306 2.31695C1.18898 2.07287 1.18898 1.67714 1.43306 1.43306Z", fill: "#0D0F13" })), h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (h("div", { class: "sdds-textfield-helper-error-state" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8 2.00015C4.6853 2.00015 1.9982 4.68725 1.9982 8.00195C1.9982 11.3167 4.6853 14.0038 8 14.0038C11.3147 14.0038 14.0018 11.3167 14.0018 8.00195C14.0018 4.68725 11.3147 2.00015 8 2.00015ZM1 8.00195C1 4.13596 4.13401 1.00195 8 1.00195C11.866 1.00195 15 4.13596 15 8.00195C15 11.8679 11.866 15.002 8 15.002C4.13401 15.002 1 11.8679 1 8.00195Z", fill: "#FF2340" }), h("path", { d: "M7.4014 7.2352V5H8.5894V7.2352L8.4134 9.3824H7.5774L7.4014 7.2352ZM7.375 10.0512H8.6246V11.248H7.375V10.0512Z", fill: "#FF2340" })), h("slot", { name: "sdds-helper" }))), this.state !== 'error' && h("slot", { name: "sdds-helper" }), this.maxLength > 0 && (h("div", { class: "sdds-textfield-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-textfield"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["textfield.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["textfield.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'text' | 'password'",
-          "resolved": "\"password\" | \"text\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Which input type, text, password or similar"
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'text'"
-      },
-      "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'"
-      },
-      "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": "''"
-      },
-      "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": true,
-        "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": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the input"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "noMinWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "With setting"
-        },
-        "attribute": "no-min-width",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name property"
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "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
-      },
-      "autofocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Autofocus for input"
-        },
-        "attribute": "autofocus",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focusInput": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "customChange",
-        "name": "customChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Change event for the textfield"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-}
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "sdds-textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "sdds-textfield-container" }, h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-prefix" })), h("div", { class: "sdds-textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        if (!this.readOnly) {
+          this.handleFocus(event);
+        }
+      }, onBlur: (event) => {
+        if (!this.readOnly) {
+          this.handleBlur(event);
+        }
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "sdds-textfield-label-inside" }, this.label))), h("div", { class: "sdds-textfield-bar" }), h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-suffix" })), h("span", { class: "sdds-textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (h("div", { class: "sdds-textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "sdds-textfield-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-textfield"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["textfield.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["textfield.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'text' | 'password'",
+          "resolved": "\"password\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Which input type, text, password or similar"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "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'"
+      },
+      "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": "''"
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Helper text"
+        },
+        "attribute": "helper",
+        "reflect": false
+      },
+      "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": true,
+        "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"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the input"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mode variant of the textfield"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With setting"
+        },
+        "attribute": "no-min-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name property"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "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
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Autofocus for input"
+        },
+        "attribute": "autofocus",
+        "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 textfield"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "sddsInput",
+        "name": "sddsInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input event for the textfield"
+        },
+        "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 textfield"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsBlur",
+        "name": "sddsBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Blur event for the textfield"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+}