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

package/src/atoms/gv-link.js

@@ -22,6 +22,7 @@ import { until } from 'lit/directives/until';
 import { dispatchCustomEvent } from '../lib/events';
 import './gv-icon';
 import { ifDefined } from 'lit/directives/if-defined';
+
 /**
  * A link
  *
@@ -52,45 +53,114 @@ import { ifDefined } from 'lit/directives/if-defined';
  * @cssprop {String} [--gv-link--tsh=none]- Text shadow
  * @cssprop {Length} [--gv-link-icon--s=24px] - Height and icon width
  */
-
 export class GvLink extends LitElement {
   static get properties() {
     return {
-      active: {
-        type: Boolean,
-        reflect: true
-      },
-      icon: {
-        type: String
-      },
-      path: {
-        type: String
-      },
-      title: {
-        type: String
-      },
-      target: {
-        type: String
-      },
-      _title: {
-        type: String,
-        attribute: false
-      },
-      help: {
-        type: String
-      },
-      skeleton: {
-        type: Boolean
-      },
-      small: {
-        type: Boolean
-      }
+      active: { type: Boolean, reflect: true },
+      icon: { type: String },
+      path: { type: String },
+      title: { type: String },
+      target: { type: String },
+      _title: { type: String, attribute: false },
+      help: { type: String },
+      skeleton: { type: Boolean },
+      small: { type: Boolean },
     };
   }
 
   static get styles() {
-    return [link, // language=css
-    css`:host{display:inline-flex;vertical-align:middle;--gv-icon--s:var(--gv-link-icon--s, 24px);--link-active--c:var(--gv-link-active--c, var(--gv-theme-font-color-light, #ffffff));--link--c:var(--gv-link--c, var(--gv-theme-font-color-dark, #262626));--pv:var(--gv-link-a--pv, 15px);--ph:var(--gv-link-a--ph, 15px)}*,:after,:before{box-sizing:border-box}a{opacity:1;padding:var(--pv) var(--ph);color:var(--link--c);background-color:var(--gv-link--bgc,transparent);width:100%;display:inline-flex;align-content:center;text-align:var(--gv-link--ta,center);text-shadow:var(--gv-link--tsh,none);border-color:var(--gv-link--bgc,transparent);border-style:var(--gv-link-active--bds,none);border-width:var(--gv-link-active--bdw,none)}a>*{align-self:center}.active{color:var(--link-active--c);background-color:var(--gv-link-active--bgc,var(--gv-theme-color-dark,#28444f));border-color:var(--gv-link-active--bdc,none)}.link.active:hover{opacity:1}a gv-icon,a span{align-self:center}a span{flex:1;align-self:center;white-space:nowrap;margin:.3rem .5rem;text-decoration:var(--gv-link--td,none);text-overflow:ellipsis;overflow:hidden}a.small span{margin:.3rem 0;width:0;visibility:hidden}.help{margin:0 .2rem;opacity:.5;font-size:var(--gv-theme-font-size-xs,10px)}.help::before{content:'('}.help::after{content:')'}.skeleton{min-width:100px;margin:0 .2rem;opacity:.5}`, skeleton];
+    return [
+      link,
+      // language=css
+      css`
+        :host {
+          display: inline-flex;
+          vertical-align: middle;
+          --gv-icon--s: var(--gv-link-icon--s, 24px);
+          --link-active--c: var(--gv-link-active--c, var(--gv-theme-font-color-light, #ffffff));
+          --link--c: var(--gv-link--c, var(--gv-theme-font-color-dark, #262626));
+          --pv: var(--gv-link-a--pv, 15px);
+          --ph: var(--gv-link-a--ph, 15px);
+        }
+
+        *,
+        *:before,
+        *:after {
+          box-sizing: border-box;
+        }
+
+        a {
+          opacity: 1;
+          padding: var(--pv) var(--ph);
+          color: var(--link--c);
+          background-color: var(--gv-link--bgc, transparent);
+          width: 100%;
+          display: inline-flex;
+          align-content: center;
+          text-align: var(--gv-link--ta, center);
+          text-shadow: var(--gv-link--tsh, none);
+          border-color: var(--gv-link--bgc, transparent);
+          border-style: var(--gv-link-active--bds, none);
+          border-width: var(--gv-link-active--bdw, none);
+        }
+
+        a > * {
+          align-self: center;
+        }
+
+        .active {
+          color: var(--link-active--c);
+          background-color: var(--gv-link-active--bgc, var(--gv-theme-color-dark, #28444f));
+          border-color: var(--gv-link-active--bdc, none);
+        }
+
+        .link.active:hover {
+          opacity: 1;
+        }
+
+        a span,
+        a gv-icon {
+          align-self: center;
+        }
+
+        a span {
+          flex: 1;
+          align-self: center;
+          white-space: nowrap;
+          margin: 0.3rem 0.5rem;
+          text-decoration: var(--gv-link--td, none);
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        a.small span {
+          margin: 0.3rem 0;
+          width: 0;
+          visibility: hidden;
+        }
+
+        .help {
+          margin: 0 0.2rem;
+          opacity: 0.5;
+          font-size: var(--gv-theme-font-size-xs, 10px);
+        }
+
+        .help::before {
+          content: '(';
+        }
+
+        .help::after {
+          content: ')';
+        }
+
+        .skeleton {
+          min-width: 100px;
+          margin: 0 0.2rem;
+          opacity: 0.5;
+        }
+      `,
+      skeleton,
+    ];
   }
 
   async _onClick(e) {
@@ -100,14 +170,16 @@ export class GvLink extends LitElement {
       icon: this.icon,
       path: this.path,
       title: this._title,
-      target: this.target
+      target: this.target,
     });
   }
 
   set title(value) {
-    Promise.resolve(value).then(title => {
-      this._title = title;
-    }).catch(e => {});
+    Promise.resolve(value)
+      .then((title) => {
+        this._title = title;
+      })
+      .catch((e) => {});
   }
 
   render() {
@@ -115,18 +187,24 @@ export class GvLink extends LitElement {
       active: this.active,
       link: true,
       skeleton: this.skeleton,
-      small: this.small
-    };
-    const iconStyle = this.active ? {
-      '--gv-icon--c': 'var(--link-active--c)',
-      '--gv-icon-opacity--c': 'var(--link-active--c)'
-    } : {
-      '--gv-icon--c': 'var(--link--c)',
-      '--gv-icon-opacity--c': 'var(--link--c)'
+      small: this.small,
     };
-    return html` <a @click="${this._onClick}" class="${classMap(classes)}" .href="${ifDefined(this.path)}" .target="${ifDefined(this.target)}" ?title="${until(this._title, '')}"> ${this.icon ? html`<gv-icon shape="${this.icon}" style="${styleMap(iconStyle)}"></gv-icon>` : ''} <span>${until(this._title, '')}${this.help ? html`<span class="help">${until(this.help, '')}</span>` : ''}</span> </a> `;
+    const iconStyle = this.active
+      ? { '--gv-icon--c': 'var(--link-active--c)', '--gv-icon-opacity--c': 'var(--link-active--c)' }
+      : { '--gv-icon--c': 'var(--link--c)', '--gv-icon-opacity--c': 'var(--link--c)' };
+    return html`
+      <a
+        @click=${this._onClick}
+        class="${classMap(classes)}"
+        .href="${ifDefined(this.path)}"
+        .target="${ifDefined(this.target)}"
+        ?title="${until(this._title, '')}"
+      >
+        ${this.icon ? html`<gv-icon shape=${this.icon} style=${styleMap(iconStyle)}></gv-icon>` : ''}
+        <span>${until(this._title, '')}${this.help ? html`<span class="help">${until(this.help, '')}</span>` : ''}</span>
+      </a>
+    `;
   }
