@gravitee/ui-components 3.25.3-typescript-bfd8f67 → 3.25.3-typescript-94e8113

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

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

package/dist/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 {};