@compsych-ui-components/angular 7.0.31 → 7.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/dialog/dialog-container.js +11 -0
- package/esm2022/lib/dialog/dialog-container.js.map +1 -1
- package/esm2022/lib/dialog/dialog.js +1 -1
- package/esm2022/lib/dialog/dialog.js.map +1 -1
- package/esm2022/lib/dialog/dialog.service.js +1 -1
- package/esm2022/lib/dialog/dialog.service.js.map +1 -1
- package/lib/dialog/dialog-container.d.ts +6 -2
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, InjectionToken, inject } from '@angular/core';
|
|
2
|
+
import { DOCUMENT } from '@angular/common';
|
|
2
3
|
import { CdkDialogContainer, DialogConfig, DialogRef } from '@angular/cdk/dialog';
|
|
3
4
|
import { CdkPortalOutlet } from '@angular/cdk/portal';
|
|
4
5
|
import { DialogSurfaceComponent } from './dialog-surface';
|
|
@@ -26,6 +27,16 @@ export class CmpDialogContainer extends CdkDialogContainer {
|
|
|
26
27
|
dialogRef = inject(DialogRef);
|
|
27
28
|
/** Chrome params supplied by `DialogService` via the container `providers`. */
|
|
28
29
|
chrome = inject(CMP_DIALOG_CHROME);
|
|
30
|
+
document = inject(DOCUMENT);
|
|
31
|
+
_previousOverflowY = '';
|
|
32
|
+
ngOnInit() {
|
|
33
|
+
this._previousOverflowY = this.document.documentElement.style.overflowY;
|
|
34
|
+
this.document.documentElement.style.overflowY = 'hidden';
|
|
35
|
+
}
|
|
36
|
+
ngOnDestroy() {
|
|
37
|
+
this.document.documentElement.style.overflowY = this._previousOverflowY;
|
|
38
|
+
super.ngOnDestroy();
|
|
39
|
+
}
|
|
29
40
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CmpDialogContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
30
41
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: CmpDialogContainer, isStandalone: true, selector: "cmp-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.role": "config.role", "attr.aria-modal": "config.ariaModal", "id": "config.id", "attr.aria-labelledby": "config.ariaLabel ? null : config.ariaLabelledBy", "attr.aria-label": "config.ariaLabel", "attr.aria-describedby": "config.ariaDescribedBy" }, classAttribute: "cmp-dialog-container" }, usesInheritance: true, ngImport: i0, template: `
|
|
31
42
|
<cmp-dialog-surface
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-container.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"dialog-container.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,cAAc,EAAU,MAAM,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;;AAiB1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,cAAc,CAAe,mBAAmB,CAAC,CAAC;AAEvF;;;;;;;;;GASG;AAkCH,MAAM,OAAO,kBAAmB,SAAQ,kBAAkB;IACxD,oGAAoG;IACjF,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACjD,4FAA4F;IACzE,SAAS,GAAG,MAAM,CAA8B,SAAS,CAAC,CAAC;IAC9E,+EAA+E;IAC5D,MAAM,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAErC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,kBAAkB,GAAG,EAAE,CAAC;IAEhC,QAAQ;QACN,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC;QACxE,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC3D,CAAC;IAEQ,WAAW;QAClB,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACxE,KAAK,CAAC,WAAW,EAAE,CAAC;IACtB,CAAC;wGAnBU,kBAAkB;4FAAlB,kBAAkB,scA5BnB;;;;;;;;;;;;;;;;GAgBT,4DAjBS,sBAAsB,uNAAE,eAAe;;4FA6BtC,kBAAkB;kBAjC9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,EAAE,eAAe,CAAC;oBAClD,QAAQ,EAAE;;;;;;;;;;;;;;;;GAgBT;oBACD,IAAI,EAAE;wBACJ,KAAK,EAAE,sBAAsB;wBAC7B,QAAQ,EAAE,IAAI;wBACd,aAAa,EAAE,aAAa;wBAC5B,mBAAmB,EAAE,kBAAkB;wBACvC,MAAM,EAAE,WAAW;wBACnB,wBAAwB,EAAE,iDAAiD;wBAC3E,mBAAmB,EAAE,kBAAkB;wBACvC,yBAAyB,EAAE,wBAAwB;qBACpD;iBACF","sourcesContent":["import { ChangeDetectionStrategy, Component, InjectionToken, OnInit, inject } from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { CdkDialogContainer, DialogConfig, DialogRef } from '@angular/cdk/dialog';\r\nimport { CdkPortalOutlet } from '@angular/cdk/portal';\r\nimport { DialogSurfaceComponent } from './dialog-surface';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** Chrome params supplied by `DialogService` to the container via {@link CMP_DIALOG_CHROME}. */\r\nexport interface DialogChrome {\r\n variant: DialogVariant;\r\n title: string;\r\n description: string;\r\n icon: string;\r\n dismissible: boolean;\r\n closeLabel: string;\r\n width: string;\r\n showActions: boolean;\r\n titleId: string;\r\n descId: string;\r\n}\r\n\r\n/**\r\n * Chrome params injected into `CmpDialogContainer`. Provided via the CDK `container` object\r\n * form (`{ type, providers }`) rather than spread onto the `DialogConfig` — that avoids\r\n * clobbering real config fields (e.g. `width`, which CDK also maps onto the overlay pane).\r\n */\r\nexport const CMP_DIALOG_CHROME = new InjectionToken<DialogChrome>('CMP_DIALOG_CHROME');\r\n\r\n/**\r\n * Container used by `DialogService` via CDK `Dialog.open(content, { container })`. Extends\r\n * the CDK dialog container (focus trap, focus capture/restore, portal outlet) and renders the\r\n * shared dialog surface around the attached content. The opened content is attached into the\r\n * surface's body via the `cdkPortalOutlet`; chrome params (title/variant/etc.) ride on the\r\n * `DialogConfig`. Internal — not part of the public API.\r\n *\r\n * Host aria bindings are redeclared here (component host metadata is not inherited) and read\r\n * from the injected `DialogConfig`, matching `CdkDialogContainer`'s own bindings.\r\n */\r\n@Component({\r\n selector: 'cmp-dialog-container',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [DialogSurfaceComponent, CdkPortalOutlet],\r\n template: `\r\n <cmp-dialog-surface\r\n [variant]=\"chrome.variant\"\r\n [width]=\"chrome.width\"\r\n [title]=\"chrome.title\"\r\n [description]=\"chrome.description\"\r\n [icon]=\"chrome.icon\"\r\n [dismissible]=\"chrome.dismissible\"\r\n [closeLabel]=\"chrome.closeLabel\"\r\n [showActions]=\"chrome.showActions\"\r\n [titleId]=\"chrome.titleId\"\r\n [descId]=\"chrome.descId\"\r\n (closeClick)=\"dialogRef.close()\"\r\n >\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </cmp-dialog-surface>\r\n `,\r\n host: {\r\n class: 'cmp-dialog-container',\r\n tabindex: '-1',\r\n '[attr.role]': 'config.role',\r\n '[attr.aria-modal]': 'config.ariaModal',\r\n '[id]': 'config.id',\r\n '[attr.aria-labelledby]': 'config.ariaLabel ? null : config.ariaLabelledBy',\r\n '[attr.aria-label]': 'config.ariaLabel',\r\n '[attr.aria-describedby]': 'config.ariaDescribedBy',\r\n },\r\n})\r\nexport class CmpDialogContainer extends CdkDialogContainer implements OnInit {\r\n /** The dialog config (provided by CDK to the container injector); drives the aria host bindings. */\r\n protected readonly config = inject(DialogConfig);\r\n /** Ref for the open dialog (provided by CDK to the container injector); closes on the ✕. */\r\n protected readonly dialogRef = inject<DialogRef<unknown, unknown>>(DialogRef);\r\n /** Chrome params supplied by `DialogService` via the container `providers`. */\r\n protected readonly chrome = inject(CMP_DIALOG_CHROME);\r\n\r\n private readonly document = inject(DOCUMENT);\r\n private _previousOverflowY = '';\r\n\r\n ngOnInit() {\r\n this._previousOverflowY = this.document.documentElement.style.overflowY;\r\n this.document.documentElement.style.overflowY = 'hidden';\r\n }\r\n\r\n override ngOnDestroy() {\r\n this.document.documentElement.style.overflowY = this._previousOverflowY;\r\n super.ngOnDestroy();\r\n }\r\n}\r\n"]}
|
|
@@ -118,7 +118,7 @@ export class DialogComponent {
|
|
|
118
118
|
backdropClass: 'cmp-dialog-scrim',
|
|
119
119
|
panelClass: 'cmp-dialog-pane',
|
|
120
120
|
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
|
|
121
|
-
scrollStrategy: this.overlay.scrollStrategies.
|
|
121
|
+
scrollStrategy: this.overlay.scrollStrategies.noop(),
|
|
122
122
|
// Forward the local reading direction so a body-portaled overlay mirrors correctly
|
|
123
123
|
// even when only a subtree (not the document) is RTL.
|
|
124
124
|
direction: this.directionality.value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.ts","../../../../../../packages/angular/src/lib/dialog/dialog.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n OnDestroy,\r\n TemplateRef,\r\n ViewChild,\r\n ViewContainerRef,\r\n effect,\r\n inject,\r\n input,\r\n isDevMode,\r\n model,\r\n output,\r\n} from '@angular/core';\r\nimport { Dialog, DialogRef } from '@angular/cdk/dialog';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\nimport { nextDialogIds } from './dialog-id';\r\nimport { DialogSurfaceComponent } from './dialog-surface';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** How a dialog was closed — surfaced by the `closed` output. */\r\nexport type DialogCloseReason = 'programmatic' | 'backdrop' | 'escape' | 'close-button';\r\n\r\n/**\r\n * A themeable modal dialog built on `@angular/cdk/dialog` (centered, scrimmed, focus-trapped).\r\n *\r\n * Figma: Core Components — \"Dialog\" organism (file VFBn7KCDy3FSIlvhNo3ylq, 873:9194).\r\n *\r\n * One component, switched by `variant`:\r\n * - `modal-leading-icon` — leading icon + title header, projected body, split footer.\r\n * - `modal-centered-icon` — centered icon badge, centered title + description, split footer.\r\n * - `alert` — compact title + description, right-aligned footer.\r\n *\r\n * Open state is a two-way `[(open)]` model wrapped around the CDK `Dialog` service. The\r\n * CDK dialog container provides `role=\"dialog\"`, `aria-modal`, the focus trap, initial\r\n * focus (`autoFocus: 'dialog'`) and focus restoration. The dialog closes on Escape /\r\n * backdrop click (when `dismissible`); those are handled here so `closed` can report a\r\n * reason. Title/description come from inputs; project the body as default content and each\r\n * action button with the `cmpDialogActions` attribute (the footer lays them out — split\r\n * full-width for modals, right-aligned for alerts).\r\n *\r\n * <compsych-dialog [(open)]=\"showDialog\" variant=\"modal-leading-icon\"\r\n * icon=\"globe\" title=\"Update your details\">\r\n * <p>Body content…</p>\r\n * <compsych-button cmpDialogActions variant=\"outlined\" fullWidth label=\"Cancel\" (click)=\"showDialog = false\" />\r\n * <compsych-button cmpDialogActions variant=\"filled\" fullWidth label=\"Save\" (click)=\"save()\" />\r\n * </compsych-dialog>\r\n *\r\n * Consumers must load `@angular/cdk/overlay-prebuilt.css` (overlay positioning) and the\r\n * `@compsych-ui-components/shared` design tokens globally. The scrim color is injected by\r\n * the dialog itself — no extra stylesheet import is needed.\r\n */\r\n@Component({\r\n selector: 'compsych-dialog',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [DialogSurfaceComponent],\r\n templateUrl: './dialog.html',\r\n styleUrl: './dialog.css',\r\n host: { class: 'cmp-dialog-host' },\r\n})\r\nexport class DialogComponent implements OnDestroy {\r\n /** Two-way open state. Set to `true` to show the dialog, `false` to close it. */\r\n readonly open = model<boolean>(false);\r\n /** Layout type. Defaults to `modal-leading-icon`. */\r\n readonly variant = input<DialogVariant>('modal-leading-icon');\r\n /**\r\n * Optional width override — any CSS length (e.g. `'1000px'`). Defaults to the variant\r\n * width (800px modal / 600px alert). Always clamped to the viewport on small screens.\r\n */\r\n readonly width = input<string>('');\r\n /** Heading text. Also drives the accessible name via `aria-labelledby`. */\r\n readonly title = input<string>('');\r\n /** Supporting text under the title (rendered for `centered` and `alert` variants). */\r\n readonly description = input<string>('');\r\n /** Lucide icon name — the leading header icon (`leading`) or centered badge glyph (`centered`). */\r\n readonly icon = input<string>('');\r\n /**\r\n * When true (default) the dialog shows a close button and closes on Escape / backdrop click.\r\n * When false, the dialog is a forced choice — provide a focusable action (e.g. a\r\n * `[cmpDialogActions]` button) so keyboard users can dismiss it (WCAG 2.1.2, no keyboard trap).\r\n */\r\n readonly dismissible = input<boolean>(true);\r\n /** Accessible label for the close button. */\r\n readonly closeLabel = input<string>('Close dialog');\r\n /** Accessible name used when no `title` is provided (e.g. a fully custom body). */\r\n readonly ariaLabel = input<string>('');\r\n /** Renders the action footer. Set false to hide it when there are no actions. */\r\n readonly showActions = input<boolean>(true);\r\n\r\n /** Emits after the dialog has been opened and shown. */\r\n readonly opened = output<void>();\r\n /** Emits after the dialog has closed, with the reason it closed. */\r\n readonly closed = output<DialogCloseReason>();\r\n\r\n /** The dialog surface template, projected into the CDK dialog container when open. */\r\n @ViewChild('panel', { static: true }) private panelTemplate!: TemplateRef<unknown>;\r\n\r\n private readonly dialog = inject(Dialog);\r\n private readonly overlay = inject(Overlay);\r\n private readonly directionality = inject(Directionality);\r\n private readonly viewContainerRef = inject(ViewContainerRef);\r\n\r\n private dialogRef?: DialogRef<unknown, unknown>;\r\n private closeReason: DialogCloseReason = 'programmatic';\r\n\r\n private readonly _ids = nextDialogIds();\r\n protected readonly titleId = this._ids.titleId;\r\n protected readonly descId = this._ids.descId;\r\n\r\n constructor() {\r\n // Reflect the open model onto the CDK dialog lifecycle.\r\n effect(() => {\r\n if (this.open() && !this.dialogRef) {\r\n this.attach();\r\n } else if (!this.open() && this.dialogRef) {\r\n this.detach();\r\n }\r\n });\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.dialogRef?.close();\r\n }\r\n\r\n /** Close request from the close button. */\r\n protected requestClose(): void {\r\n this.closeWith('close-button');\r\n }\r\n\r\n private closeWith(reason: DialogCloseReason): void {\r\n if (!this.open()) {\r\n return;\r\n }\r\n this.closeReason = reason;\r\n this.open.set(false);\r\n }\r\n\r\n private attach(): void {\r\n this.closeReason = 'programmatic';\r\n\r\n // Dev-only guardrail: a dialog with no title and no ariaLabel has no accessible\r\n // name (WCAG 2.2 §4.1.2). Stripped from production builds by isDevMode().\r\n if (isDevMode() && !this.title() && !this.ariaLabel()) {\r\n console.warn(\r\n '[compsych-dialog] Opened with no accessible name — set `title` or `ariaLabel` ' +\r\n 'so assistive technology can identify the dialog (WCAG 2.2 §4.1.2).',\r\n );\r\n }\r\n\r\n const ref = this.dialog.open(this.panelTemplate, {\r\n viewContainerRef: this.viewContainerRef,\r\n hasBackdrop: true,\r\n // Scrim color is injected by the dialog surface itself; positioning/fade come from\r\n // @angular/cdk/overlay-prebuilt.css (which consumers load).\r\n backdropClass: 'cmp-dialog-scrim',\r\n panelClass: 'cmp-dialog-pane',\r\n positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\r\n scrollStrategy: this.overlay.scrollStrategies.block(),\r\n // Forward the local reading direction so a body-portaled overlay mirrors correctly\r\n // even when only a subtree (not the document) is RTL.\r\n direction: this.directionality.value,\r\n // The `alert` variant is a decision/confirmation dialog → assertive alertdialog role.\r\n role: this.variant() === 'alert' ? 'alertdialog' : 'dialog',\r\n // We handle Escape / backdrop ourselves so `closed` can report a reason.\r\n disableClose: true,\r\n // Focus the dialog container on open (screen reader announces it; first Tab then\r\n // lands on the close button with its visible ring) and restore focus on close.\r\n autoFocus: 'dialog',\r\n restoreFocus: true,\r\n ariaModal: true,\r\n ariaLabelledBy: this.title() ? this.titleId : null,\r\n ariaDescribedBy:\r\n this.variant() !== 'modal-leading-icon' && this.description() ? this.descId : null,\r\n // Accessible name for the no-title custom-body case (CDK nulls aria-labelledby when set).\r\n ariaLabel: !this.title() ? this.ariaLabel() || null : null,\r\n });\r\n this.dialogRef = ref;\r\n\r\n ref.backdropClick.subscribe(() => {\r\n if (this.dismissible()) {\r\n this.closeWith('backdrop');\r\n }\r\n });\r\n ref.keydownEvents.subscribe((event) => {\r\n if (event.key === 'Escape' && this.dismissible()) {\r\n event.preventDefault();\r\n this.closeWith('escape');\r\n }\r\n });\r\n ref.closed.subscribe(() => {\r\n this.dialogRef = undefined;\r\n const reason = this.closeReason;\r\n this.closeReason = 'programmatic';\r\n // Keep the model in sync if the dialog was torn down by CDK rather than the model.\r\n if (this.open()) {\r\n this.open.set(false);\r\n }\r\n this.closed.emit(reason);\r\n });\r\n\r\n this.opened.emit();\r\n }\r\n\r\n private detach(): void {\r\n // Triggers `ref.closed`, which clears state, restores focus, and emits `closed`.\r\n this.dialogRef?.close();\r\n }\r\n}\r\n","<ng-template #panel>\r\n <cmp-dialog-surface\r\n [variant]=\"variant()\"\r\n [width]=\"width()\"\r\n [title]=\"title()\"\r\n [description]=\"description()\"\r\n [icon]=\"icon()\"\r\n [dismissible]=\"dismissible()\"\r\n [closeLabel]=\"closeLabel()\"\r\n [showActions]=\"showActions()\"\r\n [titleId]=\"titleId\"\r\n [descId]=\"descId\"\r\n (closeClick)=\"requestClose()\"\r\n >\r\n <ng-content />\r\n <ng-content select=\"[cmpDialogActions]\" ngProjectAs=\"[cmpDialogActions]\" />\r\n </cmp-dialog-surface>\r\n</ng-template>\r\n"]}
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.ts","../../../../../../packages/angular/src/lib/dialog/dialog.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n OnDestroy,\r\n TemplateRef,\r\n ViewChild,\r\n ViewContainerRef,\r\n effect,\r\n inject,\r\n input,\r\n isDevMode,\r\n model,\r\n output,\r\n} from '@angular/core';\r\nimport { Dialog, DialogRef } from '@angular/cdk/dialog';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\nimport { nextDialogIds } from './dialog-id';\r\nimport { DialogSurfaceComponent } from './dialog-surface';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** How a dialog was closed — surfaced by the `closed` output. */\r\nexport type DialogCloseReason = 'programmatic' | 'backdrop' | 'escape' | 'close-button';\r\n\r\n/**\r\n * A themeable modal dialog built on `@angular/cdk/dialog` (centered, scrimmed, focus-trapped).\r\n *\r\n * Figma: Core Components — \"Dialog\" organism (file VFBn7KCDy3FSIlvhNo3ylq, 873:9194).\r\n *\r\n * One component, switched by `variant`:\r\n * - `modal-leading-icon` — leading icon + title header, projected body, split footer.\r\n * - `modal-centered-icon` — centered icon badge, centered title + description, split footer.\r\n * - `alert` — compact title + description, right-aligned footer.\r\n *\r\n * Open state is a two-way `[(open)]` model wrapped around the CDK `Dialog` service. The\r\n * CDK dialog container provides `role=\"dialog\"`, `aria-modal`, the focus trap, initial\r\n * focus (`autoFocus: 'dialog'`) and focus restoration. The dialog closes on Escape /\r\n * backdrop click (when `dismissible`); those are handled here so `closed` can report a\r\n * reason. Title/description come from inputs; project the body as default content and each\r\n * action button with the `cmpDialogActions` attribute (the footer lays them out — split\r\n * full-width for modals, right-aligned for alerts).\r\n *\r\n * <compsych-dialog [(open)]=\"showDialog\" variant=\"modal-leading-icon\"\r\n * icon=\"globe\" title=\"Update your details\">\r\n * <p>Body content…</p>\r\n * <compsych-button cmpDialogActions variant=\"outlined\" fullWidth label=\"Cancel\" (click)=\"showDialog = false\" />\r\n * <compsych-button cmpDialogActions variant=\"filled\" fullWidth label=\"Save\" (click)=\"save()\" />\r\n * </compsych-dialog>\r\n *\r\n * Consumers must load `@angular/cdk/overlay-prebuilt.css` (overlay positioning) and the\r\n * `@compsych-ui-components/shared` design tokens globally. The scrim color is injected by\r\n * the dialog itself — no extra stylesheet import is needed.\r\n */\r\n@Component({\r\n selector: 'compsych-dialog',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [DialogSurfaceComponent],\r\n templateUrl: './dialog.html',\r\n styleUrl: './dialog.css',\r\n host: { class: 'cmp-dialog-host' },\r\n})\r\nexport class DialogComponent implements OnDestroy {\r\n /** Two-way open state. Set to `true` to show the dialog, `false` to close it. */\r\n readonly open = model<boolean>(false);\r\n /** Layout type. Defaults to `modal-leading-icon`. */\r\n readonly variant = input<DialogVariant>('modal-leading-icon');\r\n /**\r\n * Optional width override — any CSS length (e.g. `'1000px'`). Defaults to the variant\r\n * width (800px modal / 600px alert). Always clamped to the viewport on small screens.\r\n */\r\n readonly width = input<string>('');\r\n /** Heading text. Also drives the accessible name via `aria-labelledby`. */\r\n readonly title = input<string>('');\r\n /** Supporting text under the title (rendered for `centered` and `alert` variants). */\r\n readonly description = input<string>('');\r\n /** Lucide icon name — the leading header icon (`leading`) or centered badge glyph (`centered`). */\r\n readonly icon = input<string>('');\r\n /**\r\n * When true (default) the dialog shows a close button and closes on Escape / backdrop click.\r\n * When false, the dialog is a forced choice — provide a focusable action (e.g. a\r\n * `[cmpDialogActions]` button) so keyboard users can dismiss it (WCAG 2.1.2, no keyboard trap).\r\n */\r\n readonly dismissible = input<boolean>(true);\r\n /** Accessible label for the close button. */\r\n readonly closeLabel = input<string>('Close dialog');\r\n /** Accessible name used when no `title` is provided (e.g. a fully custom body). */\r\n readonly ariaLabel = input<string>('');\r\n /** Renders the action footer. Set false to hide it when there are no actions. */\r\n readonly showActions = input<boolean>(true);\r\n\r\n /** Emits after the dialog has been opened and shown. */\r\n readonly opened = output<void>();\r\n /** Emits after the dialog has closed, with the reason it closed. */\r\n readonly closed = output<DialogCloseReason>();\r\n\r\n /** The dialog surface template, projected into the CDK dialog container when open. */\r\n @ViewChild('panel', { static: true }) private panelTemplate!: TemplateRef<unknown>;\r\n\r\n private readonly dialog = inject(Dialog);\r\n private readonly overlay = inject(Overlay);\r\n private readonly directionality = inject(Directionality);\r\n private readonly viewContainerRef = inject(ViewContainerRef);\r\n\r\n private dialogRef?: DialogRef<unknown, unknown>;\r\n private closeReason: DialogCloseReason = 'programmatic';\r\n\r\n private readonly _ids = nextDialogIds();\r\n protected readonly titleId = this._ids.titleId;\r\n protected readonly descId = this._ids.descId;\r\n\r\n constructor() {\r\n // Reflect the open model onto the CDK dialog lifecycle.\r\n effect(() => {\r\n if (this.open() && !this.dialogRef) {\r\n this.attach();\r\n } else if (!this.open() && this.dialogRef) {\r\n this.detach();\r\n }\r\n });\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.dialogRef?.close();\r\n }\r\n\r\n /** Close request from the close button. */\r\n protected requestClose(): void {\r\n this.closeWith('close-button');\r\n }\r\n\r\n private closeWith(reason: DialogCloseReason): void {\r\n if (!this.open()) {\r\n return;\r\n }\r\n this.closeReason = reason;\r\n this.open.set(false);\r\n }\r\n\r\n private attach(): void {\r\n this.closeReason = 'programmatic';\r\n\r\n // Dev-only guardrail: a dialog with no title and no ariaLabel has no accessible\r\n // name (WCAG 2.2 §4.1.2). Stripped from production builds by isDevMode().\r\n if (isDevMode() && !this.title() && !this.ariaLabel()) {\r\n console.warn(\r\n '[compsych-dialog] Opened with no accessible name — set `title` or `ariaLabel` ' +\r\n 'so assistive technology can identify the dialog (WCAG 2.2 §4.1.2).',\r\n );\r\n }\r\n\r\n const ref = this.dialog.open(this.panelTemplate, {\r\n viewContainerRef: this.viewContainerRef,\r\n hasBackdrop: true,\r\n // Scrim color is injected by the dialog surface itself; positioning/fade come from\r\n // @angular/cdk/overlay-prebuilt.css (which consumers load).\r\n backdropClass: 'cmp-dialog-scrim',\r\n panelClass: 'cmp-dialog-pane',\r\n positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\r\n scrollStrategy: this.overlay.scrollStrategies.noop(),\r\n // Forward the local reading direction so a body-portaled overlay mirrors correctly\r\n // even when only a subtree (not the document) is RTL.\r\n direction: this.directionality.value,\r\n // The `alert` variant is a decision/confirmation dialog → assertive alertdialog role.\r\n role: this.variant() === 'alert' ? 'alertdialog' : 'dialog',\r\n // We handle Escape / backdrop ourselves so `closed` can report a reason.\r\n disableClose: true,\r\n // Focus the dialog container on open (screen reader announces it; first Tab then\r\n // lands on the close button with its visible ring) and restore focus on close.\r\n autoFocus: 'dialog',\r\n restoreFocus: true,\r\n ariaModal: true,\r\n ariaLabelledBy: this.title() ? this.titleId : null,\r\n ariaDescribedBy:\r\n this.variant() !== 'modal-leading-icon' && this.description() ? this.descId : null,\r\n // Accessible name for the no-title custom-body case (CDK nulls aria-labelledby when set).\r\n ariaLabel: !this.title() ? this.ariaLabel() || null : null,\r\n });\r\n this.dialogRef = ref;\r\n\r\n ref.backdropClick.subscribe(() => {\r\n if (this.dismissible()) {\r\n this.closeWith('backdrop');\r\n }\r\n });\r\n ref.keydownEvents.subscribe((event) => {\r\n if (event.key === 'Escape' && this.dismissible()) {\r\n event.preventDefault();\r\n this.closeWith('escape');\r\n }\r\n });\r\n ref.closed.subscribe(() => {\r\n this.dialogRef = undefined;\r\n const reason = this.closeReason;\r\n this.closeReason = 'programmatic';\r\n // Keep the model in sync if the dialog was torn down by CDK rather than the model.\r\n if (this.open()) {\r\n this.open.set(false);\r\n }\r\n this.closed.emit(reason);\r\n });\r\n\r\n this.opened.emit();\r\n }\r\n\r\n private detach(): void {\r\n // Triggers `ref.closed`, which clears state, restores focus, and emits `closed`.\r\n this.dialogRef?.close();\r\n }\r\n}\r\n","<ng-template #panel>\r\n <cmp-dialog-surface\r\n [variant]=\"variant()\"\r\n [width]=\"width()\"\r\n [title]=\"title()\"\r\n [description]=\"description()\"\r\n [icon]=\"icon()\"\r\n [dismissible]=\"dismissible()\"\r\n [closeLabel]=\"closeLabel()\"\r\n [showActions]=\"showActions()\"\r\n [titleId]=\"titleId\"\r\n [descId]=\"descId\"\r\n (closeClick)=\"requestClose()\"\r\n >\r\n <ng-content />\r\n <ng-content select=\"[cmpDialogActions]\" ngProjectAs=\"[cmpDialogActions]\" />\r\n </cmp-dialog-surface>\r\n</ng-template>\r\n"]}
|
|
@@ -60,7 +60,7 @@ export class DialogService {
|
|
|
60
60
|
backdropClass: 'cmp-dialog-scrim',
|
|
61
61
|
panelClass: config.panelClass ?? 'cmp-dialog-pane',
|
|
62
62
|
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
|
|
63
|
-
scrollStrategy: this.overlay.scrollStrategies.
|
|
63
|
+
scrollStrategy: this.overlay.scrollStrategies.noop(),
|
|
64
64
|
direction: this.directionality.value,
|
|
65
65
|
role: chrome.variant === 'alert' ? 'alertdialog' : 'dialog',
|
|
66
66
|
// dismissible → CDK closes on Escape / backdrop; non-dismissible → forced choice.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.service.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,MAAM,EAA2B,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAgB,MAAM,oBAAoB,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;AA6BjD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,OAAO,aAAa;IACP,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC1B,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEzD,+FAA+F;IAC/F,IAAI,CACF,OAAiC,EACjC,SAAkC,EAAE;QAEpC,sFAAsF;QACtF,6DAA6D;QAC7D,IAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YACtD,OAAO,CAAC,IAAI,CACV,mFAAmF;gBACjF,mFAAmF,CACtF,CAAC;QACJ,CAAC;QAED,MAAM,GAAG,GAAG,aAAa,EAAE,CAAC;QAC5B,MAAM,MAAM,GAAiB;YAC3B,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,oBAAoB;YAC/C,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE;YACzB,WAAW,EAAE,MAAM,CAAC,WAAW,IAAI,EAAE;YACrC,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,EAAE;YACvB,WAAW,EAAE,MAAM,CAAC,WAAW,IAAI,IAAI;YACvC,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,cAAc;YAC/C,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE;YACzB,WAAW,EAAE,MAAM,CAAC,WAAW,IAAI,IAAI;YACvC,OAAO,EAAE,GAAG,CAAC,OAAO;YACpB,MAAM,EAAE,GAAG,CAAC,MAAM;SACnB,CAAC;QAEF,IAAI,GAAqC,CAAC;QAC1C,MAAM,SAAS,GAAG;YAChB,+EAA+E;YAC/E,yDAAyD;YACzD,SAAS,EAAE;gBACT,IAAI,EAAE,kBAAkB;gBACxB,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;aACpE;YACD,WAAW,EAAE,IAAI;YACjB,aAAa,EAAE,kBAAkB;YACjC,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,iBAAiB;YAClD,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,EAAE;YAC1F,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,
|
|
1
|
+
{"version":3,"file":"dialog.service.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, TemplateRef, Type, inject, isDevMode } from '@angular/core';\r\nimport { Dialog, DialogConfig, DialogRef } from '@angular/cdk/dialog';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\nimport { CMP_DIALOG_CHROME, CmpDialogContainer, DialogChrome } from './dialog-container';\r\nimport { nextDialogIds } from './dialog-id';\r\nimport { CompsychDialogRef } from './dialog-ref';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** Configuration for {@link DialogService.open}. */\r\nexport interface CompsychDialogConfig<D = unknown> {\r\n /** Layout type. Defaults to `modal-leading-icon`. */\r\n variant?: DialogVariant;\r\n /** Heading text (drives the accessible name via `aria-labelledby`). */\r\n title?: string;\r\n /** Supporting text (rendered for `centered` / `alert` variants). */\r\n description?: string;\r\n /** Lucide icon name (leading header icon / centered badge glyph). */\r\n icon?: string;\r\n /** When true (default) shows a close button and closes on Escape / backdrop click. */\r\n dismissible?: boolean;\r\n /** Accessible label for the close button. */\r\n closeLabel?: string;\r\n /** Accessible name used when no `title` is provided. */\r\n ariaLabel?: string;\r\n /** Width override — any CSS length. Defaults to the variant width, viewport-clamped. */\r\n width?: string;\r\n /** Whether to render the projected actions footer. */\r\n showActions?: boolean;\r\n /** Data injected into the opened component via the CDK `DIALOG_DATA` token. */\r\n data?: D;\r\n /** Extra class(es) for the overlay pane. */\r\n panelClass?: string | string[];\r\n}\r\n\r\n/**\r\n * Opens a component or template as a modal dialog inside the compsych-dialog chrome,\r\n * imperatively (like Angular Material's `MatDialog`). Built on `@angular/cdk/dialog`.\r\n *\r\n * The opened content is placed in the dialog body; the header (icon/title/close) and\r\n * behavior come from the config. The opened component can inject the CDK `DialogRef`\r\n * (to close, optionally with a result) and `DIALOG_DATA` (to read `config.data`) — both\r\n * re-exported from `@compsych-ui-components/angular`.\r\n *\r\n * const ref = dialogService.open(MyComponent, {\r\n * title: 'Edit details', variant: 'modal-leading-icon', icon: 'globe', data: { id },\r\n * });\r\n * ref.closed.subscribe((result) => { ... });\r\n *\r\n * Requires `@angular/cdk/overlay-prebuilt.css` + the `@compsych-ui-components/shared` tokens\r\n * loaded globally. The scrim color is injected by the dialog — no extra stylesheet needed.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class DialogService {\r\n private readonly dialog = inject(Dialog);\r\n private readonly overlay = inject(Overlay);\r\n private readonly directionality = inject(Directionality);\r\n\r\n /** Opens `content` as a modal dialog. Returns a {@link CompsychDialogRef} (close / closed). */\r\n open<R = unknown, D = unknown, C = unknown>(\r\n content: Type<C> | TemplateRef<C>,\r\n config: CompsychDialogConfig<D> = {},\r\n ): CompsychDialogRef<R> {\r\n // Dev-only guardrail (parity with the declarative component): no title + no ariaLabel\r\n // means the dialog has no accessible name (WCAG 2.2 §4.1.2).\r\n if (isDevMode() && !config.title && !config.ariaLabel) {\r\n console.warn(\r\n '[compsych-dialog] Opened via DialogService with no accessible name — set `title` ' +\r\n 'or `ariaLabel` so assistive technology can identify the dialog (WCAG 2.2 §4.1.2).',\r\n );\r\n }\r\n\r\n const ids = nextDialogIds();\r\n const chrome: DialogChrome = {\r\n variant: config.variant ?? 'modal-leading-icon',\r\n title: config.title ?? '',\r\n description: config.description ?? '',\r\n icon: config.icon ?? '',\r\n dismissible: config.dismissible ?? true,\r\n closeLabel: config.closeLabel ?? 'Close dialog',\r\n width: config.width ?? '',\r\n showActions: config.showActions ?? true,\r\n titleId: ids.titleId,\r\n descId: ids.descId,\r\n };\r\n\r\n let ref: CompsychDialogRef<R> | undefined;\r\n const cdkConfig = {\r\n // Object form so chrome params reach the container via DI (not spread onto the\r\n // config, which would clobber real fields like `width`).\r\n container: {\r\n type: CmpDialogContainer,\r\n providers: () => [{ provide: CMP_DIALOG_CHROME, useValue: chrome }],\r\n },\r\n hasBackdrop: true,\r\n backdropClass: 'cmp-dialog-scrim',\r\n panelClass: config.panelClass ?? 'cmp-dialog-pane',\r\n positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\r\n scrollStrategy: this.overlay.scrollStrategies.noop(),\r\n direction: this.directionality.value,\r\n role: chrome.variant === 'alert' ? ('alertdialog' as const) : ('dialog' as const),\r\n // dismissible → CDK closes on Escape / backdrop; non-dismissible → forced choice.\r\n disableClose: !chrome.dismissible,\r\n autoFocus: 'dialog',\r\n restoreFocus: true,\r\n ariaModal: true,\r\n ariaLabelledBy: chrome.title ? chrome.titleId : null,\r\n ariaDescribedBy:\r\n chrome.variant !== 'modal-leading-icon' && chrome.description ? chrome.descId : null,\r\n ariaLabel: !chrome.title ? config.ariaLabel || null : null,\r\n data: config.data,\r\n // Wrap the CDK ref (async-safe `closed`) and expose it to the opened content via DI,\r\n // so the content can inject `CompsychDialogRef` to close with a result.\r\n providers: (cdkRef: DialogRef<R, C>) => {\r\n ref = new CompsychDialogRef<R>(cdkRef as DialogRef<R, unknown>);\r\n return [{ provide: CompsychDialogRef, useValue: ref }];\r\n },\r\n } as DialogConfig<D, DialogRef<R, C>>;\r\n\r\n const cdkRef = this.dialog.open<R, D, C>(content, cdkConfig);\r\n // `providers` runs synchronously during open(), so `ref` is set; fall back defensively.\r\n return ref ?? new CompsychDialogRef<R>(cdkRef as DialogRef<R, unknown>);\r\n }\r\n}\r\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InjectionToken } from '@angular/core';
|
|
1
|
+
import { InjectionToken, OnInit } from '@angular/core';
|
|
2
2
|
import { CdkDialogContainer, DialogConfig, DialogRef } from '@angular/cdk/dialog';
|
|
3
3
|
import { DialogVariant } from './dialog-types';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -31,13 +31,17 @@ export declare const CMP_DIALOG_CHROME: InjectionToken<DialogChrome>;
|
|
|
31
31
|
* Host aria bindings are redeclared here (component host metadata is not inherited) and read
|
|
32
32
|
* from the injected `DialogConfig`, matching `CdkDialogContainer`'s own bindings.
|
|
33
33
|
*/
|
|
34
|
-
export declare class CmpDialogContainer extends CdkDialogContainer {
|
|
34
|
+
export declare class CmpDialogContainer extends CdkDialogContainer implements OnInit {
|
|
35
35
|
/** The dialog config (provided by CDK to the container injector); drives the aria host bindings. */
|
|
36
36
|
protected readonly config: DialogConfig<unknown, unknown, import("@angular/cdk/dialog").DialogContainer>;
|
|
37
37
|
/** Ref for the open dialog (provided by CDK to the container injector); closes on the ✕. */
|
|
38
38
|
protected readonly dialogRef: DialogRef<unknown, unknown>;
|
|
39
39
|
/** Chrome params supplied by `DialogService` via the container `providers`. */
|
|
40
40
|
protected readonly chrome: DialogChrome;
|
|
41
|
+
private readonly document;
|
|
42
|
+
private _previousOverflowY;
|
|
43
|
+
ngOnInit(): void;
|
|
44
|
+
ngOnDestroy(): void;
|
|
41
45
|
static ɵfac: i0.ɵɵFactoryDeclaration<CmpDialogContainer, never>;
|
|
42
46
|
static ɵcmp: i0.ɵɵComponentDeclaration<CmpDialogContainer, "cmp-dialog-container", never, {}, {}, never, never, true, never>;
|
|
43
47
|
}
|