jebamo 0.0.1 → 0.0.2

package/dist/components/p-2df369c4.js

@@ -0,0 +1,265 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-41492a72.js';
+import { d as defineCustomElement$1, a as debounceEvent } from './p-5dee004d.js';
+import { d as defineCustomElement$2 } from './p-4b8ae8ef.js';
+
+const jeInputCss = ":host{display:block;width:fit-content;--je-height:42px;--je-border-color:transparent;--je-input-background:var(--je-medium-100);--je-input-color:var(--je-medium-900)}:host([darkmode]){--je-input-background:var(--je-medium-850);--je-input-color:var(--je-medium-50)}:host([expand]){width:100%}:host(:invalid) div[part=outer-container].touched{--je-border-color:var(--je-error-500, red)}div[part=outer-container]{display:flex;align-items:center;justify-content:center;gap:var(--je-spacing-2xs, 8px);height:var(--je-height);background-color:var(--je-input-background, field);color:var(--je-input-color, fieldtext);padding-inline:var(--je-spacing-xs, 10px);border-radius:var(--je-border-radius, 2px);overflow:hidden;border:solid 1px var(--je-border-color);transition:border 125ms ease-in-out}div[part=outer-container].focus{--je-border-color:var(--je-primary-500, accentcolor)}div[part=outer-container].disabled{opacity:0.6;cursor:default}div[part=start-container],div[part=end-container]{display:flex}label{font-weight:var(--je-font-semi-bold)}input{font-family:var(--je-font-family, inherit);font-size:var(--je-font-size, 1rem);background:transparent;color:inherit;flex:1;border:none;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;width:inherit}input::placeholder{font-family:var(--je-font-family, inherit);font-size:var(--je-font-size, 1rem);color:var(--je-medium-600)}input:focus{outline:0}small.helper{display:block;margin-top:var(--je-spacing-2xs, 8px);padding-left:var(--je-spacing-xs, 10px);color:var(--je-medium-600)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none !important}je-popover::part(content){width:var(--je-content-width, auto);box-sizing:border-box;padding:0px}";
+const JeInputStyle0 = jeInputCss;
+
+const JeInput = /*@__PURE__*/ proxyCustomElement(class JeInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 3);
+        this.internals = this.attachInternals();
+        this.dropdownActive = false;
+        this.showPassword = false;
+        this.errors = [];
+        this.originalValue = '';
+        this.togglePassword = () => {
+            this.showPassword = !this.showPassword;
+            this.type = this.type == 'text' ? 'password' : 'text';
+        };
+        this.formatInput = async (ev) => {
+            const input = ev.target;
+            if (input && this.format) {
+                input.value = await this.format(input.value, this.value, ev);
+            }
+        };
+        this.handleInput = (ev) => {
+            const input = ev.target;
+            if (input) {
+                this.value = input.value;
+                this.valueChange.emit(this.value);
+            }
+        };
+        this.handleContainerClick = async () => {
+            if (this.dropdown) {
+                this.dropdownActive = true;
+                this.hostEl.style.setProperty('--je-content-width', `${this.hostEl.clientWidth}px`);
+                await this.popoverEl.present('element', this.hostEl);
+            }
+        };
+        this.handleDismiss = () => {
+            this.dropdownActive = false;
+            this.containerEl.classList.remove('focus');
+        };
+        this.isTouched = false;
+        this.label = '';
+        this.disabled = false;
+        this.autoCapitalize = 'off';
+        this.autoComplete = 'off';
+        this.autoCorrect = 'off';
+        this.autoFocus = undefined;
+        this.inputMode = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.multiple = false;
+        this.pattern = undefined;
+        this.readOnly = false;
+        this.required = false;
+        this.spellcheck = false;
+        this.step = undefined;
+        this.type = 'text';
+        this.value = '';
+        this.placeholder = '';
+        this.debounce = 0;
+        this.format = undefined;
+        this.validators = undefined;
+        this.noTyping = false;
+        this.helperText = undefined;
+        this.dropdown = false;
+        this.expand = undefined;
+        this.dismissOnClick = undefined;
+    }
+    componentWillLoad() {
+        if (this.label && !this.hostEl.getAttribute('name')) {
+            this.hostEl.setAttribute('name', this.label.replace(' ', '-').toLowerCase());
+        }
+    }
+    connectedCallback() {
+        this.internals.setFormValue(this.value);
+    }
+    async componentDidLoad() {
+        this.originalValue = this.value;
+        const { valueChange, debounce } = this;
+        if (debounce) {
+            this.valueChange = debounceEvent(valueChange, debounce);
+        }
+        if (this.format) {
+            this.value = await this.format(this.value);
+        }
+        else {
+            this.validatorsChanged();
+        }
+    }
+    async formResetCallback() {
+        this.isTouched = false;
+        if (this.value !== this.originalValue) {
+            if (this.format) {
+                this.value = await this.format(this.originalValue);
+            }
+            else {
+                this.value = this.originalValue;
+            }
+        }
+    }
+    handleThemeChange(e) {
+        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    handleFocus() {
+        this.containerEl.classList.add('focus');
+    }
+    handleBlur() {
+        this.isTouched = true;
+        if (!this.dropdownActive) {
+            this.containerEl.classList.remove('focus');
+        }
+    }
+    async validatorsChanged() {
+        this.errors = [];
+        if (this.validators) {
+            for (const validator of this.validators) {
+                const res = await validator(this.value);
+                this.errors = [...this.errors, ...res];
+            }
+        }
+        this.setValidity();
+    }
+    requiredChanged() {
+        this.setValidity();
+    }
+    async valueChanged() {
+        if (this.inputEl && this.inputEl.value !== this.value) {
+            this.inputEl.value = this.value;
+        }
+        this.internals.setFormValue(this.value);
+        this.validatorsChanged();
+    }
+    getInputElement() {
+        return Promise.resolve(this.inputEl);
+    }
+    dismissDropdown(role = 'manualDismiss') {
+        return this.popoverEl.dismiss(role);
+    }
+    markAsTouched() {
+        return new Promise(resolve => {
+            this.isTouched = true;
+            resolve();
+        });
+    }
+    hasError() {
+        var _a;
+        return Promise.resolve(this.errors.length > 0 || (this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '')));
+    }
+    reset() {
+        return this.formResetCallback();
+    }
+    setValidity() {
+        var _a;
+        const requiredError = this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '');
+        const hasError = this.errors.length > 0 || requiredError;
+        if (hasError) {
+            if (requiredError) {
+                this.internals.setValidity({ valueMissing: true }, `${this.label || 'This field'} is required`, this.inputEl);
+            }
+            else {
+                this.internals.setValidity({ customError: true }, this.errors[0], this.inputEl);
+            }
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    render() {
+        var _a;
+        const requiredIcon = h("je-icon", { key: 'b812ffd92e7fc689f2af87b10ee92c45e28a92bc', style: { fontSize: '10px', color: 'var(--je-error-500)' }, icon: "asterisk" });
+        const label = h("label", { key: '05f40a7e7945974b35d005c4d06965e18c50702f', part: 'label', style: { display: 'flex' } }, this.label, " ", this.required && requiredIcon);
+        const invalid = this.errors.length > 0 || (this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === ''));
+        const containerClasses = {
+            disabled: this.disabled,
+            touched: this.isTouched
+        };
+        if (invalid && this.isTouched) {
+            this.internals.reportValidity();
+        }
+        return (h(Host, { key: '0d7ad78c21a47bca8b35635269bf8f0c911ba0dd' }, h("div", { key: '5ea27cbabac48f622d72bd571655a5ec967acf4b', ref: el => this.containerEl = el, part: 'outer-container', onClick: this.handleContainerClick, class: containerClasses }, h("div", { key: 'd99e8aa93a05c65b7c7f4727027917e1e9056ee3', part: 'start-container' }, h("slot", { key: '2e59dda2daafcfcee06a463faf2684705eea0642', name: 'start' }), this.label && label), h("input", { key: '27a77375cecb8c9669619c964dfb0422d5650adf', part: "native-input", ref: el => this.inputEl = el, onInputCapture: this.formatInput, onInput: this.handleInput, disabled: this.disabled, autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete, autoCorrect: this.autoCorrect, autoFocus: this.autoFocus, inputMode: this.inputMode, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, pattern: this.pattern, readOnly: this.readOnly || this.noTyping, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: this.value, placeholder: this.placeholder }), h("div", { key: '3fcc3d84a01fc26fd11d7db45beee79ae5656af1', part: 'end-container' }, h("slot", { key: '2bf03124a793ec9ceb0cad951ac47693315acceb', name: 'end' }), !this.showPassword && this.type == 'password' && h("je-icon", { key: '3b4096d3cb432fd9614e90d43cf3367b365ce679', icon: "visibility", fill: true, onClick: this.togglePassword }), this.showPassword && this.type == 'text' && h("je-icon", { key: 'a4c1ec8f4e7ffdb64e906681389096b3da320485', icon: "visibility_off", fill: true, onClick: this.togglePassword }))), this.helperText && h("small", { key: '234252ad2c8c2b18b1c59d18c8bb451f97fcf269', class: "helper" }, this.helperText), this.dropdown && h("je-popover", { key: '132347f2bb1e31eb990e2f26381a5e2f111a4eaf', ref: el => this.popoverEl = el, exportparts: 'content', dismissOnClick: this.dismissOnClick, onDidDismiss: this.handleDismiss }, h("slot", { key: '03bf3efeddcfc701b680a5cb1fc473e80a44196e', name: 'dropdown' }))));
+    }
+    static get formAssociated() { return true; }
+    get hostEl() { return this; }
+    static get watchers() { return {
+        "validators": ["validatorsChanged"],
+        "required": ["requiredChanged"],
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return JeInputStyle0; }
+}, [65, "je-input", {
+        "label": [1],
+        "disabled": [4],
+        "autoCapitalize": [1, "auto-capitalize"],
+        "autoComplete": [1, "auto-complete"],
+        "autoCorrect": [1, "auto-correct"],
+        "autoFocus": [4, "auto-focus"],
+        "inputMode": [1, "input-mode"],
+        "min": [8],
+        "max": [8],
+        "minLength": [2, "min-length"],
+        "maxLength": [2, "max-length"],
+        "multiple": [4],
+        "pattern": [1],
+        "readOnly": [4, "read-only"],
+        "required": [4],
+        "spellcheck": [4],
+        "step": [1],
+        "type": [1025],
+        "value": [1025],
+        "placeholder": [1],
+        "debounce": [2],
+        "format": [16],
+        "validators": [16],
+        "noTyping": [4, "no-typing"],
+        "helperText": [1, "helper-text"],
+        "dropdown": [4],
+        "expand": [516],
+        "dismissOnClick": [516, "dismiss-on-click"],
+        "isTouched": [32],
+        "getInputElement": [64],
+        "dismissDropdown": [64],
+        "markAsTouched": [64],
+        "hasError": [64],
+        "reset": [64]
+    }, [[16, "themeChange", "handleThemeChange"], [0, "focus", "handleFocus"], [0, "blur", "handleBlur"]], {
+        "validators": ["validatorsChanged"],
+        "required": ["requiredChanged"],
+        "value": ["valueChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["je-input", "je-icon", "je-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "je-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JeInput);
+            }
+            break;
+        case "je-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "je-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { JeInput as J, defineCustomElement as d };
+
+//# sourceMappingURL=p-2df369c4.js.map

package/dist/components/p-2df369c4.js.map

@@ -0,0 +1 @@
+{"file":"p-2df369c4.js","mappings":"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","names":[],"sources":["src/components/je-input/je-input.scss?tag=je-input&encapsulation=shadow","src/components/je-input/je-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n\n  --je-height: 42px;\n  --je-border-color: transparent;\n  --je-input-background: var(--je-medium-100);\n  --je-input-color: var(--je-medium-900);\n}\n\n:host([darkmode]) {\n  --je-input-background: var(--je-medium-850);\n  --je-input-color: var(--je-medium-50);\n}\n\n:host([expand]) {\n  width: 100%;\n}\n\n:host(:invalid) div[part=outer-container].touched {\n  --je-border-color: var(--je-error-500, red);\n}\n\ndiv[part='outer-container'] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--je-spacing-2xs, 8px);\n  height: var(--je-height);\n  background-color: var(--je-input-background, field);\n  color: var(--je-input-color, fieldtext);\n  padding-inline: var(--je-spacing-xs, 10px);\n  border-radius: var(--je-border-radius, 2px);\n  overflow: hidden;\n  border: solid 1px var(--je-border-color);\n  transition: border 125ms ease-in-out;\n  &.focus {\n    --je-border-color: var(--je-primary-500, accentcolor);\n  }\n  &.disabled {\n    opacity: 0.6;\n    cursor: default;\n  }\n}\n\ndiv[part='start-container'],\ndiv[part='end-container'] {\n  display: flex;\n}\n\nlabel {\n  font-weight: var(--je-font-semi-bold);\n}\n\ninput {\n  font-family: var(--je-font-family, inherit);\n  font-size: var(--je-font-size, 1rem);\n  background: transparent;\n  color: inherit;\n  flex: 1;\n  border: none;\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  padding-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  margin-right: 0;\n  width: inherit;\n  &::placeholder {\n    font-family: var(--je-font-family, inherit);\n    font-size: var(--je-font-size, 1rem);\n    color: var(--je-medium-600);\n  }\n  &:focus {\n    outline: 0;\n  }\n}\n\nsmall.helper {\n  display: block;\n  margin-top: var(--je-spacing-2xs, 8px);\n  padding-left: var(--je-spacing-xs, 10px);\n  color: var(--je-medium-600);\n}\n\ninput[type=\"password\"]::-ms-reveal,\ninput[type=\"password\"]::-ms-clear {\n  display: none !important;\n}\n\nje-popover::part(content) {\n  width: var(--je-content-width, auto);\n  box-sizing: border-box;\n  padding: 0px;\n}\n","import { Component, Host, Prop, h, Element, Event, AttachInternals, EventEmitter, Method, State, Watch, Listen } from '@stencil/core';\nimport { debounceEvent } from '../../utils/utils';\n\nexport type FormatterFn = (newValue: string, oldValue?: string, ev?: InputEvent) => string;\nexport type AsyncFormatterFn = (newValue: string, oldValue?: string, ev?: InputEvent) => Promise<string>;\n\nexport type ValidationFn = (value: string) => string[];\nexport type AsyncValidationFn = (value: string) => Promise<string[]>;\n\n@Component({\n  tag: 'je-input',\n  styleUrl: 'je-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeInput {\n  @Element() hostEl!: HTMLJeInputElement;\n  @AttachInternals() internals: ElementInternals;\n  @State() isTouched = false;\n  private dropdownActive = false;\n  private containerEl!: HTMLDivElement;\n  private popoverEl!: HTMLJePopoverElement;\n  private inputEl!: HTMLInputElement;\n  private showPassword = false;\n  private errors: string[] = [];\n  private originalValue = '';\n\n  /**\n   * Text above the control\n   */\n  @Prop() label = '';\n\n  /**\n   * Renders input as disabled and prevents changes\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoCapitalize = 'off';\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoComplete = 'off';\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoCorrect: 'off' | 'on' = 'off';\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoFocus?: boolean;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() inputMode: string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Renders input as read only and prevents changes\n   */\n  @Prop() readOnly = false;\n\n  /**\n   * Marks as required in form and adds asterisk to the end of the label\n   */\n  @Prop() required = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() spellcheck = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() step?: string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop({ mutable: true }) type = 'text';\n\n  /**\n   * Current value of the input\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * Input placeholder text\n   */\n  @Prop() placeholder = '';\n\n  /**\n   * Optional debounce of the didInput event\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * Formatter function that gets applied as the user types\n   */\n  @Prop() format?: FormatterFn | AsyncFormatterFn;\n\n  /**\n   * Custom validator functions for form participation\n   */\n  @Prop() validators?: (ValidationFn | AsyncValidationFn)[];\n\n  /**\n   * Will prevent changes, does not change the input's state in any way\n   */\n  @Prop() noTyping = false;\n\n  /**\n   * Helper text directly below the control\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Whether or not to render a dropdown when input is focused\n   */\n  @Prop() dropdown = false;\n\n  /**\n   * Whether or not the input should expand to the full width of it's container\n   */\n  @Prop({ reflect: true }) expand?: boolean;\n\n  /**\n   * Whether or not the dropdown should dismiss itself on click\n   */\n  @Prop({ reflect: true }) dismissOnClick?: boolean;\n\n  /**\n   * Emits as the user types\n   */\n  @Event({ bubbles: false }) valueChange: EventEmitter<string>;\n\n  componentWillLoad() {\n    if (this.label && !this.hostEl.getAttribute('name')) {\n      this.hostEl.setAttribute('name', this.label.replace(' ', '-').toLowerCase());\n    }\n  }\n\n  connectedCallback() {\n    this.internals.setFormValue(this.value);\n  }\n\n  async componentDidLoad() {\n    this.originalValue = this.value;\n    const { valueChange, debounce } = this;\n    if (debounce) {\n      this.valueChange = debounceEvent(valueChange, debounce);\n    }\n    if (this.format) {\n      this.value = await this.format(this.value);\n    } else {\n      this.validatorsChanged();\n    }\n  }\n\n  async formResetCallback() {\n    this.isTouched = false;\n    if (this.value !== this.originalValue) {\n      if (this.format) {\n        this.value = await this.format(this.originalValue);\n      } else {\n        this.value = this.originalValue;\n      }\n    }\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.hostEl.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  @Listen('focus')\n  handleFocus() {\n    this.containerEl.classList.add('focus');\n  }\n\n  @Listen('blur')\n  handleBlur() {\n    this.isTouched = true;\n    if (!this.dropdownActive) {\n      this.containerEl.classList.remove('focus');\n    }\n  }\n\n  @Watch('validators')\n  async validatorsChanged() {\n    this.errors = [];\n    if (this.validators) {\n      for (const validator of this.validators) {\n        const res = await validator(this.value);\n        this.errors = [...this.errors, ...res];\n      }\n    }\n    this.setValidity();\n  }\n\n  @Watch('required')\n  requiredChanged() {\n    this.setValidity();\n  }\n\n  @Watch('value')\n  async valueChanged() {\n    if (this.inputEl && this.inputEl.value !== this.value) {\n      this.inputEl.value = this.value;\n    }\n    this.internals.setFormValue(this.value);\n    this.validatorsChanged();\n  }\n\n  @Method()\n  getInputElement() {\n    return Promise.resolve(this.inputEl);\n  }\n\n  @Method()\n  dismissDropdown(role = 'manualDismiss') {\n    return this.popoverEl.dismiss(role);\n  }\n\n  @Method()\n  markAsTouched() {\n    return new Promise<void>(resolve => {\n      this.isTouched = true;\n      resolve();\n    });\n  }\n\n  @Method()\n  hasError() {\n    return Promise.resolve(this.errors.length > 0 || (this.required && ((this.value ?? '') === '')));\n  }\n\n  @Method()\n  reset() {\n    return this.formResetCallback();\n  }\n\n  private togglePassword = () => {\n    this.showPassword = !this.showPassword;\n    this.type = this.type == 'text' ? 'password' : 'text';\n  }\n\n  private formatInput = async (ev: InputEvent) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input && this.format) {\n      input.value = await this.format(input.value, this.value, ev);\n    }\n  }\n\n  private handleInput = (ev: InputEvent) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value;\n      this.valueChange.emit(this.value);\n    }\n  }\n\n  private setValidity() {\n    const requiredError = this.required && ((this.value ?? '') === '');\n    const hasError = this.errors.length > 0 || requiredError;\n    if (hasError) {\n      if (requiredError) {\n        this.internals.setValidity({ valueMissing: true }, `${this.label || 'This field'} is required`, this.inputEl);\n      } else {\n        this.internals.setValidity({ customError: true }, this.errors[0], this.inputEl);\n      }\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  private handleContainerClick = async () => {\n    if (this.dropdown) {\n      this.dropdownActive = true;\n      this.hostEl.style.setProperty('--je-content-width', `${this.hostEl.clientWidth}px`);\n      await this.popoverEl.present('element', this.hostEl);\n    }\n  }\n\n  private handleDismiss = () => {\n    this.dropdownActive = false;\n    this.containerEl.classList.remove('focus');\n  }\n\n  render() {\n    const requiredIcon = <je-icon style={{ fontSize: '10px', color: 'var(--je-error-500)' }} icon=\"asterisk\" />;\n    const label = <label part='label' style={{ display: 'flex' }}>{this.label} {this.required && requiredIcon}</label>;\n    const invalid = this.errors.length > 0 || (this.required && ((this.value ?? '') === ''));\n    const containerClasses = {\n      disabled: this.disabled,\n      touched: this.isTouched\n    };\n\n    if (invalid && this.isTouched) {\n      this.internals.reportValidity();\n    }\n\n    return (\n      <Host>\n        <div ref={el => this.containerEl = el} part='outer-container' onClick={this.handleContainerClick} class={containerClasses}>\n          <div part='start-container'>\n            <slot name='start'/>\n            {this.label && label}\n          </div>\n\n          <input part=\"native-input\"\n            ref={el => this.inputEl = el}\n            onInputCapture={this.formatInput}\n            onInput={this.handleInput}\n            disabled={this.disabled}\n            autoCapitalize={this.autoCapitalize}\n            autoComplete={this.autoComplete}\n            autoCorrect={this.autoCorrect}\n            autoFocus={this.autoFocus}\n            inputMode={this.inputMode}\n            min={this.min}\n            max={this.max}\n            minLength={this.minLength}\n            maxLength={this.maxLength}\n            multiple={this.multiple}\n            pattern={this.pattern}\n            readOnly={this.readOnly || this.noTyping}\n            required={this.required}\n            spellcheck={this.spellcheck}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder} />\n\n          <div part='end-container'>\n            <slot name='end'/>\n            {!this.showPassword && this.type == 'password' && <je-icon icon=\"visibility\" fill onClick={this.togglePassword} />}\n            {this.showPassword && this.type == 'text' && <je-icon icon=\"visibility_off\" fill onClick={this.togglePassword} />}\n          </div>\n        </div>\n\n        {this.helperText && <small class=\"helper\">{this.helperText}</small>}\n\n        {this.dropdown && <je-popover ref={el => this.popoverEl = el} exportparts='content' dismissOnClick={this.dismissOnClick} onDidDismiss={this.handleDismiss}>\n          <slot name='dropdown'></slot>\n        </je-popover>}\n      </Host>\n    );\n  }\n}\n"],"version":3}