@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-sheet.mjs

@@ -0,0 +1,411 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, effect, input, signal } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { RaqmButton } from "@raqm/ui/button";
+import * as i1 from "@raqm/ui/dialog";
+import { RAQM_DIALOG, RAQM_DIALOG_POLICY, RaqmDialogBaseComponent, RaqmDialogCloseDirective, RaqmDialogContentDirective, RaqmDialogDescriptionDirective, RaqmDialogTitleDirective, RaqmDialogTriggerDirective } from "@raqm/ui/dialog";
+var RaqmSheetComponent = class RaqmSheetComponent extends RaqmDialogBaseComponent {
+	side = input("right", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	showCloseButton = input(true, {
+		...ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeLabel = input(void 0, ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	closeButtonVisible = this.showCloseButton;
+	closeLabelText = this.closeLabel;
+	constructor() {
+		super();
+		effect(() => this.policy?.side?.set(this.side()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmSheetComponent,
+		isStandalone: true,
+		selector: "raqm-sheet",
+		inputs: {
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: RAQM_DIALOG,
+			useExisting: RaqmSheetComponent
+		}, {
+			provide: RAQM_DIALOG_POLICY,
+			useFactory: () => ({
+				role: "dialog",
+				contentClass: "raqm-sheet-content",
+				touchOpening: signal(false),
+				dismissOnBackdrop: true,
+				side: signal("right"),
+				paneClass: "raqm-sheet-overlay-pane",
+				backdropClass: "raqm-sheet-overlay-backdrop",
+				exitAnimationMs: 200
+			})
+		}],
+		exportAs: ["raqmSheet"],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 4);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 4);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;top:calc(var(--raqm-spacing) * 2);inset-inline-end:calc(var(--raqm-spacing) * 2)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-dialog-content.raqm-sheet-content{position:absolute;display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 4);padding:0;border:0 solid var(--raqm-border);border-radius:0;max-inline-size:none;max-block-size:100%;background-clip:padding-box;box-shadow:var(--raqm-shadow-lg);pointer-events:auto;--raqm-sheet-enter-x: 0px;--raqm-sheet-enter-y: 0px}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-block:0;block-size:100%;inline-size:75%}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right]{inset-inline-end:0;border-inline-start-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-inline-start:0;border-inline-end-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=right]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=left]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-inline:0;inline-size:100%;block-size:auto}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top]{inset-block-start:0;border-block-end-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-block-end:0;border-block-start-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--entering{animation:raqm-sheet-in var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--closing{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y));transition:opacity var(--raqm-duration-slow) var(--raqm-ease-in-out),transform var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 3);inset-inline-end:calc(var(--raqm-spacing) * 3)}@media(min-width:40rem){.raqm-sheet-content[data-raqm-side=right],.raqm-sheet-content[data-raqm-side=left]{max-inline-size:calc(var(--raqm-spacing) * 96)}}@keyframes raqm-sheet-in{0%{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-dialog-content.raqm-sheet-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-dialog-content.raqm-sheet-content{border-color:CanvasText}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: RaqmButton,
+			selector: "button[raqm-button], a[raqm-button]",
+			inputs: [
+				"raqm-button",
+				"extra-small",
+				"small",
+				"large",
+				"icon",
+				"icon-extra-small",
+				"icon-small",
+				"icon-large",
+				"disabled",
+				"tabindex"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-sheet",
+			imports: [NgTemplateOutlet, RaqmButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			exportAs: "raqmSheet",
+			providers: [{
+				provide: RAQM_DIALOG,
+				useExisting: RaqmSheetComponent
+			}, {
+				provide: RAQM_DIALOG_POLICY,
+				useFactory: () => ({
+					role: "dialog",
+					contentClass: "raqm-sheet-content",
+					touchOpening: signal(false),
+					dismissOnBackdrop: true,
+					side: signal("right"),
+					paneClass: "raqm-sheet-overlay-pane",
+					backdropClass: "raqm-sheet-overlay-backdrop",
+					exitAnimationMs: 200
+				})
+			}],
+			template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 4);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 4);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;top:calc(var(--raqm-spacing) * 2);inset-inline-end:calc(var(--raqm-spacing) * 2)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-dialog-content.raqm-sheet-content{position:absolute;display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 4);padding:0;border:0 solid var(--raqm-border);border-radius:0;max-inline-size:none;max-block-size:100%;background-clip:padding-box;box-shadow:var(--raqm-shadow-lg);pointer-events:auto;--raqm-sheet-enter-x: 0px;--raqm-sheet-enter-y: 0px}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-block:0;block-size:100%;inline-size:75%}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right]{inset-inline-end:0;border-inline-start-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-inline-start:0;border-inline-end-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=right]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=left]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-inline:0;inline-size:100%;block-size:auto}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top]{inset-block-start:0;border-block-end-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-block-end:0;border-block-start-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--entering{animation:raqm-sheet-in var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--closing{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y));transition:opacity var(--raqm-duration-slow) var(--raqm-ease-in-out),transform var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 3);inset-inline-end:calc(var(--raqm-spacing) * 3)}@media(min-width:40rem){.raqm-sheet-content[data-raqm-side=right],.raqm-sheet-content[data-raqm-side=left]{max-inline-size:calc(var(--raqm-spacing) * 96)}}@keyframes raqm-sheet-in{0%{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-dialog-content.raqm-sheet-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-dialog-content.raqm-sheet-content{border-color:CanvasText}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmSheetTriggerDirective = class RaqmSheetTriggerDirective extends RaqmDialogTriggerDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetTriggerDirective,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSheetTriggerDirective,
+		isStandalone: true,
+		selector: "button[raqm-sheet-trigger]",
+		host: { classAttribute: "raqm-sheet-trigger" },
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-sheet-trigger]",
+			host: { class: "raqm-sheet-trigger" }
+		}]
+	}]
+});
+var RaqmSheetCloseDirective = class RaqmSheetCloseDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetCloseDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSheetCloseDirective,
+		isStandalone: true,
+		selector: "button[raqm-sheet-close]",
+		host: { classAttribute: "raqm-sheet-close-control" },
+		hostDirectives: [{ directive: i1.RaqmDialogCloseDirective }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetCloseDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-sheet-close]",
+			hostDirectives: [RaqmDialogCloseDirective],
+			host: { class: "raqm-sheet-close-control" }
+		}]
+	}]
+});
+var RaqmSheetContentDirective = class RaqmSheetContentDirective extends RaqmDialogContentDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetContentDirective,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSheetContentDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-sheet-content]",
+		exportAs: ["raqmSheetContent"],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[raqm-sheet-content]",
+			exportAs: "raqmSheetContent"
+		}]
+	}]
+});
+var RaqmSheetHeaderDirective = class RaqmSheetHeaderDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetHeaderDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSheetHeaderDirective,
+		isStandalone: true,
+		selector: "[raqm-sheet-header]",
+		host: { classAttribute: "raqm-sheet-header" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sheet-header]",
+			host: { class: "raqm-sheet-header" }
+		}]
+	}]
+});
+var RaqmSheetFooterDirective = class RaqmSheetFooterDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetFooterDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSheetFooterDirective,
+		isStandalone: true,
+		selector: "[raqm-sheet-footer]",
+		host: { classAttribute: "raqm-sheet-footer" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sheet-footer]",
+			host: { class: "raqm-sheet-footer" }
+		}]
+	}]
+});
+var RaqmSheetTitleDirective = class RaqmSheetTitleDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSheetTitleDirective,
+		isStandalone: true,
+		selector: "[raqm-sheet-title]",
+		host: { classAttribute: "raqm-sheet-title" },
+		hostDirectives: [{ directive: i1.RaqmDialogTitleDirective }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sheet-title]",
+			hostDirectives: [RaqmDialogTitleDirective],
+			host: { class: "raqm-sheet-title" }
+		}]
+	}]
+});
+var RaqmSheetDescriptionDirective = class RaqmSheetDescriptionDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSheetDescriptionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSheetDescriptionDirective,
+		isStandalone: true,
+		selector: "[raqm-sheet-description]",
+		host: { classAttribute: "raqm-sheet-description" },
+		hostDirectives: [{ directive: i1.RaqmDialogDescriptionDirective }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSheetDescriptionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sheet-description]",
+			hostDirectives: [RaqmDialogDescriptionDirective],
+			host: { class: "raqm-sheet-description" }
+		}]
+	}]
+});
+const RaqmSheet = [
+	RaqmSheetComponent,
+	RaqmSheetTriggerDirective,
+	RaqmSheetCloseDirective,
+	RaqmSheetContentDirective,
+	RaqmSheetHeaderDirective,
+	RaqmSheetFooterDirective,
+	RaqmSheetTitleDirective,
+	RaqmSheetDescriptionDirective
+];
+export { RaqmSheet, RaqmSheetCloseDirective, RaqmSheetComponent, RaqmSheetContentDirective, RaqmSheetDescriptionDirective, RaqmSheetFooterDirective, RaqmSheetHeaderDirective, RaqmSheetTitleDirective, RaqmSheetTriggerDirective };
+
+//# sourceMappingURL=raqm-ui-sheet.mjs.map

