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

package/dist/src/mixins/input-element.d.ts

@@ -0,0 +1,64 @@
+export function InputElement(ParentClass: any): {
+    new (): {
+        [x: string]: any;
+        _id: string;
+        valid: boolean;
+        invalid: boolean;
+        updateState(value: any): void;
+        setValidity(isInvalid?: boolean, violation?: string): void;
+        firstUpdated(): void;
+        updated(changedProperties: any): void;
+        getInputElement(): any;
+        readonly offsetHeight: any;
+        renderLabel(): "" | import("lit-html").TemplateResult<1>;
+    };
+    [x: string]: any;
+    readonly properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};

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.d.ts

@@ -0,0 +1,56 @@
+/**
+ * This is a mixin for ItemResource
+ * @mixinFunction
+ */
+export function ItemResource(ParentClass: any): {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _onImageLoaded(): void;
+        _skeleton: boolean;
+        _renderImage(): "" | import("lit-html").TemplateResult<1>;
+        _onTagClick(tagValue: any, event: any): void;
+        _renderLabels(clickable: any): unknown;
+        _renderStates(): unknown;
+        _onClickToMetrics(event: any): void;
+        _renderMetricsWithRating(): "" | import("lit-html").TemplateResult<1>;
+        _renderInfoRating(): "" | import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    readonly properties: {
+        /** @required */
+        item: {
+            type: ObjectConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        metrics: {
+            type: ObjectConstructor;
+        };
+        _item: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _invisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};

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.d.ts

@@ -0,0 +1,25 @@
+export function KeyboardElement(ParentClass: any): {
+    new (): {
+        [x: string]: any;
+        _controller: {};
+        _handleKeyDown: (e: any) => void;
+        _handleKeyUp: (e: any) => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        _onKeyDown(e: any): void;
+        _onKeyUp(e: any): void;
+        isPressed(...keys: any[]): boolean;
+        onKeyboard(controller: any): void;
+    };
+    [x: string]: any;
+};
+export namespace KEYS {
+    const ArrowDown: string;
+    const ArrowLeft: string;
+    const ArrowRight: string;
+    const ArrowUp: string;
+    const Ctrl: string;
+    const Esc: string;
+    const Shift: string;
+    const Space: string;
+}

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.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This is a mixin for update component after browser
+ * @mixinFunction
+ */
+export function UpdateAfterBrowser(ParentClass: any): {
+    new (): {
+        [x: string]: any;
+        performUpdate(): Promise<void>;
+    };
+    [x: string]: any;
+};

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.d.ts

@@ -0,0 +1,12 @@
+export function withResizeObserver(ParentClass: any): {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};

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();
+            }
+        }
+    };
+}

package/dist/src/mixins/with-skeleton-attribute.d.ts

@@ -0,0 +1,35 @@
+/**
+ * This is a mixin for withSkeletonStates
+ * @mixinFunction
+ */
+export function withSkeletonAttribute(ParentClass: any): {
+    new (): {
+        [x: string]: any;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    [x: string]: any;
+    readonly properties: {
+        /** @required */
+        _invisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};