@gravitee/ui-components 3.25.3-typescript-e7256ca → 3.25.3-typescript-9cbc31e

package/src/mixins/keyboard-element.js

@@ -1 +1,62 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.KeyboardElement=exports.KEYS=void 0,exports.KEYS={ArrowDown:"40",ArrowLeft:"37",ArrowRight:"39",ArrowUp:"38",Ctrl:"17",Esc:"27",Shift:"16",Space:"32"},exports.KeyboardElement=function(e){return class extends e{constructor(){super(),this._controller={},this._handleKeyDown=this._onKeyDown.bind(this),this._handleKeyUp=this._onKeyUp.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this._handleKeyDown),window.addEventListener("keyup",this._handleKeyUp)}disconnectedCallback(){window.removeEventListener("keydown",this._handleKeyDown),window.removeEventListener("keyup",this._handleKeyUp),super.disconnectedCallback()}_onKeyDown(e){this._controller[e.keyCode]=!0,this.onKeyboard(this._controller)}_onKeyUp(e){this._controller[e.keyCode]&&(this._controller[e.keyCode]=null)}isPressed(...e){return null==e.find((e=>null==this._controller[e]))}onKeyboard(e){}}};
+/*
+ * 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.
+ */
+export const KEYS = {
+    ArrowDown: '40',
+    ArrowLeft: '37',
+    ArrowRight: '39',
+    ArrowUp: '38',
+    Ctrl: '17',
+    Esc: '27',
+    Shift: '16',
+    Space: '32',
+};
+export function KeyboardElement(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends ParentClass {
+        constructor() {
+            super();
+            this._controller = {};
+            this._handleKeyDown = this._onKeyDown.bind(this);
+            this._handleKeyUp = this._onKeyUp.bind(this);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            window.addEventListener('keydown', this._handleKeyDown);
+            window.addEventListener('keyup', this._handleKeyUp);
+        }
+        disconnectedCallback() {
+            window.removeEventListener('keydown', this._handleKeyDown);
+            window.removeEventListener('keyup', this._handleKeyUp);
+            super.disconnectedCallback();
+        }
+        _onKeyDown(e) {
+            this._controller[e.keyCode] = true;
+            this.onKeyboard(this._controller);
+        }
+        _onKeyUp(e) {
+            if (this._controller[e.keyCode]) {
+                this._controller[e.keyCode] = null;
+            }
+        }
+        isPressed(...keys) {
+            return keys.find((key) => this._controller[key] == null) == null;
+        }
+        // abstract
+        onKeyboard(controller) { }
+    };
+}

package/src/mixins/update-after-browser.js

@@ -1 +1,30 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.UpdateAfterBrowser=void 0,exports.UpdateAfterBrowser=function(e){return class extends e{async performUpdate(){await new Promise((e=>requestAnimationFrame((()=>e())))),super.performUpdate()}}};
+/*
+ * Copyright (C) 2021 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.
+ */
+/**
+ * This is a mixin for update component after browser
+ * @mixinFunction
+ */
+export function UpdateAfterBrowser(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends ParentClass {
+        async performUpdate() {
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+            super.performUpdate();
+        }
+    };
+}

package/src/mixins/with-resize-observer.js

