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

package/dist/src/lib/utils.js

@@ -0,0 +1,106 @@
+/*
+ * 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.
+ */
+export function truncate(text, limit = 250, suffix = '...') {
+    return text && text.length > limit ? `${text.substring(0, limit)}${suffix}` : text;
+}
+export function isSameRoutes(routes, futureRoutes) {
+    if (routes && futureRoutes) {
+        return JSON.stringify(routes.map((r) => r.path + r.active)) === JSON.stringify(futureRoutes.map((r) => r.path + r.active));
+    }
+    return false;
+}
+export function appendDraggableImage(src, size = 100, defaultIcon = 'communication:shield-thunder') {
+    // Usefull when image src is svg
+    const div = document.createElement('div');
+    div.style.position = 'fixed';
+    div.style.left = '-999px';
+    div.style.top = '-999px';
+    div.style.zIndex = 1000;
+    if (src != null) {
+        const image = new Image();
+        image.src = src;
+        image.style = `width:${size}px;height:${size}px`;
+        div.appendChild(image);
+    }
+    else {
+        const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const useElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+        useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', defaultIcon);
+        svgElem.appendChild(useElem);
+        div.appendChild(svgElem);
+    }
+    document.body.appendChild(div);
+    return div;
+}
+export function flatDeep(arr) {
+    return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
+}
+export function flatObject(obj, prefix = '') {
+    return Object.keys(obj).reduce((acc, k) => {
+        const pre = prefix.length ? prefix + '.' : '';
+        if (Array.isArray(obj[k]))
+            acc[pre + k] = obj[k];
+        else if (typeof obj[k] === 'object')
+            Object.assign(acc, flatObject(obj[k], pre + k));
+        else
+            acc[pre + k] = obj[k];
+        return acc;
+    }, {});
+}
+export function deepClone(obj) {
+    if (obj) {
+        return JSON.parse(JSON.stringify(obj));
+    }
+    return obj;
+}
+export function uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+export function deepEqual(a, b, withoutOrder = false) {
+    if (Array.isArray(a) && Array.isArray(b) && withoutOrder) {
+        if (a.length !== b.length)
+            return false;
+        const uniqueValues = new Set([...a, ...b]);
+        for (const v of uniqueValues) {
+            const aCount = a.filter((e) => e === v).length;
+            const bCount = b.filter((e) => e === v).length;
+            if (aCount !== bCount)
+                return false;
+        }
+        return true;
+    }
+    const keys1 = a != null ? Object.keys(a) : [];
+    const keys2 = b != null ? Object.keys(b) : [];
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = a[key];
+        const val2 = b[key];
+        const areObjects = isObject(val1) && isObject(val2);
+        if ((areObjects && !deepEqual(val1, val2)) || (!areObjects && val1 !== val2)) {
+            return false;
+        }
+    }
+    return true;
+}
+export function isObject(object) {
+    return object != null && typeof object === 'object';
+}

package/dist/src/mixins/chart-element.js

