@ojiepermana/angular-component 22.0.46 → 22.0.47

package/dialog/README.md

@@ -128,6 +128,24 @@ Use `[showCloseButton]="false"` without an internal close action when Escape and
 </Dialog>
 ```
 
+### Backdrop appearance
+
+The area outside the surface is dimmed by default (`backdrop="dim"`), using the shared
+`--overlay-backdrop` theme token so it recolors with the active theme and light/dark mode. Switch
+to a frosted overlay with `backdrop="blur"`, or disable dimming entirely with
+`backdrop="transparent"` when the dialog should float over a fully visible page.
+
+```html
+<!-- Dimmed (default) -->
+<Dialog [(open)]="open">…</Dialog>
+
+<!-- Frosted blur behind the surface -->
+<Dialog [(open)]="open" backdrop="blur">…</Dialog>
+
+<!-- No dimming; page stays fully visible -->
+<Dialog [(open)]="open" backdrop="transparent">…</Dialog>
+```
+
 ### Sticky footer for long content
 
 Move the scroll region into `DialogContent` and keep the footer outside that overflow container so primary actions remain visible.
@@ -177,16 +195,17 @@ Wrap the trigger and dialog in a `dir="rtl"` container or set direction globally
 
 ### `DialogComponent`
 
-| Input                  | Type             | Default   |
-| ---------------------- | ---------------- | --------- |
-| `open` (model)         | `boolean`        | `false`   |
-| `closeOnEscape`        | `boolean`        | `true`    |
-| `closeOnBackdropClick` | `boolean`        | `true`    |
-| `showCloseButton`      | `boolean`        | `true`    |
-| `closeButtonLabel`     | `string`         | `'Close'` |
-| `aria-labelledby`      | `string \| null` | `null`    |
-| `aria-describedby`     | `string \| null` | `null`    |
-| `class`                | `string`         | `''`      |
+| Input                  | Type                                  | Default   |
+| ---------------------- | ------------------------------------- | --------- |
+| `open` (model)         | `boolean`                             | `false`   |
+| `closeOnEscape`        | `boolean`                             | `true`    |
+| `closeOnBackdropClick` | `boolean`                             | `true`    |
+| `backdrop`             | `'dim' \| 'blur' \| 'transparent'`    | `'dim'`   |
+| `showCloseButton`      | `boolean`                             | `true`    |
+| `closeButtonLabel`     | `string`                              | `'Close'` |
+| `aria-labelledby`      | `string \| null`                      | `null`    |
+| `aria-describedby`     | `string \| null`                      | `null`    |
+| `class`                | `string`                              | `''`      |
 
 Output: `openedChange: boolean`. Method: `close()`.
 

package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs

@@ -24,6 +24,9 @@ class AlertDialogComponent {
     ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
     closeOnBackdropClick = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
+    backdrop = input('dim', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
     showCloseButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
     closeButtonLabel = input('Close', /* @ts-ignore */
@@ -83,12 +86,13 @@ class AlertDialogComponent {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, ngImport: i0, template: `
     <Dialog
       [(open)]="open"
       [role]="role()"
       [closeOnEscape]="closeOnEscape()"
       [closeOnBackdropClick]="closeOnBackdropClick()"
+      [backdrop]="backdrop()"
       [showCloseButton]="showCloseButton()"
       [closeButtonLabel]="closeButtonLabel()"
       [aria-labelledby]="resolvedLabelledBy()"
