@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

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

@@ -1,250 +1 @@
-/*
- * 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);
+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);

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

@@ -1,154 +1 @@
-/*
- * 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);
+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);