@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-9a4271f

package/src/organisms/gv-properties.js

@@ -1,920 +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 './gv-schema-form';
-import './gv-resizable-views';
-import '../molecules/gv-table';
-import '../atoms/gv-button';
-import '../atoms/gv-input';
-import '../atoms/gv-icon';
-import '../atoms/gv-text';
-import '../atoms/gv-input-message';
-import '../atoms/gv-select';
-import { dispatchCustomEvent } from '../lib/events';
-import { ERROR_TYPES, parseRaw, toNameEqualsValueString } from '../lib/properties';
-import { i18n } from '../lib/i18n';
-import { classMap } from 'lit/directives/class-map';
-import { KeyboardElement, KEYS } from '../mixins/keyboard-element';
-import { empty } from '../styles/empty';
-
-/**
- * A component to manage properties
- *
- * @fires gv-properties:change - When list of properties change
- * @fires gv-properties:save-provider - When user validates provider configuration
- * @fires gv-properties:switch-encrypted - When user switches encryption toggle
- *
- * @attr {Array} properties - Array of Properties {key, value, dynamic?}
- * @attr {Object} provider - Configuration of provider
- * @attr {Array} providers - List of available providers (only http for the moment)
- * @attr {Boolean} expert - For display expert mode by default
- * @attr {Boolean} encryptable - To display the 'encrypted' toggle on each property
- *
- * @cssprop {Length} [--gv-properties-table--colmg=0.2rem] - Table cells margin
- */
-export class GvProperties extends KeyboardElement(LitElement) {
-  static get properties() {
-    return {
-      dynamicPropertySchema: { type: Object },
-      properties: { type: Array },
-      _properties: { type: Array, attribute: false },
-      provider: { type: Object },
-      providers: { type: Array },
-      _propertySchemaForm: { type: Object, attribute: false },
-      expert: { type: Boolean },
-      _formattedErrors: { type: Array, attributes: false },
-      _filter: { type: String },
-      _paginationData: { type: Object, attribute: false },
-      _pageSize: { type: Number, attribute: false },
-      _newItem: { type: Object, attribute: false },
-      _providerDocumentation: { type: Boolean, attribute: false },
-      _showDocumentation: { type: Boolean, attribute: false },
-      _textRows: { type: Number, attribute: false },
-      readonly: { type: Boolean, reflect: true },
-      encryptable: { type: Boolean, reflect: true },
-    };
-  }
-
-  constructor() {
-    super();
-    this.properties = [];
-    this.types = [];
-    this.provider = {};
-    this._currentResource = null;
-    this._formattedErrors = [];
-    this._showDocumentation = true;
-    this._newItem = { key: '', value: '', _new: true };
-    this._pageSize = 10;
-    this._textRows = 10;
-    this._pageSizes = [5, 10, 25, 50, 100];
-    this._errors = [];
-  }
-
-  onKeyboard() {
-    if (this.isPressed(KEYS.Esc)) {
-      this._onClosePropertySchemaForm();
-    }
-    if (this.isPressed(KEYS.Shift, KEYS.Ctrl, KEYS.Space)) {
-      const search = this.shadowRoot.querySelector('#search-property');
-      if (search) {
-        search.focus();
-      }
-    }
-  }
-
-  set properties(properties) {
-    this._properties = properties
-      .sort((a, b) => a.key.localeCompare(b.key))
-      .map((property) => {
-        if (property.encrypted) {
-          property.encryptable = true;
-        }
-        return property;
-      });
-  }
-
-  get properties() {
-    return this._properties;
-  }
-
-  _getResizableViews() {
-    return this.shadowRoot.querySelector('gv-resizable-views');
-  }
-
-  _maximizeTopView() {
-    const views = this._getResizableViews();
-    if (views) {
-      views.maximizeTop(95, 5);
-    }
-  }
-
-  _maximizeBottomView() {
-    const views = this._getResizableViews();
-    if (views) {
-      views.resize(30, 70);
-    }
-  }
-
-  _splitMainViews() {
-    const views = this._getResizableViews();
-    if (views) {
-      views.split();
-    }
-  }
-
-  _isNewLineTable(line) {
-    return line._new === true;
-  }
-
-  _onInputNew(name, event) {
-    const target = event.target;
-    this._newItem[name] = event.detail;
-    const { errors } = parseRaw(toNameEqualsValueString([...this.properties, this._newItem]));
-    this._errors = errors;
-    setTimeout(() => {
-      const btn = this.shadowRoot.querySelector('gv-button#add-property');
-      if (errors.length > 0 || this._disabledNewLine(this._newItem)) {
-        btn.setAttribute('disabled', true);
-      } else {
-        btn.removeAttribute('disabled');
-      }
-      if (name === 'key') {
-        if (errors.length === 0) {
-          target.removeAttribute('invalid');
-          target.setAttribute('valid', true);
-        } else {
-          target.removeAttribute('valid');
-          target.setAttribute('invalid', true);
-        }
-      }
-    }, 0);
-  }
-
-  _onInput() {
-    dispatchCustomEvent(this, 'change', { properties: this.properties });
-  }
-
-  _onSwitchEncrypted(item) {
-    if (item.encrypted === true) {
-      item.value = '';
-      item.encrypted = false;
-      item.encryptionWarning = i18n('gv-properties.infos.overwrite-encryption');
-      this.requestUpdate();
-    }
-    dispatchCustomEvent(this, 'switch-encrypted', { properties: this.properties });
-  }
-
-  _addProperty(item) {
-    delete item._new;
-    this.properties = [item, ...this._properties];
-    this._newItem = { key: '', value: '', _new: true, encryptable: false, encrypted: false };
-    dispatchCustomEvent(this, 'change', { properties: this.properties });
-  }
-
-  _removeProperty(item) {
-    this._properties = this._properties.filter((property) => property.key !== item.key);
-    dispatchCustomEvent(this, 'change', { properties: this.properties });
-  }
-
-  _disabledNewLine(item) {
-    return item.key == null || item.value == null || item.key.trim() === '' || item.value.trim() === '';
-  }
-
-  _submitExpertMode() {
-    if (this.expert) {
-      this.properties = this._handleExpertModeInput(this.shadowRoot.querySelector('#expert-input').value);
-    }
-  }
-
-  _onExpertModeTextInput({ detail }) {
-    this._handleExpertModeInput(detail);
-  }
-
-  _handleExpertModeInput(expertModeInputString) {
-    let allProperties = this._properties;
-    const providerEnabled = this.provider && this.provider.enabled;
-    const dynamicProperties = allProperties.filter((prop) => providerEnabled && prop.dynamic);
-    const encryptedProperties = allProperties.filter((prop) => prop.encrypted);
-
-    const allPropertiesString = `${expertModeInputString}\n${toNameEqualsValueString(dynamicProperties)}\n${toNameEqualsValueString(
-      encryptedProperties,
-    )}`;
-    const { errors } = parseRaw(allPropertiesString);
-    this._errors = errors;
-    if (errors.length === 0) {
-      const { variables } = parseRaw(expertModeInputString);
-      allProperties = [...variables, ...dynamicProperties, ...encryptedProperties];
-      dispatchCustomEvent(this, 'change', { properties: allProperties });
-    }
-
-    return allProperties;
-  }
-
-  _onSubmitPropertyForm({ detail }) {
-    const provider = detail.values;
-    dispatchCustomEvent(this, 'save-provider', { provider });
-    this.requestUpdate();
-  }
-
-  submit() {
-    if (this.expert) {
-      this._submitExpertMode();
-    } else {
-      this._onSubmit();
-    }
-  }
-
-  _onSubmit() {
-    const invalidControls = [...this.shadowRoot.querySelectorAll('form .control')].find((control) => control.invalid);
-    if (invalidControls == null) {
-      this._addProperty(this._newItem);
-    }
-  }
-
-  _onConfigureDynamicProperties() {
-    if (this.dynamicPropertySchema == null) {
-      // dynamicPropertySchema has been introduced to ensure backward compatibility with old versions. If no schema is provided a default schema will be used.
-      const providersTitleMap = this.providers.reduce((map, provider) => {
-        map[provider.id] = provider.key;
-        return map;
-      }, {});
-
-      const providersEnum = Object.keys(providersTitleMap);
-      this.dynamicPropertySchema = {
-        properties: {
-          enabled: {
-            type: 'boolean',
-            title: 'Enabled',
-            description: ' This service is requiring an API deployment. Do not forget to deploy API to start dynamic-properties service.',
-          },
-          schedule: {
-            type: 'string',
-            title: 'Schedule',
-            'x-schema-form': {
-              'cron-expression': true,
-            },
-          },
-          provider: {
-            type: 'string',
-            title: 'Provider type',
-            enum: providersEnum,
-            default: providersEnum[0],
-            'x-schema-form': {
-              titleMap: providersTitleMap,
-            },
-          },
-        },
-        required: ['schedule', 'provider'],
-      };
-    }
-
-    const defaultProvider = this.providers[0];
-
-    this._propertySchemaForm = {
-      properties: { ...this.dynamicPropertySchema.properties, configuration: defaultProvider.schema },
-      required: this.dynamicPropertySchema.required,
-    };
-    this._providerDocumentation = defaultProvider.documentation;
-    this._maximizeBottomView();
-  }
-
-  _onClosePropertySchemaForm() {
-    this._propertySchemaForm = null;
-    this._maximizeTopView();
-  }
-
-  _onSearchProperty({ detail }) {
-    this._filter = detail;
-    this._onClosePropertySchemaForm();
-  }
-
-  _onClearProperty() {
-    this._filter = null;
-    this._onClosePropertySchemaForm();
-  }
-
-  get _errors() {
-    return this._formattedErrors;
-  }
-
-  set _errors(rawErrors) {
-    this._formattedErrors = rawErrors.map(({ type, key, pos }) => {
-      if (type === ERROR_TYPES.INVALID_NAME) {
-        return {
-          line: pos.line,
-          msg: i18n('gv-properties.errors.invalid-key', { key }),
-        };
-      }
-      if (type === ERROR_TYPES.DUPLICATED_NAME) {
-        return {
-          line: pos.line,
-          msg: i18n('gv-properties.errors.duplicated-key', { key }),
-        };
-      }
-      if (type === ERROR_TYPES.INVALID_LINE) {
-        return {
-          line: pos.line,
-          msg: i18n('gv-properties.errors.invalid-line'),
-        };
-      }
-      if (type === ERROR_TYPES.INVALID_VALUE) {
-        return {
-          line: pos.line,
-          msg: i18n('gv-properties.errors.invalid-value'),
-        };
-      }
-      return { line: '?', msg: i18n('gv-properties.errors.unknown') };
-    });
-  }
-
-  _renderErrors(withLine = false) {
-    if (this._formattedErrors.length > 0) {
-      return html`<div class="${classMap({ 'add-form-error': true, 'add-form-error_expert': this.expert })}">
-        <div></div>
-        <div class="error-list">
-          ${this._formattedErrors.map(
-            ({ line, msg }) => html`
-              <gv-input-message
-                >${withLine ? html`<strong .innerHTML="${i18n('gv-properties.errors.line')} ${line}:&nbsp;"></strong>` : ''}
-                <span .innerHTML="${msg}"></span
-              ></gv-input-message>
-            `,
-          )}
-        </div>
-      </div>`;
-    }
-    return html``;
-  }
-
-  _renderTable() {
-    const providerEnabled = this.provider && this.provider.enabled;
-    if (this.expert) {
-      this._computeTextRows();
-
-      const staticProperties = providerEnabled ? this._properties.filter((prop) => !(providerEnabled && prop.dynamic)) : this._properties;
-      const expertProperties = staticProperties.filter((prop) => !prop.encrypted);
-      const content = expertProperties.map((prop) => `${prop.key}="${prop.value}"`).join('\n');
-
-      return html`<gv-text
-          id="expert-input"
-          placeholder="${i18n('gv-properties.placeholder.input')}"
-          @gv-text:input="${this._onExpertModeTextInput}"
-          .value="${content}"
-          ?readonly="${this.readonly}"
-          .rows="${this._textRows}"
-        ></gv-text>
-        ${this._renderErrors(true)}`;
-    } else {
-      const options = {
-        data: [
-          {
-            field: 'dynamic',
-            label: 'Dynamic',
-            width: '40px',
-            type: (item) => (item.dynamic && providerEnabled ? 'gv-icon' : 'div'),
-            attributes: {
-              shape: (item) => (item.dynamic && providerEnabled ? 'code:time-schedule' : ''),
-              title: (item) => (item.dynamic && providerEnabled ? 'Dynamic properties service is actually in running' : ''),
-              style: 'justify-content: center; align-items: center; height: 100%;',
-            },
-          },
-          {
-            field: 'key',
-            label: 'Key',
-            type: 'gv-input',
-            attributes: {
-              clipboard: true,
-              placeholder: i18n('gv-properties.placeholder.key'),
-              name: 'key',
-              required: true,
-              readonly: this.readonly,
-            },
-          },
-          {
-            field: 'value',
-            label: 'Value',
-            type: 'gv-input',
-            attributes: {
-              name: 'value',
-              placeholder: 'Property value',
-              required: true,
-              readonly: this.readonly,
-              disabled: (item) => (item.dynamic && providerEnabled) || item.encrypted,
-              type: (item) => (item.encrypted ? 'password' : 'text'),
-              title: (item) => (item.encrypted ? i18n('gv-properties.infos.encrypted-value') : ''),
-              description: (item) => item.encryptionWarning,
-              icon: null,
-              'ongv-input:input': this._onInput.bind(this),
-            },
-          },
-        ],
-      };
-
-      if (this.encryptable === true) {
-        options.data.push({
-          field: 'encryptable',
-          type: 'gv-switch',
-          style: '--gv-switch--ta: right;',
-          width: '105px',
-          attributes: {
-            description: i18n('gv-properties.encrypted-toggle'),
-            required: true,
-            readonly: this.readonly,
-            disabled: (item) => item.dynamic && providerEnabled,
-            'ongv-switch:input': this._onSwitchEncrypted.bind(this),
-            style: 'display: inline-flex; font-size: 12px; height: 40px;',
-          },
-        });
-      }
-
-      if (this.readonly !== true) {
-        options.data.push({
-          type: 'gv-button',
-          width: '40px',
-          attributes: {
-            'ongv-button:click': (item, event, target) => this._removeProperty(item, target),
-            title: 'Remove',
-            disabled: (item) => item.dynamic && providerEnabled,
-            danger: true,
-            outlined: true,
-            icon: 'home:trash',
-          },
-        });
-      }
-
-      const filteredProperties =
-        this._filter != null
-          ? this._properties.filter((prop) => {
-              return (prop.key.toLowerCase() + prop.value.toLowerCase()).includes(this._filter);
-            })
-          : this._properties;
-      let properties = [...filteredProperties];
-      if (this._paginationData) {
-        this._paginationData.last = Math.ceil(filteredProperties.length / this._pageSize);
-        this._paginationData.total = filteredProperties.length;
-        this._paginationData.total_pages = Math.ceil(filteredProperties.length / this._pageSize);
-        const index = (this._paginationData.current_page - 1) * this._pageSize;
-        properties = [...filteredProperties].splice(index, this._pageSize);
-      }
-
-      const addPropertyFormGridClass = this.encryptable ? 'add-form-grid-with-encrypted-toggle' : 'add-form-grid';
-
-      const addPropertyForm =
-        this.readonly !== true
-          ? html`<form id="add-property-form" class="add-form ${addPropertyFormGridClass}" @submit="${this._onSubmit}">
-                <div></div>
-                <gv-input
-                  class="control"
-                  placeholder="${i18n('gv-properties.placeholder.key')}"
-                  required
-                  @gv-input:input="${this._onInputNew.bind(this, 'key')}"
-                  value="${this._newItem.key}"
-                ></gv-input>
-                <gv-input
-                  class="control"
-                  placeholder="${i18n('gv-properties.placeholder.value')}"
-                  required
-                  @gv-input:input="${this._onInputNew.bind(this, 'value')}"
-                  .value="${this._newItem.value}"
-                ></gv-input>
-                ${this.encryptable
-                  ? html` <gv-switch
-                      class="control"
-                      required
-                      description="${i18n('gv-properties.encrypted-toggle')}"
-                      @gv-switch:input="${this._onInputNew.bind(this, 'encryptable')}"
-                      .value="${this._newItem.encryptable}"
-                    ></gv-switch>`
-                  : ''}
-                <gv-button
-                  id="add-property"
-                  icon="code:plus"
-                  outlined
-                  disabled
-                  @gv-button:click="${this._addProperty.bind(this, this._newItem)}"
-                  title="${i18n('gv-properties.add')}"
-                ></gv-button>
-              </form>
-              ${this._renderErrors()}
-              <hr />`
-          : '';
-
-      return html` ${addPropertyForm}
-        <gv-table .options="${options}" .items="${properties}" noheader nosort order="key" rowheight="57px"></gv-table>`;
-    }
-  }
-
-  _onChangeMode({ detail }) {
-    this._submitExpertMode();
-    this.expert = detail;
-    this._errors = [];
-    this._newItem = { key: '', value: '', _new: true };
-    this._onClosePropertySchemaForm();
-  }
-
-  _onPaginate({ detail }) {
-    this._paginationData.current_page = detail.page;
-    this._onClosePropertySchemaForm();
-    this.requestUpdate();
-  }
-
-  updated(props) {
-    if (props.has('_properties') || props.has('_pageSize')) {
-      this._paginationData = {
-        first: 1,
-        last: Math.ceil(this._properties.length / this._pageSize),
-        total: this._properties.length,
-        current_page: 1,
-        total_pages: Math.ceil(this._properties.length / this._pageSize),
-      };
-    }
-  }
-
-  _onChangePageSize({ detail }) {
-    this._pageSize = Number(detail).valueOf();
-    this._onClosePropertySchemaForm();
-  }
-
-  _renderTableForm() {
-    return html`<div class="container">
-      <div class="header">
-        <div class="title">Manage global properties <span>(${this._properties ? this._properties.length : 0})</span></div>
-        <gv-switch
-          small
-          .description="${this.expert ? 'Expert' : 'Simple'}"
-          .value="${this.expert}"
-          @gv-switch:input="${this._onChangeMode}"
-        ></gv-switch>
-        <gv-input
-          id="search-property"
-          placeholder="Filter properties (Shift + Ctrl + Space)"
-          type="search"
-          small
-          class="search-input"
-          .disabled="${this.expert}"
-          @gv-input:input="${this._onSearchProperty}"
-          @gv-input:clear="${this._onClearProperty}"
-        ></gv-input>
-        <gv-select
-          class="page-size__select"
-          @gv-select:input="${this._onChangePageSize}"
-          small
-          .options="${this._pageSizes}"
-          .value="${this._pageSize}"
-          .disabled="${this.expert || this._paginationData == null}"
-        ></gv-select>
-        <gv-pagination
-          @gv-pagination:paginate="${this._onPaginate}"
-          .disabled="${this.expert || this._paginationData == null}"
-          .data="${this._paginationData}"
-          widget
-        ></gv-pagination>
-      </div>
-      <div class="content"><div class="form-content">${this._renderTable()}</div></div>
-    </div>`;
-  }
-
-  _fetchDocumentation() {
-    this._showDocumentation = true;
-  }
-
-  _hideDocumentation() {
-    this._showDocumentation = false;
-  }
-
-  get dirty() {
-    const form = this.shadowRoot.querySelector('gv-schema-form');
-    return form && form.dirty;
-  }
-
-  confirm() {
-    const form = this.shadowRoot.querySelector('gv-schema-form');
-    if (form) {
-      return form.confirm().then(() => this._onClosePropertySchemaForm());
-    }
-    return Promise.resolve();
-  }
-
-  _renderForm() {
-    return html`<gv-schema-form
-      slot="top"
-      scrollable
-      .schema="${this._propertySchemaForm}"
-      .values="${this.provider}"
-      .icon="design:edit"
-      has-header
-      ?readonly="${this.readonly}"
-      @gv-schema-form:submit="${this._onSubmitPropertyForm}"
-    >
-      <div slot="title" class="properties-title">Configure dynamic properties</div>
-      <gv-button
-        slot="header-left"
-        icon="general:close"
-        outlined
-        small
-        @gv-button:click="${this._onClosePropertySchemaForm}"
-        title="Close (esc)"
-      ></gv-button>
-      <gv-button
-        slot="header-left"
-        icon="home:book"
-        ?disabled="${this._showDocumentation}"
-        outlined
-        small
-        @gv-button:click="${this._fetchDocumentation}"
-        title="Open documentation"
-      ></gv-button>
-    </gv-schema-form>`;
-  }
-
-  _renderBottom() {
-    if (this._propertySchemaForm && this._showDocumentation) {
-      return html`<gv-resizable-views no-overflow direction="horizontal">
-        ${this._renderForm()}
-        <gv-documentation
-          slot="bottom"
-          .text="${this._providerDocumentation}"
-          @gv-documentation:close="${this._hideDocumentation}"
-        ></gv-documentation>
-      </gv-resizable-views>`;
-    } else if (this._propertySchemaForm) {
-      return this._renderForm();
-    } else {
-      return html`<div class="properties-bottom-container">${this._renderDynamicConfiguration()}</div>`;
-    }
-  }
-
-  _renderDynamicConfiguration() {
-    const hasDynamicConfiguration = this.provider && this.provider.enabled;
-
-    let configureAction = '';
-    if (hasDynamicConfiguration || this.readonly !== true) {
-      configureAction = html`<gv-button
-        icon="tools:tools"
-        @gv-button:click="${this._onConfigureDynamicProperties}"
-        outlined
-        .disabled="${this.expert}"
-        >Configure dynamic properties</gv-button
-      >`;
-    }
-
-    if (hasDynamicConfiguration) {
-      return html`<div class="properties-message">
-          Dynamic properties service is actually in <code>running</code> state and run with cron expression
-          <code>${this.provider.schedule}</code> using <code>${this.provider.provider}</code> provider.
-        </div>
-        ${configureAction}`;
-    } else if (this.readonly) {
-      return html`<div class="empty">No dynamic properties service configured</div>`;
-    } else {
-      return configureAction;
-    }
-  }
-
-  _onMove() {
-    this._computeTextRows();
-  }
-
-  _computeTextRows() {
-    const parent = this.shadowRoot.querySelector('.content');
-    if (parent) {
-      const { height } = parent.getBoundingClientRect();
-      // --gv-text--lh=30px
-      this._textRows = Math.round(Math.round(height - 20) / 30) - 2;
-    }
-  }
-
-  render() {
-    if (this.providers && this.providers.length > 0) {
-      return html`<div class="properties">
-        <gv-resizable-views no-overflow @gv-resizable-views:move="${this._onMove}" @gv-resizable-views:resize="${this._onMove}">
-          <div slot="top" class="box">${this._renderTableForm()}</div>
-          <div slot="bottom">${this._renderBottom()}</div>
-        </gv-resizable-views>
-      </div>`;
-    } else {
-      return html`<div class="properties">
-        <div class="table-box">${this._renderTableForm()}</div>
-      </div>`;
-    }
-  }
-
-  static get styles() {
-    return [
-      empty,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          height: 100%;
-          width: 100%;
-          display: block;
-        }
-
-        .properties {
-          display: flex;
-          height: 100%;
-          width: 100%;
-        }
-
-        gv-resizable-views {
-          height: 100%;
-          width: 100%;
-        }
-
-        gv-schema-form {
-          margin: 0;
-        }
-
-        .table-box {
-          width: 100%;
-          border-left: 1px solid #bfbfbf;
-          display: flex;
-        }
-
-        gv-table {
-          height: auto;
-          flex: 1;
-          margin-top: 10px;
-          margin-right: 50px;
-          --gv-table-rows--ov: none;
-          --gv-table--colmg: var(--gv-properties-table--colmg, 0.2rem);
-          --gv-table-cell--d: inline;
-          --gv-table-row--ai: flex-start;
-          --gv-table-row--ac: flex-start;
-          --gv-table-hover--bgc: var(--gv-theme-neutral-color-lightest);
-        }
-
-        .properties-title {
-          text-transform: uppercase;
-          letter-spacing: 0.2rem;
-        }
-
-        .properties-bottom-container {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-          flex-direction: column;
-        }
-
-        .header {
-          border-bottom: 1px solid #d9d9d9;
-          display: flex;
-          min-height: 45px;
-          align-items: center;
-          margin-bottom: 0.5rem;
-          padding: 0 0.5rem;
-        }
-
-        .header .title {
-          color: #28444f;
-          font-size: 18px;
-          display: flex;
-          align-items: flex-end;
-          flex: 1;
-        }
-
-        .header .title span {
-          font-size: 12px;
-          margin-left: 8px;
-          opacity: 0.7;
-        }
-
-        .box {
-          position: absolute;
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          top: 0;
-          bottom: 0;
-          left: 0;
-        }
-
-        .container {
-          flex-grow: 1;
-
-          display: flex;
-          flex-direction: column;
-
-          /* for Firefox */
-          min-height: 0;
-          height: 100%;
-        }
-
-        .content {
-          background: white;
-          flex-grow: 1;
-
-          overflow: auto;
-
-          /* for Firefox */
-          min-height: 0;
-          padding: 0.5rem;
-
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-
-        gv-text {
-          --gv-text--fz: 20px;
-          --gv-text--lh: 25px;
-        }
-
-        gv-switch {
-          --gv-switch--ta: right;
-        }
-
-        .header gv-input {
-          margin: 0 1rem;
-        }
-
-        .add-form,
-        .add-form-error {
-          display: grid;
-          margin: auto 50px auto 0;
-          box-sizing: border-box;
-        }
-
-        .add-form {
-          column-gap: var(--gv-properties-table--colmg, 0.2rem);
-          border-right: solid thick transparent;
-          height: 50px;
-        }
-
-        .add-form gv-input,
-        gv-button,
-        gv-switch {
-          margin: auto 0;
-        }
-
-        .add-form gv-switch {
-          font-size: 12px;
-        }
-
-        .add-form-grid {
-          grid-template-columns: 40px auto auto 40px;
-        }
-
-        .add-form-grid-with-encrypted-toggle {
-          grid-template-columns: 40px auto auto 105px 40px;
-        }
-
-        .add-form-error_expert {
-          display: flex;
-        }
-
-        .add-form-error {
-          grid-template-columns: 40px 1fr;
-        }
-
-        code {
-          color: var(--gv-theme-color-warning-dark, #f57c00);
-        }
-
-        .form-content {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-        }
-
-        .properties-message {
-          margin-bottom: 0.5rem;
-          font-size: 14px;
-        }
-
-        .page-size__select {
-          max-width: 50px;
-        }
-
-        .search-input {
-          width: 300px;
-        }
-
-        hr {
-          background-color: var(--gv-theme-neutral-color);
-          border: 0;
-          width: 100%;
-          height: 2px;
-        }
-      `,
-    ];
-  }
-}
-
-window.customElements.define('gv-properties', GvProperties);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvProperties=void 0;const e=require("lit");require("./gv-schema-form"),require("./gv-resizable-views"),require("../molecules/gv-table"),require("../atoms/gv-button"),require("../atoms/gv-input"),require("../atoms/gv-icon"),require("../atoms/gv-text"),require("../atoms/gv-input-message"),require("../atoms/gv-select");const t=require("../lib/events"),i=require("../lib/properties"),r=require("../lib/i18n"),o=require("lit/directives/class-map"),s=require("../mixins/keyboard-element"),n=require("../styles/empty");class a extends((0,s.KeyboardElement)(e.LitElement)){static get properties(){return{dynamicPropertySchema:{type:Object},properties:{type:Array},_properties:{type:Array,attribute:!1},provider:{type:Object},providers:{type:Array},_propertySchemaForm:{type:Object,attribute:!1},expert:{type:Boolean},_formattedErrors:{type:Array,attributes:!1},_filter:{type:String},_paginationData:{type:Object,attribute:!1},_pageSize:{type:Number,attribute:!1},_newItem:{type:Object,attribute:!1},_providerDocumentation:{type:Boolean,attribute:!1},_showDocumentation:{type:Boolean,attribute:!1},_textRows:{type:Number,attribute:!1},readonly:{type:Boolean,reflect:!0},encryptable:{type:Boolean,reflect:!0}}}constructor(){super(),this.properties=[],this.types=[],this.provider={},this._currentResource=null,this._formattedErrors=[],this._showDocumentation=!0,this._newItem={key:"",value:"",_new:!0},this._pageSize=10,this._textRows=10,this._pageSizes=[5,10,25,50,100],this._errors=[]}onKeyboard(){if(this.isPressed(s.KEYS.Esc)&&this._onClosePropertySchemaForm(),this.isPressed(s.KEYS.Shift,s.KEYS.Ctrl,s.KEYS.Space)){const e=this.shadowRoot.querySelector("#search-property");e&&e.focus()}}set properties(e){this._properties=e.sort(((e,t)=>e.key.localeCompare(t.key))).map((e=>(e.encrypted&&(e.encryptable=!0),e)))}get properties(){return this._properties}_getResizableViews(){return this.shadowRoot.querySelector("gv-resizable-views")}_maximizeTopView(){const e=this._getResizableViews();e&&e.maximizeTop(95,5)}_maximizeBottomView(){const e=this._getResizableViews();e&&e.resize(30,70)}_splitMainViews(){const e=this._getResizableViews();e&&e.split()}_isNewLineTable(e){return!0===e._new}_onInputNew(e,t){const r=t.target;this._newItem[e]=t.detail;const{errors:o}=(0,i.parseRaw)((0,i.toNameEqualsValueString)([...this.properties,this._newItem]));this._errors=o,setTimeout((()=>{const t=this.shadowRoot.querySelector("gv-button#add-property");o.length>0||this._disabledNewLine(this._newItem)?t.setAttribute("disabled",!0):t.removeAttribute("disabled"),"key"===e&&(0===o.length?(r.removeAttribute("invalid"),r.setAttribute("valid",!0)):(r.removeAttribute("valid"),r.setAttribute("invalid",!0)))}),0)}_onInput(){(0,t.dispatchCustomEvent)(this,"change",{properties:this.properties})}_onSwitchEncrypted(e){!0===e.encrypted&&(e.value="",e.encrypted=!1,e.encryptionWarning=(0,r.i18n)("gv-properties.infos.overwrite-encryption"),this.requestUpdate()),(0,t.dispatchCustomEvent)(this,"switch-encrypted",{properties:this.properties})}_addProperty(e){delete e._new,this.properties=[e,...this._properties],this._newItem={key:"",value:"",_new:!0,encryptable:!1,encrypted:!1},(0,t.dispatchCustomEvent)(this,"change",{properties:this.properties})}_removeProperty(e){this._properties=this._properties.filter((t=>t.key!==e.key)),(0,t.dispatchCustomEvent)(this,"change",{properties:this.properties})}_disabledNewLine(e){return null==e.key||null==e.value||""===e.key.trim()||""===e.value.trim()}_submitExpertMode(){this.expert&&(this.properties=this._handleExpertModeInput(this.shadowRoot.querySelector("#expert-input").value))}_onExpertModeTextInput({detail:e}){this._handleExpertModeInput(e)}_handleExpertModeInput(e){let r=this._properties;const o=this.provider&&this.provider.enabled,s=r.filter((e=>o&&e.dynamic)),n=r.filter((e=>e.encrypted)),a=`${e}\n${(0,i.toNameEqualsValueString)(s)}\n${(0,i.toNameEqualsValueString)(n)}`,{errors:p}=(0,i.parseRaw)(a);if(this._errors=p,0===p.length){const{variables:o}=(0,i.parseRaw)(e);r=[...o,...s,...n],(0,t.dispatchCustomEvent)(this,"change",{properties:r})}return r}_onSubmitPropertyForm({detail:e}){const i=e.values;(0,t.dispatchCustomEvent)(this,"save-provider",{provider:i}),this.requestUpdate()}submit(){this.expert?this._submitExpertMode():this._onSubmit()}_onSubmit(){null==[...this.shadowRoot.querySelectorAll("form .control")].find((e=>e.invalid))&&this._addProperty(this._newItem)}_onConfigureDynamicProperties(){if(null==this.dynamicPropertySchema){const e=this.providers.reduce(((e,t)=>(e[t.id]=t.key,e)),{}),t=Object.keys(e);this.dynamicPropertySchema={properties:{enabled:{type:"boolean",title:"Enabled",description:" This service is requiring an API deployment. Do not forget to deploy API to start dynamic-properties service."},schedule:{type:"string",title:"Schedule","x-schema-form":{"cron-expression":!0}},provider:{type:"string",title:"Provider type",enum:t,default:t[0],"x-schema-form":{titleMap:e}}},required:["schedule","provider"]}}const e=this.providers[0];this._propertySchemaForm={properties:{...this.dynamicPropertySchema.properties,configuration:e.schema},required:this.dynamicPropertySchema.required},this._providerDocumentation=e.documentation,this._maximizeBottomView()}_onClosePropertySchemaForm(){this._propertySchemaForm=null,this._maximizeTopView()}_onSearchProperty({detail:e}){this._filter=e,this._onClosePropertySchemaForm()}_onClearProperty(){this._filter=null,this._onClosePropertySchemaForm()}get _errors(){return this._formattedErrors}set _errors(e){this._formattedErrors=e.map((({type:e,key:t,pos:o})=>e===i.ERROR_TYPES.INVALID_NAME?{line:o.line,msg:(0,r.i18n)("gv-properties.errors.invalid-key",{key:t})}:e===i.ERROR_TYPES.DUPLICATED_NAME?{line:o.line,msg:(0,r.i18n)("gv-properties.errors.duplicated-key",{key:t})}:e===i.ERROR_TYPES.INVALID_LINE?{line:o.line,msg:(0,r.i18n)("gv-properties.errors.invalid-line")}:e===i.ERROR_TYPES.INVALID_VALUE?{line:o.line,msg:(0,r.i18n)("gv-properties.errors.invalid-value")}:{line:"?",msg:(0,r.i18n)("gv-properties.errors.unknown")}))}_renderErrors(t=!1){return this._formattedErrors.length>0?e.html`<div class="${(0,o.classMap)({"add-form-error":!0,"add-form-error_expert":this.expert})}"><div></div><div class="error-list">${this._formattedErrors.map((({line:i,msg:o})=>e.html`<gv-input-message>${t?e.html`<strong .innerHTML="${(0,r.i18n)("gv-properties.errors.line")} ${i}: "></strong>`:""} <span .innerHTML="${o}"></span></gv-input-message>`))}</div></div>`:e.html``}_renderTable(){const t=this.provider&&this.provider.enabled;if(this.expert){this._computeTextRows();const i=(t?this._properties.filter((e=>!(t&&e.dynamic))):this._properties).filter((e=>!e.encrypted)).map((e=>`${e.key}="${e.value}"`)).join("\n");return e.html`<gv-text id="expert-input" placeholder="${(0,r.i18n)("gv-properties.placeholder.input")}" @gv-text:input="${this._onExpertModeTextInput}" .value="${i}" ?readonly="${this.readonly}" .rows="${this._textRows}"></gv-text>${this._renderErrors(!0)}`}{const i={data:[{field:"dynamic",label:"Dynamic",width:"40px",type:e=>e.dynamic&&t?"gv-icon":"div",attributes:{shape:e=>e.dynamic&&t?"code:time-schedule":"",title:e=>e.dynamic&&t?"Dynamic properties service is actually in running":"",style:"justify-content: center; align-items: center; height: 100%;"}},{field:"key",label:"Key",type:"gv-input",attributes:{clipboard:!0,placeholder:(0,r.i18n)("gv-properties.placeholder.key"),name:"key",required:!0,readonly:this.readonly}},{field:"value",label:"Value",type:"gv-input",attributes:{name:"value",placeholder:"Property value",required:!0,readonly:this.readonly,disabled:e=>e.dynamic&&t||e.encrypted,type:e=>e.encrypted?"password":"text",title:e=>e.encrypted?(0,r.i18n)("gv-properties.infos.encrypted-value"):"",description:e=>e.encryptionWarning,icon:null,"ongv-input:input":this._onInput.bind(this)}}]};!0===this.encryptable&&i.data.push({field:"encryptable",type:"gv-switch",style:"--gv-switch--ta: right;",width:"105px",attributes:{description:(0,r.i18n)("gv-properties.encrypted-toggle"),required:!0,readonly:this.readonly,disabled:e=>e.dynamic&&t,"ongv-switch:input":this._onSwitchEncrypted.bind(this),style:"display: inline-flex; font-size: 12px; height: 40px;"}}),!0!==this.readonly&&i.data.push({type:"gv-button",width:"40px",attributes:{"ongv-button:click":(e,t,i)=>this._removeProperty(e,i),title:"Remove",disabled:e=>e.dynamic&&t,danger:!0,outlined:!0,icon:"home:trash"}});const o=null!=this._filter?this._properties.filter((e=>(e.key.toLowerCase()+e.value.toLowerCase()).includes(this._filter))):this._properties;let s=[...o];if(this._paginationData){this._paginationData.last=Math.ceil(o.length/this._pageSize),this._paginationData.total=o.length,this._paginationData.total_pages=Math.ceil(o.length/this._pageSize);const e=(this._paginationData.current_page-1)*this._pageSize;s=[...o].splice(e,this._pageSize)}const n=this.encryptable?"add-form-grid-with-encrypted-toggle":"add-form-grid",a=!0!==this.readonly?e.html`<form id="add-property-form" class="add-form ${n}" @submit="${this._onSubmit}"><div></div><gv-input class="control" placeholder="${(0,r.i18n)("gv-properties.placeholder.key")}" required @gv-input:input="${this._onInputNew.bind(this,"key")}" value="${this._newItem.key}"></gv-input><gv-input class="control" placeholder="${(0,r.i18n)("gv-properties.placeholder.value")}" required @gv-input:input="${this._onInputNew.bind(this,"value")}" .value="${this._newItem.value}"></gv-input>${this.encryptable?e.html`<gv-switch class="control" required description="${(0,r.i18n)("gv-properties.encrypted-toggle")}" @gv-switch:input="${this._onInputNew.bind(this,"encryptable")}" .value="${this._newItem.encryptable}"></gv-switch>`:""}<gv-button id="add-property" icon="code:plus" outlined disabled="disabled" @gv-button:click="${this._addProperty.bind(this,this._newItem)}" title="${(0,r.i18n)("gv-properties.add")}"></gv-button></form>${this._renderErrors()}<hr>`:"";return e.html`${a}<gv-table .options="${i}" .items="${s}" noheader nosort order="key" rowheight="57px"></gv-table>`}}_onChangeMode({detail:e}){this._submitExpertMode(),this.expert=e,this._errors=[],this._newItem={key:"",value:"",_new:!0},this._onClosePropertySchemaForm()}_onPaginate({detail:e}){this._paginationData.current_page=e.page,this._onClosePropertySchemaForm(),this.requestUpdate()}updated(e){(e.has("_properties")||e.has("_pageSize"))&&(this._paginationData={first:1,last:Math.ceil(this._properties.length/this._pageSize),total:this._properties.length,current_page:1,total_pages:Math.ceil(this._properties.length/this._pageSize)})}_onChangePageSize({detail:e}){this._pageSize=Number(e).valueOf(),this._onClosePropertySchemaForm()}_renderTableForm(){return e.html`<div class="container"><div class="header"><div class="title">Manage global properties <span>(${this._properties?this._properties.length:0})</span></div><gv-switch small .description="${this.expert?"Expert":"Simple"}" .value="${this.expert}" @gv-switch:input="${this._onChangeMode}"></gv-switch><gv-input id="search-property" placeholder="Filter properties (Shift + Ctrl + Space)" type="search" small class="search-input" .disabled="${this.expert}" @gv-input:input="${this._onSearchProperty}" @gv-input:clear="${this._onClearProperty}"></gv-input><gv-select class="page-size__select" @gv-select:input="${this._onChangePageSize}" small .options="${this._pageSizes}" .value="${this._pageSize}" .disabled="${this.expert||null==this._paginationData}"></gv-select><gv-pagination @gv-pagination:paginate="${this._onPaginate}" .disabled="${this.expert||null==this._paginationData}" .data="${this._paginationData}" widget></gv-pagination></div><div class="content"><div class="form-content">${this._renderTable()}</div></div></div>`}_fetchDocumentation(){this._showDocumentation=!0}_hideDocumentation(){this._showDocumentation=!1}get dirty(){const e=this.shadowRoot.querySelector("gv-schema-form");return e&&e.dirty}confirm(){const e=this.shadowRoot.querySelector("gv-schema-form");return e?e.confirm().then((()=>this._onClosePropertySchemaForm())):Promise.resolve()}_renderForm(){return e.html`<gv-schema-form slot="top" scrollable .schema="${this._propertySchemaForm}" .values="${this.provider}" .icon="design:edit" has-header ?readonly="${this.readonly}" @gv-schema-form:submit="${this._onSubmitPropertyForm}"><div slot="title" class="properties-title">Configure dynamic properties</div><gv-button slot="header-left" icon="general:close" outlined small @gv-button:click="${this._onClosePropertySchemaForm}" title="Close (esc)"></gv-button><gv-button slot="header-left" icon="home:book" ?disabled="${this._showDocumentation}" outlined small @gv-button:click="${this._fetchDocumentation}" title="Open documentation"></gv-button></gv-schema-form>`}_renderBottom(){return this._propertySchemaForm&&this._showDocumentation?e.html`<gv-resizable-views no-overflow direction="horizontal">${this._renderForm()}<gv-documentation slot="bottom" .text="${this._providerDocumentation}" @gv-documentation:close="${this._hideDocumentation}"></gv-documentation></gv-resizable-views>`:this._propertySchemaForm?this._renderForm():e.html`<div class="properties-bottom-container">${this._renderDynamicConfiguration()}</div>`}_renderDynamicConfiguration(){const t=this.provider&&this.provider.enabled;let i="";return(t||!0!==this.readonly)&&(i=e.html`<gv-button icon="tools:tools" @gv-button:click="${this._onConfigureDynamicProperties}" outlined .disabled="${this.expert}">Configure dynamic properties</gv-button>`),t?e.html`<div class="properties-message">Dynamic properties service is actually in <code>running</code> state and run with cron expression <code>${this.provider.schedule}</code> using <code>${this.provider.provider}</code> provider.</div>${i}`:this.readonly?e.html`<div class="empty">No dynamic properties service configured</div>`:i}_onMove(){this._computeTextRows()}_computeTextRows(){const e=this.shadowRoot.querySelector(".content");if(e){const{height:t}=e.getBoundingClientRect();this._textRows=Math.round(Math.round(t-20)/30)-2}}render(){return this.providers&&this.providers.length>0?e.html`<div class="properties"><gv-resizable-views no-overflow @gv-resizable-views:move="${this._onMove}" @gv-resizable-views:resize="${this._onMove}"><div slot="top" class="box">${this._renderTableForm()}</div><div slot="bottom">${this._renderBottom()}</div></gv-resizable-views></div>`:e.html`<div class="properties"><div class="table-box">${this._renderTableForm()}</div></div>`}static get styles(){return[n.empty,e.css`:host{box-sizing:border-box;height:100%;width:100%;display:block}.properties{display:flex;height:100%;width:100%}gv-resizable-views{height:100%;width:100%}gv-schema-form{margin:0}.table-box{width:100%;border-left:1px solid #bfbfbf;display:flex}gv-table{height:auto;flex:1;margin-top:10px;margin-right:50px;--gv-table-rows--ov:none;--gv-table--colmg:var(--gv-properties-table--colmg, 0.2rem);--gv-table-cell--d:inline;--gv-table-row--ai:flex-start;--gv-table-row--ac:flex-start;--gv-table-hover--bgc:var(--gv-theme-neutral-color-lightest)}.properties-title{text-transform:uppercase;letter-spacing:.2rem}.properties-bottom-container{display:flex;justify-content:center;align-items:center;height:100%;flex-direction:column}.header{border-bottom:1px solid #d9d9d9;display:flex;min-height:45px;align-items:center;margin-bottom:.5rem;padding:0 .5rem}.header .title{color:#28444f;font-size:18px;display:flex;align-items:flex-end;flex:1}.header .title span{font-size:12px;margin-left:8px;opacity:.7}.box{position:absolute;display:flex;flex-direction:column;width:100%;top:0;bottom:0;left:0}.container{flex-grow:1;display:flex;flex-direction:column;min-height:0;height:100%}.content{background:#fff;flex-grow:1;overflow:auto;min-height:0;padding:.5rem;display:flex;flex-direction:column;align-items:center}gv-text{--gv-text--fz:20px;--gv-text--lh:25px}gv-switch{--gv-switch--ta:right}.header gv-input{margin:0 1rem}.add-form,.add-form-error{display:grid;margin:auto 50px auto 0;box-sizing:border-box}.add-form{column-gap:var(--gv-properties-table--colmg,.2rem);border-right:solid thick transparent;height:50px}.add-form gv-input,gv-button,gv-switch{margin:auto 0}.add-form gv-switch{font-size:12px}.add-form-grid{grid-template-columns:40px auto auto 40px}.add-form-grid-with-encrypted-toggle{grid-template-columns:40px auto auto 105px 40px}.add-form-error_expert{display:flex}.add-form-error{grid-template-columns:40px 1fr}code{color:var(--gv-theme-color-warning-dark,#f57c00)}.form-content{display:flex;flex-direction:column;width:100%}.properties-message{margin-bottom:.5rem;font-size:14px}.page-size__select{max-width:50px}.search-input{width:300px}hr{background-color:var(--gv-theme-neutral-color);border:0;width:100%;height:2px}`]}}exports.GvProperties=a,window.customElements.define("gv-properties",a);