@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

package/src/atoms/gv-input.js

@@ -1,561 +1 @@
-/*
- * 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);
+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);

package/src/atoms/gv-link.d.ts

@@ -0,0 +1,67 @@
+/**
+ * A link
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-link:click - Custom click event from inner link element
+ *
+ * @slot - The content of the link (text or HTML)
+ *
+ * @attr {Boolean} active - set if link is active
+ * @attr {String} path - link path
+ * @attr {String} title - link title
+ * @attr {String} target - link target
+ * @attr {String} help - help text left between parentheses
+ *
+ * @cssprop {Length} [--gv-link-a--pv=15px] - Vertical padding for the inner <a> tag
+ * @cssprop {Length} [--gv-link-a--ph=15px] - Horizontal padding for the inner <a> tag
+ * @cssprop {Color} [--gv-link--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-link-active--c=var(--gv-theme-font-color-light, #ffffff)] - Active color
+ * @cssprop {Color} [--gv-link--bgc=transparent] - Background color
+ * @cssprop {Color} [--gv-link-active--bgc=var(--gv-theme-color-dark, #28444f)] - Active background color
+ * @cssprop {Color} [--gv-link-active--bdc=none] - Active border color
+ * @cssprop {String} [--gv-link-active--bds=none] - Active border style
+ * @cssprop {Length} [--gv-link-active--bdw=none] - Active border width
+ * @cssprop {String} [--gv-link--ta=center] - Text align
+ * @cssprop {String} [--gv-link--td=none] - Text decoration
+ * @cssprop {String} [--gv-link--tsh=none]- Text shadow
+ * @cssprop {Length} [--gv-link-icon--s=24px] - Height and icon width
+ */
+export class GvLink extends LitElement {
+    static get properties(): {
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        path: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        target: {
+            type: StringConstructor;
+        };
+        _title: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        help: {
+            type: StringConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onClick(e: any): Promise<void>;
+    _title: any;
+}
+import { LitElement } from "lit-element/lit-element";