@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-modal.mjs

@@ -0,0 +1,329 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, ViewEncapsulation, computed, effect, inject, input, linkedSignal, output } from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+import { A11yModule } from "@angular/cdk/a11y";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { OverlayStackService } from "@lifecorner/angular-ui-kit/internal/overlay";
+var ModalComponent = class ModalComponent {
+	static nextId = 0;
+	open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	placement = input("center", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	closeOnBackdropClick = input(true, ...ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []);
+	closeOnEscape = input(true, ...ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []);
+	showCloseButton = input(true, ...ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ariaLabelledBy = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
+	ariaDescribedBy = input(...ngDevMode ? [void 0, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
+	closeAriaLabel = input("Close modal", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
+	modalOpened = output();
+	modalClosed = output();
+	openChange = output();
+	backdropClicked = output();
+	_open = linkedSignal(() => this.open(), ...ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []);
+	modalClasses = computed(() => {
+		return `lc-modal lc-modal--${this.size()} lc-modal--placement-${this.placement()}`;
+	}, ...ngDevMode ? [{ debugName: "modalClasses" }] : /* istanbul ignore next */ []);
+	overlayStack = inject(OverlayStackService);
+	modalId = `lc-modal-${++ModalComponent.nextId}`;
+	originalOverflow;
+	constructor() {
+		effect(() => {
+			if (this._open()) this.showModal();
+			else this.hideModal();
+		});
+	}
+	ngOnDestroy() {
+		this.hideModal();
+	}
+	openModal() {
+		this._open.set(true);
+		this.openChange.emit(true);
+		this.modalOpened.emit();
+	}
+	closeModal() {
+		this._open.set(false);
+		this.openChange.emit(false);
+		this.modalClosed.emit();
+	}
+	onBackdropClick(event) {
+		if (!this.overlayStack.claim(this.modalId, event)) return;
+		this.backdropClicked.emit(event);
+		if (this.closeOnBackdropClick()) this.closeModal();
+	}
+	onCloseClick(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.closeModal();
+	}
+	onDocumentKeydown(event) {
+		if (event.key !== "Escape" || !this._open()) return;
+		if (!this.overlayStack.claim(this.modalId, event)) return;
+		event.stopPropagation();
+		if (this.closeOnEscape()) this.closeModal();
+	}
+	showModal() {
+		this.overlayStack.push(this.modalId);
+		if (typeof document !== "undefined" && this.originalOverflow === void 0) {
+			this.originalOverflow = document.body.style.overflow;
+			document.body.style.overflow = "hidden";
+		}
+	}
+	hideModal() {
+		this.overlayStack.remove(this.modalId);
+		if (typeof document !== "undefined" && this.originalOverflow !== void 0) {
+			document.body.style.overflow = this.originalOverflow;
+			this.originalOverflow = void 0;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ModalComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ModalComponent,
+		isStandalone: true,
+		selector: "lc-modal",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnBackdropClick: {
+				classPropertyName: "closeOnBackdropClick",
+				publicName: "closeOnBackdropClick",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnEscape: {
+				classPropertyName: "closeOnEscape",
+				publicName: "closeOnEscape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaDescribedBy: {
+				classPropertyName: "ariaDescribedBy",
+				publicName: "ariaDescribedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeAriaLabel: {
+				classPropertyName: "closeAriaLabel",
+				publicName: "closeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			modalOpened: "modalOpened",
+			modalClosed: "modalClosed",
+			openChange: "openChange",
+			backdropClicked: "backdropClicked"
+		},
+		host: { listeners: { "document:keydown": "onDocumentKeydown($event)" } },
+		ngImport: i0,
+		template: "@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n",
+		styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);color:var(--color-text-primary);z-index:1000;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text-primary)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{flex-shrink:0;min-width:2.75rem;min-height:2.75rem;background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}.lc-modal--placement-sheet:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}@media(max-width:639.98px){.lc-modal--placement-auto:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}}@keyframes modalSheetIn{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}.lc-modal.lc-modal--placement-sheet,.lc-modal.lc-modal--placement-auto{animation:none}}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: A11yModule
+			},
+			{
+				kind: "directive",
+				type: i1.CdkTrapFocus,
+				selector: "[cdkTrapFocus]",
+				inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"],
+				exportAs: ["cdkTrapFocus"]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ModalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-modal",
+			standalone: true,
+			imports: [A11yModule, IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			template: "@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n",
+			styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);color:var(--color-text-primary);z-index:1000;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text-primary)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{flex-shrink:0;min-width:2.75rem;min-height:2.75rem;background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}.lc-modal--placement-sheet:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}@media(max-width:639.98px){.lc-modal--placement-auto:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}}@keyframes modalSheetIn{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}.lc-modal.lc-modal--placement-sheet,.lc-modal.lc-modal--placement-auto{animation:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		closeOnBackdropClick: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnBackdropClick",
+				required: false
+			}]
+		}],
+		closeOnEscape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnEscape",
+				required: false
+			}]
+		}],
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		ariaDescribedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaDescribedBy",
+				required: false
+			}]
+		}],
+		closeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeAriaLabel",
+				required: false
+			}]
+		}],
+		modalOpened: [{
+			type: i0.Output,
+			args: ["modalOpened"]
+		}],
+		modalClosed: [{
+			type: i0.Output,
+			args: ["modalClosed"]
+		}],
+		openChange: [{
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		backdropClicked: [{
+			type: i0.Output,
+			args: ["backdropClicked"]
+		}],
+		onDocumentKeydown: [{
+			type: HostListener,
+			args: ["document:keydown", ["$event"]]
+		}]
+	}
+});
+export { ModalComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-modal.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-modal.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/modal/modal.component.ts","../../../../libs/angular-ui-kit/src/lib/modal/modal.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  computed,\n  effect,\n  linkedSignal,\n  HostListener,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Where the dialog sits.\n * - `center`: centred on every screen (3.2)\n * - `auto`: a bottom sheet below 640 px viewport width (full width, top\n *   corners rounded, above the safe-area inset, in thumb reach), centred above\n * - `sheet`: a bottom sheet on every screen\n */\nexport type ModalPlacement = 'center' | 'auto' | 'sheet';\n\n/**\n * Modal dialog component for focused user interactions.\n *\n * Features:\n * - Size presets (sm, md, lg, xl, full)\n * - Placement: centred, or a bottom sheet on phones (`placement=\"auto\"`)\n * - Header and footer stay visible while the body scrolls; the close button\n *   is a 44 px target\n * - Focus trap for keyboard accessibility\n * - Backdrop click and Escape key to close\n * - Two-way open binding\n * - Header, body, and footer content slots\n * - Optional close button\n * - Accessible with ARIA dialog role\n *\n * @example\n * ```html\n * <lc-modal [(open)]=\"isOpen\" size=\"md\" [closeOnBackdropClick]=\"true\">\n *   <div slot=\"header\"><h2>Title</h2></div>\n *   <div slot=\"body\">Content</div>\n *   <div slot=\"footer\"><lc-button (click)=\"close()\">Close</lc-button></div>\n * </lc-modal>\n * ```\n */\n@Component({\n  selector: 'lc-modal',\n  standalone: true,\n  imports: [A11yModule, IconComponent],\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None, // Required for dynamic size class styling\n})\nexport class ModalComponent implements OnDestroy {\n  private static nextId = 0;\n\n  /**\n   * Whether the modal is open (input from parent)\n   * @default false\n   */\n  open = input<boolean>(false);\n\n  /**\n   * Modal size\n   * @default 'md'\n   */\n  size = input<ModalSize>('md');\n\n  /**\n   * Where the dialog sits: `center` (3.2), `auto` — a bottom sheet below\n   * 640 px viewport width and centred above — or `sheet` (always a bottom\n   * sheet). The sheet spans the width, rounds its top corners, keeps clear of\n   * `env(safe-area-inset-bottom)` and is at most 90 % of the dynamic viewport\n   * high; header and footer stay visible while the body scrolls. `full`\n   * size ignores it.\n   * @default 'center'\n   */\n  placement = input<ModalPlacement>('center');\n\n  /**\n   * Whether clicking backdrop closes modal\n   * @default true\n   */\n  closeOnBackdropClick = input<boolean>(true);\n\n  /**\n   * Whether pressing Escape closes modal\n   * @default true\n   */\n  closeOnEscape = input<boolean>(true);\n\n  /**\n   * Whether to show close button in header\n   * @default true\n   */\n  showCloseButton = input<boolean>(true);\n\n  /**\n   * ARIA label for accessibility\n   */\n  ariaLabel = input<string>();\n\n  /**\n   * ARIA labelledby ID\n   */\n  ariaLabelledBy = input<string>();\n\n  /**\n   * ARIA describedby ID\n   */\n  ariaDescribedBy = input<string>();\n\n  /** Accessible name of the close button (`showCloseButton`). */\n  closeAriaLabel = input('Close modal');\n\n  /**\n   * Emitted when modal opens\n   */\n  readonly modalOpened = output<void>();\n\n  /**\n   * Emitted when modal closes\n   */\n  readonly modalClosed = output<void>();\n\n  /**\n   * Two-way binding for open state\n   */\n  readonly openChange = output<boolean>();\n\n  /**\n   * Emitted when backdrop is clicked\n   */\n  readonly backdropClicked = output<MouseEvent>();\n\n  /**\n   * Internal open state (protected for AOT); follows the `open` input and is\n   * also set by the programmatic open/close methods.\n   */\n  protected _open = linkedSignal(() => this.open());\n\n  /**\n   * Computed modal classes\n   */\n  protected modalClasses = computed(() => {\n    return `lc-modal lc-modal--${this.size()} lc-modal--placement-${this.placement()}`;\n  });\n\n  private readonly overlayStack = inject(OverlayStackService);\n  /** Identifies this instance in the overlay stack. */\n  private readonly modalId = `lc-modal-${++ModalComponent.nextId}`;\n  private originalOverflow?: string;\n\n  constructor() {\n    // Watch for open state changes\n    effect(() => {\n      if (this._open()) {\n        this.showModal();\n      } else {\n        this.hideModal();\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.hideModal();\n  }\n\n  /**\n   * Open the modal programmatically\n   */\n  openModal(): void {\n    this._open.set(true);\n    this.openChange.emit(true);\n    this.modalOpened.emit();\n  }\n\n  /**\n   * Close the modal programmatically\n   */\n  closeModal(): void {\n    this._open.set(false);\n    this.openChange.emit(false);\n    this.modalClosed.emit();\n  }\n\n  /**\n   * Handle backdrop click. Ignored while another overlay (popover, menu,\n   * confirm dialog, …) sits above this modal — the click belongs to that layer.\n   */\n  protected onBackdropClick(event: MouseEvent): void {\n    if (!this.overlayStack.claim(this.modalId, event)) return;\n    this.backdropClicked.emit(event);\n    if (this.closeOnBackdropClick()) {\n      this.closeModal();\n    }\n  }\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeModal();\n  }\n\n  /**\n   * Escape closes the modal only while it is the top-most overlay; the event\n   * is consumed either way so overlays underneath stay open.\n   */\n  @HostListener('document:keydown', ['$event'])\n  protected onDocumentKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this._open()) return;\n    if (!this.overlayStack.claim(this.modalId, event)) return;\n    event.stopPropagation();\n    if (this.closeOnEscape()) {\n      this.closeModal();\n    }\n  }\n\n  /**\n   * Show the modal. Focus is moved inside and restored on close by the\n   * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`.\n   */\n  private showModal(): void {\n    this.overlayStack.push(this.modalId);\n\n    // Lock body scroll\n    if (typeof document !== 'undefined' && this.originalOverflow === undefined) {\n      this.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  /**\n   * Hide the modal\n   */\n  private hideModal(): void {\n    this.overlayStack.remove(this.modalId);\n\n    // Restore body scroll\n    if (typeof document !== 'undefined' && this.originalOverflow !== undefined) {\n      document.body.style.overflow = this.originalOverflow;\n      this.originalOverflow = undefined;\n    }\n  }\n}\n","@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n"],"mappings":"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"}