@progress/kendo-angular-common 23.4.0-develop.4 → 24.0.0-develop.2

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

@@ -1103,25 +1103,34 @@ class WatermarkOverlayComponent {
     isMobile = false;
     isNarrow = false;
     isCloseHovered = false;
+    isCTAHovered = false;
     bannerMounted = false;
     get messages() {
-        return [
-            this.primaryMessage, ...this.extraMessages
-        ];
+        return [this.primaryMessage, ...this.extraMessages];
     }
     extraMessages = [];
     get primaryMessage() {
-        return this.licenseMessage || {
+        return (this.licenseMessage || {
             severity: 'ERROR',
             productName: '',
             code: '',
             message: '',
             notificationTitle: 'License key missing for Kendo UI for Angular.',
             notificationBody: `We couldn't verify your <a href="${this.licenseKeyUrl}">license key</a> for Kendo UI for Angular.` +
-                `Please see the browser console for details and resolution steps.`
-        };
+                `Please see the browser console for details and resolution steps.`,
+        });
     }
     licenseKeyUrl = licenseKeyUrl;
+    getContent(msg) {
+        const iconContent = msg.notificationIcon?.content;
+        return {
+            iconSrc: iconContent ? `data:image/svg+xml;base64,${btoa(iconContent)}` : undefined,
+            title: msg.notificationTitle || '',
+            description: msg.notificationBody || msg.notificationMessage || '',
+            buttonText: msg.callToAction?.message || 'Buy Now',
+            buttonLink: msg.callToAction?.link || 'https://prgress.co/3PyHIoH',
+        };
+    }
     unsubscribeLicenseMessage = () => {
         /* noop */
     };
@@ -1176,20 +1185,25 @@ class WatermarkOverlayComponent {
         bannerPresentOnPage = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WatermarkOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WatermarkOverlayComponent, isStandalone: true, selector: "div[kendoWatermarkOverlay]", inputs: { licenseMessage: "licenseMessage" }, host: { properties: { "style": "this.watermarkStyle" } }, viewQueries: [{ propertyName: "banner", first: true, predicate: ["banner"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WatermarkOverlayComponent, isStandalone: true, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: { licenseMessage: "licenseMessage" }, host: { properties: { "style": "this.watermarkStyle" } }, viewQueries: [{ propertyName: "banner", first: true, predicate: ["banner"], descendants: true }], ngImport: i0, template: `
         <ng-template #buttonTemplate>
-            <button [ngStyle]="{
-                backgroundColor: isCloseHovered ? '#3d3d3d14' : 'transparent',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                display: 'flex',
-                padding: '4px',
-                position: isMobile ? 'absolute' : 'static',
-                top: isMobile ? '12px' : 'auto',
-                right: isMobile ? '12px' : 'auto',
-            }"
-            title="Close" (click)="closeBanner()" (mouseenter)="isCloseHovered = true" (mouseleave)="isCloseHovered = false">
+            <button
+                [ngStyle]="{
+                    backgroundColor: isCloseHovered ? '#3d3d3d14' : 'transparent',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    padding: '4px',
+                    position: isMobile ? 'absolute' : 'static',
+                    top: isMobile ? '12px' : 'auto',
+                    right: isMobile ? '12px' : 'auto'
+                }"
+                title="Close"
+                (click)="closeBanner()"
+                (mouseenter)="isCloseHovered = true"
+                (mouseleave)="isCloseHovered = false"
+            >
                 <svg width="20" height="20" viewBox="0 0 16 16" fill="none">
                     <path
                         d="M11.9309 3.1838C12.1754 2.93933 12.5712 2.93937 12.8157 3.1838C13.0601 3.4283 13.0601 3.82407 12.8157 4.06857L8.885 7.99923L12.8166 11.9309C13.0611 12.1754 13.0611 12.5721 12.8166 12.8166C12.5721 13.0611 12.1754 13.0611 11.9309 12.8166L7.99925 8.88497L4.06859 12.8166C3.8241 13.0611 3.42732 13.0611 3.18285 12.8166C2.93862 12.5721 2.93851 12.1753 3.18285 11.9309L7.11449 7.99923L3.18382 4.06857C2.93947 3.82413 2.93955 3.42829 3.18382 3.1838C3.42831 2.9393 3.82508 2.9393 4.06957 3.1838L7.99925 7.11349L11.9309 3.1838Z"
@@ -1198,8 +1212,34 @@ class WatermarkOverlayComponent {
                 </svg>
             </button>
         </ng-template>
+        <ng-template #ctaTemplate>
+            <a
+                class="k-watermark-trial-button"
+                [attr.title]="getContent(primaryMessage).buttonText"
+                [attr.href]="getContent(primaryMessage).buttonLink"
+                target="_blank"
+                rel="noopener noreferrer"
+                [ngStyle]="{
+                    display: 'inline-flex',
+                    border: 'none',
+                    borderRadius: '4px',
+                    backgroundColor: isCTAHovered ? '#b90138' : '#eb0249',
+                    color: '#ffffff',
+                    transition: 'background-color 0.2s ease-in-out',
+                    cursor: 'pointer',
+                    padding: '4px 8px',
+                    whiteSpace: 'nowrap',
+                    textDecoration: 'none',
+                    fontFamily: 'system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif'
+                }"
+                (mouseenter)="isCTAHovered = true"
+                (mouseleave)="isCTAHovered = false"
+                >{{ getContent(primaryMessage).buttonText }}</a>
+        </ng-template>
         @if (isOpen && bannerMounted) {
-            <div #banner [ngStyle]="{
+        <div
+            #banner
+            [ngStyle]="{
                 position: 'fixed',
                 top: isNarrow ? '0' : '16px',
                 left: '50%',
@@ -1222,116 +1262,106 @@ class WatermarkOverlayComponent {
                 maxWidth: isNarrow ? 'none' : '768px',
                 width: '100%',
                 backgroundColor: '#fff',
-                padding: isMobile ? '12px' : '0',
-            }">
-                @if (isMobile) {
-                    <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
-                }
-
-                <span [ngStyle]="{
-                        display: 'flex',
-                        alignSelf: isMobile ? 'flex-start' : 'center',
-                        padding: isMobile ? '0 0 12px 0' : '9px 12px',
-                    }">
-                    <svg
-                        width="32"
-                        height="32"
-                        viewBox="0 0 32 32"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M22.702 2.1821C24.3149 2.51082 25.8077 3.27291 27.0199 4.38645C28.2321 5.49999 29.1179 6.92286 29.582 8.5021C30.012 9.9501 30.076 11.4821 29.768 12.9621C29.3228 14.9898 28.2025 16.8063 26.5904 18.1143C24.9783 19.4223 22.9699 20.1443 20.894 20.1621C20.018 20.1621 19.146 20.0361 18.308 19.7821L16.708 21.6581L15.95 22.0081H14V25.0081L13 26.0081H10V29.0081L9 30.0081H3L2 29.0081V24.3941L2.292 23.6881L12.24 13.7401C11.9577 12.8308 11.8226 11.8821 11.84 10.9301C11.8582 9.59817 12.1701 8.28666 12.7533 7.08907C13.3365 5.89147 14.1767 4.83728 15.214 4.00164C16.2514 3.166 17.4603 2.56949 18.7546 2.25464C20.0489 1.93978 21.3967 1.91633 22.702 2.1821ZM25.338 16.5821C26.5944 15.5647 27.4681 14.1509 27.816 12.5721L27.824 12.5821C28.0718 11.4277 28.0272 10.2297 27.6943 9.09691C27.3614 7.96412 26.7507 6.93248 25.9177 6.09572C25.0847 5.25896 24.0558 4.64361 22.9246 4.30557C21.7933 3.96753 20.5955 3.91753 19.44 4.1601C17.8816 4.506 16.4837 5.36334 15.4688 6.59561C14.454 7.82789 13.8806 9.36426 13.84 10.9601C13.82 11.8721 13.98 12.7761 14.318 13.6201L14.098 14.7061L4 24.8081V28.0081H8V25.0081L9 24.0081H12V21.0081L13 20.0081H15.49L17.242 17.9761L18.364 17.6961C19.1728 18.0121 20.0337 18.1736 20.902 18.1721C22.5181 18.1597 24.082 17.5991 25.338 16.5821ZM23.662 11.1181C23.8197 10.9002 23.9318 10.6527 23.9916 10.3905C24.0515 10.1283 24.0578 9.85665 24.0103 9.59192C23.9627 9.32718 23.8622 9.07476 23.7148 8.84975C23.5675 8.62474 23.3762 8.43177 23.1526 8.28238C22.9289 8.133 22.6774 8.03026 22.4131 7.98033C22.1488 7.93039 21.8771 7.93428 21.6144 7.99176C21.3516 8.04925 21.1031 8.15914 20.8838 8.31487C20.6645 8.4706 20.4789 8.66896 20.338 8.8981C20.067 9.33887 19.9774 9.86752 20.088 10.373C20.1985 10.8784 20.5007 11.3214 20.931 11.6087C21.3613 11.8961 21.8862 12.0055 22.3954 11.914C22.9047 11.8226 23.3587 11.5373 23.662 11.1181Z"
-                            fill="black"
-                        />
-                        <path
-                            d="M23.1299 16.0186L31.1387 31.0273L31.0068 31.25H14.9932L14.8604 31.0273L22.8955 16.0186H23.1299Z"
-                            fill="#FFC000"
-                            stroke="black"
-                            strokeWidth="1.5"
-                        />
-                        <rect x="22.25" y="21.2686" width="1.5" height="5" rx="0.75" fill="black" />
-                        <path
-                            d="M24 28.2686C24 27.7163 23.5523 27.2686 23 27.2686C22.4479 27.2687 22 27.7164 22 28.2686C22 28.8207 22.4479 29.2684 23 29.2686C23.5523 29.2686 24 28.8208 24 28.2686Z"
-                            fill="black"
-                        />
-                    </svg>
-                </span>
+                padding: isMobile ? '12px' : '0'
+            }"
+        >
+            @if (isMobile) {
+            <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
+            } @if (getContent(primaryMessage).iconSrc) {
+            <span
+                [ngStyle]="{
+                    display: 'flex',
+                    alignSelf: isMobile ? 'flex-start' : 'center',
+                    padding: isMobile ? '0 0 12px 0' : '9px 12px'
+                }"
+            ><img [src]="getContent(primaryMessage).iconSrc" alt="" /></span>
+            }
 
-                <div [ngStyle]="{
+            <div
+                [ngStyle]="{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '12px',
+                    padding: isMobile ? '0 0 12px 0' : '12px',
+                    flex: isMobile ? 'none' : '1'
+                }"
+            >
+                @for (msg of messages; track msg.message) {
+                <div
+                    [ngStyle]="{
                         display: 'flex',
                         flexDirection: 'column',
-                        gap: '12px',
-                        padding: isMobile ? '0 0 12px 0' : '12px',
-                        flex: isMobile ? 'none' : '1'}">
-                    @for (msg of messages; track msg.message) {
-                        <div [ngStyle]="{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '4px',
-                            flex: isMobile ? 'none' : '1'}">
-                        @if (msg.notificationTitle) {
-                            <span
-                                [ngStyle]="{
-                                fontFamily: 'system-ui, sans-serif',
-                                fontWeight: 700,
-                                fontSize: '14px',
-                                lineHeight: '142%'}"
-                            >
-                                {{ msg.notificationTitle }}
-                            </span>
-                        }
-                        <span
-                            [ngStyle]="{
+                        gap: '4px',
+                        flex: isMobile ? 'none' : '1'
+                    }"
+                >
+                    <span
+                        [ngStyle]="{
                             fontFamily: 'system-ui, sans-serif',
+                            fontWeight: 700,
                             fontSize: '14px',
-                            lineHeight: '20px',
-                            }"
-                            [innerHTML]="msg.notificationBody || msg.notificationMessage"
-                        >
-                        </span>
-                        </div>
-                    }
-                </div>
-
-                @if (!isMobile) {
-                    <div
+                            lineHeight: '142%'
+                        }"
+                    >
+                        {{ getContent(msg).title }}
+                    </span>
+                    <span
                         [ngStyle]="{
-                            display: 'flex',
-                            alignItems: 'center',
-                            padding: isMobile ? '0' : '9px 12px',
-                            gap: '16px',
-                            marginLeft: isMobile ? '0' : 'auto',
-                            width: isMobile ? '100%' : 'auto',
+                            fontFamily: 'system-ui, sans-serif',
+                            fontSize: '14px',
+                            lineHeight: '20px'
                         }"
+                        [innerHTML]="getContent(msg).description"
                     >
-                        <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
-                    </div>
+                    </span>
+                </div>
+                } @if (isMobile) {
+                <ng-container *ngTemplateOutlet="ctaTemplate"></ng-container>
                 }
             </div>
+
+            @if (!isMobile) {
+            <div
+                [ngStyle]="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: isMobile ? '0' : '9px 12px',
+                    gap: '16px',
+                    marginLeft: isMobile ? '0' : 'auto',
+                    width: isMobile ? '100%' : 'auto'
+                }"
+            >
+                <ng-container *ngTemplateOutlet="ctaTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
+            </div>
+            }
+        </div>
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WatermarkOverlayComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'div[kendoWatermarkOverlay]',
+                    selector: 'div[kendoWatermarkOverlay], kendo-watermark-overlay',
                     template: `
         <ng-template #buttonTemplate>
-            <button [ngStyle]="{
-                backgroundColor: isCloseHovered ? '#3d3d3d14' : 'transparent',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                display: 'flex',
-                padding: '4px',
-                position: isMobile ? 'absolute' : 'static',
-                top: isMobile ? '12px' : 'auto',
-                right: isMobile ? '12px' : 'auto',
-            }"
-            title="Close" (click)="closeBanner()" (mouseenter)="isCloseHovered = true" (mouseleave)="isCloseHovered = false">
+            <button
+                [ngStyle]="{
+                    backgroundColor: isCloseHovered ? '#3d3d3d14' : 'transparent',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    padding: '4px',
+                    position: isMobile ? 'absolute' : 'static',
+                    top: isMobile ? '12px' : 'auto',
+                    right: isMobile ? '12px' : 'auto'
+                }"
+                title="Close"
+                (click)="closeBanner()"
+                (mouseenter)="isCloseHovered = true"
+                (mouseleave)="isCloseHovered = false"
+            >
                 <svg width="20" height="20" viewBox="0 0 16 16" fill="none">
                     <path
                         d="M11.9309 3.1838C12.1754 2.93933 12.5712 2.93937 12.8157 3.1838C13.0601 3.4283 13.0601 3.82407 12.8157 4.06857L8.885 7.99923L12.8166 11.9309C13.0611 12.1754 13.0611 12.5721 12.8166 12.8166C12.5721 13.0611 12.1754 13.0611 11.9309 12.8166L7.99925 8.88497L4.06859 12.8166C3.8241 13.0611 3.42732 13.0611 3.18285 12.8166C2.93862 12.5721 2.93851 12.1753 3.18285 11.9309L7.11449 7.99923L3.18382 4.06857C2.93947 3.82413 2.93955 3.42829 3.18382 3.1838C3.42831 2.9393 3.82508 2.9393 4.06957 3.1838L7.99925 7.11349L11.9309 3.1838Z"
@@ -1340,8 +1370,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 </svg>
             </button>
         </ng-template>
+        <ng-template #ctaTemplate>
+            <a
+                class="k-watermark-trial-button"
+                [attr.title]="getContent(primaryMessage).buttonText"
+                [attr.href]="getContent(primaryMessage).buttonLink"
+                target="_blank"
+                rel="noopener noreferrer"
+                [ngStyle]="{
+                    display: 'inline-flex',
+                    border: 'none',
+                    borderRadius: '4px',
+                    backgroundColor: isCTAHovered ? '#b90138' : '#eb0249',
+                    color: '#ffffff',
+                    transition: 'background-color 0.2s ease-in-out',
+                    cursor: 'pointer',
+                    padding: '4px 8px',
+                    whiteSpace: 'nowrap',
+                    textDecoration: 'none',
+                    fontFamily: 'system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif'
+                }"
+                (mouseenter)="isCTAHovered = true"
+                (mouseleave)="isCTAHovered = false"
+                >{{ getContent(primaryMessage).buttonText }}</a>
+        </ng-template>
         @if (isOpen && bannerMounted) {
-            <div #banner [ngStyle]="{
+        <div
+            #banner
+            [ngStyle]="{
                 position: 'fixed',
                 top: isNarrow ? '0' : '16px',
                 left: '50%',
@@ -1364,99 +1420,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 maxWidth: isNarrow ? 'none' : '768px',
                 width: '100%',
                 backgroundColor: '#fff',
-                padding: isMobile ? '12px' : '0',
-            }">
-                @if (isMobile) {
-                    <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
-                }
-
-                <span [ngStyle]="{
-                        display: 'flex',
-                        alignSelf: isMobile ? 'flex-start' : 'center',
-                        padding: isMobile ? '0 0 12px 0' : '9px 12px',
-                    }">
-                    <svg
-                        width="32"
-                        height="32"
-                        viewBox="0 0 32 32"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M22.702 2.1821C24.3149 2.51082 25.8077 3.27291 27.0199 4.38645C28.2321 5.49999 29.1179 6.92286 29.582 8.5021C30.012 9.9501 30.076 11.4821 29.768 12.9621C29.3228 14.9898 28.2025 16.8063 26.5904 18.1143C24.9783 19.4223 22.9699 20.1443 20.894 20.1621C20.018 20.1621 19.146 20.0361 18.308 19.7821L16.708 21.6581L15.95 22.0081H14V25.0081L13 26.0081H10V29.0081L9 30.0081H3L2 29.0081V24.3941L2.292 23.6881L12.24 13.7401C11.9577 12.8308 11.8226 11.8821 11.84 10.9301C11.8582 9.59817 12.1701 8.28666 12.7533 7.08907C13.3365 5.89147 14.1767 4.83728 15.214 4.00164C16.2514 3.166 17.4603 2.56949 18.7546 2.25464C20.0489 1.93978 21.3967 1.91633 22.702 2.1821ZM25.338 16.5821C26.5944 15.5647 27.4681 14.1509 27.816 12.5721L27.824 12.5821C28.0718 11.4277 28.0272 10.2297 27.6943 9.09691C27.3614 7.96412 26.7507 6.93248 25.9177 6.09572C25.0847 5.25896 24.0558 4.64361 22.9246 4.30557C21.7933 3.96753 20.5955 3.91753 19.44 4.1601C17.8816 4.506 16.4837 5.36334 15.4688 6.59561C14.454 7.82789 13.8806 9.36426 13.84 10.9601C13.82 11.8721 13.98 12.7761 14.318 13.6201L14.098 14.7061L4 24.8081V28.0081H8V25.0081L9 24.0081H12V21.0081L13 20.0081H15.49L17.242 17.9761L18.364 17.6961C19.1728 18.0121 20.0337 18.1736 20.902 18.1721C22.5181 18.1597 24.082 17.5991 25.338 16.5821ZM23.662 11.1181C23.8197 10.9002 23.9318 10.6527 23.9916 10.3905C24.0515 10.1283 24.0578 9.85665 24.0103 9.59192C23.9627 9.32718 23.8622 9.07476 23.7148 8.84975C23.5675 8.62474 23.3762 8.43177 23.1526 8.28238C22.9289 8.133 22.6774 8.03026 22.4131 7.98033C22.1488 7.93039 21.8771 7.93428 21.6144 7.99176C21.3516 8.04925 21.1031 8.15914 20.8838 8.31487C20.6645 8.4706 20.4789 8.66896 20.338 8.8981C20.067 9.33887 19.9774 9.86752 20.088 10.373C20.1985 10.8784 20.5007 11.3214 20.931 11.6087C21.3613 11.8961 21.8862 12.0055 22.3954 11.914C22.9047 11.8226 23.3587 11.5373 23.662 11.1181Z"
-                            fill="black"
-                        />
-                        <path
-                            d="M23.1299 16.0186L31.1387 31.0273L31.0068 31.25H14.9932L14.8604 31.0273L22.8955 16.0186H23.1299Z"
-                            fill="#FFC000"
-                            stroke="black"
-                            strokeWidth="1.5"
-                        />
-                        <rect x="22.25" y="21.2686" width="1.5" height="5" rx="0.75" fill="black" />
-                        <path
-                            d="M24 28.2686C24 27.7163 23.5523 27.2686 23 27.2686C22.4479 27.2687 22 27.7164 22 28.2686C22 28.8207 22.4479 29.2684 23 29.2686C23.5523 29.2686 24 28.8208 24 28.2686Z"
-                            fill="black"
-                        />
-                    </svg>
-                </span>
+                padding: isMobile ? '12px' : '0'
+            }"
+        >
+            @if (isMobile) {
+            <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
+            } @if (getContent(primaryMessage).iconSrc) {
+            <span
+                [ngStyle]="{
+                    display: 'flex',
+                    alignSelf: isMobile ? 'flex-start' : 'center',
+                    padding: isMobile ? '0 0 12px 0' : '9px 12px'
+                }"
+            ><img [src]="getContent(primaryMessage).iconSrc" alt="" /></span>
+            }
 
