@api-client/ui 0.0.4 → 0.0.7

package/dist/elements/http/HttpAssertions.js

@@ -1,1144 +0,0 @@
-import { __decorate } from "tslib";
-import { DataSteps, FlowSourceEnum, FlowRequestDataEnum, FlowResponseDataEnum, TransformationSteps, HttpAssertions as CoreAssertions, AmfNamespace } from "@api-client/core/build/browser.js";
-import { html, nothing } from "lit";
-import { property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
-import ApiElement from "../ApiElement.js";
-import '../../define/ui/ui-button.js';
-import '../../define/ui/ui-icon-button.js';
-import '../../define/ui/ui-switch.js';
-import '../../define/ui/ui-icon.js';
-import '../../define/ui/ui-text-field.js';
-import '../../define/ui/ui-chip.js';
-import '../../define/ui/ui-dialog.js';
-/**
- * @fires change When the model change
- */
-export default class HttpAssertions extends ApiElement {
-    /**
-     * The list of assertions.
-     * This is a live list. All changes are propagated in the model.
-     */
-    model = [];
-    /**
-     * Adds a new empty assertion to the model.
-     * Note, this function won't notify the parent element
-     * about the change as empty rules can be discarded.
-     */
-    addAssertion() {
-        const { model } = this;
-        model.push({
-            enabled: true,
-            steps: [],
-        });
-        this.requestUpdate();
-    }
-    /**
-     * Removes an assertion at specified index.
-     * @param index The index of the assertion in the `model` to remove.
-     */
-    removeAssertion(index) {
-        const { model } = this;
-        if (!model[index]) {
-            throw new RangeError(`Invalid index: ${index}`);
-        }
-        model.splice(index, 1);
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    /**
-     * Toggles the enabled state of the assertion.
-     * @param index The index of the assertion on the `model` array
-     * @param value The `enabled` value.
-     */
-    toggleAssertion(index, value) {
-        const { model } = this;
-        if (!model[index]) {
-            throw new RangeError(`Invalid index: ${index}`);
-        }
-        model[index].enabled = value;
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    notifyChange() {
-        this.dispatchEvent(new Event('change'));
-    }
-    handleAdd() {
-        this.addAssertion();
-    }
-    handleRemove(e) {
-        const node = e.currentTarget;
-        const index = Number(node.dataset.index);
-        if (Number.isNaN(index)) {
-            return;
-        }
-        this.removeAssertion(index);
-    }
-    handleToggle(e) {
-        const node = e.currentTarget;
-        const index = Number(node.dataset.index);
-        if (Number.isNaN(index)) {
-            return;
-        }
-        this.toggleAssertion(index, node.checked);
-    }
-    handleRemoveStep(e) {
-        const target = e.currentTarget;
-        const assertionIndex = Number(target.dataset.index);
-        const stepIndex = Number(target.dataset.stepIndex);
-        if (Number.isNaN(assertionIndex) || Number.isNaN(stepIndex)) {
-            return;
-        }
-        const assertion = this.model[assertionIndex];
-        if (!assertion) {
-            return;
-        }
-        assertion.steps.splice(stepIndex, 1);
-        this.notifyChange();
-        this.requestUpdate();
-    }
-    draggedChip;
-    isValidDropTarget(dataTransfer) {
-        if (!dataTransfer) {
-            return false;
-        }
-        const { types } = dataTransfer;
-        return types.includes('assertion/group') && types.includes('assertion/kind');
-    }
-    handleDragStart(e) {
-        const { dataTransfer } = e;
-        if (!dataTransfer) {
-            return;
-        }
-        const chip = e.target;
-        const { group, kind, source, data, variant } = chip.dataset;
-        if (!group || !kind) {
-            return;
-        }
-        const copy = chip.cloneNode(true);
-        copy.style.position = 'absolute';
-        copy.style.top = `-100px`;
-        this.draggedChip = copy;
-        document.body.appendChild(copy);
-        dataTransfer.setDragImage(copy, 0, 0);
-        dataTransfer.setData('assertion/group', group);
-        dataTransfer.setData('assertion/kind', kind);
-        if (source) {
-            dataTransfer.setData('assertion/source', source);
-        }
-        if (data) {
-            dataTransfer.setData('assertion/data', data);
-        }
-        if (variant) {
-            dataTransfer.setData('assertion/variant', variant);
-        }
-        chip.blur();
-    }
-    handleDragEnd(e) {
-        const { draggedChip } = this;
-        if (!draggedChip) {
-            return;
-        }
-        e.preventDefault();
-        draggedChip.parentElement?.removeChild(draggedChip);
-    }
-    handleTargetDragOver(e) {
-        const { draggedChip } = this;
-        if (!draggedChip || e.defaultPrevented || !this.isValidDropTarget(e.dataTransfer)) {
-            return;
-        }
-        e.preventDefault();
-        const target = e.currentTarget;
-        target.classList.add('dragover');
-    }
-    handleTargetDragLeave(e) {
-        if (e.defaultPrevented || !this.isValidDropTarget(e.dataTransfer)) {
-            return;
-        }
-        const target = e.currentTarget;
-        target.classList.remove('dragover');
-    }
-    handleDrop(e) {
-        const { dataTransfer } = e;
-        if (!dataTransfer || e.defaultPrevented || !this.isValidDropTarget(dataTransfer)) {
-            return;
-        }
-        e.preventDefault();
-        this.resetDragIndices();
-        const { index, stepIndex } = e.target.dataset;
-        const typedAssertionIndex = Number(index);
-        if (Number.isNaN(typedAssertionIndex)) {
-            return;
-        }
-        let typedStepIndex;
-        if (stepIndex) {
-            const tmp = Number(stepIndex);
-            if (!Number.isNaN(tmp)) {
-                typedStepIndex = tmp;
-            }
-        }
-        this.processDrop(dataTransfer, typedAssertionIndex, typedStepIndex);
-    }
-    resetDragIndices() {
-        const nodes = this.shadowRoot.querySelectorAll('.dragover');
-        Array.from(nodes).forEach(n => n.classList.remove('dragover'));
-    }
-    processDrop(dataTransfer, assertionIndex, stepIndex) {
-        const group = dataTransfer.getData('assertion/group');
-        if (!group) {
-            return;
-        }
-        if (group === 'data-source') {
-            this.processDataSourceDrop(dataTransfer, assertionIndex, stepIndex);
-        }
-        else if (group === 'transformation') {
-            this.processTransformationDrop(dataTransfer, assertionIndex, stepIndex);
-        }
-        else if (group === 'assertion') {
-            this.processAssertionDrop(dataTransfer, assertionIndex, stepIndex);
-        }
-    }
-    processDataSourceDrop(dataTransfer, assertionIndex, stepIndex) {
-        const item = this.model[assertionIndex];
-        if (!item) {
-            return;
-        }
-        const source = dataTransfer.getData('assertion/source');
-        const data = dataTransfer.getData('assertion/data');
-        const step = new DataSteps.ReadDataSourceStep(source, data).toJSON();
-        if (stepIndex === undefined) {
-            item.steps.push(step);
-        }
-        else if (stepIndex === -1) {
-            item.steps.unshift(step);
-        }
-        else {
-            item.steps.splice(stepIndex, 0, step);
-        }
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    processTransformationDrop(dataTransfer, assertionIndex, stepIndex) {
-        const item = this.model[assertionIndex];
-        if (!item) {
-            return;
-        }
-        let step;
-        const kind = dataTransfer.getData('assertion/kind');
-        if (kind === DataSteps.ReadValueStepKind) {
-            step = new DataSteps.ReadValueStep().toJSON();
-        }
-        else if (kind === TransformationSteps.AsNumberStepKind) {
-            step = new TransformationSteps.AsNumberStep().toJSON();
-        }
-        else if (kind === TransformationSteps.RoundStepKind) {
-            step = new TransformationSteps.RoundStep().toJSON();
-        }
-        else if (kind === TransformationSteps.AsLowerCaseStepKind) {
-            step = new TransformationSteps.AsLowerCaseStep().toJSON();
-        }
-        else if (kind === TransformationSteps.AsUpperCaseStepKind) {
-            step = new TransformationSteps.AsUpperCaseStep().toJSON();
-        }
-        else if (kind === TransformationSteps.TrimStepKind) {
-            step = new TransformationSteps.TrimStep().toJSON();
-        }
-        else if (kind === TransformationSteps.SubstringStepKind) {
-            step = new TransformationSteps.SubstringStep().toJSON();
-        }
-        if (!step) {
-            return;
-        }
-        if (stepIndex === undefined) {
-            item.steps.push(step);
-        }
-        else if (stepIndex === -1) {
-            item.steps.unshift(step);
-        }
-        else {
-            item.steps.splice(stepIndex, 0, step);
-        }
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    processAssertionDrop(dataTransfer, assertionIndex, stepIndex) {
-        const item = this.model[assertionIndex];
-        if (!item) {
-            return;
-        }
-        let step;
-        const kind = dataTransfer.getData('assertion/kind');
-        if (kind === CoreAssertions.EqualAssertionKind) {
-            step = new CoreAssertions.EqualAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.NotEqualAssertionKind) {
-            step = new CoreAssertions.NotEqualAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.GreaterThanAssertionKind) {
-            const instance = new CoreAssertions.GreaterThanAssertion();
-            if (dataTransfer.getData('assertion/variant') === 'equal') {
-                instance.equal = true;
-            }
-            step = instance.toJSON();
-        }
-        else if (kind === CoreAssertions.LessThanAssertionKind) {
-            const instance = new CoreAssertions.LessThanAssertion();
-            if (dataTransfer.getData('assertion/variant') === 'equal') {
-                instance.equal = true;
-            }
-            step = instance.toJSON();
-        }
-        else if (kind === CoreAssertions.IncludesAssertionKind) {
-            step = new CoreAssertions.IncludesAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.NotIncludesAssertionKind) {
-            step = new CoreAssertions.NotIncludesAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.MatchesAssertionKind) {
-            step = new CoreAssertions.MatchesAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.OkAssertionKind) {
-            step = new CoreAssertions.OkAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.NotOkAssertionKind) {
-            step = new CoreAssertions.NotOkAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.ToBeAssertionKind) {
-            step = new CoreAssertions.ToBeAssertion().toJSON();
-        }
-        else if (kind === CoreAssertions.NotToBeAssertionKind) {
-            step = new CoreAssertions.NotToBeAssertion().toJSON();
-        }
-        if (!step) {
-            return;
-        }
-        if (stepIndex === undefined) {
-            item.steps.push(step);
-        }
-        else if (stepIndex === -1) {
-            item.steps.unshift(step);
-        }
-        else {
-            item.steps.splice(stepIndex, 0, step);
-        }
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleReadValueStepChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        input.checkValidity();
-        step.path = input.value;
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleRoundPrecisionChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        input.checkValidity();
-        step.precision = input.valueAsNumber;
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleSubstringStartChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        input.checkValidity();
-        step.start = input.valueAsNumber;
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleSubstringEndChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        input.checkValidity();
-        step.end = input.valueAsNumber;
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleEqualAssertionValueChange(e) {
-        const input = e.target;
-        input.checkValidity();
-        const assertionIndex = Number(input.dataset.assertionIndex);
-        const stepIndex = Number(input.dataset.stepIndex);
-        if (Number.isNaN(assertionIndex) || Number.isNaN(stepIndex)) {
-            return;
-        }
-        const assertion = this.model[assertionIndex];
-        if (!assertion) {
-            return;
-        }
-        const step = assertion.steps[stepIndex];
-        if (!step) {
-            return;
-        }
-        step.value = input.value;
-        step.dataType = this.detectInputDataType(assertion.steps.slice(0, stepIndex));
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleGreaterThanAssertionValueChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        input.checkValidity();
-        step.value = Number(input.value);
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleLessThanAssertionValueChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        input.checkValidity();
-        step.value = Number(input.value);
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleIncludesAssertionValueChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        input.checkValidity();
-        step.value = input.value;
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    handleMatchesAssertionValueChange(e) {
-        const step = this.stepFromChangeEvent(e);
-        if (!step) {
-            return;
-        }
-        const input = e.target;
-        step.value = input.value;
-        this.requestUpdate();
-        this.notifyChange();
-    }
-    validateRegexPattern(e) {
-        const input = e.target;
-        try {
-            RegExp(input.value);
-            input.setCustomValidity('');
-        }
-        catch (_) {
-            input.setCustomValidity('Pattern is invalid');
-        }
-        input.reportValidity();
-    }
-    stepFromChangeEvent(e) {
-        const input = e.target;
-        input.checkValidity();
-        const assertionIndex = Number(input.dataset.assertionIndex);
-        const stepIndex = Number(input.dataset.stepIndex);
-        if (Number.isNaN(assertionIndex) || Number.isNaN(stepIndex)) {
-            return undefined;
-        }
-        const assertion = this.model[assertionIndex];
-        if (!assertion) {
-            return undefined;
-        }
-        return assertion.steps[stepIndex];
-    }
-    /**
-     * Detects the correct data type for the step value based on previous steps.
-     *
-     * @param steps The steps before the current step
-     * @returns The data type for the step in the AMF namespace.
-     */
-    detectInputDataType(steps) {
-        // we reverse the list so we move from the last step.
-        const reversed = [...steps].reverse();
-        for (const step of reversed) {
-            if (step.kind === TransformationSteps.AsNumberStepKind) {
-                return AmfNamespace.aml.vocabularies.shapes.number;
-            }
-            if (step.kind === DataSteps.ReadDataSourceStepKind) {
-                const typed = step;
-                if (typed.data === FlowResponseDataEnum.status) {
-                    return AmfNamespace.aml.vocabularies.shapes.number;
-                }
-            }
-        }
-        return AmfNamespace.w3.xmlSchema.string;
-    }
-    handleRenameAssertion(e) {
-        const target = e.currentTarget;
-        const assertionIndex = Number(target.dataset.assertionIndex);
-        if (Number.isNaN(assertionIndex)) {
-            return;
-        }
-        const assertion = this.model[assertionIndex];
-        if (!assertion) {
-            return;
-        }
-        const { description } = assertion;
-        const dialog = this.shadowRoot?.querySelector('.rename-dialog');
-        if (!dialog) {
-            return;
-        }
-        const input = dialog.querySelector('ui-text-field');
-        input.value = description || '';
-        dialog.open = true;
-        dialog.dataset.assertionIndex = target.dataset.assertionIndex;
-    }
-    handleRenameDialogResult(e) {
-        if (e.detail.cancelled) {
-            return;
-        }
-        const dialog = e.currentTarget;
-        const assertionIndex = Number(dialog.dataset.assertionIndex);
-        if (Number.isNaN(assertionIndex)) {
-            return;
-        }
-        const assertion = this.model[assertionIndex];
-        if (!assertion) {
-            return;
-        }
-        const input = dialog.querySelector('ui-text-field');
-        assertion.description = input.value;
-        this.requestUpdate();
-        this.notifyChange();
-        input.value = '';
-        delete dialog.dataset.assertionIndex;
-    }
-    render() {
-        return html `
-    ${this.renderActionButtons()}
-    <div class="container">
-      ${this.renderEditor()}
-      ${this.renderAssertions()}
-    </div>
-    ${this.renderRenameAssertionDialog()}
-    `;
-    }
-    renderActionButtons() {
-        return html `
-    <div class="editor-actions">
-      <ui-button type="tonal" @click="${this.handleAdd}" class="add-button">Add</ui-button>
-    </div>
-    `;
-    }
-    renderAssertions() {
-        return html `
-    <section aria-label="Assertion options" class="options">
-      ${this.renderDataSourceOptions()}
-      ${this.renderTransformationOptions()}
-      ${this.renderAssertionOptions()}
-    </section>
-    `;
-    }
-    renderStepChip(label, group, kind, variant) {
-        return html `
-    <ui-chip 
-      draggable="true" 
-      data-group="${group}" 
-      data-kind="${kind}" 
-      data-variant="${ifDefined(variant)}" 
-      @dragstart="${this.handleDragStart}" 
-      @dragend="${this.handleDragEnd}"
-    >${label}</ui-chip>
-    `;
-    }
-    renderDataSourceChip(label, group, kind, source, data) {
-        return html `
-    <ui-chip 
-      draggable="true" 
-      data-group="${group}" 
-      data-kind="${kind}" 
-      data-source="${source}" 
-      data-data="${data}" 
-      @dragstart="${this.handleDragStart}" 
-      @dragend="${this.handleDragEnd}"
-    >${label}</ui-chip>
-    `;
-    }
-    renderDataSourceOptions() {
-        return html `
-    <details class="assertion-group" open>
-      <summary>Data source</summary>
-      <div class="group-content">
-        ${this.renderDataSourceChip('Status code', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.status)}
-        ${this.renderDataSourceChip('Response headers', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.headers)}
-        ${this.renderDataSourceChip('Response body', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.body)}
-        ${this.renderDataSourceChip('Status message', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.statusText)}
-      </div>
-    </details>
-    `;
-    }
-    renderTransformationOptions() {
-        return html `
-    <details class="assertion-group" open>
-      <summary>Transformation</summary>
-      <div class="group-content">
-        ${this.renderStepChip('Read value', 'transformation', DataSteps.ReadValueStepKind)}
-        ${this.renderStepChip('As number', 'transformation', TransformationSteps.AsNumberStepKind)}
-        ${this.renderStepChip('Round', 'transformation', TransformationSteps.RoundStepKind)}
-        ${this.renderStepChip('To lower case', 'transformation', TransformationSteps.AsLowerCaseStepKind)}
-        ${this.renderStepChip('To upper case', 'transformation', TransformationSteps.AsUpperCaseStepKind)}
-        ${this.renderStepChip('Trim', 'transformation', TransformationSteps.TrimStepKind)}
-        ${this.renderStepChip('Substring', 'transformation', TransformationSteps.SubstringStepKind)}
-      </div>
-    </details>
-    `;
-    }
-    renderAssertionOptions() {
-        return html `
-    <details class="assertion-group" open>
-      <summary>Assertions</summary>
-      <div class="group-content">
-        ${this.renderStepChip('Equal', 'assertion', CoreAssertions.EqualAssertionKind)}
-        ${this.renderStepChip('Not equal', 'assertion', CoreAssertions.NotEqualAssertionKind)}
-        ${this.renderStepChip('Greater than', 'assertion', CoreAssertions.GreaterThanAssertionKind)}
-        ${this.renderStepChip('Greater than equal', 'assertion', CoreAssertions.GreaterThanAssertionKind, 'equal')}
-        ${this.renderStepChip('Less than', 'assertion', CoreAssertions.LessThanAssertionKind)}
-        ${this.renderStepChip('Less than equal', 'assertion', CoreAssertions.LessThanAssertionKind, 'equal')}
-        ${this.renderStepChip('Includes', 'assertion', CoreAssertions.IncludesAssertionKind)}
-        ${this.renderStepChip('Not includes', 'assertion', CoreAssertions.NotIncludesAssertionKind)}
-        ${this.renderStepChip('Matches', 'assertion', CoreAssertions.MatchesAssertionKind)}
-        ${this.renderStepChip('OK', 'assertion', CoreAssertions.OkAssertionKind)}
-        ${this.renderStepChip('Not OK', 'assertion', CoreAssertions.NotOkAssertionKind)}
-        ${this.renderStepChip('To be...', 'assertion', CoreAssertions.ToBeAssertionKind)}
-        ${this.renderStepChip('Not to be...', 'assertion', CoreAssertions.NotToBeAssertionKind)}
-      </div>
-    </details>
-    `;
-    }
-    renderEditor() {
-        const { model } = this;
-        const content = Array.isArray(model) && !!model.length ? this.renderList(model) : this.renderEmptyMessage();
-        return html `
-    <section aria-label="Assertions editor" class="editor">${content}</section>
-    `;
-    }
-    renderEmptyMessage() {
-        return html `
-    <div class="empty-message">No assertions added</div>
-    `;
-    }
-    renderList(model) {
-        return html `
-    ${model.map((item, index) => this.renderAssertion(item, index))}
-    `;
-    }
-    renderAssertion(item, index) {
-        return html `
-    ${this.renderAssertionDescription(item)}
-    <div class="param-row">
-      ${this.renderToggleButton(item, index)}
-      ${this.renderSteps(item, index)}
-      <div class="assertion-actions">
-        ${this.renderRenameAssertion(index)}
-        ${this.renderDeleteAssertion(index)}
-      </div>
-    </div>
-    `;
-    }
-    renderAssertionDescription(item) {
-        const { description } = item;
-        if (!description) {
-            return nothing;
-        }
-        return html `
-    <div class="assertion-description label-medium">${description}</div>
-    `;
-    }
-    renderToggleButton(item, assertionIndex) {
-        return html `
-    <ui-switch 
-      .checked="${!!item.enabled}" 
-      @change="${this.handleToggle}" 
-      aria-label="Toggle this assertion"
-      data-index="${assertionIndex}"
-      class="toggle-button"
-    ></ui-switch>
-    `;
-    }
-    renderRenameAssertion(assertionIndex) {
-        return html `
-    <ui-icon-button 
-      aria-label="Rename this assertion" 
-      title="Rename this assertion" 
-      data-assertion-index="${assertionIndex}" 
-      @click="${this.handleRenameAssertion}"
-      class="rename-button"
-    >
-      <ui-icon icon="rename" role="presentation"></ui-icon>
-    </ui-icon-button>
-    `;
-    }
-    renderDeleteAssertion(assertionIndex) {
-        return html `
-    <ui-icon-button 
-      aria-label="Delete this assertion" 
-      title="Delete this assertion" 
-      data-index="${assertionIndex}" 
-      @click="${this.handleRemove}"
-      class="delete-button"
-    >
-      <ui-icon icon="deleteOutline" role="presentation"></ui-icon>
-    </ui-icon-button>
-    `;
-    }
-    renderSteps(item, assertionIndex) {
-        const content = Array.isArray(item.steps) && !!item.steps.length ? this.renderStepsList(item.steps, assertionIndex) : this.renderEmptyStep(assertionIndex);
-        return html `
-    <div 
-      class="steps" 
-      data-index="${assertionIndex}"
-      @drop="${this.handleDrop}" 
-      @dragover="${this.handleTargetDragOver}"
-      @dragleave="${this.handleTargetDragLeave}"
-    >${content}</div>
-    `;
-    }
-    renderEmptyStep(assertionIndex) {
-        return html `
-    <span class="step-pill empty drop-target space-step-left" data-index="${assertionIndex}" @drop="${this.handleDrop}" @dragover="${this.handleTargetDragOver}">Empty slot</span>
-    <span class="drop-info drop-target space-step-left" data-index="${assertionIndex}" @drop="${this.handleDrop}" @dragover="${this.handleTargetDragOver}">Drop an action here</span>
-    `;
-    }
-    renderStepsList(steps, assertionIndex) {
-        const items = [];
-        steps.forEach((item, stepIndex) => {
-            const content = this.renderStep(item, assertionIndex, stepIndex);
-            if (content) {
-                items.push(html `
-        <div class="step-unit">
-          ${this.renderDropSpacer(assertionIndex, stepIndex)}
-          ${content}
-        </div>
-        `);
-            }
-        });
-        return items;
-    }
-    renderStep(item, assertionIndex, stepIndex) {
-        const { kind } = item;
-        switch (kind) {
-            case DataSteps.ReadDataSourceStepKind: return this.renderReadDataSourceStep(item, assertionIndex, stepIndex);
-            case DataSteps.ReadValueStepKind: return this.renderReadValueStep(item, assertionIndex, stepIndex);
-            // transformations
-            case TransformationSteps.AsNumberStepKind: return this.renderStepPill('As number', assertionIndex, stepIndex);
-            case TransformationSteps.AsLowerCaseStepKind: return this.renderStepPill('To lower case', assertionIndex, stepIndex);
-            case TransformationSteps.AsUpperCaseStepKind: return this.renderStepPill('To upper case', assertionIndex, stepIndex);
-            case TransformationSteps.TrimStepKind: return this.renderStepPill('Trim', assertionIndex, stepIndex);
-            case TransformationSteps.RoundStepKind: return this.renderRoundStep(item, assertionIndex, stepIndex);
-            case TransformationSteps.SubstringStepKind: return this.renderSubstringStep(item, assertionIndex, stepIndex);
-            // assertions
-            case CoreAssertions.EqualAssertionKind: return this.renderEqualAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.NotEqualAssertionKind: return this.renderNotEqualAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.GreaterThanAssertionKind: return this.renderGreaterThanAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.LessThanAssertionKind: return this.renderLessThanAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.IncludesAssertionKind: return this.renderIncludesAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.NotIncludesAssertionKind: return this.renderNotIncludesAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.MatchesAssertionKind: return this.renderMatchesAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.OkAssertionKind: return this.renderStepPill('Is OK', assertionIndex, stepIndex);
-            case CoreAssertions.NotOkAssertionKind: return this.renderStepPill('Is not OK', assertionIndex, stepIndex);
-            case CoreAssertions.ToBeAssertionKind: return this.renderToBeAssertion(item, assertionIndex, stepIndex);
-            case CoreAssertions.NotToBeAssertionKind: return this.renderNotToBeAssertion(item, assertionIndex, stepIndex);
-            default: return undefined;
-        }
-    }
-    renderDropSpacer(assertionIndex, stepIndex) {
-        return html `<div class="drop-target spacer" 
-      data-index="${assertionIndex}" 
-      data-step-index="${stepIndex}" 
-      @drop="${this.handleDrop}" 
-      @dragover="${this.handleTargetDragOver}"
-      @dragleave="${this.handleTargetDragLeave}"
-    > </div>`;
-    }
-    renderStepPill(label, assertionIndex, stepIndex) {
-        return html `
-    <span class="step-pill with-icon">
-      ${label}
-      <ui-icon-button
-        title="Remove"
-        aria-label="Deletes this step"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close"></ui-icon></ui-icon-button>
-    </span>
-    `;
-    }
-    renderReadDataSourceStep(item, assertionIndex, stepIndex) {
-        const { data, source } = item;
-        if (!data || !source) {
-            // invalid configuration
-            return undefined;
-        }
-        let label;
-        if (source === FlowSourceEnum.response) {
-            if (data === FlowResponseDataEnum.url) {
-                label = 'Response URL';
-            }
-            else if (data === FlowResponseDataEnum.headers) {
-                label = 'Response headers';
-            }
-            else if (data === FlowResponseDataEnum.status) {
-                label = 'Status code';
-            }
-            else if (data === FlowResponseDataEnum.statusText) {
-                label = 'Status message';
-            }
-            else if (data === FlowResponseDataEnum.body) {
-                label = 'Response body';
-            }
-        }
-        else if (source === FlowSourceEnum.request) {
-            if (data === FlowRequestDataEnum.url) {
-                label = 'Request URL';
-            }
-            else if (data === FlowRequestDataEnum.headers) {
-                label = 'Request headers';
-            }
-            else if (data === FlowRequestDataEnum.body) {
-                label = 'Request body';
-            }
-            else if (data === FlowRequestDataEnum.method) {
-                label = 'Request method';
-            }
-        }
-        if (!label) {
-            return undefined;
-        }
-        return this.renderStepPill(label, assertionIndex, stepIndex);
-    }
-    renderReadValueStep(item, assertionIndex, stepIndex) {
-        return html `
-    <ui-text-field
-      name="value.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="Read value"
-      required
-      .value="${live(item.path || '')}"
-      @change="${this.handleReadValueStepChange}"
-    ></ui-text-field>
-    `;
-    }
-    renderRoundStep(item, assertionIndex, stepIndex) {
-        const pill = this.renderStepPill('Round', assertionIndex, stepIndex);
-        const { precision = 0 } = item;
-        return html `
-    ${pill}
-    <ui-text-field
-      name="precision.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="Precision"
-      required
-      .value="${live(String(precision))}"
-      @change="${this.handleRoundPrecisionChange}"
-      class="space-step-left number-input"
-      type="number"
-      min="0"
-      max="100"
-      step="1"
-      title="The number of digits to appear after the decimal point. Should be a value between 0 and 100, inclusive."
-    ></ui-text-field>
-    `;
-    }
-    renderSubstringStep(item, assertionIndex, stepIndex) {
-        const pill = this.renderStepPill('Substring', assertionIndex, stepIndex);
-        const { start = 0, end } = item;
-        return html `
-    ${pill}
-    <ui-text-field
-      name="start.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="Start"
-      required
-      .value="${live(String(start))}"
-      @change="${this.handleSubstringStartChange}"
-      class="space-step-left number-input"
-      type="number"
-      step="1"
-      title="The index of the first character to include in the returned substring."
-    ></ui-text-field>
-
-    <ui-text-field
-      name="end.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="End"
-      .value="${live(end ? String(end) : '')}"
-      @change="${this.handleSubstringEndChange}"
-      class="space-step-left number-input"
-      type="number"
-      step="1"
-      title="The index of the first character to exclude from the returned substring."
-    ></ui-text-field>
-    `;
-    }
-    renderEqualAssertion(item, assertionIndex, stepIndex) {
-        return html `
-    <ui-text-field
-      name="equal.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.EqualAssertionKind}"
-      label="Equal to"
-      required
-      .value="${live(item.value || '')}"
-      @change="${this.handleEqualAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderNotEqualAssertion(item, assertionIndex, stepIndex) {
-        return html `
-    <ui-text-field
-      name="not-equal.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.NotEqualAssertionKind}"
-      label="Not equal to"
-      required
-      .value="${live(item.value || '')}"
-      @change="${this.handleEqualAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderGreaterThanAssertion(item, assertionIndex, stepIndex) {
-        const { equal, value } = item;
-        const label = equal ? 'Greater than equal' : 'Greater than';
-        const effectiveValue = typeof value === 'number' ? String(value) : '';
-        return html `
-    <ui-text-field
-      name="value.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.GreaterThanAssertionKind}"
-      data-variant="${equal ? 'equal' : ''}"
-      label="${label}"
-      required
-      .value="${live(effectiveValue)}"
-      @change="${this.handleGreaterThanAssertionValueChange}"
-      inputMode="numeric"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderLessThanAssertion(item, assertionIndex, stepIndex) {
-        const { equal, value } = item;
-        const label = equal ? 'Less than equal' : 'Less than';
-        const effectiveValue = typeof value === 'number' ? String(value) : '';
-        return html `
-    <ui-text-field
-      name="value.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.LessThanAssertionKind}"
-      data-variant="${equal ? 'equal' : ''}"
-      label="${label}"
-      required
-      .value="${live(effectiveValue)}"
-      @change="${this.handleLessThanAssertionValueChange}"
-      inputMode="numeric"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderIncludesAssertion(item, assertionIndex, stepIndex) {
-        const { value } = item;
-        return html `
-    <ui-text-field
-      name="includes.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.IncludesAssertionKind}"
-      label="Includes value"
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleIncludesAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderNotIncludesAssertion(item, assertionIndex, stepIndex) {
-        const { value } = item;
-        return html `
-    <ui-text-field
-      name="not-includes.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.NotIncludesAssertionKind}"
-      label="Not includes value"
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleIncludesAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderMatchesAssertion(item, assertionIndex, stepIndex) {
-        const { value } = item;
-        return html `
-    <ui-text-field
-      name="matches.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.MatchesAssertionKind}"
-      label="Matches regex"
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleMatchesAssertionValueChange}"
-      @input="${this.validateRegexPattern}"
-      invalidText="Pattern is invalid"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderToBeAssertion(item, assertionIndex, stepIndex) {
-        const { value } = item;
-        const types = Object.values(CoreAssertions.ToBeTypes);
-        return html `
-    <ui-text-field
-      name="to-be.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.ToBeAssertionKind}"
-      label="To be..."
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleMatchesAssertionValueChange}"
-      .list="${types}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderNotToBeAssertion(item, assertionIndex, stepIndex) {
-        const { value } = item;
-        const types = Object.values(CoreAssertions.ToBeTypes);
-        return html `
-    <ui-text-field
-      name="not-to-be.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.NotToBeAssertionKind}"
-      label="Not to be..."
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleMatchesAssertionValueChange}"
-      .list="${types}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-    }
-    renderRenameAssertionDialog() {
-        return html `
-    <ui-dialog modal class="rename-dialog" @close="${this.handleRenameDialogResult}">
-      <ui-icon slot="icon" icon="rename"></ui-icon>
-      <span slot="title">Rename assertion</span>
-      
-      <ui-text-field
-        name="rename"
-        label="Assertion description"
-        required
-      ></ui-text-field>
-
-      <ui-button slot="button" value="dismiss" type="text">Cancel</ui-button>
-      <ui-button slot="button" value="confirm" type="text">Accept</ui-button>
-    </ui-dialog>
-    `;
-    }
-}
-__decorate([
-    property({ type: Array })
-], HttpAssertions.prototype, "model", void 0);
-//# sourceMappingURL=HttpAssertions.js.map