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

package/dist/src/molecules/gv-card.js

@@ -0,0 +1,130 @@
+/*
+ * 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 { skeleton } from '../styles/skeleton';
+import { classMap } from 'lit/directives/class-map';
+import '../atoms/gv-image';
+import '../atoms/gv-button';
+import { i18n } from '../lib/i18n';
+import { ItemResource } from '../mixins/item-resource';
+import { getVersion, getTitle } from '../lib/item';
+/**
+ * Card component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Promise<any>} item - An item.
+ *
+ * @cssprop {Color} [--gv-card--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ */
+export class GvCard extends ItemResource(LitElement) {
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          margin: 0.2rem;
+          vertical-align: middle;
+          width: 144px;
+          max-height: 144px;
+        }
+
+        gv-identity-picture {
+          width: 65px;
+          height: 65px;
+          --gv-image--of: contain;
+        }
+
+        .card {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          max-width: 144px;
+          min-height: 144px;
+          border-radius: 2px;
+          background-color: var(--gv-card--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          color: var(--gv-theme-font-color-dark, #262626);
+          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color, #f5f5f5), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
+          transition: all 0.3s;
+        }
+
+        .card:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 10px 20px -10px var(--gv-theme-neutral-color-dark, #bfbfbf);
+          cursor: pointer;
+        }
+
+        .content > div {
+          display: flex;
+          justify-content: center;
+          margin-bottom: 0.2rem;
+        }
+
+        .image {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          padding-top: 0.2rem;
+        }
+
+        .title {
+          line-height: 22px;
+          font-size: var(--gv-theme-font-size-s, 12px);
+          text-transform: capitalize;
+          font-weight: bold;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        .content {
+          flex: 1;
+          padding: 6px 16px 12px;
+        }
+
+        .version {
+          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+          top: 0.4rem;
+          right: 0.4rem;
+          position: absolute;
+        }
+      `,
+            skeleton,
+        ];
+    }
+    render() {
+        const title = getTitle(this._item);
+        return html `<div class="card" title="${title}">
+      <span class="${classMap({ skeleton: this._skeleton, version: true })}">${getVersion(this._item)}</span>
+      <div class="${classMap({ image: true, skeleton: this._skeleton })}">${this._renderImage()}</div>
+
+      <div class="${classMap({ content: true, empty: this._error || this._empty })}">
+        ${this._error || this._empty
+            ? html ` <span>${this._error ? i18n('gv-card.error') : i18n('gv-card.empty')}</span> `
+            : html ` <div class="${classMap({ skeleton: this._skeleton })}">
+                <span class="title">${title}</span>
+              </div>
+              <div>${this._renderStates()}</div>`}
+      </div>
+    </div>`;
+    }
+}
+window.customElements.define('gv-card', GvCard);

package/dist/src/molecules/gv-category-list.d.ts

@@ -0,0 +1,17 @@
+/**
+ * List of categories
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @cssprop {Color} [--gv-category-list--bgc-1=#cce6eb] - Category background color 1
+ * @cssprop {Color} [--gv-category-list--bgc-2=#fcf1a8] - Category background color 2
+ * @cssprop {Color} [--gv-category-list--bgc-3=#d9d4f1] - Category background color 3
+ * @cssprop {Color} [--gv-category-list--bgc-4=#f9c15e] - Category background color 4
+ * @cssprop {Color} [--gv-category-list--bgc-5=#d4fccd] - Category background color 5
+ * @cssprop {Color} [--gv-category-list--bgc-6=#e0c8b2] - Category background color 6
+ */
+export class GvCategoryList extends GvCardList {
+    _getCategoryBackgroundColor(index: any): string;
+}
+import { GvCardList } from "./gv-card-list";

package/dist/src/molecules/gv-category-list.js

@@ -0,0 +1,56 @@
+/*
+ * 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, html } from 'lit';
+import './gv-category';
+import { GvCardList } from './gv-card-list';
+/**
+ * List of categories
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @cssprop {Color} [--gv-category-list--bgc-1=#cce6eb] - Category background color 1
+ * @cssprop {Color} [--gv-category-list--bgc-2=#fcf1a8] - Category background color 2
+ * @cssprop {Color} [--gv-category-list--bgc-3=#d9d4f1] - Category background color 3
+ * @cssprop {Color} [--gv-category-list--bgc-4=#f9c15e] - Category background color 4
+ * @cssprop {Color} [--gv-category-list--bgc-5=#d4fccd] - Category background color 5
+ * @cssprop {Color} [--gv-category-list--bgc-6=#e0c8b2] - Category background color 6
+ */
+export class GvCategoryList extends GvCardList {
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          --bgc-1: var(--gv-category-list--bgc-1, #cce6eb);
+          --bgc-2: var(--gv-category-list--bgc-2, #fcf1a8);
+          --bgc-3: var(--gv-category-list--bgc-3, #d9d4f1);
+          --bgc-4: var(--gv-category-list--bgc-4, #f9c15e);
+          --bgc-5: var(--gv-category-list--bgc-5, #d4fccd);
+          --bgc-6: var(--gv-category-list--bgc-6, #e0c8b2);
+        }
+      `,
+        ];
+    }
+    renderItem(item, index) {
+        return html `<gv-category class="item" .category="${item || null}" style="${this._getCategoryBackgroundColor(index)}"> </gv-category>`;
+    }
+    _getCategoryBackgroundColor(index) {
+        return `--gv-category--bgc: var(--bgc-${(index % 6) + 1})`;
+    }
+}
+window.customElements.define('gv-category-list', GvCategoryList);

