@dile/crud 2.9.4 → 2.10.0

package/components/crud/crud.spec.js

@@ -360,3 +360,94 @@ describe('dile-crud list/grid view switch', () => {
     expect(el.listElement.viewMode).toBe('item');
   });
 });
+
+describe('dile-crud scope and refresh', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  async function createCrud() {
+    const config = new CrudConfigBuilder('https://example.test/api/invoices', {
+      customization: {
+        disableInsert: true,
+        disableHelp: true,
+        disableKeywordSearch: true,
+        disableSort: true,
+        disableFilter: true,
+        disablePagination: true,
+        hideCheckboxSelection: true,
+      },
+      templates: { item: (item) => html`<span>${item.name}</span>` },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    el.belongsTo = 'customer';
+    el.relationId = '10';
+    document.body.appendChild(el);
+    await el.updateComplete;
+    const list = el.listElement;
+    await list.updateComplete;
+    await list.elservice.updateComplete;
+
+    // Intercept the outgoing requests instead of hitting the network,
+    // and let the initial load (fired on start) settle first.
+    const requests = [];
+    const ajax = list.elservice.ajaxget;
+    ajax.generateRequest = () => requests.push({ url: ajax.url, data: ajax.data });
+    list.elservice.delayTime = 10;
+    await wait(250);
+    requests.length = 0;
+    return { el, list, requests, ajax };
+  }
+
+  it('setScope() updates belongsTo and relationId and reloads the list once from page 1', async () => {
+    const { el, list, requests, ajax } = await createCrud();
+    ajax.url = 'https://example.test/api/invoices?page=2';
+
+    el.setScope('supplier', '20');
+    expect(el.belongsTo).toBe('supplier');
+    expect(el.relationId).toBe('20');
+    await el.updateComplete;
+    await list.updateComplete;
+    await wait(50);
+
+    expect(list.belongsTo).toBe('supplier');
+    expect(list.relationId).toBe('20');
+    expect(requests).toHaveLength(1);
+    expect(requests[0].url).toBe('https://example.test/api/invoices');
+    expect(requests[0].data.belongsTo).toBe('supplier');
+    expect(requests[0].data.relationId).toBe('20');
+  });
+
+  it('setScope() without arguments clears the scope', async () => {
+    const { el, list, requests } = await createCrud();
+
+    el.setScope();
+    await el.updateComplete;
+    await list.updateComplete;
+    await wait(50);
+
+    expect(el.belongsTo).toBe('');
+    expect(el.relationId).toBe('');
+    expect(requests).toHaveLength(1);
+    expect(requests[0].data.belongsTo).toBeUndefined();
+    expect(requests[0].data.relationId).toBeUndefined();
+  });
+
+  it('refresh() keeps the current page and refresh({ resetPage: true }) goes back to page 1', async () => {
+    const { el, requests, ajax } = await createCrud();
+    const pagedUrl = 'https://example.test/api/invoices?page=2';
+
+    ajax.url = pagedUrl;
+    el.refresh();
+    await wait(50);
+    expect(requests.at(-1).url).toBe(pagedUrl);
+
+    el.refresh({ resetPage: true });
+    await wait(50);
+    expect(requests.at(-1).url).toBe('https://example.test/api/invoices');
+  });
+});

package/components/crud/src/DileCrud.js

@@ -525,8 +525,13 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         this.refresh();
     }
 
-    refresh() {
-        this.listElement.refresh();
+    refresh({ resetPage = false } = {}) {
+        this.listElement.refresh({ resetPage });
+    }
+
+    setScope(belongsTo = '', relationId = '') {
+        this.belongsTo = belongsTo;
+        this.relationId = relationId;
     }
 
     setCustomizationOption(optionName, value) {

package/components/list/crud-list.spec.js

@@ -371,3 +371,85 @@ describe('dile-crud-list grid template integration', () => {
     expect(el.shadowRoot.querySelector('dile-crud-data-grid')).toBeTruthy();
   });
 });
