@progress/kendo-angular-popup 19.1.1 → 19.1.2-develop.2

package/fesm2022/progress-kendo-angular-popup.mjs

@@ -321,15 +321,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
- *
- * The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE. See [Support for Document Scale]({% slug documentscale_popup %}).
- *
- * > Using this token is not necessary for user-applied browser zoom.
- *
- * <demo metaUrl="popup/scale/" height="300"></demo>
+ * Use the `SCALE` injection token to set the document scale when you use a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
  *
+ * The document or container scale is required to compute the popup position correctly. Set the value for `SCALE` to ensure correct positioning. See [Support for Document Scale]({% slug documentscale_popup %}).
  *
+ * > You do not need to use this token for user-applied browser zoom.
  */
 const SCALE = new InjectionToken('Popup Document Scale');
 
@@ -688,8 +684,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749539908,
-    version: '19.1.1',
+    publishDate: 1749820265,
+    version: '19.1.2-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -700,19 +696,11 @@ const ANIMATION_CONTAINER_FIXED = 'k-animation-container-fixed';
  * Represents the [Kendo UI Popup component for Angular]({% slug overview_popup %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <button #anchor (click)="show=!show">Toggle</button>
- *  <kendo-popup *ngIf="show" [anchor]="anchor">
- *      <strong>Popup content!</strong>
- *  </kendo-popup>
- * `
- * })
- * class AppComponent {
- *   public show: boolean = false;
- * }
+ * ```html
+ * <button #anchor (click)="show = !show">Toggle</button>
+ * <kendo-popup *ngIf="show" [anchor]="anchor">
+ *   <strong>Popup content!</strong>
+ * </kendo-popup>
  * ```
  */
 class PopupComponent {
@@ -726,162 +714,68 @@ class PopupComponent {
     _renderer;
     _zone;
     /**
-     * Controls the Popup animation. By default, the opening and closing animations
-     * are enabled ([see example]({% slug animations_popup %})).
+     * Controls the Popup animation. By default, the opening and closing animations are enabled ([see example]({% slug animations_popup %})).
+     * @default true
      */
     animate = true;
     /**
-     * Specifies the element that will be used as an anchor. The Popup opens next to that element.
-     * ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-components)).
+     * Sets the element to use as an anchor. The Popup opens next to this element. ([See example]({% slug alignmentpositioning_popup %}#toc-aligning-to-components)).
      */
     anchor;
     /**
-     * Specifies the anchor pivot point
-     * ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
+     * Sets the anchor pivot point ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
+     * @default '{ horizontal: "left", vertical: "bottom" }'
      */
     anchorAlign = { horizontal: 'left', vertical: 'bottom' };
     /**
-     * Configures the collision behavior of the Popup
-     * ([see example]({% slug viewportboundarydetection_popup %})).
+     * Sets the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
+     * @default '{ horizontal: "fit", vertical: "flip" }'
      */
     collision = { horizontal: 'fit', vertical: 'flip' };
     /**
-     * Specifies the pivot point of the Popup
-     * ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
+     * Sets the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).
+     * @default '{ horizontal: "left", vertical: "top" }'
      */
     popupAlign = { horizontal: 'left', vertical: 'top' };
     /**
-     * Controls whether the component will copy the `anchor` font styles.
+     * Controls whether the component copies the `anchor` font styles.
+     * @default false
      */
     copyAnchorStyles = false;
     /**
-     * Specifies a list of CSS classes that will be added to the internal
-     * animated element ([see example]({% slug appearance_popup %})).
+     * Sets a list of CSS classes to add to the internal animated element ([see example]({% slug appearance_popup %})).
      *
      * > To style the content of the Popup, use this property binding.
      */
     // eslint-disable-next-line @typescript-eslint/ban-types
     popupClass;
     /**
-     * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
-     * To make the Popup acquire absolute positioning, set this option to `absolute`.
+     * Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
      *
-     * > If you need to support mobile browsers with the zoom option,
-     * use the `absolute` positioning of the Popup.
-     *
-     * @example
-     * ```html
-     * <style>
-     *  .parent-content {
-     *     position: relative;
-     *     width: 200px;
-     *     height: 200px;
-     *     overflow: auto;
-     *     margin: 200px auto;
-     *     border: 1px solid red;
-     *  }
-     *  .content {
-     *     position: relative;
-     *     width: 100px;
-     *     height: 100px;
-     *     overflow: auto;
-     *     margin: 300px;
-     *     border: 1px solid blue;
-     *  }
-     *  .anchor {
-     *     position: absolute;
-     *     top: 200px;
-     *     left: 200px;
-     *  }
-     * </style>
-     * ```
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *   <div class="example-config">
-     *      Position mode:
-     *      <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
-     *      <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
-     *   </div>
-     *   <div class="example-config">
-     *       Append to
-     *       <label>
-     *           <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
-     *           Root component
-     *       </label>
-     *       <label>
-     *           <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
-     *           <span [style.color]="'red'">Red Container</span>
-     *       </label>
-     *       <label>
-     *           <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
-     *           <span [style.color]="'blue'">Blue Container</span>
-     *       </label>
-     *   </div>
-     *   <div class="example">
-     *     <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
-     *         <div class="content" [scrollLeft]="170" [scrollTop]="165">
-     *           <button #anchor class="anchor" (click)="show = !show">Toggle</button>
-     *           <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
-     *             <ul>
-     *                 <li>Item1</li>
-     *                 <li>Item2</li>
-     *                 <li>Item3</li>
-     *             </ul>
-     *           </kendo-popup>
-     *           <span [style.position]="'absolute'" [style.top.px]="400" [style.left.px]="400">Bottom/Right</span>
-     *         </div>
-     *         <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
-     *           <ul>
-     *               <li>Item1</li>
-     *               <li>Item2</li>
-     *               <li>Item3</li>
-     *           </ul>
-     *         </kendo-popup>
-     *         <span [style.position]="'absolute'" [style.top.px]="600" [style.left.px]="600">Bottom/Right</span>
-     *     </div>
-     *     <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
-     *       <ul>
-     *           <li>Item1</li>
-     *           <li>Item2</li>
-     *           <li>Item3</li>
-     *       </ul>
-     *     </kendo-popup>
-     *   </div>
-     * `
-     * })
-     * class AppComponent {
-     *   public checked: number = 3;
-     *   public mode: string = 'absolute';
-     *   public show: boolean = true;
-     * }
-     * ```
+     * To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
+     * @default 'fixed'
      */
     positionMode = 'fixed';
     /**
-     * Specifies the absolute position of the element
-     * ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-absolute-points)).
-     * The Popup opens next to that point. The Popup pivot point is defined by the `popupAlign` configuration option.
-     * The boundary detection is applied by using the window viewport.
+     * Sets the absolute position of the element ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-absolute-points)).
+     * The Popup opens next to this point. The Popup pivot point is defined by the `popupAlign` option. The boundary detection uses the window viewport.
+     * @default '{ left: -10000, top: 0 }'
      */
     offset = DEFAULT_OFFSET;
     /**
-     * Specifies the margin value that will be added to the popup dimensions in pixels and leaves a blank space
-     * between the popup and the anchor ([see example]({% slug alignmentpositioning_popup %}#toc-adding-a-margin)).
+     * Sets the margin value in pixels. Adds blank space between the Popup and the anchor ([see example]({% slug alignmentpositioning_popup %}#toc-adding-a-margin)).
      */
     margin;
     /**
-     * Fires when the anchor is scrolled outside the screen boundaries.
-     * ([see example]({% slug closing_popup %}#toc-after-leaving-the-viewport)).
+     * Fires when the anchor scrolls outside the screen boundaries. ([See example]({% slug closing_popup %}#toc-after-leaving-the-viewport)).
      */
     anchorViewportLeave = new EventEmitter();
     /**
-     * Fires after the component is closed.
+     * Fires after the component closes.
      */
     close = new EventEmitter();
     /**
-     * Fires after the component is opened and the opening animation ends.
+     * Fires after the component opens and the opening animation ends.
      */
     open = new EventEmitter();
     /**
@@ -1141,15 +1035,13 @@ const removeElement = (element) => {
     }
 };
 /**
- * Used to inject the Popup container. If not provided, the first root component of
- * the application is used.
+ * Injects the Popup container. If not set, uses the first root component of the application.
  *
- * > The `POPUP_CONTAINER` can be used only with the [`PopupService`](slug:service_popup) class.
+ * > Use `POPUP_CONTAINER` only with the `PopupService` class ([see example](slug:service_popup)).
  *
- * In case you are using standalone components:
+ * In standalone components:
  *
  * @example
- *
  * ```ts
  * import { Component } from '@angular/core';
  * import { KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
@@ -1170,19 +1062,18 @@ const removeElement = (element) => {
  * export class AppComponent {}
  * ```
  *
- * In case you are using an NgModule-based application:
+ * In NgModule-based applications:
  *
  * @example
- *
- * ```ts-no-run
+ * ```ts
  * import { PopupModule, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { ElementRef, NgModule } from '@angular/core';
  * import { AppComponent } from './app.component';
  *
  * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, PopupModule], // import Popup module
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, PopupModule],
  *     bootstrap:    [AppComponent],
  *     providers: [{
  *       provide: POPUP_CONTAINER,
@@ -1199,8 +1090,7 @@ const removeElement = (element) => {
  */
 const POPUP_CONTAINER = new InjectionToken('Popup Container');
 /**
- * A service for opening Popup components dynamically
- * ([see example]({% slug service_popup %})).
+ * Provides a service for opening Popup components dynamically ([see example]({% slug service_popup %})).
  *
  * @export
  * @class PopupService
@@ -1211,9 +1101,9 @@ class PopupService {
     injector;
     container;
     /**
-     * Gets the root view container into which the component will be injected.
+     * Gets the root view container for injecting the component.
      *
-     * @returns {ComponentRef<any>}
+     * @returns {ComponentRef<any>} The root view container reference.
      */
     get rootViewContainer() {
         // https://github.com/angular/angular/blob/4.0.x/packages/core/src/application_ref.ts#L571
@@ -1227,9 +1117,9 @@ class PopupService {
         `);
     }
     /**
-     * Sets or gets the HTML element of the root component container.
+     * Gets the HTML element of the root component container.
      *
-     * @returns {HTMLElement}
+     * @returns {HTMLElement} The root container HTML element.
      */
     get rootViewContainerNode() {
         return this.container ? this.container.nativeElement : this.getComponentRootNode(this.rootViewContainer);
@@ -1241,43 +1131,10 @@ class PopupService {
         this.container = container;
     }
     /**
-     * Opens a Popup component. Created Popups are mounted
-     * in the DOM directly in the root application component.
-     *
-     * @param {PopupSettings} options - The options which define the Popup.
-     * @returns {ComponentRef<PopupComponent>} - A reference to the Popup object.
-     *
-     * @example
+     * Opens a Popup component. The Popup mounts in the DOM under the root application component.
      *
-     * ```ts-no-run
-     * _@Component({
-     *   selector: 'my-app',
-     *   template: `
-     *     <ng-template #template>
-     *      Popup content
-     *     </ng-template>
-     *     <button #anchor kendoButton (click)="open(anchor, template)">Open</button>
-     *   `
-     * })
-     * export class AppComponent {
-     *     public popupRef: PopupRef;
-     *
-     *     constructor( private popupService: PopupService ) {}
-     *
-     *     public open(anchor: ElementRef, template: TemplateRef<any>): void {
-     *         if (this.popupRef) {
-     *              this.popupRef.close();
-     *              this.popupRef = null;
-     *              return;
-     *         }
-     *
-     *         this.popupRef = this.popupService.open({
-     *           anchor: anchor,
-     *           content: template
-     *         });
-     *     }
-     * }
-     * ```
+     * @param {PopupSettings} options - The options for the Popup.
+     * @returns {ComponentRef<PopupComponent>} A reference to the Popup object.
      */
     open(options = {}) {
         const { component, nodes } = this.contentFrom(options.content);
@@ -1324,28 +1181,28 @@ class PopupService {
     /**
      * Gets the HTML element for a component reference.
      *
-     * @param {ComponentRef<any>} componentRef
-     * @returns {HTMLElement}
+     * @param {ComponentRef<any>} componentRef The component reference.
+     * @returns {HTMLElement} The root HTML element of the component.
      */
     getComponentRootNode(componentRef) {
         return componentRef.location.nativeElement;
     }
     /**
-     * Gets the `ComponentFactory` instance by its type.
+     * Gets the `ComponentFactory` instance by type.
      *
-     * @param {*} componentClass
-     * @param {*} nodes
-     * @returns {ComponentRef<any>}
+     * @param {*} componentClass The component class.
+     * @returns {ComponentFactory<any>} The component factory instance.
      */
     getComponentFactory(componentClass) {
         return this.componentFactoryResolver.resolveComponentFactory(componentClass);
     }
     /**
-     * Creates a component reference from a `Component` type class.
+     * Creates a component reference from a `Component` class.
      *
-     * @param {*} componentClass
-     * @param {*} nodes
-     * @returns {ComponentRef<any>}
+     * @param {*} componentClass The component class.
+     * @param {*} nodes The nodes to project.
+     * @param {ViewContainerRef} container The container to use.
+     * @returns {ComponentRef<any>} The created component reference.
      */
     createComponent(componentClass, nodes, container) {
         const factory = this.getComponentFactory(componentClass);
@@ -1359,11 +1216,11 @@ class PopupService {
         }
     }
     /**
-     * Projects the inputs on the component.
+     * Projects the input options onto the component instance.
      *
-     * @param {ComponentRef<any>} component
-     * @param {*} options
-     * @returns {ComponentRef<any>}
+     * @param {ComponentRef<any>} component The component reference.
+     * @param {*} options The options to project.
+     * @returns {ComponentRef<any>} The updated component reference.
      */
     projectComponentInputs(component, options) {
         Object.getOwnPropertyNames(options)
@@ -1374,10 +1231,10 @@ class PopupService {
         return component;
     }
     /**
-     * Gets the component and the nodes to append from the `content` option.
+     * Gets the component and nodes to append from the `content` option.
      *
-     * @param {*} content
-     * @returns {any}
+     * @param {*} content The content to use.
+     * @returns {any} The component and nodes for projection.
      */
     contentFrom(content) {
         if (!content || content instanceof TemplateRef) {
@@ -1416,11 +1273,9 @@ const KENDO_POPUP = [
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Popup component.
+ * Required for adding all Popup features in NgModule-based Angular applications.
  *
  * @example
- *
  * ```ts-no-run
  * // Import the Popup module
  * import { PopupModule } from '@progress/kendo-angular-popup';

package/models/align.interface.d.ts

@@ -4,11 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import { AlignStrategy } from '@progress/kendo-popup-common';
 /**
- * Defines the horizontal and vertical align point of the component.
+ * Specifies the horizontal and vertical align points for the component.
  */
 export interface Align extends AlignStrategy {
     /**
-     * Defines the possible horizontal point values that are relative to the anchor or the Popup.
+     * Specifies the horizontal point relative to the anchor or the Popup.
      *
      * The available options are:
      * - `left`—Uses the leftmost point of the `anchor` element.
@@ -17,7 +17,7 @@ export interface Align extends AlignStrategy {
      */
     horizontal: 'left' | 'center' | 'right';
     /**
-     * Defines the possible vertical point values that are relative to the anchor or the Popup.
+     * Specifies the vertical point relative to the anchor or the Popup.
      *
      * The available options are:
      * - `top`—Uses the top point of the `anchor` element.

package/models/collision.interface.d.ts

@@ -4,15 +4,15 @@
 *-------------------------------------------------------------------------------------------*/
 import { CollisionType } from './collision.type';
 /**
- * Defines the horizontal and vertical collision behavior of the component.
+ * Defines the horizontal and vertical collision behavior for the component.
  */
 export interface Collision {
     /**
-     * Defines the horizontal collision behavior of the component.
+     * Sets the horizontal collision behavior for the component.
      */
     horizontal: CollisionType;
     /**
-     * Defines the vertical collision behavior of the component.
+     * Sets the vertical collision behavior for the component.
      */
     vertical: CollisionType;
 }

package/models/collision.type.d.ts

@@ -5,7 +5,6 @@
 /**
  * Defines the possible collision behavior when the Popup is not fully visible.
  *
- * The available options are:
  * - `fit`—Moves the Popup horizontally until it is fully displayed in the viewport.
  * - `flip`—Flips the Popup position based on the origin and the position properties.
  */

package/models/margin.interface.d.ts

@@ -4,15 +4,15 @@
 *-------------------------------------------------------------------------------------------*/
 import { MarginSettings } from '@progress/kendo-popup-common';
 /**
- * Defines the horizontal and the vertical margin offset of the component.
+ * Defines the horizontal and vertical margin offsets of the component.
  */
 export interface Margin extends MarginSettings {
     /**
-     * Defines the possible horizontal margin value.
+     * Sets the horizontal margin value.
      */
     horizontal: number;
     /**
-     * Defines the possible vertical margin value.
+     * Sets the vertical margin value.
      */
     vertical: number;
 }

package/models/offset.interface.d.ts

@@ -4,15 +4,15 @@
 *-------------------------------------------------------------------------------------------*/
 import { OffsetPosition } from '@progress/kendo-popup-common';
 /**
- * The offset position of the Popup.
+ * Defines the offset position of the Popup.
  */
 export interface Offset extends OffsetPosition {
     /**
-     * Defines the top position of the Popup.
+     * Sets the top position of the Popup.
      */
     top: number;
     /**
-     * Defines the left position of the Popup.
+     * Sets the left position of the Popup.
      */
     left: number;
 }

package/models/popup-animation.interface.d.ts

@@ -7,20 +7,26 @@
  */
 export interface PopupAnimation {
     /**
-     * The type of the animation.
+     * Sets the type of the animation.
      * @default 'slide'
      */
     type?: AnimationType;
     /**
-     * The animation duration in milliseconds.
+     * Sets the animation duration in milliseconds.
      * @default 100
      */
     duration: number;
     /**
-     * The animation direction. Applicable if the type is set to `slide` or `expand`.
+     * Sets the animation direction. Applies if the type is `slide` or `expand`.
      * @default 'down'
      */
     direction: AnimationDirection;
 }
+/**
+ * Defines the possible animation types for the Popup.
+ */
 export type AnimationType = 'slide' | 'expand' | 'zoom' | 'fade';
+/**
+ * Defines the possible animation directions for the Popup.
+ */
 export type AnimationDirection = 'down' | 'up' | 'left' | 'right';

package/models/popup-ref.d.ts

@@ -6,21 +6,19 @@ import { ComponentRef, EventEmitter } from '@angular/core';
 import { PopupComponent } from '../popup.component';
 /**
  * Holds references to the object instance of the Popup.
- * Controls the Popups which are opened through `PopupService`
- * ([see example]({% slug api_popup_popupservice %}#toc-open)).
+ * Controls Popups opened through `PopupService` ([see example]({% slug api_popup_popupservice %}#toc-open)).
  */
 export interface PopupRef {
     /**
-     * A reference to the Popup instance.
+     * Provides a reference to the Popup instance.
      */
     popup: ComponentRef<PopupComponent>;
     /**
-     * A reference to the HTML element of the Popup.
+     * Provides a reference to the HTML element of the Popup.
      */
     popupElement: HTMLElement;
     /**
-     * A reference to the child component of the Popup. Available when the
-     * Popup is opened with [`content`]({% slug service_popup %}#toc-using-components).
+     * Provides a reference to the child component of the Popup. Available when the Popup opens with [`content`]({% slug service_popup %}#toc-using-components).
      */
     content: ComponentRef<any>;
     /**
@@ -28,20 +26,19 @@ export interface PopupRef {
      */
     close: Function;
     /**
-     * Fires when the anchor is scrolled outside the screen boundaries
-     * ([see example]({% slug closing_popup %}#toc-after-leaving-the-viewport)).
+     * Fires when the anchor scrolls outside the screen boundaries ([see example]({% slug closing_popup %}#toc-after-leaving-the-viewport)).
      */
     popupAnchorViewportLeave: EventEmitter<any>;
     /**
-     * Fires after the component is closed.
+     * Fires after the component closes.
      */
     popupClose: EventEmitter<any>;
     /**
-     * Fires after the component is opened and the opening animation ends.
+     * Fires after the component opens and the opening animation ends.
      */
     popupOpen: EventEmitter<any>;
     /**
-     * Fires after the component is opened and the Popup is positioned.
+     * Fires after the component opens and the Popup is positioned.
      */
     popupPositionChange: EventEmitter<any>;
 }