@progress/kendo-angular-tooltip 25.0.0-develop.22 → 25.0.0-develop.23

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

@@ -302,8 +302,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1785927034,
-    version: '25.0.0-develop.22',
+    publishDate: 1785940435,
+    version: '25.0.0-develop.23',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -427,6 +427,32 @@ class PopoverComponent {
      * @hidden
      */
     anchor;
+    /**
+     * Specifies CSS classes to apply to the Popover element.
+     * Supports the same values as [ngClass](https://angular.dev/api/common/NgClass).
+     */
+    popupClass;
+    /**
+     * Provides screen boundary detection when the Popover is shown.
+     */
+    set collision(value) {
+        this._collision.set(value);
+    }
+    get collision() {
+        return this._collision();
+    }
+    /**
+     * Configures the popup settings for the Popover.
+     * Accepts a `PopupSettings` object with `popupClass` and `collision` properties.
+     */
+    set popupSettings(value) {
+        if (value?.popupClass !== undefined) {
+            this.popupClass = value.popupClass;
+        }
+        if (value?.collision !== undefined) {
+            this._collision.set(value.collision);
+        }
+    }
     /**
      * Specifies the position of the Popover relative to its anchor element. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/positioning).
      *
@@ -631,6 +657,7 @@ class PopoverComponent {
      * @hidden
      */
     popoverId = '';
+    _collision = signal(null, ...(ngDevMode ? [{ debugName: "_collision" }] : []));
     _position = signal('right', ...(ngDevMode ? [{ debugName: "_position" }] : []));
     _offset = signal(6, ...(ngDevMode ? [{ debugName: "_offset" }] : []));
     _widthValue = signal('auto', ...(ngDevMode ? [{ debugName: "_widthValue" }] : []));
@@ -727,7 +754,7 @@ class PopoverComponent {
         this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: PopoverComponent, isStandalone: true, selector: "kendo-popover", inputs: { position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden", closeOnKeyDown: "closeOnKeyDown" }, host: { properties: { "attr.dir": "this.direction", "class.k-hidden": "this.isHidden", "attr.aria-hidden": "this.hasAttributeHidden", "style.width": "this._width", "style.height": "this._height" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: PopoverComponent, isStandalone: true, selector: "kendo-popover", inputs: { popupClass: "popupClass", collision: "collision", popupSettings: "popupSettings", position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden", closeOnKeyDown: "closeOnKeyDown" }, host: { properties: { "attr.dir": "this.direction", "class.k-hidden": "this.isHidden", "attr.aria-hidden": "this.hasAttributeHidden", "style.width": "this._width", "style.height": "this._height" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -735,7 +762,7 @@ class PopoverComponent {
             }
         ], queries: [{ propertyName: "titleTemplate", first: true, predicate: PopoverTitleTemplateDirective, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: PopoverBodyTemplateDirective, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: PopoverActionsTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popoverWrapper", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "titleTemplateWrapper", first: true, predicate: ["titleTemplateWrapper"], descendants: true }, { propertyName: "bodyTemplateWrapper", first: true, predicate: ["bodyTemplateWrapper"], descendants: true }], ngImport: i0, template: `
     @if (visible) {
-      <div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
+      <div #popoverWrapper class="k-popover k-popup" [ngClass]="popupClass" [ngStyle]="{'width': width, 'height': height}">
         @if (callout) {
           <div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
         }
@@ -836,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     ],
                     template: `
     @if (visible) {
-      <div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
+      <div #popoverWrapper class="k-popover k-popup" [ngClass]="popupClass" [ngStyle]="{'width': width, 'height': height}">
         @if (callout) {
           <div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
         }
@@ -927,7 +954,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgStyle, NgClass, NgTemplateOutlet]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { position: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { popupClass: [{
+                type: Input
+            }], collision: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], position: [{
                 type: Input
             }], offset: [{
                 type: Input
@@ -993,6 +1026,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
             }] } });
 
 const validShowOptions = ['hover', 'click', 'none', 'focus'];
+const flipMap = {
+    top: { vertical: 'bottom', horizontal: 'top' },
+    bottom: { vertical: 'top', horizontal: 'bottom' },
+    left: { horizontal: 'right', vertical: 'left' },
+    right: { horizontal: 'left', vertical: 'right' }
+};
 /**
  * @hidden
  */
@@ -1125,6 +1164,7 @@ class PopoverDirectivesBase {
         const popupAlign = alignSettings.popupAlign;
         const popupMargin = alignSettings.popupMargin;
         const _animation = popoverComp.animation;
+        const _collision = (popoverComp.collision || { horizontal: 'flip', vertical: 'flip' });
         this.popupRef = this.popupService.open({
             anchor: { nativeElement: this.anchor },
             animate: _animation,
@@ -1132,7 +1172,7 @@ class PopoverDirectivesBase {
             popupAlign,
             anchorAlign,
             margin: popupMargin,
-            collision: { horizontal: 'fit', vertical: 'fit' }
+            collision: _collision
         });
         const popupInstance = this.popupRef.content.instance;
         // Avoid adding the default k-popup class which leads to visual and rendering discrepancies
@@ -1154,6 +1194,20 @@ class PopoverDirectivesBase {
             this.hide();
         }));
         this.applySettings(this.popupRef.content, popoverComp);
+        this._popupSubs.add(this.popupRef.popupPositionChange.subscribe(({ flip }) => {
+            const configuredPos = popoverComp.position;
+            let actualPos = configuredPos;
+            if (flip.horizontal) {
+                actualPos = flipMap[actualPos].horizontal;
+            }
+            if (flip.vertical) {
+                actualPos = flipMap[actualPos].vertical;
+            }
+            if (actualPos !== popupInstance.position) {
+                popupInstance.position = actualPos;
+                this.popupRef.content.changeDetectorRef.detectChanges();
+            }
+        }));
         this.monitorPopup();
         this.initializeCompletionEvents(popoverComp, this.anchor);
     }
@@ -1198,6 +1252,7 @@ class PopoverDirectivesBase {
         content.visible = true;
         content.anchor = this.anchor;
         content.position = popover.position;
+        content.popupClass = popover.popupClass;
         content.offset = popover.offset;
         content.width = popover.width;
         content.height = popover.height;

package/index.d.ts

@@ -5,7 +5,7 @@
 import { ComponentMessages, LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from '@angular/core';
 import { TemplateRef, OnInit, OnDestroy, EventEmitter, ElementRef, Renderer2, NgZone, ComponentRef, SimpleChanges, ChangeDetectorRef, InjectionToken, OnChanges, AfterViewChecked, Injector } from '@angular/core';
-import { PopupRef, PopupAnimation, PopupService, Collision } from '@progress/kendo-angular-popup';
+import { PopupRef, PopupAnimation, Collision, PopupService } from '@progress/kendo-angular-popup';
 import { PreventableEvent } from '@progress/kendo-angular-common';
 import { Observable, Subscription } from 'rxjs';
 import { SVGIcon } from '@progress/kendo-svg-icons';
@@ -177,6 +177,21 @@ declare class PopoverHiddenEvent {
  */
 type PopoverAnimation = PopupAnimation | boolean;
 
+/**
+ * Configures the popup settings for the Popover component.
+ */
+interface PopupSettings {
+    /**
+     * Specifies CSS classes to apply to the Popup element of the Popover.
+     * Supports the same values as [ngClass](https://angular.dev/api/common/NgClass).
+     */
+    popupClass?: string | string[] | Set<string>;
+    /**
+     * Provides screen boundary detection when the Popover is shown.
+     */
+    collision?: Collision;
+}
+
 /**
  * Represents the [Kendo UI Popover component for Angular](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover).
  * Displays additional information related to a target element.
@@ -198,6 +213,21 @@ declare class PopoverComponent implements OnInit, OnDestroy {
      * @hidden
      */
     anchor: Element;
+    /**
+     * Specifies CSS classes to apply to the Popover element.
+     * Supports the same values as [ngClass](https://angular.dev/api/common/NgClass).
+     */
+    popupClass: string | string[] | Set<string>;
+    /**
+     * Provides screen boundary detection when the Popover is shown.
+     */
+    set collision(value: Collision);
+    get collision(): Collision;
+    /**
+     * Configures the popup settings for the Popover.
+     * Accepts a `PopupSettings` object with `popupClass` and `collision` properties.
+     */
+    set popupSettings(value: PopupSettings);
     /**
      * Specifies the position of the Popover relative to its anchor element. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/positioning).
      *
@@ -344,6 +374,7 @@ declare class PopoverComponent implements OnInit, OnDestroy {
      * @hidden
      */
     popoverId: string;
+    private _collision;
     private _position;
     private _offset;
     private _widthValue;
@@ -370,7 +401,7 @@ declare class PopoverComponent implements OnInit, OnDestroy {
     private keepFocusWithinComponent;
     private setAriaAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "kendo-popover", never, { "position": { "alias": "position"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "body": { "alias": "body"; "required": false; }; "callout": { "alias": "callout"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "templateData": { "alias": "templateData"; "required": false; }; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; "closeOnKeyDown": "closeOnKeyDown"; }, ["titleTemplate", "bodyTemplate", "actionsTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "kendo-popover", never, { "popupClass": { "alias": "popupClass"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "position": { "alias": "position"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "body": { "alias": "body"; "required": false; }; "callout": { "alias": "callout"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "templateData": { "alias": "templateData"; "required": false; }; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; "closeOnKeyDown": "closeOnKeyDown"; }, ["titleTemplate", "bodyTemplate", "actionsTemplate"], never, true, never>;
 }
 
 /**
@@ -1068,4 +1099,4 @@ declare class TooltipsModule {
 }
 
 export { KENDO_POPOVER, KENDO_TOOLTIP, KENDO_TOOLTIPS, LocalizedMessagesDirective, PopoverActionsTemplateDirective, PopoverAnchorDirective, PopoverBodyTemplateDirective, PopoverComponent, PopoverContainerDirective, PopoverHiddenEvent, PopoverHideEvent, PopoverModule, PopoverShowEvent, PopoverShownEvent, PopoverTitleTemplateDirective, TOOLTIP_SETTINGS, TooltipContentComponent, TooltipDirective, TooltipModule, TooltipSettings, TooltipsModule };
-export type { PopoverAnimation, PopoverDataFn, PopoverFn, PopoverShowOption, Position, ShowOption, TooltipThemeColor };
+export type { PopoverAnimation, PopoverDataFn, PopoverFn, PopoverShowOption, PopupSettings, Position, ShowOption, TooltipThemeColor };

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1785927034,
-  "version": "25.0.0-develop.22",
+  "publishDate": 1785940435,
+  "version": "25.0.0-develop.23",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-tooltip",
-  "version": "25.0.0-develop.22",
+  "version": "25.0.0-develop.23",
   "description": "Kendo UI Tooltip for Angular - A highly customizable and easily themeable tooltip from the creators developers trust for professional Angular components.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -36,7 +36,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1785927034,
+      "publishDate": 1785940435,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -46,15 +46,15 @@
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "25.0.0-develop.22",
-    "@progress/kendo-angular-l10n": "25.0.0-develop.22",
-    "@progress/kendo-angular-popup": "25.0.0-develop.22",
-    "@progress/kendo-angular-icons": "25.0.0-develop.22",
+    "@progress/kendo-angular-common": "25.0.0-develop.23",
+    "@progress/kendo-angular-l10n": "25.0.0-develop.23",
+    "@progress/kendo-angular-popup": "25.0.0-develop.23",
+    "@progress/kendo-angular-icons": "25.0.0-develop.23",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.22"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.23"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-tooltip.mjs",