@fuse_ui/modal 0.0.1

package/fesm2022/fuse_ui-modal.mjs

@@ -0,0 +1,202 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, ElementRef, viewChild, ViewContainerRef, ChangeDetectionStrategy, Component, signal, Injector, Injectable } from '@angular/core';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { filter, take } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, Subject } from 'rxjs';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+
+/** The dynamic component type to render inside the modal shell. */
+const FUSE_MODAL_COMPONENT = new InjectionToken('FUSE_MODAL_COMPONENT');
+/** Resolved configuration for the open modal. */
+const FUSE_MODAL_CONFIG = new InjectionToken('FUSE_MODAL_CONFIG');
+/** Reference to the open modal; injectable inside the hosted component. */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FUSE_MODAL_REF = new InjectionToken('FUSE_MODAL_REF');
+/**
+ * Arbitrary data passed via FuseModalConfig.data.
+ * Inject this token in the hosted component to receive it.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FUSE_MODAL_DATA = new InjectionToken('FUSE_MODAL_DATA');
+
+class FuseModalComponent {
+    // ─── Injected tokens ───────────────────────────────────────────────────────
+    config = inject(FUSE_MODAL_CONFIG);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modalRef = inject(FUSE_MODAL_REF);
+    componentType = inject(FUSE_MODAL_COMPONENT);
+    destroyRef = inject(DestroyRef);
+    el = inject(ElementRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    // ─── View refs ─────────────────────────────────────────────────────────────
+    contentRef = viewChild.required('contentRef', { read: ViewContainerRef });
+    // ─── Private state ─────────────────────────────────────────────────────────
+    focusTrap;
+    // ─── Lifecycle ─────────────────────────────────────────────────────────────
+    ngAfterViewInit() {
+        // Render the hosted component into the <ng-template #contentRef>
+        this.contentRef().createComponent(this.componentType);
+        // Trap focus inside the modal panel
+        this.focusTrap = this.focusTrapFactory.create(this.el.nativeElement);
+        this.focusTrap.focusInitialElementWhenReady();
+        // ESC key → close (only when closable)
+        fromEvent(document, 'keydown')
+            .pipe(filter((e) => e.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (this.config.closable) {
+                this.modalRef.close();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.focusTrap?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseModalComponent, isStandalone: true, selector: "fuse-modal", viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"fuse-modal__panel fuse-modal__panel--{{ config.size }}\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n>\n  <!-- Close button -->\n  @if (config.closable) {\n    <button\n      type=\"button\"\n      class=\"fuse-modal__close\"\n      aria-label=\"Close modal\"\n      (click)=\"modalRef.close()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"\n           fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75\n                 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06\n                 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n      </svg>\n    </button>\n  }\n\n  <!-- Dynamic content -->\n  <ng-template #contentRef></ng-template>\n</div>\n", styles: [":host{display:block}.fuse-modal__panel{--fuse-modal-radius: var(--fuse-radius-lg, 12px);--fuse-modal-bg: var(--fuse-color-surface, #ffffff);--fuse-modal-shadow: var(--fuse-shadow-xl, 0 20px 60px rgba(0, 0, 0, .25));--fuse-modal-padding: var(--fuse-space-6, 24px);position:relative;background:var(--fuse-modal-bg);border-radius:var(--fuse-modal-radius);box-shadow:var(--fuse-modal-shadow);padding:var(--fuse-modal-padding);overflow:auto;outline:none}.fuse-modal__panel--sm{width:min(90vw,360px);max-height:90vh}.fuse-modal__panel--md{width:min(90vw,520px);max-height:90vh}.fuse-modal__panel--lg{width:min(90vw,760px);max-height:90vh}.fuse-modal__panel--fullscreen{width:100vw;height:100vh;max-height:100vh;border-radius:0}.fuse-modal__close{position:absolute;top:var(--fuse-space-3, 12px);right:var(--fuse-space-3, 12px);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:var(--fuse-radius-sm, 4px);color:var(--fuse-color-text-muted, #6b7280);cursor:pointer;transition:color .15s ease,background-color .15s ease}.fuse-modal__close:hover{background-color:var(--fuse-color-neutral-100, #f3f4f6);color:var(--fuse-color-text, #111827)}.fuse-modal__close:focus-visible{outline:2px solid var(--fuse-color-primary, #4f46e5);outline-offset:2px}:host-context(.ios) .fuse-modal__panel{--fuse-modal-radius: var(--fuse-radius-xl, 16px)}:host-context(.md) .fuse-modal__panel{--fuse-modal-radius: var(--fuse-radius-md, 8px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-modal', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fuse-modal__panel fuse-modal__panel--{{ config.size }}\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n>\n  <!-- Close button -->\n  @if (config.closable) {\n    <button\n      type=\"button\"\n      class=\"fuse-modal__close\"\n      aria-label=\"Close modal\"\n      (click)=\"modalRef.close()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"\n           fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75\n                 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06\n                 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n      </svg>\n    </button>\n  }\n\n  <!-- Dynamic content -->\n  <ng-template #contentRef></ng-template>\n</div>\n", styles: [":host{display:block}.fuse-modal__panel{--fuse-modal-radius: var(--fuse-radius-lg, 12px);--fuse-modal-bg: var(--fuse-color-surface, #ffffff);--fuse-modal-shadow: var(--fuse-shadow-xl, 0 20px 60px rgba(0, 0, 0, .25));--fuse-modal-padding: var(--fuse-space-6, 24px);position:relative;background:var(--fuse-modal-bg);border-radius:var(--fuse-modal-radius);box-shadow:var(--fuse-modal-shadow);padding:var(--fuse-modal-padding);overflow:auto;outline:none}.fuse-modal__panel--sm{width:min(90vw,360px);max-height:90vh}.fuse-modal__panel--md{width:min(90vw,520px);max-height:90vh}.fuse-modal__panel--lg{width:min(90vw,760px);max-height:90vh}.fuse-modal__panel--fullscreen{width:100vw;height:100vh;max-height:100vh;border-radius:0}.fuse-modal__close{position:absolute;top:var(--fuse-space-3, 12px);right:var(--fuse-space-3, 12px);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:var(--fuse-radius-sm, 4px);color:var(--fuse-color-text-muted, #6b7280);cursor:pointer;transition:color .15s ease,background-color .15s ease}.fuse-modal__close:hover{background-color:var(--fuse-color-neutral-100, #f3f4f6);color:var(--fuse-color-text, #111827)}.fuse-modal__close:focus-visible{outline:2px solid var(--fuse-color-primary, #4f46e5);outline-offset:2px}:host-context(.ios) .fuse-modal__panel{--fuse-modal-radius: var(--fuse-radius-xl, 16px)}:host-context(.md) .fuse-modal__panel{--fuse-modal-radius: var(--fuse-radius-md, 8px)}\n"] }]
+        }], propDecorators: { contentRef: [{ type: i0.ViewChild, args: ['contentRef', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class FuseModalRef {
+    overlayRef;
+    /** Internal signal carrying the close result. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _result = signal(undefined, ...(ngDevMode ? [{ debugName: "_result" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _closed$ = new Subject();
+    _disposed = false;
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+    }
+    /**
+     * Close the modal and pass an optional result to `afterClosed()`.
+     * Safe to call multiple times — subsequent calls are no-ops.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    close(result) {
+        if (this._disposed)
+            return;
+        this._disposed = true;
+        this._result.set(result);
+        this.overlayRef.dispose();
+        this._closed$.next(result);
+        this._closed$.complete();
+    }
+    /** Emits once with the close result then completes. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    afterClosed() {
+        return this._closed$.asObservable();
+    }
+}
+
+class FuseConfirmDialogComponent {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modalRef = inject(FUSE_MODAL_REF);
+    options = inject(FUSE_MODAL_DATA);
+    confirm() {
+        this.modalRef.close(true);
+    }
+    cancel() {
+        this.modalRef.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseConfirmDialogComponent, isStandalone: true, selector: "fuse-confirm-dialog", ngImport: i0, template: "<div class=\"fuse-confirm\" [class]=\"'fuse-confirm--' + (options.type ?? 'info')\">\n  <!-- Icon -->\n  <div class=\"fuse-confirm__icon\" aria-hidden=\"true\">\n    @switch (options.type ?? 'info') {\n      @case ('danger') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n      @case ('warning') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n      @default {\n        <!-- info (default) -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5A.75.75 0 0012 9z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n    }\n  </div>\n\n  <!-- Body -->\n  <div class=\"fuse-confirm__body\">\n    <h2 class=\"fuse-confirm__title\">{{ options.title }}</h2>\n    <p class=\"fuse-confirm__message\">{{ options.message }}</p>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"fuse-confirm__actions\">\n    <button\n      type=\"button\"\n      class=\"fuse-confirm__btn fuse-confirm__btn--cancel\"\n      (click)=\"cancel()\"\n    >\n      {{ options.cancelLabel ?? 'Cancel' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"fuse-confirm__btn fuse-confirm__btn--confirm\"\n      (click)=\"confirm()\"\n    >\n      {{ options.confirmLabel ?? 'Confirm' }}\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block}.fuse-confirm{display:flex;flex-direction:column;gap:var(--fuse-space-4, 16px)}.fuse-confirm__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--fuse-radius-full, 9999px);align-self:flex-start}.fuse-confirm__icon svg{flex-shrink:0}:host(.fuse-confirm--danger) .fuse-confirm__icon{background-color:var(--fuse-color-danger-100, #fee2e2);color:var(--fuse-color-danger-600, #dc2626)}:host(.fuse-confirm--warning) .fuse-confirm__icon{background-color:var(--fuse-color-warning-100, #fef3c7);color:var(--fuse-color-warning-600, #d97706)}:host(.fuse-confirm--info) .fuse-confirm__icon,:host(:not(.fuse-confirm--danger):not(.fuse-confirm--warning)) .fuse-confirm__icon{background-color:var(--fuse-color-info-100, #dbeafe);color:var(--fuse-color-info-600, #2563eb)}.fuse-confirm__body{display:flex;flex-direction:column;gap:var(--fuse-space-2, 8px)}.fuse-confirm__title{margin:0;font-size:var(--fuse-font-size-lg, 1.125rem);font-weight:var(--fuse-font-weight-semibold, 600);color:var(--fuse-color-text, #111827);line-height:1.4}.fuse-confirm__message{margin:0;font-size:var(--fuse-font-size-sm, .875rem);color:var(--fuse-color-text-muted, #6b7280);line-height:1.5}.fuse-confirm__actions{display:flex;justify-content:flex-end;gap:var(--fuse-space-3, 12px);padding-top:var(--fuse-space-2, 8px)}.fuse-confirm__btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--fuse-space-2, 8px) var(--fuse-space-4, 16px);font-size:var(--fuse-font-size-sm, .875rem);font-weight:var(--fuse-font-weight-medium, 500);border-radius:var(--fuse-radius-md, 8px);border:1px solid transparent;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.fuse-confirm__btn:focus-visible{outline:2px solid var(--fuse-color-primary, #4f46e5);outline-offset:2px}.fuse-confirm__btn--cancel{background-color:var(--fuse-color-neutral-100, #f3f4f6);color:var(--fuse-color-text, #111827);border-color:var(--fuse-color-neutral-200, #e5e7eb)}.fuse-confirm__btn--cancel:hover{background-color:var(--fuse-color-neutral-200, #e5e7eb)}.fuse-confirm__btn--confirm{background-color:var(--fuse-color-primary, #4f46e5);color:var(--fuse-color-primary-contrast, #ffffff)}.fuse-confirm__btn--confirm:hover{background-color:var(--fuse-color-primary-700, #4338ca)}:host(.fuse-confirm--danger) .fuse-confirm__btn--confirm{background-color:var(--fuse-color-danger-600, #dc2626);color:var(--fuse-color-danger-contrast, #ffffff)}:host(.fuse-confirm--danger) .fuse-confirm__btn--confirm:hover{background-color:var(--fuse-color-danger-700, #b91c1c)}:host(.fuse-confirm--warning) .fuse-confirm__btn--confirm{background-color:var(--fuse-color-warning-600, #d97706);color:var(--fuse-color-warning-contrast, #ffffff)}:host(.fuse-confirm--warning) .fuse-confirm__btn--confirm:hover{background-color:var(--fuse-color-warning-700, #b45309)}:host-context(.ios) .fuse-confirm__btn{border-radius:var(--fuse-radius-lg, 12px)}:host-context(.ios) .fuse-confirm__title{font-size:var(--fuse-font-size-base, 1rem)}:host-context(.md) .fuse-confirm__btn{border-radius:var(--fuse-radius-sm, 4px);text-transform:uppercase;letter-spacing:.05em;font-size:var(--fuse-font-size-xs, .75rem)}:host-context(.md) .fuse-confirm__actions{justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-confirm-dialog', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fuse-confirm\" [class]=\"'fuse-confirm--' + (options.type ?? 'info')\">\n  <!-- Icon -->\n  <div class=\"fuse-confirm__icon\" aria-hidden=\"true\">\n    @switch (options.type ?? 'info') {\n      @case ('danger') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n      @case ('warning') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n      @default {\n        <!-- info (default) -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5A.75.75 0 0012 9z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n    }\n  </div>\n\n  <!-- Body -->\n  <div class=\"fuse-confirm__body\">\n    <h2 class=\"fuse-confirm__title\">{{ options.title }}</h2>\n    <p class=\"fuse-confirm__message\">{{ options.message }}</p>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"fuse-confirm__actions\">\n    <button\n      type=\"button\"\n      class=\"fuse-confirm__btn fuse-confirm__btn--cancel\"\n      (click)=\"cancel()\"\n    >\n      {{ options.cancelLabel ?? 'Cancel' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"fuse-confirm__btn fuse-confirm__btn--confirm\"\n      (click)=\"confirm()\"\n    >\n      {{ options.confirmLabel ?? 'Confirm' }}\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block}.fuse-confirm{display:flex;flex-direction:column;gap:var(--fuse-space-4, 16px)}.fuse-confirm__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--fuse-radius-full, 9999px);align-self:flex-start}.fuse-confirm__icon svg{flex-shrink:0}:host(.fuse-confirm--danger) .fuse-confirm__icon{background-color:var(--fuse-color-danger-100, #fee2e2);color:var(--fuse-color-danger-600, #dc2626)}:host(.fuse-confirm--warning) .fuse-confirm__icon{background-color:var(--fuse-color-warning-100, #fef3c7);color:var(--fuse-color-warning-600, #d97706)}:host(.fuse-confirm--info) .fuse-confirm__icon,:host(:not(.fuse-confirm--danger):not(.fuse-confirm--warning)) .fuse-confirm__icon{background-color:var(--fuse-color-info-100, #dbeafe);color:var(--fuse-color-info-600, #2563eb)}.fuse-confirm__body{display:flex;flex-direction:column;gap:var(--fuse-space-2, 8px)}.fuse-confirm__title{margin:0;font-size:var(--fuse-font-size-lg, 1.125rem);font-weight:var(--fuse-font-weight-semibold, 600);color:var(--fuse-color-text, #111827);line-height:1.4}.fuse-confirm__message{margin:0;font-size:var(--fuse-font-size-sm, .875rem);color:var(--fuse-color-text-muted, #6b7280);line-height:1.5}.fuse-confirm__actions{display:flex;justify-content:flex-end;gap:var(--fuse-space-3, 12px);padding-top:var(--fuse-space-2, 8px)}.fuse-confirm__btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--fuse-space-2, 8px) var(--fuse-space-4, 16px);font-size:var(--fuse-font-size-sm, .875rem);font-weight:var(--fuse-font-weight-medium, 500);border-radius:var(--fuse-radius-md, 8px);border:1px solid transparent;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.fuse-confirm__btn:focus-visible{outline:2px solid var(--fuse-color-primary, #4f46e5);outline-offset:2px}.fuse-confirm__btn--cancel{background-color:var(--fuse-color-neutral-100, #f3f4f6);color:var(--fuse-color-text, #111827);border-color:var(--fuse-color-neutral-200, #e5e7eb)}.fuse-confirm__btn--cancel:hover{background-color:var(--fuse-color-neutral-200, #e5e7eb)}.fuse-confirm__btn--confirm{background-color:var(--fuse-color-primary, #4f46e5);color:var(--fuse-color-primary-contrast, #ffffff)}.fuse-confirm__btn--confirm:hover{background-color:var(--fuse-color-primary-700, #4338ca)}:host(.fuse-confirm--danger) .fuse-confirm__btn--confirm{background-color:var(--fuse-color-danger-600, #dc2626);color:var(--fuse-color-danger-contrast, #ffffff)}:host(.fuse-confirm--danger) .fuse-confirm__btn--confirm:hover{background-color:var(--fuse-color-danger-700, #b91c1c)}:host(.fuse-confirm--warning) .fuse-confirm__btn--confirm{background-color:var(--fuse-color-warning-600, #d97706);color:var(--fuse-color-warning-contrast, #ffffff)}:host(.fuse-confirm--warning) .fuse-confirm__btn--confirm:hover{background-color:var(--fuse-color-warning-700, #b45309)}:host-context(.ios) .fuse-confirm__btn{border-radius:var(--fuse-radius-lg, 12px)}:host-context(.ios) .fuse-confirm__title{font-size:var(--fuse-font-size-base, 1rem)}:host-context(.md) .fuse-confirm__btn{border-radius:var(--fuse-radius-sm, 4px);text-transform:uppercase;letter-spacing:.05em;font-size:var(--fuse-font-size-xs, .75rem)}:host-context(.md) .fuse-confirm__actions{justify-content:flex-end}\n"] }]
+        }] });
+
+const SIZE_ORDER = ['sm', 'md', 'lg', 'fullscreen'];
+class FuseModalService {
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    /**
+     * Open any standalone component in a modal panel.
+     * The component can inject FUSE_MODAL_REF and FUSE_MODAL_DATA.
+     */
+    open(component, config) {
+        const resolved = this.resolveConfig(config);
+        const overlayRef = this.overlay.create(this.buildOverlayConfig(resolved));
+        const modalRef = new FuseModalRef(overlayRef);
+        const childInjector = Injector.create({
+            providers: [
+                { provide: FUSE_MODAL_COMPONENT, useValue: component },
+                { provide: FUSE_MODAL_CONFIG, useValue: resolved },
+                { provide: FUSE_MODAL_REF, useValue: modalRef },
+                { provide: FUSE_MODAL_DATA, useValue: resolved.data ?? null },
+            ],
+            parent: this.injector,
+        });
+        const portal = new ComponentPortal(FuseModalComponent, null, childInjector);
+        overlayRef.attach(portal);
+        if (resolved.backdropDismiss) {
+            overlayRef
+                .backdropClick()
+                .pipe(take(1))
+                .subscribe(() => modalRef.close());
+        }
+        return modalRef;
+    }
+    /**
+     * Show a pre-built confirmation dialog.
+     * Resolves `true` if the user confirms, `false` otherwise.
+     */
+    confirm(options) {
+        return new Promise((resolve) => {
+            const ref = this.open(FuseConfirmDialogComponent, {
+                size: 'sm',
+                closable: false,
+                backdropDismiss: false,
+                data: options,
+            });
+            ref.afterClosed().subscribe((result) => resolve(!!result));
+        });
+    }
+    // ─── Helpers ───────────────────────────────────────────────────────────────
+    resolveConfig(config) {
+        return {
+            size: config?.size ?? 'md',
+            closable: config?.closable !== false,
+            backdropDismiss: config?.backdropDismiss !== false,
+            data: config?.data ?? null,
+        };
+    }
+    buildOverlayConfig(config) {
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
+        return new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'fuse-modal-backdrop',
+            panelClass: [
+                'fuse-modal-overlay',
+                `fuse-modal-overlay--${config.size}`,
+            ],
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+// Unused import guard — ensures the SIZE_ORDER tuple is reachable.
+void SIZE_ORDER;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUSE_MODAL_DATA, FUSE_MODAL_REF, FuseConfirmDialogComponent, FuseModalComponent, FuseModalRef, FuseModalService };
+//# sourceMappingURL=fuse_ui-modal.mjs.map

