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

package/src/atoms/gv-text.d.ts

@@ -0,0 +1,110 @@
+declare const GvText_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 wrapper of a <text> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-text:input - mirrors native textarea events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native text element `disabled` attribute
+ * @attr {Boolean} required - same as native text element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {String} value - the value of the text
+ * @attr {String} label - label of the text
+ * @attr {String} title - title of the text
+ * @attr {String} name - name of the text
+ * @attr {String} placeholder - an example value to display in the text when empty
+ * @attr {Length} rows - number of rows of the text element
+ * @attr {Boolean} autofocus - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ * @attr {Boolean} [autosize=false] - true if field auto resize when content change
+ *
+ * @cssprop {Color} [--gv-input--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Length} [--gv-text--fz=var(--gv-theme-font-size-m, 14px)] - Font size
+ * @cssprop {Length} [--gv-text--lh=var(--gv-theme-font-size-m, 14px)] - Line height
+ */
+export class GvText extends GvText_base {
+    static get properties(): {
+        rows: {
+            type: NumberConstructor;
+        };
+        minlength: {
+            type: NumberConstructor;
+        };
+        maxlength: {
+            type: NumberConstructor;
+        };
+        autosize: {
+            type: BooleanConstructor;
+        };
+    };
+    rows: number;
+    _onInput(e: any): void;
+    value: any;
+    render(): "" | import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/atoms/gv-text.js

@@ -1,168 +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 { ifDefined } from 'lit/directives/if-defined';
-import { LitElement, css, html } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { dispatchCustomEvent } from '../lib/events';
-import { InputElement } from '../mixins/input-element';
-
-/**
- * A wrapper of a <text> component.
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-text:input - mirrors native textarea events with the `value` on `detail`
- *
- * @attr {Boolean} disabled - same as native text element `disabled` attribute
- * @attr {Boolean} required - same as native text element `required` attribute
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- * @attr {String} value - the value of the text
- * @attr {String} label - label of the text
- * @attr {String} title - title of the text
- * @attr {String} name - name of the text
- * @attr {String} placeholder - an example value to display in the text when empty
- * @attr {Length} rows - number of rows of the text element
- * @attr {Boolean} autofocus - true to put the focus on the input
- * @attr {Boolean} [readonly=false] - true if field is readonly mode
- * @attr {Boolean} [autosize=false] - true if field auto resize when content change
- *
- * @cssprop {Color} [--gv-input--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
- * @cssprop {Length} [--gv-text--fz=var(--gv-theme-font-size-m, 14px)] - Font size
- * @cssprop {Length} [--gv-text--lh=var(--gv-theme-font-size-m, 14px)] - Line height
- */
-export class GvText extends InputElement(LitElement) {
-  static get properties() {
-    return {
-      rows: { type: Number },
-      minlength: { type: Number },
-      maxlength: { type: Number },
-      autosize: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      ...super.styles,
-      skeleton,
-      // language=CSS
-      css`
-        .box {
-          position: relative;
-          line-height: 0;
-        }
-
-        /* BASE */
-        .textarea {
-          --fz: var(--gv-text--fz, var(--gv-theme-font-size-m, 14px));
-          --tmp: var(--gv-text--lh, var(--gv-theme-font-size-m, 14px));
-          --lh: calc(var(--tmp) + 3px);
-          border: 1px solid var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
-          box-sizing: border-box;
-          border-radius: 4px;
-          outline: none;
-          padding: 10px 5px;
-          width: 100%;
-          resize: none;
-          font-size: var(--fz);
-          line-height: var(--lh);
-        }
-
-        div.textarea {
-          white-space: pre;
-        }
-
-        textarea:disabled {
-          cursor: default;
-          opacity: 0.5;
-        }
-
-        textarea:required {
-          box-shadow: none;
-        }
-
-        label {
-          display: block;
-          line-height: 15px;
-          padding: 0 0 0.2rem 0;
-        }
-
-        /* Hack for FF */
-        textarea {
-          font-family: inherit;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.rows = 10;
-  }
-
-  getInputElement() {
-    return this.shadowRoot.querySelector('textarea');
-  }
-
-  _onInput(e) {
-    this.updateState(e.target.value);
-    this.value = e.target.value;
-    dispatchCustomEvent(this, 'input', this.value);
-  }
-
-  render() {
-    const classes = {
-      skeleton: this.skeleton,
-      required: this.required,
-      textarea: true,
-    };
-
-    if (this.readonly) {
-      if (this.value || this.value.trim() !== '') {
-        return html`
-          ${this.renderLabel()}
-          <div class="${classMap(classes)}" .title=${ifDefined(this.title || this.label)}>${ifDefined(this.value)}</div>
-        `;
-      }
-      return '';
-    }
-    const rows = this.autosize && this.value ? this.value.split('\n').length : this.rows;
-    return html`
-      <div class="box">
-        ${this.renderLabel()}
-        <textarea
-          class="${classMap(classes)}"
-          id=${this._id}
-          .name=${ifDefined(this.name)}
-          .title=${ifDefined(this.title || this.label)}
-          .required=${this.required}
-          ?readonly="${this.readonly}"
-          maxlength="${this.maxlength}"
-          minlength="${this.minlength}"
-          aria-required=${!!this.required}
-          ?disabled=${this.disabled || this.skeleton}
-          .placeholder=${ifDefined(this.placeholder)}
-          .value=${ifDefined(this.value)}
-          rows="${this.rows < rows ? rows : this.rows}"
-          @input=${this._onInput}
-        ></textarea>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-text', GvText);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvText=void 0;const e=require("lit/directives/class-map"),t=require("lit/directives/if-defined"),i=require("lit"),r=require("../styles/skeleton"),s=require("../lib/events"),a=require("../mixins/input-element");class l extends((0,a.InputElement)(i.LitElement)){static get properties(){return{rows:{type:Number},minlength:{type:Number},maxlength:{type:Number},autosize:{type:Boolean}}}static get styles(){return[...super.styles,r.skeleton,i.css`.box{position:relative;line-height:0}.textarea{--fz:var(--gv-text--fz, var(--gv-theme-font-size-m, 14px));--tmp:var(--gv-text--lh, var(--gv-theme-font-size-m, 14px));--lh:calc(var(--tmp) + 3px);border:1px solid var(--gv-input--bdc,var(--gv-theme-neutral-color-dark,#d9d9d9));box-sizing:border-box;border-radius:4px;outline:0;padding:10px 5px;width:100%;resize:none;font-size:var(--fz);line-height:var(--lh)}div.textarea{white-space:pre}textarea:disabled{cursor:default;opacity:.5}textarea:required{box-shadow:none}label{display:block;line-height:15px;padding:0 0 .2rem 0}textarea{font-family:inherit}`]}constructor(){super(),this.rows=10}getInputElement(){return this.shadowRoot.querySelector("textarea")}_onInput(e){this.updateState(e.target.value),this.value=e.target.value,(0,s.dispatchCustomEvent)(this,"input",this.value)}render(){const r={skeleton:this.skeleton,required:this.required,textarea:!0};if(this.readonly)return this.value||""!==this.value.trim()?i.html`${this.renderLabel()}<div class="${(0,e.classMap)(r)}" .title="${(0,t.ifDefined)(this.title||this.label)}">${(0,t.ifDefined)(this.value)}</div>`:"";const s=this.autosize&&this.value?this.value.split("\n").length:this.rows;return i.html`<div class="box">${this.renderLabel()} <textarea class="${(0,e.classMap)(r)}" id="${this._id}" .name="${(0,t.ifDefined)(this.name)}" .title="${(0,t.ifDefined)(this.title||this.label)}" .required="${this.required}" ?readonly="${this.readonly}" maxlength="${this.maxlength}" minlength="${this.minlength}" aria-required="${!!this.required}" ?disabled="${this.disabled||this.skeleton}" .placeholder="${(0,t.ifDefined)(this.placeholder)}" .value="${(0,t.ifDefined)(this.value)}" rows="${this.rows<s?s:this.rows}" @input="${this._onInput}"></textarea></div>`}}exports.GvText=l,window.customElements.define("gv-text",l);

package/src/charts/gv-chart-bar.d.ts

@@ -0,0 +1,50 @@
+declare const GvChartBar_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _eventListener: () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        getOptions(): Promise<void>;
+        updated(changedProperties: any): void;
+        _additionalOptions: void | undefined;
+        render(): import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+    };
+    readonly properties: {
+        series: {
+            type: ArrayConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        _additionalOptions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _series: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * Bar chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @fires gv-chart-bar:select - Custom event with selected value
+ *
+ * @attr {Array} series - The series to display on the bar chart.
+ * @attr {Array} options - The list of options to display.
+ *
+ */
+export class GvChartBar extends GvChartBar_base {
+}
+export {};

package/src/charts/gv-chart-bar.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 { LitElement } from 'lit';
-import '../atoms/gv-button';
-import '../atoms/gv-tag';
-import { ChartElement } from '../mixins/chart-element';
-import { dispatchCustomEvent } from '../lib/events';
-
-/**
- * Bar chart component
- *
- * ⚠️ This component is based on `highcharts`.
- * To use this component in your project be sure the dependency is installed or
- * install it with: `npm install highcharts --save`
- *
- * @fires gv-chart-bar:select - Custom event with selected value
- *
- * @attr {Array} series - The series to display on the bar chart.
- * @attr {Array} options - The list of options to display.
- *
- */
-export class GvChartBar extends ChartElement(LitElement) {
-  async getOptions() {
-    let total = 0;
-    const categories = [];
-    if (this._series && this._series.values) {
-      this.options.data.forEach((data, i) => {
-        data.y = this._series.values[this.options.data[i].name] || 0;
-        categories.push(data.name);
-      });
-      this.options.data.forEach((d) => {
-        total += d.y;
-      });
-    }
-    if (!total) {
-      this._empty = true;
-    }
-    return {
-      chart: {
-        type: 'bar',
-      },
-      series: total === 0 ? [] : [this.options],
-      xAxis: {
-        categories: categories,
-      },
-      legend: {
-        enabled: false,
-      },
-      yAxis: {
-        allowDecimals: false,
-        title: {
-          text: null,
-        },
-        min: 0,
-      },
-      plotOptions: {
-        bar: {
-          dataLabels: {
-            enabled: true,
-          },
-        },
-        series: {
-          animation: false,
-          events: {
-            click: (event) => {
-              event.preventDefault();
-              dispatchCustomEvent(this, 'select', event.point.options);
-            },
-          },
-        },
-      },
-      tooltip: {
-        pointFormat: 'Nb hits: <b>{point.y}</b>',
-      },
-      title: {
-        text: 'Total: ' + total,
-        useHTML: true,
-        align: 'left',
-        verticalAlign: 'bottom',
-        y: 10,
-        style: {
-          fontSize: '12px',
-          fontWeight: 'bold',
-        },
-      },
-    };
-  }
-}
-
-window.customElements.define('gv-chart-bar', GvChartBar);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartBar=void 0;const t=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const e=require("../mixins/chart-element"),s=require("../lib/events");class i extends((0,e.ChartElement)(t.LitElement)){async getOptions(){let t=0;const e=[];return this._series&&this._series.values&&(this.options.data.forEach(((t,s)=>{t.y=this._series.values[this.options.data[s].name]||0,e.push(t.name)})),this.options.data.forEach((e=>{t+=e.y}))),t||(this._empty=!0),{chart:{type:"bar"},series:0===t?[]:[this.options],xAxis:{categories:e},legend:{enabled:!1},yAxis:{allowDecimals:!1,title:{text:null},min:0},plotOptions:{bar:{dataLabels:{enabled:!0}},series:{animation:!1,events:{click:t=>{t.preventDefault(),(0,s.dispatchCustomEvent)(this,"select",t.point.options)}}}},tooltip:{pointFormat:"Nb hits: <b>{point.y}</b>"},title:{text:"Total: "+t,useHTML:!0,align:"left",verticalAlign:"bottom",y:10,style:{fontSize:"12px",fontWeight:"bold"}}}}}exports.GvChartBar=i,window.customElements.define("gv-chart-bar",i);

package/src/charts/gv-chart-gauge.d.ts

@@ -0,0 +1,58 @@
+declare const GvChartGauge_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _eventListener: () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        getOptions(): Promise<void>;
+        updated(changedProperties: any): void;
+        _additionalOptions: void | undefined;
+        render(): import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+    };
+    readonly properties: {
+        series: {
+            type: ArrayConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        _additionalOptions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _series: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * Gauge chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @attr {number} max - The maximum value of the gauge.
+ * @attr {Array} series - Array of the series to display.
+ * @attr {Object} tooltip - The list of tooltip attributes to overwrite.
+ * @attr {Object} pane - The pane serves as a container for axes and backgrounds for circular gauges and polar charts.
+ */
+export class GvChartGauge extends GvChartGauge_base {
+    static get properties(): {
+        /** @required */
+        max: {
+            type: NumberConstructor;
+        };
+        series: {
+            type: ArrayConstructor;
+        };
+    };
+}
+export {};

package/src/charts/gv-chart-gauge.js

@@ -1,100 +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 } from 'lit';
-import { ChartElement } from '../mixins/chart-element';
-import ChartModuleMore from 'highcharts/highcharts-more';
-import Highcharts from 'highcharts';
-import HCSolidGauge from 'highcharts/modules/solid-gauge';
-
-/**
- * Gauge chart component
- *
- * ⚠️ This component is based on `highcharts`.
- * To use this component in your project be sure the dependency is installed or
- * install it with: `npm install highcharts --save`
- *
- * @attr {number} max - The maximum value of the gauge.
- * @attr {Array} series - Array of the series to display.
- * @attr {Object} tooltip - The list of tooltip attributes to overwrite.
- * @attr {Object} pane - The pane serves as a container for axes and backgrounds for circular gauges and polar charts.
- */
-export class GvChartGauge extends ChartElement(LitElement) {
-  constructor() {
-    super();
-    ChartModuleMore(Highcharts);
-    HCSolidGauge(Highcharts);
-  }
-
-  static get properties() {
-    return {
-      /** @required */
-      max: { type: Number },
-      series: { type: Array },
-    };
-  }
-
-  async getOptions() {
-    this._empty = false;
-    return {
-      chart: {
-        type: 'solidgauge',
-        backgroundColor: 'transparent',
-      },
-      tooltip: {
-        enabled: false,
-        ...this.tooltip,
-      },
-
-      pane: {
-        startAngle: 0,
-        endAngle: 360,
-        background: [
-          {
-            outerRadius: '112%',
-            innerRadius: '88%',
-            backgroundColor: 'transparent',
-            borderWidth: 0,
-          },
-        ],
-        ...this.pane,
-      },
-
-      yAxis: [
-        {
-          min: 0,
-          max: this.max,
-          lineWidth: 0,
-          tickPositions: [],
-        },
-      ],
-
-      plotOptions: {
-        solidgauge: {
-          dataLabels: {
-            enabled: true,
-          },
-          linecap: 'round',
-          stickyTracking: false,
-          rounded: true,
-        },
-      },
-
-      series: this.series,
-    };
-  }
-}
-
-window.customElements.define('gv-chart-gauge', GvChartGauge);
+var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartGauge=void 0;const t=require("lit"),r=require("../mixins/chart-element"),a=e(require("highcharts/highcharts-more")),i=e(require("highcharts")),s=e(require("highcharts/modules/solid-gauge"));class n extends((0,r.ChartElement)(t.LitElement)){constructor(){super(),(0,a.default)(i.default),(0,s.default)(i.default)}static get properties(){return{max:{type:Number},series:{type:Array}}}async getOptions(){return this._empty=!1,{chart:{type:"solidgauge",backgroundColor:"transparent"},tooltip:{enabled:!1,...this.tooltip},pane:{startAngle:0,endAngle:360,background:[{outerRadius:"112%",innerRadius:"88%",backgroundColor:"transparent",borderWidth:0}],...this.pane},yAxis:[{min:0,max:this.max,lineWidth:0,tickPositions:[]}],plotOptions:{solidgauge:{dataLabels:{enabled:!0},linecap:"round",stickyTracking:!1,rounded:!0}},series:this.series}}}exports.GvChartGauge=n,window.customElements.define("gv-chart-gauge",n);

package/src/charts/gv-chart-histogram.d.ts

@@ -0,0 +1,48 @@
+declare const GvChartHistogram_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _eventListener: () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        getOptions(): Promise<void>;
+        updated(changedProperties: any): void;
+        _additionalOptions: void | undefined;
+        render(): import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+    };
+    readonly properties: {
+        series: {
+            type: ArrayConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        _additionalOptions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _series: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * Histogram chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @attr {Array} series - The series to display on the histogram chart.
+ * @attr {Object} options - The list of options to display.
+ *
+ */
+export class GvChartHistogram extends GvChartHistogram_base {
+}
+export {};