@gravitee/ui-components 3.25.3-typescript-bfd8f67 → 3.25.3-typescript-94e8113

package/dist/src/atoms/gv-text.js

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

package/dist/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/dist/src/charts/gv-chart-bar.js

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

package/dist/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/dist/src/charts/gv-chart-gauge.js

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

package/dist/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 {};

package/dist/src/charts/gv-chart-histogram.js

@@ -0,0 +1,78 @@
+/*
+ * 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';
+/**
+ * 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 ChartElement(LitElement) {
+    async getOptions() {
+        let yAxis;
+        let title;
+        let subtitle;
+        let plotOptions;
+        if (this.options) {
+            yAxis = this.options.yAxis;
+            title = this.options.title;
+            subtitle = this.options.subtitle;
+            plotOptions = this.options.plotOptions;
+        }
+        if (this._series && this._series.values && this._series.values.length === 0) {
+            this._empty = true;
+        }
+        return {
+            chart: {
+                type: 'column',
+                backgroundColor: 'transparent',
+            },
+            title: {
+                text: title,
+                align: 'left',
+                style: { fontSize: '12px', fontWeight: '700' },
+            },
+            subtitle: {
+                text: subtitle,
+                align: 'left',
+                style: { fontSize: '11px', color: '#000000', opacity: '0.54' },
+            },
+            series: this._series.values,
+            xAxis: {
+                type: 'datetime',
+                dateTimeLabelFormats: {
+                    month: '%e. %b',
+                    year: '%b',
+                },
+            },
+            legend: {
+                enabled: false,
+            },
+            yAxis,
+            plotOptions,
+            tooltip: {
+                pointFormat: 'Value: <b>{point.y}</b>',
+            },
+        };
+    }
+}
+window.customElements.define('gv-chart-histogram', GvChartHistogram);

package/dist/src/charts/gv-chart-line.d.ts

@@ -0,0 +1,52 @@
+declare const GvChartLine_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[];
+};
+/**
+ * Line 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-line:zoom - Custom event with zoomed timeframe
+ * @fires gv-chart-line:select - Custom event with selected value
+ *
+ * @attr {Array} series - The series to display on the line chart.
+ * @attr {Array} options - The list of options to display.
+ *
+ */
+export class GvChartLine extends GvChartLine_base {
+    firstUpdated(): void;
+}
+export {};