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

package/dist/src/atoms/gv-switch.d.ts

@@ -0,0 +1,60 @@
+/**
+ * A wrapper of a <switch> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-switch:input - mirrors native input events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native switch element `disabled` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean|String} value - true if the switch is checked, false otherwise
+ * @attr {String} label - label of the switch
+ * @attr {String} description - description of the switch
+ * @attr {Boolean} checked - same as native switch element `checked` attribute
+ * @attr {Boolean} readonly - true if readonly
+ *
+ * @cssprop {Color} [--gv-switch-on--bgc=var(--gv-theme-color, #5a7684)] - On background color
+ * @cssprop {Color} [--gv-switch-off--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Off background color
+ * @cssprop {Color} [--gv-switch--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Switch background color
+ * @cssprop {String} [--gv-switch--ta=left] - Switch label text alignment
+ */
+export class GvSwitch extends LitElement {
+    static get properties(): {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _id: string;
+    checked: boolean;
+    _onInput(): void;
+    value: boolean | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

package/dist/src/atoms/gv-switch.js

@@ -0,0 +1,235 @@
+/*
+ * 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 { ifDefined } from 'lit/directives/if-defined';
+import { LitElement, html, css } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * A wrapper of a <switch> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-switch:input - mirrors native input events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native switch element `disabled` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean|String} value - true if the switch is checked, false otherwise
+ * @attr {String} label - label of the switch
+ * @attr {String} description - description of the switch
+ * @attr {Boolean} checked - same as native switch element `checked` attribute
+ * @attr {Boolean} readonly - true if readonly
+ *
+ * @cssprop {Color} [--gv-switch-on--bgc=var(--gv-theme-color, #5a7684)] - On background color
+ * @cssprop {Color} [--gv-switch-off--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Off background color
+ * @cssprop {Color} [--gv-switch--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Switch background color
+ * @cssprop {String} [--gv-switch--ta=left] - Switch label text alignment
+ */
+export class GvSwitch extends LitElement {
+    static get properties() {
+        return {
+            disabled: { type: Boolean, reflect: true },
+            skeleton: { type: Boolean },
+            value: { type: String, reflect: true },
+            label: { type: String },
+            description: { type: String },
+            small: { type: Boolean, reflect: true },
+            checked: { type: Boolean, reflect: true },
+            readonly: { type: Boolean, reflect: true },
+        };
+    }
+    static get styles() {
+        return [
+            skeleton,
+            // language=CSS
+            css `
+        :host {
+          --off-bgc: var(--gv-switch-off--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));
+          --on-bgc: var(--gv-switch-on--bgc, var(--gv-theme-color, #5a7684));
+          box-sizing: border-box;
+          margin: 0.2rem;
+        }
+
+        .container {
+          display: flex;
+        }
+
+        .labels {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          flex: 1;
+          margin-right: 0.4rem;
+          box-sizing: border-box;
+          text-align: var(--gv-switch--ta, left);
+        }
+
+        .switch-title {
+          font-weight: 600;
+        }
+
+        .switch-description {
+          opacity: 0.6;
+        }
+
+        .switch-container {
+          display: flex;
+          align-items: center;
+        }
+
+        .switch {
+          position: relative;
+          width: 40px;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          border-radius: 16px;
+        }
+
+        :host([small]) .switch {
+          width: 25px;
+        }
+
+        :host([small]) .switch-label:before {
+          width: 10px;
+          border-radius: 10px;
+          right: 10px;
+        }
+
+        :host([small]) .switch-label {
+          height: 10px;
+          line-height: 10px;
+          border-radius: 10px;
+        }
+
+        :host([small]) .switch-title {
+          font-weight: 400;
+          font-size: 11px;
+        }
+
+        .switch input {
+          display: none;
+        }
+
+        .switch-label {
+          display: block;
+          overflow: hidden;
+          cursor: pointer;
+          height: 16px;
+          padding: 0;
+          line-height: 16px;
+          border: 2px solid transparent;
+          border-radius: 16px;
+          background-color: var(--off-bgc);
+          transition: background-color 0.3s ease-in;
+        }
+
+        .switch-label:before {
+          content: '';
+          display: block;
+          width: 16px;
+          margin: 0;
+          background: var(--gv-switch--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: 20px;
+          border: 2px solid var(--off-bgc);
+          border-radius: 16px;
+          transition: all 0.3s ease-in 0s;
+        }
+
+        :host([checked]) .switch-label {
+          background-color: var(--on-bgc);
+        }
+
+        :host([checked]) .switch-label,
+        :host([checked]) .switch-label:before {
+          border-color: var(--on-bgc);
+        }
+
+        :host([checked]) .switch-label:before {
+          right: 0;
+        }
+
+        :host([disabled]) .switch-label,
+        :host([readonly]) .switch-label {
+          cursor: default;
+        }
+
+        :host([disabled]) .switch-label {
+          opacity: 0.5;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._id = 'gv-id';
+        this.checked = false;
+    }
+    _onInput() {
+        if (!(this.disabled || this.skeleton || this.readonly)) {
+            this.value = !this.checked;
+            dispatchCustomEvent(this, 'input', this.value);
+        }
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('value')) {
+            if (this.value != null && this.value.toString() === 'true') {
+                this.checked = true;
+            }
+            else {
+                this.checked = false;
+            }
+        }
+    }
+    render() {
+        const classes = {
+            skeleton: this.skeleton,
+            disabled: this.disabled,
+            small: this.small,
+            switch: true,
+        };
+        return html `
+      <div class="container">
+        ${this.label || this.description
+            ? html `<div class="${classMap({ labels: true, skeleton: this.skeleton })}">
+              ${this.label ? html `<label class="switch-title">${this.label}</label>` : ''}
+              ${this.description ? html `<label class="switch-description" .innerHTML="${this.description}"></label>` : ''}
+            </div>`
+            : ''}
+        <div class="switch-container">
+          <div class=${classMap(classes)}>
+            <input
+              id=${this._id}
+              type="checkbox"
+              .title=${ifDefined(this.label || this.description)}
+              ?disabled=${this.disabled || this.skeleton}
+              ?readonly="${this.readonly}"
+              ?checked=${this.checked}
+              @input=${this._onInput}
+            />
+            <label class="switch-label" for="${this._id}"></label>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-switch', GvSwitch);

package/dist/src/atoms/gv-tag.d.ts

@@ -0,0 +1,69 @@
+/**
+ * A Tag
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires click - Native click event
+ *
+ * @slot - The content of the tag (text or HTML)
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} icon-right - name of shape
+ * @attr {Boolean} major - set tag UI as major
+ * @attr {Boolean} minor - set tag UI as minor
+ * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean} clickable - If true, tag has link style
+ *
+ * @cssprop {Length} [--gv-tag--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {Length} [--gv-tag--p=4px 8px] - Padding
+ * @cssprop {Length} [--gv-tag--bdr=4px] - Border radius
+ * @cssprop {String} [--gv-tag--bsw=none] - Box shadow
+ *
+ * @cssprop {Color} [--gv-tag--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Color} [--gv-tag-major--bgc=var(--gv-theme-color, #5a7684)] - Major background color
+ * @cssprop {Color} [--gv-tag-minor--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Minor background color
+ *
+ * @cssprop {Color} [--gv-tag--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-tag-major--bdc=var(--gv-theme-color, #5a7684)] - Major border color
+ * @cssprop {Color} [--gv-tag-minor--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Minor border color
+
+ * @cssprop {String} [--gv-tag--bds=solid] - Border style
+ * @cssprop {String} [--gv-tag-major--bds=solid] - Major border style
+ * @cssprop {String} [--gv-tag-minor--bds=dashed] - Minor border style
+ *
+ * @cssprop {Length} [--gv-tag--bdw=1px] - Border width
+ * @cssprop {Length} [--gv-tag-major--bdw=1px] - Major border width
+ * @cssprop {Length} [--gv-tag-minor--bdw=1px] - Minor border width
+ *
+ * @cssprop {Color} [--gv-tag--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-tag-major--c=var(--gv-theme-font-color-light, #ffffff)] - Major color
+ * @cssprop {Color} [--gv-tag-minor--c=var(--gv-theme-font-color-dark, #262626)] - Minor color
+ * @cssprop {Length} [--gv-tag-icon--s=18px] - Height and icon width
+ */
+export class GvTag extends LitElement {
+    static get properties(): {
+        icon: {
+            type: StringConstructor;
+        };
+        iconRight: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        major: {
+            type: BooleanConstructor;
+        };
+        minor: {
+            type: BooleanConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onTagClick(e: any): void;
+}
+import { LitElement } from "lit-element/lit-element";

package/dist/src/atoms/gv-tag.js

@@ -0,0 +1,162 @@
+/*
+ * 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 { link } from '../styles/link';
+import './gv-icon';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * A Tag
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires click - Native click event
+ *
+ * @slot - The content of the tag (text or HTML)
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} icon-right - name of shape
+ * @attr {Boolean} major - set tag UI as major
+ * @attr {Boolean} minor - set tag UI as minor
+ * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean} clickable - If true, tag has link style
+ *
+ * @cssprop {Length} [--gv-tag--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {Length} [--gv-tag--p=4px 8px] - Padding
+ * @cssprop {Length} [--gv-tag--bdr=4px] - Border radius
+ * @cssprop {String} [--gv-tag--bsw=none] - Box shadow
+ *
+ * @cssprop {Color} [--gv-tag--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Color} [--gv-tag-major--bgc=var(--gv-theme-color, #5a7684)] - Major background color
+ * @cssprop {Color} [--gv-tag-minor--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Minor background color
+ *
+ * @cssprop {Color} [--gv-tag--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-tag-major--bdc=var(--gv-theme-color, #5a7684)] - Major border color
+ * @cssprop {Color} [--gv-tag-minor--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Minor border color
+
+ * @cssprop {String} [--gv-tag--bds=solid] - Border style
+ * @cssprop {String} [--gv-tag-major--bds=solid] - Major border style
+ * @cssprop {String} [--gv-tag-minor--bds=dashed] - Minor border style
+ *
+ * @cssprop {Length} [--gv-tag--bdw=1px] - Border width
+ * @cssprop {Length} [--gv-tag-major--bdw=1px] - Major border width
+ * @cssprop {Length} [--gv-tag-minor--bdw=1px] - Minor border width
+ *
+ * @cssprop {Color} [--gv-tag--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-tag-major--c=var(--gv-theme-font-color-light, #ffffff)] - Major color
+ * @cssprop {Color} [--gv-tag-minor--c=var(--gv-theme-font-color-dark, #262626)] - Minor color
+ * @cssprop {Length} [--gv-tag-icon--s=18px] - Height and icon width
+ */
+export class GvTag extends LitElement {
+    static get properties() {
+        return {
+            icon: { type: String },
+            iconRight: { type: String, attribute: 'icon-right' },
+            major: { type: Boolean },
+            minor: { type: Boolean },
+            skeleton: { type: Boolean },
+            clickable: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            skeleton,
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          margin: 0.2rem;
+          vertical-align: middle;
+        }
+
+        div.default {
+          --bgc: var(--gv-tag--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
+          --bdc: var(--gv-tag--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          --bds: var(--gv-tag--bds, solid);
+          --bdw: var(--gv-tag--bdw, 1px);
+          --c: var(--gv-tag--c, var(--gv-theme-font-color-dark, #262626));
+        }
+
+        div.major {
+          --bgc: var(--gv-tag-major--bgc, var(--gv-theme-color, #5a7684));
+          --bdc: var(--gv-tag-major--bdc, var(--gv-theme-color, #5a7684));
+          --bds: var(--gv-tag-major--bds, solid);
+          --bdw: var(--gv-tag-major--bdw, 1px);
+          --c: var(--gv-tag-major--c, var(--gv-theme-font-color-light, #ffffff));
+        }
+
+        div.minor {
+          --bgc: var(--gv-tag-minor--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          --bdc: var(--gv-tag-minor--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          --bds: var(--gv-tag-minor--bds, dashed);
+          --bdw: var(--gv-tag-minor--bdw, 1px);
+          --c: var(--gv-tag-minor--c, var(--gv-theme-font-color-dark, #262626));
+        }
+
+        div {
+          background-color: var(--bgc);
+          border-color: var(--bdc);
+          border-radius: var(--gv-tag--bdr, 4px);
+          border-style: var(--bds);
+          border-width: var(--bdw);
+          box-shadow: var(--gv-tag--bsw, none);
+          color: var(--c);
+          --fz: var(--gv-tag--fz, var(--gv-theme-font-size-s, 12px));
+          font-size: var(--fz);
+          line-height: var(--fz);
+          padding: var(--gv-tag--p, 4px 8px);
+          --gv-icon--s: var(--gv-tag-icon--s, 18px);
+          --gv-icon--c: var(--c);
+          --gv-icon-opacity--c: var(--c);
+
+          word-break: normal;
+        }
+
+        div > * {
+          vertical-align: middle;
+          display: inline-flex;
+        }
+      `,
+        ];
+    }
+    _onTagClick(e) {
+        if (this.clickable) {
+            e.stopPropagation();
+            dispatchCustomEvent(this, 'click', {});
+        }
+    }
+    render() {
+        const modes = {
+            default: !this.major && !this.minor,
+            major: this.major,
+            minor: this.minor && !this.major,
+            skeleton: this.skeleton,
+            link: this.clickable,
+        };
+        return html `
+      <div class=${classMap(modes)} @click="${this._onTagClick}">
+        ${this.icon ? html `<gv-icon shape="${this.icon}"></gv-icon>` : ''}<slot></slot>${this.iconRight
+            ? html `<gv-icon shape="${this.iconRight}"></gv-icon>`
+            : ''}
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-tag', GvTag);

package/dist/src/atoms/gv-text.d.ts

@@ -0,0 +1,110 @@
+declare const GvText_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[];
+};
+/**
+ * A wrapper of a <text> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-text:input - mirrors native textarea events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native text element `disabled` attribute
+ * @attr {Boolean} required - same as native text element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {String} value - the value of the text
+ * @attr {String} label - label of the text
+ * @attr {String} title - title of the text
+ * @attr {String} name - name of the text
+ * @attr {String} placeholder - an example value to display in the text when empty
+ * @attr {Length} rows - number of rows of the text element
+ * @attr {Boolean} autofocus - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ * @attr {Boolean} [autosize=false] - true if field auto resize when content change
+ *
+ * @cssprop {Color} [--gv-input--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Length} [--gv-text--fz=var(--gv-theme-font-size-m, 14px)] - Font size
+ * @cssprop {Length} [--gv-text--lh=var(--gv-theme-font-size-m, 14px)] - Line height
+ */
+export class GvText extends GvText_base {
+    static get properties(): {
+        rows: {
+            type: NumberConstructor;
+        };
+        minlength: {
+            type: NumberConstructor;
+        };
+        maxlength: {
+            type: NumberConstructor;
+        };
+        autosize: {
+            type: BooleanConstructor;
+        };
+    };
+    rows: number;
+    _onInput(e: any): void;
+    value: any;
+    render(): "" | import("lit-html").TemplateResult<1>;
+}
+export {};