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

package/dist/src/organisms/gv-schema-form-array.js

@@ -0,0 +1,237 @@
+/*
+ * 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 { canInline } from '../lib/schema-form';
+import { dispatchCustomEvent } from '../lib/events';
+import { classMap } from 'lit/directives/class-map';
+import { skeleton } from '../styles/skeleton';
+import { UpdateAfterBrowser } from '../mixins/update-after-browser';
+/**
+ * Schema form array component
+ *
+ */
+export class GvSchemaFormArray extends UpdateAfterBrowser(LitElement) {
+    static get properties() {
+        return {
+            schema: { type: Object },
+            value: { type: Array },
+            id: { type: String, reflect: true },
+            title: { type: String, reflect: true },
+            description: { type: String },
+            skeleton: { type: Boolean, reflect: true },
+            errors: { type: Array },
+            readonly: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = [];
+    }
+    _onNew() {
+        const newValue = this.schema.type === 'object' ? {} : '';
+        this.value = [...this.value, newValue];
+        dispatchCustomEvent(this, 'input', this.value);
+    }
+    _onRemove(index) {
+        this.value.splice(index, 1, null);
+        this.value = this.value.filter((e) => e != null);
+        dispatchCustomEvent(this, 'input', this.value);
+    }
+    _renderValue(value, index) {
+        const isRequired = this.schema.required;
+        const isDisabled = this.schema.disabled;
+        const id = `${this.id}.${index}`;
+        const control = { ...this.schema, title: null };
+        const isInline = canInline(this.schema);
+        const classes = {
+            form__item: true,
+            form__item_cards: !isInline,
+        };
+        return html `<div class="${classMap(classes)}" @mouseleave="${this._onMouseLeave}">
+      ${!isInline
+            ? html `<div class="${classMap({ 'form__item-label': true, skeleton: this.skeleton })}">
+            <label>${this.schema.title}</label>
+            ${this.readonly !== true
+                ? html `<gv-button
+                  link
+                  small
+                  @gv-button:click="${this._onRemove.bind(this, index)}"
+                  icon="general:close"
+                  title="Remove"
+                ></gv-button>`
+                : ''}
+          </div>`
+            : ''}
+      <div class="form__item_entry">
+        <gv-schema-form-control
+          .id="${id}"
+          .skeleton="${this.skeleton}"
+          .control="${control}"
+          .value="${value}"
+          ?required="${isRequired}"
+          ?disabled="${isDisabled}"
+          ?readonly="${this.readonly}"
+          compact
+        ></gv-schema-form-control>
+        ${!isInline
+            ? ''
+            : html `<gv-button
+              link
+              small
+              @gv-button:click="${this._onRemove.bind(this, index)}"
+              icon="general:close"
+              title="Remove"
+            ></gv-button>`}
+      </div>
+    </div> `;
+    }
+    _onMouseLeave() {
+        const select = this.shadowRoot.querySelectorAll(`gv-select`);
+        select.forEach((s) => s.close());
+    }
+    getControls() {
+        return [
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control')),
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control-array')),
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control-object')),
+        ];
+    }
+    getControl(id) {
+        return this.shadowRoot.querySelector(`[id="${id}"]`);
+    }
+    async getUpdateComplete() {
+        await super.getUpdateComplete();
+        await Promise.all(this.getControls().map((e) => e.updateComplete));
+    }
+    shouldUpdate(changedProperties) {
+        if (changedProperties.has('errors')) {
+            this.getControls().forEach((control) => {
+                control.errors = this.errors;
+            });
+        }
+        return super.shouldUpdate(changedProperties);
+    }
+    render() {
+        if (this.schema == null) {
+            return html ``;
+        }
+        const open = this.schema['x-schema-form'] == null || this.schema['x-schema-form'].open !== false;
+        return html `<gv-expandable class="form__control-array" ?open="${open}">
+      <div slot="summary" class="form__item-group-header">
+        <div class="form__item-group-title">
+          <label><span>${this.title || this.id}</span><span class="form__item-length">(${this.value.length})</span></label>
+          ${this.description ? html `<div class="description">${this.description}</div>` : ''}
+        </div>
+        ${this.readonly !== true
+            ? html `<gv-button outlined small icon="code:plus" @gv-button:click="${this._onNew}">New ${this.schema.title}</gv-button>`
+            : ''}
+      </div>
+      <div class="form__item-group" id="${this.id}" slot="details">
+        ${this.value != null && Array.isArray(this.value) ? this.value.map((value, index) => this._renderValue(value, index)) : ''}
+      </div>
+    </gv-expandable>`;
+    }
+    static get styles() {
+        return [
+            skeleton,
+            // language=CSS
+            css `
+        .form__item-length {
+          font-size: 12px;
+          color: #bfbfbf;
+          margin: 0 0.2rem;
+        }
+
+        .form__item-group {
+          position: relative;
+          transition: all 0.3s ease-in-out;
+        }
+
+        .form__item_cards form__item-group:hover {
+          background-color: #efefef;
+        }
+
+        .form__item-group-header {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          transition: all 0.3s ease-in-out;
+          background-color: var(--gv-schema-form--bgc, #ffffff);
+        }
+
+        .form__item-group-header label {
+          flex: 1;
+          margin: 0;
+        }
+
+        .form__item-group-title {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+        }
+
+        .description {
+          opacity: 0.6;
+          font-size: var(--gv-theme-font-size-s, 12px);
+        }
+
+        .form__item_cards {
+          border: 1px solid #d9d9d9;
+          border-radius: 4px;
+          margin: 0.5rem;
+          background-color: white;
+          transition: all 0.3s ease-in-out;
+          z-index: 50;
+        }
+
+        .form__item_cards:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 20px -10px #bfbfbf;
+          z-index: 60;
+        }
+
+        .form__item_entry {
+          display: flex;
+        }
+
+        .form__item_entry gv-schema-form-control {
+          flex: 1;
+        }
+
+        .form__item-label {
+          font-style: italic;
+          display: flex;
+          flex-direction: row;
+          border-bottom: 1px solid #d9d9d9;
+          padding: 0.5rem;
+        }
+
+        .form__item-label > label {
+          flex: 1;
+        }
+
+        .form__item .form_control-inline > * {
+          margin-left: 0;
+        }
+
+        .form__item .form_control-inline > *:first-child {
+          margin-left: 0.5rem;
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-schema-form-array', GvSchemaFormArray);

package/dist/src/organisms/gv-schema-form-control-object.d.ts

@@ -0,0 +1,64 @@
+declare const GvSchemaFormControlObject_base: {
+    new (): {
+        [x: string]: any;
+        performUpdate(): Promise<void>;
+    };
+    [x: string]: any;
+};
+/**
+ * Schema form control object component
+ */
+export class GvSchemaFormControlObject extends GvSchemaFormControlObject_base {
+    static get properties(): {
+        schema: {
+            type: ObjectConstructor;
+        };
+        value: {
+            type: ObjectConstructor;
+            reflect: boolean;
+        };
+        id: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        title: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        errors: {
+            type: ArrayConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        hidden: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        compact: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    value: any[];
+    _renderPart(subKey: any): import("lit-html").TemplateResult<1>;
+    getControls(): any[];
+    getControl(id: any): any;
+    getUpdateComplete(): Promise<void>;
+    shouldUpdate(changedProperties: any): any;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/src/organisms/gv-schema-form-control-object.js

@@ -0,0 +1,141 @@
+/*
+ * 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 { canInline, canGrid } from '../lib/schema-form';
+import { classMap } from 'lit/directives/class-map';
+import { skeleton } from '../styles/skeleton';
+import '../molecules/gv-expandable';
+import { UpdateAfterBrowser } from '../mixins/update-after-browser';
+/**
+ * Schema form control object component
+ */
+export class GvSchemaFormControlObject extends UpdateAfterBrowser(LitElement) {
+    static get properties() {
+        return {
+            schema: { type: Object },
+            value: { type: Object, reflect: true },
+            id: { type: String, reflect: true },
+            title: { type: String, reflect: true },
+            errors: { type: Array },
+            skeleton: { type: Boolean, reflect: true },
+            readonly: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            required: { type: Boolean, reflect: true },
+            hidden: { type: Boolean, reflect: true },
+            compact: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this.value = [];
+    }
+    _renderPart(subKey) {
+        const isRequired = this.required || (this.schema.required && this.schema.required.includes(subKey));
+        const isDisabled = this.disabled || (this.schema.disabled && this.schema.disabled.includes(subKey));
+        const fullKey = this.id != null ? `${this.id}.${subKey}` : subKey;
+        const control = { ...this.schema.properties[subKey] };
+        const value = this.value != null ? this.value[subKey] : null;
+        return html `<gv-schema-form-control
+      .id="${fullKey}"
+      .control="${control}"
+      .value="${value}"
+      .skeleton="${this.skeleton}"
+      ?required="${isRequired}"
+      ?disabled="${isDisabled}"
+      ?readonly="${this.readonly}"
+      ?hidden="${this.hidden}"
+      class="control"
+      ?compact="${this.compact}"
+    ></gv-schema-form-control>`;
+    }
+    getControls() {
+        return [
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control')),
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control-array')),
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control-object')),
+        ];
+    }
+    getControl(id) {
+        return this.shadowRoot.querySelector(`[id="${id}"]`);
+    }
+    async getUpdateComplete() {
+        await super.getUpdateComplete();
+        await Promise.all(this.getControls().map((e) => e.updateComplete));
+    }
+    shouldUpdate(changedProperties) {
+        if (changedProperties.has('errors')) {
+            this.getControls().forEach((control) => {
+                control.errors = this.errors;
+            });
+        }
+        return super.shouldUpdate(changedProperties);
+    }
+    render() {
+        const keys = Object.keys(this.schema.properties);
+        const isGrid = canGrid(this.schema);
+        const classes = {
+            'form_control-inline': canInline(this.schema),
+            'form_control-grid': isGrid,
+            'form_control-grid-odd': isGrid && keys.length % 2 !== 0,
+        };
+        const titleClasses = {
+            'form__control-group-title': true,
+            skeleton: this.skeleton,
+        };
+        const details = keys.map((key) => this._renderPart(key));
+        if (this.title) {
+            const open = this.schema['x-schema-form'] == null || this.schema['x-schema-form'].open !== false;
+            return html `<gv-expandable ?open="${open}">
+        <div slot="summary" class="${classMap(titleClasses)}" title="${this.title}">${this.title}</div>
+        <div slot="details" class="${classMap(classes)}">${details}</div>
+      </gv-expandable>`;
+        }
+        else {
+            return html `<div class="${classMap(classes)}">${details}</div>`;
+        }
+    }
+    static get styles() {
+        return [
+            skeleton,
+            // language=CSS
+            css `
+        .form__control-group-title {
+          padding: 0.5rem 0;
+        }
+
+        .form_control-inline,
+        .form_control-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+        }
+
+        .form_control-grid-odd *:first-child {
+          grid-column: 1 / 3;
+        }
+
+        .form_control-inline > * {
+          --gv-schema-form-control--m: 0 0.2rem 0 0;
+          overflow: auto;
+        }
+
+        .form_control-inline > *:last-child {
+          --gv-schema-form-control--m: 0 0 0 0.2rem;
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-schema-form-control-object', GvSchemaFormControlObject);

package/dist/src/organisms/gv-schema-form-control.d.ts

@@ -0,0 +1,90 @@
+declare const GvSchemaFormControl_base: {
+    new (): {
+        [x: string]: any;
+        performUpdate(): Promise<void>;
+    };
+    [x: string]: any;
+};
+export class GvSchemaFormControl extends GvSchemaFormControl_base {
+    static get properties(): {
+        type: {
+            type: StringConstructor;
+        };
+        id: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        title: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        pattern: {
+            type: StringConstructor;
+        };
+        control: {
+            type: ObjectConstructor;
+        };
+        errors: {
+            type: ArrayConstructor;
+        };
+        value: {
+            type: ObjectConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        hidden: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        writeOnly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        compact: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _observedProperties: string[];
+    isExpressionLanguage(): any;
+    isCronExpression(): any;
+    isPassword(): any;
+    getPlaceholder(): any;
+    isCodemirror(): any;
+    isObject(): boolean;
+    isAutocomplete(): any;
+    isText(): any;
+    getElementName(): "gv-input" | "gv-button" | "gv-select-native" | "gv-select" | "gv-switch" | "gv-text" | "gv-code" | "gv-cron-editor" | "gv-expression-language" | "gv-schema-form-control-object" | "gv-schema-form-array";
+    _updateProperties(element: any): void;
+    _renderControl(): HTMLElement;
+    value: any;
+    _onInput(e: any): void;
+    getControls(): any[];
+    getControl(id: any): any;
+    _setValue(controlElement: any): any;
+    updated(changedProperties: any): Promise<void>;
+    getUpdateComplete(): Promise<void>;
+    formatErrorMessage(error: any): string;
+    shouldUpdate(changedProperties: any): any;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};