@odx/angular 6.0.0 → 6.1.0

package/fesm2022/odx-angular-components-menu.mjs

@@ -13,6 +13,12 @@ import { ActionGroupComponent } from '@odx/angular/components/action-group';
 import { CoreModule } from '@odx/angular';
 import { IconComponent } from '@odx/angular/components/icon';
 
+/**
+ * Represents a directive for a menu item.
+ * Uses the `ListFocusManagerOptionDirective` to manage focus within the menu items.
+ *
+ * @see {ListFocusManagerOptionDirective}
+ */
 let MenuItemDirective = class MenuItemDirective {
     constructor() {
         this.element = injectElement();
@@ -41,9 +47,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['click']
             }] } });
 
+/**
+ * `MenuComponent` provides an Angular component for creating a navigational menu structure in an application.
+ * It utilizes the `ListFocusManagerDirective` to manage focus within the menu items and integrates with other custom components like `ActionGroupComponent`.
+ * The component is styled using CSS component techniques to ensure a consistent look and feel across different parts of the application.
+ * @see {ListFocusManagerDirective}
+ */
 let MenuComponent = class MenuComponent {
     constructor() {
         this.element = injectElement();
+        /**
+         * A CSS modifier that indicates if the menu should use a tile layout. This is controlled through an input property which can be bound to a boolean value.
+         *
+         * @type {boolean}
+         * @default false
+         */
         this.tile = false;
     }
     onTab(event) {
@@ -78,6 +96,14 @@ const DEFAULT_MENU_DROPDOWN_OPTIONS = {
     containerClass: 'odx-menu-overlay',
     enableFallback: true,
 };
+/**
+ * `MenuDirective` integrates a menu system into elements using the `DropdownDirective`
+ * for dynamic dropdown functionality.
+ * It enables flexible positioning and content injection capabilities, making it suitable
+ * for creating context menus, dropdown lists, and other interactive menu-driven components.
+ *
+ * @see {DropdownDirective}
+ */
 let MenuDirective = class MenuDirective {
     constructor() {
         this.dropdown = inject(DropdownDirective, { host: true });
@@ -91,9 +117,19 @@ let MenuDirective = class MenuDirective {
             };
         }
     }
+    /**
+     * Returns whether the dropdown is currently open.
+     *
+     * @returns {boolean} `true` if the dropdown is open, `false` otherwise.
+     */
     isOpen() {
         return this.dropdown.isOpen;
     }
+    /**
+     * Closes the dropdown.
+     *
+     * @param {Event} [event] The event that triggered the dropdown close.
+     */
     close(event) {
         this.dropdown.close(event);
     }

package/fesm2022/odx-angular-components-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-components-menu.mjs","sources":["../../../../libs/angular/components/menu/src/lib/directives/menu-item.directive.ts","../../../../libs/angular/components/menu/src/lib/menu.component.ts","../../../../libs/angular/components/menu/src/lib/menu.component.html","../../../../libs/angular/components/menu/src/lib/menu.directive.ts","../../../../libs/angular/components/menu/src/lib/menu.module.ts","../../../../libs/angular/components/menu/src/odx-angular-components-menu.ts"],"sourcesContent":["import { Directive, HostListener } from '@angular/core';\nimport { ListFocusManagerOptionDirective } from '@odx/angular/cdk/a11y';\nimport { closeCurrentDropdown } from '@odx/angular/components/dropdown';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { deferFn, injectElement } from '@odx/angular/utils';\n\n@CSSComponent('menu-item')\n@Directive({\n  selector: 'a[odxButton][odxMenuItem], button[odxButton][odxMenuItem]',\n  standalone: true,\n  hostDirectives: [ListFocusManagerOptionDirective],\n  host: {\n    role: 'menuitem',\n  },\n})\nexport class MenuItemDirective {\n  public readonly element = injectElement<HTMLButtonElement | HTMLLinkElement>();\n\n  @HostListener('click')\n  protected selectItem(): void {\n    deferFn(() => closeCurrentDropdown(this.element.nativeElement));\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, HostListener, Input, ViewEncapsulation } from '@angular/core';\nimport { ListFocusManagerDirective } from '@odx/angular/cdk/a11y';\nimport { ActionGroupComponent } from '@odx/angular/components/action-group';\nimport { closeCurrentDropdown } from '@odx/angular/components/dropdown';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\n\n@CSSComponent('menu')\n@Component({\n  selector: 'odx-menu',\n  standalone: true,\n  imports: [ActionGroupComponent, CommonModule],\n  templateUrl: './menu.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [ListFocusManagerDirective],\n  host: {\n    role: 'menu',\n  },\n})\nexport class MenuComponent {\n  public readonly element = injectElement();\n\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public tile = false;\n\n  @HostListener('keydown.tab', ['$event'])\n  public onTab(event: KeyboardEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    closeCurrentDropdown(this.element.nativeElement);\n  }\n}\n","<div class=\"odx-menu__title\" *ngIf=\"tile\">\n  <ng-content></ng-content>\n</div>\n<odx-action-group class=\"odx-menu__inner\">\n  <ng-content select=\"[odxButton]\" ngProjectAs=\"[odxButton]\"></ng-content>\n</odx-action-group>\n","import { Directive, inject, Input, OnChanges } from '@angular/core';\nimport { DynamicContent, DynamicTextContent } from '@odx/angular/cdk/dynamic-view';\nimport { DropdownDirective, DropdownOptions } from '@odx/angular/components/dropdown';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { hasChanged, injectElement, NgChanges, Position } from '@odx/angular/utils';\n\nconst DEFAULT_MENU_DROPDOWN_OPTIONS: Partial<DropdownOptions> = {\n  containerClass: 'odx-menu-overlay',\n  enableFallback: true,\n};\n\n@CSSComponent('menu-host')\n@Directive({\n  selector: '[odxMenu]',\n  exportAs: 'odxMenu',\n  standalone: true,\n  hostDirectives: [\n    {\n      directive: DropdownDirective,\n      inputs: ['odxDropdown:odxMenu'],\n    },\n  ],\n})\nexport class MenuDirective implements OnChanges {\n  protected readonly dropdown = inject(DropdownDirective, { host: true });\n\n  public readonly element = injectElement();\n\n  @Input('odxMenu')\n  public content?: Exclude<DynamicContent, DynamicTextContent> | null;\n\n  @Input('odxMenuPosition')\n  public position?: Position | null;\n\n  public ngOnChanges(changes: NgChanges<MenuDirective>): void {\n    if (hasChanged(changes, 'position', false)) {\n      this.dropdown.options = {\n        ...DEFAULT_MENU_DROPDOWN_OPTIONS,\n        position: this.position ?? undefined,\n      };\n    }\n  }\n\n  public isOpen(): boolean {\n    return this.dropdown.isOpen;\n  }\n\n  public close(event?: Event): void {\n    this.dropdown.close(event);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { MenuItemDirective } from './directives';\nimport { MenuComponent } from './menu.component';\nimport { MenuDirective } from './menu.directive';\n\nconst modules = [MenuComponent, MenuDirective, MenuItemDirective, IconComponent];\n\n@NgModule({\n  imports: [modules],\n  exports: [CoreModule, ...modules],\n})\nexport class MenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"odx-angular-components-menu.mjs","sources":["../../../../libs/angular/components/menu/src/lib/directives/menu-item.directive.ts","../../../../libs/angular/components/menu/src/lib/menu.component.ts","../../../../libs/angular/components/menu/src/lib/menu.component.html","../../../../libs/angular/components/menu/src/lib/menu.directive.ts","../../../../libs/angular/components/menu/src/lib/menu.module.ts","../../../../libs/angular/components/menu/src/odx-angular-components-menu.ts"],"sourcesContent":["import { Directive, HostListener } from '@angular/core';\nimport { ListFocusManagerOptionDirective } from '@odx/angular/cdk/a11y';\nimport { closeCurrentDropdown } from '@odx/angular/components/dropdown';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { deferFn, injectElement } from '@odx/angular/utils';\n\n/**\n * Represents a directive for a menu item.\n * Uses the `ListFocusManagerOptionDirective` to manage focus within the menu items.\n *\n * @see {ListFocusManagerOptionDirective}\n */\n@CSSComponent('menu-item')\n@Directive({\n  selector: 'a[odxButton][odxMenuItem], button[odxButton][odxMenuItem]',\n  standalone: true,\n  hostDirectives: [ListFocusManagerOptionDirective],\n  host: {\n    role: 'menuitem',\n  },\n})\nexport class MenuItemDirective {\n  public readonly element = injectElement<HTMLButtonElement | HTMLLinkElement>();\n\n  @HostListener('click')\n  protected selectItem(): void {\n    deferFn(() => closeCurrentDropdown(this.element.nativeElement));\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, HostListener, Input, ViewEncapsulation } from '@angular/core';\nimport { ListFocusManagerDirective } from '@odx/angular/cdk/a11y';\nimport { ActionGroupComponent } from '@odx/angular/components/action-group';\nimport { closeCurrentDropdown } from '@odx/angular/components/dropdown';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\n\n/**\n * `MenuComponent` provides an Angular component for creating a navigational menu structure in an application.\n * It utilizes the `ListFocusManagerDirective` to manage focus within the menu items and integrates with other custom components like `ActionGroupComponent`.\n * The component is styled using CSS component techniques to ensure a consistent look and feel across different parts of the application.\n * @see {ListFocusManagerDirective}\n */\n@CSSComponent('menu')\n@Component({\n  selector: 'odx-menu',\n  standalone: true,\n  imports: [ActionGroupComponent, CommonModule],\n  templateUrl: './menu.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [ListFocusManagerDirective],\n  host: {\n    role: 'menu',\n  },\n})\nexport class MenuComponent {\n  public readonly element = injectElement();\n\n  /**\n   * A CSS modifier that indicates if the menu should use a tile layout. This is controlled through an input property which can be bound to a boolean value.\n   *\n   * @type {boolean}\n   * @default false\n   */\n  @CSSModifier()\n  @Input({ transform: booleanAttribute })\n  public tile = false;\n\n  @HostListener('keydown.tab', ['$event'])\n  protected onTab(event: KeyboardEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    closeCurrentDropdown(this.element.nativeElement);\n  }\n}\n","<div class=\"odx-menu__title\" *ngIf=\"tile\">\n  <ng-content></ng-content>\n</div>\n<odx-action-group class=\"odx-menu__inner\">\n  <ng-content select=\"[odxButton]\" ngProjectAs=\"[odxButton]\"></ng-content>\n</odx-action-group>\n","import { Directive, inject, Input, OnChanges } from '@angular/core';\nimport { DynamicContent, DynamicTextContent } from '@odx/angular/cdk/dynamic-view';\nimport { DropdownDirective, DropdownOptions } from '@odx/angular/components/dropdown';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { hasChanged, injectElement, NgChanges, Position } from '@odx/angular/utils';\n\nconst DEFAULT_MENU_DROPDOWN_OPTIONS: Partial<DropdownOptions> = {\n  containerClass: 'odx-menu-overlay',\n  enableFallback: true,\n};\n\n/**\n * `MenuDirective` integrates a menu system into elements using the `DropdownDirective`\n * for dynamic dropdown functionality.\n * It enables flexible positioning and content injection capabilities, making it suitable\n * for creating context menus, dropdown lists, and other interactive menu-driven components.\n *\n * @see {DropdownDirective}\n */\n@CSSComponent('menu-host')\n@Directive({\n  selector: '[odxMenu]',\n  exportAs: 'odxMenu',\n  standalone: true,\n  hostDirectives: [\n    {\n      directive: DropdownDirective,\n      inputs: ['odxDropdown:odxMenu'],\n    },\n  ],\n})\nexport class MenuDirective implements OnChanges {\n  protected readonly dropdown = inject(DropdownDirective, { host: true });\n\n  public readonly element = injectElement();\n\n  /**\n   * Accepts dynamic content other than `DynamicTextContent` to be used as the content of the dropdown.\n   * This allows for more complex content structures such as templates or components to be defined\n   * as dropdown content.\n   *\n   * @type {Exclude<DynamicContent, DynamicTextContent> | null}\n   */\n  @Input('odxMenu')\n  public content?: Exclude<DynamicContent, DynamicTextContent> | null;\n\n  /**\n   * Optionally specifies the positioning of the dropdown menu relative to its trigger element.\n   * If not specified, a default position may be used.\n   *\n   * @type {Position | null}\n   */\n  @Input('odxMenuPosition')\n  public position?: Position | null;\n\n  public ngOnChanges(changes: NgChanges<MenuDirective>): void {\n    if (hasChanged(changes, 'position', false)) {\n      this.dropdown.options = {\n        ...DEFAULT_MENU_DROPDOWN_OPTIONS,\n        position: this.position ?? undefined,\n      };\n    }\n  }\n\n  /**\n   * Returns whether the dropdown is currently open.\n   *\n   * @returns {boolean} `true` if the dropdown is open, `false` otherwise.\n   */\n  public isOpen(): boolean {\n    return this.dropdown.isOpen;\n  }\n\n  /**\n   * Closes the dropdown.\n   *\n   * @param {Event} [event] The event that triggered the dropdown close.\n   */\n  public close(event?: Event): void {\n    this.dropdown.close(event);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { MenuItemDirective } from './directives';\nimport { MenuComponent } from './menu.component';\nimport { MenuDirective } from './menu.directive';\n\nconst modules = [MenuComponent, MenuDirective, MenuItemDirective, IconComponent];\n\n@NgModule({\n  imports: [modules],\n  exports: [CoreModule, ...modules],\n})\nexport class MenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/odx-angular-components-modal.mjs

@@ -25,16 +25,30 @@ const ModalHeroVariant = {
     DANGER: 'danger',
 };
 
+/**
+ * A reference to a dynamically created modal, providing methods to manipulate, close, or update the modal's state
+ * and options.
+ * This class extends the `Controller` base class from `@odx/angular`, adding modal-specific functionalities like
+ * handling closures and dismissals.
+ *
+ * @see {Controller}
+ */
 class ModalRef extends Controller {
+    /** Gets the unique identifier for the modal instance. */
     get id() {
         return this.options.id;
     }
+    /** Gets the ARIA label ID for the modal title, based on the modal's ID. */
     get modalTitleId() {
         return `${this.options.id}-title`;
     }
+    /** Gets the data passed to the modal. This is useful for modal initialization. */
     get data() {
         return this.internalOptions.data;
     }
+    /** Gets the current options for the modal. These options include configurations.
+     * @see {ModalOptions}
+     */
     get options() {
         return this.internalOptions;
     }
@@ -43,15 +57,28 @@ class ModalRef extends Controller {
         this.internalOptions = internalOptions;
         this.onClose$$ = new Subject();
         this.onDismiss$$ = new Subject();
+        /** An observable that emits when the modal is closed with a result. */
         this.onClose$ = this.onClose$$.pipe(share({ resetOnRefCountZero: true }));
+        /** An observable that emits when the modal is dismissed without a result. */
         this.onDismiss$ = this.onDismiss$$.pipe(share({ resetOnRefCountZero: true }));
+        /** An observable that merges the onClose$ and onDismiss$ streams for cases when any kind of teardown is needed. */
         this.onDestroy$ = deepmerge(this.onClose$, this.onDismiss$);
         this.isActive = () => isActive(this);
     }
+    /**
+     * Updates the modal's options.
+     *
+     * @param {Partial<ModalOptions<Data>>} options A partial set of options to update.
+     */
     update(options) {
         this.internalOptions = deepmerge(this.internalOptions, options);
         this.triggerControllerChange();
     }
+    /**
+     * Dismisses the modal. This does not result in an output value.
+     *
+     * @param {boolean} [force=false] Whether to force dismissal regardless of the `canDismiss` condition.
+     */
     dismiss(force = false) {
         if (!force && !this.isActive())
             return;
@@ -60,6 +87,11 @@ class ModalRef extends Controller {
         this.onDismiss$$.next();
         this.destroy();
     }
+    /**
+     * Closes the modal with a result.
+     *
+     * @param {Result} result The result to emit when the modal closes.
+     */
     close(result) {
         if (!this.isActive())
             return;
@@ -68,6 +100,7 @@ class ModalRef extends Controller {
         this.onClose$$.next(result);
         this.destroy();
     }
+    /** Completes the onClose and onDismiss streams and cleans up resources. */
     destroy() {
         this.onClose$$.complete();
         this.onDismiss$$.complete();
@@ -86,17 +119,71 @@ const ModalVariant = {
     SIDESHEET: 'sidesheet',
 };
 
+/**
+ * Utility function to inject a reference to a modal. This function simplifies the injection process by typing the `ModalRef` to the specific data and result expected by the consumer.
+ *
+ * This approach abstracts away Angular's inject function, providing direct access to the modal reference with the correct type. It is commonly used in components or services that interact with a modal dialog to manipulate its data, close it, or perform other related actions.
+ *
+ * @template Data The type of data passed to the modal.
+ * @template Result The type of result expected when the modal closes.
+ * @returns {ModalRef<Data, Result>} A strongly typed reference to the modal.
+ *
+ * @example
+ * ```ts
+ * // Injecting a modal reference in a component or service:
+ * const modalRef = injectModalRef<SomeDataType, SomeResultType>();
+ *
+ * // Using the modal reference to close the modal and return a result:
+ * modalRef.close(someResult);
+ *
+ * // Accessing the data provided to the modal:
+ * const modalData = modalRef.data;
+ * ```
+ */
 function injectModalRef() {
     return inject((ModalRef));
 }
 
+/**
+ * Provides a configuration for the Angular dependency injection system to inject a specific instance of `ModalRef`.
+ * This function is particularly useful when you want to configure a provider for a `ModalRef` within an Angular module or component.
+ *
+ * @template D The data type expected by the modal.
+ * @template R The result type that the modal will produce.
+ * @param {ModalRef<D, R>} modalRef An instance of `ModalRef` to be provided.
+ * @returns {ValueProvider} An Angular value provider that can be used in module or component providers arrays.
+ */
 function provideModalRef(modalRef) {
     return { provide: ModalRef, useValue: modalRef };
 }
 
+/**
+ * A directive that enables an element to close or dismiss a modal when clicked.
+ * It can be used on any element within a modal to trigger the close or dismiss action, optionally passing a result back to the modal opener.
+ *
+ * The directive accepts an input value that determines the result to be passed back on modal close. If no value is provided, or it's explicitly set to `null`,
+ * the modal is dismissed without sending a result. If the input value is `undefined`, the modal is dismissed via the `dismiss` method without passing any result.
+ *
+ * @template T - The type of the result to be emitted when the modal closes. Defaults to `unknown`.
+ *
+ * @example
+ * Closing a modal and passing a result:
+ * ```html
+ * <button [odxModalClose]="myResult">Close and send result</button>
+ * ```
+ *
+ * Simply dismissing a modal without passing a result:
+ * ```html
+ * <button odxModalClose>Dismiss</button>
+ * ```
+ */
 class ModalCloseDirective {
     constructor() {
         this.modalRef = injectModalRef();
+        /**
+         * Represents the result to be passed back to the modal opener when the modal is closed.
+         * @template T - The type of the result returned.
+         */
         this.result = null;
     }
     onClick() {
@@ -125,6 +212,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['click']
             }] } });
 
+/**
+ * Represents a directive for the content of a modal.
+ */
 let ModalContentDirective = class ModalContentDirective {
     constructor() {
         this.element = injectElement();
@@ -143,6 +233,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * A directive that enables an element to dismiss a modal when clicked. This can be applied
+ * to any clickable element within a modal, such as buttons or links, to provide a declarative
+ * approach to dismissing the modal.
+ *
+ * Utilizes `injectModalRef` to access the modal reference associated with the containing modal,
+ * enabling the directive to call the `dismiss` method on the modal reference upon the click event.
+ *
+ * @example
+ * Dismissing a modal using the odxModalDismiss directive on a button:
+ * ```html
+ * <button odxModalDismiss>Cancel</button>
+ * ```
+ *
+ * This directive simplifies modal dismissal by removing the need for manually wiring click events
+ * to dismiss methods in the component class, thereby enhancing template readability and maintainability.
+ */
 class ModalDismissDirective {
     constructor() {
         this.modalRef = injectModalRef();
@@ -164,6 +271,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['click']
             }] } });
 
+/**
+ * Represents the footer component of a modal.
+ */
 let ModalFooterComponent = class ModalFooterComponent {
     constructor() {
         this.element = injectElement();
@@ -179,6 +289,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ standalone: true, selector: 'odx-modal-footer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }] });
 
+/**
+ * Represents the header component of a modal.
+ */
 let ModalHeaderComponent = class ModalHeaderComponent {
     constructor() {
         this.modalRef = injectModalRef();
@@ -205,10 +318,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [AreaHeaderComponent]
             }] } });
 
+/**
+ * Represents a modal hero component.
+ */
 let ModalHeroComponent = class ModalHeroComponent {
     constructor() {
         this.element = injectElement();
+        /**
+         * The modal reference of the modal hero component.
+         */
         this.modalRef = injectModalRef();
+        /**
+         * The icon set of the modal hero component.
+         *
+         * @type {string}
+         */
         this.iconSet = 'core';
         detectControllerChanges(this.modalRef).subscribe();
     }
@@ -234,10 +358,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Represents a basic modal component that can be used to display dynamic content, handle modal actions, and interact
+ * with other components through dependency injection. It includes common modal features such as headers, footers, and dynamic content areas.
+ * This component uses the `ModalRef` to manage its state and interactions.
+ *
+ * The `BasicModalComponent` is designed to be flexible and reusable for various modal dialog needs within an application.
+ *
+ * @template Result The expected result type that the modal might produce, typically used when the modal closes.
+ */
 class BasicModalComponent {
     constructor() {
         this.injector = inject(Injector);
         this.trackByIndex = trackByIndex;
+        /**
+         * The reference to the modal.
+         *
+         * @type {ModalRef<BasicModalOptions<Result>>}
+         */
         this.modalRef = injectModalRef();
     }
     get data() {
@@ -261,14 +399,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<odx-modal-hero [icon]=\"icon\" [variant]=\"data.heroVariant\" *ngIf=\"data.heroIcon as icon; else modalHeader\">\n  <ng-template [odxDynamicView]=\"data.title\"></ng-template>\n</odx-modal-hero>\n\n<odx-modal-content>\n  <ng-template [odxDynamicView]=\"data.content\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n</odx-modal-content>\n\n<odx-modal-footer>\n  <button odxButton [variant]=\"action.variant\" [odxModalClose]=\"action.data\" *ngFor=\"let action of data.actions; let i = index; trackBy: trackByIndex\">\n    {{ action.label }}\n  </button>\n</odx-modal-footer>\n\n<ng-template #modalHeader>\n  <odx-modal-header>\n    <odx-area-header>\n      <ng-template [odxDynamicView]=\"data.title\"></ng-template>\n    </odx-area-header>\n  </odx-modal-header>\n</ng-template>\n" }]
         }] });
 
