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

package/src/atoms/gv-image.js

@@ -1,144 +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 { LitElement, html, css } from 'lit';
-import { dispatchCustomEvent } from '../lib/events';
-import { classMap } from 'lit/directives/class-map';
-import { ifDefined } from 'lit/directives/if-defined';
-import { skeleton } from '../styles/skeleton';
-
-/**
- * An image
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-image:loaded - When image is loaded
- *
- * @attr {String} src - Source of img
- * @attr {String} alt - Alternative text of img
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- *
- * @cssprop {String} [--gv-image--of=cover] - set the object-fit of image
- */
-export class GvImage extends LitElement {
-  static get properties() {
-    return {
-      src: { type: String },
-      skeleton: { type: Boolean, reflect: true },
-      alt: { type: String },
-      _loaded: { type: Boolean, reflect: true },
-      _error: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          display: inline-block;
-          overflow: hidden;
-        }
-
-        .wrapper,
-        img {
-          height: 100%;
-          width: 100%;
-          transition: opacity 0.3s ease-in-out;
-        }
-
-        .wrapper {
-          align-items: center;
-          display: flex;
-          justify-content: center;
-          position: relative;
-        }
-
-        .wrapper.text:not('.skeleton') {
-          background-color: var(--gv-theme-neutral-color);
-        }
-
-        img {
-          display: block;
-          object-fit: var(--gv-image--of, cover);
-          object-position: center center;
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          transition: opacity 150ms ease-in-out;
-          left: 0;
-        }
-
-        .wrapper.loaded img {
-          opacity: 1;
-        }
-
-        .error-msg {
-          font-size: 0.9rem;
-          overflow: hidden;
-          padding: 0.25rem;
-          text-align: center;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      `,
-      skeleton,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.skeleton = false;
-    this._error = false;
-    this._loaded = false;
-  }
-
-  set src(newVal) {
-    const oldVal = this._src;
-    this._src = newVal;
-    this.requestUpdate('src', oldVal);
-    this._error = false;
-    this._loaded = false;
-  }
-
-  get src() {
-    return this._src;
-  }
-
-  _onLoad(e) {
-    this._loaded = true;
-    this.skeleton = false;
-    dispatchCustomEvent(this, 'loaded', { src: this.src, alt: this.alt });
-  }
-
-  _onError(e) {
-    this._error = true;
-    this.skeleton = false;
-    this.dispatchEvent(new Event('error'), e);
-  }
-
-  render() {
-    const displayText = this.src == null || this._error;
-    return html`
-      <div class="wrapper ${classMap({ skeleton: this.skeleton, loaded: this._loaded, text: displayText })}">
-        <img src=${ifDefined(this.src)} @load=${this._onLoad} @error=${this._onError} alt="" />
-        ${displayText ? html` <div class="error-msg">${this.alt}</div> ` : ''}
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-image', GvImage);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvImage=void 0;const e=require("lit"),t=require("../lib/events"),r=require("lit/directives/class-map"),s=require("lit/directives/if-defined"),i=require("../styles/skeleton");class o extends e.LitElement{static get properties(){return{src:{type:String},skeleton:{type:Boolean,reflect:!0},alt:{type:String},_loaded:{type:Boolean,reflect:!0},_error:{type:Boolean}}}static get styles(){return[e.css`:host{display:inline-block;overflow:hidden}.wrapper,img{height:100%;width:100%;transition:opacity .3s ease-in-out}.wrapper{align-items:center;display:flex;justify-content:center;position:relative}.wrapper.text:not('.skeleton'){background-color:var(--gv-theme-neutral-color)}img{display:block;object-fit:var(--gv-image--of,cover);object-position:center center;opacity:0;position:absolute;top:0;transition:opacity 150ms ease-in-out;left:0}.wrapper.loaded img{opacity:1}.error-msg{font-size:.9rem;overflow:hidden;padding:.25rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}`,i.skeleton]}constructor(){super(),this.skeleton=!1,this._error=!1,this._loaded=!1}set src(e){const t=this._src;this._src=e,this.requestUpdate("src",t),this._error=!1,this._loaded=!1}get src(){return this._src}_onLoad(e){this._loaded=!0,this.skeleton=!1,(0,t.dispatchCustomEvent)(this,"loaded",{src:this.src,alt:this.alt})}_onError(e){this._error=!0,this.skeleton=!1,this.dispatchEvent(new Event("error"),e)}render(){const t=null==this.src||this._error;return e.html`<div class="wrapper ${(0,r.classMap)({skeleton:this.skeleton,loaded:this._loaded,text:t})}"><img src="${(0,s.ifDefined)(this.src)}" @load="${this._onLoad}" @error="${this._onError}" alt=""> ${t?e.html`<div class="error-msg">${this.alt}</div>`:""}</div>`}}exports.GvImage=o,window.customElements.define("gv-image",o);

package/src/atoms/gv-input-message.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Input message component
+ *
+ * @attr {String} level - level of message ['info', 'error', 'warning']
+ */
+export class GvInputMessage extends LitElement {
+    static get properties(): {
+        level: {
+            type: StringConstructor;
+        };
+        _level: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _level: string;
+    set level(arg: any);
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-input-message.js

@@ -1,84 +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 { css, LitElement, html } from 'lit';
-import '../atoms/gv-icon';
-
-/**
- * Input message component
- *
- * @attr {String} level - level of message ['info', 'error', 'warning']
- */
-export class GvInputMessage extends LitElement {
-  static get properties() {
-    return {
-      level: { type: String },
-      _level: { type: String, attribute: false },
-    };
-  }
-
-  constructor() {
-    super();
-    this._level = 'warning';
-  }
-
-  set level(level) {
-    if (['error', 'info', 'warning'].includes(level)) {
-      this._level = level;
-    }
-  }
-
-  render() {
-    return html`<div class="box"><gv-icon class="${this._level}" shape="code:${this._level}"></gv-icon><slot></slot></div>`;
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: block;
-          margin: 0.2rem;
-        }
-
-        .box {
-          display: flex;
-          align-items: center;
-          white-space: normal;
-        }
-
-        gv-icon {
-          margin: 0 0.2rem;
-          --gv-icon--s: 24px;
-        }
-
-        gv-icon.warning {
-          --gv-icon-opacity--c: var(--gv-theme-color-warning, #ff9800);
-        }
-
-        gv-icon.error {
-          --gv-icon-opacity--c: var(--gv-theme-color-error, #f44336);
-        }
-
-        gv-icon.info {
-          --gv-icon-opacity--c: var(--gv-theme-color-info, #2196f3);
-        }
-      `,
-    ];
-  }
-}
-
-window.customElements.define('gv-input-message', GvInputMessage);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvInputMessage=void 0;const e=require("lit");require("../atoms/gv-icon");class t extends e.LitElement{static get properties(){return{level:{type:String},_level:{type:String,attribute:!1}}}constructor(){super(),this._level="warning"}set level(e){["error","info","warning"].includes(e)&&(this._level=e)}render(){return e.html`<div class="box"><gv-icon class="${this._level}" shape="code:${this._level}"></gv-icon><slot></slot></div>`}static get styles(){return[e.css`:host{box-sizing:border-box;display:block;margin:.2rem}.box{display:flex;align-items:center;white-space:normal}gv-icon{margin:0 .2rem;--gv-icon--s:24px}gv-icon.warning{--gv-icon-opacity--c:var(--gv-theme-color-warning, #ff9800)}gv-icon.error{--gv-icon-opacity--c:var(--gv-theme-color-error, #f44336)}gv-icon.info{--gv-icon-opacity--c:var(--gv-theme-color-info, #2196f3)}`]}}exports.GvInputMessage=t,window.customElements.define("gv-input-message",t);

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

@@ -0,0 +1,246 @@
+declare const GvInput_base: {
+    new (): {
+        [x: string]: any;
+        _id: string;
+        valid: boolean;
+        invalid: boolean;
+        updateState(value: any): void;
+        setValidity(isInvalid?: boolean, violation?: string): void;
+        firstUpdated(): void;
+        updated(changedProperties: any): void;
+        getInputElement(): any;
+        readonly offsetHeight: any;
+        renderLabel(): "" | import("lit-html").TemplateResult<1>;
+    };
+    [x: string]: any;
+    readonly properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ *
+ * ## 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 GvInput_base {
+    static get properties(): {
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        large: {
+            type: BooleanConstructor;
+        };
+        medium: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        iconLeft: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        loading: {
+            type: BooleanConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        autocomplete: {
+            type: StringConstructor;
+        };
+        clipboard: {
+            type: BooleanConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+        clearable: {
+            type: BooleanConstructor;
+        };
+        noSubmit: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        pattern: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        _type: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get shapeSearch(): string;
+    static get shapeClear(): string;
+    static get shapeInvisible(): string;
+    static get shapeVisible(): string;
+    _type: string;
+    _showPassword: boolean;
+    value: string;
+    autocomplete: string;
+    noSubmit: boolean;
+    reset(): void;
+    focus(): void;
+    _regexPattern: RegExp | undefined;
+    _setClipboardIcon(shape: any): void;
+    iconLeft: any;
+    icon: any;
+    copy: (() => void) | undefined;
+    _copied: boolean | undefined;
+    bindInputEvents(): void;
+    catchSlot(): void;
+    _input: any;
+    _onInput(e: any): void;
+    _onKeyPress(e: any): void;
+    _onKeyUp(e: any): void;
+    get isClearable(): boolean | undefined;
+    set type(arg: string);
+    get type(): string;
+    pattern: string | RegExp | undefined;
+    clearable: boolean | undefined;
+    _onIconClick(): void;
+    _onIconVisibleClick(e: any): void;
+    get isPassword(): boolean;
+    get hasClickableIcon(): any;
+    get hasClipboard(): any;
+    clear(): void;
+    _renderClearIcon(): "" | import("lit-html").TemplateResult<1>;
+    _shapePassword(): "general:visible" | "general:hidden";
+    _renderPasswordIcon(): "" | import("lit-html").TemplateResult<1>;
+    get hasBackground(): boolean;
+    renderIcon(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};