package/fesm2022/raqm-ui-sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-sheet.mjs","names":[],"sources":["../../../projects/ui/sheet/sheet.component.ts","../../../projects/ui/dialog/dialog.component.html","../../../projects/ui/sheet/sheet.directive.ts","../../../projects/ui/sheet/public-api.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  effect,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { RaqmButton } from '@raqm/ui/button';\r\nimport {\r\n  RaqmDialogBaseComponent,\r\n  RAQM_DIALOG,\r\n  RAQM_DIALOG_POLICY,\r\n  RaqmDialogPolicy,\r\n} from '@raqm/ui/dialog';\r\n\r\n/** Edge modal sharing Dialog's stack, focus trap, scroll lock and teardown. */\r\n@Component({\r\n  selector: 'raqm-sheet',\r\n  imports: [NgTemplateOutlet, RaqmButton],\r\n  templateUrl: '../dialog/dialog.component.html',\r\n  styleUrls: ['../dialog/dialog.component.scss', './sheet.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  exportAs: 'raqmSheet',\r\n  providers: [\r\n    { provide: RAQM_DIALOG, useExisting: RaqmSheetComponent },\r\n    {\r\n      provide: RAQM_DIALOG_POLICY,\r\n      useFactory: (): RaqmDialogPolicy => ({\r\n        role: 'dialog',\r\n        contentClass: 'raqm-sheet-content',\r\n        touchOpening: signal(false),\r\n        dismissOnBackdrop: true,\r\n        side: signal('right'),\r\n        paneClass: 'raqm-sheet-overlay-pane',\r\n        backdropClass: 'raqm-sheet-overlay-backdrop',\r\n        exitAnimationMs: 200,\r\n      }),\r\n    },\r\n  ],\r\n})\r\nexport class RaqmSheetComponent extends RaqmDialogBaseComponent {\r\n  /** The edge the sheet is attached to; right/left are logical in RTL. */\r\n  readonly side = input<'top' | 'right' | 'bottom' | 'left'>('right');\r\n\r\n  readonly showCloseButton = input(true, { transform: booleanAttribute });\r\n\r\n  readonly closeLabel = input<string | undefined>(undefined);\r\n\r\n  protected readonly closeButtonVisible = this.showCloseButton;\r\n  protected readonly closeLabelText = this.closeLabel;\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => this.policy?.side?.set(this.side()));\r\n  }\r\n}\r\n","<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n","import { Directive } from '@angular/core';\r\nimport {\r\n  RaqmDialogCloseDirective,\r\n  RaqmDialogContentDirective,\r\n  RaqmDialogDescriptionDirective,\r\n  RaqmDialogTitleDirective,\r\n  RaqmDialogTriggerDirective,\r\n} from '@raqm/ui/dialog';\r\n\r\n/** Native opener reusing Dialog registration and disclosure ARIA; compose raqm-button. */\r\n@Directive({\r\n  selector: 'button[raqm-sheet-trigger]',\r\n  host: { class: 'raqm-sheet-trigger' },\r\n})\r\nexport class RaqmSheetTriggerDirective extends RaqmDialogTriggerDirective {}\r\n\r\n/** Native close control using Dialog's single animated user-close path. */\r\n@Directive({\r\n  selector: 'button[raqm-sheet-close]',\r\n  hostDirectives: [RaqmDialogCloseDirective],\r\n  host: { class: 'raqm-sheet-close-control' },\r\n})\r\nexport class RaqmSheetCloseDirective {}\r\n\r\n/** Portal body template; the root owns edge placement and the close control. */\r\n@Directive({\r\n  selector: 'ng-template[raqm-sheet-content]',\r\n  exportAs: 'raqmSheetContent',\r\n})\r\nexport class RaqmSheetContentDirective extends RaqmDialogContentDirective {}\r\n\r\n/** Passive header, stacking the title and description. */\r\n@Directive({\r\n  selector: '[raqm-sheet-header]',\r\n  host: { class: 'raqm-sheet-header' },\r\n})\r\nexport class RaqmSheetHeaderDirective {}\r\n\r\n/** Passive action footer, pushed to the end of the Sheet surface. */\r\n@Directive({\r\n  selector: '[raqm-sheet-footer]',\r\n  host: { class: 'raqm-sheet-footer' },\r\n})\r\nexport class RaqmSheetFooterDirective {}\r\n\r\n/** Accessible title registered with the real modal container. */\r\n@Directive({\r\n  selector: '[raqm-sheet-title]',\r\n  hostDirectives: [RaqmDialogTitleDirective],\r\n  host: { class: 'raqm-sheet-title' },\r\n})\r\nexport class RaqmSheetTitleDirective {}\r\n\r\n/** Accessible description registered with the real modal container. */\r\n@Directive({\r\n  selector: '[raqm-sheet-description]',\r\n  hostDirectives: [RaqmDialogDescriptionDirective],\r\n  host: { class: 'raqm-sheet-description' },\r\n})\r\nexport class RaqmSheetDescriptionDirective {}\r\n","// Public API for `@raqm/ui/sheet`; the root entry point re-exports these symbols.\r\nimport { RaqmSheetComponent } from './sheet.component';\r\nimport {\r\n  RaqmSheetCloseDirective,\r\n  RaqmSheetContentDirective,\r\n  RaqmSheetDescriptionDirective,\r\n  RaqmSheetFooterDirective,\r\n  RaqmSheetHeaderDirective,\r\n  RaqmSheetTitleDirective,\r\n  RaqmSheetTriggerDirective,\r\n} from './sheet.directive';\r\n\r\nexport {\r\n  RaqmSheetComponent,\r\n  RaqmSheetTriggerDirective,\r\n  RaqmSheetCloseDirective,\r\n  RaqmSheetContentDirective,\r\n  RaqmSheetHeaderDirective,\r\n  RaqmSheetFooterDirective,\r\n  RaqmSheetTitleDirective,\r\n  RaqmSheetDescriptionDirective,\r\n};\r\n\r\nexport const RaqmSheet = [\r\n  RaqmSheetComponent,\r\n  RaqmSheetTriggerDirective,\r\n  RaqmSheetCloseDirective,\r\n  RaqmSheetContentDirective,\r\n  RaqmSheetHeaderDirective,\r\n  RaqmSheetFooterDirective,\r\n  RaqmSheetTitleDirective,\r\n  RaqmSheetDescriptionDirective,\r\n] as const;\r\n"],"mappings":"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"}