+
+describe('dile-crud-list scope changes and page reset', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  async function createList({ belongsTo, relationId } = {}) {
+    const config = new CrudConfigBuilder('https://example.test/api/invoices', {
+      templates: { item: (item) => html`<span>${item.name}</span>` },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    if (belongsTo !== undefined) el.belongsTo = belongsTo;
+    if (relationId !== undefined) el.relationId = relationId;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await el.elservice.updateComplete;
+
+    // Intercept the outgoing requests instead of hitting the network.
+    const requests = [];
+    const ajax = el.elservice.ajaxget;
+    ajax.generateRequest = () => requests.push({ url: ajax.url, data: ajax.data });
+    el.elservice.delayTime = 10;
+    return { el, requests, ajax };
+  }
+
+  it('does not fire an extra request on the initial render when scope is set from the start', async () => {
+    const { requests } = await createList({ belongsTo: 'customer', relationId: '10' });
+    await wait(50);
+    expect(requests).toHaveLength(0);
+  });
+
+  it('reloads from the first page with the new scope when belongsTo and relationId change', async () => {
+    const { el, requests, ajax } = await createList({ belongsTo: 'customer', relationId: '10' });
+    ajax.url = 'https://example.test/api/invoices?page=3';
+
+    let refreshEvents = 0;
+    el.addEventListener('crud-list-refresh', () => refreshEvents++);
+
+    el.belongsTo = 'supplier';
+    el.relationId = '20';
+    await el.updateComplete;
+    expect(el.loading).toBe(true);
+
+    await wait(50);
+    expect(refreshEvents).toBe(1);
+    expect(requests).toHaveLength(1);
+    expect(requests[0].url).toBe('https://example.test/api/invoices');
+    expect(requests[0].data.belongsTo).toBe('supplier');
+    expect(requests[0].data.relationId).toBe('20');
+  });
+
+  it('reloads when only relationId changes', async () => {
+    const { el, requests } = await createList({ belongsTo: 'customer', relationId: '10' });
+
+    el.relationId = '11';
+    await el.updateComplete;
+    await wait(50);
+
+    expect(requests).toHaveLength(1);
+    expect(requests[0].data.relationId).toBe('11');
+  });
+
+  it('keeps the current page on refresh() and goes back to page 1 on refresh({ resetPage: true })', async () => {
+    const { el, requests, ajax } = await createList();
+    const pagedUrl = 'https://example.test/api/invoices?page=3';
+
+    ajax.url = pagedUrl;
+    el.refresh();
+    await wait(50);
+    expect(requests.at(-1).url).toBe(pagedUrl);
+
+    el.refresh({ resetPage: true });
+    await wait(50);
+    expect(requests.at(-1).url).toBe('https://example.test/api/invoices');
+    expect(requests).toHaveLength(2);
+  });
+});

package/components/list/src/DileCrudList.js

@@ -132,6 +132,12 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         }
     }
 