-
 }
+
 window.customElements.define('gv-link', GvLink);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4vbm9kZV9tb2R1bGVzL0BncmF2aXRlZS91aS1jb21wb25lbnRzL2F0b21zL2d2LWxpbmsuanMiXSwibmFtZXMiOlsiTGl0RWxlbWVudCIsImh0bWwiLCJjc3MiLCJza2VsZXRvbiIsImxpbmsiLCJjbGFzc01hcCIsInN0eWxlTWFwIiwidW50aWwiLCJkaXNwYXRjaEN1c3RvbUV2ZW50IiwiaWZEZWZpbmVkIiwiR3ZMaW5rIiwicHJvcGVydGllcyIsImFjdGl2ZSIsInR5cGUiLCJCb29sZWFuIiwicmVmbGVjdCIsImljb24iLCJTdHJpbmciLCJwYXRoIiwidGl0bGUiLCJ0YXJnZXQiLCJfdGl0bGUiLCJhdHRyaWJ1dGUiLCJoZWxwIiwic21hbGwiLCJzdHlsZXMiLCJfb25DbGljayIsImUiLCJwcmV2ZW50RGVmYXVsdCIsInZhbHVlIiwiUHJvbWlzZSIsInJlc29sdmUiLCJ0aGVuIiwiY2F0Y2giLCJyZW5kZXIiLCJjbGFzc2VzIiwiaWNvblN0eWxlIiwid2luZG93IiwiY3VzdG9tRWxlbWVudHMiLCJkZWZpbmUiXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLFNBQVNBLFVBQVQsRUFBcUJDLElBQXJCLEVBQTJCQyxHQUEzQixRQUFzQyxLQUF0QztBQUNBLFNBQVNDLFFBQVQsUUFBeUIsb0JBQXpCO0FBQ0EsU0FBU0MsSUFBVCxRQUFxQixnQkFBckI7QUFDQSxTQUFTQyxRQUFULFFBQXlCLDBCQUF6QjtBQUNBLFNBQVNDLFFBQVQsUUFBeUIsMEJBQXpCO0FBQ0EsU0FBU0MsS0FBVCxRQUFzQixzQkFBdEI7QUFDQSxTQUFTQyxtQkFBVCxRQUFvQyxlQUFwQztBQUNBLE9BQU8sV0FBUDtBQUNBLFNBQVNDLFNBQVQsUUFBMEIsMkJBQTFCO0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtB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QUFMLEdBQVlmLElBQUksbUJBQWtCLEtBQUtlLElBQXZCLFlBQXFDVixRQUFRLENBQUM4QixTQUFELENBQTdDLGNBQWhCLEdBQXdGLEVBUm5GLFVBU0M3QixLQUFLLENBQUMsS0FBS2MsTUFBTixFQUFjLEVBQWQsQ0FUTixHQVMwQixLQUFLRSxJQUFMLEdBQVl0QixJQUFJLHNCQUFzQk0sS0FBSyxDQUFDLEtBQUtnQixJQUFOLEVBQVksRUFBWixDQUEzQixTQUFoQixHQUFzRSxFQVRoRyxlQUFYO0FBWUQ7O0FBdkpvQztBQTBKdkNjLE1BQU0sQ0FBQ0MsY0FBUCxDQUFzQkMsTUFBdEIsQ0FBNkIsU0FBN0IsRUFBd0M3QixNQUF4QyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTUgVGhlIEdyYXZpdGVlIHRlYW0gKGh0dHA6Ly9ncmF2aXRlZS5pbylcbiAqXG4gKiBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG5pbXBvcnQgeyBMaXRFbGVtZW50LCBodG1sLCBjc3MgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgc2tlbGV0b24gfSBmcm9tICcuLi9zdHlsZXMvc2tlbGV0b24nO1xuaW1wb3J0IHsgbGluayB9IGZyb20gJy4uL3N0eWxlcy9saW5rJztcbmltcG9ydCB7IGNsYXNzTWFwIH0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvY2xhc3MtbWFwJztcbmltcG9ydCB7IHN0eWxlTWFwIH0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvc3R5bGUtbWFwJztcbmltcG9ydCB7IHVudGlsIH0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvdW50aWwnO1xuaW1wb3J0IHsgZGlzcGF0Y2hDdXN0b21FdmVudCB9IGZyb20gJy4uL2xpYi9ldmVudHMnO1xuaW1wb3J0ICcuL2d2LWljb24nO1xuaW1wb3J0IHsgaWZEZWZpbmVkIH0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvaWYtZGVmaW5lZCc7XG5cbi8qKlxuICogQSBsaW5rXG4gKlxuICogIyMgRGV0YWlsc1xuICogKiBoYXMgQHRoZW1lIGZhY2V0XG4gKlxuICogQGZpcmVzIGd2LWxpbms6Y2xpY2sgLSBDdXN0b20gY2xpY2sgZXZlbnQgZnJvbSBpbm5lciBsaW5rIGVsZW1lbnRcbiAqXG4gKiBAc2xvdCAtIFRoZSBjb250ZW50IG9mIHRoZSBsaW5rICh0ZXh0IG9yIEhUTUwpXG4gKlxuICogQGF0dHIge0Jvb2xlYW59IGFjdGl2ZSAtIHNldCBpZiBsaW5rIGlzIGFjdGl2ZVxuICogQGF0dHIge1N0cmluZ30gcGF0aCAtIGxpbmsgcGF0aFxuICogQGF0dHIge1N0cmluZ30gdGl0bGUgLSBsaW5rIHRpdGxlXG4gKiBAYXR0ciB7U3RyaW5nfSB0YXJnZXQgLSBsaW5rIHRhcmdldFxuICogQGF0dHIge1N0cmluZ30gaGVscCAtIGhlbHAgdGV4dCBsZWZ0IGJldHdlZW4gcGFyZW50aGVzZXNcbiAqXG4gKiBAY3NzcHJvcCB7TGVuZ3RofSBbLS1ndi1saW5rLWEtLXB2PTE1cHhdIC0gVmVydGljYWwgcGFkZGluZyBmb3IgdGhlIGlubmVyIDxhPiB0YWdcbiAqIEBjc3Nwcm9wIHtMZW5ndGh9IFstLWd2LWxpbmstYS0tcGg9MTVweF0gLSBIb3Jpem9udGFsIHBhZGRpbmcgZm9yIHRoZSBpbm5lciA8YT4gdGFnXG4gKiBAY3NzcHJvcCB7Q29sb3J9IFstLWd2LWxpbmstLWM9dmFyKC0tZ3YtdGhlbWUtZm9udC1jb2xvci1kYXJrLCAjMjYyNjI2KV0gLSBDb2xvclxuICogQGNzc3Byb3Age0NvbG9yfSBbLS1ndi1saW5rLWFjdGl2ZS0tYz12YXIoLS1ndi10aGVtZS1mb250LWNvbG9yLWxpZ2h0LCAjZmZmZmZmKV0gLSBBY3RpdmUgY29sb3JcbiAqIEBjc3Nwcm9wIHtDb2xvcn0gWy0tZ3YtbGluay0tYmdjPXRyYW5zcGFyZW50XSAtIEJhY2tncm91bmQgY29sb3JcbiAqIEBjc3Nwcm9wIHtDb2xvcn0gWy0tZ3YtbGluay1hY3RpdmUtLWJnYz12YXIoLS1ndi10aGVtZS1jb2xvci1kYXJrLCAjMjg0NDRmKV0gLSBBY3RpdmUgYmFja2dyb3VuZCBjb2xvclxuICogQGNzc3Byb3Age0NvbG9yfSBbLS1ndi1saW5rLWFjdGl2ZS0tYmRjPW5vbmVdIC0gQWN0aXZlIGJvcmRlciBjb2xvclxuICogQGNzc3Byb3Age1N0cmluZ30gWy0tZ3YtbGluay1hY3RpdmUtLWJkcz1ub25lXSAtIEFjdGl2ZSBib3JkZXIgc3R5bGVcbiAqIEBjc3Nwcm9wIHtMZW5ndGh9IFstLWd2LWxpbmstYWN0aXZlLS1iZHc9bm9uZV0gLSBBY3RpdmUgYm9yZGVyIHdpZHRoXG4gKiBAY3NzcHJvcCB7U3RyaW5nfSBbLS1ndi1saW5rLS10YT1jZW50ZXJdIC0gVGV4dCBhbGlnblxuICogQGNzc3Byb3Age1N0cmluZ30gWy0tZ3YtbGluay0tdGQ9bm9uZV0gLSBUZXh0IGRlY29yYXRpb25cbiAqIEBjc3Nwcm9wIHtTdHJpbmd9IFstLWd2LWxpbmstLXRzaD1ub25lXS0gVGV4dCBzaGFkb3dcbiAqIEBjc3Nwcm9wIHtMZW5ndGh9IFstLWd2LWxpbmstaWNvbi0tcz0yNHB4XSAtIEhlaWdodCBhbmQgaWNvbiB3aWR0aFxuICovXG5leHBvcnQgY2xhc3MgR3ZMaW5rIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHN0YXRpYyBnZXQgcHJvcGVydGllcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgYWN0aXZlOiB7IHR5cGU6IEJvb2xlYW4sIHJlZmxlY3Q6IHRydWUgfSxcbiAgICAgIGljb246IHsgdHlwZTogU3RyaW5nIH0sXG4gICAgICBwYXRoOiB7IHR5cGU6IFN0cmluZyB9LFxuICAgICAgdGl0bGU6IHsgdHlwZTogU3RyaW5nIH0sXG4gICAgICB0YXJnZXQ6IHsgdHlwZTogU3RyaW5nIH0sXG4gICAgICBfdGl0bGU6IHsgdHlwZTogU3RyaW5nLCBhdHRyaWJ1dGU6IGZhbHNlIH0sXG4gICAgICBoZWxwOiB7IHR5cGU6IFN0cmluZyB9LFxuICAgICAgc2tlbGV0b246IHsgdHlwZTogQm9vbGVhbiB9LFxuICAgICAgc21hbGw6IHsgdHlwZTogQm9vbGVhbiB9LFxuICAgIH07XG4gIH1cblxuICBzdGF0aWMgZ2V0IHN0eWxlcygpIHtcbiAgICByZXR1cm4gW1xuICAgICAgbGluayxcbiAgICAgIC8vIGxhbmd1YWdlPWNzc1xuICAgICAgY3NzYFxuICAgICAgICA6aG9zdCB7XG4gICAgICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgICAgICAtLWd2LWljb24tLXM6IHZhcigtLWd2LWxpbmstaWNvbi0tcywgMjRweCk7XG4gICAgICAgICAgLS1saW5rLWFjdGl2ZS0tYzogdmFyKC0tZ3YtbGluay1hY3RpdmUtLWMsIHZhcigtLWd2LXRoZW1lLWZvbnQtY29sb3ItbGlnaHQsICNmZmZmZmYpKTtcbiAgICAgICAgICAtLWxpbmstLWM6IHZhcigtLWd2LWxpbmstLWMsIHZhcigtLWd2LXRoZW1lLWZvbnQtY29sb3ItZGFyaywgIzI2MjYyNikpO1xuICAgICAgICAgIC0tcHY6IHZhcigtLWd2LWxpbmstYS0tcHYsIDE1cHgpO1xuICAgICAgICAgIC0tcGg6IHZhcigtLWd2LWxpbmstYS0tcGgsIDE1cHgpO1xuICAgICAgICB9XG5cbiAgICAgICAgKixcbiAgICAgICAgKjpiZWZvcmUsXG4gICAgICAgICo6YWZ0ZXIge1xuICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIH1cblxuICAgICAgICBhIHtcbiAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICAgIHBhZGRpbmc6IHZhcigtLXB2KSB2YXIoLS1waCk7XG4gICAgICAgICAgY29sb3I6IHZhcigtLWxpbmstLWMpO1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWd2LWxpbmstLWJnYywgdHJhbnNwYXJlbnQpO1xuICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgICAgICAgIGFsaWduLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgICAgICB0ZXh0LWFsaWduOiB2YXIoLS1ndi1saW5rLS10YSwgY2VudGVyKTtcbiAgICAgICAgICB0ZXh0LXNoYWRvdzogdmFyKC0tZ3YtbGluay0tdHNoLCBub25lKTtcbiAgICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLWd2LWxpbmstLWJnYywgdHJhbnNwYXJlbnQpO1xuICAgICAgICAgIGJvcmRlci1zdHlsZTogdmFyKC0tZ3YtbGluay1hY3RpdmUtLWJkcywgbm9uZSk7XG4gICAgICAgICAgYm9yZGVyLXdpZHRoOiB2YXIoLS1ndi1saW5rLWFjdGl2ZS0tYmR3LCBub25lKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGEgPiAqIHtcbiAgICAgICAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gICAgICAgIH1cblxuICAgICAgICAuYWN0aXZlIHtcbiAgICAgICAgICBjb2xvcjogdmFyKC0tbGluay1hY3RpdmUtLWMpO1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWd2LWxpbmstYWN0aXZlLS1iZ2MsIHZhcigtLWd2LXRoZW1lLWNvbG9yLWRhcmssICMyODQ0NGYpKTtcbiAgICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLWd2LWxpbmstYWN0aXZlLS1iZGMsIG5vbmUpO1xuICAgICAgICB9XG5cbiAgICAgICAgLmxpbmsuYWN0aXZlOmhvdmVyIHtcbiAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICB9XG5cbiAgICAgICAgYSBzcGFuLFxuICAgICAgICBhIGd2LWljb24ge1xuICAgICAgICAgIGFsaWduLXNlbGY6IGNlbnRlcjtcbiAgICAgICAgfVxuXG4gICAgICAgIGEgc3BhbiB7XG4gICAgICAgICAgZmxleDogMTtcbiAgICAgICAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgICAgICBtYXJnaW46IDAuM3JlbSAwLjVyZW07XG4gICAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiB2YXIoLS1ndi1saW5rLS10ZCwgbm9uZSk7XG4gICAgICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgfVxuXG4gICAgICAgIGEuc21hbGwgc3BhbiB7XG4gICAgICAgICAgbWFyZ2luOiAwLjNyZW0gMDtcbiAgICAgICAgICB3aWR0aDogMDtcbiAgICAgICAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gICAgICAgIH1cblxuICAgICAgICAuaGVscCB7XG4gICAgICAgICAgbWFyZ2luOiAwIDAuMnJlbTtcbiAgICAgICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICAgICAgZm9udC1zaXplOiB2YXIoLS1ndi10aGVtZS1mb250LXNpemUteHMsIDEwcHgpO1xuICAgICAgICB9XG5cbiAgICAgICAgLmhlbHA6OmJlZm9yZSB7XG4gICAgICAgICAgY29udGVudDogJygnO1xuICAgICAgICB9XG5cbiAgICAgICAgLmhlbHA6OmFmdGVyIHtcbiAgICAgICAgICBjb250ZW50OiAnKSc7XG4gICAgICAgIH1cblxuICAgICAgICAuc2tlbGV0b24ge1xuICAgICAgICAgIG1pbi13aWR0aDogMTAwcHg7XG4gICAgICAgICAgbWFyZ2luOiAwIDAuMnJlbTtcbiAgICAgICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICAgIH1cbiAgICAgIGAsXG4gICAgICBza2VsZXRvbixcbiAgICBdO1xuICB9XG5cbiAgYXN5bmMgX29uQ2xpY2soZSkge1xuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICBkaXNwYXRjaEN1c3RvbUV2ZW50KHRoaXMsICdjbGljaycsIHtcbiAgICAgIGFjdGl2ZTogdGhpcy5hY3RpdmUsXG4gICAgICBpY29uOiB0aGlzLmljb24sXG4gICAgICBwYXRoOiB0aGlzLnBhdGgsXG4gICAgICB0aXRsZTogdGhpcy5fdGl0bGUsXG4gICAgICB0YXJnZXQ6IHRoaXMudGFyZ2V0LFxuICAgIH0pO1xuICB9XG5cbiAgc2V0IHRpdGxlKHZhbHVlKSB7XG4gICAgUHJvbWlzZS5yZXNvbHZlKHZhbHVlKVxuICAgICAgLnRoZW4oKHRpdGxlKSA9PiB7XG4gICAgICAgIHRoaXMuX3RpdGxlID0gdGl0bGU7XG4gICAgICB9KVxuICAgICAgLmNhdGNoKChlKSA9PiB7fSk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgY2xhc3NlcyA9IHtcbiAgICAgIGFjdGl2ZTogdGhpcy5hY3RpdmUsXG4gICAgICBsaW5rOiB0cnVlLFxuICAgICAgc2tlbGV0b246IHRoaXMuc2tlbGV0b24sXG4gICAgICBzbWFsbDogdGhpcy5zbWFsbCxcbiAgICB9O1xuICAgIGNvbnN0IGljb25TdHlsZSA9IHRoaXMuYWN0aXZlXG4gICAgICA/IHsgJy0tZ3YtaWNvbi0tYyc6ICd2YXIoLS1saW5rLWFjdGl2ZS0tYyknLCAnLS1ndi1pY29uLW9wYWNpdHktLWMnOiAndmFyKC0tbGluay1hY3RpdmUtLWMpJyB9XG4gICAgICA6IHsgJy0tZ3YtaWNvbi0tYyc6ICd2YXIoLS1saW5rLS1jKScsICctLWd2LWljb24tb3BhY2l0eS0tYyc6ICd2YXIoLS1saW5rLS1jKScgfTtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxhXG4gICAgICAgIEBjbGljaz0ke3RoaXMuX29uQ2xpY2t9XG4gICAgICAgIGNsYXNzPVwiJHtjbGFzc01hcChjbGFzc2VzKX1cIlxuICAgICAgICAuaHJlZj1cIiR7aWZEZWZpbmVkKHRoaXMucGF0aCl9XCJcbiAgICAgICAgLnRhcmdldD1cIiR7aWZEZWZpbmVkKHRoaXMudGFyZ2V0KX1cIlxuICAgICAgICA/dGl0bGU9XCIke3VudGlsKHRoaXMuX3RpdGxlLCAnJyl9XCJcbiAgICAgID5cbiAgICAgICAgJHt0aGlzLmljb24gPyBodG1sYDxndi1pY29uIHNoYXBlPSR7dGhpcy5pY29ufSBzdHlsZT0ke3N0eWxlTWFwKGljb25TdHlsZSl9PjwvZ3YtaWNvbj5gIDogJyd9XG4gICAgICAgIDxzcGFuPiR7dW50aWwodGhpcy5fdGl0bGUsICcnKX0ke3RoaXMuaGVscCA/IGh0bWxgPHNwYW4gY2xhc3M9XCJoZWxwXCI+JHt1bnRpbCh0aGlzLmhlbHAsICcnKX08L3NwYW4+YCA6ICcnfTwvc3Bhbj5cbiAgICAgIDwvYT5cbiAgICBgO1xuICB9XG59XG5cbndpbmRvdy5jdXN0b21FbGVtZW50cy5kZWZpbmUoJ2d2LWxpbmsnLCBHdkxpbmspO1xuIl19

