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

package/src/molecules/gv-list.js

@@ -1 +1,214 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvList=void 0;const e=require("lit"),t=require("lit/directives/repeat"),i=require("lit/directives/class-map"),s=require("../lib/i18n"),r=require("../styles/link");require("../molecules/gv-identity-picture");const l=require("../lib/events"),n=require("../lib/item"),a=require("../mixins/with-skeleton-attribute");class o extends((0,a.withSkeletonAttribute)(e.LitElement)){static get properties(){return{...super.styles,items:{type:Object},title:{type:String},clickable:{type:Boolean},_items:{type:Object,attribute:!1}}}static get styles(){return[...super.styles,r.link,e.css`:host{box-sizing:border-box;display:inline-block;width:280px;border-radius:4px;background-color:var(--gv-list--bgc,var(--gv-theme-neutral-color-lightest,#fff));--gv-icon--s:var(--gv-list-icon--s, 20px)}gv-identity-picture{width:var(--gv-list-image--w,40px);height:var(--gv-list-image--h,40px)}.list{list-style:none;margin:0;padding:0}h3{padding:24px;font-size:var(--gv-theme-font-size-m);line-height:var(--gv-theme-font-size-m);opacity:.6;letter-spacing:.05rem;border-bottom:1px solid var(--gv-theme-neutral-color);margin:0}h4{font-size:var(--gv-theme-font-size-m);line-height:var(--gv-theme-font-size-m);opacity:.9;letter-spacing:.05rem}h4 span{font-size:var(--gv-theme-font-size-s,12px);margin-left:8px}.item{display:flex;margin:24px}.item__image{align-self:center;margin-right:4px}.item__content{display:flex;flex-direction:column;justify-content:space-evenly}.item__title{margin:0}.item__description{font-size:var(--gv-theme-font-size-m,14px);line-height:22px;opacity:.5;display:-webkit-box;max-width:200px;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.scrollable-container{max-height:400px;overflow:auto}`]}constructor(){super(),this._skeletonAttribute="items"}_onClick(e){(0,l.dispatchCustomEvent)(this,"click",e)}_renderImage(t){return e.html`<gv-identity-picture .picture="${(0,n.getPicture)(t)}" .display_name="${(0,n.getPictureDisplayName)(t)}"></gv-identity-picture>`}_renderStatus(t){if(t){if(t.filter((e=>"PAUSED"===e.status.toUpperCase())).length>0)return e.html`<gv-icon title="${(0,s.i18n)("gv-list.paused")}" shape="media:pause"></gv-icon>`;if(t.filter((e=>"PENDING"===e.status.toUpperCase())).length>0)return e.html`<gv-icon title="${(0,s.i18n)("gv-list.pending")}" shape="home:timer"></gv-icon>`}return""}_renderItem(t){return t?e.html`<div class="item__image">${this._renderImage(t.item)}</div><div class="item__content"><h4 class="item__title">${this._renderStatus(t.subscriptions)}${t.item.name} <span>${(0,n.getVersion)(t.item)}</span></h4><div class="item__description">${t.item.description}</div></div>`:e.html`<p>xxxx-xxxx-xxxx-xxxx</p>`}_renderItems(){return this._empty&&!this._skeleton?"":this._skeleton?e.html`<ul class="list"><h4 class="skeleton">xxxx-xxxx-xxxx-xxxx</h4><div class="scrollable-container"><li class="item skeleton">${this._renderItem()}</li><li class="item skeleton">${this._renderItem()}</li></div></ul>`:e.html`<ul class="list"><h3>${this.title?this.title:""} ${this._items&&this._items.length>0?e.html`<span>(${this._items.length})</span>`:""}</h3><div class="scrollable-container">${this._items?(0,t.repeat)(this._items,(e=>e),(t=>this.clickable?e.html`<li class="${(0,i.classMap)({item:!0,link:!0})}" @click="${this._onClick.bind(this,t)}">${this._renderItem(t)}</li>`:e.html`<li class="${(0,i.classMap)({item:!0})}">${this._renderItem(t)}</li>`)):""}</div></ul>`}render(){return e.html`<div>${this._error?e.html`<div class="error">${(0,s.i18n)("gv-list.error")}</div>`:this._renderItems()}</div>`}}exports.GvList=o,window.customElements.define("gv-list",o);
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+import { link } from '../styles/link';
+import '../molecules/gv-identity-picture';
+import { dispatchCustomEvent } from '../lib/events';
+import { getPicture, getPictureDisplayName, getVersion } from '../lib/item';
+import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
+/**
+ * Connected Applications component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-list:click - Click event from an element of the list
+ *
+ * @attr {Promise<Array<{Object}>>} items - a list of item.
+ * @attr {String} title - title of the list.
+ * @attr {Boolean} clickable - true if gv-list element can be clickable.
+ *
+ * @cssprop {Color} [--gv-list--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Length} [--gv-list-icon--s=20px] - Height and icon width
+ * @cssprop {Length} [--gv-list-image--h=40px] - Image height
+ * @cssprop {Length} [--gv-list-image--w=40px] - Image width
+ */
+export class GvList extends withSkeletonAttribute(LitElement) {
+    static get properties() {
+        return {
+            ...super.styles,
+            items: { type: Object },
+            title: { type: String },
+            clickable: { type: Boolean },
+            _items: { type: Object, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          width: 280px;
+          border-radius: 4px;
+          background-color: var(--gv-list--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          --gv-icon--s: var(--gv-list-icon--s, 20px);
+        }
+
+        gv-identity-picture {
+          width: var(--gv-list-image--w, 40px);
+          height: var(--gv-list-image--h, 40px);
+        }
+
+        .list {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        h3 {
+          padding: 24px;
+          font-size: var(--gv-theme-font-size-m);
+          line-height: var(--gv-theme-font-size-m);
+          opacity: 0.6;
+          letter-spacing: 0.05rem;
+          border-bottom: 1px solid var(--gv-theme-neutral-color);
+          margin: 0;
+        }
+
+        h4 {
+          font-size: var(--gv-theme-font-size-m);
+          line-height: var(--gv-theme-font-size-m);
+          opacity: 0.9;
+          letter-spacing: 0.05rem;
+        }
+
+        h4 span {
+          font-size: var(--gv-theme-font-size-s, 12px);
+          margin-left: 8px;
+        }
+
+        .item {
+          display: flex;
+          margin: 24px;
+        }
+
+        .item__image {
+          align-self: center;
+          margin-right: 4px;
+        }
+
+        .item__content {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+        }
+
+        .item__title {
+          margin: 0;
+        }
+
+        .item__description {
+          font-size: var(--gv-theme-font-size-m, 14px);
+          line-height: 22px;
+          opacity: 0.5;
+
+          display: -webkit-box;
+          max-width: 200px;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .scrollable-container {
+          max-height: 400px;
+          overflow: auto;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._skeletonAttribute = 'items';
+    }
+    _onClick(item) {
+        dispatchCustomEvent(this, 'click', item);
+    }
+    _renderImage(item) {
+        return html `<gv-identity-picture .picture="${getPicture(item)}" .display_name="${getPictureDisplayName(item)}"></gv-identity-picture>`;
+    }
+    _renderStatus(subscriptions) {
+        if (subscriptions) {
+            const paused = subscriptions.filter((sub) => sub.status.toUpperCase() === 'PAUSED');
+            if (paused.length > 0) {
+                return html ` <gv-icon title="${i18n('gv-list.paused')}" shape="media:pause"></gv-icon>`;
+            }
+            const pending = subscriptions.filter((sub) => sub.status.toUpperCase() === 'PENDING');
+            if (pending.length > 0) {
+                return html ` <gv-icon title="${i18n('gv-list.pending')}" shape="home:timer"></gv-icon>`;
+            }
+        }
+        return '';
+    }
+    _renderItem(item) {
+        if (item) {
+            return html `
+        <div class="item__image">${this._renderImage(item.item)}</div>
+        <div class="item__content">
+          <h4 class="item__title">${this._renderStatus(item.subscriptions)}${item.item.name} <span>${getVersion(item.item)}</span></h4>
+          <div class="item__description">${item.item.description}</div>
+        </div>
+      `;
+        }
+        return html `<p>xxxx-xxxx-xxxx-xxxx</p>`;
+    }
+    _renderItems() {
+        if (this._empty && !this._skeleton) {
+            return '';
+        }
+        if (this._skeleton) {
+            return html `
+        <ul class="list">
+          <h4 class="skeleton">xxxx-xxxx-xxxx-xxxx</h4>
+          <div class="scrollable-container">
+            <li class="item skeleton">${this._renderItem()}</li>
+            <li class="item skeleton">${this._renderItem()}</li>
+          </div>
+        </ul>
+      `;
+        }
+        return html `
+      <ul class="list">
+        <h3>${this.title ? this.title : ''} ${this._items && this._items.length > 0 ? html `<span>(${this._items.length})</span>` : ''}</h3>
+        <div class="scrollable-container">
+          ${this._items
+            ? repeat(this._items, (item) => item, (item) => {
+                if (this.clickable) {
+                    return html `<li class="${classMap({ item: true, link: true })}" @click="${this._onClick.bind(this, item)}">
+                      ${this._renderItem(item)}
+                    </li>`;
+                }
+                else {
+                    return html `<li class="${classMap({ item: true })}">${this._renderItem(item)}</li>`;
+                }
+            })
+            : ''}
+        </div>
+      </ul>
+    `;
+    }
+    render() {
+        return html ` <div>${this._error ? html `<div class="error">${i18n('gv-list.error')}</div>` : this._renderItems()}</div> `;
+    }
+}
+window.customElements.define('gv-list', GvList);

package/src/molecules/gv-metrics.js

@@ -1 +1,147 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvMetrics=void 0;const t=require("lit");require("../atoms/gv-metric");const e=require("../lib/i18n"),i=require("../styles/link"),s=require("../mixins/with-skeleton-attribute"),r=require("lit/directives/class-map"),c=require("../lib/events"),l=require("lit/directives/if-defined");class n extends((0,s.withSkeletonAttribute)(t.LitElement)){static get properties(){return{metrics:{type:Object},_metrics:{type:Object,attribute:!1}}}static get styles(){return[...super.styles,i.link,t.css`:host{box-sizing:border-box;margin:.2rem;width:100%;height:100%;min-height:25px;min-width:25px;display:flex;width:100%}:host>*{flex:1 1 auto}`]}constructor(){super(),this._skeletonAttribute="metrics",this.skeleton=!1,this._error=!1,this._empty=!1}_isClickable(t){return!(!this._metrics||"object"!=typeof this._metrics[t])&&this._metrics[t].clickable}_getValue(t){return"object"==typeof t?t.value:t}_getSubscribers(){return this._metrics?this._getValue(this._metrics.subscribers):null}_getHits(){return this._metrics?this._getValue(this._metrics.hits):null}_getHealth(){if(this._metrics){const t=this._getValue(this._metrics.health);return isNaN(t)?"":Intl.NumberFormat.call(this,navigator.language,{style:"percent",maximumFractionDigits:2}).format(t)}return null}_getTitle(t){return this._metrics&&"object"==typeof this._metrics[t]?this._metrics[t].title:null}_onClick(t){(0,c.dispatchCustomEvent)(this,"click",{key:t})}_renderMetric(e,i,s,c){const n=this._isClickable(e);return c||this._skeleton?t.html`<gv-metric @click="${n?this._onClick.bind(this,e):null}" .skeleton="${this._skeleton}" icon="${i}" name="${s}" value="${c}" class="${(0,r.classMap)({link:n})}" title="${(0,l.ifDefined)(this._getTitle(e))}"></gv-metric>`:t.html``}render(){if(this._error)return t.html`<div class="error">${(0,e.i18n)("gv-metrics.error")}</div>`;const i=this._getSubscribers(),s=this._getHits(),r=this._getHealth();return t.html`${this._renderMetric("subscribers","communication:group",(0,e.i18n)("gv-metrics.subscribers",{count:i}),i)} ${this._renderMetric("hits","general:cursor",(0,e.i18n)("gv-metrics.hits",{count:s}),s)} ${this._renderMetric("health","general:heart",(0,e.i18n)("gv-metrics.health"),r)}<slot></slot>`}}exports.GvMetrics=n,window.customElements.define("gv-metrics",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, LitElement, html } from 'lit';
+import '../atoms/gv-metric';
+import { i18n } from '../lib/i18n';
+import { link } from '../styles/link';
+import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+import { ifDefined } from 'lit/directives/if-defined';
+/**
+ * Metrics information component
+ *
+ * ## Details
+ * * has @theme facet
+ * * attributes `metrics` should be an array of Object {value, clickable}, or an array of values, or a mix.
+ *
+ * @fires gv-metrics:click - Click event from metric if is clickable
+ *
+ * @attr {Promise<{ hits: value, health: {value, clickable}, subscribers: {value, clickable?, title?} }>} metrics - Metrics.
+ * @attr {RatingSummary} rating - Ratings of an API.
+ */
+export class GvMetrics extends withSkeletonAttribute(LitElement) {
+    static get properties() {
+        return {
+            metrics: { type: Object },
+            _metrics: { type: Object, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          margin: 0.2rem;
+          width: 100%;
+          height: 100%;
+          min-height: 25px;
+          min-width: 25px;
+          display: flex;
+          width: 100%;
+        }
+
+        :host > * {
+          flex: 1 1 auto;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._skeletonAttribute = 'metrics';
+        this.skeleton = false;
+        this._error = false;
+        this._empty = false;
+    }
+    _isClickable(metricName) {
+        if (this._metrics && typeof this._metrics[metricName] === 'object') {
+            return this._metrics[metricName].clickable;
+        }
+        return false;
+    }
+    _getValue(metric) {
+        if (typeof metric === 'object') {
+            return metric.value;
+        }
+        return metric;
+    }
+    _getSubscribers() {
+        if (this._metrics) {
+            return this._getValue(this._metrics.subscribers);
+        }
+        return null;
+    }
+    _getHits() {
+        if (this._metrics) {
+            return this._getValue(this._metrics.hits);
+        }
+        return null;
+    }
+    _getHealth() {
+        if (this._metrics) {
+            const health = this._getValue(this._metrics.health);
+            return !isNaN(health)
+                ? Intl.NumberFormat.call(this, navigator.language, {
+                    style: 'percent',
+                    maximumFractionDigits: 2,
+                }).format(health)
+                : '';
+        }
+        return null;
+    }
+    _getTitle(metricName) {
+        if (this._metrics && typeof this._metrics[metricName] === 'object') {
+            return this._metrics[metricName].title;
+        }
+        return null;
+    }
+    _onClick(key) {
+        dispatchCustomEvent(this, 'click', { key });
+    }
+    _renderMetric(key, icon, name, value) {
+        const clickable = this._isClickable(key);
+        return value || this._skeleton
+            ? html `<gv-metric
+          @click="${clickable ? this._onClick.bind(this, key) : null}"
+          .skeleton="${this._skeleton}"
+          icon="${icon}"
+          name="${name}"
+          value="${value}"
+          class="${classMap({ link: clickable })}"
+          title="${ifDefined(this._getTitle(key))}"
+        ></gv-metric>`
+            : html ``;
+    }
+    render() {
+        if (this._error) {
+            return html `<div class="error">${i18n('gv-metrics.error')}</div>`;
+        }
+        const subscribers = this._getSubscribers();
+        const hits = this._getHits();
+        const health = this._getHealth();
+        return html `
+      ${this._renderMetric('subscribers', 'communication:group', i18n('gv-metrics.subscribers', { count: subscribers }), subscribers)}
+      ${this._renderMetric('hits', 'general:cursor', i18n('gv-metrics.hits', { count: hits }), hits)}
+      ${this._renderMetric('health', 'general:heart', i18n('gv-metrics.health'), health)}
+      <slot></slot>
+    `;
+    }
+}
+window.customElements.define('gv-metrics', GvMetrics);

package/src/molecules/gv-modal.js

@@ -1 +1,203 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvModal=void 0;const t=require("lit");require("../atoms/gv-icon");const e=require("../lib/events");class o extends t.LitElement{static get properties(){return{_toChange:{type:Boolean},opened:{type:Boolean},showCloseIcon:{type:Boolean},modalTitle:{type:String},blocking:{type:Boolean}}}constructor(){super(),this._toChange=!1,this.opened=!1,this.showCloseIcon=!1,this.blocking=!1}static get styles(){return[t.css`*{box-sizing:border-box}:host{display:block}section{position:fixed;left:0;top:0;height:100vh;width:100vw;display:none;transition:opacity var(--gv-modal--anim-duration,.3s) ease-in;-webkit-transition:opacity var(--gv-modal--anim-duration,.3s) ease-in;align-items:center;justify-content:center;z-index:var(--gv-modal--z,100);background-color:var(--gv-modal--bgc,rgba(30,30,30,.6))}.content{display:block;position:relative;z-index:var(--gv-modal-content--z,101);width:var(--gv-modal--w,280px);min-width:var(--gv-modal--miw,250px);max-width:var(--gv-modal--maw,100vw);height:var(--gv-modal--h,auto);min-height:var(--gv-modal--mih,auto);max-height:var(--gv-modal--mah,100vh);background-color:var(--gv-modal-content--bgc,var(--gv-theme-neutral-color-light,#efefef));box-shadow:var(--gv-modal--bxsh,0 0 16px #383e3f);border-radius:var(--gv-modal--bdrs,4px);padding:var(--gv-modal--p,1em)}article{overflow:auto;max-height:100%;height:100%}.transparent{opacity:0}.opaque{opacity:1;display:flex!important}.opened{display:flex!important}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:10px}.title{font-weight:700;font-size:large}gv-icon{--gv-icon--s:var(--gv-modal-close-icon--s, 24px);display:inline-block;z-index:1002;cursor:pointer}`]}render(){return t.html`<section class="${this.getModalClass(this.opened,this._toChange)}" @click="${this._backgroundModalClick}" @transitionend="${this.animationEnd}"><div class="content" @click="${this.contentClick}"><div class="header"><span class="title">${this.modalTitle}</span> ${this.showCloseIcon?t.html`<gv-icon shape="general:close" @click="${this.close}"></gv-icon>`:""}</div><article><slot></slot></article></div></section>`}getModalClass(t,e){return t||e?t&&e?"transparent opened":t&&!e?"opaque":!t&&e?"transparent opened":void 0:"transparent"}open(){this.opened=!0,this._toChange=!0,setTimeout((()=>{this._toChange=!1}),50)}_backgroundModalClick(t){this.blocking||(this.close(),(0,e.dispatchCustomEvent)(this,"closed"))}close(){this.opened=!1,this._toChange=!0,(0,e.dispatchCustomEvent)(this,"closed")}animationEnd(){this._toChange=!1}contentClick(t){t.stopPropagation()}}exports.GvModal=o,window.customElements.define("gv-modal",o);
+/*
+ * 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.
+ */
+import { LitElement, html, css } from 'lit';
+import '../atoms/gv-icon';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * A modal that shows up on top of your page
+ *
+ * @fires gv-modal:closed - Event fired when modal is closed.
+ *
+ * @cssprop {Length} [--gv-modal--anim-duration=0.3s] - Duration of the animation
+ * @cssprop {Length} [--gv-modal--z=100] - z-index for modal
+ * @cssprop {Color} [--gv-modal--bgc=rgba(30, 30, 30, 0.6)] - Modal background color
+ * @cssprop {Length} [--gv-modal-content--z=101] - z-index for modal content
+ * @cssprop {Length} [--gv-modal--w=280px] - model width
+ * @cssprop {Length} [--gv-modal--miw=250px] - modal min-width
+ * @cssprop {Length} [--gv-modal--maw=100vw] - modal max-width
+ * @cssprop {Length} [--gv-modal--h=auto] - modal height
+ * @cssprop {Length} [--gv-modal--mih=auto] - modal min height
+ * @cssprop {Length} [--gv-modal--mah=100vh] - modal max height
+ * @cssprop {Color} [--gv-modal-content--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Modal content background color
+ * @cssprop {String} [--gv-modal--bxsh=0px 0px 16px #383e3f] - Modal box shadow
+ * @cssprop {Length} [--gv-modal--bdrs=4px] - Modal border radius
+ * @cssprop {Length} [--gv-modal--p=1em] - Modal content padding
+ * @cssprop {Length} [--gv-modal-close-icon--s=24px] - Modal close icon size
+ */
+export class GvModal extends LitElement {
+    static get properties() {
+        return {
+            _toChange: { type: Boolean },
+            /**
+             * If true the modal box is in opened status.
+             */
+            opened: { type: Boolean },
+            /**
+             * If true the modal box displays a close icon
+             */
+            showCloseIcon: { type: Boolean },
+            /**
+             * The title of the modal dialog
+             */
+            // ⚠️ it cannot be simply named `title` otherwise the browser consider it
+            // as a `title` property and use it to display a tooltip
+            modalTitle: { type: String },
+            /**
+             * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box do not close.
+             */
+            blocking: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this._toChange = false;
+        this.opened = false;
+        this.showCloseIcon = false;
+        this.blocking = false;
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        * {
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+        section {
+          position: fixed;
+          left: 0;
+          top: 0;
+          height: 100vh;
+          width: 100vw;
+          display: none;
+          transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
+          -webkit-transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
+          align-items: center;
+          justify-content: center;
+          z-index: var(--gv-modal--z, 100);
+          background-color: var(--gv-modal--bgc, rgba(30, 30, 30, 0.6));
+        }
+        .content {
+          display: block;
+          position: relative;
+          z-index: var(--gv-modal-content--z, 101);
+          width: var(--gv-modal--w, 280px);
+          min-width: var(--gv-modal--miw, 250px);
+          max-width: var(--gv-modal--maw, 100vw);
+          height: var(--gv-modal--h, auto);
+          min-height: var(--gv-modal--mih, auto);
+          max-height: var(--gv-modal--mah, 100vh);
+          background-color: var(--gv-modal-content--bgc, var(--gv-theme-neutral-color-light, #efefef));
+          box-shadow: var(--gv-modal--bxsh, 0px 0px 16px #383e3f);
+          border-radius: var(--gv-modal--bdrs, 4px);
+          padding: var(--gv-modal--p, 1em);
+        }
+        article {
+          overflow: auto;
+          max-height: 100%;
+          height: 100%;
+        }
+        .transparent {
+          opacity: 0;
+        }
+        .opaque {
+          opacity: 1;
+          display: flex !important;
+        }
+        .opened {
+          display: flex !important;
+        }
+        .header {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          padding-bottom: 10px;
+        }
+        .title {
+          font-weight: bold;
+          font-size: large;
+        }
+        gv-icon {
+          --gv-icon--s: var(--gv-modal-close-icon--s, 24px);
+          display: inline-block;
+          z-index: 1002;
+          cursor: pointer;
+        }
+      `,
+        ];
+    }
+    render() {
+        return html `
+      <section
+        class="${this.getModalClass(this.opened, this._toChange)}"
+        @click="${this._backgroundModalClick}"
+        @transitionend="${this.animationEnd}"
+      >
+        <div class="content" @click="${this.contentClick}">
+          <div class="header">
+            <span class="title">${this.modalTitle}</span>
+            ${this.showCloseIcon ? html `<gv-icon shape="general:close" @click="${this.close}"></gv-icon>` : ''}
+          </div>
+          <article>
+            <slot></slot>
+          </article>
+        </div>
+      </section>
+    `;
+    }
+    getModalClass(opened, _toChange) {
+        if (!opened && !_toChange) {
+            return 'transparent';
+        }
+        if (opened && _toChange) {
+            return 'transparent opened';
+        }
+        if (opened && !_toChange) {
+            return 'opaque';
+        }
+        if (!opened && _toChange) {
+            return 'transparent opened';
+        }
+    }
+    open() {
+        this.opened = true;
+        this._toChange = true;
+        setTimeout(() => {
+            this._toChange = false;
+        }, 50);
+    }
+    _backgroundModalClick(e) {
+        if (!this.blocking) {
+            this.close();
+            dispatchCustomEvent(this, 'closed');
+        }
+    }
+    close() {
+        this.opened = false;
+        this._toChange = true;
+        dispatchCustomEvent(this, 'closed');
+    }
+    animationEnd() {
+        this._toChange = false;
+    }
+    contentClick(e) {
+        e.stopPropagation();
+    }
+}
+window.customElements.define('gv-modal', GvModal);