kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/popup/popup.ts

@@ -0,0 +1,113 @@
+import type Swal from 'sweetalert2';
+import type {
+  SweetAlertCustomClass,
+  SweetAlertOptions,
+  SweetAlertResult
+} from 'sweetalert2';
+
+import { loadPeer } from '../../src/peer-loader';
+
+export type PopupOptions = SweetAlertOptions;
+export type PopupResult<T = unknown> = SweetAlertResult<T>;
+
+function withClass(
+  required: string,
+  custom?: string | readonly string[]
+): string {
+  return [
+    required,
+    ...(typeof custom === 'string'
+      ? custom.split(/\s+/)
+      : custom ?? [])
+  ]
+    .filter(
+      (value, index, values) =>
+        value && values.indexOf(value) === index
+    )
+    .join(' ');
+}
+
+/** Materialize-themed SweetAlert2 dialogs. No element initialization is needed. */
+export class Popup {
+  /** Fresh defaults so per-dialog customization cannot affect later popups. */
+  static get defaults(): PopupOptions {
+    return {
+      buttonsStyling: false,
+      heightAuto: false,
+      customClass: {
+        container: 'popup-container',
+        popup: 'popup',
+        confirmButton: 'btn filled',
+        cancelButton: 'btn outlined',
+        denyButton: 'btn tonal'
+      }
+    };
+  }
+
+  private static _load(): Promise<typeof Swal> {
+    // Use the JS-only build: the consumer controls stylesheet order.
+    return loadPeer<typeof Swal>(
+      {
+        specifier: 'sweetalert2',
+        globalName: 'Swal',
+        feature: 'Popup',
+        cdnHint:
+          '<link rel="stylesheet" href="path/to/sweetalert2.min.css">\n' +
+          '    <script src="path/to/sweetalert2.min.js"></script>\n' +
+          '    (copy from node_modules/sweetalert2/dist/; load the CSS before materialize.css)'
+      },
+      () => import('sweetalert2/dist/sweetalert2.js')
+    );
+  }
+
+  /** Open a dialog and resolve with SweetAlert2's confirmation/dismissal result. */
+  static async fire<T = unknown>(
+    options: PopupOptions = {}
+  ): Promise<PopupResult<Awaited<T>>> {
+    const swal = await Popup._load();
+    const defaults = Popup.defaults;
+
+    const customClass: SweetAlertCustomClass = {
+      ...defaults.customClass,
+      ...options.customClass,
+
+      // Keep the scoped theme even when consumers add their own classes.
+      container: withClass(
+        'popup-container',
+        options.customClass?.container
+      ),
+
+      popup: withClass(
+        'popup',
+        options.customClass?.popup
+      )
+    };
+
+    /*
+     * SweetAlertOptions is a discriminated union because `input: "file"`
+     * uses a different inputValidator signature. Object spreading causes
+     * TypeScript to lose that correlation, even though the resulting
+     * object is valid.
+     */
+    const mergedOptions = {
+      ...defaults,
+      ...options,
+      customClass
+    } as SweetAlertOptions;
+
+    const result = await swal.fire<T>(mergedOptions);
+
+    /*
+     * SweetAlert2 declares its own internal Awaited<T>, while modern
+     * TypeScript provides the global Awaited<T>. They are semantically
+     * equivalent here but TypeScript can report them as unrelated.
+     */
+    return result as PopupResult<Awaited<T>>;
+  }
+
+  /** Close the current SweetAlert2 dialog, resolving its pending result. */
+  static async close(): Promise<void> {
+    const swal = await Popup._load();
+    swal.close();
+  }
+}

package/components/popup/popupSpec.js

