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

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

@@ -0,0 +1,334 @@
+/*
+ * 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';
+import { EditorView, basicSetup } from '@codemirror/basic-setup';
+import { EditorState, Compartment } from '@codemirror/state';
+import { autocompletion } from '@codemirror/autocomplete';
+import { json } from '@codemirror/lang-json';
+import { languages } from '@codemirror/language-data';
+import { placeholder } from '@codemirror/view';
+import { shapeClipboard } from '../styles/shapes';
+import { dispatchCustomEvent } from '../lib/events';
+import { uuid } from '../lib/utils';
+import { classMap } from 'lit/directives/class-map';
+import { GvInput } from '../atoms/gv-input';
+import { skeleton } from '../styles/skeleton';
+import { empty } from '../styles/empty';
+import { input } from '../styles/input';
+/**
+ * Code component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-code:input - input events with the `value` on `detail`
+ * @fires gv-code:ready - event dispatch when component is ready
+ * @fires gv-code: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 {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 GvCode extends GvInput {
+    static get properties() {
+        return {
+            ...super.properties,
+            options: { type: Object },
+            rows: { type: Number },
+            _error: { type: String, attribute: false },
+        };
+    }
+    constructor() {
+        super();
+        this._id = `gv-code-${uuid()}`;
+        this.value = '';
+        this.readonly = false;
+        this.autofocus = false;
+        this.clipboard = false;
+        this._clipboardIcon = shapeClipboard;
+        this.languageCompartment = new Compartment();
+        this.readonlyCompartment = new Compartment();
+        this.placeholderCompartment = new Compartment();
+    }
+    render() {
+        const classes = {
+            box: true,
+            'box-invisible': this.skeleton,
+            large: this.large,
+            medium: this.medium || (!this.large && !this.small),
+            small: this.small,
+            copied: this.hasClipboard && this._copied,
+        };
+        const inputClasses = {
+            content: true,
+            code: !this.hasInputStyle,
+            input: this.hasInputStyle,
+        };
+        return html `
+      <div class="${classMap(classes)}">
+        ${this.label ? html `<label for="code">${this.label}</label>` : ''}
+        <div id="${this._id}" class="${classMap(inputClasses)}">
+          <!-- No format please -->
+          ${this.renderIcon()}
+        </div>
+      </div>
+      ${this.description != null ? html `<div class="description" .innerHTML="${this.description}"></div>` : ''}
+    `;
+    }
+    bindInputEvents() {
+        dispatchCustomEvent(this, 'ready', { currentTarget: this });
+    }
+    get hasInputStyle() {
+        return this.rows === 1;
+    }
+    _autocomplete(completionContext) {
+        const { handler, match } = this.findBestAutocompleteHandler(completionContext);
+        return handler.run.call(this, completionContext, match);
+    }
+    findBestAutocompleteHandler(completionContext) {
+        return { handler: this.defaultCompletionHandler, match: true };
+    }
+    get defaultCompletionHandler() {
+        return {
+            run(completionContext) {
+                const language = completionContext.state.languageDataAt('autocomplete', completionContext.pos);
+                if (language.length > 0) {
+                    return language[0](completionContext);
+                }
+                return { from: completionContext.pos, options: [] };
+            },
+        };
+    }
+    _getExtensions() {
+        return [
+            basicSetup,
+            GvCode.codemirrorTheme,
+            this.languageCompartment.of(json()),
+            this.placeholderCompartment.of(placeholder(this.placeholder || '')),
+            EditorState.transactionFilter.of((tr) => (this.hasInputStyle && tr.newDoc.lines > 1 ? [] : tr)),
+            this.readonlyCompartment.of(EditorView.editable.of(!this.readonly && !this.disabled)),
+            EditorView.updateListener.of((viewUpdate) => {
+                if (viewUpdate.docChanged) {
+                    this.value = this._editorView.state.doc.toString();
+                    dispatchCustomEvent(this, 'input', this.value);
+                }
+            }),
+            autocompletion({
+                activateOnTyping: true,
+                override: [this._autocomplete.bind(this)],
+            }),
+            ...this.getExtensions(),
+        ];
+    }
+    getExtensions() {
+        return [];
+    }
+    getInputElement() {
+        return this.shadowRoot.querySelector(`[id=${this._id}]`);
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        this._editorState = EditorState.create({
+            doc: this.value,
+            extensions: this._getExtensions(),
+        });
+        const parent = this.getInputElement();
+        this._editorView = new EditorView({
+            root: this.shadowRoot,
+            parent,
+            state: this._editorState,
+            dispatch: (transaction) => {
+                try {
+                    this._editorView.update([transaction]);
+                }
+                catch (e) {
+                    // Sometimes the default dispatch fn throws an NS_ERROR_FAILURE at runtime.
+                    // It's so strange but with this catch everything is okay
+                }
+            },
+        });
+        parent.appendChild(this._editorView.dom);
+    }
+    async updated(properties) {
+        super.updated(properties);
+        if (properties.has('placeholder')) {
+            this._reflectPlaceholder();
+        }
+        if (properties.has('value')) {
+            this._reflectValue();
+        }
+        if (properties.has('readonly') || properties.has('disabled')) {
+            this._reflectReadonlyDisabled();
+        }
+        if (properties.has('options') && this.options) {
+            await this._reflectOptions();
+        }
+    }
+    _reflectPlaceholder() {
+        this._editorView.dispatch({
+            effects: this.placeholderCompartment.reconfigure(placeholder(this.placeholder)),
+        });
+    }
+    _reflectValue() {
+        const transaction = this._editorState.update({
+            changes: {
+                from: 0,
+                to: this._editorState.doc.length,
+                insert: this.value,
+            },
+        });
+        this._editorState = transaction.state;
+    }
+    _reflectReadonlyDisabled() {
+        this._editorView.dispatch({
+            effects: this.readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly && !this.disabled)),
+        });
+    }
+    static async findLanguage(mode) {
+        if (mode) {
+            const modeOnly = mode.split('/').pop();
+            if (modeOnly === 'asciidoc') {
+                const [{ asciidoc }, { StreamLanguage }] = await Promise.all([
+                    import('codemirror-asciidoc/lib/asciidoc'),
+                    import('@codemirror/stream-parser'),
+                ]);
+                return {
+                    name: 'asciidoc',
+                    support: {
+                        extension: StreamLanguage.define(asciidoc),
+                    },
+                };
+            }
+            else {
+                const language = languages.find((languageDescription) => {
+                    return languageDescription.name.toUpperCase() === modeOnly.toUpperCase() || languageDescription.alias.includes(modeOnly);
+                });
+                if (language == null) {
+                    console.warn(`Cannot find language ${mode}, please use language supported by CodeMirror 6`, languages.map((l) => l.name));
+                }
+                return language;
+            }
+        }
+        return null;
+    }
+    async _reflectOptions() {
+        const language = await GvCode.findLanguage(this.options.mode);
+        if (language != null) {
+            if (language.support == null) {
+                await language.load();
+            }
+            this._editorView.dispatch({
+                effects: this.languageCompartment.reconfigure(language.support.extension),
+            });
+        }
+    }
+    static get codemirrorTheme() {
+        return EditorView.theme({
+            '&.cm-editor.cm-focused': {
+                outline: 'none',
+            },
+            '.cm-gutters': {
+                backgroundColor: 'var(--gv-input-icon--bgc, var(--gv-theme-neutral-color, #f5f5f5))',
+                color: 'var(--gv-theme-font-color-dark, #262626)',
+                borderLeft: '5px solid',
+                borderColor: 'var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9))',
+            },
+        });
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            skeleton,
+            empty,
+            input,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: block;
+          margin: 0 0.2rem 0.2rem 0.2rem;
+        }
+
+        .content {
+          position: relative;
+          border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          box-sizing: border-box;
+          border-radius: 4px;
+        }
+
+        .btn_copy {
+        }
+
+        .box-icon {
+          bottom: -1px;
+          right: -1px;
+          z-index: 1;
+        }
+
+        .code .box-icon {
+          border-radius: 3px;
+        }
+
+        .code .cm-content,
+        .code .cm-gutters {
+          height: var(--input-medium--h);
+        }
+
+        .large .code .cm-content,
+        .large .code .cm-gutters {
+          height: var(--input-large--h);
+        }
+
+        .small .code .cm-content,
+        .small .code .cm-gutters {
+          height: var(--input-small--h);
+        }
+
+        /**  Override Codemirror theme */
+        .input .cm-gutters {
+          display: none;
+        }
+
+        .input .cm-scroller {
+          overflow: hidden;
+        }
+
+        .input .cm-activeLine,
+        :host([readonly]) .cm-activeLine {
+          background-color: transparent;
+        }
+
+        .input .cm-content {
+          padding: 0;
+        }
+
+        :host([invalid]) .cm-gutters {
+          border-color: var(--gv-theme-color-error, #da1a1b);
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-code', GvCode);

package/dist/src/molecules/gv-confirm.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Confirm component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @extends GvPopover
+ *
+ * @attr {String} event - the event that triggers the opening
+ * @attr {String} okLabel - the label of ok btn
+ * @attr {String} cancelLabel - the label of cancel btn
+ * @attr {String} icon - the icon before message
+ * @attr {String} message - the message
+ * @attr {Boolean} disabled - same as native button element `disabled` attribute
+ *
+ * @cssprop {Color} [--gv-confirm--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Length} [--gv-confirm--maw=350px] - Max width
+ */
+export class GvConfirm extends GvPopover {
+    static get properties(): {
+        /**
+         * @default i18n: gv-confirm.cancel
+         */
+        cancelLabel: {
+            type: StringConstructor;
+        };
+        /**
+         * @default i18n: gv-confirm.ok
+         */
+        okLabel: {
+            type: StringConstructor;
+        };
+        message: {
+            type: StringConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        danger: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        _disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResult[])[];
+    icon: string;
+    cancelLabel: string;
+    okLabel: string;
+    _onCancel(): void;
+    _onOk(): void;
+    _disabled: any;
+    _reflectDisabledOnSlot(): void;
+    _calculateIsDisabled(): any;
+}
+import { GvPopover } from "./gv-popover";

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

@@ -0,0 +1,175 @@
+/*
+ * 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';
+import '../atoms/gv-button';
+import '../atoms/gv-icon';
+import { i18n } from '../lib/i18n';
+import { GvPopover } from './gv-popover';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Confirm component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @extends GvPopover
+ *
+ * @attr {String} event - the event that triggers the opening
+ * @attr {String} okLabel - the label of ok btn
+ * @attr {String} cancelLabel - the label of cancel btn
+ * @attr {String} icon - the icon before message
+ * @attr {String} message - the message
+ * @attr {Boolean} disabled - same as native button element `disabled` attribute
+ *
+ * @cssprop {Color} [--gv-confirm--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Length} [--gv-confirm--maw=350px] - Max width
+ */
+export class GvConfirm extends GvPopover {
+    static get properties() {
+        return {
+            /**
+             * @default i18n: gv-confirm.cancel
+             */
+            cancelLabel: { type: String },
+            /**
+             * @default i18n: gv-confirm.ok
+             */
+            okLabel: { type: String },
+            message: { type: String },
+            icon: { type: String },
+            danger: { type: Boolean, reflect: true },
+            disabled: { type: Boolean },
+            _disabled: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            GvPopover.styles,
+            // language=CSS
+            css `
+        :host {
+          --gv-icon--s: 24px;
+          margin: 0.2rem;
+          box-sizing: border-box;
+        }
+
+        :host([danger]) .message gv-icon {
+          --gv-icon--c: var(--gv-theme-color-danger, #ff5722);
+        }
+
+        .popover {
+          --bgc: var(--gv-confirm--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
+          --maw: var(--gv-confirm--maw, 350px);
+        }
+
+        .message {
+          display: flex;
+          align-items: center;
+          margin: 1rem 0.5rem;
+        }
+
+        .message gv-icon {
+          margin-right: 0.5rem;
+        }
+
+        .text {
+          text-align: center;
+          line-height: 24px;
+          width: 100%;
+        }
+
+        .actions {
+          text-align: right;
+        }
+
+        ::slotted(*) {
+          margin: 0;
+          width: 100%;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.event = 'click';
+        this.arrow = true;
+        this.auto = true;
+        this.icon = 'code:info';
+        this.cancelLabel = i18n('gv-confirm.cancel');
+        this.okLabel = i18n('gv-confirm.ok');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this._closeHandler);
+        window.addEventListener('scroll', this._closeHandler);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this._closeHandler);
+        window.removeEventListener('scroll', this._closeHandler);
+        super.disconnectedCallback();
+    }
+    _onCancel() {
+        this.close();
+        dispatchCustomEvent(this, 'cancel');
+    }
+    _onOk() {
+        this.close();
+        dispatchCustomEvent(this, 'ok');
+    }
+    _open(e) {
+        if (!this._disabled) {
+            super._open(e);
+        }
+    }
+    renderContent() {
+        return html `
+      <div class="message">
+        ${this.icon ? html `<gv-icon shape="${this.icon}"></gv-icon>` : ''}
+        <div class="text" .innerHTML="${this.message}"></div>
+      </div>
+      <div class="actions">
+        <gv-button primary small outlined @click="${this._onCancel}">${this.cancelLabel}</gv-button>
+        <gv-button primary small @click="${this._onOk}">${this.okLabel}</gv-button>
+      </div>
+    `;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.danger) {
+            this.shadowRoot.querySelectorAll('gv-button').forEach((btn) => btn.setAttribute('danger', ''));
+        }
+        this._disabled = this._calculateIsDisabled();
+        if (this.disabled) {
+            this._reflectDisabledOnSlot();
+        }
+    }
+    _reflectDisabledOnSlot() {
+        const slot = this.shadowRoot.querySelector('slot');
+        const childNodes = slot.assignedNodes({ flatten: true });
+        childNodes.forEach((node) => {
+            node.disabled = true;
+        });
+    }
+    _calculateIsDisabled() {
+        const slot = this.shadowRoot.querySelector('slot');
+        const childNodes = slot.assignedNodes({ flatten: true });
+        const isSlotButtonDisabled = childNodes
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+            .some((node) => Boolean(node.getAttribute('disabled')) === true);
+        return this.disabled || isSlotButtonDisabled;
+    }
+}
+window.customElements.define('gv-confirm', GvConfirm);

package/dist/src/molecules/gv-cron-editor.d.ts

@@ -0,0 +1,115 @@
+declare const GvCronEditor_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * Cron editor component
+ *
+ * ## Details
+ *
+ * @fires gv-cron-editor:input - input events with the `value` on `detail`
+ *
+ * @attr {String} label - cron editor label
+ * @attr {String} value - cron expression
+ * @attr {String} mode - the opened mode (if no value is set, the pro mode will be opened)
+ *
+ * @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 GvCronEditor extends GvCronEditor_base {
+    static get properties(): any;
+    static get styles(): import("lit").CSSResult[];
+    _value: string;
+    readonly: boolean;
+    autofocus: boolean;
+    clipboard: boolean;
+    _modes: string[];
+    _timeRange: number[];
+    _days: {
+        value: string;
+        label: string;
+    }[];
+    _months: string[];
+    _state: {
+        seconds: {
+            seconds: number;
+        };
+        minutes: {
+            minutes: number;
+            seconds: number;
+        };
+        hourly: {
+            hours: number;
+            minutes: number;
+            seconds: number;
+        };
+        daily: {
+            days: number;
+            time: number;
+            weekdays: boolean;
+        };
+        weekly: {
+            days: never[];
+            time: number;
+        };
+        monthly: {
+            day: number;
+            month: number;
+            time: number;
+        };
+        yearly: {
+            day: number;
+            month: number;
+            time: number;
+        };
+        pro: {
+            value: string;
+            displayDetails: boolean;
+        };
+    };
+    _docs: {
+        id: string;
+        label: string;
+    }[];
+    _currentDocumentationId: string;
+    _handleChange: ({ target, detail }: {
+        target: any;
+        detail: any;
+    }) => void;
+    _small: boolean;
+    tryToComputeAndInitModeFromValue(): void;
+    mode: any;
+    onResize({ width }: {
+        width: any;
+    }): void;
+    _truncateTabs: boolean | undefined;
+    set value(arg: string);
+    get value(): string;
+    firstUpdated(): Promise<void>;
+    _onOpenDocumentation(docId: any): void;
+    _onChange({ target, detail }: {
+        target: any;
+        detail: any;
+    }): void;
+    _onChangeTab(event: any): void;
+    _getTimeExpression(date: any): string;
+    generate(): void;
+    updateState(value: any): void;
+    renderLabel(): "" | import("lit-html").TemplateResult<1>;
+    displayProDetails(): void;
+    renderProDetails(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    get allowedValues(): "" | "0-23" | "1-31" | "1-12 or JAN-DEC" | "1-7 or SUN-SAT" | "0-59";
+    get allowedChar(): "" | ",-*/";
+    _getDaySuffix(day?: number): "" | "th" | "st" | "nd" | "rd";
+}
+export {};