package/dist/src/molecules/gv-category.d.ts

@@ -0,0 +1,64 @@
+declare const GvCategory_base: {
+    new (): {
+        [x: string]: any;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    [x: string]: any;
+    readonly properties: {
+        _invisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * A card used to display a category
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-category:click - Custom click event
+ *
+ * @attr {Promise<{name, description, _links: { picture }, total_apis}>} category - A category object
+ * @attr {Length} limit - number of characters that can be display in the description. If _description_ is greater, it will be truncated.
+ *
+ * @cssprop {Color} [--gv-category--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-category--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Length} [--gv-category--h=200px] - Height
+ */
+export class GvCategory extends GvCategory_base {
+    static get properties(): {
+        category: {
+            type: ObjectConstructor;
+        };
+        limit: {
+            type: NumberConstructor;
+        };
+        _category: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+    };
+    _skeletonAttribute: string;
+    _get(property: any): any;
+    _onClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/src/molecules/gv-category.js

@@ -0,0 +1,163 @@
+/*
+ * 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 { truncate } from '../lib/utils';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+import { i18n } from '../lib/i18n';
+import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
+/**
+ * A card used to display a category
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-category:click - Custom click event
+ *
+ * @attr {Promise<{name, description, _links: { picture }, total_apis}>} category - A category object
+ * @attr {Length} limit - number of characters that can be display in the description. If _description_ is greater, it will be truncated.
+ *
+ * @cssprop {Color} [--gv-category--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-category--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Length} [--gv-category--h=200px] - Height
+ */
+export class GvCategory extends withSkeletonAttribute(LitElement) {
+    static get properties() {
+        return {
+            category: { type: Object },
+            limit: { type: Number },
+            _category: { type: Object, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          margin: 0.2rem;
+          vertical-align: middle;
+          min-width: 415px;
+        }
+
+        .card {
+          background-color: var(--gv-category--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          border-radius: 4px;
+          display: flex;
+          flex-direction: column;
+          height: var(--gv-category--h, 200px);
+          padding: 2rem;
+          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color-dark, #bfbfbf), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
+          transition: all 0.3s;
+          position: relative;
+        }
+
+        .card:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 20px 40px -14px var(--gv-theme-neutral-color, #f5f5f5);
+          cursor: pointer;
+        }
+
+        .box {
+          display: flex;
+        }
+
+        .title {
+          flex: 1;
+          align-self: center;
+        }
+
+        .title span {
+          font-size: var(--gv-theme-font-size-s);
+          font-weight: 600;
+          line-height: var(--gv-theme-font-size-s);
+          margin-left: 8px;
+          opacity: 0.7;
+        }
+
+        gv-identity-picture {
+          height: 80px;
+          width: 80px;
+          margin: 0.5rem 1rem 0.5rem 0;
+        }
+
+        .title {
+          color: var(--gv-category--c, var(--gv-theme-font-color-dark, #262626));
+          font-size: var(--gv-theme-font-size-xxl, 30px);
+          font-style: normal;
+          font-weight: 600;
+          line-height: calc(var(--gv-theme-font-size-xxl, 30px) + 6px);
+        }
+
+        .description {
+          color: var(--gv-category--c, var(--gv-theme-font-color-dark, #262626));
+          font-size: var(--gv-theme-font-size-l, 16px);
+          font-style: normal;
+          font-weight: normal;
+          line-height: 24px;
+          opacity: 0.7;
+
+          /** text-overflow **/
+          max-height: 150px;
+          display: -webkit-box;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._skeletonAttribute = 'category';
+    }
+    _get(property) {
+        if (this._category) {
+            return this._category[property];
+        }
+        return '';
+    }
+    _onClick() {
+        dispatchCustomEvent(this, 'click', this._category);
+    }
+    render() {
+        const total = this._get('total_apis');
+        return html `<div
+      @click=${this._onClick}
+      class="${classMap({ card: true, skeleton: this._skeleton, empty: this._error || this._empty })}"
+    >
+      ${this._error || this._empty
+            ? html `
+            <div class="${classMap({ skeleton: this._skeleton })}">
+              <span>${this._error ? i18n('gv-category.error') : i18n('gv-category.empty')}</span>
+            </div>
+          `
+            : html ` <div class="box">
+              <gv-identity-picture
+                .skeleton="${this._skeleton}"
+                display_name="${this._get('name')}"
+                picture="${this._get('_links') ? this._get('_links').picture : ''}"
+              ></gv-identity-picture>
+              <div class="title">${this._get('name')}${total ? html `<span>(${total})</span>` : ''}</div>
+            </div>
+
+            <div class="description">${truncate(this._get('description'), this.limit)}</div>`}
+    </div> `;
+    }
+}
+window.customElements.define('gv-category', GvCategory);

package/dist/src/molecules/gv-code.d.ts

@@ -0,0 +1,192 @@
+/**
+ * Code component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-code:input - input events with the `value` on `detail`
+ * @fires gv-code:ready - event dispatch when component is ready
+ * @fires gv-code:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+ *
+ * @attr {String} label - code language
+ * @attr {String} value - code content to be highlighted
+ * @attr {options} Object - options based on codemirror
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {Number} rows - number of rows of the text element
+ * @attr {Boolean} large - for a large input (only if the field has one row)
+ * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+ * @attr {Boolean} small - for a small input (only if the field has one row)
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ */
+export class GvCode extends GvInput {
+    static get properties(): {
+        options: {
+            type: ObjectConstructor;
+        };
+        rows: {
+            type: NumberConstructor;
+        };
+        _error: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        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; /**
+             * Code component
+             *
+             * ## Details
+             * * has @theme facet
+             *
+             * @fires gv-code:input - input events with the `value` on `detail`
+             * @fires gv-code:ready - event dispatch when component is ready
+             * @fires gv-code:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+             *
+             * @attr {String} label - code language
+             * @attr {String} value - code content to be highlighted
+             * @attr {options} Object - options based on codemirror
+             * @attr {String} placeholder - an example value to display in the input when empty
+             * @attr {Number} rows - number of rows of the text element
+             * @attr {Boolean} large - for a large input (only if the field has one row)
+             * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+             * @attr {Boolean} small - for a small input (only if the field has one row)
+             *
+             * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+             * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+             * @attr {Boolean} [readonly=false] - true if field is readonly mode
+             */
+        };
+    };
+    static findLanguage(mode: any): Promise<import("@codemirror/language").LanguageDescription | {
+        name: string;
+        support: {
+            extension: import("@codemirror/stream-parser").StreamLanguage<unknown>;
+        };
+    } | null | undefined>;
+    static get codemirrorTheme(): import("@codemirror/state").Extension;
+    readonly: boolean;
+    autofocus: boolean;
+    clipboard: boolean;
+    _clipboardIcon: string;
+    languageCompartment: Compartment;
+    readonlyCompartment: Compartment;
+    placeholderCompartment: Compartment;
+    get hasInputStyle(): boolean;
+    _autocomplete(completionContext: any): any;
+    findBestAutocompleteHandler(completionContext: any): {
+        handler: {
+            run(completionContext: any): any;
+        };
+        match: boolean;
+    };
+    get defaultCompletionHandler(): {
+        run(completionContext: any): any;
+    };
+    _getExtensions(): import("@codemirror/state").Extension[];
+    getExtensions(): never[];
+    _editorState: any;
+    _editorView: any;
+    _reflectPlaceholder(): void;
+    _reflectValue(): void;
+    _reflectReadonlyDisabled(): void;
+    _reflectOptions(): Promise<void>;
+}
+import { GvInput } from "../atoms/gv-input";
+import { Compartment } from "@codemirror/state";