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

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

@@ -1,443 +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, LitElement, html } from 'lit';
-import { dispatchCustomEvent } from '../lib/events';
-import '../atoms/gv-input';
-import '../atoms/gv-input-message';
-import '../atoms/gv-text';
-import '../atoms/gv-select';
-import '../atoms/gv-select-native';
-import '../atoms/gv-switch';
-import '../molecules/gv-code';
-import '../molecules/gv-expression-language';
-import '../molecules/gv-cron-editor';
-import '../atoms/gv-autocomplete';
-import '../organisms/gv-schema-form-array';
-import '../organisms/gv-schema-form-control-object';
-import { isCodemirror, isObject, isComplexArray } from '../lib/schema-form';
-import { UpdateAfterBrowser } from '../mixins/update-after-browser';
-
-export class GvSchemaFormControl extends UpdateAfterBrowser(LitElement) {
-  static get properties() {
-    return {
-      type: { type: String },
-      id: { type: String, reflect: true },
-      name: { type: String, reflect: true },
-      required: { type: Boolean, reflect: true },
-      disabled: { type: Boolean, reflect: true },
-      readonly: { type: Boolean, reflect: true },
-      title: { type: String, reflect: true },
-      pattern: { type: String },
-      control: { type: Object },
-      errors: { type: Array },
-      value: { type: Object, reflect: true },
-      skeleton: { type: Boolean, reflect: true },
-      hidden: { type: Boolean, reflect: true },
-      writeOnly: { type: Boolean, reflect: true },
-      compact: { type: Boolean },
-    };
-  }
-
-  constructor() {
-    super();
-    // When form has errors, the control is not update to conserve the error state.
-    // This list is used to force the update of properties even in error case.
-    this._observedProperties = ['disabled', 'readonly', 'required'];
-  }
-
-  isExpressionLanguage() {
-    return this.control['x-schema-form'] && this.control['x-schema-form']['expression-language'] != null;
-  }
-
-  isCronExpression() {
-    return this.control['x-schema-form'] && this.control['x-schema-form']['cron-expression'] === true;
-  }
-
-  isPassword() {
-    return (
-      this.control.writeOnly === true ||
-      (this.control['x-schema-form'] && this.control['x-schema-form'].type != null && this.control['x-schema-form'].type === 'password')
-    );
-  }
-
-  getPlaceholder() {
-    return this.control['x-schema-form'] && this.control['x-schema-form'].placeholder ? this.control['x-schema-form'].placeholder : null;
-  }
-
-  isCodemirror() {
-    return isCodemirror(this.control);
-  }
-
-  isObject() {
-    return isObject(this.control);
-  }
-
-  isAutocomplete() {
-    return this.control['x-schema-form'] && this.control['x-schema-form'].event != null && this.control.type === 'string';
-  }
-
-  isText() {
-    return this.control['x-schema-form'] && this.control['x-schema-form'].type === 'text' && this.control.type === 'string';
-  }
-
-  getElementName() {
-    if (this.isObject()) {
-      return 'gv-schema-form-control-object';
-    }
-    if ((this.control.enum || (this.control.items && this.control.items.enum)) && !this.isAutocomplete()) {
-      if (this.control.type === 'array') {
-        return 'gv-select';
-      }
-      return 'gv-select-native';
-    } else if (isComplexArray(this.control)) {
-      return 'gv-schema-form-array';
-    } else if (this.control.type === 'array') {
-      return 'gv-button';
-    } else if (this.control.type === 'boolean') {
-      return 'gv-switch';
-    } else if (this.isExpressionLanguage()) {
-      return 'gv-expression-language';
-    } else if (this.isCodemirror()) {
-      return 'gv-code';
-    } else if (this.isCronExpression()) {
-      return 'gv-cron-editor';
-    } else if (this.isText()) {
-      return 'gv-text';
-    }
-
-    return 'gv-input';
-  }
-
-  _updateProperties(element) {
-    if (element != null) {
-      this._observedProperties.forEach((property) => {
-        if (this[property] != null) {
-          element[property] = this[property];
-        }
-      });
-    }
-  }
-
-  _renderControl() {
-    const elementName = this.getElementName();
-    const element = document.createElement(elementName);
-    element.id = this.id;
-    element.name = this.id;
-    element.skeleton = this.skeleton;
-    element.classList.add('form__control');
-    if (this.value == null && this.control.default != null) {
-      this.value = this.control.default;
-      dispatchCustomEvent(this, 'default-value', { value: this.value, currentTarget: element, control: this.control });
-    }
-    if (this.value != null) {
-      this._setValue(element);
-    }
-
-    if (this.control.type === 'object') {
-      element.schema = this.control;
-    } else if (isComplexArray(this.control)) {
-      element.schema = this.control.items;
-    }
-
-    this._updateProperties(element);
-
-    if (this.control.title) {
-      element.label = this.control.title;
-      element.title = this.control.title;
-    } else {
-      const tmp = this.id.split('.');
-      const title = tmp[tmp.length - 1];
-      if (isNaN(parseInt(title, 10))) {
-        element.label = title;
-        element.title = title;
-      }
-    }
-
-    if (this.control.pattern) {
-      element.pattern = this.control.pattern;
-    }
-
-    if (this.control.type === 'integer') {
-      element.type = 'number';
-    }
-
-    if (this.isText()) {
-      element.rows = 3;
-      element.autosize = true;
-      element.placeholder = this.control.description;
-    }
-
-    const placeholder = this.getPlaceholder();
-
-    if (this.control.enum || (this.control.items && this.control.items.enum)) {
-      const options = this.control.enum || this.control.items.enum;
-      if (this.control['x-schema-form'] && this.control['x-schema-form'].titleMap) {
-        element.options = options.map((value) => ({
-          value,
-          label: this.control['x-schema-form'].titleMap[value] || value,
-        }));
-      } else {
-        element.options = options;
-      }
-      if (this.control.type === 'array') {
-        element.multiple = true;
-      }
-    } else if (this.isCodemirror()) {
-      element.options = this.control['x-schema-form'].codemirrorOptions;
-      if (this.control.default != null && element.options.value == null) {
-        element.options.value = this.control.default;
-      }
-    } else if (this.isExpressionLanguage()) {
-      element.options = {};
-      element.rows = 1;
-    } else if (this.isPassword()) {
-      element.type = 'password';
-    }
-
-    if (this.control.description) {
-      element.description = this.control.description;
-    }
-
-    if (this.compact) {
-      element.placeholder = element.description || element.label;
-      element.label = null;
-      element.description = null;
-      element.compact = this.compact;
-    }
-
-    if (placeholder != null) {
-      if (this.isExpressionLanguage() || this.isCodemirror()) {
-        element.options.placeholder = placeholder;
-      } else {
-        element.placeholder = placeholder;
-      }
-    }
-
-    element.addEventListener(`${elementName}:input`, this._onInput.bind(this));
-
-    let currentTarget;
-    if (this.isAutocomplete()) {
-      const autocomplete = document.createElement('gv-autocomplete');
-      autocomplete.minChars = 0;
-      autocomplete.filter = true;
-      element.clearable = true;
-      autocomplete.id = this.id;
-      autocomplete.appendChild(element);
-      autocomplete.addEventListener(`gv-autocomplete:select`, this._onInput.bind(this));
-      element.addEventListener(`gv-input:clear`, this._onInput.bind(this));
-      currentTarget = autocomplete;
-    } else {
-      currentTarget = element;
-    }
-    if (this.control['x-schema-form'] != null) {
-      dispatchCustomEvent(this, 'control-ready', {
-        currentTarget,
-        control: this,
-      });
-    }
-    return currentTarget;
-  }
-
-  _onInput(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    let value = null;
-    if (e.target.tagName === 'GV-AUTOCOMPLETE') {
-      value = e.detail.value;
-    } else {
-      value = e.detail;
-    }
-    dispatchCustomEvent(this, 'change', { value, currentTarget: e.target, control: this.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) {
-    if (id == null) {
-      id = this.id;
-    }
-    return this.shadowRoot.querySelector(`[id="${id}"]`);
-  }
-
-  _setValue(controlElement) {
-    if (this.value != null && controlElement != null) {
-      if (this.control.type === 'boolean' || this.control.type === 'array' || this.control.type === 'object') {
-        controlElement.value = this.value;
-      } else {
-        controlElement.value = this.value.toString ? this.value.toString() : this.value;
-      }
-    }
-    return controlElement;
-  }
-
-  async updated(changedProperties) {
-    if (changedProperties.has('value')) {
-      Promise.all(this.getControls().map((control) => control.updateComplete)).then(() => {
-        this._setValue(this.getControl());
-      });
-    }
-  }
-
-  async getUpdateComplete() {
-    await super.getUpdateComplete();
-    await Promise.all(this.getControls().map((e) => e.updateComplete));
-  }
-
-  formatErrorMessage(error) {
-    let title;
-    if (this.control.properties != null && this.control.properties[error.argument] != null) {
-      title = this.control.properties[error.argument].title;
-    } else {
-      title = this.control.title;
-    }
-    if (title) {
-      return `<span>${error.message.replace(error.argument, title)}</span>`;
-    }
-    return `<span>${error.message}</span>`;
-  }
-
-  shouldUpdate(changedProperties) {
-    if (this._observedProperties.find((property) => changedProperties.has(property)) != null) {
-      this._updateProperties(this.getControl());
-    }
-
-    if (changedProperties.has('errors') && this.errors != null) {
-      // Set errors to complex controls
-      this.getControls().forEach((control) => {
-        control.errors = this.errors;
-      });
-
-      // Find simple controls and append error message
-      const errorContainer = this.shadowRoot.querySelectorAll('.form__control-error');
-      errorContainer.forEach((container) => (container.innerHTML = ''));
-      this.errors.forEach((error) => {
-        const key = error.property === 'instance' ? error.argument : error.property.replace('instance.', '');
-        const errorContainer = this.shadowRoot.querySelector(`[id="${key}-error"]`);
-        if (errorContainer) {
-          const message = document.createElement('gv-input-message');
-          message.innerHTML = this.formatErrorMessage(error);
-          message.level = 'warn';
-          errorContainer.appendChild(message);
-        }
-      });
-      return false;
-    }
-    return super.shouldUpdate(changedProperties);
-  }
-
-  render() {
-    return html`
-      ${this._renderControl()}
-      <div class="form__control-error" id="${this.id + '-error'}"></div>
-    `;
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          margin: var(--gv-schema-form-control--m, 0.4rem);
-          display: block;
-        }
-
-        :host([hidden]) {
-          visibility: hidden;
-          height: 0;
-          margin: 0;
-          padding: 0;
-          overflow: hidden;
-        }
-
-        .form__control-description,
-        .form__control-error {
-          font-size: 12px;
-        }
-
-        .form__control-description {
-          opacity: 0.8;
-        }
-
-        .form__control-label {
-          display: flex;
-          flex-direction: row;
-          border-bottom: 1px solid #d9d9d9;
-        }
-
-        label {
-          margin: 0.2rem;
-        }
-
-        .form__control-label label {
-          flex: 1;
-          text-transform: capitalize;
-        }
-
-        .form__control-array,
-        .form__control-object {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .form__control-enum {
-          display: flex;
-          /*align-items: flex-end;*/
-        }
-
-        .form__control-array gv-button {
-          align-self: flex-end;
-        }
-
-        .form__control {
-          position: relative;
-        }
-
-        gv-select,
-        gv-select-native,
-        gv-input,
-        gv-code,
-        gv-switch,
-        gv-expression-language {
-          width: 100%;
-          margin: 0.2rem 0;
-        }
-
-        gv-select:hover,
-        gv-select-native:hover,
-        gv-autocomplete:hover {
-          z-index: 70;
-        }
-
-        .error {
-          color: var(--gv-theme-color-error, #f44336);
-        }
-
-        .warning {
-          color: var(--gv-theme-color-warning, #ff9800);
-        }
-      `,
-    ];
-  }
-}
-
-window.customElements.define('gv-schema-form-control', GvSchemaFormControl);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvSchemaFormControl=void 0;const e=require("lit"),t=require("../lib/events");require("../atoms/gv-input"),require("../atoms/gv-input-message"),require("../atoms/gv-text"),require("../atoms/gv-select"),require("../atoms/gv-select-native"),require("../atoms/gv-switch"),require("../molecules/gv-code"),require("../molecules/gv-expression-language"),require("../molecules/gv-cron-editor"),require("../atoms/gv-autocomplete"),require("../organisms/gv-schema-form-array"),require("../organisms/gv-schema-form-control-object");const r=require("../lib/schema-form"),o=require("../mixins/update-after-browser");class s extends((0,o.UpdateAfterBrowser)(e.LitElement)){static get properties(){return{type:{type:String},id:{type:String,reflect:!0},name:{type:String,reflect:!0},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},title:{type:String,reflect:!0},pattern:{type:String},control:{type:Object},errors:{type:Array},value:{type:Object,reflect:!0},skeleton:{type:Boolean,reflect:!0},hidden:{type:Boolean,reflect:!0},writeOnly:{type:Boolean,reflect:!0},compact:{type:Boolean}}}constructor(){super(),this._observedProperties=["disabled","readonly","required"]}isExpressionLanguage(){return this.control["x-schema-form"]&&null!=this.control["x-schema-form"]["expression-language"]}isCronExpression(){return this.control["x-schema-form"]&&!0===this.control["x-schema-form"]["cron-expression"]}isPassword(){return!0===this.control.writeOnly||this.control["x-schema-form"]&&null!=this.control["x-schema-form"].type&&"password"===this.control["x-schema-form"].type}getPlaceholder(){return this.control["x-schema-form"]&&this.control["x-schema-form"].placeholder?this.control["x-schema-form"].placeholder:null}isCodemirror(){return(0,r.isCodemirror)(this.control)}isObject(){return(0,r.isObject)(this.control)}isAutocomplete(){return this.control["x-schema-form"]&&null!=this.control["x-schema-form"].event&&"string"===this.control.type}isText(){return this.control["x-schema-form"]&&"text"===this.control["x-schema-form"].type&&"string"===this.control.type}getElementName(){return this.isObject()?"gv-schema-form-control-object":(this.control.enum||this.control.items&&this.control.items.enum)&&!this.isAutocomplete()?"array"===this.control.type?"gv-select":"gv-select-native":(0,r.isComplexArray)(this.control)?"gv-schema-form-array":"array"===this.control.type?"gv-button":"boolean"===this.control.type?"gv-switch":this.isExpressionLanguage()?"gv-expression-language":this.isCodemirror()?"gv-code":this.isCronExpression()?"gv-cron-editor":this.isText()?"gv-text":"gv-input"}_updateProperties(e){null!=e&&this._observedProperties.forEach((t=>{null!=this[t]&&(e[t]=this[t])}))}_renderControl(){const e=this.getElementName(),o=document.createElement(e);if(o.id=this.id,o.name=this.id,o.skeleton=this.skeleton,o.classList.add("form__control"),null==this.value&&null!=this.control.default&&(this.value=this.control.default,(0,t.dispatchCustomEvent)(this,"default-value",{value:this.value,currentTarget:o,control:this.control})),null!=this.value&&this._setValue(o),"object"===this.control.type?o.schema=this.control:(0,r.isComplexArray)(this.control)&&(o.schema=this.control.items),this._updateProperties(o),this.control.title)o.label=this.control.title,o.title=this.control.title;else{const e=this.id.split("."),t=e[e.length-1];isNaN(parseInt(t,10))&&(o.label=t,o.title=t)}this.control.pattern&&(o.pattern=this.control.pattern),"integer"===this.control.type&&(o.type="number"),this.isText()&&(o.rows=3,o.autosize=!0,o.placeholder=this.control.description);const s=this.getPlaceholder();if(this.control.enum||this.control.items&&this.control.items.enum){const e=this.control.enum||this.control.items.enum;this.control["x-schema-form"]&&this.control["x-schema-form"].titleMap?o.options=e.map((e=>({value:e,label:this.control["x-schema-form"].titleMap[e]||e}))):o.options=e,"array"===this.control.type&&(o.multiple=!0)}else this.isCodemirror()?(o.options=this.control["x-schema-form"].codemirrorOptions,null!=this.control.default&&null==o.options.value&&(o.options.value=this.control.default)):this.isExpressionLanguage()?(o.options={},o.rows=1):this.isPassword()&&(o.type="password");let i;if(this.control.description&&(o.description=this.control.description),this.compact&&(o.placeholder=o.description||o.label,o.label=null,o.description=null,o.compact=this.compact),null!=s&&(this.isExpressionLanguage()||this.isCodemirror()?o.options.placeholder=s:o.placeholder=s),o.addEventListener(`${e}:input`,this._onInput.bind(this)),this.isAutocomplete()){const e=document.createElement("gv-autocomplete");e.minChars=0,e.filter=!0,o.clearable=!0,e.id=this.id,e.appendChild(o),e.addEventListener("gv-autocomplete:select",this._onInput.bind(this)),o.addEventListener("gv-input:clear",this._onInput.bind(this)),i=e}else i=o;return null!=this.control["x-schema-form"]&&(0,t.dispatchCustomEvent)(this,"control-ready",{currentTarget:i,control:this}),i}_onInput(e){e.preventDefault(),e.stopPropagation();let r=null;r="GV-AUTOCOMPLETE"===e.target.tagName?e.detail.value:e.detail,(0,t.dispatchCustomEvent)(this,"change",{value:r,currentTarget:e.target,control:this.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 null==e&&(e=this.id),this.shadowRoot.querySelector(`[id="${e}"]`)}_setValue(e){return null!=this.value&&null!=e&&("boolean"===this.control.type||"array"===this.control.type||"object"===this.control.type?e.value=this.value:e.value=this.value.toString?this.value.toString():this.value),e}async updated(e){e.has("value")&&Promise.all(this.getControls().map((e=>e.updateComplete))).then((()=>{this._setValue(this.getControl())}))}async getUpdateComplete(){await super.getUpdateComplete(),await Promise.all(this.getControls().map((e=>e.updateComplete)))}formatErrorMessage(e){let t;return t=null!=this.control.properties&&null!=this.control.properties[e.argument]?this.control.properties[e.argument].title:this.control.title,t?`<span>${e.message.replace(e.argument,t)}</span>`:`<span>${e.message}</span>`}shouldUpdate(e){if(null!=this._observedProperties.find((t=>e.has(t)))&&this._updateProperties(this.getControl()),e.has("errors")&&null!=this.errors){this.getControls().forEach((e=>{e.errors=this.errors}));return this.shadowRoot.querySelectorAll(".form__control-error").forEach((e=>e.innerHTML="")),this.errors.forEach((e=>{const t="instance"===e.property?e.argument:e.property.replace("instance.",""),r=this.shadowRoot.querySelector(`[id="${t}-error"]`);if(r){const t=document.createElement("gv-input-message");t.innerHTML=this.formatErrorMessage(e),t.level="warn",r.appendChild(t)}})),!1}return super.shouldUpdate(e)}render(){return e.html`${this._renderControl()}<div class="form__control-error" id="${this.id+"-error"}"></div>`}static get styles(){return[e.css`:host{box-sizing:border-box;margin:var(--gv-schema-form-control--m,.4rem);display:block}:host([hidden]){visibility:hidden;height:0;margin:0;padding:0;overflow:hidden}.form__control-description,.form__control-error{font-size:12px}.form__control-description{opacity:.8}.form__control-label{display:flex;flex-direction:row;border-bottom:1px solid #d9d9d9}label{margin:.2rem}.form__control-label label{flex:1;text-transform:capitalize}.form__control-array,.form__control-object{display:flex;flex-direction:column}.form__control-enum{display:flex}.form__control-array gv-button{align-self:flex-end}.form__control{position:relative}gv-code,gv-expression-language,gv-input,gv-select,gv-select-native,gv-switch{width:100%;margin:.2rem 0}gv-autocomplete:hover,gv-select-native:hover,gv-select:hover{z-index:70}.error{color:var(--gv-theme-color-error,#f44336)}.warning{color:var(--gv-theme-color-warning,#ff9800)}`]}}exports.GvSchemaFormControl=s,window.customElements.define("gv-schema-form-control",s);