+    willUpdate(changedProperties) {
+        if (this.hasUpdated && (changedProperties.has('belongsTo') || changedProperties.has('relationId'))) {
+            this.refresh({ resetPage: true });
+        }
+    }
+
     render() {
         return html`
             ${this.ajaxTemplate}
@@ -363,7 +369,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.elservice.goPrev();
     }
 
-    refresh() {
+    refresh({ resetPage = false } = {}) {
         this.dispatchEvent(new CustomEvent('crud-list-refresh', {
             bubbles: true,
             composed: true,
@@ -373,7 +379,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         if (this.isSelectAllActive) {
             this.shadowRoot.querySelector('dile-crud-select-all').reset();
         }
-        this.elservice.refresh();
+        resetPage ? this.elservice.cleanAndRefresh() : this.elservice.refresh();
     }    
 
     setKeyword(keyword) {

package/components/list/src/DileCrudListService.js

@@ -166,7 +166,7 @@ export class DileCrudListService extends DileI18nMixin(LitElement) {
   cleanAndRefresh() {
     if(this.ajaxget) {
       this.ajaxget.url = this.cleanUrl;
-      this.refresh();
     }
+    this.refresh();
   }
 }

package/components/steps-form/index.js

@@ -0,0 +1,3 @@
+export { DileStepsForm } from './src/DileStepsForm.js';
+export { DileStepForm } from './src/DileStepForm.js';
+export { DileStepNextPrev } from './src/DileStepNextPrev.js';

package/components/steps-form/src/DileStepForm.js

@@ -0,0 +1,202 @@
+import { LitElement, html, css } from "lit";
+import "../../ajax/ajax.js";
+import { ResponseApiAdapter } from "../../../lib/ResponseApiAdapter.js";
+import "../step-next-prev.js";
+
+export class DileStepForm extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      :host(:not([active])) {
+        display: none;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      /** Label of the step, shown in the steps indicator */
+      label: { type: String },
+      /** The step is the visible one. Managed by dile-steps-form */
+      active: { type: Boolean, reflect: true },
+      /** Endpoint where the step data is saved */
+      endpoint: { type: String },
+      /** HTTP method used to save the step */
+      method: { type: String },
+      /** Zero-based index of the step, set by dile-steps-form */
+      step: { type: Number },
+      /** Labels of all the steps, set by dile-steps-form */
+      steps: { type: Array },
+      /** Shows the alternative exit link in this step */
+      alternativeExit: { type: Boolean },
+      alternativeExitLabel: { type: String },
+      /** Name of the field added to the payload when the alternative exit is used. Empty to not send it */
+      alternativeExitField: { type: String },
+      prevLabel: { type: String },
+      nextLabel: { type: String },
+      endLabel: { type: String },
+      /** Default labels, set by dile-steps-form: { prev, next, end } */
+      defaultLabels: { type: Object },
+      /** The form of this step receives the data returned when another step is saved */
+      refreshOnSave: { type: Boolean },
+      sendDataAsFormData: { type: Boolean },
+      responseAdapter: { type: Object },
+      language: { type: String },
+      loading: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.active = false;
+    this.method = "patch";
+    this.steps = [];
+    this.alternativeExit = false;
+    this.alternativeExitField = "alternativeExit";
+    this.defaultLabels = {};
+    this.refreshOnSave = false;
+    this.sendDataAsFormData = false;
+    this.language = "en";
+    this.loading = false;
+    this.alternativeExitRequested = false;
+    this.defaultResponseAdapter = new ResponseApiAdapter();
+  }
+
+  get elajax() {
+    return this.shadowRoot.getElementById("ajaxsave");
+  }
+
+  get form() {
+    return this.querySelector('[slot="form"]');
+  }
+
+  get adapter() {
+    return this.responseAdapter ?? this.defaultResponseAdapter;
+  }
+
+  updated(changedProperties) {
+    if (
+      changedProperties.has("label") &&
+      changedProperties.get("label") !== undefined
+    ) {
+      this.dispatchEvent(
+        new CustomEvent("dile-step-form-label-change", {
+          bubbles: true,
+          detail: { label: this.label },
+        }),
+      );
+    }
+  }
+
+  render() {
+    return html`
+      <dile-ajax
+        id="ajaxsave"
+        method="${this.method}"
+        url="${this.endpoint}"
+        language="${this.language}"
+        ?sendDataAsFormData=${this.sendDataAsFormData}
+        @ajax-success="${this.doSuccessSave}"
+        @ajax-error="${this.doErrorSave}"
+      ></dile-ajax>
+      <slot name="form"></slot>
+      <dile-step-next-prev
+        .current=${this.step}
+        .steps=${this.steps}
+        ?alternativeExit=${this.alternativeExit}
+        .alternativeExitLabel=${this.alternativeExitLabel}
+        .prevLabel=${this.prevLabel || this.defaultLabels?.prev}
+        .nextLabel=${this.nextLabel || this.defaultLabels?.next}
+        .endLabel=${this.endLabel || this.defaultLabels?.end}
+        language="${this.language}"
+        ?loading=${this.loading}
+        @dile-step-next-click=${this.next}
+        @dile-step-alternative-exit=${this.alternativeNext}
+        @dile-step-prev-click=${this.navigatePrev}
+      ></dile-step-next-prev>
+    `;
+  }
+
+  next() {
+    this.submit(false);
+  }
+
+  alternativeNext() {
+    this.submit(true);
+  }
+
+  submit(alternativeExit) {
+    const form = this.form;
+    if (!form) {
+      throw new Error(
+        `[dile-step-form] No element with slot="form" was found in step ${this.step + 1}. The form element must have the slot="form" attribute.`,
+      );
+    }
+    const data = form.getData();
+    if (alternativeExit && this.alternativeExitField) {
+      data[this.alternativeExitField] = true;
+    }
+    this.alternativeExitRequested = alternativeExit;
+    this.setLoading(true);
+    this.elajax.data = data;
+    this.elajax.generateRequest();
+  }
+
+  setLoading(loading) {
+    this.loading = loading;
+    this.dispatchEvent(
+      new CustomEvent("dile-step-form-loading", {
+        bubbles: true,
+        composed: true,
+        detail: { loading },
+      }),
+    );
+  }
+
+  doSuccessSave(e) {
+    const alternativeExit = this.alternativeExitRequested;
+    this.alternativeExitRequested = false;
+    this.setLoading(false);
+    this.adapter.setResponse(e.detail);
+    const data = this.adapter.getData();
+    this.dispatchEvent(
+      new CustomEvent("dile-step-form-success", {
+        bubbles: true,
+        composed: true,
+        detail: { message: this.adapter.getMessage(), data },
+      }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("dile-step-next", {
+        bubbles: true,
+        detail: { data, alternativeExit },
+      }),
+    );
+  }
+
+  doErrorSave(e) {
+    this.alternativeExitRequested = false;
+    this.setLoading(false);
+    this.adapter.setResponse(e.detail);
+    const errors = this.adapter.getValidationErrors();
+    this.dispatchEvent(
+      new CustomEvent("dile-step-form-error", {
+        bubbles: true,
+        composed: true,
+        detail: { message: e.detail.message, errors, status: e.detail.status },
+      }),
+    );
+    this.form?.showErrors(errors);
+  }
+
+  navigatePrev() {
+    this.dispatchEvent(
+      new CustomEvent("dile-step-prev", {
+        bubbles: true,
+        detail: { index: this.step - 1 },
+      }),
+    );
+  }
+}

package/components/steps-form/src/DileStepNextPrev.js

@@ -0,0 +1,134 @@
+import { LitElement, html, css } from "lit";
+import "@dile/ui/components/button/button.js";
+import { DileI18nMixin } from "../../../lib/DileI18nMixin.js";
+
+export class DileStepNextPrev extends DileI18nMixin(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        container-type: inline-size;
+        margin-top: var(--dile-step-next-prev-margin-top, 1.5rem);
+      }
+      section {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 0.25rem;
+        align-items: center;
+      }
+      @container (min-width: 420px) {
+        section {
+          flex-direction: row;
+          gap: 1rem;
+        }
+      }
+      .alternative-exit {
+        flex-grow: 1;
+        display: flex;
+        justify-content: flex-end;
+      }
+      .alternative-exit button {
+        color: var(--dile-step-alternative-exit-color, var(--dile-link-color));
+        background: none;
+        border: none;
+        padding: 0;
+        font: inherit;
+        cursor: pointer;
+        text-decoration: none;
+      }
+      .alternative-exit button:disabled {
+        cursor: default;
+        opacity: 0.5;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      current: { type: Number },
+      steps: { type: Array },
+      prevLabel: { type: String },
+      nextLabel: { type: String },
+      endLabel: { type: String },
+      alternativeExit: { type: Boolean },
+      alternativeExitLabel: { type: String },
+      loading: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.current = 0;
+    this.steps = [];
+    this.alternativeExit = false;
+    this.loading = false;
+  }
+
+  get isLast() {
+    return this.current >= this.steps.length - 1;
+  }
+
+  get computedPrevLabel() {
+    return this.prevLabel || this.translations?.step_prev_label || "Previous";
+  }
+
+  get computedNextLabel() {
+    return this.nextLabel || this.translations?.step_next_label || "Next";
+  }
+
+  get computedEndLabel() {
+    return this.endLabel || this.translations?.step_end_label || "Finish";
+  }
+
+  render() {
+    return html`
+      <section>
+        <div class="prev">
+          ${this.current > 0
+            ? html`<dile-button ?disabled=${this.loading} @click=${this.prev}
+                >${this.computedPrevLabel}</dile-button
+              >`
+            : ""}
+        </div>
+        ${this.alternativeExit && this.alternativeExitLabel
+          ? html`<div class="alternative-exit">
+              <button
+                type="button"
+                ?disabled=${this.loading}
+                @click=${this.alternativeExitClick}
+              >
+                ${this.alternativeExitLabel}
+              </button>
+            </div>`
+          : ""}
+        <div class="next">
+          <dile-button ?loading=${this.loading} @click=${this.next}>
+            ${this.isLast ? this.computedEndLabel : this.computedNextLabel}
+          </dile-button>
+        </div>
+      </section>
+    `;
+  }
+
+  dispatchNavigationEvent(eventName) {
+    this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail: {
+          current: this.current,
+        },
+      }),
+    );
+  }
+
+  next() {
+    this.dispatchNavigationEvent("dile-step-next-click");
+  }
+  prev() {
+    this.dispatchNavigationEvent("dile-step-prev-click");
+  }
+
+  alternativeExitClick() {
+    this.dispatchNavigationEvent("dile-step-alternative-exit");
+  }
+}

package/components/steps-form/src/DileStepsForm.js

@@ -0,0 +1,347 @@
+import { LitElement, html, css } from "lit";
+import "@dile/ui/components/steps/steps.js";
+import "../../ajax/ajax.js";
+import "@dile/ui/components/inline-feedback/inline-feedback.js";
+import { ResponseApiAdapter } from "../../../lib/ResponseApiAdapter.js";
+import { DileI18nMixin } from "../../../lib/DileI18nMixin.js";
+
+export class DileStepsForm extends DileI18nMixin(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      dile-steps {
+        margin-bottom: 1rem;
+      }
+      .header {
+        margin-bottom: 1.5rem;
+        font-size: var(--dile-steps-form-header-font-size, 1rem);
+        color: var(--dile-steps-form-header-color, var(--dile-on-background-color, #303030));
+      }
+      .title {
+        font-weight: var(--dile-steps-form-title-font-weight, 600);
+        color: var(--dile-on-background-color, #303030);
+      }
+      .separator {
+        margin: 0 0.4rem;
+        opacity: 0.5;
+      }
+      .step-label {
+        opacity: 0.75;
+        color: var(--dile-on-background-color, #303030);
+      }
+      .header:focus-visible {
+        outline: 2px solid var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb));
+        outline-offset: 2px;
+      }
+      dile-inline-feedback {
+        margin-top: var(--dile-steps-form-feedback-margin-top, 1rem);
+      }
+      :host([hidefeedback]) dile-inline-feedback {
+        display: none;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      /** Labels of the steps. If empty, the label attribute of each dile-step-form is used */
+      steps: { type: Array },
+      title: { type: String },
+      /** Endpoint to load the data of every step form */
+      endpoint: { type: String },
+      current: { type: Number },
+      reached: { type: Number },
+      freeNavigation: { type: Boolean },
+      vertical: { type: Boolean },
+      /** Default labels for the navigation buttons of every step */
+      prevLabel: { type: String },
+      nextLabel: { type: String },
+      endLabel: { type: String },
+      /** Response adapter for the initial load and, if set, for every step */
+      responseAdapter: { type: Object },
+      /** Hides the inline feedback messages */
+      hideFeedback: { type: Boolean, reflect: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this.steps = [];
+    this.current = 0;
+    this.reached = 0;
+    this.freeNavigation = false;
+    this.vertical = false;
+    this.hideFeedback = false;
+    this.defaultResponseAdapter = new ResponseApiAdapter();
+  }
+
+  get adapter() {
+    return this.responseAdapter ?? this.defaultResponseAdapter;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("dile-step-next", this.onStepNext);
+    this.addEventListener("dile-step-prev", this.onStepPrev);
+    this.addEventListener("dile-step-form-loading", this.onStepLoading);
+    this.addEventListener("dile-step-form-success", this.onStepSuccess);
+    this.addEventListener("dile-step-form-error", this.onStepError);
+    this.addEventListener("dile-step-form-label-change", this.syncStepForms);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dile-step-next", this.onStepNext);
+    this.removeEventListener("dile-step-prev", this.onStepPrev);
+    this.removeEventListener("dile-step-form-loading", this.onStepLoading);
+    this.removeEventListener("dile-step-form-success", this.onStepSuccess);
+    this.removeEventListener("dile-step-form-error", this.onStepError);
+    this.removeEventListener("dile-step-form-label-change", this.syncStepForms);
+  }
+
+  updated(changedProperties) {
+    if (
+      ["steps", "current", "prevLabel", "nextLabel", "endLabel", "responseAdapter", "language"].some(
+        (property) => changedProperties.has(property),
+      )
+    ) {
+      this.syncStepForms();
+    }
+    if (changedProperties.has("endpoint") && this.endpoint) {
+      this.fetchData();
+    }
+    if (
+      changedProperties.has("current") &&
+      changedProperties.get("current") !== undefined
+    ) {
+      this.focusHeader();
+    }
+  }
+
+  render() {
+    return html`
+      ${this.endpoint
+        ? html`
+            <dile-ajax
+              id="ajaxget"
+              method="get"
+              url="${this.endpoint}"
+              language="${this.language}"
+              @ajax-success="${this.onFetchSuccess}"
+              @ajax-error="${this.onFetchError}"
+            ></dile-ajax>
+          `
+        : ""}
+      ${this.headerTemplate}
+      <dile-steps
+        .steps=${this.stepLabels}
+        current="${this.current}"
+        reached="${this.reached}"
+        ?freeNavigation=${this.freeNavigation}
+        ?vertical=${this.vertical}
+        @dile-steps-select=${this.onStepSelect}
+      ></dile-steps>
+      <slot @slotchange=${this.syncStepForms}></slot>
+      <dile-inline-feedback id="feedback"></dile-inline-feedback>
+    `;
+  }
+
+  get feedback() {
+    return this.shadowRoot.getElementById("feedback");
+  }
+
+  get stepForms() {
+    return [...this.querySelectorAll(":scope > dile-step-form")];
+  }
+
+  get stepLabels() {
+    if (this.steps.length) {
+      return this.steps;
+    }
+    return this.stepForms.map((stepForm) => stepForm.label ?? "");
+  }
+
+  get formElements() {
+    return this.stepForms
+      .map((stepForm) => stepForm.form)
+      .filter((form) => form);
+  }
+
+  get currentStepLabel() {
+    return this.stepLabels[this.current] ?? "";
+  }
+
+  get headerTemplate() {
+    if (!this.title && !this.currentStepLabel) return "";
+    return html`
+      <div class="header" tabindex="-1" role="status">
+        ${this.title
+          ? html`<span class="title">${this.title}</span
+              ><span class="separator">›</span
+              ><span class="step-label">${this.currentStepLabel}</span>`
+          : html`<span class="step-label">${this.currentStepLabel}</span>`}
+      </div>
+    `;
+  }
+
+  focusHeader() {
+    this.shadowRoot.querySelector(".header")?.focus();
+  }
+
+  syncStepForms() {
+    const forms = this.stepForms;
+    const labels = this.stepLabels;
+    forms.forEach((form, index) => {
+      form.step = index;
+      form.steps = labels;
+      form.active = index === this.current;
+      form.language = this.language;
+      form.defaultLabels = {
+        prev: this.prevLabel,
+        next: this.nextLabel,
+        end: this.endLabel,
+      };
+      if (this.responseAdapter) {
+        form.responseAdapter = this.responseAdapter;
+      }
+    });
+    if (this.steps.length && forms.length && forms.length !== this.steps.length) {
+      console.warn(
+        `[dile-steps-form] The number of <dile-step-form> elements (${forms.length}) does not match steps.length (${this.steps.length}).`,
+      );
+    }
+    this.requestUpdate();
+  }
+
+  dispatchLoading(loading) {
+    this.dispatchEvent(
+      new CustomEvent("dile-steps-form-loading", {
+        bubbles: true,
+        composed: true,
+        detail: { loading },
+      }),
+    );
+  }
+
+  fetchData() {
+    this.dispatchLoading(true);
+    this.shadowRoot.getElementById("ajaxget")?.generateRequest();
+  }
+
+  async onFetchSuccess(e) {
+    this.adapter.setResponse(e.detail);
+    const data = this.adapter.getData();
+    await Promise.all(this.formElements.map((form) => form.updateComplete));
+    this.setData(data);
+    this.dispatchLoading(false);
+    this.dispatchEvent(
+      new CustomEvent("dile-steps-form-loaded", {
+        bubbles: true,
+        composed: true,
+        detail: { data },
+      }),
+    );
+  }
+
+  onFetchError(e) {
+    this.dispatchLoading(false);
+    this.dispatchEvent(
+      new CustomEvent("dile-steps-form-error", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          message: e.detail.message,
+          data: e.detail.data,
+          errors: e.detail.errors,
+          status: e.detail.status,
+        },
+      }),
+    );
+  }
+
+  /** Loads again the data of every step form from the endpoint */
+  reload() {
+    if (this.endpoint) {
+      this.fetchData();
+    }
+  }
+
+  /** Sets the same data in the form of every step */
+  setData(data) {
+    this.formElements.forEach((form) => form.setData(data));
+  }
+
+  onStepLoading(e) {
+    if (e.detail.loading) {
+      this.feedback?.clear();
+    }
+  }
+
+  onStepSuccess(e) {
+    this.stepForms
+      .filter((stepForm) => stepForm.refreshOnSave && !e.composedPath().includes(stepForm))
+      .forEach((stepForm) => stepForm.form?.setData(e.detail.data));
+    this.feedback?.positiveFeedbackWithDelay(
+      e.detail.message || this.translations?.step_success || "Data saved",
+      5000,
+    );
+  }
+
+  onStepError(e) {
+    this.feedback?.negativeFeedbackWithDelay(
+      e.detail.message || this.translations?.step_error || "Data could not be saved",
+      5000,
+    );
+  }
+
+  onStepNext(e) {
+    e.stopPropagation();
+    const next = this.current + 1;
+    if (next < this.stepForms.length && !e.detail.alternativeExit) {
+      this.navigateTo(next);
+    } else {
+      this.dispatchEvent(
+        new CustomEvent("dile-steps-form-complete", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            data: e.detail.data,
+            alternativeExit: Boolean(e.detail.alternativeExit),
+          },
+        }),
+      );
+    }
+  }
+
+  onStepPrev(e) {
+    e.stopPropagation();
+    this.feedback?.clear();
+    this.navigateTo(this.current - 1);
+  }
+
+  onStepSelect(e) {
+    e.stopPropagation();
+    this.feedback?.clear();
+    this.navigateTo(e.detail.index);
+  }
+
+  /** Shows the step at the given zero-based index */
+  navigateTo(index) {
+    if (index < 0 || index >= this.stepForms.length) return;
+    this.current = index;
+    if (index > this.reached) this.reached = index;
+    this.stepForms.forEach((stepForm, i) => {
+      stepForm.active = i === index;
+    });
+  }
+
+  next() {
+    this.navigateTo(this.current + 1);
+  }
+
+  prev() {
+    this.navigateTo(this.current - 1);
+  }
+}

package/components/steps-form/step-form.js

@@ -0,0 +1,5 @@
+import { DileStepForm } from './src/DileStepForm.js';
+
+if (!customElements.get('dile-step-form')) {
+  customElements.define('dile-step-form', DileStepForm);
+}

package/components/steps-form/step-next-prev.js

@@ -0,0 +1,5 @@
+import { DileStepNextPrev } from './src/DileStepNextPrev.js';
+
+if (!customElements.get('dile-step-next-prev')) {
+  customElements.define('dile-step-next-prev', DileStepNextPrev);
+}

package/components/steps-form/steps-form.js

@@ -0,0 +1,5 @@
+import { DileStepsForm } from './src/DileStepsForm.js';
+
+if (!customElements.get('dile-steps-form')) {
+  customElements.define('dile-steps-form', DileStepsForm);
+}

package/components/steps-form/steps-form.spec.js

@@ -0,0 +1,230 @@
+import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
+import './steps-form.js';
+import './step-form.js';
+
+class TestStepForm extends HTMLElement {
+  constructor() {
+    super();
+    this.value = '';
+    this.receivedData = [];
+    this.errors = null;
+  }
+  getData() {
+    return { name: this.value };
+  }
+  setData(data) {
+    this.receivedData.push(data);
+  }
+  showErrors(errors) {
+    this.errors = errors;
+  }
+}
+if (!customElements.get('test-step-form')) {
+  customElements.define('test-step-form', TestStepForm);
+}
+
+const loadedResource = { id: 1, name: 'Loaded' };
+
+function okResponse(data, message = 'Saved') {
+  return Promise.resolve({ status: 200, data: { message, data } });
+}
+
+function validationError(errors) {
+  return Promise.reject({
+    response: { status: 422, data: { message: 'Invalid data', errors } },
+  });
+}
+
+const flush = () => new Promise(resolve => setTimeout(resolve, 0));
+
+describe('dile-steps-form', () => {
+  let get;
+  let patch;
+
+  beforeEach(() => {
+    get = vi.fn(() => okResponse(loadedResource));
+    patch = vi.fn((url, data) => okResponse({ ...loadedResource, ...data, url }));
+    window.axiosInstance = { get, patch };
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.axiosInstance;
+  });
+
+  async function renderStepsForm(attributes = '', thirdStepAttributes = '') {
+    document.body.innerHTML = `
+      <dile-steps-form endpoint="/api/resource" ${attributes}>
+        <dile-step-form label="First" endpoint="/api/resource/first">
+          <test-step-form slot="form"></test-step-form>
+        </dile-step-form>
+        <dile-step-form label="Second" endpoint="/api/resource/second" alternativeExit alternativeExitLabel="Save as draft">
+          <test-step-form slot="form"></test-step-form>
+        </dile-step-form>
+        <dile-step-form label="Third" endpoint="/api/resource/third" ${thirdStepAttributes}>
+          <test-step-form slot="form"></test-step-form>
+        </dile-step-form>
+      </dile-steps-form>
+    `;
+    const el = document.body.querySelector('dile-steps-form');
+    await el.updateComplete;
+    await flush();
+    await el.updateComplete;
+    return el;
+  }
+
+  function stepForms(el) {
+    return [...el.querySelectorAll('dile-step-form')];
+  }
+
+  function forms(el) {
+    return [...el.querySelectorAll('test-step-form')];
+  }
+
+  it('takes the step labels from the label attribute of each step', async () => {
+    const el = await renderStepsForm();
+
+    expect(el.shadowRoot.querySelector('dile-steps').steps).toEqual(['First', 'Second', 'Third']);
+    expect(el.shadowRoot.querySelector('.step-label').textContent).toBe('First');
+  });
+
+  it('only shows the current step', async () => {
+    const el = await renderStepsForm();
+
+    expect(stepForms(el).map(step => step.active)).toEqual([true, false, false]);
+    expect(stepForms(el).map(step => getComputedStyle(step).display)).toEqual(['block', 'none', 'none']);
+  });
+
+  it('loads the endpoint and sets the data in every form', async () => {
+    const el = await renderStepsForm();
+    let loadedDetail;
+    el.addEventListener('dile-steps-form-loaded', e => { loadedDetail = e.detail; });
+
+    el.reload();
+    await flush();
+
+    expect(get).toHaveBeenCalledWith('/api/resource', expect.anything());
+    expect(loadedDetail).toEqual({ data: loadedResource });
+    forms(el).forEach(form => expect(form.receivedData.at(-1)).toEqual(loadedResource));
+  });
+
+  it('saves the step with PATCH and moves to the next step', async () => {
+    const el = await renderStepsForm();
+    forms(el)[0].value = 'Acme';
+    let successDetail;
+    el.addEventListener('dile-step-form-success', e => { successDetail = e.detail; });
+
+    stepForms(el)[0].next();
+    await flush();
+    await el.updateComplete;
+
+    expect(patch).toHaveBeenCalledWith('/api/resource/first', { name: 'Acme' }, undefined);
+    expect(successDetail.message).toBe('Saved');
+    expect(el.current).toBe(1);
+    expect(stepForms(el).map(step => step.active)).toEqual([false, true, false]);
+  });
+
+  it('dispatches dile-steps-form-complete after saving the last step', async () => {
+    const el = await renderStepsForm();
+    let completeDetail;
+    el.addEventListener('dile-steps-form-complete', e => { completeDetail = e.detail; });
+
+    el.navigateTo(2);
+    stepForms(el)[2].next();
+    await flush();
+
+    expect(completeDetail.alternativeExit).toBe(false);
+    expect(completeDetail.data.url).toBe('/api/resource/third');
+  });
+
+  it('completes with the alternative exit and sends the alternativeExit field', async () => {
+    const el = await renderStepsForm();
+    let completeDetail;
+    el.addEventListener('dile-steps-form-complete', e => { completeDetail = e.detail; });
+
+    el.navigateTo(1);
+    stepForms(el)[1].alternativeNext();
+    await flush();
+
+    expect(patch).toHaveBeenCalledWith('/api/resource/second', { name: '', alternativeExit: true }, undefined);
+    expect(completeDetail.alternativeExit).toBe(true);
+  });
+
+  it('does not keep the alternative exit after a failed save', async () => {
+    const el = await renderStepsForm();
+    let completed = false;
+    el.addEventListener('dile-steps-form-complete', () => { completed = true; });
+    el.navigateTo(1);
+
+    patch.mockImplementationOnce(() => validationError({ name: ['Required'] }));
+    stepForms(el)[1].alternativeNext();
+    await flush();
+    expect(forms(el)[1].errors).toEqual({ name: ['Required'] });
+
+    stepForms(el)[1].next();
+    await flush();
+
+    expect(completed).toBe(false);
+    expect(el.current).toBe(2);
+  });
+
+  it('dispatches dile-step-form-error with the validation errors and status', async () => {
+    const el = await renderStepsForm();
+    let errorDetail;
+    el.addEventListener('dile-step-form-error', e => { errorDetail = e.detail; });
+    patch.mockImplementationOnce(() => validationError({ name: ['Required'] }));
+
+    stepForms(el)[0].next();
+    await flush();
+
+    expect(errorDetail).toEqual({ message: 'Invalid data', errors: { name: ['Required'] }, status: 422 });
+    expect(el.current).toBe(0);
+  });
+
+  it('sends the saved data to the steps with refreshOnSave', async () => {
+    const el = await renderStepsForm('', 'refreshOnSave');
+    forms(el).forEach(form => { form.receivedData = []; });
+
+    stepForms(el)[0].next();
+    await flush();
+
+    expect(forms(el)[2].receivedData).toHaveLength(1);
+    expect(forms(el)[2].receivedData[0].url).toBe('/api/resource/first');
+    expect(forms(el)[1].receivedData).toHaveLength(0);
+  });
+
+  it('dispatches dile-steps-form-error with the status when the load fails', async () => {
+    get.mockImplementation(() => Promise.reject({
+      response: { status: 404, data: { message: 'Not found' } },
+    }));
+    let errorDetail;
+    document.body.addEventListener('dile-steps-form-error', e => { errorDetail = e.detail; });
+
+    await renderStepsForm();
+    await flush();
+
+    expect(errorDetail.status).toBe(404);
+    expect(errorDetail.message).toBe('Not found');
+  });
+
+  it('translates the navigation labels with the language property', async () => {
+    const el = await renderStepsForm('language="es"');
+    const nextPrev = stepForms(el)[0].shadowRoot.querySelector('dile-step-next-prev');
+
+    await vi.waitFor(() => {
+      expect(nextPrev.shadowRoot.querySelector('.next dile-button').textContent.trim()).toBe('Siguiente');
+    });
+  });
+
+  it('uses the labels defined in the step before the translations', async () => {
+    const el = await renderStepsForm('', 'endLabel="Create invoice"');
+    el.navigateTo(2);
+    await el.updateComplete;
+    await stepForms(el)[2].updateComplete;
+    const nextPrev = stepForms(el)[2].shadowRoot.querySelector('dile-step-next-prev');
+    await nextPrev.updateComplete;
+
+    expect(nextPrev.shadowRoot.querySelector('.next dile-button').textContent.trim()).toBe('Create invoice');
+    expect(nextPrev.shadowRoot.querySelector('.prev dile-button').textContent.trim()).toBe('Previous');
+  });
+});

package/lib/i18n/en.js

@@ -77,4 +77,9 @@ export const translations = {
   retry_label: "Retry",
   list_view_label: "List view",
   grid_view_label: "Grid view",
-};
+  step_prev_label: "Previous",
+  step_next_label: "Next",
+  step_end_label: "Finish",
+  step_success: "Data saved",
+  step_error: "Data could not be saved",
+};

package/lib/i18n/es.js

@@ -77,4 +77,9 @@ export const translations = {
   retry_label: "Reintentar",
   list_view_label: "Lista",
   grid_view_label: "Rejilla",
-};
+  step_prev_label: "Anterior",
+  step_next_label: "Siguiente",
+  step_end_label: "Finalizar",
+  step_success: "Datos guardados",
+  step_error: "No se han podido guardar los datos",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.9.4",
+  "version": "2.10.0",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -25,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.17.1",
+    "@dile/ui": "^3.18.0",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb8d274006be88ab2b44ed574f5c2829f27a2ec3"
+  "gitHead": "1b065736666cc26f8afc1106ec7ffc98feaec60e"
 }