@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-9a4271f

package/src/atoms/gv-file-upload.js

@@ -1,367 +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 { link } from '../styles/link';
-import { dispatchCustomEvent } from '../lib/events';
-import { ifDefined } from 'lit/directives/if-defined';
-import { i18n } from '../lib/i18n';
-import { classMap } from 'lit/directives/class-map';
-
-/**
- * File upload
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-file-upload:drop - Custom event when user drop file
- *
- * @attr {String} label - Label
- * @attr {String} accept - One or more file type identifiers describing the authorized file types.
- * @attr {String} except - One or more file type identifiers describing unauthorized file types.
- * @attr {Number} limit - Max size limit in bytes.
- * @attr {String} value - Reflected value of uploaded file
- **/
-export class GvFileUpload extends LitElement {
-  static get properties() {
-    return {
-      label: { type: String },
-      accept: { type: String },
-      except: { type: String },
-      limit: { type: Number },
-      value: { type: Array, reflect: true },
-      _preview: { type: String, attribute: false },
-      _files: { type: Array, attribute: false },
-      _errors: { type: Array, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      link,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: block;
-          width: 100%;
-          color: var(--gv-theme-color-dark, #28444f);
-        }
-
-        .box {
-          font-size: 1.25rem;
-          background-color: var(--gv-theme-neutral-color-lighter, #fafafa);
-          position: relative;
-          padding: 2rem;
-          text-align: center;
-          display: block;
-          border: 1px dashed #28444f;
-          border-radius: 4px;
-          transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
-          height: 100%;
-        }
-
-        .box .box__icon {
-          width: 100%;
-          height: 80px;
-          display: block;
-          margin-bottom: 40px;
-          --gv-icon--s: 5rem;
-          --gv-icon--c: var(--gv-theme-color-dark, #28444f);
-        }
-
-        .box__file {
-          width: 0.1px;
-          height: 0.1px;
-          opacity: 0;
-          overflow: hidden;
-          position: absolute;
-          z-index: -1;
-        }
-
-        .box__file + label {
-          max-width: 80%;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          cursor: pointer;
-          display: inline-block;
-          overflow: hidden;
-        }
-
-        .box.is-dragover {
-          background-color: var(--gv-theme-color-light, #28444f);
-          border: none;
-          outline: 1px dashed #28444f;
-          outline-offset: -10px;
-        }
-
-        .box .box__dragndrop {
-          display: inline;
-        }
-
-        .files {
-          box-sizing: border-box;
-          display: flex;
-          align-items: center;
-          --gv-icon--s: 16px;
-          padding: 1rem 0.5rem 0;
-        }
-
-        .filename {
-          flex: 1;
-          padding: 0.2rem;
-          word-break: break-all;
-        }
-
-        .error {
-          font-style: italic;
-          --gv-icon--c: red;
-        }
-
-        gv-image {
-          position: absolute;
-        }
-
-        .preview {
-          transition: all 300ms ease-in-out;
-        }
-
-        .box__input {
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          height: 100%;
-          z-index: 10;
-        }
-
-        .preview .box__input {
-          visibility: hidden;
-        }
-
-        .preview:hover .box__input {
-          visibility: visible;
-        }
-
-        .preview:hover gv-image {
-          opacity: 0.3;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.reader = new FileReader();
-    this._files = [];
-    this._errors = [];
-    this._counter = 0;
-  }
-
-  _onDragOver(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this._counter++;
-    const box = this.shadowRoot.querySelector('.box');
-    box.classList.add('is-dragover');
-  }
-
-  _onDragEnd(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (--this._counter === 0) {
-      const box = this.shadowRoot.querySelector('.box');
-      box.classList.remove('is-dragover');
-    }
-  }
-
-  _onDrop(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.setFiles(e.dataTransfer.files);
-  }
-
-  _getRegex(mimeTypes) {
-    return `(${mimeTypes.toString().replace(' ', '').replace(/,/g, '.+|').replace(/\*/g, '.+').replace('.+.+', '.+')})`;
-  }
-
-  setFiles(files) {
-    const errors = [];
-    this._files = [...files].filter((file) => {
-      if (this.accept && file.type.match(this._getRegex(this.accept)) == null) {
-        errors.push({ file, error: i18n('gv-file-upload.error.typeNotAllowed') });
-        return false;
-      }
-
-      if (this.except && file.type.match(this._getRegex(this.except)) != null) {
-        errors.push({ file, error: i18n('gv-file-upload.error.typeNotAllowed') });
-        return false;
-      }
-      if (this.limit && file.size > parseInt(this.limit, 10)) {
-        errors.push({ file, error: i18n('gv-file-upload.error.maxSize') });
-        return false;
-      }
-      return true;
-    });
-    this._errors = errors;
-    if (this._errors.length > 0) {
-      dispatchCustomEvent(this, 'error', { errors: this._errors });
-      this.dispatchEvent(new Event('invalid', { bubbles: true, cancelable: true }));
-    }
-    const box = this.shadowRoot.querySelector('.box');
-    box.classList.remove('is-dragover');
-    if (this._files.length > 0) {
-      this.reader.readAsDataURL(this._files[0]);
-      this.reader.onload = (event) => {
-        if (this._files[0].type.match(this._getRegex('image/*'))) {
-          this._preview = event.target.result;
-        } else {
-          this._preview = null;
-        }
-        this.value = event.target.result;
-        this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-        dispatchCustomEvent(this, 'drop', { files: [this.value] });
-      };
-    }
-  }
-
-  _cancelEvent(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  _removeFile() {
-    this._errors = [];
-    this._files = [];
-    this._preview = null;
-    this.value = null;
-    this.shadowRoot.querySelector('#file').value = null;
-    this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-  }
-
-  _onChange(e) {
-    this.setFiles(e.target.files);
-  }
-
-  get icon() {
-    if (this._files.length > 0) {
-      return 'general:clip';
-    }
-    return 'general:upload';
-  }
-
-  render() {
-    const label =
-      this._errors.length > 0 || this._files.length > 0 ? i18n('gv-file-upload.chooseAnotherFile') : i18n('gv-file-upload.chooseFile');
-
-    const classes = {
-      box: true,
-      preview: this._preview != null,
-    };
-
-    return html`
-      <label for="file">${this.label}</label>
-      <div
-        class="${classMap(classes)}"
-        @drop="${this._onDrop}"
-        @ondrop="${this._onDrop}"
-        @drag="${this._cancelEvent}"
-        @dragstart="${this._cancelEvent}"
-        @dragover="${this._onDragOver}"
-        @dragenter="${this._onDragOver}"
-        @dragleave="${this._onDragEnd}"
-        @dragend="${this._onDragEnd}"
-      >
-        ${this._preview != null ? html`<gv-image .src="${this._preview}" @error="${this._onPreviewError}"></gv-image>` : ''}
-        <div class="box__input">
-          <gv-icon class="box__icon" shape="${this.icon}"></gv-icon>
-          <label for="file" class="link">
-            <strong>${label}</strong>
-            <span class="box__dragndrop">${i18n('gv-file-upload.orDragIt')}</span>
-          </label>
-          <input
-            class="box__file"
-            type="file"
-            name="files[]"
-            id="file"
-            files="${this.files}"
-            accept="${ifDefined(this.accept)}"
-            @change="${this._onChange}"
-          />
-        </div>
-      </div>
-      ${this._files.length > 0
-        ? html`
-            <div class="files">
-              <gv-icon shape="general:clip"></gv-icon>
-              <div class="filename">${this._files[0].name}</div>
-              <gv-icon class="link" @click="${this._removeFile.bind(this, 0)}" shape="general:trash"></gv-icon>
-            </div>
-          `
-        : ''}
-      ${this._errors.length > 0
-        ? html`
-            <div class="files">
-              <gv-icon class="error" shape="code:stop"></gv-icon>
-              <div class="filename">${this._errors[0].file.name} <span class="error">(${this._errors[0].error})</span></div>
-            </div>
-          `
-        : ''}
-      ${this.value && this._files.length === 0 && this._errors.length === 0
-        ? html`
-            <div class="files">
-              <div class="filename"></div>
-              <gv-button link @click="${this._removeFile.bind(this, 0)}">${i18n('gv-file-upload.removePicture')}</gv-button>
-            </div>
-          `
-        : ''}
-    `;
-  }
-
-  _onPreviewError() {
-    this.value = null;
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('value')) {
-      if (this.value) {
-        this._preview = this.value;
-        if (this._files && this._files[0]) {
-          this.reader.readAsDataURL(this._files[0]);
-          this.reader.onload = (event) => {
-            if (this.value !== event.target.result) {
-              this._files = [];
-            }
-          };
-        }
-      } else {
-        this._preview = null;
-        this._files = [];
-      }
-    }
-
-    const preview = this.shadowRoot.querySelector('.preview');
-    if (preview) {
-      const { width, height } = preview.getBoundingClientRect();
-      const img = this.shadowRoot.querySelector('gv-image');
-      img.style.width = width - 20 + 'px';
-      img.style.height = height - 20 + 'px';
-      img.style.left = '10px';
-      img.style.top = '10px';
-    }
-  }
-}
-
-window.customElements.define('gv-file-upload', GvFileUpload);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvFileUpload=void 0;const e=require("lit"),i=require("../styles/link"),t=require("../lib/events"),r=require("lit/directives/if-defined"),s=require("../lib/i18n"),l=require("lit/directives/class-map");class o extends e.LitElement{static get properties(){return{label:{type:String},accept:{type:String},except:{type:String},limit:{type:Number},value:{type:Array,reflect:!0},_preview:{type:String,attribute:!1},_files:{type:Array,attribute:!1},_errors:{type:Array,attribute:!1}}}static get styles(){return[i.link,e.css`:host{box-sizing:border-box;display:block;width:100%;color:var(--gv-theme-color-dark,#28444f)}.box{font-size:1.25rem;background-color:var(--gv-theme-neutral-color-lighter,#fafafa);position:relative;padding:2rem;text-align:center;display:block;border:1px dashed #28444f;border-radius:4px;transition:outline-offset .15s ease-in-out,background-color .15s linear;height:100%}.box .box__icon{width:100%;height:80px;display:block;margin-bottom:40px;--gv-icon--s:5rem;--gv-icon--c:var(--gv-theme-color-dark, #28444f)}.box__file{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.box__file+label{max-width:80%;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;display:inline-block;overflow:hidden}.box.is-dragover{background-color:var(--gv-theme-color-light,#28444f);border:none;outline:1px dashed #28444f;outline-offset:-10px}.box .box__dragndrop{display:inline}.files{box-sizing:border-box;display:flex;align-items:center;--gv-icon--s:16px;padding:1rem .5rem 0}.filename{flex:1;padding:.2rem;word-break:break-all}.error{font-style:italic;--gv-icon--c:red}gv-image{position:absolute}.preview{transition:all .3s ease-in-out}.box__input{position:relative;display:flex;flex-direction:column;justify-content:center;height:100%;z-index:10}.preview .box__input{visibility:hidden}.preview:hover .box__input{visibility:visible}.preview:hover gv-image{opacity:.3}`]}constructor(){super(),this.reader=new FileReader,this._files=[],this._errors=[],this._counter=0}_onDragOver(e){e.preventDefault(),e.stopPropagation(),this._counter++;this.shadowRoot.querySelector(".box").classList.add("is-dragover")}_onDragEnd(e){if(e.preventDefault(),e.stopPropagation(),0==--this._counter){this.shadowRoot.querySelector(".box").classList.remove("is-dragover")}}_onDrop(e){e.preventDefault(),e.stopPropagation(),this.setFiles(e.dataTransfer.files)}_getRegex(e){return`(${e.toString().replace(" ","").replace(/,/g,".+|").replace(/\*/g,".+").replace(".+.+",".+")})`}setFiles(e){const i=[];this._files=[...e].filter((e=>this.accept&&null==e.type.match(this._getRegex(this.accept))||this.except&&null!=e.type.match(this._getRegex(this.except))?(i.push({file:e,error:(0,s.i18n)("gv-file-upload.error.typeNotAllowed")}),!1):!(this.limit&&e.size>parseInt(this.limit,10))||(i.push({file:e,error:(0,s.i18n)("gv-file-upload.error.maxSize")}),!1))),this._errors=i,this._errors.length>0&&((0,t.dispatchCustomEvent)(this,"error",{errors:this._errors}),this.dispatchEvent(new Event("invalid",{bubbles:!0,cancelable:!0})));this.shadowRoot.querySelector(".box").classList.remove("is-dragover"),this._files.length>0&&(this.reader.readAsDataURL(this._files[0]),this.reader.onload=e=>{this._files[0].type.match(this._getRegex("image/*"))?this._preview=e.target.result:this._preview=null,this.value=e.target.result,this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0})),(0,t.dispatchCustomEvent)(this,"drop",{files:[this.value]})})}_cancelEvent(e){e.preventDefault(),e.stopPropagation()}_removeFile(){this._errors=[],this._files=[],this._preview=null,this.value=null,this.shadowRoot.querySelector("#file").value=null,this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0}))}_onChange(e){this.setFiles(e.target.files)}get icon(){return this._files.length>0?"general:clip":"general:upload"}render(){const i=this._errors.length>0||this._files.length>0?(0,s.i18n)("gv-file-upload.chooseAnotherFile"):(0,s.i18n)("gv-file-upload.chooseFile"),t={box:!0,preview:null!=this._preview};return e.html`<label for="file">${this.label}</label><div class="${(0,l.classMap)(t)}" @drop="${this._onDrop}" @ondrop="${this._onDrop}" @drag="${this._cancelEvent}" @dragstart="${this._cancelEvent}" @dragover="${this._onDragOver}" @dragenter="${this._onDragOver}" @dragleave="${this._onDragEnd}" @dragend="${this._onDragEnd}">${null!=this._preview?e.html`<gv-image .src="${this._preview}" @error="${this._onPreviewError}"></gv-image>`:""}<div class="box__input"><gv-icon class="box__icon" shape="${this.icon}"></gv-icon><label for="file" class="link"><strong>${i}</strong> <span class="box__dragndrop">${(0,s.i18n)("gv-file-upload.orDragIt")}</span></label> <input class="box__file" type="file" name="files[]" id="file" files="${this.files}" accept="${(0,r.ifDefined)(this.accept)}" @change="${this._onChange}"></div></div>${this._files.length>0?e.html`<div class="files"><gv-icon shape="general:clip"></gv-icon><div class="filename">${this._files[0].name}</div><gv-icon class="link" @click="${this._removeFile.bind(this,0)}" shape="general:trash"></gv-icon></div>`:""} ${this._errors.length>0?e.html`<div class="files"><gv-icon class="error" shape="code:stop"></gv-icon><div class="filename">${this._errors[0].file.name} <span class="error">(${this._errors[0].error})</span></div></div>`:""} ${this.value&&0===this._files.length&&0===this._errors.length?e.html`<div class="files"><div class="filename"></div><gv-button link @click="${this._removeFile.bind(this,0)}">${(0,s.i18n)("gv-file-upload.removePicture")}</gv-button></div>`:""}`}_onPreviewError(){this.value=null}updated(e){e.has("value")&&(this.value?(this._preview=this.value,this._files&&this._files[0]&&(this.reader.readAsDataURL(this._files[0]),this.reader.onload=e=>{this.value!==e.target.result&&(this._files=[])})):(this._preview=null,this._files=[]));const i=this.shadowRoot.querySelector(".preview");if(i){const{width:e,height:t}=i.getBoundingClientRect(),r=this.shadowRoot.querySelector("gv-image");r.style.width=e-20+"px",r.style.height=t-20+"px",r.style.left="10px",r.style.top="10px"}}}exports.GvFileUpload=o,window.customElements.define("gv-file-upload",o);

