diff --git a/packages/component-meta/tests/unit/specs/__snapshots__/componentMeta.spec.ts.snap b/packages/component-meta/tests/unit/specs/__snapshots__/componentMeta.spec.ts.snap index 3d75651bde..e1c9024dce 100644 --- a/packages/component-meta/tests/unit/specs/__snapshots__/componentMeta.spec.ts.snap +++ b/packages/component-meta/tests/unit/specs/__snapshots__/componentMeta.spec.ts.snap @@ -1550,9 +1550,6 @@ exports[`should match snapshot 1`] = ` "description": "@deprecated since v3.0.0, will be removed with next major release, use \`pagination\` instead. If true, the carousel will not show pagination bullets at the bottom.", "isBreakpointCustomizable": true, "isDeprecated": true, - "propOptions": { - "mutable": true, - }, "type": "boolean", }, "focusOnCenterSlide": { @@ -1604,9 +1601,6 @@ exports[`should match snapshot 1`] = ` "defaultValue": true, "description": "If false, the carousel will not show pagination bullets at the bottom.", "isBreakpointCustomizable": true, - "propOptions": { - "mutable": true, - }, "type": "boolean", }, "rewind": { diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json index aca29e5fbb..cfdce3e900 100644 --- a/packages/components-angular/package.json +++ b/packages/components-angular/package.json @@ -40,7 +40,7 @@ "@angular/platform-browser": "^19.0.5", "@angular/platform-browser-dynamic": "^19.0.5", "@angular/router": "^19.0.5", - "@porsche-design-system/components-angular": "3.25.0", + "@porsche-design-system/components-angular": "3.25.1-rc.0", "angular-imask": "^7.6.1", "imask": "^7.6.1", "rxjs": "^7.8.1", diff --git a/packages/components-angular/projects/angular-wrapper/package.json b/packages/components-angular/projects/angular-wrapper/package.json index 02a687c03a..e96a2ef27f 100644 --- a/packages/components-angular/projects/angular-wrapper/package.json +++ b/packages/components-angular/projects/angular-wrapper/package.json @@ -1,6 +1,6 @@ { "name": "@porsche-design-system/components-angular", - "version": "3.25.0", + "version": "3.25.1-rc.0", "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.", "keywords": [ "porsche", @@ -17,7 +17,7 @@ "license": "SEE LICENSE IN LICENSE", "homepage": "https://designsystem.porsche.com", "dependencies": { - "@porsche-design-system/components-js": "3.25.0", + "@porsche-design-system/components-js": "3.25.1-rc.0", "tslib": "^2.8.1" }, "peerDependencies": { diff --git a/packages/components-js/package.json b/packages/components-js/package.json index c686b0e427..697da04c5d 100644 --- a/packages/components-js/package.json +++ b/packages/components-js/package.json @@ -77,8 +77,8 @@ }, "dependencies": { "@porsche-design-system/assets": "5.0.2", - "@porsche-design-system/components": "3.25.0", - "@porsche-design-system/components-js": "3.25.0", + "@porsche-design-system/components": "3.25.1-rc.0", + "@porsche-design-system/components-js": "3.25.1-rc.0", "@porsche-design-system/components-manager-cli": "0.0.0", "@porsche-design-system/partials": "0.0.0", "imask": "^7.6.1" diff --git a/packages/components-js/projects/components-wrapper/package.json b/packages/components-js/projects/components-wrapper/package.json index 5781b11f36..6f38d4437d 100644 --- a/packages/components-js/projects/components-wrapper/package.json +++ b/packages/components-js/projects/components-wrapper/package.json @@ -1,6 +1,6 @@ { "name": "@porsche-design-system/components-js", - "version": "3.25.0", + "version": "3.25.1-rc.0", "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.", "keywords": [ "porsche", diff --git a/packages/components-js/tests/unit/fixtures/stats.json b/packages/components-js/tests/unit/fixtures/stats.json index 72b7f8a9ad..58311a9fb9 100644 --- a/packages/components-js/tests/unit/fixtures/stats.json +++ b/packages/components-js/tests/unit/fixtures/stats.json @@ -2,62 +2,57 @@ { "chunkShortName": "accordion", "size": 6497, - "gzipSize": 2859 - }, - { - "chunkShortName": "sheet", - "size": 7401, - "gzipSize": 3087 + "gzipSize": 2860 }, { "chunkShortName": "banner", - "size": 6809, - "gzipSize": 2780 + "size": 6811, + "gzipSize": 2777 }, { "chunkShortName": "button", - "size": 9630, - "gzipSize": 3854 + "size": 9632, + "gzipSize": 3857 }, { "chunkShortName": "button-group", "size": 1130, - "gzipSize": 663 + "gzipSize": 661 }, { "chunkShortName": "button-pure", - "size": 9612, - "gzipSize": 3980 + "size": 9614, + "gzipSize": 3969 }, { "chunkShortName": "button-tile", - "size": 7983, - "gzipSize": 3372 + "size": 7981, + "gzipSize": 3371 }, { "chunkShortName": "canvas", "size": 16247, - "gzipSize": 5167 + "gzipSize": 5158 }, { "chunkShortName": "carousel", - "size": 48189, - "gzipSize": 19510 + "size": 48318, + "gzipSize": 19544 }, { "chunkShortName": "checkbox", - "size": 13364, - "gzipSize": 5176 + "size": 13367, + "gzipSize": 5183 }, { "chunkShortName": "checkbox-wrapper", - "size": 11345, - "gzipSize": 4637 + "size": 11350, + "gzipSize": 4633 }, { "chunkShortName": "content-wrapper", "size": 2519, - "gzipSize": 1266 + "gzipSize": 1267 }, { "chunkShortName": "crest", @@ -66,13 +61,13 @@ }, { "chunkShortName": "display", - "size": 4359, - "gzipSize": 2058 + "size": 4361, + "gzipSize": 2066 }, { "chunkShortName": "divider", - "size": 2410, - "gzipSize": 1078 + "size": 2412, + "gzipSize": 1079 }, { "chunkShortName": "fieldset", @@ -82,221 +77,226 @@ { "chunkShortName": "fieldset-wrapper", "size": 4716, - "gzipSize": 2035 + "gzipSize": 2033 }, { "chunkShortName": "flex", "size": 3738, - "gzipSize": 1509 + "gzipSize": 1512 }, { "chunkShortName": "flyout", - "size": 9690, - "gzipSize": 4029 + "size": 9692, + "gzipSize": 4027 }, { "chunkShortName": "flyout-multilevel", "size": 17660, - "gzipSize": 5591 + "gzipSize": 5583 }, { "chunkShortName": "grid", "size": 2793, - "gzipSize": 1294 + "gzipSize": 1295 }, { "chunkShortName": "heading", - "size": 4980, - "gzipSize": 2217 + "size": 4982, + "gzipSize": 2214 }, { "chunkShortName": "headline", "size": 5486, - "gzipSize": 2358 + "gzipSize": 2355 }, { "chunkShortName": "icon", - "size": 12760, - "gzipSize": 5283 + "size": 12762, + "gzipSize": 5284 }, { "chunkShortName": "inline-notification", - "size": 7874, - "gzipSize": 3274 + "size": 7878, + "gzipSize": 3278 }, { "chunkShortName": "link", - "size": 7325, - "gzipSize": 3146 + "size": 7330, + "gzipSize": 3150 }, { "chunkShortName": "link-pure", - "size": 7811, - "gzipSize": 3326 + "size": 7815, + "gzipSize": 3324 }, { "chunkShortName": "link-social", - "size": 7066, - "gzipSize": 3093 + "size": 7071, + "gzipSize": 3096 }, { "chunkShortName": "link-tile", - "size": 7738, - "gzipSize": 3294 + "size": 7736, + "gzipSize": 3295 }, { "chunkShortName": "link-tile-model-signature", - "size": 7738, - "gzipSize": 3471 + "size": 7736, + "gzipSize": 3469 }, { "chunkShortName": "link-tile-product", - "size": 7618, - "gzipSize": 3260 + "size": 7616, + "gzipSize": 3254 }, { "chunkShortName": "main", - "size": 82365, - "gzipSize": 27137 + "size": 82313, + "gzipSize": 27129 }, { "chunkShortName": "marque", "size": 4756, - "gzipSize": 1768 + "gzipSize": 1767 }, { "chunkShortName": "modal", - "size": 11300, - "gzipSize": 4429 + "size": 11302, + "gzipSize": 4443 }, { "chunkShortName": "model-signature", "size": 2929, - "gzipSize": 1413 + "gzipSize": 1418 }, { "chunkShortName": "multi-select", - "size": 26645, - "gzipSize": 9297 + "size": 26648, + "gzipSize": 9306 }, { "chunkShortName": "optgroup", "size": 5822, - "gzipSize": 2205 + "gzipSize": 2204 }, { "chunkShortName": "pagination", "size": 7833, - "gzipSize": 3214 + "gzipSize": 3217 }, { "chunkShortName": "pin-code", - "size": 14143, - "gzipSize": 5587 + "size": 14146, + "gzipSize": 5584 }, { "chunkShortName": "popover", "size": 9642, - "gzipSize": 3805 + "gzipSize": 3806 }, { "chunkShortName": "radio-button-wrapper", - "size": 10871, - "gzipSize": 4489 + "size": 10876, + "gzipSize": 4484 }, { "chunkShortName": "scroller", - "size": 6900, - "gzipSize": 2693 + "size": 6898, + "gzipSize": 2691 }, { "chunkShortName": "segmented-control", - "size": 9002, - "gzipSize": 3584 + "size": 9000, + "gzipSize": 3582 }, { "chunkShortName": "select", - "size": 26799, - "gzipSize": 9294 + "size": 26802, + "gzipSize": 9293 }, { "chunkShortName": "select-wrapper", - "size": 27939, - "gzipSize": 9372 + "size": 27942, + "gzipSize": 9366 + }, + { + "chunkShortName": "sheet", + "size": 7364, + "gzipSize": 3080 }, { "chunkShortName": "spinner", "size": 2393, - "gzipSize": 1222 + "gzipSize": 1223 }, { "chunkShortName": "stepper-horizontal", - "size": 12007, - "gzipSize": 4994 + "size": 12001, + "gzipSize": 4989 }, { "chunkShortName": "switch", - "size": 7490, - "gzipSize": 3066 + "size": 7492, + "gzipSize": 3070 }, { "chunkShortName": "table", "size": 10164, - "gzipSize": 4028 + "gzipSize": 4024 }, { "chunkShortName": "tabs", - "size": 7046, - "gzipSize": 2920 + "size": 7040, + "gzipSize": 2915 }, { "chunkShortName": "tabs-bar", - "size": 10934, - "gzipSize": 4344 + "size": 10932, + "gzipSize": 4345 }, { "chunkShortName": "tag", - "size": 5908, - "gzipSize": 2446 + "size": 5910, + "gzipSize": 2450 }, { "chunkShortName": "tag-dismissible", - "size": 4232, - "gzipSize": 1959 + "size": 4234, + "gzipSize": 1962 }, { "chunkShortName": "text", - "size": 5922, - "gzipSize": 2514 + "size": 5924, + "gzipSize": 2518 }, { "chunkShortName": "text-field-wrapper", - "size": 18391, - "gzipSize": 7016 + "size": 18394, + "gzipSize": 7019 }, { "chunkShortName": "text-list", "size": 4974, - "gzipSize": 2222 + "gzipSize": 2225 }, { "chunkShortName": "textarea", - "size": 13739, - "gzipSize": 5066 + "size": 13742, + "gzipSize": 5072 }, { "chunkShortName": "textarea-wrapper", - "size": 12350, + "size": 12353, "gzipSize": 4904 }, { "chunkShortName": "toast", - "size": 7626, - "gzipSize": 3346 + "size": 7628, + "gzipSize": 3351 }, { "chunkShortName": "wordmark", "size": 3040, - "gzipSize": 1533 + "gzipSize": 1534 } -] +] \ No newline at end of file diff --git a/packages/components-js/tests/vrt/specs/__screenshots__/select-wrapper-dropdown-1000-states-chrome.png b/packages/components-js/tests/vrt/specs/__screenshots__/select-wrapper-dropdown-1000-states-chrome.png index 1d3de88fc4..91fd88ea34 100644 Binary files a/packages/components-js/tests/vrt/specs/__screenshots__/select-wrapper-dropdown-1000-states-chrome.png and b/packages/components-js/tests/vrt/specs/__screenshots__/select-wrapper-dropdown-1000-states-chrome.png differ diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 30f10bba9c..4820bbf354 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -26,7 +26,7 @@ "clean:build": "rm -rf ./dist && yarn --cwd projects/nextjs clean:build && yarn --cwd projects/remix clean:build && yarn --cwd projects/uxpin-wrapper clean:build" }, "dependencies": { - "@porsche-design-system/components-react": "3.25.0", + "@porsche-design-system/components-react": "3.25.1-rc.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-imask": "^7.6.1", diff --git a/packages/components-react/projects/react-wrapper/package.json b/packages/components-react/projects/react-wrapper/package.json index 98baffc6b3..a7b79289b0 100644 --- a/packages/components-react/projects/react-wrapper/package.json +++ b/packages/components-react/projects/react-wrapper/package.json @@ -1,6 +1,6 @@ { "name": "@porsche-design-system/components-react", - "version": "3.25.0", + "version": "3.25.1-rc.0", "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.", "keywords": [ "porsche", @@ -17,7 +17,7 @@ "license": "SEE LICENSE IN LICENSE", "homepage": "https://designsystem.porsche.com", "dependencies": { - "@porsche-design-system/components-js": "3.25.0" + "@porsche-design-system/components-js": "3.25.1-rc.0" }, "peerDependencies": { "ag-grid-community": ">= 32.0.0 <33.0.0", diff --git a/packages/components-react/projects/remix/package.json b/packages/components-react/projects/remix/package.json index 58cffb6d18..00b7b1667c 100644 --- a/packages/components-react/projects/remix/package.json +++ b/packages/components-react/projects/remix/package.json @@ -19,7 +19,7 @@ "patchRemixRunProcessBrowserGlobalIdentifier": "tsx ../react-wrapper/bin/patchRemixRunProcessBrowserGlobalIdentifier.ts" }, "dependencies": { - "@porsche-design-system/components-react": "3.25.0", + "@porsche-design-system/components-react": "3.25.1-rc.0", "@remix-run/node": "^2.15.2", "@remix-run/react": "^2.15.2", "@remix-run/serve": "^2.15.2", diff --git a/packages/components-react/projects/uxpin-wrapper/package.json b/packages/components-react/projects/uxpin-wrapper/package.json index 2d2acdfeb7..e66cfe2184 100644 --- a/packages/components-react/projects/uxpin-wrapper/package.json +++ b/packages/components-react/projects/uxpin-wrapper/package.json @@ -15,7 +15,7 @@ "dump": "./node_modules/.bin/uxpin-merge dump" }, "dependencies": { - "@porsche-design-system/components-js": "3.25.0", + "@porsche-design-system/components-js": "3.25.1-rc.0", "react": "^19.0.0" }, "devDependencies": { diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json index a5b9795119..ecbf54cf0d 100644 --- a/packages/components-vue/package.json +++ b/packages/components-vue/package.json @@ -28,7 +28,7 @@ "clean:build": "rm -rf ./dist" }, "dependencies": { - "@porsche-design-system/components-vue": "3.25.0", + "@porsche-design-system/components-vue": "3.25.1-rc.0", "vue": "^3.5.13", "vue-imask": "^7.6.1", "vue-router": "^4.5.0" diff --git a/packages/components-vue/projects/vue-wrapper/package.json b/packages/components-vue/projects/vue-wrapper/package.json index be4ba78b4a..da297cb4ce 100644 --- a/packages/components-vue/projects/vue-wrapper/package.json +++ b/packages/components-vue/projects/vue-wrapper/package.json @@ -1,6 +1,6 @@ { "name": "@porsche-design-system/components-vue", - "version": "3.25.0", + "version": "3.25.1-rc.0", "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.", "keywords": [ "porsche", @@ -17,7 +17,7 @@ "license": "SEE LICENSE IN LICENSE", "homepage": "https://designsystem.porsche.com", "dependencies": { - "@porsche-design-system/components-js": "3.25.0" + "@porsche-design-system/components-js": "3.25.1-rc.0" }, "peerDependencies": { "ag-grid-enterprise": ">= 32.0.0 <33.0.0", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9496e28ac5..a7af6fe2bb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0), ### [Unreleased] +### [3.25.1-rc.0] - 2025-01-23 + +#### Fixed + +- `Carousel`: throws error when object-like string is passed by `pagination` + ([#3715](https://github.com/porsche-design-system/porsche-design-system/pull/3715)) + ### [3.25.0] - 2025-01-23 ### [3.25.0-rc.1] - 2025-01-22 diff --git a/packages/components/package.json b/packages/components/package.json index c1e3a776cc..e98785ac23 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@porsche-design-system/components", - "version": "3.25.0", + "version": "3.25.1-rc.0", "private": true, "license": "UNLICENSED", "scope": "@porsche-design-system", diff --git a/packages/components/scripts/generateDSRComponents.ts b/packages/components/scripts/generateDSRComponents.ts index d3e19881d9..6ab05e2beb 100644 --- a/packages/components/scripts/generateDSRComponents.ts +++ b/packages/components/scripts/generateDSRComponents.ts @@ -294,7 +294,11 @@ import { get${componentName}Css } from '${stylesBundleImportPath}'; .replace(/this\.slides(\.map)/, `otherChildren$1`) .replace(/^/, "$&import type { BreakpointCustomizable } from '../types';\n") .replace(/.*onFocusin=\{.*\n/, '') - .replace(/this\.slidesPerPage/, 'this.props.slidesPerPage') + // .replace(/this\.slidesPerPage/, 'this.props.slidesPerPage') + .replace(/this\.props\.parsedSlidesPerPage/g, 'this.props.slidesPerPage') + .replace(/this\.props\.parsedDisablePagination/g, 'this.props.disablePagination') + .replace(/this\.props\.parsedPagination/g, 'this.props.pagination') + .replace(/private\sget\sparsed.*\{\n?.*\n?}/g, '') // Since slidesPerPage is BreakpointCustomizable we have to replace hasNavigation with a working serverside condition .replace( /this\.props\.hasNavigation/g, diff --git a/packages/components/src/components/carousel/carousel.spec.ts b/packages/components/src/components/carousel/carousel.spec.ts index 6e6620175c..0f25fbf149 100644 --- a/packages/components/src/components/carousel/carousel.spec.ts +++ b/packages/components/src/components/carousel/carousel.spec.ts @@ -227,7 +227,7 @@ describe('render', () => { expect(spy).toHaveBeenCalledWith(component.host, component.description); }); - it('should call parseJSON() with correct parameter and set this.disablePagination', () => { + it('should call parseJSON() with correct parameter and set this.parsedDisablePagination', () => { jest.spyOn(validatePropsUtils, 'validateProps').mockImplementation(); const spy = jest.spyOn(breakpointCustomizableUtils, 'parseJSON').mockReturnValue(false); const component = new Carousel(); @@ -238,7 +238,21 @@ describe('render', () => { component.render(); expect(spy).toHaveBeenCalledWith(true); - expect(component.disablePagination).toBe(false); + expect((component as any).parsedDisablePagination).toBe(false); + }); + + it('should call parseJSON() with correct parameter and set this.parsedPagination', () => { + jest.spyOn(validatePropsUtils, 'validateProps').mockImplementation(); + const spy = jest.spyOn(breakpointCustomizableUtils, 'parseJSON').mockReturnValue(false); + const component = new Carousel(); + component.host = document.createElement('p-carousel'); + component.host.attachShadow({ mode: 'open' }); + component.pagination = true; + + component.render(); + expect(spy).toHaveBeenCalledWith(true); + + expect((component as any).parsedPagination).toBe(false); }); }); diff --git a/packages/components/src/components/carousel/carousel.tsx b/packages/components/src/components/carousel/carousel.tsx index a201955047..deec0de748 100644 --- a/packages/components/src/components/carousel/carousel.tsx +++ b/packages/components/src/components/carousel/carousel.tsx @@ -133,10 +133,10 @@ export class Carousel { /** * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. * If true, the carousel will not show pagination bullets at the bottom. */ - @Prop({ mutable: true }) public disablePagination?: BreakpointCustomizable; + @Prop() public disablePagination?: BreakpointCustomizable; /** If false, the carousel will not show pagination bullets at the bottom. */ - @Prop({ mutable: true }) public pagination?: BreakpointCustomizable = true; + @Prop() public pagination?: BreakpointCustomizable = true; /** Add ARIA attributes. */ @Prop() public aria?: SelectedAriaAttributes; @@ -186,6 +186,14 @@ export class Carousel { return parseJSON(this.slidesPerPage) as BreakpointValues | number | 'auto'; } + private get parsedDisablePagination(): BreakpointValues | boolean { + return parseJSON(this.disablePagination) as BreakpointValues | boolean; + } + + private get parsedPagination(): BreakpointValues | boolean { + return parseJSON(this.pagination) as BreakpointValues | boolean; + } + private get splideSlides(): HTMLElement[] { return this.splide.Components.Elements.slides; } @@ -285,8 +293,6 @@ export class Carousel { const hasHeadingPropOrSlot = hasHeading(this.host, this.heading); const hasDescriptionPropOrSlot = hasDescription(this.host, this.description); const hasControlsSlot = hasNamedSlot(this.host, 'controls'); - this.disablePagination = parseJSON(this.disablePagination) as any; // parsing the value just once per lifecycle - this.pagination = parseJSON(this.pagination) as any; // parsing the value just once per lifecycle attachComponentCss( this.host, getComponentCss, @@ -297,13 +303,13 @@ export class Carousel { this.headingSize, this.width, // flip boolean values of disablePagination since it is the inverse of pagination - this.disablePagination - ? typeof this.disablePagination === 'object' + this.parsedDisablePagination + ? typeof this.parsedDisablePagination === 'object' ? (Object.fromEntries( - Object.entries(this.disablePagination).map(([key, value]) => [key, !value]) + Object.entries(this.parsedDisablePagination).map(([key, value]) => [key, !value]) ) as BreakpointCustomizable) - : !this.disablePagination - : this.pagination, + : !this.parsedDisablePagination + : this.parsedPagination, isInfinitePagination(this.focusOnCenterSlide ? this.slides.length : this.amountOfPages), (alignHeaderDeprecationMap[this.alignHeader as keyof AlignHeaderDeprecationMapType] || this.alignHeader) as Exclude, @@ -395,11 +401,12 @@ export class Carousel { - {(this.disablePagination ? this.disablePagination !== true : this.pagination) && this.hasNavigation && ( -