@gravitee/ui-components 3.25.3-typescript-e7256ca → 3.25.3-typescript-9cbc31e

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

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