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

package/dist/src/molecules/gv-dropdown-menu.js

@@ -0,0 +1,108 @@
+/*
+ * 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, LitElement, html } from 'lit';
+/**
+ * Dropdown menu
+ *
+ * @slot - The element which must be clicked to open the actions
+ * @slot actions - Element that contains actions
+ *
+ * @attr {Boolean} open - true, if menu should be open
+ * @attr {Boolean} right - true, if actions should at right of container when opened
+ */
+export class GvDropdownMenu extends LitElement {
+    static get properties() {
+        return {
+            open: { type: Boolean, reflect: true },
+            right: { type: Boolean, reflect: true },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: block;
+        }
+
+        .actions {
+          position: absolute;
+          background-color: white;
+          transition: all 300ms ease-in-out;
+          border-style: solid;
+          border-color: #bfbfbf;
+          border-width: var(--gv-dropdown-menu--bdw, 1px 1px 1px 1px);
+          z-index: 201;
+          padding: var(--gv-dropdown-menu--p, 0.5rem);
+          visibility: hidden;
+          opacity: 0;
+          display: grid;
+          grid-gap: var(--gv-dropdown-menu--gg, 0.2rem);
+          bottom: 0;
+          top: 0;
+        }
+
+        :host([open]) .actions {
+          opacity: 1;
+          visibility: visible;
+          cursor: pointer;
+        }
+
+        :host([right]) .actions {
+          right: 0px;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.open = false;
+        this.right = false;
+        this._handleDocumentClick = this._onDocumentClick.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('click', this._handleDocumentClick);
+        super.disconnectedCallback();
+    }
+    _onDocumentClick() {
+        this.open = false;
+        window.removeEventListener('click', this._handleDocumentClick);
+    }
+    toggle() {
+        this.open = !this.open;
+        setTimeout(() => {
+            if (this.open) {
+                window.addEventListener('click', this._handleDocumentClick);
+            }
+            else {
+                window.removeEventListener('click', this._handleDocumentClick);
+            }
+        }, 0);
+    }
+    render() {
+        return html `<div class="box">
+      <slot @click="${this.toggle}"></slot>
+      <div class="actions">
+        <slot name="action" class="action"></slot>
+      </div>
+    </div>`;
+    }
+}
+window.customElements.define('gv-dropdown-menu', GvDropdownMenu);

package/dist/src/molecules/gv-expandable.js

@@ -0,0 +1,116 @@
+/*
+ * 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, LitElement } from 'lit';
+import { link } from '../styles/link';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Expandable component
+ *
+ * @fires gv-expandable:toggle - When user toggle
+ *
+ * @attr {Boolean} open - When true, opens details by default
+ * @attr {String} icon - An icon to show open feature
+ * @attr {String} icon-opened -  An icon to show close feature
+ * @attr {Boolean} clickable - When true, details is clickable like summary
+ *
+ * @cssprop {String} [--gv-expandable--bdb=var(--gv-expandable--bdb, thin solid var(--gv-theme-color, #5a7684)] - Border bottom
+ */
+export class GvExpandable extends LitElement {
+    constructor() {
+        super();
+        this.open = false;
+        this.icon = 'navigation:angle-left';
+        this.iconOpened = 'navigation:angle-down';
+        this.clickable = false;
+    }
+    static get properties() {
+        return {
+            open: { type: Boolean, reflect: true },
+            icon: { type: String },
+            iconOpened: { type: String, attribute: 'icon-opened' },
+            clickable: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+        }
+
+        .box {
+          padding: 0.2rem;
+          line-height: 23px;
+          border-bottom: var(--gv-expandable--bdb, thin solid var(--gv-theme-color, #5a7684));
+        }
+
+        :host([open]) .details {
+          visibility: visible;
+          opacity: 1;
+          height: auto;
+          overflow: visible;
+        }
+
+        .details {
+          display: block;
+          overflow: hidden;
+          opacity: 0;
+          visibility: hidden;
+          transition: all 150ms ease-in-out;
+          height: 0;
+        }
+
+        .summary {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+          justify-content: space-between;
+        }
+
+        .expand {
+          align-self: center;
+          margin-left: 5px;
+          --gv-icon--s: 16px;
+        }
+      `,
+        ];
+    }
+    _onClick(event) {
+        if (!this.clickable) {
+            const summary = this.shadowRoot.querySelector('.summary');
+            if (!summary.contains(event.target) && event.target.slot !== 'summary') {
+                return;
+            }
+        }
+        this.open = !this.open;
+        dispatchCustomEvent(this, 'toggle', { open: this.open });
+    }
+    render() {
+        const icon = this.open ? this.iconOpened : this.icon;
+        return html `<div class="${classMap({ box: true, link: this.clickable })}" @click=${this._onClick}>
+      <div class="${classMap({ summary: true, link: !this.clickable })}">
+        <slot name="summary"></slot>
+
+        <gv-icon shape="${icon}" class="expand"></gv-icon>
+      </div>
+      <slot name="details" class="details"></slot>
+    </div>`;
+    }
+}
+window.customElements.define('gv-expandable', GvExpandable);

package/dist/src/molecules/gv-expression-language.js

@@ -0,0 +1,263 @@
+/*
+ * 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 { GvCode } from '../molecules/gv-code';
+import { dispatchCustomEvent } from '../lib/events';
+import { pickedCompletion, startCompletion } from '@codemirror/autocomplete';
+import { keymap } from '@codemirror/view';
+import { EditorSelection, Prec } from '@codemirror/state';
+import { get } from 'object-path';
+/**
+ * Expression Language component
+ *
+ * @fires gv-expression-language:input - input events with the `value` on `detail`
+ * @fires gv-expression-language:ready - event dispatch when component is ready
+ * @fires gv-expression-language:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+ *
+ * @attr {String} label - code language
+ * @attr {String} value - code content to be highlighted
+ * @attr {options} Object - options based on codemirror
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {Number} rows - number of rows of the text element
+ * @attr {Boolean} large - for a large input (only if the field has one row)
+ * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+ * @attr {Boolean} small - for a small input (only if the field has one row)
+ * @attr {Object} grammar - The grammar for Expression Language support
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ */
+export class GvExpressionLanguage extends GvCode {
+    static get properties() {
+        return {
+            ...super.properties,
+            grammar: { type: Object },
+        };
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        dispatchCustomEvent(this, 'ready', { currentTarget: this });
+    }
+    getExtensions() {
+        return [Prec.high(this.insertELKeymap())];
+    }
+    insertELKeymap() {
+        return keymap.of([
+            {
+                key: 'Ctrl-Shift-e',
+                mac: 'Cmd-Shift-e',
+                run(view) {
+                    view.dispatch(view.state.changeByRange((range) => ({
+                        changes: [{ from: range.from, to: range.to, insert: '{#}' }],
+                        range: EditorSelection.range(range.from + 2, range.from + 2),
+                    })));
+                    startCompletion(view);
+                    return true;
+                },
+            },
+        ]);
+    }
+    buildMethods(type) {
+        const modelType = this.getModelType(type);
+        return modelType.methods.map(({ name, params = [], returnType }) => {
+            const command = `${name}()`;
+            const displayParams = params.map((p) => `${p.type} ${p.name}`);
+            const label = `${name}(${displayParams.join(', ')})`;
+            const detail = `return ${returnType}`;
+            return {
+                type: 'method',
+                command,
+                apply: (view, completion, from, to) => {
+                    const anchor = from + name.length + 1;
+                    view.dispatch({
+                        changes: { from, to, insert: completion.command },
+                        selection: { anchor },
+                        userEvent: 'input.complete',
+                        annotations: pickedCompletion.of(view),
+                    });
+                },
+                label,
+                detail,
+            };
+        });
+    }
+    findBestAutocompleteHandler(completionContext) {
+        return this.expressionLanguageCompletionHandlers
+            .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
+            .map((handler) => {
+            const match = handler.expr ? completionContext.matchBefore(handler.expr) : true;
+            return { handler, match };
+        })
+            .find(({ match, expr }) => match);
+    }
+    getModelType(typeId) {
+        if (this.grammar != null) {
+            return get(this.grammar, `_types.${typeId}`);
+        }
+        return null;
+    }
+    isMap(typeId) {
+        return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
+    }
+    getEnum(typeId) {
+        if (this.grammar != null) {
+            return get(this.grammar, `_enums.${typeId}`);
+        }
+        return [''];
+    }
+    convertType(type) {
+        if (type) {
+            const lowerType = type.toLowerCase();
+            if (lowerType === 'string') {
+                return 'text';
+            }
+            else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
+                return 'type';
+            }
+            else if (lowerType === 'int' || lowerType === 'long') {
+                return 'variable';
+            }
+            else if (lowerType.includes('[]')) {
+                return 'enum';
+            }
+        }
+        return 'variable';
+    }
+    get expressionLanguageCompletionHandlers() {
+        return [
+            {
+                expr: /{#[a-z]*/,
+                supportEL: true,
+                run(completionContext, match) {
+                    const prefix = match.text.replaceAll('{#', '');
+                    const from = completionContext.pos - prefix.length;
+                    const options = Object.keys(this.grammar)
+                        .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                        .map((command) => {
+                        return {
+                            type: 'variable',
+                            command,
+                            apply: command,
+                            label: command,
+                        };
+                    });
+                    return { from, options };
+                },
+            },
+            {
+                expr: /{#[a-z]*.[a-zA-Z]*/,
+                supportEL: true,
+                run(completionContext, match) {
+                    const tokens = match.text.split('.');
+                    const key = tokens[0].replaceAll('{#', '');
+                    const prefix = tokens[1];
+                    let candidate = this.grammar[key][prefix];
+                    let options = [];
+                    let from = completionContext.pos;
+                    if (candidate) {
+                        if (this.isMap(candidate._type)) {
+                            options = this.getEnum(candidate._type).map((value) => {
+                                const type = this.convertType(candidate._type);
+                                const command = `['${value}'][0]`;
+                                return {
+                                    type,
+                                    command,
+                                    apply: command,
+                                    label: value,
+                                };
+                            });
+                        }
+                    }
+                    else {
+                        from -= prefix.length;
+                        candidate = this.grammar[key];
+                        if (candidate._type) {
+                            options = this.buildMethods(candidate._type);
+                        }
+                        else {
+                            options = Object.keys(candidate)
+                                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                                .map((command) => ({
+                                type: this.convertType(candidate[command]._type),
+                                command,
+                                apply: command,
+                                label: command,
+                            }));
+                        }
+                    }
+                    return { from, options };
+                },
+            },
+            {
+                expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
+                supportEL: true,
+                run(completionContext, match) {
+                    const tokens = match.text.split('.');
+                    const key = tokens[0].replaceAll('{#', '');
+                    const word = tokens[1];
+                    const prefix = tokens[2];
+                    const candidate = this.grammar[key][word];
+                    let options = [];
+                    let from = completionContext.pos;
+                    if (candidate) {
+                        if (this.isMap(candidate._type)) {
+                            options = this.getEnum(candidate._type)
+                                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                                .map((label) => {
+                                const type = this.convertType(candidate._type);
+                                return {
+                                    type,
+                                    command: `['${label}'][0]`,
+                                    apply(view, completion, _from, to) {
+                                        from = _from - prefix.length - 1;
+                                        view.dispatch({
+                                            changes: { from, to, insert: completion.command },
+                                            selection: { anchor: from + completion.command.length },
+                                            userEvent: 'input.complete',
+                                            annotations: pickedCompletion.of(view),
+                                        });
+                                    },
+                                    label,
+                                };
+                            });
+                        }
+                        else {
+                            if (candidate._type) {
+                                options = this.buildMethods(candidate._type);
+                            }
+                            else {
+                                from -= prefix.length;
+                                options = Object.keys(candidate)
+                                    .filter((command) => command.startsWith(prefix))
+                                    .map((command) => {
+                                    return {
+                                        type: this.convertType(candidate[command]._type),
+                                        command,
+                                        apply: command,
+                                        label: command,
+                                    };
+                                });
+                            }
+                        }
+                    }
+                    return { from, options };
+                },
+            },
+            this.defaultCompletionHandler,
+        ];
+    }
+}
+window.customElements.define('gv-expression-language', GvExpressionLanguage);

package/dist/src/molecules/gv-identity-picture.js

@@ -0,0 +1,139 @@
+/*
+ * 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, LitElement, html } from 'lit';
+import { toSvg } from 'jdenticon';
+import { skeleton } from '../styles/skeleton';
+import { styleMap } from 'lit/directives/style-map';
+import '../atoms/gv-image';
+/**
+ * Identity picture component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {String} picture - the picture
+ * @attr {String} display_name - the display_name of the picture
+ * @attr {Boolean} notification - true to display a notification info
+ * @attr {Boolean} rounded - true for rounded image/icon
+ *
+ * @cssprop {Color} [--gv-identity-picture-notification--bgc=var(--gv-theme-color-light, #86c3d0)] - Notification background color
+ */
+export class GvIdentityPicture extends LitElement {
+    static get properties() {
+        return {
+            picture: { type: String },
+            display_name: { type: String },
+            _error: { type: Boolean, attribute: false },
+            notification: { type: Boolean },
+            rounded: { type: Boolean, reflect: true },
+            skeleton: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            skeleton,
+            // language=CSS
+            css `
+        :host {
+          display: block;
+          position: relative;
+        }
+
+        div {
+          text-align: center;
+        }
+
+        svg,
+        .skeleton {
+          width: auto;
+          height: auto;
+          max-width: 100%;
+          max-height: 100%;
+        }
+
+        gv-image {
+          width: 100%;
+          height: 100%;
+          --gv-image--of: contain;
+        }
+
+        :host([rounded]) gv-image,
+        :host([rounded]) svg {
+          border: 2px solid var(--gv-theme-neutral-color-lighter, #fafafa);
+          border-radius: 50%;
+          box-sizing: border-box;
+          --gv-image--of: cover;
+        }
+
+        .notification {
+          position: absolute;
+          width: 8px;
+          height: 8px;
+          background-clip: padding-box;
+          border-radius: 50%;
+          background-color: var(--gv-identity-picture-notification--bgc, var(--gv-theme-color-light, #86c3d0));
+        }
+      `,
+        ];
+    }
+    _onError() {
+        this._error = true;
+    }
+    _toNumber(size) {
+        return parseInt(size.replace('px', ''), 10);
+    }
+    _onLoaded() {
+        this._error = false;
+    }
+    _getMaxSize(width, height) {
+        return Math.min(this._toNumber(width), this._toNumber(height));
+    }
+    updated(properties) {
+        if (properties.has('picture')) {
+            this._error = false;
+        }
+    }
+    render() {
+        const { width, height } = window.getComputedStyle(this);
+        if ((!this.picture || this._error) && width && height) {
+            const size = this._getMaxSize(width, height);
+            const container = document.createElement('div');
+            if (this.skeleton) {
+                container.classList.add('skeleton');
+            }
+            container.title = this.display_name;
+            container.innerHTML = toSvg(this.display_name, size, { backColor: '#FFF' });
+            if (this.notification) {
+                const notification = document.createElement('span');
+                notification.className = 'notification';
+                notification.style.left = width;
+                container.appendChild(notification);
+            }
+            return html `${container}`;
+        }
+        return html `
+      <gv-image
+        src="${this.picture}"
+        alt="${this.display_name}"
+        title="${this.display_name}"
+        @error="${this._onError}"
+        @gv-image:loaded="${this._onLoaded}"
+      ></gv-image>
+      ${this.notification ? html `<span class="notification" style="${styleMap({ left: width })}"></span>` : ''}
+    `;
+    }
+}
+window.customElements.define('gv-identity-picture', GvIdentityPicture);