@@ -0,0 +1,140 @@
+describe('Popup', function () {
+  let script;
+  let style;
+  let trigger;
+
+  beforeAll(async function () {
+    // Exercise the same optional global fallback as plain-script consumers.
+    style = document.createElement('link');
+    style.rel = 'stylesheet';
+    style.href = '/__spec__/node_modules/sweetalert2/dist/sweetalert2.min.css';
+    script = document.createElement('script');
+    script.src = '/__spec__/node_modules/sweetalert2/dist/sweetalert2.min.js';
+    await Promise.all([style, script].map(element => new Promise((resolve, reject) => {
+      element.onload = resolve;
+      element.onerror = () => reject(new Error('Could not load SweetAlert2 test dependency'));
+      document.head.appendChild(element);
+    })));
+  });
+
+  beforeEach(function () {
+    trigger = document.createElement('button');
+    trigger.textContent = 'Open popup';
+    document.body.appendChild(trigger);
+    trigger.focus();
+  });
+
+  afterEach(async function () {
+    await M.Popup.close();
+    trigger.remove();
+  });
+
+  afterAll(function () {
+    script.remove();
+    style.remove();
+  });
+
+  async function open(options = {}) {
+    let result;
+    const el = await new Promise((resolve, reject) => {
+      result = M.Popup.fire({
+        showClass: { popup: '' },
+        hideClass: { popup: '' },
+        ...options,
+        didOpen: resolve
+      });
+      result.catch(reject);
+    });
+    return { el, result };
+  }
+
+  it('opens a themed dialog and returns confirmation without interpreting plain text as HTML', async function () {
+    const { el, result } = await open({ titleText: '<strong>Title</strong>', text: 'Details' });
+    expect(el.classList.contains('popup')).toBeTrue();
+    expect(el.parentElement.classList.contains('popup-container')).toBeTrue();
+    expect(el.querySelector('.swal2-title').textContent).toBe('<strong>Title</strong>');
+    expect(el.querySelector('.swal2-title strong')).toBeNull();
+    const confirm = el.querySelector('.swal2-confirm');
+    expect(confirm.classList.contains('btn')).toBeTrue();
+    expect(confirm.classList.contains('filled')).toBeTrue();
+    expect(confirm.classList.contains('swal2-styled')).toBeFalse();
+    confirm.click();
+    expect((await result).isConfirmed).toBeTrue();
+  });
+
+  it('returns cancellation and supports focusing the cancel action', async function () {
+    const { el, result } = await open({ showCancelButton: true, focusCancel: true });
+    const cancel = el.querySelector('.swal2-cancel');
+    expect(document.activeElement).toBe(cancel);
+    cancel.click();
+    const response = await result;
+    expect(response.isConfirmed).toBeFalse();
+    expect(response.dismiss).toBe('cancel');
+  });
+
+  it('validates input and resolves with the entered value', async function () {
+    const { el, result } = await open({
+      input: 'text',
+      inputLabel: 'Workspace name',
+      inputValidator: value => value.trim() ? undefined : 'Enter a name.'
+    });
+    const input = el.querySelector('.swal2-input');
+    el.querySelector('.swal2-confirm').click();
+    await new Promise(resolve => setTimeout(resolve, 20));
+    expect(el.querySelector('.swal2-validation-message').textContent).toBe('Enter a name.');
+    expect(el.isConnected).toBeTrue();
+    const bounds = input.getBoundingClientRect();
+    const popupBounds = el.getBoundingClientRect();
+    expect(bounds.left).toBeGreaterThan(popupBounds.left);
+    expect(bounds.right).toBeLessThan(popupBounds.right);
+    input.value = 'Studio';
+    el.querySelector('.swal2-confirm').click();
+    expect((await result).value).toBe('Studio');
+  });
+
+  it('preserves theme classes and callback options without mutating caller options', async function () {
+    const options = { customClass: { popup: ['custom-popup'], confirmButton: 'btn tonal' }, willOpen: jasmine.createSpy('willOpen') };
+    const { el, result } = await open(options);
+    expect(el.classList.contains('popup')).toBeTrue();
+    expect(el.classList.contains('custom-popup')).toBeTrue();
+    expect(options.willOpen).toHaveBeenCalled();
+    expect(options.customClass.popup).toEqual(['custom-popup']);
+    expect(el.querySelector('.swal2-confirm').classList.contains('filled')).toBeFalse();
+    el.querySelector('.swal2-confirm').click();
+    await result;
+    expect(M.Popup.defaults.customClass.confirmButton).toBe('btn filled');
+  });
+
+  it('shows a loader while preConfirm is pending and resolves its value', async function () {
+    let complete;
+    const { el, result } = await open({
+      showLoaderOnConfirm: true,
+      preConfirm: () => new Promise(resolve => { complete = resolve; })
+    });
+    el.querySelector('.swal2-confirm').click();
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(getComputedStyle(el.querySelector('.swal2-loader')).display).not.toBe('none');
+    complete('Preview ready');
+    expect((await result).value).toBe('Preview ready');
+  });
+
+  it('closes a dialog programmatically and resolves its pending result', async function () {
+    const { el, result } = await open();
+    await M.Popup.close();
+    expect((await result).isDismissed).toBeTrue();
+    expect(el.isConnected).toBeFalse();
+  });
+
+  it('renders native select, radio, and checkbox inputs visibly', async function () {
+    for (const type of ['select', 'radio', 'checkbox']) {
+      const { el, result } = await open({ input: type, inputOptions: { one: 'One', two: 'Two' } });
+      const input = el.querySelector(type === 'select' ? 'select' : `input[type="${type}"]`);
+      const computed = getComputedStyle(input);
+      expect(computed.display).not.toBe('none');
+      expect(computed.opacity).toBe('1');
+      expect(computed.pointerEvents).not.toBe('none');
+      await M.Popup.close();
+      await result;
+    }
+  });
+});