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

package/src/atoms/gv-link.js

@@ -1,210 +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 { skeleton } from '../styles/skeleton';
-import { link } from '../styles/link';
-import { classMap } from 'lit/directives/class-map';
-import { styleMap } from 'lit/directives/style-map';
-import { until } from 'lit/directives/until';
-import { dispatchCustomEvent } from '../lib/events';
-import './gv-icon';
-import { ifDefined } from 'lit/directives/if-defined';
-
-/**
- * A link
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-link:click - Custom click event from inner link element
- *
- * @slot - The content of the link (text or HTML)
- *
- * @attr {Boolean} active - set if link is active
- * @attr {String} path - link path
- * @attr {String} title - link title
- * @attr {String} target - link target
- * @attr {String} help - help text left between parentheses
- *
- * @cssprop {Length} [--gv-link-a--pv=15px] - Vertical padding for the inner <a> tag
- * @cssprop {Length} [--gv-link-a--ph=15px] - Horizontal padding for the inner <a> tag
- * @cssprop {Color} [--gv-link--c=var(--gv-theme-font-color-dark, #262626)] - Color
- * @cssprop {Color} [--gv-link-active--c=var(--gv-theme-font-color-light, #ffffff)] - Active color
- * @cssprop {Color} [--gv-link--bgc=transparent] - Background color
- * @cssprop {Color} [--gv-link-active--bgc=var(--gv-theme-color-dark, #28444f)] - Active background color
- * @cssprop {Color} [--gv-link-active--bdc=none] - Active border color
- * @cssprop {String} [--gv-link-active--bds=none] - Active border style
- * @cssprop {Length} [--gv-link-active--bdw=none] - Active border width
- * @cssprop {String} [--gv-link--ta=center] - Text align
- * @cssprop {String} [--gv-link--td=none] - Text decoration
- * @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 },
-    };
-  }
-
-  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);
-        }
-
-        *,
-        *: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) {
-    e.preventDefault();
-    dispatchCustomEvent(this, 'click', {
-      active: this.active,
-      icon: this.icon,
-      path: this.path,
-      title: this._title,
-      target: this.target,
-    });
-  }
-
-  set title(value) {
-    Promise.resolve(value)
-      .then((title) => {
-        this._title = title;
-      })
-      .catch((e) => {});
-  }
-
-  render() {
-    const classes = {
-      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)' };
-    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);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvLink=void 0;const e=require("lit"),t=require("../styles/skeleton"),i=require("../styles/link"),n=require("lit/directives/class-map"),r=require("lit/directives/style-map"),a=require("lit/directives/until"),l=require("../lib/events");require("./gv-icon");const c=require("lit/directives/if-defined");class s extends e.LitElement{static get properties(){return{active:{type:Boolean,reflect:!0},icon:{type:String},path:{type:String},title:{type:String},target:{type:String},_title:{type:String,attribute:!1},help:{type:String},skeleton:{type:Boolean},small:{type:Boolean}}}static get styles(){return[i.link,e.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}`,t.skeleton]}async _onClick(e){e.preventDefault(),(0,l.dispatchCustomEvent)(this,"click",{active:this.active,icon:this.icon,path:this.path,title:this._title,target:this.target})}set title(e){Promise.resolve(e).then((e=>{this._title=e})).catch((e=>{}))}render(){const t={active:this.active,link:!0,skeleton:this.skeleton,small:this.small},i=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 e.html`<a @click="${this._onClick}" class="${(0,n.classMap)(t)}" .href="${(0,c.ifDefined)(this.path)}" .target="${(0,c.ifDefined)(this.target)}" ?title="${(0,a.until)(this._title,"")}">${this.icon?e.html`<gv-icon shape="${this.icon}" style="${(0,r.styleMap)(i)}"></gv-icon>`:""} <span>${(0,a.until)(this._title,"")}${this.help?e.html`<span class="help">${(0,a.until)(this.help,"")}</span>`:""}</span></a>`}}exports.GvLink=s,window.customElements.define("gv-link",s);

package/src/atoms/gv-message.js

@@ -1,128 +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 { classMap } from 'lit/directives/class-map';
-import { LitElement, html, css } from 'lit';
-import { dispatchCustomEvent } from '../lib/events';
-import '../atoms/gv-icon';
-
-/**
- * Message component
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-message:close - Click event from inner button element
- *
- * @slot - The content of the button (text or HTML)
- *
- * @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 },
-    };
-  }
-
-  static get styles() {
-    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() {
-    this._close = true;
-    setTimeout(() => {
-      dispatchCustomEvent(this, 'close');
-    }, 250);
-  }
-
-  render() {
-    const modes = {
-      box: true,
-      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,
-    };
-    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);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvMessage=void 0;const e=require("lit/directives/class-map"),t=require("lit"),s=require("../lib/events");require("../atoms/gv-icon");class i extends t.LitElement{static get properties(){return{type:{type:String},closable:{type:Boolean},_close:{type:Boolean,attribute:!1}}}static get styles(){return[t.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}`]}_onClick(){this._close=!0,setTimeout((()=>{(0,s.dispatchCustomEvent)(this,"close")}),250)}render(){const s={box:!0,simple:!this.type||"info"!==this.type&&"success"!==this.type&&"error"!==this.type&&"warning"!==this.type,info:"info"===this.type,warning:"warning"===this.type,success:"success"===this.type,error:"error"===this.type,close:this._close};return t.html`<div class="${(0,e.classMap)(s)}"><div class="content"><slot></slot></div>${this.closable?t.html`<gv-icon shape="general:close" @click="${this._onClick}"></gv-icon>`:""}</div>`}}exports.GvMessage=i,window.customElements.define("gv-message",i);

package/src/atoms/gv-metric.js

@@ -1,117 +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 { classMap } from 'lit/directives/class-map';
-import { LitElement, html, css } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import './gv-icon';
-
-/**
- * A Metric
- *
- * ## Details
- * * has @theme facet
- *
- * @attr {String} icon - name of shape
- * @attr {String} name - the name of the metric
- * @attr {String} value - the value of the metric
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- *
- * @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 },
-    };
-  }
-
-  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: 0.5;
-        }
-      `,
-      skeleton,
-    ];
-  }
-
-  render() {
-    const modes = {
-      skeleton: this.skeleton,
-      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>
-    `;
-  }
-}
-
-window.customElements.define('gv-metric', GvMetric);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvMetric=void 0;const e=require("lit/directives/class-map"),i=require("lit"),t=require("../styles/skeleton");require("./gv-icon");class s extends i.LitElement{static get properties(){return{icon:{type:String},name:{type:String},value:{type:String},skeleton:{type:Boolean}}}static get styles(){return[i.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}`,t.skeleton]}render(){const t={skeleton:this.skeleton,metric:!0};return i.html`<div class="${(0,e.classMap)(t)}">${this.value?i.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>`}}exports.GvMetric=s,window.customElements.define("gv-metric",s);

package/src/atoms/gv-relative-time.js

@@ -1,156 +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 { getLanguage, getAvailableLanguages } from '../lib/i18n';
-import { LitElement, html } from 'lit';
-import { until } from 'lit/directives/until';
-import { shouldPolyfill as shouldPolyfillIntlRelativeTimeFormat } from '@formatjs/intl-relativetimeformat/should-polyfill';
-
-const options = {
-  year: 'numeric',
-  month: 'short',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  timeZoneName: 'short',
-};
-
-const UNITS = [
-  { unit: 'year', duration: 1000 * 60 * 60 * 24 * 365.25 },
-  { unit: 'month', duration: 1000 * 60 * 60 * 24 * (365.25 / 12) },
-  { unit: 'week', duration: 1000 * 60 * 60 * 24 * 7 },
-  { unit: 'day', duration: 1000 * 60 * 60 * 24 },
-  { unit: 'hour', duration: 1000 * 60 * 60 },
-  { unit: 'minute', duration: 1000 * 60 },
-  { unit: 'second', duration: 1000 },
-];
-
-/**
- * Component to display a localized humanized relative date (ex: "two minutes ago").
- *
- * ## Details
- * * has @theme facet
- *
- * @prop {String|Number} datetime - Date as ISO string or timestamp.
- * @prop {Boolean} noFuture - Whether a date in future is allowed or not (useful when not sync).
- */
-export class GvRelativeTime extends LitElement {
-  static get properties() {
-    return {
-      datetime: { type: String },
-      title: { type: String, reflect: true },
-      noFuture: { type: Boolean },
-      _relativeTime: { type: String, attribute: false },
-      _updateIntervalId: { type: String, attribute: false },
-    };
-  }
-
-  constructor() {
-    super();
-    this._formatter = null;
-  }
-
-  async getFormatter() {
-    if (this._formatter == null) {
-      if (!shouldPolyfillIntlRelativeTimeFormat()) {
-        this._formatter = Intl.RelativeTimeFormat;
-        return this._formatter;
-      } else {
-        // Load the needed polyfills 1st BEFORE loading data
-        return import('@formatjs/intl-locale/polyfill')
-          .then(() => import('@formatjs/intl-relativetimeformat/polyfill'))
-          .then(() =>
-            Promise.all([
-              ...Object.values(getAvailableLanguages()).map((_lang) => {
-                return import(`@formatjs/intl-relativetimeformat/locale-data/${_lang}`);
-              }),
-            ]),
-          )
-          .then(() => {
-            this._formatter = Intl.RelativeTimeFormat;
-            return this._formatter;
-          })
-          .catch((err) => {
-            console.error(err);
-            throw new Error('Cannot load @formatjs/intl polyfills');
-          });
-      }
-    } else {
-      return this._formatter;
-    }
-  }
-
-  set datetime(value) {
-    value = this.noFuture ? this._formatDateInThePast(value) : value;
-    const dtf = new Intl.DateTimeFormat(getLanguage(), options);
-    this.title = dtf.format(new Date(value));
-    this._datetime = value;
-  }
-
-  _formatDateInThePast(date) {
-    // to avoid to have date in the future in case of desynchronization between browser and server
-    if (date) {
-      const now = new Date();
-      if (now.getTime() < new Date(date).getTime()) {
-        date = now;
-      }
-    }
-    return date;
-  }
-
-  async _format(dateStr, lang) {
-    const Formatter = await this.getFormatter();
-    const format = (value, unit) => {
-      if (!isNaN(value)) {
-        return new Formatter(lang, { numeric: 'auto' }).format(-value, unit);
-      }
-    };
-    const now = new Date().getTime();
-    const diff = now - new Date(dateStr).getTime();
-
-    for (const { unit, duration } of UNITS) {
-      const value = diff / duration;
-      const roundedValue = Math.round(value);
-      if (Math.abs(value) >= 1) {
-        return format(roundedValue, unit);
-      }
-    }
-    return format(Math.round(diff / 1000), 'second');
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.updateIntervalId == null) {
-      setTimeout(() => {
-        this.performUpdate();
-      });
-      this.updateIntervalId = setInterval(() => {
-        this.performUpdate();
-      }, 10 * 1000);
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this.updateIntervalId);
-    this.updateIntervalId = null;
-  }
-
-  render() {
-    return html`<span title="${this.title}">${until(this._format(this._datetime, getLanguage()))}</span>`;
-  }
-}
-
-window.customElements.define('gv-relative-time', GvRelativeTime);
+var e=Object.create?function(e,t,r,i){void 0===i&&(i=r),Object.defineProperty(e,i,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},r=function(r){if(r&&r.__esModule)return r;var i={};if(null!=r)for(var n in r)"default"!==n&&Object.prototype.hasOwnProperty.call(r,n)&&e(i,r,n);return t(i,r),i};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvRelativeTime=void 0;const i=require("../lib/i18n"),n=require("lit"),a=require("lit/directives/until"),o=require("@formatjs/intl-relativetimeformat/should-polyfill"),l={year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"numeric",timeZoneName:"short"},u=[{unit:"year",duration:315576e5},{unit:"month",duration:26298e5},{unit:"week",duration:6048e5},{unit:"day",duration:864e5},{unit:"hour",duration:36e5},{unit:"minute",duration:6e4},{unit:"second",duration:1e3}];class s extends n.LitElement{static get properties(){return{datetime:{type:String},title:{type:String,reflect:!0},noFuture:{type:Boolean},_relativeTime:{type:String,attribute:!1},_updateIntervalId:{type:String,attribute:!1}}}constructor(){super(),this._formatter=null}async getFormatter(){return null==this._formatter?(0,o.shouldPolyfill)()?Promise.resolve().then((()=>r(require("@formatjs/intl-locale/polyfill")))).then((()=>Promise.resolve().then((()=>r(require("@formatjs/intl-relativetimeformat/polyfill")))))).then((()=>Promise.all([...Object.values((0,i.getAvailableLanguages)()).map((e=>Promise.resolve().then((()=>r(require(`@formatjs/intl-relativetimeformat/locale-data/${e}`))))))]))).then((()=>(this._formatter=Intl.RelativeTimeFormat,this._formatter))).catch((e=>{throw console.error(e),new Error("Cannot load @formatjs/intl polyfills")})):(this._formatter=Intl.RelativeTimeFormat,this._formatter):this._formatter}set datetime(e){e=this.noFuture?this._formatDateInThePast(e):e;const t=new Intl.DateTimeFormat((0,i.getLanguage)(),l);this.title=t.format(new Date(e)),this._datetime=e}_formatDateInThePast(e){if(e){const t=new Date;t.getTime()<new Date(e).getTime()&&(e=t)}return e}async _format(e,t){const r=await this.getFormatter(),i=(e,i)=>{if(!isNaN(e))return new r(t,{numeric:"auto"}).format(-e,i)},n=(new Date).getTime()-new Date(e).getTime();for(const{unit:e,duration:t}of u){const r=n/t,a=Math.round(r);if(Math.abs(r)>=1)return i(a,e)}return i(Math.round(n/1e3),"second")}connectedCallback(){super.connectedCallback(),null==this.updateIntervalId&&(setTimeout((()=>{this.performUpdate()})),this.updateIntervalId=setInterval((()=>{this.performUpdate()}),1e4))}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this.updateIntervalId),this.updateIntervalId=null}render(){return n.html`<span title="${this.title}">${(0,a.until)(this._format(this._datetime,(0,i.getLanguage)()))}</span>`}}exports.GvRelativeTime=s,window.customElements.define("gv-relative-time",s);