@radix-ng/primitives 0.11.0 → 0.12.0

package/menubar/index.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { RdxMenuBarContentDirective } from './src/menubar-content.directive';
+import { RdxMenubarItemCheckboxDirective } from './src/menubar-item-checkbox.directive';
+import { RdxMenubarItemIndicatorDirective } from './src/menubar-item-indicator.directive';
+import { RdxMenubarItemRadioDirective } from './src/menubar-item-radio.directive';
+import { RdxMenuBarItemDirective } from './src/menubar-item.directive';
+import { RdxMenubarRadioGroupDirective } from './src/menubar-radio-group.directive';
+import { RdxMenuBarDirective } from './src/menubar-root.directive';
+import { RdxMenubarSeparatorDirective } from './src/menubar-separator.directive';
+import { RdxMenuBarTriggerDirective } from './src/menubar-trigger.directive';
+
+export * from './src/menubar-content.directive';
+export * from './src/menubar-item-checkbox.directive';
+export * from './src/menubar-item-indicator.directive';
+export * from './src/menubar-item-radio.directive';
+export * from './src/menubar-item.directive';
+export * from './src/menubar-radio-group.directive';
+export * from './src/menubar-root.directive';
+export * from './src/menubar-separator.directive';
+export * from './src/menubar-trigger.directive';
+
+const menubarImports = [
+    RdxMenuBarContentDirective,
+    RdxMenuBarTriggerDirective,
+    RdxMenubarSeparatorDirective,
+    RdxMenubarItemCheckboxDirective,
+    RdxMenuBarDirective,
+    RdxMenuBarItemDirective,
+    RdxMenubarItemIndicatorDirective,
+    RdxMenubarItemRadioDirective,
+    RdxMenubarRadioGroupDirective
+];
+
+@NgModule({
+    imports: [...menubarImports],
+    exports: [...menubarImports]
+})
+export class MenubarModule {}

package/menubar/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/menubar/src/menubar-content.directive.ts

@@ -0,0 +1,9 @@
+import { CdkMenu } from '@angular/cdk/menu';
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[MenuBarContent]',
+    standalone: true,
+    hostDirectives: [CdkMenu]
+})
+export class RdxMenuBarContentDirective {}

package/menubar/src/menubar-item-checkbox.directive.ts

@@ -0,0 +1,32 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItemCheckbox } from '@angular/cdk/menu';
+import { booleanAttribute, computed, Directive, effect, inject, input, signal } from '@angular/core';
+
+@Directive({
+    selector: '[MenubarCheckboxItem]',
+    standalone: true,
+    hostDirectives: [CdkMenuItemCheckbox],
+    host: {
+        role: 'menuitemcheckbox',
+        '[attr.data-state]': 'checked() ? "checked": "unchecked"',
+        '[disabled]': 'disabledState()'
+    }
+})
+export class RdxMenubarItemCheckboxDirective {
+    private readonly cdkMenuItemCheckbox = inject(CdkMenuItemCheckbox, { host: true });
+
+    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+    readonly checked = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+    protected readonly disabledState = computed(() => this.disabled || this.disabled$());
+
+    protected readonly checked$ = signal(this.cdkMenuItemCheckbox.checked);
+    protected readonly disabled$ = signal(this.cdkMenuItemCheckbox.disabled);
+
+    constructor() {
+        effect(() => {
+            this.cdkMenuItemCheckbox.checked = this.checked();
+            this.cdkMenuItemCheckbox.disabled = this.disabled();
+        });
+    }
+}

package/menubar/src/menubar-item-indicator.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[MenubarItemIndicator]',
+    standalone: true,
+    host: {
+        '[attr.data-state]': 'true'
+    }
+})
+export class RdxMenubarItemIndicatorDirective {}

package/menubar/src/menubar-item-radio.directive.ts

@@ -0,0 +1,33 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItemRadio } from '@angular/cdk/menu';
+import { booleanAttribute, computed, Directive, effect, inject, input, signal } from '@angular/core';
+
+@Directive({
+    selector: '[MenubarItemRadio]',
+    standalone: true,
+    hostDirectives: [CdkMenuItemRadio],
+    host: {
+        role: 'menuitemradio',
+        '[attr.aria-checked]': 'checked()',
+        '[attr.data-state]': 'checked() ? "checked": "unchecked"',
+        '[disabled]': 'disabledState()'
+    }
+})
+export class RdxMenubarItemRadioDirective {
+    private readonly cdkMenuItemRadio = inject(CdkMenuItemRadio, { host: true });
+
+    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+    readonly checked = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+    protected readonly disabledState = computed(() => this.disabled || this.disabled$());
+
+    protected readonly checked$ = signal(this.cdkMenuItemRadio.checked);
+    protected readonly disabled$ = signal(this.cdkMenuItemRadio.disabled);
+
+    constructor() {
+        effect(() => {
+            this.cdkMenuItemRadio.checked = this.checked();
+            this.cdkMenuItemRadio.disabled = this.disabled();
+        });
+    }
+}