+/**
+ * A component that represents a modal dialog with dynamic content and customizable animations.
+ * It supports both modal and sidesheet variants with configurable animations for each type.
+ */
 let ModalComponent = class ModalComponent {
     constructor() {
         this.modalRef = injectModalRef();
         this.injector = inject(Injector);
         this.context = { $implicit: this.modalRef };
         this.element = injectElement();
+        /**
+         * Size of the modal as a CSS modifier based on modal options.
+         *
+         * @type {ModalSize}
+         */
         this.size = this.modalRef.options.size;
+        /**
+         * Variant of the modal as a CSS modifier that influences animation choices.
+         *
+         * @type {ModalVariant}
+         */
         this.variant = this.modalRef.options.variant;
+        /**
+         * Boolean that indicates if the content is a component type rather than a template.
+         *
+         * @type {boolean}
+         */
         this.withComponent = false;
         detectControllerChanges(this.modalRef).subscribe(() => {
             this.size = this.modalRef.options.size;
@@ -330,6 +487,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['keyup.esc']
             }] } });
 
+/**
+ * Utilizes `createConfigTokens` to create configuration tokens and utility functions for managing modal configurations.
+ * This setup enables easy injection and provision of default global settings for modals throughout the application,
+ * fostering consistency and ease of customization.
+ *
+ * The generated tokens and functions include:
+ * - `ModalDefaultConfig`: The default configuration values for modals.
+ * - `ModalConfig`: An Angular `InjectionToken` for injecting modal configuration into components or services.
+ * - `injectModalConfig`: A utility function for retrieving the current modal configuration, considering any overrides.
+ * - `provideModalConfig`: A function that allows specifying overrides to the default modal configuration.
+ *
+ * @example
+ * ```ts
+ * // Example of providing a custom modal configuration in an Angular module
+ * @NgModule({
+ *   providers: [
+ *     provideModalConfig({
+ *       size: ModalSize.LARGE,
+ *       dismissable: false
+ *     })
+ *   ]
+ * })
+ * class AppModule {}
+ *
+ * // Example of injecting modal configuration in a component
+ * @Component({...})
+ * export class MyComponent {
+ *   constructor(@Inject(ModalConfig) private modalConfig: ModalConfig) {
+ *     console.log(this.modalConfig.size); // Outputs the size from the provided or default configuration
+ *   }
+ * }
+ * ```
+ */
 const { ModalDefaultConfig, ModalConfig, injectModalConfig, provideModalConfig } = createConfigTokens('Modal', '@odx/angular/components/modal', {
     dismissable: true,
     size: ModalSize.MEDIUM,
@@ -338,12 +528,39 @@ const { ModalDefaultConfig, ModalConfig, injectModalConfig, provideModalConfig }
     variant: ModalVariant.DEFAULT,
 });
 