@@ -0,0 +1,153 @@
+/*
+ * 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 { html, css } from 'lit';
+import { i18n } from '../lib/i18n';
+import Highcharts from 'highcharts';
+import Highmaps from 'highcharts/highmaps';
+import { cache } from 'lit/directives/cache';
+import { withSkeletonAttribute } from './with-skeleton-attribute';
+/**
+ * This is a mixin for ChartElement
+ * @mixinFunction
+ */
+export function ChartElement(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends withSkeletonAttribute(ParentClass) {
+        static get properties() {
+            return {
+                /** @required */
+                series: { type: Array },
+                options: { type: Array },
+                _additionalOptions: { type: Object, attribute: false },
+                _series: { type: Array, attribute: false },
+            };
+        }
+        static get styles() {
+            return [
+                ...super.styles,
+                // language=CSS
+                css `
+          :host {
+            box-sizing: border-box;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+            justify-content: center;
+            align-content: center;
+          }
+
+          .container {
+            flex: 1;
+          }
+
+          .tooltip {
+            display: grid;
+          }
+
+          .tooltip-2 {
+            grid-template-columns: repeat(2, 1fr);
+          }
+
+          .tooltip-3 {
+            grid-template-columns: repeat(3, 1fr);
+          }
+
+          .tooltip-4 {
+            grid-template-columns: repeat(4, 1fr);
+          }
+
+          .tooltip-5 {
+            grid-template-columns: repeat(5, 1fr);
+          }
+        `,
+            ];
+        }
+        constructor() {
+            super();
+            this._skeletonAttribute = 'series';
+            this._eventListener = function eventListener() {
+                for (let i = 0; i < Highcharts.charts.length; i++) {
+                    Highcharts.charts[i].reflow();
+                }
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            window.addEventListener('resize', this._eventListener);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            window.removeEventListener('resize', this._eventListener);
+        }
+        async getOptions() { }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('_series')) {
+                this.getOptions().then((options) => {
+                    this._additionalOptions = options;
+                });
+            }
+        }
+        render() {
+            if (this._error) {
+                return html ` <div class="error">${i18n('gv-chart.error')}</div>`;
+            }
+            if (this._empty) {
+                return html ` <div class="empty">${i18n('gv-chart.empty')}</div>`;
+            }
+            const container = document.createElement('div');
+            container.id = 'container';
+            container.className = this._skeleton || this._additionalOptions == null ? 'skeleton' : '';
+            container.classList.add('container');
+            if (this._additionalOptions) {
+                const options = {
+                    ...{
+                        chart: {
+                            height: '100%',
+                            width: '100%',
+                        },
+                        credits: {
+                            enabled: false,
+                        },
+                        title: {
+                            text: '',
+                        },
+                        time: {
+                            useUTC: false,
+                        },
+                    },
+                    ...this._additionalOptions,
+                };
+                const hasData = this._series && this._series.values && this._series.values[0] && this._series.values[0].data;
+                if (hasData) {
+                    options.series = this._series && this._series.values;
+                }
+                setTimeout(() => {
+                    if (options.chart.map) {
+                        Highmaps.mapChart(container, options);
+                    }
+                    else {
+                        Highcharts.chart(container, options);
+                    }
+                });
+            }
+            return html `${cache(container)}`;
+        }
+    };
+}

package/dist/src/mixins/input-element.js

