@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

package/src/molecules/gv-list.js

@@ -1,227 +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, 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);
+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);

package/src/molecules/gv-metrics.js

@@ -1,162 +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, 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);
+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);

package/src/molecules/gv-modal.js

@@ -1,213 +1 @@
-/*
- * 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);
+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);