package/src/atoms/gv-message.js

@@ -17,6 +17,7 @@ import { classMap } from 'lit/directives/class-map';
 import { LitElement, html, css } from 'lit';
 import { dispatchCustomEvent } from '../lib/events';
 import '../atoms/gv-icon';
+
 /**
  * Message component
  *
@@ -30,26 +31,70 @@ import '../atoms/gv-icon';
  * @attr {String} type - type of the message. Can be default, success, error, warning or info.
  * @attr {boolean} closable - determines if the message can be hidden.
  */
-
 export class GvMessage extends LitElement {
   static get properties() {
     return {
-      type: {
-        type: String
-      },
-      closable: {
-        type: Boolean
-      },
-      _close: {
-        type: Boolean,
-        attribute: false
-      }
+      type: { type: String },
+      closable: { type: Boolean },
+      _close: { type: Boolean, attribute: false },
     };
   }
 
   static get styles() {
-    return [// language=CSS
-    css`:host{display:block;vertical-align:middle}.box{display:flex;align-items:center;font-style:normal;font-weight:400;line-height:normal;padding:12px 0;text-align:center;width:100%}.info{background-color:var(--gv-theme-color-info-light,#64b5f6)}.success{background-color:var(--gv-theme-color-success-light,#81c784)}.warning{background-color:var(--gv-theme-color-warning-light,#ffb74d)}.error{background-color:var(--gv-theme-color-error-light,#e57373)}.close{transition:opacity 250ms ease-in-out;opacity:0}gv-icon{--gv-icon--s:24px;margin-right:12px}gv-icon:hover{cursor:pointer}.content{flex:1 1 auto;margin-left:12px}`];
+    return [
+      // language=CSS
+      css`
+        :host {
+          display: block;
+          vertical-align: middle;
+        }
+
+        .box {
+          display: flex;
+          align-items: center;
+          font-style: normal;
+          font-weight: normal;
+          line-height: normal;
+          padding: 12px 0px;
+          text-align: center;
+          width: 100%;
+        }
+
+        .info {
+          background-color: var(--gv-theme-color-info-light, #64b5f6);
+        }
+
+        .success {
+          background-color: var(--gv-theme-color-success-light, #81c784);
+        }
+
+        .warning {
+          background-color: var(--gv-theme-color-warning-light, #ffb74d);
+        }
+
+        .error {
+          background-color: var(--gv-theme-color-error-light, #e57373);
+        }
+
+        .close {
+          transition: opacity 250ms ease-in-out;
+          opacity: 0;
+        }
+
+        gv-icon {
+          --gv-icon--s: 24px;
+          margin-right: 12px;
+        }
+
+        gv-icon:hover {
+          cursor: pointer;
+        }
+        .content {
+          flex: 1 1 auto;
+          margin-left: 12px;
+        }
+      `,
+    ];
   }
 
   _onClick() {
@@ -62,16 +107,22 @@ export class GvMessage extends LitElement {
   render() {
     const modes = {
       box: true,
-      simple: !this.type || this.type !== 'info' && this.type !== 'success' && this.type !== 'error' && this.type !== 'warning',
+      simple: !this.type || (this.type !== 'info' && this.type !== 'success' && this.type !== 'error' && this.type !== 'warning'),
       info: this.type === 'info',
       warning: this.type === 'warning',
       success: this.type === 'success',
       error: this.type === 'error',
-      close: this._close
+      close: this._close,
     };
-    return html` <div class="${classMap(modes)}"> <div class="content"> <slot></slot> </div> ${this.closable ? html`<gv-icon shape="general:close" @click="${this._onClick}"></gv-icon>` : ''} </div> `;
+    return html`
+      <div class=${classMap(modes)}>
+        <div class="content">
+          <slot></slot>
+        </div>
+        ${this.closable ? html`<gv-icon shape="general:close" @click="${this._onClick}"></gv-icon>` : ''}
+      </div>
+    `;
   }
-
 }
+
 window.customElements.define('gv-message', GvMessage);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4vbm9kZV9tb2R1bGVzL0BncmF2aXRlZS91aS1jb21wb25lbnRzL2F0b21zL2d2LW1lc3NhZ2UuanMiXSwibmFtZXMiOlsiY2xhc3NNYXAiLCJMaXRFbGVtZW50IiwiaHRtbCIsImNzcyIsImRpc3BhdGNoQ3VzdG9tRXZlbnQiLCJHdk1lc3NhZ2UiLCJwcm9wZXJ0aWVzIiwidHlwZSIsIlN0cmluZyIsImNsb3NhYmxlIiwiQm9vbGVhbiIsIl9jbG9zZSIsImF0dHJpYnV0ZSIsInN0eWxlcyIsIl9vbkNsaWNrIiwic2V0VGltZW91dCIsInJlbmRlciIsIm1vZGVzIiwiYm94Iiwic2ltcGxlIiwiaW5mbyIsIndhcm5pbmciLCJzdWNjZXNzIiwiZXJyb3IiLCJjbG9zZSIsIndpbmRvdyIsImN1c3RvbUVsZW1lbnRzIiwiZGVmaW5lIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxTQUFTQSxRQUFULFFBQXlCLDBCQUF6QjtBQUNBLFNBQVNDLFVBQVQsRUFBcUJDLElBQXJCLEVBQTJCQyxHQUEzQixRQUFzQyxLQUF0QztBQUNBLFNBQVNDLG1CQUFULFFBQW9DLGVBQXBDO0FBQ0EsT0FBTyxrQkFBUDtBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUNBLE9BQU8sTUFBTUMsU0FBTixTQUF3QkosVUFBeEIsQ0FBbUM7QUFDbkIsYUFBVkssVUFBVSxHQUFHO0FBQ3RCLFdBQU87QUFDTEMsTUFBQUEsSUFBSSxFQUFFO0FBQUVBLFFBQUFBLElBQUksRUFBRUM7QUFBUixPQUREO0FBRUxDLE1BQUFBLFFBQVEsRUFBRTtBQUFFRixRQUFBQSxJQUFJLEVBQUVHO0FBQVIsT0FGTDtBQUdMQyxNQUFBQSxNQUFNLEVBQUU7QUFBRUosUUFBQUEsSUFBSSxFQUFFRyxPQUFSO0FBQWlCRSxRQUFBQSxTQUFTLEVBQUU7QUFBNUI7QUFISCxLQUFQO0FBS0Q7O0FBRWdCLGFBQU5DLE1BQU0sR0FBRztBQUNsQixXQUFPLENBQ0w7QUFDQVYsSUFBQUEsR0FBRyx1bUJBRkUsQ0FBUDtBQXNERDs7QUFFRFcsRUFBQUEsUUFBUSxHQUFHO0FBQ1QsU0FBS0gsTUFBTCxHQUFjLElBQWQ7QUFDQUksSUFBQUEsVUFBVSxDQUFDLE1BQU07QUFDZlgsTUFBQUEsbUJBQW1CLENBQUMsSUFBRCxFQUFPLE9BQVAsQ0FBbkI7QUFDRCxLQUZTLEVBRVAsR0FGTyxDQUFWO0FBR0Q7O0FBRURZLEVBQUFBLE1BQU0sR0FBRztBQUNQLFVBQU1DLEtBQUssR0FBRztBQUNaQyxNQUFBQSxHQUFHLEVBQUUsSUFETztBQUVaQyxNQUFBQSxNQUFNLEVBQUUsQ0FBQyxLQUFLWixJQUFOLElBQWUsS0FBS0EsSUFBTCxLQUFjLE1BQWQsSUFBd0IsS0FBS0EsSUFBTCxLQUFjLFNBQXRDLElBQW1ELEtBQUtBLElBQUwsS0FBYyxPQUFqRSxJQUE0RSxLQUFLQSxJQUFMLEtBQWMsU0FGckc7QUFHWmEsTUFBQUEsSUFBSSxFQUFFLEtBQUtiLElBQUwsS0FBYyxNQUhSO0FBSVpjLE1BQUFBLE9BQU8sRUFBRSxLQUFLZCxJQUFMLEtBQWMsU0FKWDtBQUtaZSxNQUFBQSxPQUFPLEVBQUUsS0FBS2YsSUFBTCxLQUFjLFNBTFg7QUFNWmdCLE1BQUFBLEtBQUssRUFBRSxLQUFLaEIsSUFBTCxLQUFjLE9BTlQ7QUFPWmlCLE1BQUFBLEtBQUssRUFBRSxLQUFLYjtBQVBBLEtBQWQ7QUFTQSxXQUFPVCxJQUFJLGdCQUNJRixRQUFRLENBQUNpQixLQUFELENBRFosaURBS0wsS0FBS1IsUUFBTCxHQUFnQlAsSUFBSSwwQ0FBMEMsS0FBS1ksUUFBL0MsY0FBcEIsR0FBNEYsRUFMdkYsVUFBWDtBQVFEOztBQTNGdUM7QUE4RjFDVyxNQUFNLENBQUNDLGNBQVAsQ0FBc0JDLE1BQXRCLENBQTZCLFlBQTdCLEVBQTJDdEIsU0FBM0MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChDKSAyMDE1IFRoZSBHcmF2aXRlZSB0ZWFtIChodHRwOi8vZ3Jhdml0ZWUuaW8pXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuaW1wb3J0IHsgY2xhc3NNYXAgfSBmcm9tICdsaXQvZGlyZWN0aXZlcy9jbGFzcy1tYXAnO1xuaW1wb3J0IHsgTGl0RWxlbWVudCwgaHRtbCwgY3NzIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGRpc3BhdGNoQ3VzdG9tRXZlbnQgfSBmcm9tICcuLi9saWIvZXZlbnRzJztcbmltcG9ydCAnLi4vYXRvbXMvZ3YtaWNvbic7XG5cbi8qKlxuICogTWVzc2FnZSBjb21wb25lbnRcbiAqXG4gKiAjIyBEZXRhaWxzXG4gKiAqIGhhcyBAdGhlbWUgZmFjZXRcbiAqXG4gKiBAZmlyZXMgZ3YtbWVzc2FnZTpjbG9zZSAtIENsaWNrIGV2ZW50IGZyb20gaW5uZXIgYnV0dG9uIGVsZW1lbnRcbiAqXG4gKiBAc2xvdCAtIFRoZSBjb250ZW50IG9mIHRoZSBidXR0b24gKHRleHQgb3IgSFRNTClcbiAqXG4gKiBAYXR0ciB7U3RyaW5nfSB0eXBlIC0gdHlwZSBvZiB0aGUgbWVzc2FnZS4gQ2FuIGJlIGRlZmF1bHQsIHN1Y2Nlc3MsIGVycm9yLCB3YXJuaW5nIG9yIGluZm8uXG4gKiBAYXR0ciB7Ym9vbGVhbn0gY2xvc2FibGUgLSBkZXRlcm1pbmVzIGlmIHRoZSBtZXNzYWdlIGNhbiBiZSBoaWRkZW4uXG4gKi9cbmV4cG9ydCBjbGFzcyBHdk1lc3NhZ2UgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIGdldCBwcm9wZXJ0aWVzKCkge1xuICAgIHJldHVybiB7XG4gICAgICB0eXBlOiB7IHR5cGU6IFN0cmluZyB9LFxuICAgICAgY2xvc2FibGU6IHsgdHlwZTogQm9vbGVhbiB9LFxuICAgICAgX2Nsb3NlOiB7IHR5cGU6IEJvb2xlYW4sIGF0dHJpYnV0ZTogZmFsc2UgfSxcbiAgICB9O1xuICB9XG5cbiAgc3RhdGljIGdldCBzdHlsZXMoKSB7XG4gICAgcmV0dXJuIFtcbiAgICAgIC8vIGxhbmd1YWdlPUNTU1xuICAgICAgY3NzYFxuICAgICAgICA6aG9zdCB7XG4gICAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgICAgfVxuXG4gICAgICAgIC5ib3gge1xuICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgICAgICAgZm9udC13ZWlnaHQ6IG5vcm1hbDtcbiAgICAgICAgICBsaW5lLWhlaWdodDogbm9ybWFsO1xuICAgICAgICAgIHBhZGRpbmc6IDEycHggMHB4O1xuICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgfVxuXG4gICAgICAgIC5pbmZvIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1ndi10aGVtZS1jb2xvci1pbmZvLWxpZ2h0LCAjNjRiNWY2KTtcbiAgICAgICAgfVxuXG4gICAgICAgIC5zdWNjZXNzIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1ndi10aGVtZS1jb2xvci1zdWNjZXNzLWxpZ2h0LCAjODFjNzg0KTtcbiAgICAgICAgfVxuXG4gICAgICAgIC53YXJuaW5nIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1ndi10aGVtZS1jb2xvci13YXJuaW5nLWxpZ2h0LCAjZmZiNzRkKTtcbiAgICAgICAgfVxuXG4gICAgICAgIC5lcnJvciB7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZ3YtdGhlbWUtY29sb3ItZXJyb3ItbGlnaHQsICNlNTczNzMpO1xuICAgICAgICB9XG5cbiAgICAgICAgLmNsb3NlIHtcbiAgICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDI1MG1zIGVhc2UtaW4tb3V0O1xuICAgICAgICAgIG9wYWNpdHk6IDA7XG4gICAgICAgIH1cblxuICAgICAgICBndi1pY29uIHtcbiAgICAgICAgICAtLWd2LWljb24tLXM6IDI0cHg7XG4gICAgICAgICAgbWFyZ2luLXJpZ2h0OiAxMnB4O1xuICAgICAgICB9XG5cbiAgICAgICAgZ3YtaWNvbjpob3ZlciB7XG4gICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICB9XG4gICAgICAgIC5jb250ZW50IHtcbiAgICAgICAgICBmbGV4OiAxIDEgYXV0bztcbiAgICAgICAgICBtYXJnaW4tbGVmdDogMTJweDtcbiAgICAgICAgfVxuICAgICAgYCxcbiAgICBdO1xuICB9XG5cbiAgX29uQ2xpY2soKSB7XG4gICAgdGhpcy5fY2xvc2UgPSB0cnVlO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgZGlzcGF0Y2hDdXN0b21FdmVudCh0aGlzLCAnY2xvc2UnKTtcbiAgICB9LCAyNTApO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IG1vZGVzID0ge1xuICAgICAgYm94OiB0cnVlLFxuICAgICAgc2ltcGxlOiAhdGhpcy50eXBlIHx8ICh0aGlzLnR5cGUgIT09ICdpbmZvJyAmJiB0aGlzLnR5cGUgIT09ICdzdWNjZXNzJyAmJiB0aGlzLnR5cGUgIT09ICdlcnJvcicgJiYgdGhpcy50eXBlICE9PSAnd2FybmluZycpLFxuICAgICAgaW5mbzogdGhpcy50eXBlID09PSAnaW5mbycsXG4gICAgICB3YXJuaW5nOiB0aGlzLnR5cGUgPT09ICd3YXJuaW5nJyxcbiAgICAgIHN1Y2Nlc3M6IHRoaXMudHlwZSA9PT0gJ3N1Y2Nlc3MnLFxuICAgICAgZXJyb3I6IHRoaXMudHlwZSA9PT0gJ2Vycm9yJyxcbiAgICAgIGNsb3NlOiB0aGlzLl9jbG9zZSxcbiAgICB9O1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz0ke2NsYXNzTWFwKG1vZGVzKX0+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgJHt0aGlzLmNsb3NhYmxlID8gaHRtbGA8Z3YtaWNvbiBzaGFwZT1cImdlbmVyYWw6Y2xvc2VcIiBAY2xpY2s9XCIke3RoaXMuX29uQ2xpY2t9XCI+PC9ndi1pY29uPmAgOiAnJ31cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cbn1cblxud2luZG93LmN1c3RvbUVsZW1lbnRzLmRlZmluZSgnZ3YtbWVzc2FnZScsIEd2TWVzc2FnZSk7XG4iXX0=

package/src/atoms/gv-metric.js

@@ -17,6 +17,7 @@ import { classMap } from 'lit/directives/class-map';
 import { LitElement, html, css } from 'lit';
 import { skeleton } from '../styles/skeleton';
 import './gv-icon';
+
 /**
  * A Metric
  *
@@ -31,38 +32,86 @@ import './gv-icon';
  * @cssprop {Color} [--gv-metric--c=var(--gv-theme-color, #5a7684)] - Color
  * @cssprop {Length} [--gv-metric-icon--s=24px] - Height and icon width
  */
-
 export class GvMetric extends LitElement {
   static get properties() {
     return {
-      icon: {
-        type: String
-      },
-      name: {
-        type: String
-      },
-      value: {
-        type: String
-      },
-      skeleton: {
-        type: Boolean
-      }
+      icon: { type: String },
+      name: { type: String },
+      value: { type: String },
+      skeleton: { type: Boolean },
     };
   }
 
   static get styles() {
-    return [// language=CSS
-    css`:host{box-sizing:border-box}.metric{--gv-icon--s:var(--gv-metric-icon--s, 24px);--gv-icon--c:var(--gv-metric--c, var(--gv-theme-color, #5a7684));min-width:75px;height:100%;width:100%;display:flex;flex-direction:row}.icon{align-self:center;margin-right:4px}div{display:block}.metric-data{display:flex;flex-direction:column;justify-content:flex-end}.metric-value{font-size:var(--gv-theme-font-size-m,14px);line-height:var(--gv-theme-font-size-m,14px)}.metric-name{font-size:var(--gv-theme-font-size-xs,10px);line-height:var(--gv-theme-font-size-xs,10px);opacity:.5}`, skeleton];
+    return [
+      // language=CSS
+      css`
+        :host {
+          box-sizing: border-box;
+        }
+
+        .metric {
+          --gv-icon--s: var(--gv-metric-icon--s, 24px);
+          --gv-icon--c: var(--gv-metric--c, var(--gv-theme-color, #5a7684));
+          min-width: 75px;
+          height: 100%;
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+        }
+
+        .icon {
+          align-self: center;
+          margin-right: 4px;
+        }
+
+        div {
+          display: block;
+        }
+
+        .metric-data {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+
+        .metric-value {
+          font-size: var(--gv-theme-font-size-m, 14px);
+          line-height: var(--gv-theme-font-size-m, 14px);
+        }
+
+        .metric-name {
+          font-size: var(--gv-theme-font-size-xs, 10px);
+          line-height: var(--gv-theme-font-size-xs, 10px);
+          opacity: 0.5;
+        }
+      `,
+      skeleton,
+    ];
   }
 
   render() {
     const modes = {
       skeleton: this.skeleton,
-      metric: true
+      metric: true,
     };
-    return html` <div class="${classMap(modes)}"> ${this.value ? html` <div class="icon"> <gv-icon shape="${this.icon}"></gv-icon> </div> <div class="metric-data"> <div class="metric-value">${this.value}</div> <div class="metric-name">${this.name}</div> </div> ` : ''} </div> `;
-  }
 
+    return html`
+      <div class=${classMap(modes)}>
+        ${this.value
+          ? html`
+              <div class="icon">
+                <gv-icon shape="${this.icon}"></gv-icon>
+              </div>
+              <div class="metric-data">
+                <div class="metric-value">${this.value}</div>
+                <div class="metric-name">${this.name}</div>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
 }
+
 window.customElements.define('gv-metric', GvMetric);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4vbm9kZV9tb2R1bGVzL0BncmF2aXRlZS91aS1jb21wb25lbnRzL2F0b21zL2d2LW1ldHJpYy5qcyJdLCJuYW1lcyI6WyJjbGFzc01hcCIsIkxpdEVsZW1lbnQiLCJodG1sIiwiY3NzIiwic2tlbGV0b24iLCJHdk1ldHJpYyIsInByb3BlcnRpZXMiLCJpY29uIiwidHlwZSIsIlN0cmluZyIsIm5hbWUiLCJ2YWx1ZSIsIkJvb2xlYW4iLCJzdHlsZXMiLCJyZW5kZXIiLCJtb2RlcyIsIm1ldHJpYyIsIndpbmRvdyIsImN1c3RvbUVsZW1lbnRzIiwiZGVmaW5lIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxTQUFTQSxRQUFULFFBQXlCLDBCQUF6QjtBQUNBLFNBQVNDLFVBQVQsRUFBcUJDLElBQXJCLEVBQTJCQyxHQUEzQixRQUFzQyxLQUF0QztBQUNBLFNBQVNDLFFBQVQsUUFBeUIsb0JBQXpCO0FBQ0EsT0FBTyxXQUFQO0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFDQSxPQUFPLE1BQU1DLFFBQU4sU0FBdUJKLFVBQXZCLENBQWtDO0FBQ2xCLGFBQVZLLFVBQVUsR0FBRztBQUN0QixXQUFPO0FBQ0xDLE1BQUFBLElBQUksRUFBRTtBQUFFQyxRQUFBQSxJQUFJLEVBQUVDO0FBQVIsT0FERDtBQUVMQyxNQUFBQSxJQUFJLEVBQUU7QUFBRUYsUUFBQUEsSUFBSSxFQUFFQztBQUFSLE9BRkQ7QUFHTEUsTUFBQUEsS0FBSyxFQUFFO0FBQUVILFFBQUFBLElBQUksRUFBRUM7QUFBUixPQUhGO0FBSUxMLE1BQUFBLFFBQVEsRUFBRTtBQUFFSSxRQUFBQSxJQUFJLEVBQUVJO0FBQVI7QUFKTCxLQUFQO0FBTUQ7O0FBRWdCLGFBQU5DLE1BQU0sR0FBRztBQUNsQixXQUFPLENBQ0w7QUFDQVYsSUFBQUEsR0FBRyxxakJBRkUsRUEyQ0xDLFFBM0NLLENBQVA7QUE2Q0Q7O0FBRURVLEVBQUFBLE1BQU0sR0FBRztBQUNQLFVBQU1DLEtBQUssR0FBRztBQUNaWCxNQUFBQSxRQUFRLEVBQUUsS0FBS0EsUUFESDtBQUVaWSxNQUFBQSxNQUFNLEVBQUU7QUFGSSxLQUFkO0FBS0EsV0FBT2QsSUFBSSxnQkFDSUYsUUFBUSxDQUFDZSxLQUFELENBRFosTUFFTCxLQUFLSixLQUFMLEdBQ0VULElBQUksdUNBRWtCLEtBQUtLLElBRnZCLDJFQUs0QixLQUFLSSxLQUxqQyxtQ0FNMkIsS0FBS0QsSUFOaEMsZ0JBRE4sR0FVRSxFQVpHLFVBQVg7QUFlRDs7QUEvRXNDO0FBa0Z6Q08sTUFBTSxDQUFDQyxjQUFQLENBQXNCQyxNQUF0QixDQUE2QixXQUE3QixFQUEwQ2QsUUFBMUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChDKSAyMDE1IFRoZSBHcmF2aXRlZSB0ZWFtIChodHRwOi8vZ3Jhdml0ZWUuaW8pXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuaW1wb3J0IHsgY2xhc3NNYXAgfSBmcm9tICdsaXQvZGlyZWN0aXZlcy9jbGFzcy1tYXAnO1xuaW1wb3J0IHsgTGl0RWxlbWVudCwgaHRtbCwgY3NzIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IHNrZWxldG9uIH0gZnJvbSAnLi4vc3R5bGVzL3NrZWxldG9uJztcbmltcG9ydCAnLi9ndi1pY29uJztcblxuLyoqXG4gKiBBIE1ldHJpY1xuICpcbiAqICMjIERldGFpbHNcbiAqICogaGFzIEB0aGVtZSBmYWNldFxuICpcbiAqIEBhdHRyIHtTdHJpbmd9IGljb24gLSBuYW1lIG9mIHNoYXBlXG4gKiBAYXR0ciB7U3RyaW5nfSBuYW1lIC0gdGhlIG5hbWUgb2YgdGhlIG1ldHJpY1xuICogQGF0dHIge1N0cmluZ30gdmFsdWUgLSB0aGUgdmFsdWUgb2YgdGhlIG1ldHJpY1xuICogQGF0dHIge0Jvb2xlYW59IHNrZWxldG9uIC0gZW5hYmxlIHNrZWxldG9uIHNjcmVlbiBVSSBwYXR0ZXJuIChsb2FkaW5nIGhpbnQpXG4gKlxuICogQGNzc3Byb3Age0NvbG9yfSBbLS1ndi1tZXRyaWMtLWM9dmFyKC0tZ3YtdGhlbWUtY29sb3IsICM1YTc2ODQpXSAtIENvbG9yXG4gKiBAY3NzcHJvcCB7TGVuZ3RofSBbLS1ndi1tZXRyaWMtaWNvbi0tcz0yNHB4XSAtIEhlaWdodCBhbmQgaWNvbiB3aWR0aFxuICovXG5leHBvcnQgY2xhc3MgR3ZNZXRyaWMgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIGdldCBwcm9wZXJ0aWVzKCkge1xuICAgIHJldHVybiB7XG4gICAgICBpY29uOiB7IHR5cGU6IFN0cmluZyB9LFxuICAgICAgbmFtZTogeyB0eXBlOiBTdHJpbmcgfSxcbiAgICAgIHZhbHVlOiB7IHR5cGU6IFN0cmluZyB9LFxuICAgICAgc2tlbGV0b246IHsgdHlwZTogQm9vbGVhbiB9LFxuICAgIH07XG4gIH1cblxuICBzdGF0aWMgZ2V0IHN0eWxlcygpIHtcbiAgICByZXR1cm4gW1xuICAgICAgLy8gbGFuZ3VhZ2U9Q1NTXG4gICAgICBjc3NgXG4gICAgICAgIDpob3N0IHtcbiAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICB9XG5cbiAgICAgICAgLm1ldHJpYyB7XG4gICAgICAgICAgLS1ndi1pY29uLS1zOiB2YXIoLS1ndi1tZXRyaWMtaWNvbi0tcywgMjRweCk7XG4gICAgICAgICAgLS1ndi1pY29uLS1jOiB2YXIoLS1ndi1tZXRyaWMtLWMsIHZhcigtLWd2LXRoZW1lLWNvbG9yLCAjNWE3Njg0KSk7XG4gICAgICAgICAgbWluLXdpZHRoOiA3NXB4O1xuICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgICAgIH1cblxuICAgICAgICAuaWNvbiB7XG4gICAgICAgICAgYWxpZ24tc2VsZjogY2VudGVyO1xuICAgICAgICAgIG1hcmdpbi1yaWdodDogNHB4O1xuICAgICAgICB9XG5cbiAgICAgICAgZGl2IHtcbiAgICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgfVxuXG4gICAgICAgIC5tZXRyaWMtZGF0YSB7XG4gICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgIH1cblxuICAgICAgICAubWV0cmljLXZhbHVlIHtcbiAgICAgICAgICBmb250LXNpemU6IHZhcigtLWd2LXRoZW1lLWZvbnQtc2l6ZS1tLCAxNHB4KTtcbiAgICAgICAgICBsaW5lLWhlaWdodDogdmFyKC0tZ3YtdGhlbWUtZm9udC1zaXplLW0sIDE0cHgpO1xuICAgICAgICB9XG5cbiAgICAgICAgLm1ldHJpYy1uYW1lIHtcbiAgICAgICAgICBmb250LXNpemU6IHZhcigtLWd2LXRoZW1lLWZvbnQtc2l6ZS14cywgMTBweCk7XG4gICAgICAgICAgbGluZS1oZWlnaHQ6IHZhcigtLWd2LXRoZW1lLWZvbnQtc2l6ZS14cywgMTBweCk7XG4gICAgICAgICAgb3BhY2l0eTogMC41O1xuICAgICAgICB9XG4gICAgICBgLFxuICAgICAgc2tlbGV0b24sXG4gICAgXTtcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICBjb25zdCBtb2RlcyA9IHtcbiAgICAgIHNrZWxldG9uOiB0aGlzLnNrZWxldG9uLFxuICAgICAgbWV0cmljOiB0cnVlLFxuICAgIH07XG5cbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9JHtjbGFzc01hcChtb2Rlcyl9PlxuICAgICAgICAke3RoaXMudmFsdWVcbiAgICAgICAgICA/IGh0bWxgXG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpY29uXCI+XG4gICAgICAgICAgICAgICAgPGd2LWljb24gc2hhcGU9XCIke3RoaXMuaWNvbn1cIj48L2d2LWljb24+XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibWV0cmljLWRhdGFcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibWV0cmljLXZhbHVlXCI+JHt0aGlzLnZhbHVlfTwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJtZXRyaWMtbmFtZVwiPiR7dGhpcy5uYW1lfTwvZGl2PlxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIGBcbiAgICAgICAgICA6ICcnfVxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG53aW5kb3cuY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdndi1tZXRyaWMnLCBHdk1ldHJpYyk7XG4iXX0=