@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

package/src/atoms/gv-input.js

@@ -1 +1,508 @@
-var t=Object.create?function(t,e,i,s){void 0===s&&(s=i),Object.defineProperty(t,s,{enumerable:!0,get:function(){return e[i]}})}:function(t,e,i,s){void 0===s&&(s=i),t[s]=e[i]},e=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},i=function(i){if(i&&i.__esModule)return i;var s={};if(null!=i)for(var n in i)"default"!==n&&Object.prototype.hasOwnProperty.call(i,n)&&t(s,i,n);return e(s,i),s};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvInput=void 0;const s=require("lit/directives/class-map"),n=require("lit"),l=require("../styles/skeleton"),a=require("../styles/input"),o=require("../styles/link"),r=require("../lib/events");require("./gv-icon"),require("../molecules/gv-popover");const h=require("../lib/i18n"),c=require("../mixins/input-element"),p=require("../styles/shapes");class u extends((0,c.InputElement)(n.LitElement)){static get properties(){return{...super.properties,type:{type:String,reflect:!0},large:{type:Boolean},medium:{type:Boolean},small:{type:Boolean},icon:{type:String},iconLeft:{type:String,attribute:"icon-left"},loading:{type:Boolean},min:{type:Number},max:{type:Number},autocomplete:{type:String},clipboard:{type:Boolean},clickable:{type:Boolean},clearable:{type:Boolean},noSubmit:{type:Boolean,attribute:"no-submit"},pattern:{type:String,reflect:!0},description:{type:String},_type:{type:String,attribute:!1}}}static get styles(){return[...super.styles,l.skeleton,a.input,o.link,n.css`.clickable ::slotted(input),.clickable input{cursor:pointer}.clickable ::slotted(input:hover),.clickable input:hover{box-shadow:0 1px 3px var(--gv-theme-neutral-color-dark,#bfbfbf)}gv-icon{--gv-icon--s:22px}.copied{--gv-input--bdc:var(--gv-theme-color-success-light, #81c784)}.copied .box-icon gv-icon{--gv-icon--c:var(--gv-theme-color-success-dark, #388e3c)}.loading ::slotted(input),div.box-icon gv-icon.loading{animation:spinner 1.6s linear infinite;--gv-icon--s:20px}.loading.small gv-icon{--gv-icon--s:18px}@keyframes spinner{to{transform:rotate(360deg)}}.clipboard ::slotted(input),.clipboard input{cursor:copy}.clipboard ::slotted(input:read-only:hover),.clipboard input:read-only:hover{cursor:not-allowed}.clipboard__popover{--gv-popover--bgc:var(--gv-theme-color-darker, #383e3f);--gv-popover--c:var(--gv-theme-font-color-light, #ffffff);--gv-popover--p:0rem 0.4rem 0rem 0.2rem;font-size:11px}.clipboard__popover-content{display:flex;justify-content:center;align-items:center;--gv-icon--c:var(--gv-theme-font-color-light, #ffffff)}`]}static get shapeSearch(){return"general:search"}static get shapeClear(){return"code:error"}static get shapeInvisible(){return"general:invisible"}static get shapeVisible(){return"general:visible"}constructor(){super(),this._type="text",this._showPassword=!1,this.value="",this.autocomplete="off",this.noSubmit=!1}reset(){this.value="",this.getInputElement().blur()}focus(){this.getInputElement().focus()}getInputElement(){return this._input||super.getInputElement()}updated(t){if(t.has("_type")&&(this.getInputElement().type=this._type),t.has("autocomplete")&&(this.getInputElement().autocomplete=this.autocomplete),t.has("name")&&null!=this.name&&(this.getInputElement().name=this.name),t.has("required")&&(this.getInputElement().required=this.required,this.getInputElement()["aria-required"]=!!this.required,null!=this.value&&""!==this.value.trim()||(this.invalid=!0)),this.readonly?this.getInputElement().setAttribute("readonly",!0):this.getInputElement().removeAttribute("readonly"),t.has("label")||t.has("title")){const t=this.title||this.label;null!=t&&(this.getInputElement().title=t)}t.has("label")&&this.label&&(this.getInputElement()["aria-label"]=this.label),t.has("pattern")&&(this.getInputElement().pattern=this.pattern,this._regexPattern=new RegExp(this.pattern)),(t.has("disabled")||t.has("skeleton"))&&(this.getInputElement().disabled=this.disabled||this.skeleton),t.has("placeholder")&&null!=this.placeholder&&(this.getInputElement().placeholder=this.placeholder),t.has("value")&&(this.getInputElement().value=this.value,this.updateState(this.value)),t.has("min")&&null!=this.min&&(this.getInputElement().min=this.min),t.has("max")&&null!=this.max&&(this.getInputElement().max=this.max)}_setClipboardIcon(t){null!=this.icon&&this.icon!==p.shapeCopied&&this.icon!==p.shapeClipboard?this.iconLeft=t:this.icon=t}firstUpdated(t){if(super.firstUpdated(t),this.catchSlot(),this.clipboard)Promise.resolve().then((()=>i(require("clipboard-copy")))).then((t=>this.copy=()=>{(0,t.default)(this.value),this._copied=!0,this._setClipboardIcon(p.shapeCopied),setTimeout((()=>{this._copied=!1,this._setClipboardIcon(p.shapeClipboard)}),1e3)})),this._setClipboardIcon(p.shapeClipboard),setTimeout((()=>{this.shadowRoot.querySelector(".clipboard__popover").addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation(),this.copy(this.value)}))}),0);else{const t=this.shadowRoot.querySelector("gv-icon.link");t&&t.addEventListener("click",this._onIconClick.bind(this))}this.getInputElement().id=this._id,this.bindInputEvents()}bindInputEvents(){this.getInputElement().addEventListener("input",this._onInput.bind(this)),this.getInputElement().addEventListener("keyup",this._onKeyUp.bind(this)),this.getInputElement().addEventListener("keypress",this._onKeyPress.bind(this))}catchSlot(){const t=this.getInputElement();for(const t of this.childNodes)if(1===t.nodeType){const e="input"===t.nodeName.toLowerCase()?t:t.querySelector("input");if(e){this._input=e;break}}this._input&&t.remove()}updateState(t){if(super.updateState(t),!0===this.valid&&!this.readonly)if(this._regexPattern){if(null!=t&&""!==t.trim()){const e=t.match(this._regexPattern);this.setValidity(null==e,`field not respect the pattern ${this._regexPattern}`)}}else if("number"===this._type&&null!=t&&("number"==typeof t||""!==t.trim())){const e=Number(t).valueOf();isNaN(e)?this.setValidity(!0,"field is not number"):null!=this.min&&this.min>e?this.setValidity(!0,`field is < ${this.min}`):null!=this.max&&this.max<e?this.setValidity(!0,`field is > ${this.max}`):this.setValidity(!1)}}_onInput(t){this.updateState(t.target.value),this.value=t.target.value,(0,r.dispatchCustomEvent)(this,"input",this.value)}_onKeyPress(t){if("number"===this._type){let e;e="paste"===t.type?t.clipboardData.getData("text/plain"):String.fromCharCode(t.keyCode);let i=/[0-9]/;(null==this.min||this.min<0)&&(i=/[0-9-]/),i.test(e)||t.preventDefault()}}_onKeyUp(t){if(13===t.keyCode){if(!this.noSubmit){const t=this.closest("form");t&&t.dispatchEvent(new Event("submit",{bubbles:!0,cancelable:!0}))}(0,r.dispatchCustomEvent)(this,"submit",this.value)}}get isClearable(){return this.clearable&&!this.disabled&&!this.readonly&&!this.loading&&null!=this.value&&""!==this.value}set type(t){["text","password","email","search","number","url"].includes(t)&&(this._type=t),"url"===this._type&&(this.pattern="(https?://.w*)(:\\d*)?\\/?(.*)"),"email"===this._type&&(this.pattern=/^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/),"search"===this._type&&null==this.icon&&null==this.iconLeft&&(this.icon=u.shapeSearch,this.clearable=!0),"password"===this._type&&(this.icon=u.shapeSearch)}get type(){return this._type}_onIconClick(){(0,r.dispatchCustomEvent)(this,"icon-click",this.value),(0,r.dispatchCustomEvent)(this,"submit",this.value)}_onIconVisibleClick(t){this.isPassword&&(t.preventDefault(),t.stopPropagation(),this._showPassword=!this._showPassword,this._type=this._showPassword?"text":"password")}get isPassword(){return!this.disabled&&("password"===this._type||"text"===this._type&&this._showPassword)}get hasClickableIcon(){return!this.disabled&&!this.readonly&&(this.clickable||"search"===this._type||this.clipboard)}get hasClipboard(){return!this.disabled&&this.clipboard}clear(){this.focus(),this.value="",(0,r.dispatchCustomEvent)(this,"clear",this.value)}_renderClearIcon(){return this.isClearable?n.html`<div class="box-icon box-icon-clear"><gv-icon class="link" shape="code:error" title="${(0,h.i18n)("gv-input.clear")}" @click="${this.clear}"></gv-icon></div>`:""}_shapePassword(){return this._showPassword?"general:visible":"general:hidden"}_renderPasswordIcon(){if(this.isPassword){const t=this._shapePassword(),e=this._showPassword?"Show":"Hide";return n.html`<div class="box-icon"><gv-icon class="link" shape="${t}" title="${e}" @click="${this._onIconVisibleClick}"></gv-icon></div>`}return""}get hasBackground(){return!this.loading}renderIcon(){let t=null;if((!this.isPassword&&this.icon||this.iconLeft)&&(t=!this.isPassword&&this.icon||this.iconLeft),this.loading&&(t="navigation:waiting"),t){const e={"box-icon":!0,"box-icon-left":null!=this.iconLeft||this.clearable,"box-icon-bgc":this.hasBackground},i={link:this.hasClickableIcon,loading:this.loading};let l="";if("search"===this._type)l=(0,h.i18n)("gv-input.search");else{if(this.hasClipboard)return l=(0,h.i18n)("gv-input.copy"),n.html`<div class="${(0,s.classMap)(e)}"><gv-popover class="clipboard__popover" event="click" delay="750" .arrow="${!1}"><gv-icon class="${(0,s.classMap)(i)}" shape="${t}" title="${l}"></gv-icon><div slot="popover" class="clipboard__popover-content"><gv-icon shape="code:check"></gv-icon><div>Copied</div></div></gv-popover></div>`;this.placeholder&&(l=this.placeholder)}return n.html`<div class="${(0,s.classMap)(e)}"><gv-icon class="${(0,s.classMap)(i)}" shape="${t}" title="${l}"></gv-icon></div>`}return""}render(){const t={"box-input":!0,skeleton:this.skeleton,large:this.large,medium:this.medium||!this.large&&!this.small,small:this.small,icon:!!this.icon&&!this.clearable,clearable:this.clearable,"icon-left":!!this.iconLeft||!!this.icon&&this.clearable,clipboard:this.hasClipboard,required:this.required,copied:this.hasClipboard&&this._copied};return n.html`<div class="${(0,s.classMap)(t)}">${this.renderLabel()} <input><slot></slot>${this._renderClearIcon()} ${this.renderIcon()} ${this._renderPasswordIcon()}</div>${null!=this.description?n.html`<div class="description" .innerHTML="${this.description}"></div>`:""}`}}exports.GvInput=u,window.customElements.define("gv-input",u);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { classMap } from 'lit/directives/class-map';
+import { LitElement, html, css } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import { input } from '../styles/input';
+import { link } from '../styles/link';
+import { dispatchCustomEvent } from '../lib/events';
+import './gv-icon';
+import '../molecules/gv-popover';
+import { i18n } from '../lib/i18n';
+import { InputElement } from '../mixins/input-element';
+import { shapeClipboard, shapeCopied } from '../styles/shapes';
+/**
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-input:input - mirrors native input events with the `value` on `detail`
+ * @fires gv-input:clear - event when user clear a clearable input
+ *
+ * @attr {Boolean} disabled - same as native input element `disabled` attribute
+ * @attr {Boolean} required - same as native input element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {String} value - the value of the input
+ * @attr {String} label - label of the input
+ * @attr {String} title - title of the input
+ * @attr {String} name - name of the input
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {String} description - a description
+ * @attr {String} type - type of the input, can be text (Default), password, email, search, number, url.
+ * @attr {Boolean} clipboard - for readonly input with clipboard
+ * @attr {Boolean} large - for a large input
+ * @attr {Boolean} medium - for a medium input (Default)
+ * @attr {Boolean} small - for a small input
+ * @attr {String} icon - icon of the input
+ * @attr {String} icon-left - icon of the input to display at left
+ * @attr {Boolean} valid - if value is valid
+ * @attr {Boolean} invalid - if value is invalid
+ * @attr {Boolean} [loading=false] - true to display a loading icon
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ * @attr {String} [autocomplete='off'] - standard autocomplete attribute
+ * @attr {Boolean} [clickable=false] - If true, icon has link style
+ * @attr {Boolean} [clearable=false] - If true, input can be clear with button
+ * @attr {Boolean} [no-submit=false] - If true, input cannot dispatch native submit event on enter key press to closest form
+ * @attr {String} [pattern=null] - Pattern for input validation. If type is url, default pattern is ^(http|https)://
+ *
+ * @cssprop {String} [--gv-input--bdc=var(--gv-theme-neutral-color, #F5F5F5)] - Border color
+ * @cssprop {Color} [--gv-input--bds=solid] - Border style
+ * @cssprop {Color} [--gv-input-icon--bgc=var(--gv-theme-neutral-color, #F5F5F5)] - Icon background color
+ */
+export class GvInput extends InputElement(LitElement) {
+    static get properties() {
+        return {
+            ...super.properties,
+            type: { type: String, reflect: true },
+            large: { type: Boolean },
+            medium: { type: Boolean },
+            small: { type: Boolean },
+            icon: { type: String },
+            iconLeft: { type: String, attribute: 'icon-left' },
+            loading: { type: Boolean },
+            min: { type: Number },
+            max: { type: Number },
+            autocomplete: { type: String },
+            clipboard: { type: Boolean },
+            clickable: { type: Boolean },
+            clearable: { type: Boolean },
+            noSubmit: { type: Boolean, attribute: 'no-submit' },
+            pattern: { type: String, reflect: true },
+            description: { type: String },
+            _type: { type: String, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            skeleton,
+            input,
+            link,
+            // language=CSS
+            css `
+        .clickable input,
+        .clickable ::slotted(input) {
+          cursor: pointer;
+        }
+
+        .clickable input:hover,
+        .clickable ::slotted(input:hover) {
+          box-shadow: 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
+        }
+
+        gv-icon {
+          --gv-icon--s: 22px;
+        }
+
+        .copied {
+          --gv-input--bdc: var(--gv-theme-color-success-light, #81c784);
+        }
+
+        .copied .box-icon gv-icon {
+          --gv-icon--c: var(--gv-theme-color-success-dark, #388e3c);
+        }
+
+        div.box-icon gv-icon.loading,
+        .loading ::slotted(input) {
+          animation: spinner 1.6s linear infinite;
+          --gv-icon--s: 20px;
+        }
+
+        .loading.small gv-icon {
+          --gv-icon--s: 18px;
+        }
+
+        @keyframes spinner {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        .clipboard input,
+        .clipboard ::slotted(input) {
+          cursor: copy;
+        }
+
+        .clipboard input:read-only:hover,
+        .clipboard ::slotted(input:read-only:hover) {
+          cursor: not-allowed;
+        }
+
+        .clipboard__popover {
+          --gv-popover--bgc: var(--gv-theme-color-darker, #383e3f);
+          --gv-popover--c: var(--gv-theme-font-color-light, #ffffff);
+          --gv-popover--p: 0rem 0.4rem 0rem 0.2rem;
+          font-size: 11px;
+        }
+
+        .clipboard__popover-content {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          --gv-icon--c: var(--gv-theme-font-color-light, #ffffff);
+        }
+      `,
+        ];
+    }
+    static get shapeSearch() {
+        return 'general:search';
+    }
+    static get shapeClear() {
+        return 'code:error';
+    }
+    static get shapeInvisible() {
+        return 'general:invisible';
+    }
+    static get shapeVisible() {
+        return 'general:visible';
+    }
+    constructor() {
+        super();
+        this._type = 'text';
+        this._showPassword = false;
+        this.value = '';
+        this.autocomplete = 'off';
+        this.noSubmit = false;
+    }
+    reset() {
+        this.value = '';
+        this.getInputElement().blur();
+    }
+    focus() {
+        this.getInputElement().focus();
+    }
+    getInputElement() {
+        return this._input || super.getInputElement();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('_type')) {
+            this.getInputElement().type = this._type;
+        }
+        if (changedProperties.has('autocomplete')) {
+            this.getInputElement().autocomplete = this.autocomplete;
+        }
+        if (changedProperties.has('name') && this.name != null) {
+            this.getInputElement().name = this.name;
+        }
+        if (changedProperties.has('required')) {
+            this.getInputElement().required = this.required;
+            this.getInputElement()['aria-required'] = !!this.required;
+            if (this.value == null || this.value.trim() === '') {
+                this.invalid = true;
+            }
+        }
+        if (this.readonly) {
+            this.getInputElement().setAttribute('readonly', true);
+        }
+        else {
+            this.getInputElement().removeAttribute('readonly');
+        }
+        if (changedProperties.has('label') || changedProperties.has('title')) {
+            const title = this.title || this.label;
+            if (title != null) {
+                this.getInputElement().title = title;
+            }
+        }
+        if (changedProperties.has('label') && this.label) {
+            this.getInputElement()['aria-label'] = this.label;
+        }
+        if (changedProperties.has('pattern')) {
+            this.getInputElement().pattern = this.pattern;
+            this._regexPattern = new RegExp(this.pattern);
+        }
+        if (changedProperties.has('disabled') || changedProperties.has('skeleton')) {
+            this.getInputElement().disabled = this.disabled || this.skeleton;
+        }
+        if (changedProperties.has('placeholder') && this.placeholder != null) {
+            this.getInputElement().placeholder = this.placeholder;
+        }
+        if (changedProperties.has('value')) {
+            this.getInputElement().value = this.value;
+            this.updateState(this.value);
+        }
+        if (changedProperties.has('min') && this.min != null) {
+            this.getInputElement().min = this.min;
+        }
+        if (changedProperties.has('max') && this.max != null) {
+            this.getInputElement().max = this.max;
+        }
+    }
+    _setClipboardIcon(shape) {
+        if (this.icon != null && this.icon !== shapeCopied && this.icon !== shapeClipboard) {
+            this.iconLeft = shape;
+        }
+        else {
+            this.icon = shape;
+        }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.catchSlot();
+        if (this.clipboard) {
+            import('clipboard-copy').then((mod) => (this.copy = () => {
+                const copy = mod.default;
+                copy(this.value);
+                this._copied = true;
+                this._setClipboardIcon(shapeCopied);
+                setTimeout(() => {
+                    this._copied = false;
+                    this._setClipboardIcon(shapeClipboard);
+                }, 1000);
+            }));
+            this._setClipboardIcon(shapeClipboard);
+            setTimeout(() => {
+                const clipboardPopover = this.shadowRoot.querySelector('.clipboard__popover');
+                clipboardPopover.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.copy(this.value);
+                });
+            }, 0);
+        }
+        else {
+            const clickableIcon = this.shadowRoot.querySelector('gv-icon.link');
+            if (clickableIcon) {
+                clickableIcon.addEventListener('click', this._onIconClick.bind(this));
+            }
+        }
+        this.getInputElement().id = this._id;
+        this.bindInputEvents();
+    }
+    bindInputEvents() {
+        this.getInputElement().addEventListener('input', this._onInput.bind(this));
+        this.getInputElement().addEventListener('keyup', this._onKeyUp.bind(this));
+        this.getInputElement().addEventListener('keypress', this._onKeyPress.bind(this));
+    }
+    catchSlot() {
+        const defaultInputElement = this.getInputElement();
+        for (const node of this.childNodes) {
+            if (node.nodeType === 1) {
+                const child = node.nodeName.toLowerCase() === 'input' ? node : node.querySelector('input');
+                if (child) {
+                    this._input = child;
+                    break;
+                }
+            }
+        }
+        if (this._input) {
+            defaultInputElement.remove();
+        }
+    }
+    updateState(value) {
+        super.updateState(value);
+        if (this.valid === true && !this.readonly) {
+            if (this._regexPattern) {
+                if (value != null && value.trim() !== '') {
+                    const valid = value.match(this._regexPattern);
+                    this.setValidity(valid == null, `field not respect the pattern ${this._regexPattern}`);
+                }
+            }
+            else if (this._type === 'number' && value != null && (typeof value === 'number' || value.trim() !== '')) {
+                const _value = Number(value).valueOf();
+                if (isNaN(_value)) {
+                    this.setValidity(true, `field is not number`);
+                }
+                else if (this.min != null && this.min > _value) {
+                    this.setValidity(true, `field is < ${this.min}`);
+                }
+                else if (this.max != null && this.max < _value) {
+                    this.setValidity(true, `field is > ${this.max}`);
+                }
+                else {
+                    this.setValidity(false);
+                }
+            }
+        }
+    }
+    _onInput(e) {
+        this.updateState(e.target.value);
+        this.value = e.target.value;
+        dispatchCustomEvent(this, 'input', this.value);
+    }
+    _onKeyPress(e) {
+        if (this._type === 'number') {
+            let key;
+            if (e.type === 'paste') {
+                key = e.clipboardData.getData('text/plain');
+            }
+            else {
+                key = String.fromCharCode(e.keyCode);
+            }
+            let regex = /[0-9]/;
+            if (this.min == null || this.min < 0) {
+                regex = /[0-9-]/;
+            }
+            if (!regex.test(key)) {
+                e.preventDefault();
+            }
+        }
+    }
+    _onKeyUp(e) {
+        if (e.keyCode === 13) {
+            if (!this.noSubmit) {
+                const form = this.closest('form');
+                if (form) {
+                    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+                }
+            }
+            dispatchCustomEvent(this, 'submit', this.value);
+        }
+    }
+    get isClearable() {
+        return this.clearable && !this.disabled && !this.readonly && !this.loading && this.value != null && this.value !== '';
+    }
+    set type(value) {
+        if (['text', 'password', 'email', 'search', 'number', 'url'].includes(value)) {
+            this._type = value;
+        }
+        if (this._type === 'url') {
+            this.pattern = '(https?://.w*)(:\\d*)?\\/?(.*)';
+        }
+        if (this._type === 'email') {
+            this.pattern =
+                /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        }
+        if (this._type === 'search' && this.icon == null && this.iconLeft == null) {
+            this.icon = GvInput.shapeSearch;
+            this.clearable = true;
+        }
+        if (this._type === 'password') {
+            this.icon = GvInput.shapeSearch;
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    _onIconClick() {
+        dispatchCustomEvent(this, 'icon-click', this.value);
+        dispatchCustomEvent(this, 'submit', this.value);
+    }
+    _onIconVisibleClick(e) {
+        if (this.isPassword) {
+            e.preventDefault();
+            e.stopPropagation();
+            this._showPassword = !this._showPassword;
+            this._type = this._showPassword ? 'text' : 'password';
+        }
+    }
+    get isPassword() {
+        return !this.disabled && (this._type === 'password' || (this._type === 'text' && this._showPassword));
+    }
+    get hasClickableIcon() {
+        return !this.disabled && !this.readonly && (this.clickable || this._type === 'search' || this.clipboard);
+    }
+    get hasClipboard() {
+        return !this.disabled && this.clipboard;
+    }
+    clear() {
+        this.focus();
+        this.value = '';
+        dispatchCustomEvent(this, 'clear', this.value);
+    }
+    _renderClearIcon() {
+        if (this.isClearable) {
+            return html `<div class="box-icon box-icon-clear">
+        <gv-icon class="link" shape="code:error" title="${i18n('gv-input.clear')}" @click="${this.clear}"></gv-icon>
+      </div>`;
+        }
+        return '';
+    }
+    _shapePassword() {
+        return this._showPassword ? 'general:visible' : 'general:hidden';
+    }
+    _renderPasswordIcon() {
+        if (this.isPassword) {
+            const shape = this._shapePassword();
+            const title = this._showPassword ? 'Show' : 'Hide';
+            return html `<div class="box-icon">
+        <gv-icon class="link" shape="${shape}" title="${title}" @click="${this._onIconVisibleClick}"></gv-icon>
+      </div>`;
+        }
+        return '';
+    }
+    get hasBackground() {
+        return !this.loading;
+    }
+    renderIcon() {
+        let shape = null;
+        if ((!this.isPassword && this.icon) || this.iconLeft) {
+            shape = (!this.isPassword && this.icon) || this.iconLeft;
+        }
+        if (this.loading) {
+            shape = 'navigation:waiting';
+        }
+        if (shape) {
+            const classes = {
+                'box-icon': true,
+                'box-icon-left': this.iconLeft != null || this.clearable,
+                'box-icon-bgc': this.hasBackground,
+            };
+            const iconClasses = {
+                link: this.hasClickableIcon,
+                loading: this.loading,
+            };
+            let title = '';
+            if (this._type === 'search') {
+                title = i18n('gv-input.search');
+            }
+            else if (this.hasClipboard) {
+                title = i18n('gv-input.copy');
+                return html `<div class="${classMap(classes)}">
+          <gv-popover class="clipboard__popover" event="click" delay="750" .arrow="${false}">
+            <gv-icon class="${classMap(iconClasses)}" shape="${shape}" title="${title}"></gv-icon>
+            <div slot="popover" class="clipboard__popover-content">
+              <gv-icon shape="code:check"></gv-icon>
+              <div>Copied</div>
+            </div>
+          </gv-popover>
+        </div>`;
+            }
+            else if (this.placeholder) {
+                title = this.placeholder;
+            }
+            return html `<div class="${classMap(classes)}">
+        <gv-icon class="${classMap(iconClasses)}" shape="${shape}" title="${title}"></gv-icon>
+      </div>`;
+        }
+        return '';
+    }
+    render() {
+        const classes = {
+            'box-input': true,
+            skeleton: this.skeleton,
+            large: this.large,
+            medium: this.medium || (!this.large && !this.small),
+            small: this.small,
+            icon: !!this.icon && !this.clearable,
+            clearable: this.clearable,
+            'icon-left': !!this.iconLeft || (!!this.icon && this.clearable),
+            clipboard: this.hasClipboard,
+            required: this.required,
+            copied: this.hasClipboard && this._copied,
+        };
+        return html `
+      <div class="${classMap(classes)}">
+        ${this.renderLabel()}
+        <input />
+        <slot></slot>
+        ${this._renderClearIcon()} ${this.renderIcon()} ${this._renderPasswordIcon()}
+      </div>
+      ${this.description != null ? html `<div class="description" .innerHTML="${this.description}"></div>` : ''}
+    `;
+    }
+}
+window.customElements.define('gv-input', GvInput);