-                <div [ngStyle]="{
+            <div
+                [ngStyle]="{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '12px',
+                    padding: isMobile ? '0 0 12px 0' : '12px',
+                    flex: isMobile ? 'none' : '1'
+                }"
+            >
+                @for (msg of messages; track msg.message) {
+                <div
+                    [ngStyle]="{
                         display: 'flex',
                         flexDirection: 'column',
-                        gap: '12px',
-                        padding: isMobile ? '0 0 12px 0' : '12px',
-                        flex: isMobile ? 'none' : '1'}">
-                    @for (msg of messages; track msg.message) {
-                        <div [ngStyle]="{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '4px',
-                            flex: isMobile ? 'none' : '1'}">
-                        @if (msg.notificationTitle) {
-                            <span
-                                [ngStyle]="{
-                                fontFamily: 'system-ui, sans-serif',
-                                fontWeight: 700,
-                                fontSize: '14px',
-                                lineHeight: '142%'}"
-                            >
-                                {{ msg.notificationTitle }}
-                            </span>
-                        }
-                        <span
-                            [ngStyle]="{
+                        gap: '4px',
+                        flex: isMobile ? 'none' : '1'
+                    }"
+                >
+                    <span
+                        [ngStyle]="{
                             fontFamily: 'system-ui, sans-serif',
