@porsche-design-system/components-angular 4.0.0-beta.0 → 4.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -14,6 +14,127 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
|
|
|
14
14
|
|
|
15
15
|
## [Unreleased]
|
|
16
16
|
|
|
17
|
+
## [4.0.0-beta.1] - 2026-03-02
|
|
18
|
+
|
|
19
|
+
### Added
|
|
20
|
+
|
|
21
|
+
- `SCSS`, `Emotion`, `Vanilla Extract`: bring back PDS v3 import paths for better DX and backward compatibility.
|
|
22
|
+
- `Accordion`:
|
|
23
|
+
- Slot `summary` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
24
|
+
- Slot `summary-before` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
25
|
+
- Slot `summary-after` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
26
|
+
- Prop `background` with values `canvas | surface | frosted | none (default)`
|
|
27
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
28
|
+
- Prop `align-marker` with values `start | end (default)`
|
|
29
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
30
|
+
- CSS Variable `--p-accordion-px` to control the horizontal padding
|
|
31
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
32
|
+
- CSS Variable `--p-accordion-py` to control the vertical padding
|
|
33
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
34
|
+
- CSS Variable `--p-accordion-summary-top` to control the optional sticky top position
|
|
35
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
36
|
+
|
|
37
|
+
### Changed
|
|
38
|
+
|
|
39
|
+
- `Accordion`:
|
|
40
|
+
- Modernize visual appearance ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
41
|
+
- Use semantic HTML element `<details>` and `<summary>` internally (instead of divs and buttons) for better
|
|
42
|
+
accessibility and native behavior
|
|
43
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
44
|
+
- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
|
|
45
|
+
`Input Time`, `Input Url`, `Textarea`: `value` sync with the underlying native `<input />` or `<textarea />` element
|
|
46
|
+
- `Checkbox`, `Input-*`, `Multi-Select`, `Pin Code`, `Radio Button Group`, `Segmented-Control`, `Select`, `Textarea`:
|
|
47
|
+
Slot `label-after` is not affected by `disbaled` states anymore
|
|
48
|
+
([#4181](https://github.com/porsche-design-system/porsche-design-system/pull/4181))
|
|
49
|
+
- **Vue:** All component events now emit the full `CustomEvent` instead of just the event detail. The event detail must
|
|
50
|
+
be accessed via `event.detail`. Props and other component data can be accessed directly via `event.target`.
|
|
51
|
+
|
|
52
|
+
```diff
|
|
53
|
+
<script setup lang="ts">
|
|
54
|
+
import { type AccordionUpdateEventDetail, PAccordion } from '@porsche-design-system/components-vue';
|
|
55
|
+
import { ref } from 'vue';
|
|
56
|
+
|
|
57
|
+
const isOpen = ref(false);
|
|
58
|
+
|
|
59
|
+
- const onUpdate = (event: AccordionUpdateEventDetail): void => {
|
|
60
|
+
+ const onUpdate = (event: CustomEvent<AccordionUpdateEventDetail>): void => {
|
|
61
|
+
- isOpen1.value = event.open;
|
|
62
|
+
+ isOpen1.value = event.detail.open; // You can also access the value from the component itself via e.target, e.g. e.target.open
|
|
63
|
+
};
|
|
64
|
+
</script>
|
|
65
|
+
|
|
66
|
+
<template>
|
|
67
|
+
<PAccordion :open="isOpen" @update="onUpdate">
|
|
68
|
+
...
|
|
69
|
+
</PAccordion>
|
|
70
|
+
</template>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Removed
|
|
74
|
+
|
|
75
|
+
- `Accordion`:
|
|
76
|
+
- Prop `tag` use `heading-tag` (deprecated with v4 now) instead or make use of `slot="summary"` for more flexibility
|
|
77
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
78
|
+
```diff
|
|
79
|
+
- <p-acccordion heading="Some summary" tag="h3">
|
|
80
|
+
<p-text>Some details</p-text>
|
|
81
|
+
</p-accordion>
|
|
82
|
+
+ <p-accordion>
|
|
83
|
+
+ <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
|
|
84
|
+
<p-text>Some details</p-text>
|
|
85
|
+
</p-accordion>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Deprecated
|
|
89
|
+
|
|
90
|
+
- `SCSS`: Import path for npm package:
|
|
91
|
+
|
|
92
|
+
```diff
|
|
93
|
+
- @use '@porsche-design-system/components-{js|angular|react|vue}/styles' as *;
|
|
94
|
+
+ @use '@porsche-design-system/components-{js|angular|react|vue}/scss' as *;
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
- `Emotion`: Import path for npm package:
|
|
98
|
+
|
|
99
|
+
```diff
|
|
100
|
+
- import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
|
|
101
|
+
+ import { … } from '@porsche-design-system/components-{js|angular|react|vue}/emotion';
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
- `Vanilla Extract`: Import path for npm package:
|
|
105
|
+
|
|
106
|
+
```diff
|
|
107
|
+
- import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';
|
|
108
|
+
+ import { … } from '@porsche-design-system/components-{js|angular|react|vue}/vanilla-extract';
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
- `Accordion`:
|
|
112
|
+
- Prop `heading`, `heading-tag` and `size` in favor of `slot="summary"` for more flexibility
|
|
113
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
114
|
+
```diff
|
|
115
|
+
- <p-acccordion heading="Some summary" heading-tag="h3" size="small">
|
|
116
|
+
<p-text>Some details</p-text>
|
|
117
|
+
</p-accordion>
|
|
118
|
+
+ <p-accordion>
|
|
119
|
+
+ <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
|
|
120
|
+
<p-text>Some details</p-text>
|
|
121
|
+
</p-accordion>
|
|
122
|
+
```
|
|
123
|
+
- Slot `heading` in favor of `slot="summary"`
|
|
124
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
125
|
+
```diff
|
|
126
|
+
<p-acccordion>
|
|
127
|
+
- <span slot="heading">Some summary</span>
|
|
128
|
+
<p-text>Some details</p-text>
|
|
129
|
+
</p-accordion>
|
|
130
|
+
<p-accordion>
|
|
131
|
+
+ <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
|
|
132
|
+
<p-text>Some details</p-text>
|
|
133
|
+
</p-accordion>
|
|
134
|
+
```
|
|
135
|
+
- CSS Variable `--p-accordion-position-sticky-top`, use `--p-accordion-summary-top` instead
|
|
136
|
+
([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
|
|
137
|
+
|
|
17
138
|
## [4.0.0-beta.0] - 2026-02-12
|
|
18
139
|
|
|
19
140
|
### Added
|
|
@@ -401,6 +522,17 @@ and migration steps.
|
|
|
401
522
|
- `Multi Select`, `Pin Code`, `Radio Group`, `Textarea`: disabled prop is not mutable
|
|
402
523
|
([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
|
|
403
524
|
([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
|
|
525
|
+
- `Multi Select`: trim whitespace of selected options text
|
|
526
|
+
([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
|
|
527
|
+
|
|
528
|
+
## [3.32.1] - 2026-02-24
|
|
529
|
+
|
|
530
|
+
## [3.32.1-rc.0] - 2026-02-20
|
|
531
|
+
|
|
532
|
+
### Fixed
|
|
533
|
+
|
|
534
|
+
- `Input Email`, `Input Password`, `Input Tel`, `Pin Code`: optimize input direction and behavior in RTL mode
|
|
535
|
+
([#4209](https://github.com/porsche-design-system/porsche-design-system/pull/4209))
|
|
404
536
|
|
|
405
537
|
## [3.32.0] - 2026-02-04
|
|
406
538
|
|
|
@@ -435,12 +567,37 @@ and migration steps.
|
|
|
435
567
|
|
|
436
568
|
### Added
|
|
437
569
|
|
|
570
|
+
- `Multi Select, Select`:
|
|
571
|
+
- `selected` slot for custom selection rendering and enabling complex options
|
|
572
|
+
- `options-status` slot for loading, error and no results states when using custom filtering
|
|
573
|
+
([#4111](https://github.com/porsche-design-system/porsche-design-system/pull/4111))
|
|
574
|
+
- `Multi Select, Select`:
|
|
575
|
+
- `filter` slot to allow custom asynchronous filtering
|
|
576
|
+
- `toggle` event when opening/closing the dropdown
|
|
577
|
+
([#4089](https://github.com/porsche-design-system/porsche-design-system/pull/4089))
|
|
578
|
+
- `Segmented Control`: add `state` and `message` props to enable visual validation states
|
|
579
|
+
([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023)) `Segmented Control`: add `label`,
|
|
580
|
+
- `Segmented Control`: `label`, `desription`, `hideLabel` and `required` props for better form integration
|
|
581
|
+
([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023))
|
|
582
|
+
- `Textarea`: `compact` prop to enable a smaller, space-saving version for compact layouts
|
|
583
|
+
([#4102](https://github.com/porsche-design-system/porsche-design-system/pull/4102))
|
|
584
|
+
- `Tag Dismissible`: `compact` prop to enable a smaller, space-saving version for compact layouts
|
|
585
|
+
([#4114](https://github.com/porsche-design-system/porsche-design-system/pull/4114))
|
|
586
|
+
- Flags: added `AL, BD, RE` flags ([#4128](https://github.com/porsche-design-system/porsche-design-system/pull/4128))
|
|
587
|
+
- `Input Month`, `Input Week`: ([#4126](https://github.com/porsche-design-system/porsche-design-system/pull/4126))
|
|
588
|
+
- `Input Search`: `maxLength` & `minLength` prop to specify the maximum and minimum number of characters the user can
|
|
589
|
+
enter ([#4131](https://github.com/porsche-design-system/porsche-design-system/pull/4131))
|
|
438
590
|
- `Textarea`: add CSS Variables for `fieldSizing`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight` to control the
|
|
439
591
|
intrinsic sizing behavior ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
|
|
440
|
-
- `Canvas`: prop `background` to set the background color to `canvas | surface`
|
|
441
592
|
|
|
442
593
|
### Fixed
|
|
443
594
|
|
|
595
|
+
- `Checkbox`: missing deprecation for `CheckboxUpdateEventDetail` event & disabled prop is not mutable
|
|
596
|
+
- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
|
|
597
|
+
`Input Time`, `Input Url`, `Textarea`: disabled prop is not mutable & error when disabled and invalid
|
|
598
|
+
- `Multi Select`, `Pin Code`, `Radio Group`, `Textarea`: disabled prop is not mutable
|
|
599
|
+
([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
|
|
600
|
+
([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
|
|
444
601
|
- `Multi Select`: trim whitespace of selected options text
|
|
445
602
|
([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
|
|
446
603
|
|
|
@@ -27,22 +27,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
27
27
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
|
|
28
28
|
|
|
29
29
|
class PAccordion extends BaseComponent {
|
|
30
|
+
alignMarker;
|
|
31
|
+
background;
|
|
30
32
|
compact;
|
|
33
|
+
/** @deprecated */
|
|
31
34
|
heading;
|
|
35
|
+
/** @deprecated */
|
|
32
36
|
headingTag;
|
|
33
37
|
open;
|
|
38
|
+
/** @deprecated */
|
|
34
39
|
size;
|
|
35
40
|
sticky;
|
|
36
41
|
update = new EventEmitter();
|
|
37
42
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PAccordion, isStandalone: false, selector: "p-accordion,[p-accordion]", inputs: { compact: "compact", heading: "heading", headingTag: "headingTag", open: "open", size: "size", sticky: "sticky" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PAccordion, isStandalone: false, selector: "p-accordion,[p-accordion]", inputs: { alignMarker: "alignMarker", background: "background", compact: "compact", heading: "heading", headingTag: "headingTag", open: "open", size: "size", sticky: "sticky" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
39
44
|
}
|
|
40
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PAccordion, decorators: [{
|
|
41
46
|
type: Component,
|
|
42
47
|
args: [{
|
|
43
48
|
selector: 'p-accordion,[p-accordion]',
|
|
44
49
|
template: '<ng-content />',
|
|
45
|
-
inputs: ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky'],
|
|
50
|
+
inputs: ['alignMarker', 'background', 'compact', 'heading', 'headingTag', 'open', 'size', 'sticky'],
|
|
46
51
|
outputs: ['update'],
|
|
47
52
|
standalone: false
|
|
48
53
|
}]
|