@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-493e1dd

package/src/molecules/gv-card.js

@@ -1 +1,130 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCard=void 0;const e=require("lit"),t=require("../styles/skeleton"),r=require("lit/directives/class-map");require("../atoms/gv-image"),require("../atoms/gv-button");const i=require("../lib/i18n"),s=require("../mixins/item-resource"),o=require("../lib/item");class a extends((0,s.ItemResource)(e.LitElement)){static get styles(){return[...super.styles,e.css`:host{box-sizing:border-box;display:inline-block;margin:.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,#fff));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 .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:.2rem}.image{display:flex;flex:1;align-items:center;justify-content:center;position:relative;padding-top:.2rem}.title{line-height:22px;font-size:var(--gv-theme-font-size-s,12px);text-transform:capitalize;font-weight:700;white-space:nowrap;overflow:hidden}.content{flex:1;padding:6px 16px 12px}.version{color:var(--gv-theme-neutral-color-dark,#d9d9d9);top:.4rem;right:.4rem;position:absolute}`,t.skeleton]}render(){const t=(0,o.getTitle)(this._item);return e.html`<div class="card" title="${t}"><span class="${(0,r.classMap)({skeleton:this._skeleton,version:!0})}">${(0,o.getVersion)(this._item)}</span><div class="${(0,r.classMap)({image:!0,skeleton:this._skeleton})}">${this._renderImage()}</div><div class="${(0,r.classMap)({content:!0,empty:this._error||this._empty})}">${this._error||this._empty?e.html`<span>${this._error?(0,i.i18n)("gv-card.error"):(0,i.i18n)("gv-card.empty")}</span>`:e.html`<div class="${(0,r.classMap)({skeleton:this._skeleton})}"><span class="title">${t}</span></div><div>${this._renderStates()}</div>`}</div></div>`}}exports.GvCard=a,window.customElements.define("gv-card",a);
+/*
+ * 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/src/molecules/gv-category-list.js

@@ -1 +1,56 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCategoryList=void 0;const e=require("lit");require("./gv-category");const t=require("./gv-card-list");class r extends t.GvCardList{static get styles(){return[...super.styles,e.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(t,r){return e.html`<gv-category class="item" .category="${t||null}" style="${this._getCategoryBackgroundColor(r)}"></gv-category>`}_getCategoryBackgroundColor(e){return`--gv-category--bgc: var(--bgc-${e%6+1})`}}exports.GvCategoryList=r,window.customElements.define("gv-category-list",r);
+/*
+ * 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/src/molecules/gv-category.js

@@ -1 +1,163 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCategory=void 0;const e=require("lit"),t=require("../lib/utils"),i=require("lit/directives/class-map"),r=require("../lib/events"),s=require("../lib/i18n"),o=require("../mixins/with-skeleton-attribute");class a extends((0,o.withSkeletonAttribute)(e.LitElement)){static get properties(){return{category:{type:Object},limit:{type:Number},_category:{type:Object,attribute:!1}}}static get styles(){return[...super.styles,e.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:middle;min-width:415px}.card{background-color:var(--gv-category--bgc,var(--gv-theme-neutral-color-lightest,#fff));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 .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:.7}gv-identity-picture{height:80px;width:80px;margin:.5rem 1rem .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:400;line-height:24px;opacity:.7;max-height:150px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}`]}constructor(){super(),this._skeletonAttribute="category"}_get(e){return this._category?this._category[e]:""}_onClick(){(0,r.dispatchCustomEvent)(this,"click",this._category)}render(){const r=this._get("total_apis");return e.html`<div @click="${this._onClick}" class="${(0,i.classMap)({card:!0,skeleton:this._skeleton,empty:this._error||this._empty})}">${this._error||this._empty?e.html`<div class="${(0,i.classMap)({skeleton:this._skeleton})}"><span>${this._error?(0,s.i18n)("gv-category.error"):(0,s.i18n)("gv-category.empty")}</span></div>`:e.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")}${r?e.html`<span>(${r})</span>`:""}</div></div><div class="description">${(0,t.truncate)(this._get("description"),this.limit)}</div>`}</div>`}}exports.GvCategory=a,window.customElements.define("gv-category",a);
+/*
+ * 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);