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

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

@@ -0,0 +1,235 @@
+/*
+ * 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, html, css } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * A wrapper of a <switch> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-switch:input - mirrors native input events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native switch element `disabled` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean|String} value - true if the switch is checked, false otherwise
+ * @attr {String} label - label of the switch
+ * @attr {String} description - description of the switch
+ * @attr {Boolean} checked - same as native switch element `checked` attribute
+ * @attr {Boolean} readonly - true if readonly
+ *
+ * @cssprop {Color} [--gv-switch-on--bgc=var(--gv-theme-color, #5a7684)] - On background color
+ * @cssprop {Color} [--gv-switch-off--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Off background color
+ * @cssprop {Color} [--gv-switch--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Switch background color
+ * @cssprop {String} [--gv-switch--ta=left] - Switch label text alignment
+ */
+export class GvSwitch extends LitElement {
+    static get properties() {
+        return {
+            disabled: { type: Boolean, reflect: true },
+            skeleton: { type: Boolean },
+            value: { type: String, reflect: true },
+            label: { type: String },
+            description: { type: String },
+            small: { type: Boolean, reflect: true },
+            checked: { type: Boolean, reflect: true },
+            readonly: { type: Boolean, reflect: true },
+        };
+    }
+    static get styles() {
+        return [
+            skeleton,
+            // language=CSS
+            css `
+        :host {
+          --off-bgc: var(--gv-switch-off--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));
+          --on-bgc: var(--gv-switch-on--bgc, var(--gv-theme-color, #5a7684));
+          box-sizing: border-box;
+          margin: 0.2rem;
+        }
+
+        .container {
+          display: flex;
+        }
+
+        .labels {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          flex: 1;
+          margin-right: 0.4rem;
+          box-sizing: border-box;
+          text-align: var(--gv-switch--ta, left);
+        }
+
+        .switch-title {
+          font-weight: 600;
+        }
+
+        .switch-description {
+          opacity: 0.6;
+        }
+
+        .switch-container {
+          display: flex;
+          align-items: center;
+        }
+
+        .switch {
+          position: relative;
+          width: 40px;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          border-radius: 16px;
+        }
+
+        :host([small]) .switch {
+          width: 25px;
+        }
+
+        :host([small]) .switch-label:before {
+          width: 10px;
+          border-radius: 10px;
+          right: 10px;
+        }
+
+        :host([small]) .switch-label {
+          height: 10px;
+          line-height: 10px;
+          border-radius: 10px;
+        }
+
+        :host([small]) .switch-title {
+          font-weight: 400;
+          font-size: 11px;
+        }
+
+        .switch input {
+          display: none;
+        }
+
+        .switch-label {
+          display: block;
+          overflow: hidden;
+          cursor: pointer;
+          height: 16px;
+          padding: 0;
+          line-height: 16px;
+          border: 2px solid transparent;
+          border-radius: 16px;
+          background-color: var(--off-bgc);
+          transition: background-color 0.3s ease-in;
+        }
+
+        .switch-label:before {
+          content: '';
+          display: block;
+          width: 16px;
+          margin: 0;
+          background: var(--gv-switch--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: 20px;
+          border: 2px solid var(--off-bgc);
+          border-radius: 16px;
+          transition: all 0.3s ease-in 0s;
+        }
+
+        :host([checked]) .switch-label {
+          background-color: var(--on-bgc);
+        }
+
+        :host([checked]) .switch-label,
+        :host([checked]) .switch-label:before {
+          border-color: var(--on-bgc);
+        }
+
+        :host([checked]) .switch-label:before {
+          right: 0;
+        }
+
+        :host([disabled]) .switch-label,
+        :host([readonly]) .switch-label {
+          cursor: default;
+        }
+
+        :host([disabled]) .switch-label {
+          opacity: 0.5;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._id = 'gv-id';
+        this.checked = false;
+    }
+    _onInput() {
+        if (!(this.disabled || this.skeleton || this.readonly)) {
+            this.value = !this.checked;
+            dispatchCustomEvent(this, 'input', this.value);
+        }
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('value')) {
+            if (this.value != null && this.value.toString() === 'true') {
+                this.checked = true;
+            }
+            else {
+                this.checked = false;
+            }
+        }
+    }
+    render() {
+        const classes = {
+            skeleton: this.skeleton,
+            disabled: this.disabled,
+            small: this.small,
+            switch: true,
+        };
+        return html `
+      <div class="container">
+        ${this.label || this.description
+            ? html `<div class="${classMap({ labels: true, skeleton: this.skeleton })}">
+              ${this.label ? html `<label class="switch-title">${this.label}</label>` : ''}
+              ${this.description ? html `<label class="switch-description" .innerHTML="${this.description}"></label>` : ''}
+            </div>`
+            : ''}
+        <div class="switch-container">
+          <div class=${classMap(classes)}>
+            <input
+              id=${this._id}
+              type="checkbox"
+              .title=${ifDefined(this.label || this.description)}
+              ?disabled=${this.disabled || this.skeleton}
+              ?readonly="${this.readonly}"
+              ?checked=${this.checked}
+              @input=${this._onInput}
+            />
+            <label class="switch-label" for="${this._id}"></label>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-switch', GvSwitch);

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

@@ -0,0 +1,162 @@
+/*
+ * 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 { link } from '../styles/link';
+import './gv-icon';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * A Tag
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires click - Native click event
+ *
+ * @slot - The content of the tag (text or HTML)
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} icon-right - name of shape
+ * @attr {Boolean} major - set tag UI as major
+ * @attr {Boolean} minor - set tag UI as minor
+ * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean} clickable - If true, tag has link style
+ *
+ * @cssprop {Length} [--gv-tag--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {Length} [--gv-tag--p=4px 8px] - Padding
+ * @cssprop {Length} [--gv-tag--bdr=4px] - Border radius
+ * @cssprop {String} [--gv-tag--bsw=none] - Box shadow
+ *
+ * @cssprop {Color} [--gv-tag--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Color} [--gv-tag-major--bgc=var(--gv-theme-color, #5a7684)] - Major background color
+ * @cssprop {Color} [--gv-tag-minor--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Minor background color
+ *
+ * @cssprop {Color} [--gv-tag--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-tag-major--bdc=var(--gv-theme-color, #5a7684)] - Major border color
+ * @cssprop {Color} [--gv-tag-minor--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Minor border color
+
+ * @cssprop {String} [--gv-tag--bds=solid] - Border style
+ * @cssprop {String} [--gv-tag-major--bds=solid] - Major border style
+ * @cssprop {String} [--gv-tag-minor--bds=dashed] - Minor border style
+ *
+ * @cssprop {Length} [--gv-tag--bdw=1px] - Border width
+ * @cssprop {Length} [--gv-tag-major--bdw=1px] - Major border width
+ * @cssprop {Length} [--gv-tag-minor--bdw=1px] - Minor border width
+ *
+ * @cssprop {Color} [--gv-tag--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-tag-major--c=var(--gv-theme-font-color-light, #ffffff)] - Major color
+ * @cssprop {Color} [--gv-tag-minor--c=var(--gv-theme-font-color-dark, #262626)] - Minor color
+ * @cssprop {Length} [--gv-tag-icon--s=18px] - Height and icon width
+ */
+export class GvTag extends LitElement {
+    static get properties() {
+        return {
+            icon: { type: String },
+            iconRight: { type: String, attribute: 'icon-right' },
+            major: { type: Boolean },
+            minor: { type: Boolean },
+            skeleton: { type: Boolean },
+            clickable: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            skeleton,
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          margin: 0.2rem;
+          vertical-align: middle;
+        }
+
+        div.default {
+          --bgc: var(--gv-tag--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
+          --bdc: var(--gv-tag--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          --bds: var(--gv-tag--bds, solid);
+          --bdw: var(--gv-tag--bdw, 1px);
+          --c: var(--gv-tag--c, var(--gv-theme-font-color-dark, #262626));
+        }
+
+        div.major {
+          --bgc: var(--gv-tag-major--bgc, var(--gv-theme-color, #5a7684));
+          --bdc: var(--gv-tag-major--bdc, var(--gv-theme-color, #5a7684));
+          --bds: var(--gv-tag-major--bds, solid);
+          --bdw: var(--gv-tag-major--bdw, 1px);
+          --c: var(--gv-tag-major--c, var(--gv-theme-font-color-light, #ffffff));
+        }
+
+        div.minor {
+          --bgc: var(--gv-tag-minor--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          --bdc: var(--gv-tag-minor--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          --bds: var(--gv-tag-minor--bds, dashed);
+          --bdw: var(--gv-tag-minor--bdw, 1px);
+          --c: var(--gv-tag-minor--c, var(--gv-theme-font-color-dark, #262626));
+        }
+
+        div {
+          background-color: var(--bgc);
+          border-color: var(--bdc);
+          border-radius: var(--gv-tag--bdr, 4px);
+          border-style: var(--bds);
+          border-width: var(--bdw);
+          box-shadow: var(--gv-tag--bsw, none);
+          color: var(--c);
+          --fz: var(--gv-tag--fz, var(--gv-theme-font-size-s, 12px));
+          font-size: var(--fz);
+          line-height: var(--fz);
+          padding: var(--gv-tag--p, 4px 8px);
+          --gv-icon--s: var(--gv-tag-icon--s, 18px);
+          --gv-icon--c: var(--c);
+          --gv-icon-opacity--c: var(--c);
+
+          word-break: normal;
+        }
+
+        div > * {
+          vertical-align: middle;
+          display: inline-flex;
+        }
+      `,
+        ];
+    }
+    _onTagClick(e) {
+        if (this.clickable) {
+            e.stopPropagation();
+            dispatchCustomEvent(this, 'click', {});
+        }
+    }
+    render() {
+        const modes = {
+            default: !this.major && !this.minor,
+            major: this.major,
+            minor: this.minor && !this.major,
+            skeleton: this.skeleton,
+            link: this.clickable,
+        };
+        return html `
+      <div class=${classMap(modes)} @click="${this._onTagClick}">
+        ${this.icon ? html `<gv-icon shape="${this.icon}"></gv-icon>` : ''}<slot></slot>${this.iconRight
+            ? html `<gv-icon shape="${this.iconRight}"></gv-icon>`
+            : ''}
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-tag', GvTag);

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