@@ -1 +1,62 @@
-var e=Object.create?function(e,t,i,n){void 0===n&&(n=i),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,n){void 0===n&&(n=i),e[n]=t[i]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},i=function(i){if(i&&i.__esModule)return i;var n={};if(null!=i)for(var r in i)"default"!==r&&Object.prototype.hasOwnProperty.call(i,r)&&e(n,i,r);return t(n,i),n};Object.defineProperty(exports,"__esModule",{value:!0}),exports.withResizeObserver=void 0,exports.withResizeObserver=function(e){const t="ResizeObserver"in window?Promise.resolve(window.ResizeObserver):Promise.resolve().then((()=>i(require("resize-observer-polyfill/dist/ResizeObserver.es.js")))).then((e=>e.default));return class extends e{_onResize({width:e}){null!=this.onResize&&this.onResize({width:e}),null!=this.breakpoints&&this.breakpoints.width.forEach((t=>{const i="w-gte-"+t;t<=e?this.setAttribute(i,""):this.removeAttribute(i);const n="w-lt-"+t;e<t?this.setAttribute(n,""):this.removeAttribute(n)}))}async connectedCallback(){null!=super.connectedCallback&&super.connectedCallback();const e=new(await t)((e=>{window.requestAnimationFrame((()=>{if(!Array.isArray(e)||!e.length)return;const{width:t}=this.getBoundingClientRect();this._onResize({width:t})}))}));e.observe(this),this._unobserveResize=()=>e.unobserve(this)}disconnectedCallback(){null!=super.connectedCallback&&super.disconnectedCallback(),this._unobserveResize&&this._unobserveResize()}}};
+/*
+ * 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.
+ */
+export function withResizeObserver(ParentClass) {
+    // Load native impl or polyfill (without poluting global scope)
+    const ResizeObserverPromise = 'ResizeObserver' in window
+        ? Promise.resolve(window.ResizeObserver)
+        : import('resize-observer-polyfill/dist/ResizeObserver.es.js').then((mod) => mod.default);
+    return class extends ParentClass {
+        _onResize({ width }) {
+            if (this.onResize != null) {
+                this.onResize({ width });
+            }
+            if (this.breakpoints != null) {
+                this.breakpoints.width.forEach((breakpoint) => {
+                    const gteAttr = 'w-gte-' + breakpoint;
+                    breakpoint <= width ? this.setAttribute(gteAttr, '') : this.removeAttribute(gteAttr);
+                    const ltAttr = 'w-lt-' + breakpoint;
+                    width < breakpoint ? this.setAttribute(ltAttr, '') : this.removeAttribute(ltAttr);
+                });
+            }
+        }
+        async connectedCallback() {
+            if (super.connectedCallback != null) {
+                super.connectedCallback();
+            }
+            const ResizeObserver = await ResizeObserverPromise;
+            const ro = new ResizeObserver((entries) => {
+                // We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
+                window.requestAnimationFrame(() => {
+                    if (!Array.isArray(entries) || !entries.length) {
+                        return;
+                    }
+                    const { width } = this.getBoundingClientRect();
+                    this._onResize({ width });
+                });
+            });
+            ro.observe(this);
+            this._unobserveResize = () => ro.unobserve(this);
+        }
+        disconnectedCallback() {
+            if (super.connectedCallback != null) {
+                super.disconnectedCallback();
+            }
+            if (this._unobserveResize) {
+                this._unobserveResize();
+            }
+        }
+    };
+}

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

