upp-dialog

A centered modal shell with a backdrop mask and content projection. It is an embedded alternative to Ionic ModalController: the consumer controls visibility (*ngIf or similar) and projects title, form, and actions inside the panel.

When to Use

Use upp-dialog for short confirmations or compact forms that need a modal overlay without registering a separate Ionic modal. Typical consumers wrap business content (for example account settlement) and listen to OnClose to hide the shell.

The host applies desktop or mobile classes from viewService. On desktop the panel is a centered card; on mobile it fills the viewport.

Demo

Source Code

HTML

<h2>upp-dialog</h2>
<p class="demo-description">Centered modal shell with projected content using <code>upp-dialog</code>.</p>

<div class="demo-controls">
    <ion-button size="small" (click)="OnOpen()">Open dialog</ion-button>
    <ion-button size="small" fill="outline" (click)="OnToggleBackdrop()">
        backdropDismiss: {{ backdropDismiss }}
    </ion-button>
</div>

<upp-dialog *ngIf="open" [backdropDismiss]="backdropDismiss" (OnClose)="OnClose()">
    <div class="dialog-body">
        <h3>Confirm action</h3>
        <p>Click the backdrop, press Escape, or use the button below to close.</p>
        <ion-button expand="block" (click)="OnClose()">Close</ion-button>
    </div>
</upp-dialog>

TypeScript

import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';

@Component({
    selector: 'demo-upp-dialog',
    templateUrl: './demo-upp-dialog.html',
    styleUrls: ['../demo-common.scss', './demo-upp-dialog.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DemoUppDialogComponent {
    open = false;
    backdropDismiss = true;

    constructor(private change: ChangeDetectorRef) {}

    OnOpen(): void {
        this.open = true;
        this.change.markForCheck();
    }

    OnClose(): void {
        this.open = false;
        this.change.markForCheck();
    }

    OnToggleBackdrop(): void {
        this.backdropDismiss = !this.backdropDismiss;
        this.change.markForCheck();
    }
}

SCSS

:host {
    display: block;
    padding: 16px;
}

.dialog-body {
    padding: 20px;
}

.dialog-body h3 {
    margin: 0 0 8px;
}

.dialog-body p {
    margin: 0 0 16px;
}

API Reference

upp-dialog

Input / Output	Type	Default	Description
backdropDismiss	boolean	true	When true, backdrop click, Enter, and Space emit OnClose.
OnClose	EventEmitter<void>	—	Emitted when the user dismisses the dialog (backdrop when allowed, or Escape).

Host classes: mobile when viewService.Mobile is true; desktop when viewService.Desktop is true.

Content projection: arbitrary markup inside <upp-dialog>…</upp-dialog> is rendered in the centered panel.

CSS variables (on :host):

Variable	Default	Description
--upp-dialog-panel-width	420px	Max width of the desktop panel
--upp-dialog-panel-inset	24px	Outer padding around the desktop panel
--upp-dialog-panel-radius	10px	Border radius on desktop
--upp-dialog-z-index	12000	Stacking order of the overlay