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

package/dist/src/mixins/with-skeleton-attribute.js

@@ -0,0 +1,109 @@
+/*
+ * 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 } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import { empty } from '../styles/empty';
+const timeBeforeSkeleton = 500;
+const minimumTimeOfSkeleton = 1000;
+/**
+ * This is a mixin for withSkeletonStates
+ * @mixinFunction
+ */
+export function withSkeletonAttribute(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends ParentClass {
+        static get properties() {
+            return {
+                /** @required */
+                _invisible: { type: Boolean, reflect: true },
+                _skeleton: { type: Boolean, attribute: false },
+                _error: { type: Boolean, attribute: false },
+                _empty: { type: Boolean, attribute: false },
+            };
+        }
+        static get styles() {
+            return [
+                skeleton,
+                empty,
+                // language=CSS
+                css `
+          :host([_invisible]) {
+            visibility: hidden;
+          }
+        `,
+            ];
+        }
+        constructor() {
+            super();
+            this._invisible = true;
+            this._skeleton = false;
+            this._error = false;
+            this._empty = false;
+        }
+        updated(changedProperties) {
+            if (this._skeletonAttribute != null && changedProperties.has(this._skeletonAttribute)) {
+                this._error = false;
+                this._empty = false;
+                const start = new Date().getTime();
+                let end = null;
+                const timer = setTimeout(() => {
+                    this._invisible = false;
+                    this._skeleton = true;
+                    end = new Date().getTime();
+                }, timeBeforeSkeleton);
+                const attribute = this[this._skeletonAttribute];
+                Promise.resolve(attribute)
+                    .then((value) => {
+                    clearTimeout(timer);
+                    if (end && end - start < minimumTimeOfSkeleton) {
+                        setTimeout(() => {
+                            this[this._skeletonAttribute] = value;
+                        }, minimumTimeOfSkeleton - (end - start));
+                    }
+                    else {
+                        this._invisible = value === undefined;
+                        this._skeleton = value === null;
+                        if (value) {
+                            if (Array.isArray(value)) {
+                                this._empty = value.length === 0;
+                            }
+                            else {
+                                this._empty = Object.keys(value).length === 0;
+                            }
+                            this[`_${this._skeletonAttribute}`] = value;
+                        }
+                    }
+                })
+                    .catch((err) => {
+                    clearTimeout(timer);
+                    if (end && end - start < minimumTimeOfSkeleton) {
+                        setTimeout(() => {
+                            this[this._skeletonAttribute] = Promise.reject(err);
+                        }, minimumTimeOfSkeleton - (end - start));
+                    }
+                    else {
+                        this._error = true;
+                        this._skeleton = false;
+                        this._empty = false;
+                        this._invisible = false;
+                    }
+                });
+            }
+        }
+    };
+}

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