+/**
+ * Service for managing modal dialogs within the application. It supports creating, opening,
+ * and dismissing modals dynamically, with comprehensive options for customization and lifecycle management.
+ * Utilizes Angular's dynamic view management to instantiate and render modals as needed.
+ *
+ * @example
+ * ```ts
+ * // Example of using ModalService to open a modal
+ * constructor(private modalService: ModalService) {}
+ *
+ * openModal() {
+ *   const modalRef = this.modalService.open(MyModalContentComponent, {
+ *     data: { someData: 'test' },
+ *     size: ModalSize.SMALL,
+ *   });
+ *
+ *   modalRef.onClose$.subscribe(result => {
+ *     console.log('Modal closed with result:', result);
+ *   });
+ * }
+ * ```
+ */
 class ModalService {
     constructor(location) {
         this.config = injectModalConfig();
         this.openModals = new Queue();
         this.injector = inject(Injector);
         this.dynamicViewService = inject(DynamicViewService);
+        /**
+         * An observable that emits the current value of the openModals subject.
+         *
+         * @emits {ModalRef[]} openModals$ - The current array of open modals.
+         */
         this.openModals$ = this.openModals.value$;
         location.onUrlChange(() => {
             for (const modalRef of this.openModals.toArray()) {
@@ -353,11 +570,22 @@ class ModalService {
             }
         });
     }
+    /**
+     * Dismisses all open modals.
+     */
     dismissAll() {
         for (const modalRef of this.openModals.toArray()) {
             modalRef.dismiss();
         }
     }
+    /**
+     * Retrieves the modal reference by its ID.
+     *
+     * @template Data The type of data passed to the modal.
+     * @template Result The type of result returned by the modal.
+     * @param id The ID of the modal.
+     * @returns The modal reference if found, otherwise null.
+     */
     getModalById(id) {
         return this.openModals.get(id);
     }
@@ -401,13 +629,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1.Location }]; } });
 
