@kubex/zinc 1.1.143 → 1.1.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.143",
+  "version": "1.1.145",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/confirm/confirm.component.ts

@@ -9,6 +9,17 @@ import ZnDialog from "../dialog";
 
 import styles from './confirm.scss';
 
+interface PageletAlert {
+  action?: string;
+  style?: string;
+  title?: string;
+}
+
+interface PageletResponse {
+  status?: number;
+  actions?: PageletAlert[];
+}
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/confirm-modal
@@ -83,6 +94,12 @@ export default class ZnConfirm extends ZincElement {
   /** Internal loading state used when showLoading is enabled */
   @state() private loading: boolean = false;
 
+  @state() private failed: boolean = false;
+
+  @state() private failure: string = '';
+
+  private submitted: HTMLFormElement | null = null;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.open) {
@@ -116,15 +133,66 @@ export default class ZnConfirm extends ZincElement {
   show = (event: Event | undefined = undefined) => {
     const trigger = event?.target as HTMLButtonElement
     if (trigger?.disabled) return;
-    this.loading = false;
+    this.reset();
     this.dialog.show();
   }
 
   hide() {
-    this.loading = false;
+    this.reset();
     this.dialog.hide();
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopWatching();
+  }
+
+  private reset() {
+    this.stopWatching();
+    this.loading = false;
+    this.failed = false;
+    this.failure = '';
+    if (this.dialog?.closer) {
+      this.dialog.closer.disabled = false;
+    }
+  }
+
+  private stopWatching() {
+    this.submitted?.removeEventListener('complete', this.settle);
+    this.submitted?.removeEventListener('error', this.settle);
+    this.submitted = null;
+  }
+
+  /**
+   * The console dispatches the pagelet lifecycle on the form it submitted. Without it the loading
+   * state only ends when a response happens to reload the page, so every failure hangs the dialog.
+   */
+  private settle = (event: Event) => {
+    const response = (event as CustomEvent<{ response?: PageletResponse }>).detail?.response;
+    this.stopWatching();
+    if (event.type === 'error' || this.responseFailed(response)) {
+      this.loading = false;
+      this.failed = true;
+      this.failure = this.alertTitle(response);
+      if (this.dialog?.closer) {
+        this.dialog.closer.disabled = false;
+      }
+      return;
+    }
+    this.hide();
+  }
+
+  private responseFailed(response?: PageletResponse): boolean {
+    if (!response) return true;
+    if ((response.status ?? 0) >= 400) return true;
+    return (response.actions ?? []).some(action => action.action === 'alert' && action.style === 'error');
+  }
+
+  private alertTitle(response?: PageletResponse): string {
+    const alert = (response?.actions ?? []).find(action => action.action === 'alert' && action.style === 'error');
+    return alert?.title ?? '';
+  }
+
 
   render() {
     const src = {
@@ -153,10 +221,11 @@ export default class ZnConfirm extends ZincElement {
           : ''}
 
         <div class="confirm-dialog__content">
-          ${!this.loading ? html`
+          ${this.loading ? html`Loading...` : this.failed ? html`
+            <strong>Failed</strong>
+            ${this.failure ? html`<p>${this.failure}</p>` : ''}` : html`
             ${this.content ? html`${this.content}` : ''}
-            <slot></slot>` : html`
-            Loading...`}
+            <slot></slot>`}
         </div>
 
         <zn-button outline color="${this.type}" slot="footer" dialog-closer disabled=${this.loading || nothing}>
@@ -196,12 +265,18 @@ export default class ZnConfirm extends ZincElement {
       document.dispatchEvent(new CustomEvent('zn-register-element', {
         detail: {element: form}
       }))
+      if (this.showLoading) {
+        this.failed = false;
+        this.failure = '';
+        this.loading = true;
+        this.dialog.closer.disabled = true;
+        this.submitted = form;
+        form.addEventListener('complete', this.settle);
+        form.addEventListener('error', this.settle);
+      }
       form.requestSubmit();
       if (!this.showLoading) {
         this.hide();
-      } else {
-        this.loading = true;
-        this.dialog.closer.disabled = true;
       }
     }
   }

package/src/components/confirm/confirm.test.ts

@@ -1,6 +1,38 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
 
+const click = (el: Element) => el.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+
+const settle = (form: HTMLFormElement, type: string, detail: unknown) =>
+  form.dispatchEvent(new CustomEvent(type, {detail}));
+
+async function submittedConfirm() {
+  const el = await fixture<HTMLElement>(html`
+    <div>
+      <zn-confirm caption="Deploy" show-loading>
+        <form action="/deploy" method="post"></form>
+      </zn-confirm>
+    </div>
+  `);
+  const confirm = el.querySelector('zn-confirm')!;
+  await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+  const form = confirm.querySelector('form')!;
+  form.addEventListener('submit', e => e.preventDefault());
+
+  (confirm as never as {show: () => void}).show();
+  await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+  const dialog = confirm.shadowRoot!.querySelector('zn-dialog')!;
+  const buttons = confirm.shadowRoot!.querySelectorAll('zn-button[slot="footer"]');
+  click(buttons[1]);
+  await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+  return {confirm, form, dialog, cancel: buttons[0] as HTMLElement & {disabled: boolean}};
+}
+
+const closer = (dialog: Element) => dialog.shadowRoot!.querySelector('.dialog__close')!;
+
 describe('<zn-confirm-modal>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-confirm-modal></zn-confirm-modal> `);
@@ -22,4 +54,56 @@ describe('<zn-confirm-modal>', () => {
     // An unescaped `#id` selector throws a SyntaxError here, leaving the component unrendered.
     expect(confirm.shadowRoot!.querySelector('zn-dialog')).to.exist;
   });
+
+  it('shows loading until the submitted request settles', async () => {
+    const {confirm} = await submittedConfirm();
+
+    expect(confirm.shadowRoot!.textContent).to.contain('Loading');
+  });
+
+  it('reports failure when the response carries a danger alert', async () => {
+    const {confirm, form, dialog, cancel} = await submittedConfirm();
+
+    settle(form, 'complete', {
+      response: {status: 200, actions: [{action: 'alert', style: 'error', title: 'Deployment stopped'}]}
+    });
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect(confirm.shadowRoot!.textContent).to.contain('Failed');
+    expect(confirm.shadowRoot!.textContent).to.contain('Deployment stopped');
+    expect(confirm.shadowRoot!.textContent).to.not.contain('Loading');
+    expect(cancel.disabled).to.be.false;
+    expect(closer(dialog).disabled).to.be.false;
+  });
+
+  it('reports failure when the request errors', async () => {
+    const {confirm, form, dialog} = await submittedConfirm();
+
+    settle(form, 'error', {});
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect(confirm.shadowRoot!.textContent).to.contain('Failed');
+    expect(closer(dialog).disabled).to.be.false;
+  });
+
+  it('closes when the submitted request succeeds', async () => {
+    const {confirm, form, dialog} = await submittedConfirm();
+
+    settle(form, 'complete', {response: {status: 200, actions: [{action: 'alert', style: 'success', title: 'Deployed'}]}});
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect((dialog as HTMLElement & {open: boolean}).open).to.be.false;
+    expect(closer(dialog).disabled).to.be.false;
+  });
+
+  it('clears a previous failure when reopened', async () => {
+    const {confirm, form} = await submittedConfirm();
+    settle(form, 'error', {});
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    (confirm as never as {show: () => void}).show();
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect(confirm.shadowRoot!.textContent).to.not.contain('Failed');
+  });
 });

package/src/selection-card.scss

@@ -102,7 +102,9 @@ $control-positions: (
     flex-direction: column;
     flex-wrap: nowrap;
     align-items: stretch;
-    justify-content: center;
+    /* Grid rows stretch cards to one height; centring would float a short card's
+       image off the row's shared line, so pin to the image's named edge. */
+    justify-content: flex-start;
 
     .selection-card__image-container {
       align-self: center;
@@ -124,6 +126,10 @@ $control-positions: (
     }
   }
 
+  &.selection-card--image-bottom {
+    justify-content: flex-end;
+  }
+
   /* Positioned controls */
   @each $name, $position in $control-positions {
     $block: map.get($position, block);