@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

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);

package/src/atoms/gv-select-native.d.ts

@@ -0,0 +1,174 @@
+declare const GvSelectNative_base: {
+    new (): {
+        [x: string]: any;
+        _id: string;
+        valid: boolean;
+        invalid: boolean;
+        updateState(value: any): void;
+        setValidity(isInvalid?: boolean, violation?: string): void;
+        firstUpdated(): void;
+        updated(changedProperties: any): void;
+        getInputElement(): any;
+        readonly offsetHeight: any;
+        renderLabel(): "" | import("lit-html").TemplateResult<1>;
+    };
+    [x: string]: any;
+    readonly properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * A select native component.
+ *
+ * @fires gv-select:select - Event when user select a value (deprecated, use gv-select:input)
+ * @fires gv-select:input - Event when user select a value
+ *
+ * @attr {Boolean} disabled - same as native select element `disabled` attribute
+ * @attr {Boolean} required - same as native select element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Array} options - the options of the select
+ * @attr {String | Array} value - the value of the select
+ * @attr {String} label - label of the select
+ * @attr {String} title - title of the select
+ * @attr {String} name - name of the select
+ * @attr {String} placeholder - an example value to display in the select when empty
+ * @attr {String} description - a description
+ * @attr {Boolean} multiple - enable multiple selection
+ *
+ * @cssprop {Color} [--gv-select--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-select--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-select--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-select-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-select-selected--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Selected background color
+ */
+export class GvSelectNative extends GvSelectNative_base {
+    static get properties(): {
+        options: {
+            type: ArrayConstructor;
+        };
+        _options: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        large: {
+            type: BooleanConstructor;
+        };
+        medium: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: number;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    _options: {
+        label: string;
+        value: string;
+        disabled: boolean;
+        title: null;
+    }[];
+    willUpdate(changedProperties: any): void;
+    _onEnter(e: any): void;
+    _onLeave(): void;
+    _onInput(e: any): void;
+    value: any;
+    _onClear(): void;
+    set options(arg: any);
+    selectedLabel(): string;
+    renderSelect(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    isSelected(option: any): any;
+}
+export {};