@@ -0,0 +1,209 @@
+/*
+ * 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, LitElement } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import { classMap } from 'lit/directives/class-map';
+import '../atoms/gv-image';
+import '../atoms/gv-button';
+import '../molecules/gv-metrics';
+import '../molecules/gv-rating';
+import '../atoms/gv-state';
+import '../atoms/gv-tag';
+import { truncate } from '../lib/utils';
+import { i18n } from '../lib/i18n';
+import { ItemResource } from '../mixins/item-resource';
+import { dispatchCustomEvent } from '../lib/events';
+import { getVersion, getTitle, getDescription, getOwner } from '../lib/item';
+/**
+ * Full Card component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-card-full:click - Custom click event
+ * @fires gv-tag:click - Custom click event on card labels
+ *
+ * @attr {Promise<Object>} item - An item.
+ * @attr {Promise<Metrics>} metrics - A Metrics.
+ *
+ * @cssprop {Color} [--gv-card-full--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Length} [--gv-card-full-image--h=65px] - Image height
+ * @cssprop {Length} [--gv-card-full-image--w=110px] - Image width
+ */
+export class GvCardFull extends ItemResource(LitElement) {
+    static get properties() {
+        return {
+            metrics: { type: Object },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          margin: 0.2rem;
+
+          vertical-align: middle;
+          width: 100%;
+          max-height: 281px;
+          line-height: 22px;
+          font-size: var(--gv-theme-font-size-m, 14px);
+        }
+
+        gv-identity-picture {
+          height: var(--gv-card-full-image--h, 65px);
+          width: var(--gv-card-full-image--w, 110px);
+          --gv-image--of: contain;
+        }
+
+        .card {
+          display: flex;
+          flex-direction: column;
+          height: 250px;
+          border-radius: 4px;
+          background-color: var(--gv-card-full--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          color: var(--gv-theme-font-color-dark, #262626);
+          padding: 16px;
+          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color, #f5f5f5), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
+          transition: transform 0.3s;
+        }
+
+        .card:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 20px 40px -14px var(--gv-theme-neutral-color-dark, #bfbfbf);
+          cursor: pointer;
+        }
+
+        .card > div {
+          display: flex;
+        }
+
+        .image {
+          min-height: 65px;
+          min-width: 0;
+          position: relative;
+          padding-top: 0.2rem;
+        }
+
+        .title {
+          line-height: 22px;
+          font-size: var(--gv-theme-font-size-l, 16px);
+          text-transform: capitalize;
+          font-weight: bold;
+          padding-bottom: 5px;
+        }
+
+        .owner {
+          --gv-icon--c: var(--gv-theme-neutral-color-dark, #bfbfbf);
+          --gv-icon--s: 16px;
+          color: var(--gv-theme-neutral-color-dark, #bfbfbf);
+          display: flex;
+          padding-bottom: 2px;
+          line-height: initial;
+        }
+
+        .content {
+          flex: 1;
+          padding: 0 10px 10px 10px;
+        }
+
+        .version {
+          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+          padding: 10px 8px;
+          font-size: var(--gv-theme-font-size-s, 12px);
+        }
+
+        .description {
+          padding: 0 16px;
+          margin: 6px 0;
+          flex: 1;
+          flex-grow: 1;
+          max-height: 150px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .infos {
+          display: flex;
+          border-bottom: 1px solid var(--gv-theme-neutral-color-dark, #d9d9d9);
+          padding: 0.5rem 0;
+          justify-content: flex-end;
+        }
+
+        gv-metrics {
+          display: flex;
+          height: 100%;
+          justify-content: flex-end;
+          align-items: stretch;
+        }
+
+        .skeleton .infos {
+          border-bottom: none;
+        }
+
+        .labels {
+          padding: 0 16px;
+        }
+
+        .error .labels,
+        .error .infos,
+        .error .states {
+          visibility: hidden;
+        }
+      `,
+            skeleton,
+        ];
+    }
+    constructor() {
+        super();
+        this.limit = 150;
+    }
+    _onClick(e) {
+        if (!this._empty && !this._error && !this._skeleton && !e.target.tagName.toLowerCase().startsWith('gv-metrics')) {
+            dispatchCustomEvent(this, 'click', this._item);
+        }
+    }
+    render() {
+        const title = getTitle(this._item);
+        const owner = getOwner(this._item);
+        const classes = { error: this._error || this._empty, card: true };
+        return html `<div class="${classMap(classes)}" title="${title}" @click="${this._onClick}">
+      <div class="${classMap({ skeleton: this._skeleton })}">
+        <div class="${classMap({ image: true })}">${this._renderImage()}</div>
+        <div class="content">
+          <div class="${classMap({ title: true })}">${title}</div>
+          ${owner != null && owner.trim().length > 0
+            ? html `<div class="owner"><gv-icon shape="general:user" size="8px"></gv-icon>${owner}</div>`
+            : ''}
+          <div class="states">${this._renderStates()}</div>
+        </div>
+        <div class="version"><span class="${classMap({ skeleton: this._skeleton })}">${getVersion(this._item)}</span></div>
+      </div>
+      <div class="${classMap({ skeleton: this._skeleton, description: true })}">
+        ${truncate(this._error ? i18n('gv-card-full.error') : this._empty ? i18n('gv-card-full.empty') : getDescription(this._item), this.limit)}
+      </div>
+      <span class="${classMap({ skeleton: this._skeleton })}">
+        <div class="infos">${this._renderMetricsWithRating()}</div>
+
+        <div class="labels">${this._renderLabels(true)}</div>
+      </span>
+    </div>`;
+    }
+}
+window.customElements.define('gv-card-full', GvCardFull);

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

@@ -0,0 +1,101 @@
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import { withResizeObserver } from '../mixins/with-resize-observer';
+import { i18n } from '../lib/i18n';
+import './gv-card-full';
+/**
+ * List of cards
+ *
+ * ## Details
+ * * has @theme facet
+ */
+export class GvCardList extends withResizeObserver(LitElement) {
+    static get properties() {
+        return {
+            items: { type: Array },
+        };
+    }
+    constructor() {
+        super();
+        this.breakpoints = {
+            width: [845, 1270],
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          grid-gap: 0.5rem;
+        }
+
+        :host([w-lt-1270]) .container {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
+        :host([w-lt-845]) .container {
+          display: flex;
+          flex-direction: column;
+        }
+
+        :host([w-lt-845]) .container > .item {
+          flex: 0 1 auto;
+        }
+
+        .item {
+          opacity: 0;
+          transition: opacity 100ms ease-in-out;
+        }
+
+        .item.show {
+          opacity: 1;
+        }
+      `,
+        ];
+    }
+    renderItem(item, index) {
+        const _item = item && item.item ? item.item : null;
+        const _metrics = item && item.metrics ? item.metrics : null;
+        return html `<gv-card-full class="item" .item="${_item}" .metrics="${_metrics}"> </gv-card-full>`;
+    }
+    render() {
+        if (this._error) {
+            return html `<div>${i18n('gv-card-list.error')}</div>`;
+        }
+        if (this.items) {
+            return html `${repeat(this.items, (item) => item, (item, index) => this.renderItem(item, index))}`;
+        }
+        return '';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('items')) {
+            if (this.items && this.items.length > 0) {
+                const items = this.shadowRoot.querySelectorAll('.item');
+                items.forEach((item, index) => {
+                    setTimeout(() => {
+                        item.classList.add('show');
+                    }, index * 100);
+                });
+            }
+        }
+    }
+}
+window.customElements.define('gv-card-list', GvCardList);

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.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);