@star-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/star-ng-ui-dialog.mjs

@@ -0,0 +1,948 @@
+import * as i0 from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, Component, EnvironmentInjector, InjectionToken, Injector, Service, afterRenderEffect, booleanAttribute, computed, createComponent, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { StarButton } from "@star-ng/ui/button";
+import { STAR_UI_TEXT } from "@star-ng/ui/core";
+import { StarPopover } from "@star-ng/ui/popover";
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { NgComponentOutlet } from "@angular/common";
+const FOCUSABLE = "button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+var StarDialog = class StarDialog {
+	text = inject(STAR_UI_TEXT);
+	visible = model(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	header = input("", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	modal = input(true, {
+		...ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closable = input(true, {
+		...ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeOnEscape = input(true, {
+		...ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dismissableMask = input(false, {
+		...ngDevMode ? { debugName: "dismissableMask" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showHeader = input(true, {
+		...ngDevMode ? { debugName: "showHeader" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	role = input("dialog", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	shown = output();
+	hidden = output();
+	headerId = inject(_IdGenerator).getId("star-dialog-title-");
+	dialog = viewChild.required("dialog", ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
+	isOpen = false;
+	constructor() {
+		afterRenderEffect({ write: () => {
+			const element = this.dialog().nativeElement;
+			const visible = this.visible();
+			if (visible && !element.open) {
+				if (this.modal()) element.showModal?.();
+				else element.show?.();
+				this.isOpen = true;
+				this.focusInitial(element);
+				this.shown.emit();
+			} else if (!visible && element.open) {
+				element.close();
+				this.markHidden();
+			}
+		} });
+	}
+	close() {
+		this.visible.set(false);
+	}
+	focusInitial(element) {
+		const marked = element.querySelector("[data-autofocus]");
+		if (!marked) return;
+		(marked.matches(FOCUSABLE) ? marked : marked.querySelector(FOCUSABLE))?.focus();
+	}
+	onCancel(event) {
+		event.preventDefault();
+		if (this.closeOnEscape() && this.closable()) this.close();
+	}
+	onNativeClose() {
+		if (this.visible()) this.visible.set(false);
+		this.markHidden();
+	}
+	markHidden() {
+		if (!this.isOpen) return;
+		this.isOpen = false;
+		this.hidden.emit();
+	}
+	onDialogClick(event) {
+		if (event.target === this.dialog().nativeElement && this.dismissableMask() && this.modal()) this.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarDialog,
+		isStandalone: true,
+		selector: "star-dialog",
+		inputs: {
+			visible: {
+				classPropertyName: "visible",
+				publicName: "visible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			header: {
+				classPropertyName: "header",
+				publicName: "header",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			modal: {
+				classPropertyName: "modal",
+				publicName: "modal",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closable: {
+				classPropertyName: "closable",
+				publicName: "closable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnEscape: {
+				classPropertyName: "closeOnEscape",
+				publicName: "closeOnEscape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissableMask: {
+				classPropertyName: "dismissableMask",
+				publicName: "dismissableMask",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showHeader: {
+				classPropertyName: "showHeader",
+				publicName: "showHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			role: {
+				classPropertyName: "role",
+				publicName: "role",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			visible: "visibleChange",
+			shown: "shown",
+			hidden: "hidden"
+		},
+		viewQueries: [{
+			propertyName: "dialog",
+			first: true,
+			predicate: ["dialog"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <!-- Backdrop click only; keyboard users close with Escape (native cancel event). -->
+    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+    <dialog
+      #dialog
+      class="star-dialog"
+      [class]="'star-dialog--' + size()"
+      [class.star-dialog--modal]="modal()"
+      [style.width]="width()"
+      [attr.aria-labelledby]="header() ? headerId : null"
+      [attr.aria-label]="header() ? null : ariaLabel()"
+      [attr.role]="role()"
+      (cancel)="onCancel($event)"
+      (close)="onNativeClose()"
+      (click)="onDialogClick($event)"
+    >
+      <div class="star-dialog__surface">
+        @if (showHeader()) {
+          <header class="star-dialog__header">
+            <div class="star-dialog__heading">
+              @if (header()) {
+                <h2 class="star-dialog__title" [id]="headerId">{{ header() }}</h2>
+              }
+              <ng-content select="[starDialogHeader]" />
+            </div>
+            @if (closable()) {
+              <button
+                type="button"
+                class="star-btn star-btn--ghost star-btn--icon star-dialog__close"
+                [attr.aria-label]="text.close"
+                (click)="close()"
+              >
+                <i class="ph-bold ph-x" aria-hidden="true"></i>
+              </button>
+            }
+          </header>
+        }
+        <div class="star-dialog__body"><ng-content /></div>
+        <ng-content select="[starDialogFooter]" />
+      </div>
+    </dialog>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-dialog",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <!-- Backdrop click only; keyboard users close with Escape (native cancel event). -->
+    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+    <dialog
+      #dialog
+      class="star-dialog"
+      [class]="'star-dialog--' + size()"
+      [class.star-dialog--modal]="modal()"
+      [style.width]="width()"
+      [attr.aria-labelledby]="header() ? headerId : null"
+      [attr.aria-label]="header() ? null : ariaLabel()"
+      [attr.role]="role()"
+      (cancel)="onCancel($event)"
+      (close)="onNativeClose()"
+      (click)="onDialogClick($event)"
+    >
+      <div class="star-dialog__surface">
+        @if (showHeader()) {
+          <header class="star-dialog__header">
+            <div class="star-dialog__heading">
+              @if (header()) {
+                <h2 class="star-dialog__title" [id]="headerId">{{ header() }}</h2>
+              }
+              <ng-content select="[starDialogHeader]" />
+            </div>
+            @if (closable()) {
+              <button
+                type="button"
+                class="star-btn star-btn--ghost star-btn--icon star-dialog__close"
+                [attr.aria-label]="text.close"
+                (click)="close()"
+              >
+                <i class="ph-bold ph-x" aria-hidden="true"></i>
+              </button>
+            }
+          </header>
+        }
+        <div class="star-dialog__body"><ng-content /></div>
+        <ng-content select="[starDialogFooter]" />
+      </div>
+    </dialog>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		visible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visible",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["visibleChange"]
+		}],
+		header: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "header",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		modal: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "modal",
+				required: false
+			}]
+		}],
+		closable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closable",
+				required: false
+			}]
+		}],
+		closeOnEscape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnEscape",
+				required: false
+			}]
+		}],
+		dismissableMask: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissableMask",
+				required: false
+			}]
+		}],
+		showHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showHeader",
+				required: false
+			}]
+		}],
+		role: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "role",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		shown: [{
+			type: i0.Output,
+			args: ["shown"]
+		}],
+		hidden: [{
+			type: i0.Output,
+			args: ["hidden"]
+		}],
+		dialog: [{
+			type: i0.ViewChild,
+			args: ["dialog", { isSignal: true }]
+		}]
+	}
+});
+var StarConfirmService = class StarConfirmService {
+	queue = signal([], ...ngDevMode ? [{ debugName: "queue" }] : /* istanbul ignore next */ []);
+	current = computed(() => this.queue()[0] ?? null, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	ask(options) {
+		return new Promise((resolve) => this.queue.update((queue) => [...queue, {
+			...options,
+			resolve
+		}]));
+	}
+	settle(accepted) {
+		const current = this.current();
+		if (!current) return;
+		this.queue.update((queue) => queue.slice(1));
+		current.resolve(accepted);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarConfirmService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarConfirmService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarConfirmService,
+	decorators: [{ type: Service }]
+});
+var StarConfirmHost = class StarConfirmHost {
+	confirm = inject(StarConfirmService);
+	text = inject(STAR_UI_TEXT);
+	popover = viewChild.required(StarPopover, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
+	dialogRequest = computed(() => {
+		const current = this.confirm.current();
+		return current && !current.target ? current : null;
+	}, ...ngDevMode ? [{ debugName: "dialogRequest" }] : /* istanbul ignore next */ []);
+	popupRequest = computed(() => {
+		const current = this.confirm.current();
+		return current?.target ? current : null;
+	}, ...ngDevMode ? [{ debugName: "popupRequest" }] : /* istanbul ignore next */ []);
+	shownPopup = null;
+	constructor() {
+		afterRenderEffect({ write: () => {
+			const request = this.popupRequest();
+			const popover = this.popover();
+			if (request?.target && request !== this.shownPopup) {
+				this.shownPopup = request;
+				popover.show(request.target);
+			} else if (!request && this.shownPopup) {
+				this.shownPopup = null;
+				popover.hide();
+			}
+		} });
+	}
+	onPopupHidden() {
+		if (this.shownPopup && this.confirm.current() === this.shownPopup) {
+			this.shownPopup = null;
+			this.confirm.settle(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarConfirmHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarConfirmHost,
+		isStandalone: true,
+		selector: "star-confirm-host",
+		viewQueries: [{
+			propertyName: "popover",
+			first: true,
+			predicate: StarPopover,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @let request = dialogRequest();
+    @let popup = popupRequest();
+    <star-popover #popover [ariaLabel]="popup?.header ?? null" (hidden)="onPopupHidden()">
+      @if (popup) {
+        <div
+          class="star-confirm star-confirm--popup"
+          role="alertdialog"
+          [attr.aria-label]="popup.header"
+        >
+          @if (popup.icon) {
+            <span class="star-confirm__icon" aria-hidden="true"><i [class]="popup.icon"></i></span>
+          }
+          <p class="star-confirm__message">{{ popup.message }}</p>
+        </div>
+        <div class="star-confirm__actions">
+          @if (popup.rejectVisible !== false) {
+            <star-button size="sm" variant="ghost" (pressed)="confirm.settle(false)">
+              {{ popup.rejectLabel ?? text.reject }}
+            </star-button>
+          }
+          <star-button
+            size="sm"
+            [variant]="popup.acceptVariant ?? 'primary'"
+            (pressed)="confirm.settle(true)"
+          >
+            {{ popup.acceptLabel ?? text.accept }}
+          </star-button>
+        </div>
+      }
+    </star-popover>
+    <star-dialog
+      [role]="'alertdialog'"
+      size="sm"
+      [visible]="!!request"
+      [header]="request ? request.header : ''"
+      (visibleChange)="!$event && confirm.settle(false)"
+    >
+      @if (request) {
+        <div class="star-confirm">
+          @if (request.icon) {
+            <span class="star-confirm__icon" aria-hidden="true"
+              ><i [class]="request.icon"></i
+            ></span>
+          }
+          <p class="star-confirm__message">{{ request.message }}</p>
+        </div>
+      }
+      @if (request) {
+        <div starDialogFooter class="star-dialog__footer">
+          @if (request.rejectVisible !== false) {
+            <star-button
+              variant="ghost"
+              [attr.data-autofocus]="request.defaultFocus !== 'accept' ? '' : null"
+              (pressed)="confirm.settle(false)"
+            >
+              {{ request.rejectLabel ?? text.reject }}
+            </star-button>
+          }
+          <star-button
+            [variant]="request.acceptVariant ?? 'primary'"
+            [attr.data-autofocus]="request.defaultFocus === 'accept' ? '' : null"
+            (pressed)="confirm.settle(true)"
+          >
+            {{ request.acceptLabel ?? text.accept }}
+          </star-button>
+        </div>
+      }
+    </star-dialog>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: StarDialog,
+				selector: "star-dialog",
+				inputs: [
+					"visible",
+					"header",
+					"size",
+					"width",
+					"modal",
+					"closable",
+					"closeOnEscape",
+					"dismissableMask",
+					"showHeader",
+					"role",
+					"ariaLabel"
+				],
+				outputs: [
+					"visibleChange",
+					"shown",
+					"hidden"
+				]
+			},
+			{
+				kind: "component",
+				type: StarButton,
+				selector: "star-button",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading",
+					"leadingIcon",
+					"trailingIcon",
+					"iconOnly",
+					"fullWidth",
+					"ariaLabel"
+				],
+				outputs: ["pressed"]
+			},
+			{
+				kind: "component",
+				type: StarPopover,
+				selector: "star-popover",
+				inputs: [
+					"ariaLabel",
+					"focusOnShow",
+					"dismissable"
+				],
+				outputs: ["shown", "hidden"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarConfirmHost,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-confirm-host",
+			imports: [
+				StarDialog,
+				StarButton,
+				StarPopover
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @let request = dialogRequest();
+    @let popup = popupRequest();
+    <star-popover #popover [ariaLabel]="popup?.header ?? null" (hidden)="onPopupHidden()">
+      @if (popup) {
+        <div
+          class="star-confirm star-confirm--popup"
+          role="alertdialog"
+          [attr.aria-label]="popup.header"
+        >
+          @if (popup.icon) {
+            <span class="star-confirm__icon" aria-hidden="true"><i [class]="popup.icon"></i></span>
+          }
+          <p class="star-confirm__message">{{ popup.message }}</p>
+        </div>
+        <div class="star-confirm__actions">
+          @if (popup.rejectVisible !== false) {
+            <star-button size="sm" variant="ghost" (pressed)="confirm.settle(false)">
+              {{ popup.rejectLabel ?? text.reject }}
+            </star-button>
+          }
+          <star-button
+            size="sm"
+            [variant]="popup.acceptVariant ?? 'primary'"
+            (pressed)="confirm.settle(true)"
+          >
+            {{ popup.acceptLabel ?? text.accept }}
+          </star-button>
+        </div>
+      }
+    </star-popover>
+    <star-dialog
+      [role]="'alertdialog'"
+      size="sm"
+      [visible]="!!request"
+      [header]="request ? request.header : ''"
+      (visibleChange)="!$event && confirm.settle(false)"
+    >
+      @if (request) {
+        <div class="star-confirm">
+          @if (request.icon) {
+            <span class="star-confirm__icon" aria-hidden="true"
+              ><i [class]="request.icon"></i
+            ></span>
+          }
+          <p class="star-confirm__message">{{ request.message }}</p>
+        </div>
+      }
+      @if (request) {
+        <div starDialogFooter class="star-dialog__footer">
+          @if (request.rejectVisible !== false) {
+            <star-button
+              variant="ghost"
+              [attr.data-autofocus]="request.defaultFocus !== 'accept' ? '' : null"
+              (pressed)="confirm.settle(false)"
+            >
+              {{ request.rejectLabel ?? text.reject }}
+            </star-button>
+          }
+          <star-button
+            [variant]="request.acceptVariant ?? 'primary'"
+            [attr.data-autofocus]="request.defaultFocus === 'accept' ? '' : null"
+            (pressed)="confirm.settle(true)"
+          >
+            {{ request.acceptLabel ?? text.accept }}
+          </star-button>
+        </div>
+      }
+    </star-dialog>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { popover: [{
+		type: i0.ViewChild,
+		args: [i0.forwardRef(() => StarPopover), { isSignal: true }]
+	}] }
+});
+const STAR_DIALOG_DATA = new InjectionToken("STAR_DIALOG_DATA");
+var StarDialogRef = class {
+	hide;
+	resolve;
+	closed = new Promise((resolve) => this.resolve = resolve);
+	result;
+	done = false;
+	constructor(hide) {
+		this.hide = hide;
+	}
+	close(result) {
+		if (this.done) return;
+		this.result = result;
+		this.hide();
+	}
+	settle() {
+		if (this.done) return;
+		this.done = true;
+		this.resolve(this.result);
+	}
+};
+var StarDialogContainer = class StarDialogContainer {
+	component = input.required(...ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []);
+	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	contentInjector = input.required(...ngDevMode ? [{ debugName: "contentInjector" }] : /* istanbul ignore next */ []);
+	visible = signal(true, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	hidden = () => void 0;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDialogContainer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarDialogContainer,
+		isStandalone: true,
+		selector: "star-dialog-container",
+		inputs: {
+			component: {
+				classPropertyName: "component",
+				publicName: "component",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			contentInjector: {
+				classPropertyName: "contentInjector",
+				publicName: "contentInjector",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @let c = config();
+    <star-dialog
+      [(visible)]="visible"
+      [header]="c.header ?? ''"
+      [size]="c.size ?? 'md'"
+      [width]="c.width ?? null"
+      [closable]="c.closable ?? true"
+      [closeOnEscape]="c.closeOnEscape ?? true"
+      [dismissableMask]="c.dismissableMask ?? false"
+      [role]="c.role ?? 'dialog'"
+      [ariaLabel]="c.ariaLabel ?? null"
+      (hidden)="hidden()"
+    >
+      <ng-container *ngComponentOutlet="component(); injector: contentInjector()" />
+    </star-dialog>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: StarDialog,
+			selector: "star-dialog",
+			inputs: [
+				"visible",
+				"header",
+				"size",
+				"width",
+				"modal",
+				"closable",
+				"closeOnEscape",
+				"dismissableMask",
+				"showHeader",
+				"role",
+				"ariaLabel"
+			],
+			outputs: [
+				"visibleChange",
+				"shown",
+				"hidden"
+			]
+		}, {
+			kind: "directive",
+			type: NgComponentOutlet,
+			selector: "[ngComponentOutlet]",
+			inputs: [
+				"ngComponentOutlet",
+				"ngComponentOutletInputs",
+				"ngComponentOutletInjector",
+				"ngComponentOutletEnvironmentInjector",
+				"ngComponentOutletContent",
+				"ngComponentOutletNgModule"
+			],
+			exportAs: ["ngComponentOutlet"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDialogContainer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-dialog-container",
+			imports: [StarDialog, NgComponentOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @let c = config();
+    <star-dialog
+      [(visible)]="visible"
+      [header]="c.header ?? ''"
+      [size]="c.size ?? 'md'"
+      [width]="c.width ?? null"
+      [closable]="c.closable ?? true"
+      [closeOnEscape]="c.closeOnEscape ?? true"
+      [dismissableMask]="c.dismissableMask ?? false"
+      [role]="c.role ?? 'dialog'"
+      [ariaLabel]="c.ariaLabel ?? null"
+      (hidden)="hidden()"
+    >
+      <ng-container *ngComponentOutlet="component(); injector: contentInjector()" />
+    </star-dialog>
+  `
+		}]
+	}],
+	propDecorators: {
+		component: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "component",
+				required: true
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: true
+			}]
+		}],
+		contentInjector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentInjector",
+				required: true
+			}]
+		}]
+	}
+});
+var StarDialogService = class StarDialogService {
+	appRef = inject(ApplicationRef);
+	environment = inject(EnvironmentInjector);
+	openRefs = /* @__PURE__ */ new Set();
+	open(component, config = {}, injector = this.environment) {
+		let host = null;
+		const ref = new StarDialogRef(() => host?.instance.visible.set(false));
+		const contentInjector = Injector.create({
+			parent: injector,
+			providers: [{
+				provide: STAR_DIALOG_DATA,
+				useValue: config.data
+			}, {
+				provide: StarDialogRef,
+				useValue: ref
+			}]
+		});
+		host = createComponent(StarDialogContainer, { environmentInjector: this.environment });
+		host.setInput("component", component);
+		host.setInput("config", config);
+		host.setInput("contentInjector", contentInjector);
+		host.instance.hidden = () => {
+			ref.settle();
+			this.destroy(host);
+		};
+		document.body.appendChild(host.location.nativeElement);
+		this.appRef.attachView(host.hostView);
+		this.openRefs.add(host);
+		return ref;
+	}
+	closeAll() {
+		for (const host of this.openRefs) host.instance.visible.set(false);
+	}
+	destroy(host) {
+		if (!this.openRefs.delete(host)) return;
+		this.appRef.detachView(host.hostView);
+		host.destroy();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDialogService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDialogService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDialogService,
+	decorators: [{ type: Service }]
+});
+export { STAR_DIALOG_DATA, StarConfirmHost, StarConfirmService, StarDialog, StarDialogContainer, StarDialogRef, StarDialogService };
+
+//# sourceMappingURL=star-ng-ui-dialog.mjs.map