@@ -0,0 +1,136 @@
+/*
+ * 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 { css, html } from 'lit';
+export function InputElement(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends ParentClass {
+        static get properties() {
+            return {
+                disabled: { type: Boolean, reflect: true },
+                required: { type: Boolean, reflect: true },
+                readonly: { type: Boolean, reflect: true },
+                skeleton: { type: Boolean },
+                value: { type: String, reflect: true },
+                label: { type: String },
+                title: { type: String },
+                name: { type: String },
+                placeholder: { type: String },
+                description: { type: String },
+                autofocus: { type: Boolean },
+                invalid: { type: Boolean, reflect: true },
+                valid: { type: Boolean, reflect: true },
+            };
+        }
+        static get styles() {
+            return [
+                // language=CSS
+                css `
+          :host {
+            box-sizing: border-box;
+            margin: 0.2rem;
+            display: block;
+          }
+
+          :host([invalid]) :not(.clipboard) input,
+          :host([invalid]) :not(.clipboard) ::slotted(.input),
+          :host([invalid]) :not(.clipboard) .box-icon-left,
+          :host([invalid]) :not(.clipboard) textarea,
+          :host([invalid]) :not(.clipboard) select,
+          :host([invalid]) :not(.clipboard) .input {
+            box-shadow: inset 3px 0 0 var(--gv-input-invalid--bxshc, var(--gv-theme-color-error, #da1a1b));
+          }
+
+          :host([readonly]) :not(.clipboard) input,
+          :host([readonly]) :not(.clipboard) ::slotted(.input),
+          :host([readonly]) .textarea,
+          :host([readonly]) :not(.clipboard) select,
+          :host([readonly]) .input {
+            border-left: 1px solid var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          }
+
+          :host([readonly]) input::placeholder {
+            color: transparent;
+          }
+        `,
+            ];
+        }
+        constructor() {
+            super();
+            this._id = `gv-input-${new Date().getTime()}`;
+            this.valid = true;
+            this.invalid = false;
+        }
+        updateState(value) {
+            if (this.required && !this.readonly) {
+                this.setValidity(value == null || value.length === 0 || (typeof value === 'string' && value.trim() === ''), 'field is required');
+            }
+            else {
+                this.setValidity();
+            }
+        }
+        setValidity(isInvalid = false, violation = '') {
+            const element = this.getInputElement();
+            if (element && element.setCustomValidity) {
+                if (isInvalid) {
+                    if (violation == null || violation.trim() === '') {
+                        violation = 'field is not valid';
+                    }
+                    element.setCustomValidity(violation);
+                }
+                else {
+                    element.setCustomValidity('');
+                }
+                element.reportValidity();
+            }
+            this.invalid = isInvalid;
+            this.valid = !this.invalid;
+        }
+        firstUpdated() {
+            if (this.autofocus) {
+                const input = this.getInputElement();
+                if (input != null) {
+                    this.getInputElement().focus();
+                }
+            }
+            this.updateState(this.value);
+        }
+        updated(changedProperties) {
+            if (changedProperties.has('value')) {
+                this.updateState(this.value);
+            }
+        }
+        getInputElement() {
+            return this.shadowRoot ? this.shadowRoot.querySelector('input') : null;
+        }
+        get offsetHeight() {
+            if (this.description != null) {
+                const element = this.shadowRoot.querySelector('.description');
+                if (element != null) {
+                    return super.offsetHeight - element.offsetHeight;
+                }
+            }
+            return super.offsetHeight;
+        }
+        renderLabel() {
+            if (this.label) {
+                return html `<label for=${this.id} title="${this.label}">${this.label}</label>`;
+            }
+            return '';
+        }
+    };
+}

package/dist/src/mixins/item-resource.js

@@ -0,0 +1,102 @@
+/*
+ * 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 { html } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import '../molecules/gv-identity-picture';
+import { getLabels, getPicture, getStates, getRating, getPictureDisplayName } from '../lib/item';
+import { withSkeletonAttribute } from './with-skeleton-attribute';
+/**
+ * This is a mixin for ItemResource
+ * @mixinFunction
+ */
+export function ItemResource(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends withSkeletonAttribute(ParentClass) {
+        static get properties() {
+            return {
+                ...super.properties,
+                /** @required */
+                item: { type: Object },
+                href: { type: String },
+                metrics: { type: Object },
+                _item: { type: Object, attribute: false },
+            };
+        }
+        constructor() {
+            super();
+            this._skeletonAttribute = 'item';
+        }
+        _onImageLoaded() {
+            if (this._item) {
+                this._skeleton = false;
+            }
+        }
+        _renderImage() {
+            if (this._item && !this._empty) {
+                return html `<gv-identity-picture
+          .skeleton="${this._skeleton}"
+          .display_name="${getPictureDisplayName(this._item)}"
+          .picture="${getPicture(this._item)}"
+          @load="${this._onImageLoaded}"
+        ></gv-identity-picture>`;
+            }
+            return '';
+        }
+        _onTagClick(tagValue, event) {
+            event.detail.tagValue = tagValue;
+        }
+        _renderLabels(clickable) {
+            const labels = getLabels(this._item);
+            if (labels) {
+                return repeat(labels, (label) => label, (label) => html `<gv-tag ?clickable="${clickable}" @gv-tag:click="${this._onTagClick.bind(this, label)}" ?skeleton="${this._skeleton}" major
+              >${label}</gv-tag
+            >`);
+            }
+            return '';
+        }
+        _renderStates() {
+            const states = getStates(this._item);
+            if (states) {
+                return repeat(states, (state) => state, ({ value, major, minor }) => html `
+            <gv-state ?skeleton="${this._skeleton}" ?major="${major === true}" ?minor="${minor === true}">${value}</gv-state>
+          `);
+            }
+            return '';
+        }
+        _onClickToMetrics(event) {
+            event.detail.item = this._item;
+        }
+        _renderMetricsWithRating() {
+            if (this.metrics) {
+                return html `
+          <gv-metrics .metrics="${this.metrics}" @gv-metrics:click="${this._onClickToMetrics}"> ${this._renderInfoRating()} </gv-metrics>
+        `;
+            }
+            else {
+                return this._renderInfoRating();
+            }
+        }
+        _renderInfoRating() {
+            const rating = getRating(this._item);
+            if (rating && rating.count) {
+                return html `<gv-rating readonly .skeleton="${this._skeleton}" .value="${rating.average}" .count="${rating.count}"></gv-rating>`;
+            }
+            return '';
+        }
+    };
+}

