@progress/kendo-angular-layout 23.4.0-develop.3 → 23.4.0

package/codemods/{utils.js → libs/common/src/codemods/utils.js}

@@ -3,29 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tsInterfaceTransformer = exports.tsPropertyValueTransformer = exports.tsPropertyTransformer = exports.tsComponentPropertyRemoval = exports.attributeRemoval = exports.attributeValueUpdate = exports.attributeNameValueUpdate = exports.attributeNameUpdate = exports.eventUpdate = exports.htmlTransformer = exports.blockTextElements = void 0;
 exports.hasKendoInTemplate = hasKendoInTemplate;
@@ -35,8 +12,12 @@ exports.makePattern = makePattern;
 exports.writeInstructionMarker = writeInstructionMarker;
 exports.isApiChangeTarget = isApiChangeTarget;
 exports.isRenderingChangeTarget = isRenderingChangeTarget;
-const fs = __importStar(require("node:fs"));
-const path = __importStar(require("node:path"));
+exports.executeCodemodTest = executeCodemodTest;
+const tslib_1 = require("tslib");
+/// <reference types="node" />
+const fs = tslib_1.__importStar(require("fs"));
+const os = tslib_1.__importStar(require("os"));
+const path = tslib_1.__importStar(require("path"));
 exports.blockTextElements = {
     script: true,
     noscript: true,
@@ -320,12 +301,12 @@ const attributeRemoval = (templateContent, tagName, attributeName, propertyToRem
     // If no propertyToRemove is specified, remove the entire attribute
     if (!propertyToRemove) {
         // Remove bound attributes [attribute]="value"
-        const boundAttributePattern = new RegExp(`(\\s+)\\[${escapedAttr}\\]\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)`, 'gi');
+        const boundAttributePattern = new RegExp(`(<${escapedTag}[^>]*?)\\s+\\[${escapedAttr}\\]\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)([^>]*?>)`, 'gi');
         // Remove static attributes attribute="value"
-        const staticAttributePattern = new RegExp(`(\\s+)${escapedAttr}\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)`, 'gi');
-        // Apply removals
-        let result = templateContent.replace(boundAttributePattern, '');
-        result = result.replace(staticAttributePattern, '');
+        const staticAttributePattern = new RegExp(`(<${escapedTag}[^>]*?)\\s+${escapedAttr}\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)([^>]*?>)`, 'gi');
+        // Apply removals - keep tag prefix and suffix, remove the attribute
+        let result = templateContent.replace(boundAttributePattern, '$1$3');
+        result = result.replace(staticAttributePattern, '$1$3');
         return result;
     }
     // Remove specific property from object literal attributes
@@ -1428,3 +1409,45 @@ function isRenderingChangeTarget(filePath) {
     const ext = path.extname(filePath);
     return ext === '.ts' || ext === '.html' || ext === '.css' || ext === '.scss' || ext === '.sass' || ext === '.less';
 }
+/**
+ * Executes a codemod transformation and compares the result with expected output
+ *
+ * @param codemod - The codemod function to execute
+ * @param testDir - Directory containing the test files (__dirname from test file)
+ * @param exampleFileName - Name of the input file (default: 'example.ts')
+ * @param expectedFileName - Name of the expected output file (default: 'expected.ts')
+ * @returns Object containing the transformation result and expected content
+ */
+function executeCodemodTest(codemod, testDir, exampleFileName = 'example.ts', expectedFileName = 'expected.ts') {
+    const exampleFile = path.join(testDir, exampleFileName);
+    const expectedFile = path.join(testDir, expectedFileName);
+    const sourceCode = fs.readFileSync(exampleFile, 'utf-8');
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'codemod-test-'));
+    const tmpFile = path.join(tmpDir, path.basename(exampleFile));
+    fs.writeFileSync(tmpFile, sourceCode, 'utf-8');
+    try {
+        const fileInfo = {
+            path: tmpFile,
+            source: sourceCode
+        };
+        const jscodeshift = require('jscodeshift').withParser('tsx');
+        const api = {
+            jscodeshift,
+            j: jscodeshift
+        };
+        const result = codemod(fileInfo, api);
+        const expectedContent = fs.readFileSync(expectedFile, 'utf-8').trim();
+        return {
+            result: result?.trim(),
+            expected: expectedContent,
+            sourceCode,
+            transformedSuccessfully: result !== undefined
+        };
+    }
+    finally {
+        try {
+            fs.rmSync(tmpDir, { recursive: true });
+        }
+        catch { }
+    }
+}