@@ -100,7 +104,7 @@ class AlertDialogComponent {
     >
       <ng-content />
     </Dialog>
-  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "role", "class", "radius", "density"], outputs: ["openChange", "openedChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "backdrop", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "role", "class", "radius", "density"], outputs: ["openChange", "openedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogComponent, decorators: [{
             type: Component,
@@ -120,6 +124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [role]="role()"
       [closeOnEscape]="closeOnEscape()"
       [closeOnBackdropClick]="closeOnBackdropClick()"
+      [backdrop]="backdrop()"
       [showCloseButton]="showCloseButton()"
       [closeButtonLabel]="closeButtonLabel()"
       [aria-labelledby]="resolvedLabelledBy()"
@@ -133,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </Dialog>
   `,
                 }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
 
 const ALERT_DIALOG_MEDIA_SIZE_CLASSES = {
     default: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5',

package/fesm2022/ojiepermana-angular-component-dialog.mjs

@@ -38,6 +38,9 @@ class DialogComponent {
     ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
     closeOnBackdropClick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
+    backdrop = input('dim', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
     showCloseButton = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
     closeButtonLabel = input('Close', /* @ts-ignore */
@@ -94,6 +97,17 @@ class DialogComponent {
     ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
     densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
+    /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
+    backdropClass = computed(() => {
+        const classes = ['dialog-backdrop'];
+        const kind = this.backdrop();
+        if (kind === 'blur')
+            classes.push('dialog-backdrop-blur');
+        else if (kind === 'transparent')
+            classes.push('dialog-backdrop-transparent');
+        return classes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
     constructor() {
         this.destroyRef.onDestroy(() => this.detach(false));
         effect(() => {
@@ -106,7 +120,7 @@ class DialogComponent {
         this.previousFocus = this.doc.activeElement;
         this.overlayRef = this.overlay.create({
             hasBackdrop: true,
-            backdropClass: 'dialog-backdrop',
+            backdropClass: this.backdropClass(),
             panelClass: 'dialog-panel',
             scrollStrategy: this.overlay.scrollStrategies.block(),
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
@@ -150,7 +164,7 @@ class DialogComponent {
         this.requestClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
@@ -217,7 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 
 class DialogCloseDirective {
     dialog = inject(DialogComponent);

package/fesm2022/ojiepermana-angular-component-sheet.mjs

@@ -45,6 +45,9 @@ class SheetComponent {
     ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
     closeOnBackdropClick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
+    backdrop = input('dim', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
     showCloseButton = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
     closeButtonLabel = input('Close', /* @ts-ignore */
@@ -85,6 +88,17 @@ class SheetComponent {
     ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
     densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
+    /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
+    backdropClass = computed(() => {
+        const classes = ['dialog-backdrop'];
+        const kind = this.backdrop();
+        if (kind === 'blur')
+            classes.push('dialog-backdrop-blur');
+        else if (kind === 'transparent')
+            classes.push('dialog-backdrop-transparent');
+        return classes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
     constructor() {
         this.destroyRef.onDestroy(() => this.detach(false));
         effect(() => {
@@ -97,7 +111,7 @@ class SheetComponent {
         this.previousFocus = this.doc.activeElement;
         this.overlayRef = this.overlay.create({
             hasBackdrop: true,
-            backdropClass: 'dialog-backdrop',
+            backdropClass: this.backdropClass(),
             panelClass: 'sheet-panel',
             scrollStrategy: this.overlay.scrollStrategies.block(),
             positionStrategy: this.overlay.position().global(),
@@ -167,7 +181,7 @@ class SheetComponent {
         return this.host.nativeElement.localName === 'drawer';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
@@ -235,7 +249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       </div>
     </ng-template>
   `, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 
 class SheetCloseDirective {
     sheet = inject(SheetComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-component",
-  "version": "22.0.46",
+  "version": "22.0.47",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"

package/types/ojiepermana-angular-component-alert-dialog.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { DialogBackdrop } from '@ojiepermana/angular-component/dialog';
 import { ButtonVariant, ButtonSize } from '@ojiepermana/angular-component/button';
 
 type AlertDialogSize = 'default' | 'sm';
@@ -16,6 +17,8 @@ declare class AlertDialogComponent {
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly closeOnEscape: _angular_core.InputSignal<boolean>;
     readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
+    readonly backdrop: _angular_core.InputSignal<DialogBackdrop>;
     readonly showCloseButton: _angular_core.InputSignal<boolean>;
     readonly closeButtonLabel: _angular_core.InputSignal<string>;
     readonly labelledBy: _angular_core.InputSignal<string | null>;
@@ -46,7 +49,7 @@ declare class AlertDialogComponent {
     unregisterDescriptionId(id: string): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class AlertDialogContentComponent {

package/types/ojiepermana-angular-component-command.d.ts

@@ -85,7 +85,7 @@ declare class CommandItemComponent {
     readonly value: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly class: _angular_core.InputSignal<string>;
-    readonly selected: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
+    readonly selected: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
     readonly active: _angular_core.WritableSignal<boolean>;
     readonly visible: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;

package/types/ojiepermana-angular-component-dialog.d.ts

@@ -1,5 +1,14 @@
 import * as _angular_core from '@angular/core';
 
+/**
+ * Backdrop appearance for the area outside the dialog surface.
+ *
+ * - `'dim'`: dark, semi-transparent overlay (default) driven by the
+ *   `--overlay-backdrop` theme token, so it recolors with theme/mode.
+ * - `'blur'`: the dim overlay plus a frosted `backdrop-filter` blur.
+ * - `'transparent'`: no dimming; the page behind stays fully visible.
+ */
+type DialogBackdrop = 'dim' | 'blur' | 'transparent';
 /**
  * Declarative modal dialog. Renders into the body via CDK overlay when
  * `open` becomes `true`. Focus is trapped inside; restored to trigger on close.
@@ -26,6 +35,8 @@ declare class DialogComponent {
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly closeOnEscape: _angular_core.InputSignal<boolean>;
     readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
+    readonly backdrop: _angular_core.InputSignal<DialogBackdrop>;
     readonly showCloseButton: _angular_core.InputSignal<boolean>;
     readonly closeButtonLabel: _angular_core.InputSignal<string>;
     readonly labelledBy: _angular_core.InputSignal<string | null>;
@@ -57,13 +68,15 @@ declare class DialogComponent {
     protected readonly surfaceClasses: _angular_core.Signal<string>;
     protected readonly radiusBase: _angular_core.Signal<string | null>;
     protected readonly densityBase: _angular_core.Signal<string | null>;
+    /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
+    private readonly backdropClass;
     constructor();
     private attach;
     private detach;
     private requestClose;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class DialogCloseDirective {
@@ -119,3 +132,4 @@ declare class DialogFooterComponent {
 }
 
 export { DialogCloseDirective, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent };
+export type { DialogBackdrop };

package/types/ojiepermana-angular-component-sheet.d.ts

@@ -8,6 +8,15 @@ declare class SheetCloseDirective {
 }
 
 type SheetSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Backdrop appearance for the area outside the sheet/drawer surface.
+ *
+ * - `'dim'`: dark, semi-transparent overlay (default) driven by the
+ *   `--overlay-backdrop` theme token, so it recolors with theme/mode.
+ * - `'blur'`: the dim overlay plus a frosted `backdrop-filter` blur.
+ * - `'transparent'`: no dimming; the page behind stays fully visible.
+ */
+type SheetBackdrop = 'dim' | 'blur' | 'transparent';
 declare class SheetComponent {
     private readonly overlay;
     private readonly vcr;
@@ -21,6 +30,8 @@ declare class SheetComponent {
     readonly variant: _angular_core.InputSignal<"sheet" | "drawer" | null>;
     readonly closeOnEscape: _angular_core.InputSignal<boolean>;
     readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
+    readonly backdrop: _angular_core.InputSignal<SheetBackdrop>;
     readonly showCloseButton: _angular_core.InputSignal<boolean>;
     readonly closeButtonLabel: _angular_core.InputSignal<string>;
     readonly labelledBy: _angular_core.InputSignal<string | null>;
@@ -46,6 +57,8 @@ declare class SheetComponent {
     protected readonly enterFrom: _angular_core.Signal<string>;
     protected readonly radiusBase: _angular_core.Signal<string | null>;
     protected readonly densityBase: _angular_core.Signal<string | null>;
+    /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
+    private readonly backdropClass;
     constructor();
     private attach;
     private detach;
@@ -60,7 +73,7 @@ declare class SheetComponent {
     unregisterDescriptionId(id: string): void;
     private isDrawerHost;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "Sheet, Drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "Sheet, Drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class SheetHeaderComponent {
@@ -109,4 +122,4 @@ declare class SheetFooterComponent {
 }
 
 export { SheetCloseDirective, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent };
-export type { SheetSide };
+export type { SheetBackdrop, SheetSide };