package/menubar/src/menubar-item.directive.ts

@@ -0,0 +1,12 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import { RdxMenuItemDirective } from '@radix-ng/primitives/menu';
+
+@Directive({
+    selector: '[MenuBarItem]',
+    standalone: true,
+    hostDirectives: [{ directive: RdxMenuItemDirective, inputs: ['rdxDisabled: disabled '] }]
+})
+export class RdxMenuBarItemDirective {
+    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+}

package/menubar/src/menubar-radio-group.directive.ts

@@ -0,0 +1,9 @@
+import { CdkMenuGroup } from '@angular/cdk/menu';
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[MenubarRadioGroup]',
+    standalone: true,
+    hostDirectives: [CdkMenuGroup]
+})
+export class RdxMenubarRadioGroupDirective {}

package/menubar/src/menubar-root.directive.ts

@@ -0,0 +1,15 @@
+import { CdkMenuBar } from '@angular/cdk/menu';
+import { Directive, input } from '@angular/core';
+
+@Directive({
+    selector: '[MenuBarRoot]',
+    standalone: true,
+    hostDirectives: [CdkMenuBar],
+    host: {
+        tabindex: '0',
+        '[attr.data-orientation]': 'orientation()'
+    }
+})
+export class RdxMenuBarDirective {
+    readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+}

package/menubar/src/menubar-separator.directive.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { RdxMenuSeparatorDirective } from '@radix-ng/primitives/menu';
+
+@Directive({
+    selector: '[MenubarSeparator]',
+    standalone: true,
+    hostDirectives: [RdxMenuSeparatorDirective]
+})
+export class RdxMenubarSeparatorDirective {}

package/menubar/src/menubar-trigger.directive.ts

@@ -0,0 +1,40 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { booleanAttribute, Directive, inject, input } from '@angular/core';
+
+@Directive({
+    selector: '[MenuBarTrigger]',
+    standalone: true,
+    hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: MenuBarTrigger'] }],
+    host: {
+        type: 'button',
+        role: 'menuitem',
+        '[attr.aria-haspopup]': "'menu'",
+        '[attr.aria-expanded]': 'cdkTrigger.isOpen()',
+        '[attr.data-state]': "cdkTrigger.isOpen() ? 'open': 'closed'",
+        '[attr.data-disabled]': "disabled() ? '' : undefined",
+        '[disabled]': 'disabled()',
+
+        '(pointerdown)': 'onPointerDown($event)'
+    }
+})
+export class RdxMenuBarTriggerDirective {
+    protected readonly cdkTrigger = inject(CdkMenuTrigger, { host: true });
+
+    readonly disabled = input<boolean, BooleanInput>(false, {
+        transform: booleanAttribute
+    });
+
+    onPointerDown($event: MouseEvent) {
+        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+        // but not when the control key is pressed (avoiding MacOS right click)
+        if (!this.disabled() && $event.button === 0 && !$event.ctrlKey) {
+            /* empty */
+            if (!this.cdkTrigger.isOpen()) {
+                // prevent trigger focusing when opening
+                // this allows the content to be given focus without competition
+                $event.preventDefault();
+            }
+        }
+    }
+}

package/menubar/stories/menubar.stories.ts