+/**
+ * A directive that simplifies the creation and management of modals directly from Angular templates.
+ * It allows for declarative modal instantiation with full control over modal options, and supports
+ * capturing modal close and dismiss events.
+ *
+ * Usage:
+ * Apply `odxModal` to an `<ng-template>` element and bind it to modal options.
+ */
 class ModalDirective {
     constructor() {
         this.modalService = inject(ModalService);
         this.modalRef = null;
         this.template = inject(TemplateRef);
+        /**
+         * Event emitter for closing the modal.
+         *
+         * @emits {any} The result of the modal close event.
+         */
         // eslint-disable-next-line @angular-eslint/no-output-rename
         this.modalClose = new EventEmitter();
+        /**
+         * Event emitter for dismissing the modal.
+         *
+         * @emits {any} The result of the modal dismiss event.
+         */
         // eslint-disable-next-line @angular-eslint/no-output-rename
         this.modalDismiss = new EventEmitter();
     }
@@ -419,11 +665,17 @@ class ModalDirective {
     ngOnDestroy() {
         this.dismiss();
     }
+    /**
+     * Opens the modal based on the provided template and options. Binds modal result and dismissal outputs to EventEmitter properties.
+     */
     open() {
         this.modalRef = this.modalService.open(this.template, this.modalOptions || {});
         this.modalRef.onClose$.subscribe((result) => this.modalClose.next(result));
         this.modalRef.onDismiss$.subscribe((result) => this.modalDismiss.next(result));
     }
+    /**
+     * Dismisses the currently opened modal.
+     */
     dismiss() {
         this.modalRef?.dismiss();
     }