@ng-zen/cli 22.5.1 → 22.5.2-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.5.1",
+  "version": "22.5.2-next.1",
   "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/ui/files/popover/host/popover-host.scss

@@ -27,56 +27,4 @@
     flip-block,
     flip-inline,
     flip-block flip-inline;
-
-  /* TOP */
-  &[data-placement='top'] {
-    position-area: top center;
-  }
-
-  &[data-placement='top-start'] {
-    position-area: top left;
-  }
-
-  &[data-placement='top-end'] {
-    position-area: top right;
-  }
-
-  /* BOTTOM */
-  &[data-placement='bottom'] {
-    position-area: bottom center;
-  }
-
-  &[data-placement='bottom-start'] {
-    position-area: bottom left;
-  }
-
-  &[data-placement='bottom-end'] {
-    position-area: bottom right;
-  }
-
-  /* LEFT */
-  &[data-placement='left'] {
-    position-area: left center;
-  }
-
-  &[data-placement='left-start'] {
-    position-area: left top;
-  }
-
-  &[data-placement='left-end'] {
-    position-area: left bottom;
-  }
-
-  /* RIGHT */
-  &[data-placement='right'] {
-    position-area: right center;
-  }
-
-  &[data-placement='right-start'] {
-    position-area: right top;
-  }
-
-  &[data-placement='right-end'] {
-    position-area: right bottom;
-  }
 }

package/schematics/ui/files/popover/host/popover-host.ts

@@ -1,6 +1,6 @@
 import { Component, input } from '@angular/core';
 
-import { PopoverPlacement } from '../popover-positions.type';
+import { PopoverPosition } from '../popover-positions.type';
 
 /**
  * ZenPopoverHost is a minimal host component created dynamically by the `ZenPopover` directive.
@@ -28,10 +28,12 @@ import { PopoverPlacement } from '../popover-positions.type';
   host: {
     popover: 'auto',
     '[attr.id]': 'id()',
-    '[attr.data-placement]': 'placement()',
+    '[style.position-area]': 'placement()',
+    '[style.position-anchor]': 'anchorName()',
   },
 })
 export class ZenPopoverHost {
   readonly id = input.required<string>();
-  readonly placement = input<PopoverPlacement>('top');
+  readonly anchorName = input.required<string>();
+  readonly placement = input<PopoverPosition>('top');
 }

package/schematics/ui/files/popover/popover-positions.type.ts

@@ -1,13 +1,13 @@
-export type PopoverPlacement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end';
+/** Vertical axis position relative to the host element. */
+export type PopoverVerticalPosition = 'top' | 'bottom' | 'center';
+
+/** Horizontal axis position relative to the host element. */
+export type PopoverHorizontalPosition = 'left' | 'right' | 'center';
+
+/**
+ * Position of the popover relative to its trigger.
+ * Accepts one or two values (e.g. `'top'`, `'left'`, `'top right'`, `'center left'`).
+ * Uses CSS `position-area` under the hood.
+ */
+export type PopoverPosition =
+  `${PopoverVerticalPosition} ${PopoverHorizontalPosition}` | PopoverVerticalPosition | PopoverHorizontalPosition;

package/schematics/ui/files/popover/popover.spec.ts

@@ -99,14 +99,14 @@ describe('ZenPopover', () => {
       expect(getPopoverHostEl(fixture)!.textContent).toContain('Popover content');
     });
 
