@api-client/ui 0.2.0 → 0.2.2

package/src/amf/lib/AmfParameters.ts

@@ -1,814 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { IApiParameter } from '@api-client/core/amf/definitions/Api.js'
-import {
-  IApiAnyShape,
-  IApiArrayShape,
-  IApiScalarNode,
-  IApiScalarShape,
-  IApiTupleShape,
-  IApiUnionShape,
-  IShapeUnion,
-} from '@api-client/core/amf/definitions/Shapes.js'
-import { ApiSchemaValues } from '@api-client/core/amf/ApiSchemaValues.js'
-import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js'
-import { cancelEvent } from '@api-client/core/lib/events/Utils.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { classMap } from 'lit/directives/class-map.js'
-import * as InputCache from './InputCache.js'
-import { readLabelValue } from './Utils.js'
-import type { OperationParameter, ShapeTemplateOptions, ParameterRenderOptions } from '../types.js'
-import type { SupportedInputTypes } from '../../types/input.js'
-import type Checkbox from '../../md/checkbox/internals/CheckboxElement.js'
-import type Input from '../../md/input/Input.js'
-import type { UiDropdownListSelection } from '../../md/dropdown-list/internals/UiDropdownList.js'
-
-import '../../md/icons/ui-icon.js'
-import '../../md/text-field/ui-text-field.js'
-import '../../md/list/ui-list.js'
-import '../../md/list/ui-list-item.js'
-import '../../md/dropdown-list/ui-dropdown-list.js'
-import '../../md/checkbox/ui-checkbox.js'
-import '../../md/icon-button/ui-icon-button.js'
-import '../../md/button/ui-filled-tonal-button.js'
-
-export interface AmfParametersInit {
-  globalCache?: boolean
-}
-
-/**
- * A class that works with UI editor that capture user input for AMF parameters.
- *
- * @fires paramchange - When a parameter value change. The detail object is the key value of changed parameter.
- * @fires render - When the UI should re-render.
- * @fires change - When the UI should notify the hosting application about the change.
- */
-export class AmfParameters extends EventTarget {
-  parametersValue: OperationParameter[]
-
-  nilValues: string[]
-
-  target: HTMLElement
-
-  globalCache: boolean
-
-  /**
-   * @param target The element that initializes this class.
-   */
-  constructor(target: HTMLElement, init: AmfParametersInit = {}) {
-    super()
-    const { globalCache = false } = init
-    this.globalCache = globalCache
-    this.target = target
-    this.parametersValue = []
-    this.nilValues = []
-
-    this.addArrayValueHandler = this.addArrayValueHandler.bind(this)
-    this.paramChangeHandler = this.paramChangeHandler.bind(this)
-    this.booleanHandler = this.booleanHandler.bind(this)
-    this.deleteParamHandler = this.deleteParamHandler.bind(this)
-    this.enumSelectionHandler = this.enumSelectionHandler.bind(this)
-    this.nilHandler = this.nilHandler.bind(this)
-    this.customParamChangeHandler = this.customParamChangeHandler.bind(this)
-  }
-
-  protected paramChanged(key: string): void {
-    this.dispatchEvent(new CustomEvent('paramchange', { detail: key }))
-  }
-
-  protected notifyUpdate(): void {
-    this.dispatchEvent(new Event('render'))
-  }
-
-  protected notifyChange(): void {
-    this.dispatchEvent(new Event('change'))
-  }
-
-  /**
-   * Clears previously set values in the cache storage.
-   */
-  clearCache(): void {
-    const { parametersValue = [], target, globalCache } = this
-    parametersValue.forEach((param) => {
-      InputCache.remove(target, param.paramId, globalCache)
-    })
-  }
-
-  addArrayValueHandler(e: Event): void {
-    const button = e.target as HTMLElement
-    const { id } = button.dataset
-    if (!id) {
-      return
-    }
-    const { target, globalCache } = this
-    if (!InputCache.has(target, id, globalCache)) {
-      InputCache.set(target, id, [], globalCache)
-    }
-    const items = InputCache.get(target, id, globalCache) as unknown[]
-    items.push(undefined)
-    this.notifyUpdate()
-    this.paramChanged(id)
-  }
-
-  /**
-   * Reads the value to be set on an input.
-   *
-   * @param parameter
-   * @param schema
-   * @param isArray Whether the value should be read for an array.
-   * @returns The value to set on the input. Note, it is not cast to the type.
-   */
-  readInputValue(parameter: IApiParameter, schema: IApiScalarShape, isArray = false): unknown {
-    const { target, globalCache } = this
-    const { id } = parameter
-    if (InputCache.has(target, id, globalCache)) {
-      return InputCache.get(target, id, globalCache)
-    }
-    let result
-    if (parameter.required) {
-      const opts = { fromExamples: true }
-      if (isArray) {
-        result = ApiSchemaValues.readInputValues(parameter, schema, opts)
-      } else {
-        result = ApiSchemaValues.readInputValue(parameter, schema, opts)
-      }
-      if (result !== undefined) {
-        InputCache.set(target, id, result, globalCache)
-      }
-    }
-    return result
-  }
-
-  protected paramChangeHandler(e: Event): void {
-    const input = e.target as Input
-    const { value, dataset } = input
-    const { domainId, isArray, index } = dataset
-    if (!domainId) {
-      return
-    }
-    const param = this.parametersValue.find((p) => p.paramId === domainId)
-    if (!param) {
-      return
-    }
-    // sets cached value of the input.
-    const typed = ApiSchemaValues.parseUserInput(value, param.schema as IShapeUnion)
-    InputCache.set(
-      this.target,
-      domainId,
-      typed,
-      this.globalCache,
-      isArray === 'true',
-      index ? Number(index) : undefined
-    )
-    this.notifyChange()
-    this.paramChanged(domainId)
-  }
-
-  protected booleanHandler(e: Event): void {
-    const input = e.target as Checkbox
-    const { checked, dataset } = input
-    const { domainId, isArray, index } = dataset
-    if (!domainId) {
-      return
-    }
-    const param = this.parametersValue.find((p) => p.paramId === domainId)
-    if (!param) {
-      return
-    }
-    InputCache.set(
-      this.target,
-      domainId,
-      checked,
-      this.globalCache,
-      isArray === 'true',
-      index ? Number(index) : undefined
-    )
-    this.notifyChange()
-    this.paramChanged(domainId)
-  }
-
-  /**
-   * A handler for the remove param button click.
-   */
-  protected deleteParamHandler(e: Event): void {
-    const button = e.currentTarget as HTMLElement
-    const { dataset } = button
-    const { domainId, index, deleteParam } = dataset
-    if (!domainId) {
-      return
-    }
-    let forceUpdate = false
-    if (deleteParam === 'true') {
-      const pIndex = this.parametersValue.findIndex((p) => p.paramId === domainId)
-      this.parametersValue.splice(pIndex, 1)
-      forceUpdate = true
-    }
-    if (InputCache.has(this.target, domainId, this.globalCache)) {
-      InputCache.remove(this.target, domainId, this.globalCache, index ? Number(index) : undefined)
-      forceUpdate = true
-    }
-    if (forceUpdate) {
-      this.notifyUpdate()
-      this.notifyChange()
-      this.paramChanged(domainId)
-    }
-  }
-
-  protected enumSelectionHandler(e: CustomEvent<UiDropdownListSelection>): void {
-    const { item } = e.detail
-    const dropDown = e.target as HTMLElement
-
-    const { domainId, isArray, index } = dropDown.dataset
-    const { value } = item.dataset
-    if (!domainId) {
-      return
-    }
-    const param = this.parametersValue.find((p) => p.paramId === domainId)
-    if (!param) {
-      return
-    }
-    const enumValues = (param.schema as IShapeUnion).values as IApiScalarNode[]
-    if (!enumValues) {
-      return
-    }
-    const typed = ApiSchemaValues.parseUserInput(value, param.schema as IShapeUnion)
-    InputCache.set(
-      this.target,
-      domainId,
-      typed,
-      this.globalCache,
-      isArray === 'true',
-      index ? Number(index) : undefined
-    )
-    this.notifyChange()
-    this.paramChanged(domainId)
-    this.notifyUpdate()
-  }
-
-  /**
-   * Handler for the nil value toggle.
-   */
-  protected nilHandler(e: Event): void {
-    const button = e.target as Checkbox
-    const { checked, dataset } = button
-    const { domainId } = dataset
-    if (!domainId) {
-      return
-    }
-    const list = this.nilValues
-    const has = list.includes(domainId)
-    if (checked && !has) {
-      list.push(domainId)
-      this.notifyUpdate()
-    } else if (!checked && has) {
-      const index = list.indexOf(domainId)
-      list.splice(index, 1)
-      this.notifyUpdate()
-    }
-    this.notifyChange()
-    this.paramChanged(domainId)
-  }
-
-  /**
-   * @param param The parameter to render.
-   * @param opts Render options
-   * @returns The template for the request parameter form control.
-   */
-  parameterTemplate(param: OperationParameter, opts: ParameterRenderOptions = {}): TemplateResult | string {
-    const { schema, parameter, source } = param
-    if (source === 'custom') {
-      return this.customParamTemplate(param)
-    }
-    if (!schema) {
-      return ''
-    }
-    return this.parameterSchemaTemplate(parameter, schema, opts)
-  }
-
-  /**
-   * @param parameter
-   * @param schema
-   * @param opts Internal Process options
-   * @returns The template for the request parameter form control.
-   */
-  parameterSchemaTemplate(
-    parameter: IApiParameter,
-    schema: IShapeUnion,
-    opts: ShapeTemplateOptions = {}
-  ): TemplateResult | string {
-    const { types } = schema
-    if (types.includes(AmfNamespace.aml.vocabularies.shapes.ScalarShape)) {
-      return this.scalarShapeTemplate(parameter, schema as IApiScalarShape, opts)
-    }
-    if (types.includes(AmfNamespace.w3.shacl.NodeShape)) {
-      return this.nodeShapeTemplate()
-    }
-    if (types.includes(AmfNamespace.aml.vocabularies.shapes.UnionShape)) {
-      return this.unionShapeTemplate(parameter, schema as IApiUnionShape)
-    }
-    if (types.includes(AmfNamespace.aml.vocabularies.shapes.FileShape)) {
-      return this.fileShapeTemplate()
-    }
-    if (types.includes(AmfNamespace.aml.vocabularies.shapes.SchemaShape)) {
-      return this.schemaShapeTemplate()
-    }
-    if (
-      types.includes(AmfNamespace.aml.vocabularies.shapes.ArrayShape) ||
-      types.includes(AmfNamespace.aml.vocabularies.shapes.MatrixShape)
-    ) {
-      return this.arrayShapeTemplate(parameter, schema as IApiArrayShape)
-    }
-    if (types.includes(AmfNamespace.aml.vocabularies.shapes.TupleShape)) {
-      return this.tupleShapeTemplate(parameter, schema as IApiTupleShape)
-    }
-    return this.anyShapeTemplate(parameter, schema as IApiAnyShape)
-  }
-
-  /**
-   * @param parameter
-   * @param schema
-   * @param opts
-   * @returns The template for the schema parameter.
-   */
-  scalarShapeTemplate(
-    parameter: IApiParameter,
-    schema: IApiScalarShape,
-    opts: ShapeTemplateOptions = {}
-  ): TemplateResult | string {
-    const { readOnly, values, dataType = 'text' } = schema
-    if (readOnly) {
-      return ''
-    }
-    if (values && values.length) {
-      return this.enumTemplate(parameter, schema, opts)
-    }
-    const inputType = ApiSchemaValues.readInputType(dataType)
-    if (inputType === 'boolean') {
-      return this.booleanTemplate(parameter, schema, opts)
-    }
-    return this.textInputTemplate(parameter, schema, inputType, opts)
-  }
-
-  /**
-   * Corrects the `http://www.w3.org/2001/XMLSchema#dateTime` schema with the `date-time` or `rfc3339` formats
-   * to remove the last `.ZZZ` part which is not recognizable by the `<input>` element.
-   */
-  protected correctDateTimeParameter(schema: IApiScalarShape, value: unknown): string | unknown {
-    if (!value) {
-      return value
-    }
-    if (schema.dataType === AmfNamespace.w3.xmlSchema.dateTime) {
-      if (['date-time', 'rfc3339'].includes(schema.format || '')) {
-        return String(value).replace(/(\.\d\d\d)Z/, '$1')
-      }
-    }
-    return value
-  }
-
-  /**
-   * @param parameter
-   * @param schema
-   * @param type The input type.
-   * @param opts
-   * @returns A template for an input form item for the given type and schema
-   */
-  textInputTemplate(
-    parameter: IApiParameter,
-    schema: IApiScalarShape,
-    type?: SupportedInputTypes,
-    opts: ShapeTemplateOptions = {}
-  ): TemplateResult {
-    const { id, binding } = parameter
-    const { pattern, minimum, minLength, maxLength, maximum, multipleOf } = schema
-    let required = false
-    if (typeof opts.required === 'boolean') {
-      required = opts.required
-    } else {
-      required = parameter.required || false
-    }
-    const label = readLabelValue(parameter, schema)
-    const { allowEmptyValue } = parameter
-    let notifyValueChange = false
-    let value
-    if (opts.arrayItem) {
-      value = opts.value || ''
-    } else {
-      value = this.readInputValue(parameter, schema)
-      notifyValueChange = true
-    }
-    if (value) {
-      value = ApiSchemaValues.parseScalarInput(value, schema)
-      value = this.correctDateTimeParameter(schema, value)
-    }
-    if (notifyValueChange && value !== undefined && value !== '') {
-      const typed = ApiSchemaValues.parseUserInput(value, schema)
-      InputCache.set(this.target, id, typed, this.globalCache)
-      this.paramChanged(id)
-    }
-    let step: number | undefined
-    if (['time', 'datetime-local'].includes(type || '')) {
-      step = 1
-    } else if (typeof multipleOf !== 'undefined') {
-      step = Number(multipleOf)
-    }
-    const title = parameter.description || schema.description
-    const nillable = this.nilValues
-    const nillDisabled = !!opts.nillable && nillable.includes(id)
-    const classes = {
-      'form-item': true,
-      required,
-      'optional': !required,
-    }
-    const finalValue = value === undefined ? '' : String(value)
-    return html`
-      <div class="${classMap(classes)}">
-        <ui-text-field
-          data-domain-id="${id}"
-          data-is-array="${ifDefined(opts.arrayItem)}"
-          data-index="${ifDefined(opts.index)}"
-          data-binding="${ifDefined(binding)}"
-          name="${parameter.name || schema.name || ''}"
-          class="form-input"
-          ?required="${required && !allowEmptyValue}"
-          .value="${finalValue}"
-          pattern="${ifDefined(pattern)}"
-          min="${ifDefined(minimum)}"
-          minLength="${ifDefined(minLength)}"
-          max="${ifDefined(maximum)}"
-          maxLength="${ifDefined(maxLength)}"
-          step="${ifDefined(step)}"
-          type="${ifDefined(type)}"
-          title="${ifDefined(title)}"
-          @change="${this.paramChangeHandler}"
-          ?disabled="${nillDisabled}"
-          label="${label}"
-        ></ui-text-field>
-        ${opts.nillable ? this.nillInputTemplate(parameter) : ''}
-        ${opts.arrayItem ? this.deleteParamTemplate(id, opts.index) : ''}
-      </div>
-    `
-  }
-
-  /**
-   * @param paramId The IApiParameter id.
-   * @param arrayIndex When this is an array item, the index on the array.
-   * @returns The template for the param remove button.
-   */
-  deleteParamTemplate(paramId: string, arrayIndex?: number): TemplateResult {
-    const title = 'Removes this parameter.'
-    return html`
-      <ui-icon-button
-        title="${title}"
-        data-domain-id="${paramId}"
-        data-index="${ifDefined(arrayIndex)}"
-        data-delete-param="true"
-        @click="${this.deleteParamHandler}"
-      >
-        <ui-icon icon="deleteOutline" role="presentation"></ui-icon>
-      </ui-icon-button>
-    `
-  }
-
-  /**
-   * @param parameter
-   * @param schema
-   * @param opts
-   * @returns The template for the enum input.
-   */
-  enumTemplate(
-    parameter: IApiParameter,
-    schema: IApiScalarShape,
-    opts: ShapeTemplateOptions = {}
-  ): TemplateResult | string {
-    let required = false
-    if (typeof opts.required === 'boolean') {
-      required = opts.required
-    } else {
-      required = parameter.required || false
-    }
-    const label = readLabelValue(parameter, schema)
-    const enumValues = (schema.values || []) as IApiScalarNode[]
-    const selectedValue = this.readInputValue(parameter, schema)
-    const selected = enumValues.findIndex((i) => i.value === selectedValue)
-    const { id, binding } = parameter
-    const title = parameter.description || schema.description
-    const nillable = this.nilValues
-    const nillDisabled = !!opts.nillable && nillable.includes(id)
-    const classes = {
-      'form-item': true,
-      required,
-      'optional': !required,
-    }
-
-    const item = enumValues[selected]
-    const finalValue = item ? item.value || '' : ''
-    return html`
-      <div class="${classMap(classes)}">
-        <ui-dropdown-list
-          class="param-selector"
-          closeOnOutsideClick
-          matchTriggerWidth
-          @select="${this.enumSelectionHandler}"
-          data-binding="${ifDefined(binding)}"
-          data-domain-id="${id}"
-          data-is-array="${ifDefined(opts.arrayItem)}"
-        >
-          <ui-text-field
-            class="dropdown-trigger"
-            label="${label}"
-            readOnly
-            ?required="${required}"
-            .value="${finalValue || ''}"
-            @select="${cancelEvent}"
-            name="${parameter.name || schema.name || ''}"
-            ?disabled="${nillDisabled}"
-            title="${ifDefined(title)}"
-          >
-            <ui-icon icon="arrowDropDown" role="presentation" slot="suffix"></ui-icon>
-          </ui-text-field>
-          <ui-list slot="dropdown" role="menu" selector="[data-value]" selectActive>
-            ${enumValues.map((value) => this.renderEnumItem(value))}
-          </ui-list>
-        </ui-dropdown-list>
-        ${opts.nillable ? this.nillInputTemplate(parameter) : ''}
-      </div>
-    `
-  }
-
-  protected renderEnumItem(item: IApiScalarNode): TemplateResult {
-    const { dataType, value } = item
-    return html`
-      <ui-list-item role="menuitem" data-type="${ifDefined(dataType)}" data-value="${ifDefined(value)}"
-        >${value}</ui-list-item
-      >
-    `
-  }
-
-  /**
-   * @returns The template for the checkbox input.
-   */
-  booleanTemplate(
-    parameter: IApiParameter,
-    schema: IApiScalarShape,
-    opts: ShapeTemplateOptions = {}
-  ): TemplateResult | string {
-    const label = readLabelValue(parameter, schema)
-    const { id } = parameter
-    let value: boolean
-    if (opts.arrayItem) {
-      value = (opts.value as boolean) || false
-    } else {
-      value = this.readInputValue(parameter, schema) as boolean
-    }
-    const title = parameter.description || schema.description
-    const nillable = this.nilValues
-    const nillDisabled = !!opts.nillable && nillable.includes(id)
-    const classes = {
-      'form-item': true,
-      'required': parameter.required || false,
-      'optional': !parameter.required,
-    }
-    // note, don't mark a checkbox as required. A checkbox also produces `false` value
-    // which should be passed to the transport. The request data processor should take care of
-    // producing the right output.
-    return html`
-      <div class="${classMap(classes)}">
-        <label class="label-large">
-          <ui-checkbox
-            class="boolean-param"
-            name="${parameter.name || schema.name || ''}"
-            data-binding="${ifDefined(parameter.binding)}"
-            .checked="${value}"
-            title="${ifDefined(title)}"
-            data-domain-id="${id}"
-            data-is-array="${ifDefined(opts.arrayItem)}"
-            ?disabled="${nillDisabled}"
-            @change="${this.booleanHandler}"
-            aria-label="${label}"
-          ></ui-checkbox>
-          ${label}
-        </label>
-        ${opts.nillable ? this.nillInputTemplate(parameter) : ''}
-      </div>
-    `
-  }
-
-  /**
-   * @returns The template for the nil checkbox input.
-   */
-  nillInputTemplate(parameter: IApiParameter): TemplateResult | string {
-    return html`
-      <label class="label-large">
-        <ui-checkbox
-          class="nil-option"
-          data-domain-id="${parameter.id}"
-          data-binding="${ifDefined(parameter.binding)}"
-          title="Makes the property nillable (e.g. inserts null into the schema)"
-          @change="${this.nilHandler}"
-          aria-label="Nil"
-        ></ui-checkbox>
-        Nil
-      </label>
-    `
-  }
-
-  /**
-   * or now we do not support union shapes. There's no way to learn how to serialize
-   * the Node shape to a string.
-   * @returns {TemplateResult|string} The template for the node shape.
-   */
-  nodeShapeTemplate(): TemplateResult | string {
-    return ''
-  }
-
-  /**
-   * @returns The template for the union shape.
-   */
-  unionShapeTemplate(parameter: IApiParameter, schema: IApiUnionShape): TemplateResult | string {
-    const { anyOf } = schema
-    if (!anyOf || !anyOf.length) {
-      return ''
-    }
-    const nil = anyOf.find((shape) => shape.types.includes(AmfNamespace.aml.vocabularies.shapes.NilShape))
-    if (nil && anyOf.length === 2) {
-      // this is a case where a scalar is marked as nillable instead of not required
-      // (which for some reason is a common practice among RAML developers).
-      const scalar = anyOf.find((shape) => shape !== nil) as IShapeUnion
-      return this.parameterSchemaTemplate(parameter, scalar, {
-        nillable: true,
-      })
-    }
-    const hasComplex = anyOf.some((i) => !i.types.includes(AmfNamespace.aml.vocabularies.shapes.ScalarShape))
-    const hasScalar = anyOf.some((i) => i.types.includes(AmfNamespace.aml.vocabularies.shapes.ScalarShape))
-    if (hasComplex && !hasScalar) {
-      // We quit here as this is the same problem as with the Node shape - unclear how to serialize the types
-      return ''
-    }
-    // at this point only scalars are possible. For that we render a regular text field
-    // and while serializing the values we figure out what type it should be giving the
-    // value provided and available types in the union.
-    let opts: ShapeTemplateOptions | undefined
-    if (nil) {
-      opts = { nillable: true }
-    }
-    return this.textInputTemplate(parameter, schema, 'text', opts)
-  }
-
-  /**
-   * This situation makes not sense as there's no mechanism to describe how to
-   * put a file into a path, query, or headers.
-   * @returns The template for the file shape.
-   */
-  fileShapeTemplate(): TemplateResult | string {
-    return ''
-  }
-
-  /**
-   * For now we do not support union shapes. There's no way to learn how to serialize
-   * the Schema shape to a string.
-   * @returns The template for the schema shape.
-   */
-  schemaShapeTemplate(): TemplateResult | string {
-    return ''
-  }
-
-  /**
-   * @returns The template for the array shape.
-   */
-  arrayShapeTemplate(parameter: IApiParameter, schema: IApiArrayShape): TemplateResult | string {
-    const { items } = schema
-    if (!items) {
-      return ''
-    }
-    const { id } = parameter
-    const label = readLabelValue(parameter, schema)
-    const values = this.readInputValue(parameter, schema, true) as unknown[]
-    const options = { arrayItem: true }
-    const inputs = (values || []).map((value, index) =>
-      this.parameterSchemaTemplate(parameter, items, { ...options, value, index })
-    )
-    const classes = {
-      'array-form-item': true,
-      'required': !!parameter.required,
-      'optional': !parameter.required,
-    }
-    return html`
-      <div class="${classMap(classes)}" data-param-id="${id}" data-param-label="${label}">
-        <div class="array-title"><span class="label">${label}</span></div>
-        ${inputs} ${this.addArrayItemTemplate(id)}
-      </div>
-    `
-  }
-
-  /**
-   * @returns The template for the tuple shape.
-   */
-  tupleShapeTemplate(parameter: IApiParameter, schema: IApiTupleShape): TemplateResult | string {
-    const { items } = schema
-    if (!items) {
-      return ''
-    }
-    // TODO: not sure how to process this value...
-    return ''
-  }
-
-  /**
-   * @returns The template for the Any shape.
-   */
-  anyShapeTemplate(parameter: IApiParameter, schema: IApiAnyShape): TemplateResult | string {
-    return this.textInputTemplate(parameter, schema, 'text')
-  }
-
-  /**
-   * @param id The id of the parameter to add the value to.
-   * @returns The template for the adding an array item button
-   */
-  addArrayItemTemplate(id: string): TemplateResult | string {
-    return html`
-      <ui-filled-tonal-button data-id="${id}" @click="${this.addArrayValueHandler}" class="add-item-button"
-        >Add new value</ui-filled-tonal-button
-      >
-    `
-  }
-
-  /**
-   * Handler for a custom parameter input change.
-   */
-  protected customParamChangeHandler(e: Event): void {
-    const input = e.target as Input
-    const { value, name, dataset } = input
-    const { domainId } = dataset
-    if (!domainId || !['paramName', 'paramValue'].includes(name || '')) {
-      return
-    }
-    if (name === 'paramName') {
-      const param = this.parametersValue.find((item) => item.paramId === domainId)
-      if (!param) {
-        return
-      }
-      param.parameter.name = value
-    } else {
-      InputCache.set(this.target as HTMLElement, domainId, value, this.globalCache)
-    }
-    this.notifyChange()
-    this.paramChanged(domainId)
-  }
-
-  /**
-   * @param param The parameter to render
-   * @returns The template for a custom parameter
-   */
-  protected customParamTemplate(param: OperationParameter): TemplateResult {
-    const value = InputCache.get(this.target as HTMLElement, param.paramId, this.globalCache) as string
-    const classes = {
-      'form-item': true,
-      'custom-item': true,
-    }
-    let nameLabel
-    let nameTitle
-    let valueLabel
-    let valueTitle
-    if (param.binding === 'query') {
-      nameLabel = 'Query parameter'
-      nameTitle = 'The name of this query parameter'
-      valueLabel = 'Parameter value'
-      valueTitle = 'The value of this query parameter'
-    } else if (param.binding === 'header') {
-      nameLabel = 'Header name'
-      nameTitle = 'The name of this header'
-      valueLabel = 'Header value'
-      valueTitle = 'The value of this header'
-    } else {
-      nameLabel = 'Parameter name'
-      nameTitle = 'The name of the parameter'
-      valueLabel = 'Parameter value'
-      valueTitle = 'The value of the parameter'
-    }
-    return html`
-      <div class="${classMap(classes)}">
-        <ui-text-field
-          data-domain-id="${param.paramId}"
-          data-binding="${param.binding}"
-          class="form-input custom-name"
-          .value="${param.parameter.name || ''}"
-          title="${nameTitle}"
-          name="paramName"
-          @change="${this.customParamChangeHandler}"
-          noFloating
-          label="${nameLabel}"
-        ></ui-text-field>
-        <ui-text-field
-          data-domain-id="${param.paramId}"
-          data-binding="${param.binding}"
-          class="form-input custom-value"
-          .value="${value}"
-          title="${valueTitle}"
-          name="paramValue"
-          @change="${this.customParamChangeHandler}"
-          noFloating
-          label="${valueLabel}"
-        ></ui-text-field>
-        ${this.deleteParamTemplate(param.paramId)}
-      </div>
-    `
-  }
-}