package/fesm2022/fuse_ui-modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-modal.mjs","sources":["../../../../packages/modal/src/lib/modal/fuse-modal.tokens.ts","../../../../packages/modal/src/lib/modal/fuse-modal.component.ts","../../../../packages/modal/src/lib/modal/fuse-modal.component.html","../../../../packages/modal/src/lib/modal/fuse-modal-ref.ts","../../../../packages/modal/src/lib/confirm/fuse-confirm-dialog.component.ts","../../../../packages/modal/src/lib/confirm/fuse-confirm-dialog.component.html","../../../../packages/modal/src/lib/modal/fuse-modal.service.ts","../../../../packages/modal/src/fuse_ui-modal.ts"],"sourcesContent":["import { InjectionToken, Type } from '@angular/core';\nimport type { FuseModalConfig } from './fuse-modal.config';\nimport type { FuseModalRef } from './fuse-modal-ref';\n\n/** The dynamic component type to render inside the modal shell. */\nexport const FUSE_MODAL_COMPONENT = new InjectionToken<Type<unknown>>(\n  'FUSE_MODAL_COMPONENT',\n);\n\n/** Resolved configuration for the open modal. */\nexport const FUSE_MODAL_CONFIG = new InjectionToken<Required<FuseModalConfig>>(\n  'FUSE_MODAL_CONFIG',\n);\n\n/** Reference to the open modal; injectable inside the hosted component. */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const FUSE_MODAL_REF = new InjectionToken<FuseModalRef<any>>(\n  'FUSE_MODAL_REF',\n);\n\n/**\n * Arbitrary data passed via FuseModalConfig.data.\n * Inject this token in the hosted component to receive it.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const FUSE_MODAL_DATA = new InjectionToken<any>('FUSE_MODAL_DATA');\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  OnDestroy,\n  Type,\n  ViewContainerRef,\n  inject,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';\nimport type { FuseModalConfig } from './fuse-modal.config';\nimport type { FuseModalRef } from './fuse-modal-ref';\nimport {\n  FUSE_MODAL_COMPONENT,\n  FUSE_MODAL_CONFIG,\n  FUSE_MODAL_REF,\n} from './fuse-modal.tokens';\n\n@Component({\n  selector: 'fuse-modal',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-modal.component.html',\n  styleUrl: './fuse-modal.component.scss',\n})\nexport class FuseModalComponent implements AfterViewInit, OnDestroy {\n  // ─── Injected tokens ───────────────────────────────────────────────────────\n\n   \n  protected readonly config = inject<Required<FuseModalConfig>>(FUSE_MODAL_CONFIG);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  protected readonly modalRef = inject<FuseModalRef<any>>(FUSE_MODAL_REF);\n  private readonly componentType = inject<Type<unknown>>(FUSE_MODAL_COMPONENT);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly focusTrapFactory = inject(FocusTrapFactory);\n\n  // ─── View refs ─────────────────────────────────────────────────────────────\n\n  private readonly contentRef = viewChild.required('contentRef', { read: ViewContainerRef });\n\n  // ─── Private state ─────────────────────────────────────────────────────────\n\n  private focusTrap!: FocusTrap;\n\n  // ─── Lifecycle ─────────────────────────────────────────────────────────────\n\n  ngAfterViewInit(): void {\n    // Render the hosted component into the <ng-template #contentRef>\n    this.contentRef().createComponent(this.componentType);\n\n    // Trap focus inside the modal panel\n    this.focusTrap = this.focusTrapFactory.create(this.el.nativeElement);\n    this.focusTrap.focusInitialElementWhenReady();\n\n    // ESC key → close (only when closable)\n    fromEvent<KeyboardEvent>(document, 'keydown')\n      .pipe(\n        filter((e) => e.key === 'Escape'),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe(() => {\n        if (this.config.closable) {\n          this.modalRef.close();\n        }\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.focusTrap?.destroy();\n  }\n}\n","<div\n  class=\"fuse-modal__panel fuse-modal__panel--{{ config.size }}\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n>\n  <!-- Close button -->\n  @if (config.closable) {\n    <button\n      type=\"button\"\n      class=\"fuse-modal__close\"\n      aria-label=\"Close modal\"\n      (click)=\"modalRef.close()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"\n           fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75\n                 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06\n                 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n      </svg>\n    </button>\n  }\n\n  <!-- Dynamic content -->\n  <ng-template #contentRef></ng-template>\n</div>\n","import { signal } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\nimport type { OverlayRef } from '@angular/cdk/overlay';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class FuseModalRef<T = any> {\n  /** Internal signal carrying the close result. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private readonly _result = signal<any>(undefined);\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private readonly _closed$ = new Subject<any>();\n\n  private _disposed = false;\n\n  constructor(private readonly overlayRef: OverlayRef) {}\n\n  /**\n   * Close the modal and pass an optional result to `afterClosed()`.\n   * Safe to call multiple times — subsequent calls are no-ops.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  close(result?: any): void {\n    if (this._disposed) return;\n    this._disposed = true;\n    this._result.set(result);\n    this.overlayRef.dispose();\n    this._closed$.next(result);\n    this._closed$.complete();\n  }\n\n  /** Emits once with the close result then completes. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  afterClosed(): Observable<any> {\n    return this._closed$.asObservable();\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n} from '@angular/core';\nimport type { FuseConfirmOptions } from '../modal/fuse-modal.config';\nimport type { FuseModalRef } from '../modal/fuse-modal-ref';\nimport {\n  FUSE_MODAL_DATA,\n  FUSE_MODAL_REF,\n} from '../modal/fuse-modal.tokens';\n\n@Component({\n  selector: 'fuse-confirm-dialog',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-confirm-dialog.component.html',\n  styleUrl: './fuse-confirm-dialog.component.scss',\n})\nexport class FuseConfirmDialogComponent {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  protected readonly modalRef = inject<FuseModalRef<any>>(FUSE_MODAL_REF);\n  protected readonly options = inject<FuseConfirmOptions>(FUSE_MODAL_DATA);\n\n  protected confirm(): void {\n    this.modalRef.close(true);\n  }\n\n  protected cancel(): void {\n    this.modalRef.close(false);\n  }\n}\n","<div class=\"fuse-confirm\" [class]=\"'fuse-confirm--' + (options.type ?? 'info')\">\n  <!-- Icon -->\n  <div class=\"fuse-confirm__icon\" aria-hidden=\"true\">\n    @switch (options.type ?? 'info') {\n      @case ('danger') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n      @case ('warning') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n      @default {\n        <!-- info (default) -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n          <path fill-rule=\"evenodd\"\n                d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5A.75.75 0 0012 9z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n      }\n    }\n  </div>\n\n  <!-- Body -->\n  <div class=\"fuse-confirm__body\">\n    <h2 class=\"fuse-confirm__title\">{{ options.title }}</h2>\n    <p class=\"fuse-confirm__message\">{{ options.message }}</p>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"fuse-confirm__actions\">\n    <button\n      type=\"button\"\n      class=\"fuse-confirm__btn fuse-confirm__btn--cancel\"\n      (click)=\"cancel()\"\n    >\n      {{ options.cancelLabel ?? 'Cancel' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"fuse-confirm__btn fuse-confirm__btn--confirm\"\n      (click)=\"confirm()\"\n    >\n      {{ options.confirmLabel ?? 'Confirm' }}\n    </button>\n  </div>\n</div>\n","import {\n  Injectable,\n  Injector,\n  Type,\n  inject,\n} from '@angular/core';\nimport { Overlay, OverlayConfig } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { take } from 'rxjs/operators';\nimport { FuseModalComponent } from './fuse-modal.component';\nimport { FuseModalRef } from './fuse-modal-ref';\nimport type { FuseConfirmOptions, FuseModalConfig, FuseModalSize } from './fuse-modal.config';\nimport {\n  FUSE_MODAL_COMPONENT,\n  FUSE_MODAL_CONFIG,\n  FUSE_MODAL_DATA,\n  FUSE_MODAL_REF,\n} from './fuse-modal.tokens';\nimport { FuseConfirmDialogComponent } from '../confirm/fuse-confirm-dialog.component';\n\nconst SIZE_ORDER: FuseModalSize[] = ['sm', 'md', 'lg', 'fullscreen'];\n\n@Injectable({ providedIn: 'root' })\nexport class FuseModalService {\n  private readonly overlay = inject(Overlay);\n  private readonly injector = inject(Injector);\n\n  /**\n   * Open any standalone component in a modal panel.\n   * The component can inject FUSE_MODAL_REF and FUSE_MODAL_DATA.\n   */\n  open<T>(component: Type<T>, config?: FuseModalConfig): FuseModalRef<T> {\n    const resolved = this.resolveConfig(config);\n\n    const overlayRef = this.overlay.create(this.buildOverlayConfig(resolved));\n    const modalRef = new FuseModalRef<T>(overlayRef);\n\n    const childInjector = Injector.create({\n      providers: [\n        { provide: FUSE_MODAL_COMPONENT, useValue: component },\n        { provide: FUSE_MODAL_CONFIG, useValue: resolved },\n        { provide: FUSE_MODAL_REF, useValue: modalRef },\n        { provide: FUSE_MODAL_DATA, useValue: resolved.data ?? null },\n      ],\n      parent: this.injector,\n    });\n\n    const portal = new ComponentPortal(FuseModalComponent, null, childInjector);\n    overlayRef.attach(portal);\n\n    if (resolved.backdropDismiss) {\n      overlayRef\n        .backdropClick()\n        .pipe(take(1))\n        .subscribe(() => modalRef.close());\n    }\n\n    return modalRef;\n  }\n\n  /**\n   * Show a pre-built confirmation dialog.\n   * Resolves `true` if the user confirms, `false` otherwise.\n   */\n  confirm(options: FuseConfirmOptions): Promise<boolean> {\n    return new Promise<boolean>((resolve) => {\n      const ref = this.open(FuseConfirmDialogComponent, {\n        size: 'sm',\n        closable: false,\n        backdropDismiss: false,\n        data: options,\n      });\n      ref.afterClosed().subscribe((result) => resolve(!!result));\n    });\n  }\n\n  // ─── Helpers ───────────────────────────────────────────────────────────────\n\n  private resolveConfig(config?: FuseModalConfig): Required<FuseModalConfig> {\n    return {\n      size: config?.size ?? 'md',\n      closable: config?.closable !== false,\n      backdropDismiss: config?.backdropDismiss !== false,\n      data: config?.data ?? null,\n    };\n  }\n\n  private buildOverlayConfig(config: Required<FuseModalConfig>): OverlayConfig {\n    const positionStrategy = this.overlay\n      .position()\n      .global()\n      .centerHorizontally()\n      .centerVertically();\n\n    return new OverlayConfig({\n      hasBackdrop: true,\n      backdropClass: 'fuse-modal-backdrop',\n      panelClass: [\n        'fuse-modal-overlay',\n        `fuse-modal-overlay--${config.size}`,\n      ],\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n    });\n  }\n}\n\n// Unused import guard — ensures the SIZE_ORDER tuple is reachable.\nvoid SIZE_ORDER;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@fuse_ui/modal",
+  "version": "0.0.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "fuse-ui",
+    "angular",
+    "ionic",
+    "ionic8",
+    "angular18",
+    "angular19",
+    "angular20",
+    "angular21",
+    "ui-components",
+    "design-system",
+    "css-variables",
+    "signals",
+    "standalone",
+    "multi-theme",
+    "dark-mode",
+    "fluid-typography",
+    "animated"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@angular/common": ">=18.0.0",
+    "rxjs": ">=7.4.0",
+    "@angular/cdk": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@ionic/angular": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "**/*.scss"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "module": "fesm2022/fuse_ui-modal.mjs",
+  "typings": "types/fuse_ui-modal.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/fuse_ui-modal.d.ts",
+      "default": "./fesm2022/fuse_ui-modal.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/fuse_ui-modal.d.ts

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { Type, AfterViewInit, OnDestroy, InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+import { OverlayRef } from '@angular/cdk/overlay';
+
+declare class FuseModalRef<T = any> {
+    private readonly overlayRef;
+    /** Internal signal carrying the close result. */
+    private readonly _result;
+    private readonly _closed$;
+    private _disposed;
+    constructor(overlayRef: OverlayRef);
+    /**
+     * Close the modal and pass an optional result to `afterClosed()`.
+     * Safe to call multiple times — subsequent calls are no-ops.
+     */
+    close(result?: any): void;
+    /** Emits once with the close result then completes. */
+    afterClosed(): Observable<any>;
+}
+
+type FuseModalSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+type FuseConfirmType = 'danger' | 'warning' | 'info';
+interface FuseModalConfig {
+    /** Panel size. Default: 'md'. */
+    size?: FuseModalSize;
+    /** Show the built-in × close button. Default: true. */
+    closable?: boolean;
+    /** Close when the backdrop is clicked. Default: true. */
+    backdropDismiss?: boolean;
+    /** Arbitrary data injected as FUSE_MODAL_DATA in the hosted component. */
+    data?: any;
+}
+interface FuseConfirmOptions {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    type?: FuseConfirmType;
+}
+
+declare class FuseModalService {
+    private readonly overlay;
+    private readonly injector;
+    /**
+     * Open any standalone component in a modal panel.
+     * The component can inject FUSE_MODAL_REF and FUSE_MODAL_DATA.
+     */
+    open<T>(component: Type<T>, config?: FuseModalConfig): FuseModalRef<T>;
+    /**
+     * Show a pre-built confirmation dialog.
+     * Resolves `true` if the user confirms, `false` otherwise.
+     */
+    confirm(options: FuseConfirmOptions): Promise<boolean>;
+    private resolveConfig;
+    private buildOverlayConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FuseModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FuseModalService>;
+}
+
+declare class FuseModalComponent implements AfterViewInit, OnDestroy {
+    protected readonly config: Required<FuseModalConfig>;
+    protected readonly modalRef: FuseModalRef<any>;
+    private readonly componentType;
+    private readonly destroyRef;
+    private readonly el;
+    private readonly focusTrapFactory;
+    private readonly contentRef;
+    private focusTrap;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FuseModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FuseModalComponent, "fuse-modal", never, {}, {}, never, never, true, never>;
+}
+
+declare class FuseConfirmDialogComponent {
+    protected readonly modalRef: FuseModalRef<any>;
+    protected readonly options: FuseConfirmOptions;
+    protected confirm(): void;
+    protected cancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FuseConfirmDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FuseConfirmDialogComponent, "fuse-confirm-dialog", never, {}, {}, never, never, true, never>;
+}
+
+/** Reference to the open modal; injectable inside the hosted component. */
+declare const FUSE_MODAL_REF: InjectionToken<FuseModalRef<any>>;
+/**
+ * Arbitrary data passed via FuseModalConfig.data.
+ * Inject this token in the hosted component to receive it.
+ */
+declare const FUSE_MODAL_DATA: InjectionToken<any>;
+
+export { FUSE_MODAL_DATA, FUSE_MODAL_REF, FuseConfirmDialogComponent, FuseModalComponent, FuseModalRef, FuseModalService };
+export type { FuseConfirmOptions, FuseConfirmType, FuseModalConfig, FuseModalSize };