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

package/esm2022/models/position-mode.mjs

@@ -3,6 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The type which defines all possible position modes of the Popup.
+ * Defines all possible values for the `positionMode` property of the Popup.
  */
 export {};

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export 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'
 };

package/esm2022/popup.component.mjs

@@ -29,19 +29,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>
  * ```
  */
 export class PopupComponent {
@@ -55,162 +47,68 @@ export 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();
     /**

package/esm2022/popup.module.mjs

@@ -11,11 +11,9 @@ import * as i1 from "@progress/kendo-angular-common";
 import * as i2 from "./popup.component";
 //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/esm2022/popup.service.mjs

@@ -11,15 +11,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';
@@ -40,19 +38,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,
@@ -69,8 +66,7 @@ const removeElement = (element) => {
  */
 export 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
@@ -81,9 +77,9 @@ export 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
@@ -97,9 +93,9 @@ export 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);
@@ -111,43 +107,10 @@ export 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
-     *
-     * ```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;
-     *         }
+     * Opens a Popup component. The Popup mounts in the DOM under the root application component.
      *
-     *         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);
@@ -194,28 +157,28 @@ export 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);
@@ -229,11 +192,11 @@ export 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)
@@ -244,10 +207,10 @@ export 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) {

package/esm2022/scale.mjs

@@ -4,14 +4,10 @@
 *-------------------------------------------------------------------------------------------*/
 import { InjectionToken } from '@angular/core';
 /**
- * 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.
  */
 export const SCALE = new InjectionToken('Popup Document Scale');