@@ -0,0 +1,229 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { Check, Dot, LucideAngularModule } from 'lucide-angular';
+import { MenubarModule } from '../index';
+
+export default {
+    title: 'Primitives/Menubar [In Progress]',
+    decorators: [
+        moduleMetadata({
+            imports: [MenubarModule, LucideAngularModule, LucideAngularModule.pick({ Check, Dot })]
+        }),
+        componentWrapperDecorator(
+            (story) => `
+                <div class="radix-themes light light-theme radix-themes-default-fonts rt-Flex rt-r-ai-start rt-r-jc-center rt-r-position-relative"
+                    data-accent-color="indigo"
+                    data-radius="medium"
+                    data-scaling="100%"
+                >
+                    ${story}
+                </div>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => ({
+        template: `
+<div MenuBarRoot class="MenubarRoot">
+  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="file">
+    File
+  </button>
+  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="edit">
+    Edit
+  </button>
+  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="view">
+    View
+  </button>
+  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="profiles">
+    Profiles
+  </button>
+</div>
+
+<ng-template #profiles>
+  <div class="MenubarContent" MenuBarContent>
+    <div MenubarRadioGroup>
+        <button class="MenubarRadioItem inset" MenubarItemRadio>
+            <lucide-icon class="MenubarItemIndicator" name="dot"/>Andy
+        </button>
+        <button class="MenubarRadioItem inset" MenubarItemRadio checked>
+            <lucide-icon class="MenubarItemIndicator" name="dot"/>Luis
+        </button>
+    </div>
+    <div MenubarSeparator class="MenubarSeparator"></div>
+    <button MenuBarItem class="MenubarItem inset">Edit</button>
+  </div>
+</ng-template>
+
+<ng-template #view>
+  <div class="MenubarContent" MenuBarContent>
+    <button class="MenubarCheckboxItem inset" MenubarCheckboxItem>
+        <lucide-icon class="MenubarItemIndicator" size="16" name="check" />Always Show Bookmarks Bar
+    </button>
+    <button class="MenubarCheckboxItem inset" MenubarCheckboxItem checked>
+        <lucide-icon class="MenubarItemIndicator" size="16" name="check" />Always Show Full URLs
+    </button>
+    <div MenubarSeparator class="MenubarSeparator"></div>
+    <button class="MenubarItem" MenuBarItem>Reload <div class="RightSlot">⌘ R</div></button>
+  </div>
+</ng-template>
+
+<ng-template #file>
+  <div class="MenubarContent" MenuBarContent>
+    <button class="MenubarItem" MenuBarItem>
+        New Tab <div class="RightSlot">⌘ T</div>
+    </button>
+    <button class="MenubarItem" MenuBarItem>
+        New Window <div class="RightSlot">⌘ N</div>
+    </button>
+    <button class="MenubarItem" MenuBarItem disabled>
+        New Incognito Window
+    </button>
+    <div MenubarSeparator class="MenubarSeparator"></div>
+    <button class="MenubarItem" MenuBarItem [MenuBarTrigger]="share">
+        Share <div class="RightSlot">></div>
+    </button>
+    <div MenubarSeparator class="MenubarSeparator"></div>
+    <button class="MenubarItem" MenuBarItem>
+        Print… <div class="RightSlot">⌘ P</div>
+    </button>
+  </div>
+</ng-template>
+
+<ng-template #edit>
+  <div class="MenubarContent" MenuBarContent>
+    <button class="MenubarItem" MenuBarItem>Undo <div class="RightSlot">⌘ Z</div></button>
+    <button class="MenubarItem" MenuBarItem>Redo <div class="RightSlot">⇧ ⌘ Z</div></button>
+    <div MenubarSeparator class="MenubarSeparator"></div>
+    <button class="MenubarItem" MenuBarItem>Cut</button>
+    <button class="MenubarItem" MenuBarItem>Copy</button>
+    <button class="MenubarItem" MenuBarItem>Paste</button>
+  </div>
+</ng-template>
+
+<ng-template #share>
+  <div class="MenubarSubContent" MenuBarContent>
+    <button class="MenubarItem" MenuBarItem>Undo</button>
+    <button class="MenubarItem" MenuBarItem>Redo</button>
+    <div MenubarSeparator class="MenubarSeparator"></div>
+    <button class="MenubarItem" MenuBarItem>Cut</button>
+    <button class="MenubarItem" MenuBarItem>Copy</button>
+    <button class="MenubarItem" MenuBarItem>Paste</button>
+  </div>
+</ng-template>
+
+<style>
+/* reset */
+button {
+  all: unset;
+}
+
+.MenubarRoot {
+  display: flex;
+  background-color: white;
+  padding: 3px;
+  border-radius: 6px;
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.MenubarTrigger {
+  padding: 8px 12px;
+  outline: none;
+  user-select: none;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 4px;
+  color: var(--violet-11);
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2px;
+}
+
+.MenubarTrigger[data-highlighted],
+.MenubarTrigger[data-state='open'] {
+  background-color: var(--violet-4);
+}
+
+.MenubarContent,
+.MenubarSubContent {
+  flex-direction: column;
+  display: inline-flex;
+  min-width: 220px;
+  background-color: white;
+  border-radius: 6px;
+  padding: 5px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  will-change: transform, opacity;
+}
+
+.MenubarItem,
+.MenubarSubTrigger,
+.MenubarCheckboxItem,
+.MenubarRadioItem {
+  all: unset;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--violet-11);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 10px;
+  position: relative;
+  user-select: none;
+}
+
+.MenubarItem.inset,
+.MenubarSubTrigger.inset,
+.MenubarCheckboxItem.inset,
+.MenubarRadioItem.inset {
+  padding-left: 20px;
+}
+
+.MenubarItem[data-disabled],
+.MenubarSubTrigger[data-disabled],
+.MenubarCheckboxItem[data-disabled],
+.MenubarRadioItem[data-disabled] {
+  color: var(--mauve-8);
+  pointer-events: none;
+}
+
+.MenubarItemIndicator {
+  position: absolute;
+  left: 0;
+  width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.MenubarRadioItem:hover,
+.MenubarCheckboxItem:hover,
+.MenubarItem:hover {
+  background-color: var(--violet-11);
+  color: white;
+}
+
+.MenubarSeparator {
+  height: 1px;
+  background-color: var(--violet-6);
+  margin: 5px;
+}
+
+.RightSlot {
+  margin-left: auto;
+  padding-left: 20px;
+  color: var(--mauve-9);
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+</style>
+`
+    })
+};

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/primitives",
+    "lib": {
+        "entryFile": "index.ts"
+    },
+    "allowedNonPeerDependencies": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -21,117 +21,9 @@
     "@angular/core": "^18.0.0",
     "@angular/cdk": "^18.0.0"
   },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
+  "dependencies": {},
   "sideEffects": false,
-  "module": "fesm2022/radix-ng-primitives.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/radix-ng-primitives.mjs",
-      "esm": "./esm2022/radix-ng-primitives.mjs",
-      "default": "./fesm2022/radix-ng-primitives.mjs"
-    },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "esm2022": "./esm2022/accordion/radix-ng-primitives-accordion.mjs",
-      "esm": "./esm2022/accordion/radix-ng-primitives-accordion.mjs",
-      "default": "./fesm2022/radix-ng-primitives-accordion.mjs"
-    },
-    "./alert-dialog": {
-      "types": "./alert-dialog/index.d.ts",
-      "esm2022": "./esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs",
-      "esm": "./esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs",
-      "default": "./fesm2022/radix-ng-primitives-alert-dialog.mjs"
-    },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "esm2022": "./esm2022/avatar/radix-ng-primitives-avatar.mjs",
-      "esm": "./esm2022/avatar/radix-ng-primitives-avatar.mjs",
-      "default": "./fesm2022/radix-ng-primitives-avatar.mjs"
-    },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "esm2022": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
-      "esm": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
-      "default": "./fesm2022/radix-ng-primitives-checkbox.mjs"
-    },
-    "./collapsible": {
-      "types": "./collapsible/index.d.ts",
-      "esm2022": "./esm2022/collapsible/radix-ng-primitives-collapsible.mjs",
-      "esm": "./esm2022/collapsible/radix-ng-primitives-collapsible.mjs",
-      "default": "./fesm2022/radix-ng-primitives-collapsible.mjs"
-    },
-    "./dropdown-menu": {
-      "types": "./dropdown-menu/index.d.ts",
-      "esm2022": "./esm2022/dropdown-menu/radix-ng-primitives-dropdown-menu.mjs",
-      "esm": "./esm2022/dropdown-menu/radix-ng-primitives-dropdown-menu.mjs",
-      "default": "./fesm2022/radix-ng-primitives-dropdown-menu.mjs"
-    },
-    "./label": {
-      "types": "./label/index.d.ts",
-      "esm2022": "./esm2022/label/radix-ng-primitives-label.mjs",
-      "esm": "./esm2022/label/radix-ng-primitives-label.mjs",
-      "default": "./fesm2022/radix-ng-primitives-label.mjs"
-    },
-    "./menu": {
-      "types": "./menu/index.d.ts",
-      "esm2022": "./esm2022/menu/radix-ng-primitives-menu.mjs",
-      "esm": "./esm2022/menu/radix-ng-primitives-menu.mjs",
-      "default": "./fesm2022/radix-ng-primitives-menu.mjs"
-    },
-    "./menubar": {
-      "types": "./menubar/index.d.ts",
-      "esm2022": "./esm2022/menubar/radix-ng-primitives-menubar.mjs",
-      "esm": "./esm2022/menubar/radix-ng-primitives-menubar.mjs",
-      "default": "./fesm2022/radix-ng-primitives-menubar.mjs"
-    },
-    "./progress": {
-      "types": "./progress/index.d.ts",
-      "esm2022": "./esm2022/progress/radix-ng-primitives-progress.mjs",
-      "esm": "./esm2022/progress/radix-ng-primitives-progress.mjs",
-      "default": "./fesm2022/radix-ng-primitives-progress.mjs"
-    },
-    "./radio": {
-      "types": "./radio/index.d.ts",
-      "esm2022": "./esm2022/radio/radix-ng-primitives-radio.mjs",
-      "esm": "./esm2022/radio/radix-ng-primitives-radio.mjs",
-      "default": "./fesm2022/radix-ng-primitives-radio.mjs"
-    },
-    "./separator": {
-      "types": "./separator/index.d.ts",
-      "esm2022": "./esm2022/separator/radix-ng-primitives-separator.mjs",
-      "esm": "./esm2022/separator/radix-ng-primitives-separator.mjs",
-      "default": "./fesm2022/radix-ng-primitives-separator.mjs"
-    },
-    "./switch": {
-      "types": "./switch/index.d.ts",
-      "esm2022": "./esm2022/switch/radix-ng-primitives-switch.mjs",
-      "esm": "./esm2022/switch/radix-ng-primitives-switch.mjs",
-      "default": "./fesm2022/radix-ng-primitives-switch.mjs"
-    },
-    "./tabs": {
-      "types": "./tabs/index.d.ts",
-      "esm2022": "./esm2022/tabs/radix-ng-primitives-tabs.mjs",
-      "esm": "./esm2022/tabs/radix-ng-primitives-tabs.mjs",
-      "default": "./fesm2022/radix-ng-primitives-tabs.mjs"
-    },
-    "./toggle": {
-      "types": "./toggle/index.d.ts",
-      "esm2022": "./esm2022/toggle/radix-ng-primitives-toggle.mjs",
-      "esm": "./esm2022/toggle/radix-ng-primitives-toggle.mjs",
-      "default": "./fesm2022/radix-ng-primitives-toggle.mjs"
-    },
-    "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
-      "esm2022": "./esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs",
-      "esm": "./esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs",
-      "default": "./fesm2022/radix-ng-primitives-toggle-group.mjs"
-    }
+  "scripts": {
+    "compodoc": "compodoc --config .compodocrc.json"
   }
 }

package/portal/stories/portal.docs.mdx

@@ -0,0 +1,85 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Utilities/Portal" />
+
+# Portal
+
+#### Renders an Angular component or template in a different part of the DOM.
+
+## Features
+
+- ✅ Render any Angular component or template outside of your App's main structure.
+- ✅ Appends to a custom container element, which can be configured as needed.
+
+## Installation
+
+To use the [Angular CDK Portal](https://material.angular.io/cdk/portal/overview), first install the CDK package:
+
+```bash
+npm install @angular/cdk
+```
+
+## Basic Usage
+
+### Defining a Portal
+
+First, create the component or template that you want to render in a different location:
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'component-portal-content',
+  standalone: true,
+  template: `
+    <p>This is portal content!</p>
+  `
+})
+export class PortalContentComponent {}
+```
+
+### Using the Portal
+
+In your main component, set up the portal and the outlet:
+
+```typescript
+// app.component.ts
+import { Component, ViewChild, AfterViewInit, inject, ApplicationRef, Injector, ViewContainerRef } from '@angular/core';
+import { CdkPortal, DomPortalOutlet } from '@angular/cdk/portal';
+import { PortalContentComponent } from './portal-content.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `
+    <ng-template cdkPortal>
+      <app-portal-content></app-portal-content>
+    </ng-template>
+    <div #portalOutlet></div>
+  `
+})
+export class AppComponent implements AfterViewInit {
+  private readonly appRef = inject(ApplicationRef);
+  private readonly injector = inject(Injector);
+
+  @ViewChild(CdkPortal) portal: CdkPortal;
+  @ViewChild('portalOutlet', { read: ViewContainerRef }) portalOutlet: ViewContainerRef;
+
+  private host: DomPortalOutlet;
+
+  ngAfterViewInit() {
+    this.host = new DomPortalOutlet(this.portalOutlet.element.nativeElement, this.injector, this.appRef);
+    this.host.attach(this.portal);
+  }
+}
+```
+
+## Anatomy
+
+The Angular CDK Portal utility consists of a few key elements:
+
+1. **Portal**:
+   An Angular directive (`CdkPortal`) that defines the content to be rendered elsewhere.
+
+2. **Portal Outlet**:
+   An Angular directive (`CdkPortalOutlet`) or a host (`DomPortalOutlet`) where the portal content will be rendered.