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

package/models/popup-settings.d.ts

@@ -10,67 +10,56 @@ import { Offset } from './offset.interface';
 import { PositionMode } from './position-mode';
 import { PopupAnimation } from './popup-animation.interface';
 /**
- * The settings for the Popup when the Popup is opened through `PopupService`.
- *
- * For an example on sample usage, refer to the
- * [`PopupService.open`]({% slug api_popup_popupservice %}#toc-open) method.
+ * Defines the settings for the Popup when you open it through `PopupService` ([see example](slug:api_popup_popupservice#open)).
  */
 export interface PopupSettings {
     /**
-     * Controls the Popup animation. By default, the open and close animations are enabled
-     * ([see example]({% slug animations_popup %})).
+     * Controls the Popup animation. By default, the open and close animations are enabled ([see example]({% slug animations_popup %})).
      */
     animate?: boolean | PopupAnimation;
     /**
-     * Specifies the element which will be used as an anchor. The Popup opens next to that element.
+     * Sets the element to use as an anchor. The Popup opens next to this element.
      */
     anchor?: ElementRef | HTMLElement;
     /**
-     * Defines the container to which the Popup will be appended.
+     * Sets the container to which the Popup appends.
      */
     appendTo?: ViewContainerRef;
     /**
-     * Specifies the anchor pivot point
-     * ([see example]({% slug alignmentpositioning_popup %})).
+     * Sets the anchor pivot point ([see example]({% slug alignmentpositioning_popup %})).
      */
     anchorAlign?: Align;
     /**
-     * Defines the content of the Popup.
+     * Sets the content of the Popup.
      */
     content?: TemplateRef<any> | Function;
     /**
-     * Configures the collision behavior of the Popup
-     * ([see example]({% slug viewportboundarydetection_popup %}).
+     * Sets the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
      */
     collision?: Collision;
     /**
-     * Configures the margin value that will be added to the popup dimensions
-     * in pixels and leaves a blank space between the popup and the anchor.
+     * Sets the margin value in pixels. Adds blank space between the Popup and the anchor.
      */
     margin?: Margin;
     /**
-     * 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.
+     * To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
      */
     positionMode?: PositionMode;
     /**
-     * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
+     * Sets the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
      */
     popupAlign?: Align;
     /**
-     * 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.
      */
     popupClass?: string | Array<string> | Object;
     /**
-     * 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 pivot point of the Popup 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 pivot point of the Popup is defined by the `popupAlign` option. The boundary detection uses the window viewport.
      */
     offset?: Offset;
 }

package/models/position-mode.d.ts

@@ -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 type PositionMode = 'absolute' | 'fixed';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-popup",
-  "version": "19.1.1",
+  "version": "19.1.2-develop.2",
   "description": "Kendo UI Angular Popup component - an easily customized popup from the most trusted provider of professional Angular components.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1749539908,
+      "publishDate": 1749820265,
       "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"
     }
   },
@@ -28,14 +28,14 @@
     "@angular/common": "16 - 20",
     "@angular/core": "16 - 20",
     "@angular/platform-browser": "16 - 20",
-    "@progress/kendo-angular-common": "19.1.1",
+    "@progress/kendo-angular-common": "19.1.2-develop.2",
     "@progress/kendo-licensing": "^1.5.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "@progress/kendo-popup-common": "^1.7.0",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.1.1"
+    "@progress/kendo-angular-schematics": "19.1.2-develop.2"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-popup.mjs",

package/popup.component.d.ts

@@ -21,19 +21,11 @@ import * as i0 from "@angular/core";
  * 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 declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
@@ -47,161 +39,67 @@ export declare class PopupComponent implements AfterViewInit, OnInit, OnChanges,
     private _renderer;
     private _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: boolean | PopupAnimation;
     /**
-     * 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: ElementRef | HTMLElement;
     /**
-     * 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: Align;
     /**
-     * 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: Collision;
     /**
-     * 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: Align;
     /**
-     * Controls whether the component will copy the `anchor` font styles.
+     * Controls whether the component copies the `anchor` font styles.
+     * @default false
      */
     copyAnchorStyles: boolean;
     /**
-     * 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.
      */
     popupClass: string | Array<string> | Object;
     /**
-     * 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: PositionMode;
     /**
-     * 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: 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: 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: EventEmitter<any>;
     /**
-     * Fires after the component is closed.
+     * Fires after the component closes.
      */
     close: EventEmitter<any>;
     /**
-     * Fires after the component is opened and the opening animation ends.
+     * Fires after the component opens and the opening animation ends.
      */
     open: EventEmitter<any>;
     /**

package/popup.module.d.ts

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

@@ -7,15 +7,13 @@ import { PopupSettings } from './models/popup-settings';
 import { PopupRef } from './models/popup-ref';
 import * as i0 from "@angular/core";
 /**
- * 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';
@@ -36,19 +34,18 @@ import * as i0 from "@angular/core";
  * 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,
@@ -65,8 +62,7 @@ import * as i0 from "@angular/core";
  */
 export declare const POPUP_CONTAINER: InjectionToken<ElementRef<any>>;
 /**
- * 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
@@ -77,95 +73,62 @@ export declare class PopupService {
     private injector;
     private 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.
      */
     private get rootViewContainer();
     /**
-     * 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(): HTMLElement;
     constructor(applicationRef: ApplicationRef, componentFactoryResolver: ComponentFactoryResolver, injector: Injector, container: ElementRef);
     /**
-     * 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?: PopupSettings): PopupRef;
     private appendPopup;
     /**
      * 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.
      */
     private getComponentRootNode;
     /**
-     * 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.
      */
     private getComponentFactory;
     /**
-     * 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.
      */
     private createComponent;
     /**
-     * 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.
      */
     private projectComponentInputs;
     /**
-     * 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.
      */
     private contentFrom;
     static ɵfac: i0.ɵɵFactoryDeclaration<PopupService, [null, null, null, { optional: true; }]>;

package/scale.d.ts

@@ -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 declare const SCALE: InjectionToken<number>;