package/src/atoms/gv-icon.js

@@ -1,103 +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, noChange } from 'lit';
-import { Directive, directive } from 'lit/directive';
-
-import { classMap } from 'lit/directives/class-map';
-
-class Namespaced extends Directive {
-  update(part, [namespace, value]) {
-    part.element.setAttributeNS(namespace, part.name, value);
-    return noChange;
-  }
-}
-
-const namespaced = directive(Namespaced);
-
-/**
- * An icon
- *
- * ## Details
- * * has @theme facet
- *
- * @cssprop {Color} [--gv-icon--c=var(--gv-theme-font-color-dark, #262626)] - Color
- * @cssprop {Color} [--gv-icon-opacity--c=var(--gv-theme-font-color-dark, #262626)] - Opacity color
- * @cssprop {Length} [--gv-icon--s=32px] - Height and width
- */
-export class GvIcon extends LitElement {
-  static get properties() {
-    return {
-      /**
-       * This is a shape, an concatenation of category name and icon name.
-       * @type {"{category}:{iconName}"}
-       * @attr
-       * @required
-       */
-      shape: { type: String },
-    };
-  }
-
-  static get excludedShapes() {
-    return ['thirdparty:google', 'thirdparty:graviteeio_am'];
-  }
-
-  canCustomize() {
-    return ![
-      'thirdparty:google',
-      'thirdparty:graviteeio_am',
-      'thirdparty:http',
-      'thirdparty:jdbc',
-      'thirdparty:microsoft',
-      'thirdparty:mongodb',
-    ].includes(this.shape);
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-flex;
-          vertical-align: middle;
-          --color: var(--gv-icon--c, var(--gv-theme-font-color-dark, #262626));
-          --opacity: var(--gv-icon-opacity--c, var(--gv-theme-font-color-dark, #262626));
-          --size: var(--gv-icon--s, 32px);
-        }
-
-        svg {
-          height: var(--size);
-          width: var(--size);
-          fill: var(--color);
-        }
-      `,
-    ];
-  }
-
-  static getHref(shape) {
-    const [category, icon] = shape.split(':');
-    return `./icons/${category}.svg#${icon}`;
-  }
-
-  render() {
-    const xlinkNamespace = 'http://www.w3.org/1999/xlink';
-    return html`<svg class="${classMap({ 'no-color': !this.canCustomize() })}">
-      <use xlink:href="${namespaced(xlinkNamespace, GvIcon.getHref(this.shape))}" />
-    </svg>`;
-  }
-}
-
-window.customElements.define('gv-icon', GvIcon);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvIcon=void 0;const e=require("lit"),t=require("lit/directive"),r=require("lit/directives/class-map");class i extends t.Directive{update(t,[r,i]){return t.element.setAttributeNS(r,t.name,i),e.noChange}}const s=(0,t.directive)(i);class o extends e.LitElement{static get properties(){return{shape:{type:String}}}static get excludedShapes(){return["thirdparty:google","thirdparty:graviteeio_am"]}canCustomize(){return!["thirdparty:google","thirdparty:graviteeio_am","thirdparty:http","thirdparty:jdbc","thirdparty:microsoft","thirdparty:mongodb"].includes(this.shape)}static get styles(){return[e.css`:host{box-sizing:border-box;display:inline-flex;vertical-align:middle;--color:var(--gv-icon--c, var(--gv-theme-font-color-dark, #262626));--opacity:var(--gv-icon-opacity--c, var(--gv-theme-font-color-dark, #262626));--size:var(--gv-icon--s, 32px)}svg{height:var(--size);width:var(--size);fill:var(--color)}`]}static getHref(e){const[t,r]=e.split(":");return`./icons/${t}.svg#${r}`}render(){return e.html`<svg class="${(0,r.classMap)({"no-color":!this.canCustomize()})}"><use xlink:href="${s("http://www.w3.org/1999/xlink",o.getHref(this.shape))}"/></svg>`}}exports.GvIcon=o,window.customElements.define("gv-icon",o);

package/src/atoms/gv-image.js

@@ -1,144 +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 { LitElement, html, css } from 'lit';
-import { dispatchCustomEvent } from '../lib/events';
-import { classMap } from 'lit/directives/class-map';
-import { ifDefined } from 'lit/directives/if-defined';
-import { skeleton } from '../styles/skeleton';
-
-/**
- * An image
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-image:loaded - When image is loaded
- *
- * @attr {String} src - Source of img
- * @attr {String} alt - Alternative text of img
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- *
- * @cssprop {String} [--gv-image--of=cover] - set the object-fit of image
- */
-export class GvImage extends LitElement {
-  static get properties() {
-    return {
-      src: { type: String },
-      skeleton: { type: Boolean, reflect: true },
-      alt: { type: String },
-      _loaded: { type: Boolean, reflect: true },
-      _error: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          display: inline-block;
-          overflow: hidden;
-        }
-
-        .wrapper,
-        img {
-          height: 100%;
-          width: 100%;
-          transition: opacity 0.3s ease-in-out;
-        }
-
-        .wrapper {
-          align-items: center;
-          display: flex;
-          justify-content: center;
-          position: relative;
-        }
-
-        .wrapper.text:not('.skeleton') {
-          background-color: var(--gv-theme-neutral-color);
-        }
-
-        img {
-          display: block;
-          object-fit: var(--gv-image--of, cover);
-          object-position: center center;
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          transition: opacity 150ms ease-in-out;
-          left: 0;
-        }
-
-        .wrapper.loaded img {
-          opacity: 1;
-        }
-
-        .error-msg {
-          font-size: 0.9rem;
-          overflow: hidden;
-          padding: 0.25rem;
-          text-align: center;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      `,
-      skeleton,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.skeleton = false;
-    this._error = false;
-    this._loaded = false;
-  }
-
-  set src(newVal) {
-    const oldVal = this._src;
-    this._src = newVal;
-    this.requestUpdate('src', oldVal);
-    this._error = false;
-    this._loaded = false;
-  }
-
-  get src() {
-    return this._src;
-  }
-
-  _onLoad(e) {
-    this._loaded = true;
-    this.skeleton = false;
-    dispatchCustomEvent(this, 'loaded', { src: this.src, alt: this.alt });
-  }
-
-  _onError(e) {
-    this._error = true;
-    this.skeleton = false;
-    this.dispatchEvent(new Event('error'), e);
-  }
-
-  render() {
-    const displayText = this.src == null || this._error;
-    return html`
-      <div class="wrapper ${classMap({ skeleton: this.skeleton, loaded: this._loaded, text: displayText })}">
-        <img src=${ifDefined(this.src)} @load=${this._onLoad} @error=${this._onError} alt="" />
-        ${displayText ? html` <div class="error-msg">${this.alt}</div> ` : ''}
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-image', GvImage);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvImage=void 0;const e=require("lit"),t=require("../lib/events"),r=require("lit/directives/class-map"),s=require("lit/directives/if-defined"),i=require("../styles/skeleton");class o extends e.LitElement{static get properties(){return{src:{type:String},skeleton:{type:Boolean,reflect:!0},alt:{type:String},_loaded:{type:Boolean,reflect:!0},_error:{type:Boolean}}}static get styles(){return[e.css`:host{display:inline-block;overflow:hidden}.wrapper,img{height:100%;width:100%;transition:opacity .3s ease-in-out}.wrapper{align-items:center;display:flex;justify-content:center;position:relative}.wrapper.text:not('.skeleton'){background-color:var(--gv-theme-neutral-color)}img{display:block;object-fit:var(--gv-image--of,cover);object-position:center center;opacity:0;position:absolute;top:0;transition:opacity 150ms ease-in-out;left:0}.wrapper.loaded img{opacity:1}.error-msg{font-size:.9rem;overflow:hidden;padding:.25rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}`,i.skeleton]}constructor(){super(),this.skeleton=!1,this._error=!1,this._loaded=!1}set src(e){const t=this._src;this._src=e,this.requestUpdate("src",t),this._error=!1,this._loaded=!1}get src(){return this._src}_onLoad(e){this._loaded=!0,this.skeleton=!1,(0,t.dispatchCustomEvent)(this,"loaded",{src:this.src,alt:this.alt})}_onError(e){this._error=!0,this.skeleton=!1,this.dispatchEvent(new Event("error"),e)}render(){const t=null==this.src||this._error;return e.html`<div class="wrapper ${(0,r.classMap)({skeleton:this.skeleton,loaded:this._loaded,text:t})}"><img src="${(0,s.ifDefined)(this.src)}" @load="${this._onLoad}" @error="${this._onError}" alt=""> ${t?e.html`<div class="error-msg">${this.alt}</div>`:""}</div>`}}exports.GvImage=o,window.customElements.define("gv-image",o);