+                            fontWeight: 700,
                             fontSize: '14px',
-                            lineHeight: '20px',
-                            }"
-                            [innerHTML]="msg.notificationBody || msg.notificationMessage"
-                        >
-                        </span>
-                        </div>
-                    }
-                </div>
-
-                @if (!isMobile) {
-                    <div
+                            lineHeight: '142%'
+                        }"
+                    >
+                        {{ getContent(msg).title }}
+                    </span>
+                    <span
                         [ngStyle]="{
-                            display: 'flex',
-                            alignItems: 'center',
-                            padding: isMobile ? '0' : '9px 12px',
-                            gap: '16px',
-                            marginLeft: isMobile ? '0' : 'auto',
-                            width: isMobile ? '100%' : 'auto',
+                            fontFamily: 'system-ui, sans-serif',
+                            fontSize: '14px',
+                            lineHeight: '20px'
                         }"
+                        [innerHTML]="getContent(msg).description"
                     >
-                        <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
-                    </div>
+                    </span>
+                </div>
+                } @if (isMobile) {
+                <ng-container *ngTemplateOutlet="ctaTemplate"></ng-container>
                 }
             </div>
+
+            @if (!isMobile) {
+            <div
+                [ngStyle]="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: isMobile ? '0' : '9px 12px',
+                    gap: '16px',
+                    marginLeft: isMobile ? '0' : 'auto',
+                    width: isMobile ? '100%' : 'auto'
+                }"
+            >
+                <ng-container *ngTemplateOutlet="ctaTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
+            </div>
+            }
+        </div>
         }
     `,
                     standalone: true,
-                    imports: [NgStyle, NgTemplateOutlet]
+                    imports: [NgStyle, NgTemplateOutlet],
                 }]
         }], propDecorators: { licenseMessage: [{
                 type: Input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-common",
-  "version": "23.4.0-develop.4",
+  "version": "24.0.0-develop.2",
   "description": "Kendo UI for Angular - Utility Package",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,14 +23,15 @@
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.2",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "23.4.0-develop.4"
+    "@progress/kendo-angular-schematics": "24.0.0-develop.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "module": "fesm2022/progress-kendo-angular-common.mjs",
-  "typings": "index.d.ts",
   "exports": {
+    "./codemods": {
+      "default": "./codemods/utils.js"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -39,5 +40,7 @@
       "default": "./fesm2022/progress-kendo-angular-common.mjs"
     }
   },
+  "module": "fesm2022/progress-kendo-angular-common.mjs",
+  "typings": "index.d.ts",
   "sideEffects": false
 }

package/watermark/watermark.component.d.ts

@@ -16,11 +16,19 @@ export declare class WatermarkOverlayComponent implements OnInit, AfterViewInit,
     isMobile: boolean;
     isNarrow: boolean;
     isCloseHovered: boolean;
+    isCTAHovered: boolean;
     bannerMounted: boolean;
     get messages(): LicenseMessage[];
     extraMessages: LicenseMessage[];
     get primaryMessage(): LicenseMessage;
     licenseKeyUrl: string;
+    getContent(msg: LicenseMessage): {
+        iconSrc?: string;
+        title: string;
+        description: string;
+        buttonText: string;
+        buttonLink: string;
+    };
     private unsubscribeLicenseMessage;
     private unsubscribeResize;
     ngOnInit(): void;
@@ -32,5 +40,5 @@ export declare class WatermarkOverlayComponent implements OnInit, AfterViewInit,
     private subscribeResize;
     resetPresenceCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WatermarkOverlayComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WatermarkOverlayComponent, "div[kendoWatermarkOverlay]", never, { "licenseMessage": { "alias": "licenseMessage"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WatermarkOverlayComponent, "div[kendoWatermarkOverlay], kendo-watermark-overlay", never, { "licenseMessage": { "alias": "licenseMessage"; "required": false; }; }, {}, never, never, true, never>;
 }