-    it('passes placement to host as data-placement (bottom)', () => {
+    it('passes placement to host as position-area (bottom)', () => {
       const fixture = TestBed.createComponent(TemplateBottomComponent);
       fixture.detectChanges();
 
       fixture.nativeElement.querySelector('#trigger-btn').click();
       fixture.detectChanges();
 
-      expect(getPopoverHostEl(fixture)!.getAttribute('data-placement')).toBe('bottom');
+      expect(getPopoverHostEl(fixture)!.style.getPropertyValue('position-area')).toBe('bottom');
     });
 
     it('sets anchor styles on trigger and host', () => {
@@ -142,7 +142,7 @@ describe('ZenPopover', () => {
     });
   });
 
-  it('reflects placement as data-placement (left)', async () => {
+  it('reflects placement as position-area (left)', async () => {
     await TestBed.configureTestingModule({
       imports: [TemplateLeftComponent],
       providers: [provideZonelessChangeDetection()],
@@ -154,7 +154,7 @@ describe('ZenPopover', () => {
     fixture.nativeElement.querySelector('#trigger-btn').click();
     fixture.detectChanges();
 
-    expect(getPopoverHostEl(fixture)!.getAttribute('data-placement')).toBe('left');
+    expect(getPopoverHostEl(fixture)!.style.getPropertyValue('position-area')).toBe('left');
   });
 
   it('renders string content as text node in host', async () => {

package/schematics/ui/files/popover/popover.stories.ts

@@ -2,7 +2,7 @@ import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angul
 
 import { ZenButton } from '../button';
 import { ZenPopover } from './popover';
-import type { PopoverPlacement } from './popover-positions.type';
+import type { PopoverPosition } from './popover-positions.type';
 
 type Story = StoryObj<ZenPopover>;
 
@@ -20,25 +20,26 @@ const meta = {
       control: 'select',
       options: [
         'top',
-        'top-start',
-        'top-end',
         'bottom',
-        'bottom-start',
-        'bottom-end',
+        'center',
         'left',
-        'left-start',
-        'left-end',
         'right',
-        'right-start',
-        'right-end',
-      ] satisfies PopoverPlacement[],
+        'top left',
+        'top right',
+        'top center',
+        'bottom left',
+        'bottom right',
+        'bottom center',
+        'center left',
+        'center right',
+      ] satisfies PopoverPosition[],
       table: {
         category: 'inputs',
         type: {
-          summary: 'string',
+          summary: 'PopoverPosition',
         },
         defaultValue: {
-          summary: 'top' satisfies PopoverPlacement,
+          summary: 'top' satisfies PopoverPosition,
         },
       },
     },

package/schematics/ui/files/popover/popover.ts

@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 
 import { ZenPopoverHost } from './host/popover-host';
-import { PopoverPlacement } from './popover-positions.type';
+import { PopoverPosition } from './popover-positions.type';
 
 type HostProperties = keyof ZenPopoverHost;
 
@@ -70,7 +70,6 @@ type HostProperties = keyof ZenPopoverHost;
  */
 @Directive({
   selector: '[zenPopover]',
-  standalone: true,
   host: {
     '(click)': 'togglePopover()',
   },
@@ -81,7 +80,7 @@ export class ZenPopover {
   /** Content to display inside the popover. Can be a `string` or a `TemplateRef`.*/
   readonly content = input.required<TemplateRef<unknown> | string>({ alias: 'zenPopover' });
   /** Placement of the popover relative to the trigger element. Defaults to `top`.*/
-  readonly placement = input<PopoverPlacement>('top', { alias: 'zenPopoverPlacement' });
+  readonly placement = input<PopoverPosition>('top', { alias: 'zenPopoverPlacement' });
   /** The HTML id attribute is used to specify a unique id for an HTML element.*/
   readonly id = input<string>(`zen-popover-${ZenPopover.uniqueId++}`);
 
@@ -125,12 +124,10 @@ export class ZenPopover {
 
     this.hostRef = this.vcr.createComponent(ZenPopoverHost);
     this.hostRef.setInput('id' satisfies HostProperties, this.id());
+    this.hostRef.setInput('anchorName' satisfies HostProperties, this.anchorName);
     this.hostRef.setInput('placement' satisfies HostProperties, this.placement());
 
-    const popoverEl = this.hostRef.location.nativeElement as HTMLElement;
-    this.renderer.setStyle(popoverEl, 'position-anchor', this.anchorName);
-
-    return popoverEl;
+    return this.hostRef.location.nativeElement as HTMLElement;
   }
 
   private renderContent(popoverEl: HTMLElement) {