package/dist/src/mixins/keyboard-element.js

@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+export const KEYS = {
+    ArrowDown: '40',
+    ArrowLeft: '37',
+    ArrowRight: '39',
+    ArrowUp: '38',
+    Ctrl: '17',
+    Esc: '27',
+    Shift: '16',
+    Space: '32',
+};
+export function KeyboardElement(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends ParentClass {
+        constructor() {
+            super();
+            this._controller = {};
+            this._handleKeyDown = this._onKeyDown.bind(this);
+            this._handleKeyUp = this._onKeyUp.bind(this);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            window.addEventListener('keydown', this._handleKeyDown);
+            window.addEventListener('keyup', this._handleKeyUp);
+        }
+        disconnectedCallback() {
+            window.removeEventListener('keydown', this._handleKeyDown);
+            window.removeEventListener('keyup', this._handleKeyUp);
+            super.disconnectedCallback();
+        }
+        _onKeyDown(e) {
+            this._controller[e.keyCode] = true;
+            this.onKeyboard(this._controller);
+        }
+        _onKeyUp(e) {
+            if (this._controller[e.keyCode]) {
+                this._controller[e.keyCode] = null;
+            }
+        }
+        isPressed(...keys) {
+            return keys.find((key) => this._controller[key] == null) == null;
+        }
+        // abstract
+        onKeyboard(controller) { }
+    };
+}

package/dist/src/mixins/update-after-browser.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2021 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.
+ */
+/**
+ * This is a mixin for update component after browser
+ * @mixinFunction
+ */
+export function UpdateAfterBrowser(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends ParentClass {
+        async performUpdate() {
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+            super.performUpdate();
+        }
+    };
+}

package/dist/src/mixins/with-resize-observer.js

@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+export function withResizeObserver(ParentClass) {
+    // Load native impl or polyfill (without poluting global scope)
+    const ResizeObserverPromise = 'ResizeObserver' in window
+        ? Promise.resolve(window.ResizeObserver)
+        : import('resize-observer-polyfill/dist/ResizeObserver.es.js').then((mod) => mod.default);
+    return class extends ParentClass {
+        _onResize({ width }) {
+            if (this.onResize != null) {
+                this.onResize({ width });
+            }
+            if (this.breakpoints != null) {
+                this.breakpoints.width.forEach((breakpoint) => {
+                    const gteAttr = 'w-gte-' + breakpoint;
+                    breakpoint <= width ? this.setAttribute(gteAttr, '') : this.removeAttribute(gteAttr);
+                    const ltAttr = 'w-lt-' + breakpoint;
+                    width < breakpoint ? this.setAttribute(ltAttr, '') : this.removeAttribute(ltAttr);
+                });
+            }
+        }
+        async connectedCallback() {
+            if (super.connectedCallback != null) {
+                super.connectedCallback();
+            }
+            const ResizeObserver = await ResizeObserverPromise;
+            const ro = new ResizeObserver((entries) => {
+                // We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
+                window.requestAnimationFrame(() => {
+                    if (!Array.isArray(entries) || !entries.length) {
+                        return;
+                    }
+                    const { width } = this.getBoundingClientRect();
+                    this._onResize({ width });
+                });
+            });
+            ro.observe(this);
+            this._unobserveResize = () => ro.unobserve(this);
+        }
+        disconnectedCallback() {
+            if (super.connectedCallback != null) {
+                super.disconnectedCallback();
+            }
+            if (this._unobserveResize) {
+                this._unobserveResize();
+            }
+        }
+    };
+}