@@ -1 +1,109 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.withSkeletonAttribute=void 0;const t=require("lit"),e=require("../styles/skeleton"),i=require("../styles/empty");exports.withSkeletonAttribute=function(s){return class extends s{static get properties(){return{_invisible:{type:Boolean,reflect:!0},_skeleton:{type:Boolean,attribute:!1},_error:{type:Boolean,attribute:!1},_empty:{type:Boolean,attribute:!1}}}static get styles(){return[e.skeleton,i.empty,t.css`:host([_invisible]){visibility:hidden}`]}constructor(){super(),this._invisible=!0,this._skeleton=!1,this._error=!1,this._empty=!1}updated(t){if(null!=this._skeletonAttribute&&t.has(this._skeletonAttribute)){this._error=!1,this._empty=!1;const t=(new Date).getTime();let e=null;const i=setTimeout((()=>{this._invisible=!1,this._skeleton=!0,e=(new Date).getTime()}),500),s=this[this._skeletonAttribute];Promise.resolve(s).then((s=>{clearTimeout(i),e&&e-t<1e3?setTimeout((()=>{this[this._skeletonAttribute]=s}),1e3-(e-t)):(this._invisible=void 0===s,this._skeleton=null===s,s&&(Array.isArray(s)?this._empty=0===s.length:this._empty=0===Object.keys(s).length,this[`_${this._skeletonAttribute}`]=s))})).catch((s=>{clearTimeout(i),e&&e-t<1e3?setTimeout((()=>{this[this._skeletonAttribute]=Promise.reject(s)}),1e3-(e-t)):(this._error=!0,this._skeleton=!1,this._empty=!1,this._invisible=!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 } 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/src/molecules/gv-card-full.js

@@ -1 +1,209 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCardFull=void 0;const e=require("lit"),t=require("../styles/skeleton"),i=require("lit/directives/class-map");require("../atoms/gv-image"),require("../atoms/gv-button"),require("../molecules/gv-metrics"),require("../molecules/gv-rating"),require("../atoms/gv-state"),require("../atoms/gv-tag");const r=require("../lib/utils"),s=require("../lib/i18n"),l=require("../mixins/item-resource"),a=require("../lib/events"),o=require("../lib/item");class n extends((0,l.ItemResource)(e.LitElement)){static get properties(){return{metrics:{type:Object}}}static get styles(){return[...super.styles,e.css`:host{box-sizing:border-box;display:inline-block;margin:.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,#fff));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 .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:.2rem}.title{line-height:22px;font-size:var(--gv-theme-font-size-l,16px);text-transform:capitalize;font-weight:700;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:.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 .infos,.error .labels,.error .states{visibility:hidden}`,t.skeleton]}constructor(){super(),this.limit=150}_onClick(e){this._empty||this._error||this._skeleton||e.target.tagName.toLowerCase().startsWith("gv-metrics")||(0,a.dispatchCustomEvent)(this,"click",this._item)}render(){const t=(0,o.getTitle)(this._item),l=(0,o.getOwner)(this._item),a={error:this._error||this._empty,card:!0};return e.html`<div class="${(0,i.classMap)(a)}" title="${t}" @click="${this._onClick}"><div class="${(0,i.classMap)({skeleton:this._skeleton})}"><div class="${(0,i.classMap)({image:!0})}">${this._renderImage()}</div><div class="content"><div class="${(0,i.classMap)({title:!0})}">${t}</div>${null!=l&&l.trim().length>0?e.html`<div class="owner"><gv-icon shape="general:user" size="8px"></gv-icon>${l}</div>`:""}<div class="states">${this._renderStates()}</div></div><div class="version"><span class="${(0,i.classMap)({skeleton:this._skeleton})}">${(0,o.getVersion)(this._item)}</span></div></div><div class="${(0,i.classMap)({skeleton:this._skeleton,description:!0})}">${(0,r.truncate)(this._error?(0,s.i18n)("gv-card-full.error"):this._empty?(0,s.i18n)("gv-card-full.empty"):(0,o.getDescription)(this._item),this.limit)}</div><span class="${(0,i.classMap)({skeleton:this._skeleton})}"><div class="infos">${this._renderMetricsWithRating()}</div><div class="labels">${this._renderLabels(!0)}</div></span></div>`}}exports.GvCardFull=n,window.customElements.define("gv-card-full",n);
+/*
+ * 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/src/molecules/gv-card-list.js

@@ -1 +1,101 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCardList=void 0;const e=require("lit"),t=require("lit/directives/repeat"),i=require("../mixins/with-resize-observer"),r=require("../lib/i18n");require("./gv-card-full");class s extends((0,i.withResizeObserver)(e.LitElement)){static get properties(){return{items:{type:Array}}}constructor(){super(),this.breakpoints={width:[845,1270]}}static get styles(){return[e.css`:host{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:.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 .1s ease-in-out}.item.show{opacity:1}`]}renderItem(t,i){const r=t&&t.item?t.item:null,s=t&&t.metrics?t.metrics:null;return e.html`<gv-card-full class="item" .item="${r}" .metrics="${s}"></gv-card-full>`}render(){return this._error?e.html`<div>${(0,r.i18n)("gv-card-list.error")}</div>`:this.items?e.html`${(0,t.repeat)(this.items,(e=>e),((e,t)=>this.renderItem(e,t)))}`:""}updated(e){if(e.has("items")&&this.items&&this.items.length>0){this.shadowRoot.querySelectorAll(".item").forEach(((e,t)=>{setTimeout((()=>{e.classList.add("show")}),100*t)}))}}}exports.GvCardList=s,window.customElements.define("gv-card-list",s);
+/*
+ * 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);