@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

package/src/atoms/gv-link.js

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

package/src/atoms/gv-message.js

@@ -1 +1,133 @@
-var e=function(e,t,o,r){var s,i=arguments.length,c=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(c=(i<3?s(c):i>3?s(t,o,c):s(t,o))||c);return i>3&&c&&Object.defineProperty(t,o,c),c};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvMessage=void 0;const t=require("lit/directives/class-map"),o=require("lit"),r=require("lit/decorators.js"),s=require("../lib/events");require("./gv-icon");let i=class extends o.LitElement{constructor(){super(...arguments),this._close=!1,this.closable=!1,this.type=""}_onClick(){this._close=!0,setTimeout((()=>{(0,s.dispatchCustomEvent)(this,"close")}),250)}render(){const e={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 o.html`<div class="${(0,t.classMap)(e)}"><div class="content"><slot></slot></div>${this.closable?o.html`<gv-icon shape="general:close" @click="${this._onClick}"></gv-icon>`:""}</div>`}};i.styles=o.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}`,e([(0,r.property)()],i.prototype,"closable",void 0),e([(0,r.property)()],i.prototype,"type",void 0),i=e([(0,r.customElement)("gv-message")],i),exports.GvMessage=i;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/*
+ * 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 { customElement, property } from 'lit/decorators.js';
+import { dispatchCustomEvent } from '../lib/events';
+import './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.
+ */
+let GvMessage = class GvMessage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._close = false;
+        this.closable = false;
+        this.type = '';
+    }
+    _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>
+    `;
+    }
+};
+GvMessage.styles = 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;
+    }
+  `;
+__decorate([
+    property()
+], GvMessage.prototype, "closable", void 0);
+__decorate([
+    property()
+], GvMessage.prototype, "type", void 0);
+GvMessage = __decorate([
+    customElement('gv-message')
+], GvMessage);
+export { GvMessage };

package/src/atoms/gv-metric.js

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

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

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