@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

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

@@ -1 +1,237 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvSchemaFormArray=void 0;const e=require("lit"),t=require("../lib/schema-form"),r=require("../lib/events"),o=require("lit/directives/class-map"),s=require("../styles/skeleton"),i=require("../mixins/update-after-browser");class l extends((0,i.UpdateAfterBrowser)(e.LitElement)){static get properties(){return{schema:{type:Object},value:{type:Array},id:{type:String,reflect:!0},title:{type:String,reflect:!0},description:{type:String},skeleton:{type:Boolean,reflect:!0},errors:{type:Array},readonly:{type:Boolean,reflect:!0}}}constructor(){super(),this.value=[]}_onNew(){const e="object"===this.schema.type?{}:"";this.value=[...this.value,e],(0,r.dispatchCustomEvent)(this,"input",this.value)}_onRemove(e){this.value.splice(e,1,null),this.value=this.value.filter((e=>null!=e)),(0,r.dispatchCustomEvent)(this,"input",this.value)}_renderValue(r,s){const i=this.schema.required,l=this.schema.disabled,a=`${this.id}.${s}`,n={...this.schema,title:null},m=(0,t.canInline)(this.schema),c={form__item:!0,form__item_cards:!m};return e.html`<div class="${(0,o.classMap)(c)}" @mouseleave="${this._onMouseLeave}">${m?"":e.html`<div class="${(0,o.classMap)({"form__item-label":!0,skeleton:this.skeleton})}"><label>${this.schema.title}</label> ${!0!==this.readonly?e.html`<gv-button link small @gv-button:click="${this._onRemove.bind(this,s)}" icon="general:close" title="Remove"></gv-button>`:""}</div>`}<div class="form__item_entry"><gv-schema-form-control .id="${a}" .skeleton="${this.skeleton}" .control="${n}" .value="${r}" ?required="${i}" ?disabled="${l}" ?readonly="${this.readonly}" compact="compact"></gv-schema-form-control>${m?e.html`<gv-button link small @gv-button:click="${this._onRemove.bind(this,s)}" icon="general:close" title="Remove"></gv-button>`:""}</div></div>`}_onMouseLeave(){this.shadowRoot.querySelectorAll("gv-select").forEach((e=>e.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(e){return this.shadowRoot.querySelector(`[id="${e}"]`)}async getUpdateComplete(){await super.getUpdateComplete(),await Promise.all(this.getControls().map((e=>e.updateComplete)))}shouldUpdate(e){return e.has("errors")&&this.getControls().forEach((e=>{e.errors=this.errors})),super.shouldUpdate(e)}render(){if(null==this.schema)return e.html``;const t=null==this.schema["x-schema-form"]||!1!==this.schema["x-schema-form"].open;return e.html`<gv-expandable class="form__control-array" ?open="${t}"><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?e.html`<div class="description">${this.description}</div>`:""}</div>${!0!==this.readonly?e.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">${null!=this.value&&Array.isArray(this.value)?this.value.map(((e,t)=>this._renderValue(e,t))):""}</div></gv-expandable>`}static get styles(){return[s.skeleton,e.css`.form__item-length{font-size:12px;color:#bfbfbf;margin:0 .2rem}.form__item-group{position:relative;transition:all .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 .3s ease-in-out;background-color:var(--gv-schema-form--bgc,#fff)}.form__item-group-header label{flex:1;margin:0}.form__item-group-title{display:flex;flex-direction:column;flex:1}.description{opacity:.6;font-size:var(--gv-theme-font-size-s,12px)}.form__item_cards{border:1px solid #d9d9d9;border-radius:4px;margin:.5rem;background-color:#fff;transition:all .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:.5rem}.form__item-label>label{flex:1}.form__item .form_control-inline>*{margin-left:0}.form__item .form_control-inline>:first-child{margin-left:.5rem}`]}}exports.GvSchemaFormArray=l,window.customElements.define("gv-schema-form-array",l);
+/*
+ * 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/src/organisms/gv-schema-form-control-object.js

@@ -1 +1,141 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvSchemaFormControlObject=void 0;const e=require("lit"),t=require("../lib/schema-form"),r=require("lit/directives/class-map"),o=require("../styles/skeleton");require("../molecules/gv-expandable");const s=require("../mixins/update-after-browser");class l extends((0,s.UpdateAfterBrowser)(e.LitElement)){static get properties(){return{schema:{type:Object},value:{type:Object,reflect:!0},id:{type:String,reflect:!0},title:{type:String,reflect:!0},errors:{type:Array},skeleton:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},hidden:{type:Boolean,reflect:!0},compact:{type:Boolean}}}constructor(){super(),this.value=[]}_renderPart(t){const r=this.required||this.schema.required&&this.schema.required.includes(t),o=this.disabled||this.schema.disabled&&this.schema.disabled.includes(t),s=null!=this.id?`${this.id}.${t}`:t,l={...this.schema.properties[t]},i=null!=this.value?this.value[t]:null;return e.html`<gv-schema-form-control .id="${s}" .control="${l}" .value="${i}" .skeleton="${this.skeleton}" ?required="${r}" ?disabled="${o}" ?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(e){return this.shadowRoot.querySelector(`[id="${e}"]`)}async getUpdateComplete(){await super.getUpdateComplete(),await Promise.all(this.getControls().map((e=>e.updateComplete)))}shouldUpdate(e){return e.has("errors")&&this.getControls().forEach((e=>{e.errors=this.errors})),super.shouldUpdate(e)}render(){const o=Object.keys(this.schema.properties),s=(0,t.canGrid)(this.schema),l={"form_control-inline":(0,t.canInline)(this.schema),"form_control-grid":s,"form_control-grid-odd":s&&o.length%2!=0},i={"form__control-group-title":!0,skeleton:this.skeleton},a=o.map((e=>this._renderPart(e)));if(this.title){const t=null==this.schema["x-schema-form"]||!1!==this.schema["x-schema-form"].open;return e.html`<gv-expandable ?open="${t}"><div slot="summary" class="${(0,r.classMap)(i)}" title="${this.title}">${this.title}</div><div slot="details" class="${(0,r.classMap)(l)}">${a}</div></gv-expandable>`}return e.html`<div class="${(0,r.classMap)(l)}">${a}</div>`}static get styles(){return[o.skeleton,e.css`.form__control-group-title{padding:.5rem 0}.form_control-grid,.form_control-inline{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}`]}}exports.GvSchemaFormControlObject=l,window.customElements.define("gv-schema-form-control-object",l);
+/*
+ * 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);