package/codemods/{v18 → libs/layout/codemods/v18}/layout-rendering-changes.js

@@ -6,17 +6,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.aiInstructions = void 0;
 exports.default = default_1;
-const utils_1 = require("../utils");
+const codemods_1 = require("@progress/kendo-angular-common/codemods");
 exports.aiInstructions = `Review your stylesheets, test files, and any code that references the k-header class. It has been removed from the TabStrip.
 Before: <div class="k-tabstrip k-header">
 After:  <div class="k-tabstrip">
 Remove any CSS rules or selectors that target .k-tabstrip.k-header or rely on k-header being present on the TabStrip.`;
 const classes = ['k-header'];
-const pattern = (0, utils_1.makePattern)(classes);
+const pattern = (0, codemods_1.makePattern)(classes);
 function default_1(fileInfo) {
-    if ((0, utils_1.isRenderingChangeTarget)(fileInfo.path)) {
+    if ((0, codemods_1.isRenderingChangeTarget)(fileInfo.path)) {
         if (pattern.test(fileInfo.source)) {
-            (0, utils_1.writeInstructionMarker)(exports.aiInstructions, __filename, fileInfo.path);
+            (0, codemods_1.writeInstructionMarker)(exports.aiInstructions, __filename, fileInfo.path);
         }
     }
     return fileInfo.source;

package/codemods/{v19 → libs/layout/codemods/v19}/tabstrip-mousescrollspeed.js

@@ -3,41 +3,19 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.aiInstructions = void 0;
 exports.default = default_1;
-const fs = __importStar(require("fs"));
-const utils_1 = require("../utils");
+const tslib_1 = require("tslib");
+const fs = tslib_1.__importStar(require("fs"));
+const codemods_1 = require("@progress/kendo-angular-common/codemods");
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
-    if (!(0, utils_1.isApiChangeTarget)(filePath)) {
+    if (!(0, codemods_1.isApiChangeTarget)(filePath)) {
         return fileInfo.source;
     }
     // Handle HTML files and inline templates
-    const htmlResult = (0, utils_1.htmlTransformer)(fileInfo, api, (templateContent) => (0, utils_1.attributeRemoval)(templateContent, 'kendo-tabstrip', 'scrollable', 'mouseScrollSpeed'));
+    const htmlResult = (0, codemods_1.htmlTransformer)(fileInfo, api, (templateContent) => (0, codemods_1.attributeRemoval)(templateContent, 'kendo-tabstrip', 'scrollable', 'mouseScrollSpeed'));
     if (filePath.endsWith('.html')) {
         if (htmlResult && htmlResult !== fileInfo.source) {
             fs.writeFileSync(filePath, htmlResult, 'utf-8');
@@ -48,8 +26,8 @@ function default_1(fileInfo, api) {
     // Handle TypeScript property transformations
     const j = api.jscodeshift;
     const rootSource = j(htmlResult || fileInfo.source);
-    (0, utils_1.tsPropertyRemoval)(fileInfo.source, rootSource, j, '@progress/kendo-angular-layout', 'TabStripScrollableSettings', 'mouseScrollSpeed');
-    (0, utils_1.tsComponentPropertyRemoval)(fileInfo.source, rootSource, j, '@progress/kendo-angular-layout', 'TabStripComponent', 'scrollable', 'mouseScrollSpeed');
+    (0, codemods_1.tsPropertyRemoval)(fileInfo.source, rootSource, j, '@progress/kendo-angular-layout', 'TabStripScrollableSettings', 'mouseScrollSpeed');
+    (0, codemods_1.tsComponentPropertyRemoval)(fileInfo.source, rootSource, j, '@progress/kendo-angular-layout', 'TabStripComponent', 'scrollable', 'mouseScrollSpeed');
     return rootSource.toSource();
 }
 exports.aiInstructions = `The TabStrip's 'mouseScrollSpeed' property has been removed without a replacement.

package/codemods/{v21 → libs/layout/codemods/v21}/layout-rendering-changes.js

@@ -6,17 +6,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.aiInstructions = void 0;
 exports.default = default_1;
-const utils_1 = require("../utils");
+const codemods_1 = require("@progress/kendo-angular-common/codemods");
 exports.aiInstructions = `Review your stylesheets, test files, and any code that references the k-item class. It has been removed from the k-tabstrip-item element.
 Before: <li class="k-item k-tabstrip-item">
 After:  <li class="k-tabstrip-item">
 Remove any CSS rules or selectors that target TabStrip items using .k-item alone or the combination .k-item.k-tabstrip-item. Use .k-tabstrip-item exclusively.`;
 const classes = ['k-item', 'k-tabstrip-item'];
-const pattern = (0, utils_1.makePattern)(classes);
+const pattern = (0, codemods_1.makePattern)(classes);
 function default_1(fileInfo) {
-    if ((0, utils_1.isRenderingChangeTarget)(fileInfo.path)) {
+    if ((0, codemods_1.isRenderingChangeTarget)(fileInfo.path)) {
         if (pattern.test(fileInfo.source)) {
-            (0, utils_1.writeInstructionMarker)(exports.aiInstructions, __filename, fileInfo.path);
+            (0, codemods_1.writeInstructionMarker)(exports.aiInstructions, __filename, fileInfo.path);
         }
     }
     return fileInfo.source;

package/drawer/drawer.component.d.ts

@@ -52,7 +52,8 @@ export declare class DrawerComponent implements OnDestroy {
     hostClasses: boolean;
     get startPositionClass(): boolean;
     get endPositionClass(): boolean;
-    get overlayTransofrmStyles(): string;
+    get overlayMarginLeft(): string;
+    get overlayMarginRight(): string;
     get flexStyles(): number;
     /**
      * Specifies the mode in which the Drawer displays.
@@ -191,6 +192,7 @@ export declare class DrawerComponent implements OnDestroy {
     onSelect(e: DrawerListSelectEvent): void;
     private onAnimationEnd;
     private setExpanded;
+    private shouldApplyOverlayMargin;
     private animate;
     private createPlayer;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;

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

@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776175378,
-    version: '23.4.0-develop.3',
+    publishDate: 1777036844,
+    version: '23.4.0',
     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'
 };
 
@@ -1689,7 +1689,7 @@ class PanelBarComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
@@ -4744,7 +4744,7 @@ class TabStripComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { kind: "component", type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { kind: "component", type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], animations: [
             trigger('state', [
                 state('active', style({ opacity: 1 })),
                 transition('* => active', [
@@ -5344,20 +5344,20 @@ function collapsePush(duration, width) {
 /**
  * @hidden
  */
-function expandRTLOverlay(duration) {
+function expandRTLOverlay(duration, width) {
     return [
-        style({ transform: `translateX(100%)` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', transform: `translateX(0)` }))
+        style({ marginRight: `-${width}px` }),
+        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', marginRight: `0px` }))
     ];
 }
 /**
  * @hidden
  */
-function expandOverlay(duration, position) {
-    const translateDir = position !== 'end' ? `-100%` : `100%`;
+function expandOverlay(duration, width, position) {
+    const marginProp = position !== 'end' ? 'marginLeft' : 'marginRight';
     return [
-        style({ transform: `translateX(${translateDir})` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', transform: `translateX(0)` }))
+        style({ [marginProp]: `-${width}px` }),
+        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', [marginProp]: `0px` }))
     ];
 }
 /**
@@ -5372,20 +5372,20 @@ function miniCollapseOverlay(duration, width, miniWidth) {
 /**
  * @hidden
  */
-function collapseOverlay(duration, position) {
-    const translateDir = position !== 'end' ? '-100%' : '100%';
+function collapseOverlay(duration, width, position) {
+    const marginProp = position !== 'end' ? 'marginLeft' : 'marginRight';
     return [
-        style({ transform: `translateX(0)` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', transform: `translateX(${translateDir})` }))
+        style({ [marginProp]: `0px` }),
+        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', [marginProp]: `-${width}px` }))
     ];
 }
 /**
  * @hidden
  */
-function collapseRTLOverlay(duration) {
+function collapseRTLOverlay(duration, width) {
     return [
-        style({ transform: `translateX(0)` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', transform: `translateX(100%)` }))
+        style({ marginRight: `0px` }),
+        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', marginRight: `-${width}px` }))
     ];
 }
 /**
@@ -5406,7 +5406,7 @@ function expandAnimation(settings) {
         return expandPush(duration, width);
     }
     if (!mini && mode === 'overlay') {
-        return rtl ? expandRTLOverlay(duration) : expandOverlay(duration, position);
+        return rtl ? expandRTLOverlay(duration, width) : expandOverlay(duration, width, position);
     }
     if (mini && mode === 'overlay') {
         return miniExpandOverlay(duration, width, miniWidth);
@@ -5430,7 +5430,7 @@ function collapseAnimation(settings) {
         return collapsePush(duration, width);
     }
     if (!mini && mode === 'overlay') {
-        return rtl ? collapseRTLOverlay(duration) : collapseOverlay(duration, position);
+        return rtl ? collapseRTLOverlay(duration, width) : collapseOverlay(duration, width, position);
     }
     if (mini && mode === 'overlay') {
         return miniCollapseOverlay(duration, width, miniWidth);
@@ -5776,7 +5776,7 @@ class DrawerListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DrawerListComponent, deps: [{ token: DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DrawerListComponent, isStandalone: true, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select", viewChange: "viewChange" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        @for (v of view; track identifyItem(idx, v); let idx = $index) {\n          @if (!v.item.separator) {\n            <li kendoDrawerItem\n              class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n              role=\"menuitem\"\n              [viewItem]=\"v\"\n              [index]=\"idx\"\n              [mini]=\"mini\"\n              [expanded]=\"expanded\"\n              [itemTemplate]=\"itemTemplate\"\n              [attr.data-kendo-drawer-index]=\"v.index\"\n              [ngClass]=\"v.item.cssClass\"\n              [ngStyle]=\"v.item.cssStyle\"\n              [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n          }\n          @if (v.item.separator) {\n            <li\n              role=\"separator\"\n              class=\"k-drawer-item k-drawer-separator\"\n              [ngClass]=\"v.item.cssClass\"\n              [ngStyle]=\"v.item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DrawerListComponent, isStandalone: true, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select", viewChange: "viewChange" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        @for (v of view; track identifyItem(idx, v); let idx = $index) {\n          @if (!v.item.separator) {\n            <li kendoDrawerItem\n              class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n              role=\"menuitem\"\n              [viewItem]=\"v\"\n              [index]=\"idx\"\n              [mini]=\"mini\"\n              [expanded]=\"expanded\"\n              [itemTemplate]=\"itemTemplate\"\n              [attr.data-kendo-drawer-index]=\"v.index\"\n              [ngClass]=\"v.item.cssClass\"\n              [ngStyle]=\"v.item.cssStyle\"\n              [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n          }\n          @if (v.item.separator) {\n            <li\n              role=\"separator\"\n              class=\"k-drawer-item k-drawer-separator\"\n              [ngClass]=\"v.item.cssClass\"\n              [ngStyle]=\"v.item.cssStyle\">\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
@@ -5805,7 +5805,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
               class="k-drawer-item k-drawer-separator"
               [ngClass]="v.item.cssClass"
               [ngStyle]="v.item.cssStyle">
-              &nbsp;
             </li>
           }
         }
@@ -5873,14 +5872,23 @@ class DrawerComponent {
     get endPositionClass() {
         return this.position === 'end';
     }
-    get overlayTransofrmStyles() {
-        if (this.mode === 'push') {
-            return;
+    get overlayMarginLeft() {
+        if (!this.shouldApplyOverlayMargin()) {
+            return null;
+        }
+        if (this.rtl || this.position === 'end') {
+            return null;
+        }
+        return `-${this.drawerWidth}px`;
+    }
+    get overlayMarginRight() {
+        if (!this.shouldApplyOverlayMargin()) {
+            return null;
         }
-        if (this.expanded || this.minimized) {
-            return `translateX(0px)`;
+        if (!this.rtl && this.position !== 'end') {
+            return null;
         }
-        return `translateX(-100%)`;
+        return `-${this.drawerWidth}px`;
     }
     get flexStyles() {
         if (this.mode === 'overlay') {
@@ -6095,6 +6103,9 @@ class DrawerComponent {
         this.expanded = value;
         this.expandedChange.emit(value);
     }
+    shouldApplyOverlayMargin() {
+        return this.mode !== 'push' && !this.expanded && !this.minimized;
+    }
     animate(expanded) {
         const settings = {
             mode: this.mode,
@@ -6122,7 +6133,7 @@ class DrawerComponent {
         return player;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AnimationBuilder }, { token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.marginLeft": "this.overlayMarginLeft", "style.marginRight": "this.overlayMarginRight", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             DrawerService,
             {
@@ -6165,7 +6176,7 @@ class DrawerComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select", "viewChange"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select", "viewChange"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -6229,9 +6240,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], endPositionClass: [{
                 type: HostBinding,
                 args: ['class.k-drawer-end']
-            }], overlayTransofrmStyles: [{
+            }], overlayMarginLeft: [{
+                type: HostBinding,
+                args: ['style.marginLeft']
+            }], overlayMarginRight: [{
                 type: HostBinding,
-                args: ['style.transform']
+                args: ['style.marginRight']
             }], flexStyles: [{
                 type: HostBinding,
                 args: ['style.flexBasis.px']
@@ -10936,7 +10950,7 @@ class TileLayoutComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1776175378,
-  "version": "23.4.0-develop.3",
+  "publishDate": 1777036844,
+  "version": "23.4.0",
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "23.4.0-develop.3",
+  "version": "23.4.0",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -48,8 +48,7 @@
         "19": [
           {
             "description": "mousescrollspeed of TabStripScrollableSettings is deprecated",
-            "file": "codemods/v19/tabstrip-mousescrollspeed.js",
-            "prompt": "false"
+            "file": "codemods/v19/tabstrip-mousescrollspeed.js"
           }
         ],
         "21": [
@@ -64,7 +63,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1776175378,
+      "publishDate": 1777036844,
       "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"
     }
   },
@@ -73,18 +72,18 @@
     "@angular/common": "19 - 21",
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
-    "@progress/kendo-licensing": "^1.10.0",
-    "@progress/kendo-angular-common": "23.4.0-develop.3",
-    "@progress/kendo-angular-l10n": "23.4.0-develop.3",
-    "@progress/kendo-angular-progressbar": "23.4.0-develop.3",
-    "@progress/kendo-angular-icons": "23.4.0-develop.3",
-    "@progress/kendo-angular-buttons": "23.4.0-develop.3",
-    "@progress/kendo-angular-intl": "23.4.0-develop.3",
+    "@progress/kendo-licensing": "^1.11.0",
+    "@progress/kendo-angular-common": "23.4.0",
+    "@progress/kendo-angular-l10n": "23.4.0",
+    "@progress/kendo-angular-progressbar": "23.4.0",
+    "@progress/kendo-angular-icons": "23.4.0",
+    "@progress/kendo-angular-buttons": "23.4.0",
+    "@progress/kendo-angular-intl": "23.4.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "23.4.0-develop.3",
+    "@progress/kendo-angular-schematics": "23.4.0",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",