@porsche-design-system/components-react 3.34.0-rc.0 → 3.35.0-rc.0
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 +14 -0
- package/cjs/lib/components/ai-tag.wrapper.cjs +26 -0
- package/cjs/public-api.cjs +2 -0
- package/esm/lib/components/ai-tag.wrapper.d.ts +30 -0
- package/esm/lib/components/ai-tag.wrapper.mjs +24 -0
- package/esm/lib/components/index.d.ts +1 -0
- package/esm/lib/types.d.ts +219 -0
- package/esm/public-api.mjs +1 -0
- package/package.json +2 -2
- package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +64 -7
- package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs +159 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/ai-tag.wrapper.cjs +36 -0
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/ai-tag.cjs +18 -0
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/public-api.cjs +2 -0
- package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +63 -7
- package/ssr/esm/components/dist/utils/esm/utils-entry.mjs +158 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/ai-tag.wrapper.mjs +34 -0
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.mjs +2 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/ai-tag.mjs +16 -0
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs +1 -0
- package/ssr/esm/lib/components/ai-tag.wrapper.d.ts +30 -0
- package/ssr/esm/lib/components/index.d.ts +1 -0
- package/ssr/esm/lib/dsr-components/ai-tag.d.ts +5 -0
- package/ssr/esm/lib/types.d.ts +219 -0
package/CHANGELOG.md
CHANGED
|
@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
|
|
|
14
14
|
|
|
15
15
|
## [Unreleased]
|
|
16
16
|
|
|
17
|
+
## [3.35.0-rc.0] - 2026-05-05
|
|
18
|
+
|
|
19
|
+
### Added
|
|
20
|
+
|
|
21
|
+
- `AI-Tag`: New component to mark AI-generated/AI-modified content
|
|
22
|
+
([#4236](https://github.com/porsche-design-system/porsche-design-system/pull/4236))
|
|
23
|
+
|
|
24
|
+
### Fixed
|
|
25
|
+
|
|
26
|
+
- `Multi Select`, `Select`: not correctly updating when options within `p-optgroup` change dynamically
|
|
27
|
+
([#4278](https://github.com/porsche-design-system/porsche-design-system/pull/4279))
|
|
28
|
+
|
|
29
|
+
## [3.34.0] - 2026-04-09
|
|
30
|
+
|
|
17
31
|
## [3.34.0-rc.0] - 2026-04-01
|
|
18
32
|
|
|
19
33
|
### Added
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var hooks = require('../../hooks.cjs');
|
|
7
|
+
var utils = require('../../utils.cjs');
|
|
8
|
+
|
|
9
|
+
const PAiTag = /*#__PURE__*/ react.forwardRef(({ locale = 'en_US', theme, variant = 'generated', className, ...rest }, ref) => {
|
|
10
|
+
const elementRef = react.useRef(undefined);
|
|
11
|
+
const WebComponentTag = hooks.usePrefix('p-ai-tag');
|
|
12
|
+
const propsToSync = [locale, theme || hooks.useTheme(), variant];
|
|
13
|
+
hooks.useBrowserLayoutEffect(() => {
|
|
14
|
+
const { current } = elementRef;
|
|
15
|
+
['locale', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
16
|
+
}, propsToSync);
|
|
17
|
+
const props = {
|
|
18
|
+
...rest,
|
|
19
|
+
class: hooks.useMergedClass(elementRef, className),
|
|
20
|
+
ref: utils.syncRef(elementRef, ref)
|
|
21
|
+
};
|
|
22
|
+
// @ts-ignore
|
|
23
|
+
return jsxRuntime.jsx(WebComponentTag, { ...props });
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
exports.PAiTag = PAiTag;
|
package/cjs/public-api.cjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var componentsJs = require('@porsche-design-system/components-js');
|
|
4
4
|
var accordion_wrapper = require('./lib/components/accordion.wrapper.cjs');
|
|
5
|
+
var aiTag_wrapper = require('./lib/components/ai-tag.wrapper.cjs');
|
|
5
6
|
var banner_wrapper = require('./lib/components/banner.wrapper.cjs');
|
|
6
7
|
var button_wrapper = require('./lib/components/button.wrapper.cjs');
|
|
7
8
|
var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.cjs');
|
|
@@ -101,6 +102,7 @@ Object.defineProperty(exports, "componentsReady", {
|
|
|
101
102
|
get: function () { return componentsJs.componentsReady; }
|
|
102
103
|
});
|
|
103
104
|
exports.PAccordion = accordion_wrapper.PAccordion;
|
|
105
|
+
exports.PAiTag = aiTag_wrapper.PAiTag;
|
|
104
106
|
exports.PBanner = banner_wrapper.PBanner;
|
|
105
107
|
exports.PButton = button_wrapper.PButton;
|
|
106
108
|
exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { BaseProps } from '../../BaseProps';
|
|
2
|
+
import type { AiTagLocale, Theme, AiTagVariant } from '../types';
|
|
3
|
+
export type PAiTagProps = BaseProps & {
|
|
4
|
+
/**
|
|
5
|
+
* Locale for the AI text (ISO format, e.g. "de_DE").
|
|
6
|
+
*/
|
|
7
|
+
locale?: AiTagLocale;
|
|
8
|
+
/**
|
|
9
|
+
* Adapts the tag color depending on the theme.
|
|
10
|
+
*/
|
|
11
|
+
theme?: Theme;
|
|
12
|
+
/**
|
|
13
|
+
* Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
|
|
14
|
+
*/
|
|
15
|
+
variant?: AiTagVariant;
|
|
16
|
+
};
|
|
17
|
+
export declare const PAiTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
18
|
+
/**
|
|
19
|
+
* Locale for the AI text (ISO format, e.g. "de_DE").
|
|
20
|
+
*/
|
|
21
|
+
locale?: AiTagLocale;
|
|
22
|
+
/**
|
|
23
|
+
* Adapts the tag color depending on the theme.
|
|
24
|
+
*/
|
|
25
|
+
theme?: Theme;
|
|
26
|
+
/**
|
|
27
|
+
* Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
|
|
28
|
+
*/
|
|
29
|
+
variant?: AiTagVariant;
|
|
30
|
+
} & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, useRef } from 'react';
|
|
4
|
+
import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
|
+
import { syncRef } from '../../utils.mjs';
|
|
6
|
+
|
|
7
|
+
const PAiTag = /*#__PURE__*/ forwardRef(({ locale = 'en_US', theme, variant = 'generated', className, ...rest }, ref) => {
|
|
8
|
+
const elementRef = useRef(undefined);
|
|
9
|
+
const WebComponentTag = usePrefix('p-ai-tag');
|
|
10
|
+
const propsToSync = [locale, theme || useTheme(), variant];
|
|
11
|
+
useBrowserLayoutEffect(() => {
|
|
12
|
+
const { current } = elementRef;
|
|
13
|
+
['locale', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
14
|
+
}, propsToSync);
|
|
15
|
+
const props = {
|
|
16
|
+
...rest,
|
|
17
|
+
class: useMergedClass(elementRef, className),
|
|
18
|
+
ref: syncRef(elementRef, ref)
|
|
19
|
+
};
|
|
20
|
+
// @ts-ignore
|
|
21
|
+
return jsx(WebComponentTag, { ...props });
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export { PAiTag };
|
package/esm/lib/types.d.ts
CHANGED
|
@@ -873,6 +873,225 @@ export type AccordionUpdateEventDetail = AccordionUpdateEvent;
|
|
|
873
873
|
/** @deprecated */
|
|
874
874
|
export type AccordionTag = HeadingTag;
|
|
875
875
|
export type AccordionHeadingTag = HeadingTag;
|
|
876
|
+
declare const AI_TAG_VARIANTS: readonly [
|
|
877
|
+
"abbreviation",
|
|
878
|
+
"generated",
|
|
879
|
+
"modified"
|
|
880
|
+
];
|
|
881
|
+
export type AiTagVariant = (typeof AI_TAG_VARIANTS)[number];
|
|
882
|
+
declare const AI_TAG_TRANSLATIONS: {
|
|
883
|
+
bg_BG: {
|
|
884
|
+
short: string;
|
|
885
|
+
long: string;
|
|
886
|
+
generated: string;
|
|
887
|
+
modified: string;
|
|
888
|
+
};
|
|
889
|
+
bs_BA: {
|
|
890
|
+
short: string;
|
|
891
|
+
long: string;
|
|
892
|
+
generated: string;
|
|
893
|
+
modified: string;
|
|
894
|
+
};
|
|
895
|
+
cs_CZ: {
|
|
896
|
+
short: string;
|
|
897
|
+
long: string;
|
|
898
|
+
generated: string;
|
|
899
|
+
modified: string;
|
|
900
|
+
};
|
|
901
|
+
da_DK: {
|
|
902
|
+
short: string;
|
|
903
|
+
long: string;
|
|
904
|
+
generated: string;
|
|
905
|
+
modified: string;
|
|
906
|
+
};
|
|
907
|
+
de_DE: {
|
|
908
|
+
short: string;
|
|
909
|
+
long: string;
|
|
910
|
+
generated: string;
|
|
911
|
+
modified: string;
|
|
912
|
+
};
|
|
913
|
+
el_GR: {
|
|
914
|
+
short: string;
|
|
915
|
+
long: string;
|
|
916
|
+
generated: string;
|
|
917
|
+
modified: string;
|
|
918
|
+
};
|
|
919
|
+
en_CY: {
|
|
920
|
+
short: string;
|
|
921
|
+
long: string;
|
|
922
|
+
generated: string;
|
|
923
|
+
modified: string;
|
|
924
|
+
};
|
|
925
|
+
en_GB: {
|
|
926
|
+
short: string;
|
|
927
|
+
long: string;
|
|
928
|
+
generated: string;
|
|
929
|
+
modified: string;
|
|
930
|
+
};
|
|
931
|
+
en_US: {
|
|
932
|
+
short: string;
|
|
933
|
+
long: string;
|
|
934
|
+
generated: string;
|
|
935
|
+
modified: string;
|
|
936
|
+
};
|
|
937
|
+
es_ES: {
|
|
938
|
+
short: string;
|
|
939
|
+
long: string;
|
|
940
|
+
generated: string;
|
|
941
|
+
modified: string;
|
|
942
|
+
};
|
|
943
|
+
et_EE: {
|
|
944
|
+
short: string;
|
|
945
|
+
long: string;
|
|
946
|
+
generated: string;
|
|
947
|
+
modified: string;
|
|
948
|
+
};
|
|
949
|
+
fi_FI: {
|
|
950
|
+
short: string;
|
|
951
|
+
long: string;
|
|
952
|
+
generated: string;
|
|
953
|
+
modified: string;
|
|
954
|
+
};
|
|
955
|
+
fr_FR: {
|
|
956
|
+
short: string;
|
|
957
|
+
long: string;
|
|
958
|
+
generated: string;
|
|
959
|
+
modified: string;
|
|
960
|
+
};
|
|
961
|
+
he_IL: {
|
|
962
|
+
short: string;
|
|
963
|
+
long: string;
|
|
964
|
+
generated: string;
|
|
965
|
+
modified: string;
|
|
966
|
+
};
|
|
967
|
+
hr_HR: {
|
|
968
|
+
short: string;
|
|
969
|
+
long: string;
|
|
970
|
+
generated: string;
|
|
971
|
+
modified: string;
|
|
972
|
+
};
|
|
973
|
+
hu_HU: {
|
|
974
|
+
short: string;
|
|
975
|
+
long: string;
|
|
976
|
+
generated: string;
|
|
977
|
+
modified: string;
|
|
978
|
+
};
|
|
979
|
+
is_IS: {
|
|
980
|
+
short: string;
|
|
981
|
+
long: string;
|
|
982
|
+
generated: string;
|
|
983
|
+
modified: string;
|
|
984
|
+
};
|
|
985
|
+
it_IT: {
|
|
986
|
+
short: string;
|
|
987
|
+
long: string;
|
|
988
|
+
generated: string;
|
|
989
|
+
modified: string;
|
|
990
|
+
};
|
|
991
|
+
lt_LT: {
|
|
992
|
+
short: string;
|
|
993
|
+
long: string;
|
|
994
|
+
generated: string;
|
|
995
|
+
modified: string;
|
|
996
|
+
};
|
|
997
|
+
lv_LV: {
|
|
998
|
+
short: string;
|
|
999
|
+
long: string;
|
|
1000
|
+
generated: string;
|
|
1001
|
+
modified: string;
|
|
1002
|
+
};
|
|
1003
|
+
me_ME: {
|
|
1004
|
+
short: string;
|
|
1005
|
+
long: string;
|
|
1006
|
+
generated: string;
|
|
1007
|
+
modified: string;
|
|
1008
|
+
};
|
|
1009
|
+
mk_MK: {
|
|
1010
|
+
short: string;
|
|
1011
|
+
long: string;
|
|
1012
|
+
generated: string;
|
|
1013
|
+
modified: string;
|
|
1014
|
+
};
|
|
1015
|
+
mt_MT: {
|
|
1016
|
+
short: string;
|
|
1017
|
+
long: string;
|
|
1018
|
+
generated: string;
|
|
1019
|
+
modified: string;
|
|
1020
|
+
};
|
|
1021
|
+
nb_NO: {
|
|
1022
|
+
short: string;
|
|
1023
|
+
long: string;
|
|
1024
|
+
generated: string;
|
|
1025
|
+
modified: string;
|
|
1026
|
+
};
|
|
1027
|
+
nl_NL: {
|
|
1028
|
+
short: string;
|
|
1029
|
+
long: string;
|
|
1030
|
+
generated: string;
|
|
1031
|
+
modified: string;
|
|
1032
|
+
};
|
|
1033
|
+
pl_PL: {
|
|
1034
|
+
short: string;
|
|
1035
|
+
long: string;
|
|
1036
|
+
generated: string;
|
|
1037
|
+
modified: string;
|
|
1038
|
+
};
|
|
1039
|
+
pt_PT: {
|
|
1040
|
+
short: string;
|
|
1041
|
+
long: string;
|
|
1042
|
+
generated: string;
|
|
1043
|
+
modified: string;
|
|
1044
|
+
};
|
|
1045
|
+
ro_RO: {
|
|
1046
|
+
short: string;
|
|
1047
|
+
long: string;
|
|
1048
|
+
generated: string;
|
|
1049
|
+
modified: string;
|
|
1050
|
+
};
|
|
1051
|
+
ru_RU: {
|
|
1052
|
+
short: string;
|
|
1053
|
+
long: string;
|
|
1054
|
+
generated: string;
|
|
1055
|
+
modified: string;
|
|
1056
|
+
};
|
|
1057
|
+
sk_SK: {
|
|
1058
|
+
short: string;
|
|
1059
|
+
long: string;
|
|
1060
|
+
generated: string;
|
|
1061
|
+
modified: string;
|
|
1062
|
+
};
|
|
1063
|
+
sl_SI: {
|
|
1064
|
+
short: string;
|
|
1065
|
+
long: string;
|
|
1066
|
+
generated: string;
|
|
1067
|
+
modified: string;
|
|
1068
|
+
};
|
|
1069
|
+
sr_RS: {
|
|
1070
|
+
short: string;
|
|
1071
|
+
long: string;
|
|
1072
|
+
generated: string;
|
|
1073
|
+
modified: string;
|
|
1074
|
+
};
|
|
1075
|
+
sv_SE: {
|
|
1076
|
+
short: string;
|
|
1077
|
+
long: string;
|
|
1078
|
+
generated: string;
|
|
1079
|
+
modified: string;
|
|
1080
|
+
};
|
|
1081
|
+
tr_TR: {
|
|
1082
|
+
short: string;
|
|
1083
|
+
long: string;
|
|
1084
|
+
generated: string;
|
|
1085
|
+
modified: string;
|
|
1086
|
+
};
|
|
1087
|
+
uk_UA: {
|
|
1088
|
+
short: string;
|
|
1089
|
+
long: string;
|
|
1090
|
+
generated: string;
|
|
1091
|
+
modified: string;
|
|
1092
|
+
};
|
|
1093
|
+
};
|
|
1094
|
+
export type AiTagLocale = keyof typeof AI_TAG_TRANSLATIONS;
|
|
876
1095
|
declare const INLINE_NOTIFICATION_STATES: readonly [
|
|
877
1096
|
"success",
|
|
878
1097
|
"info",
|
package/esm/public-api.mjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { componentsReady } from '@porsche-design-system/components-js';
|
|
2
2
|
export { PAccordion } from './lib/components/accordion.wrapper.mjs';
|
|
3
|
+
export { PAiTag } from './lib/components/ai-tag.wrapper.mjs';
|
|
3
4
|
export { PBanner } from './lib/components/banner.wrapper.mjs';
|
|
4
5
|
export { PButton } from './lib/components/button.wrapper.mjs';
|
|
5
6
|
export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@porsche-design-system/components-react",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.35.0-rc.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"porsche",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"license": "SEE LICENSE IN LICENSE",
|
|
18
18
|
"homepage": "https://designsystem.porsche.com",
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@porsche-design-system/components-js": "3.
|
|
20
|
+
"@porsche-design-system/components-js": "3.35.0-rc.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"ag-grid-community": ">= 35.0.0 <36.0.0",
|
|
@@ -3643,7 +3643,7 @@ const hasShowPickerSupport = () => (hasDocument &&
|
|
|
3643
3643
|
'showPicker' in HTMLInputElement.prototype &&
|
|
3644
3644
|
CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
|
|
3645
3645
|
|
|
3646
|
-
const prefix = `[Porsche Design System v${"3.
|
|
3646
|
+
const prefix = `[Porsche Design System v${"3.35.0-rc.0"}]` // this part isn't covered by unit tests
|
|
3647
3647
|
;
|
|
3648
3648
|
const consoleError = (...messages) => {
|
|
3649
3649
|
console.error(prefix, ...messages); // eslint-disable-line no-console
|
|
@@ -4039,7 +4039,7 @@ const forcedColorsMediaQuery = (style) => {
|
|
|
4039
4039
|
/**
|
|
4040
4040
|
* @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
|
|
4041
4041
|
*/
|
|
4042
|
-
const getComponentCss$
|
|
4042
|
+
const getComponentCss$1q = (size, compact, open, theme, sticky) => {
|
|
4043
4043
|
const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
|
|
4044
4044
|
const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
|
|
4045
4045
|
const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
|
|
@@ -4185,6 +4185,66 @@ const getComponentCss$1p = (size, compact, open, theme, sticky) => {
|
|
|
4185
4185
|
});
|
|
4186
4186
|
};
|
|
4187
4187
|
|
|
4188
|
+
const getInlineSVGBackgroundImage = (path) => {
|
|
4189
|
+
return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
|
|
4190
|
+
};
|
|
4191
|
+
|
|
4192
|
+
// SVG path data extracted from packages/assets/projects/icons/dist/icons/ai-spark-filled.svg (optimized)
|
|
4193
|
+
const AI_TAG_ICON_PATH = '<path d="M10.85 6.39c.54 2.84.8 4.26 1.65 5.1s2.27 1.12 5.11 1.66c.52.18.52.52 0 .7-2.82.53-4.24.8-5.09 1.63-.86.85-1.13 2.27-1.67 5.13-.18.52-.52.52-.7 0-.54-2.84-.8-4.26-1.65-5.1s-2.27-1.12-5.11-1.66c-.52-.18-.52-.52 0-.7 2.84-.54 4.26-.8 5.1-1.65s1.12-2.27 1.66-5.11c.18-.52.52-.52.7 0m6.81-3.2c.25 1.32.38 1.98.77 2.38s1.06.52 2.39.77c.24.08.24.24 0 .32-1.3.25-1.97.38-2.36.75-.41.4-.54 1.06-.8 2.4-.08.25-.24.25-.32 0-.24-1.25-.37-1.91-.72-2.31-.39-.45-1.05-.57-2.44-.84-.24-.08-.24-.24 0-.32 1.33-.25 1.99-.38 2.38-.77s.53-1.06.78-2.39c.08-.24.24-.24.32 0"/>';
|
|
4194
|
+
|
|
4195
|
+
const getComponentCss$1p = (theme) => {
|
|
4196
|
+
const { backgroundFrostedColor, contrastHighColor } = getThemedColors(theme);
|
|
4197
|
+
const { backgroundFrostedColor: backgroundFrostedColorDark, contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
|
|
4198
|
+
const iconMask = `${getInlineSVGBackgroundImage(AI_TAG_ICON_PATH)} center/contain no-repeat`;
|
|
4199
|
+
return getCss({
|
|
4200
|
+
'@global': {
|
|
4201
|
+
':host': {
|
|
4202
|
+
display: 'inline-flex',
|
|
4203
|
+
verticalAlign: 'top',
|
|
4204
|
+
whiteSpace: 'nowrap',
|
|
4205
|
+
...addImportantToEachRule({
|
|
4206
|
+
...colorSchemeStyles,
|
|
4207
|
+
...hostHiddenStyles,
|
|
4208
|
+
}),
|
|
4209
|
+
},
|
|
4210
|
+
abbr: {
|
|
4211
|
+
all: 'unset',
|
|
4212
|
+
},
|
|
4213
|
+
div: {
|
|
4214
|
+
display: 'flex',
|
|
4215
|
+
alignItems: 'center',
|
|
4216
|
+
gap: '2px',
|
|
4217
|
+
padding: '1px 6px 1px 4px',
|
|
4218
|
+
borderRadius: borderRadiusSmall,
|
|
4219
|
+
font: textXXSmallStyle.font,
|
|
4220
|
+
color: contrastHighColor,
|
|
4221
|
+
background: backgroundFrostedColor,
|
|
4222
|
+
...frostedGlassStyle,
|
|
4223
|
+
...(isHighContrastMode && {
|
|
4224
|
+
outline: '1px solid transparent',
|
|
4225
|
+
}),
|
|
4226
|
+
transition: `${getTransition('color')}, ${getTransition('background-color')}, ${getTransition('backdrop-filter')}`,
|
|
4227
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
4228
|
+
color: contrastHighColorDark,
|
|
4229
|
+
background: backgroundFrostedColorDark,
|
|
4230
|
+
}),
|
|
4231
|
+
'&::before': {
|
|
4232
|
+
content: '""',
|
|
4233
|
+
width: '1rem',
|
|
4234
|
+
height: '1rem',
|
|
4235
|
+
backgroundColor: contrastHighColor,
|
|
4236
|
+
mask: iconMask,
|
|
4237
|
+
WebkitMask: iconMask,
|
|
4238
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
4239
|
+
backgroundColor: contrastHighColorDark,
|
|
4240
|
+
}),
|
|
4241
|
+
...(isHighContrastMode && { backgroundColor: 'CanvasText' }),
|
|
4242
|
+
},
|
|
4243
|
+
},
|
|
4244
|
+
},
|
|
4245
|
+
});
|
|
4246
|
+
};
|
|
4247
|
+
|
|
4188
4248
|
const TOAST_Z_INDEX = 999999;
|
|
4189
4249
|
const BANNER_Z_INDEX = 99;
|
|
4190
4250
|
|
|
@@ -5644,10 +5704,6 @@ const escapeHashCharacter = (colorString) => {
|
|
|
5644
5704
|
return colorString.replace('#', '%23');
|
|
5645
5705
|
};
|
|
5646
5706
|
|
|
5647
|
-
const getInlineSVGBackgroundImage = (path) => {
|
|
5648
|
-
return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
|
|
5649
|
-
};
|
|
5650
|
-
|
|
5651
5707
|
const getFunctionalComponentRequiredStyles = () => {
|
|
5652
5708
|
return {
|
|
5653
5709
|
required: {
|
|
@@ -12296,7 +12352,8 @@ const getComponentCss = (size, theme) => {
|
|
|
12296
12352
|
exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
|
|
12297
12353
|
exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
|
|
12298
12354
|
exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
|
|
12299
|
-
exports.getAccordionCss = getComponentCss$
|
|
12355
|
+
exports.getAccordionCss = getComponentCss$1q;
|
|
12356
|
+
exports.getAiTagCss = getComponentCss$1p;
|
|
12300
12357
|
exports.getBannerCss = getComponentCss$1o;
|
|
12301
12358
|
exports.getButtonCss = getComponentCss$1k;
|
|
12302
12359
|
exports.getButtonGroupCss = getComponentCss$1n;
|
|
@@ -3446,7 +3446,7 @@ const hasShowPickerSupport = () => (hasDocument &&
|
|
|
3446
3446
|
'showPicker' in HTMLInputElement.prototype &&
|
|
3447
3447
|
CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
|
|
3448
3448
|
|
|
3449
|
-
const prefix = `[Porsche Design System v${"3.
|
|
3449
|
+
const prefix = `[Porsche Design System v${"3.35.0-rc.0"}]` // this part isn't covered by unit tests
|
|
3450
3450
|
;
|
|
3451
3451
|
const consoleError$1 = (...messages) => {
|
|
3452
3452
|
console.error(prefix, ...messages); // eslint-disable-line no-console
|
|
@@ -3633,6 +3633,162 @@ const internalValidateProps = {
|
|
|
3633
3633
|
const breakpointCustomizableTemplate = `value, ${internalValidateProps
|
|
3634
3634
|
.formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
|
|
3635
3635
|
.replace(/"/g, '')}`;
|
|
3636
|
+
// ISO locale code to AI text mapping
|
|
3637
|
+
const AI_TAG_TRANSLATIONS = {
|
|
3638
|
+
bg_BG: {
|
|
3639
|
+
short: 'ИИ',
|
|
3640
|
+
long: 'изкуствен интелект',
|
|
3641
|
+
generated: 'генериран от изкуствен интелект',
|
|
3642
|
+
modified: 'модифициран от изкуствен интелект',
|
|
3643
|
+
},
|
|
3644
|
+
bs_BA: { short: 'AI', long: 'vještačka inteligencija', generated: 'AI-generisano', modified: 'AI-modifikovano' },
|
|
3645
|
+
cs_CZ: { short: 'AI', long: 'umělá inteligence', generated: 'Vytvořeno AI', modified: 'Upraveno AI' },
|
|
3646
|
+
da_DK: { short: 'KI', long: 'kunstig intelligens', generated: 'AI-genereret', modified: 'AI-modificeret' },
|
|
3647
|
+
de_DE: {
|
|
3648
|
+
short: 'KI',
|
|
3649
|
+
long: 'künstliche Intelligenz',
|
|
3650
|
+
generated: 'KI-generiert',
|
|
3651
|
+
modified: 'KI-modifiziert',
|
|
3652
|
+
},
|
|
3653
|
+
el_GR: {
|
|
3654
|
+
short: 'ΤΝ',
|
|
3655
|
+
long: 'τεχνητή νοημοσύνη',
|
|
3656
|
+
generated: 'Δημιουργημένο από ΤΝ',
|
|
3657
|
+
modified: 'Τροποποιημένο από ΤΝ',
|
|
3658
|
+
},
|
|
3659
|
+
en_CY: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
|
|
3660
|
+
en_GB: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
|
|
3661
|
+
en_US: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
|
|
3662
|
+
es_ES: {
|
|
3663
|
+
short: 'IA',
|
|
3664
|
+
long: 'inteligencia artificial',
|
|
3665
|
+
generated: 'Generado por IA',
|
|
3666
|
+
modified: 'Modificado por IA',
|
|
3667
|
+
},
|
|
3668
|
+
et_EE: { short: 'TI', long: 'tehisintellekt', generated: 'TI abil loodud', modified: 'TI abil muudetud' },
|
|
3669
|
+
fi_FI: {
|
|
3670
|
+
short: 'AI',
|
|
3671
|
+
long: 'tekoäly',
|
|
3672
|
+
generated: 'Tekoälyn tuottama',
|
|
3673
|
+
modified: 'Tekoälyn muokkaama',
|
|
3674
|
+
},
|
|
3675
|
+
fr_FR: {
|
|
3676
|
+
short: 'IA',
|
|
3677
|
+
long: 'intelligence artificielle',
|
|
3678
|
+
generated: 'Généré par une IA',
|
|
3679
|
+
modified: 'Modifié par une IA',
|
|
3680
|
+
},
|
|
3681
|
+
he_IL: {
|
|
3682
|
+
short: 'AI',
|
|
3683
|
+
long: 'בינה מלאכותית',
|
|
3684
|
+
generated: 'נוצר על ידי בינה מלאכותית',
|
|
3685
|
+
modified: 'נערך באמצעות בינה מלאכותית',
|
|
3686
|
+
},
|
|
3687
|
+
hr_HR: {
|
|
3688
|
+
short: 'UI',
|
|
3689
|
+
long: 'umjetna inteligencija',
|
|
3690
|
+
generated: 'Generirano uz pomoć UI',
|
|
3691
|
+
modified: 'Izmijenjeno uz pomoć UI',
|
|
3692
|
+
},
|
|
3693
|
+
hu_HU: {
|
|
3694
|
+
short: 'MI',
|
|
3695
|
+
long: 'mesterséges intelligencia',
|
|
3696
|
+
generated: 'MI-generált',
|
|
3697
|
+
modified: 'MI-módosított',
|
|
3698
|
+
},
|
|
3699
|
+
is_IS: {
|
|
3700
|
+
short: 'AI',
|
|
3701
|
+
long: 'gervigreind',
|
|
3702
|
+
generated: 'Búið til af gervigreind',
|
|
3703
|
+
modified: 'Breytt af gervigreind',
|
|
3704
|
+
},
|
|
3705
|
+
it_IT: {
|
|
3706
|
+
short: 'IA',
|
|
3707
|
+
long: 'intelligenza artificiale',
|
|
3708
|
+
generated: "Generato dall'IA",
|
|
3709
|
+
modified: "Modificato dall'IA",
|
|
3710
|
+
},
|
|
3711
|
+
lt_LT: {
|
|
3712
|
+
short: 'DI',
|
|
3713
|
+
long: 'dirbtinis intelektas',
|
|
3714
|
+
generated: 'DI sugeneruotas',
|
|
3715
|
+
modified: 'DI modifikuotas',
|
|
3716
|
+
},
|
|
3717
|
+
lv_LV: {
|
|
3718
|
+
short: 'MI',
|
|
3719
|
+
long: 'mākslīgais intelekts',
|
|
3720
|
+
generated: 'MI ģenerēts',
|
|
3721
|
+
modified: 'MI pārveidots',
|
|
3722
|
+
},
|
|
3723
|
+
me_ME: { short: 'AI', long: 'veštačka inteligencija', generated: 'AI-generisano', modified: 'AI-modifikovano' },
|
|
3724
|
+
mk_MK: {
|
|
3725
|
+
short: 'ВИ',
|
|
3726
|
+
long: 'вештачка интелигенција',
|
|
3727
|
+
generated: 'Создадено од ВИ',
|
|
3728
|
+
modified: 'Изменето со ВИ',
|
|
3729
|
+
},
|
|
3730
|
+
mt_MT: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
|
|
3731
|
+
nb_NO: {
|
|
3732
|
+
short: 'KI',
|
|
3733
|
+
long: 'kunstig intelligens',
|
|
3734
|
+
generated: 'KI-generert',
|
|
3735
|
+
modified: 'KI-modifisert',
|
|
3736
|
+
},
|
|
3737
|
+
nl_NL: {
|
|
3738
|
+
short: 'AI',
|
|
3739
|
+
long: 'kunstmatige intelligentie',
|
|
3740
|
+
generated: 'Door AI gegenereerd',
|
|
3741
|
+
modified: 'Door AI gewijzigd',
|
|
3742
|
+
},
|
|
3743
|
+
pl_PL: {
|
|
3744
|
+
short: 'SI',
|
|
3745
|
+
long: 'sztuczna inteligencja',
|
|
3746
|
+
generated: 'Wygenerowane przez SI',
|
|
3747
|
+
modified: 'Zmodyfikowane przez SI',
|
|
3748
|
+
},
|
|
3749
|
+
pt_PT: {
|
|
3750
|
+
short: 'IA',
|
|
3751
|
+
long: 'inteligência artificial',
|
|
3752
|
+
generated: 'Gerado por IA',
|
|
3753
|
+
modified: 'Modificado por IA',
|
|
3754
|
+
},
|
|
3755
|
+
ro_RO: {
|
|
3756
|
+
short: 'IA',
|
|
3757
|
+
long: 'inteligență artificială',
|
|
3758
|
+
generated: 'Generat cu ajutorul IA',
|
|
3759
|
+
modified: 'Modificat cu ajutorul IA',
|
|
3760
|
+
},
|
|
3761
|
+
ru_RU: {
|
|
3762
|
+
short: 'ИИ',
|
|
3763
|
+
long: 'искусственный интеллект',
|
|
3764
|
+
generated: 'Сгенерировано ИИ',
|
|
3765
|
+
modified: 'Изменено ИИ',
|
|
3766
|
+
},
|
|
3767
|
+
sk_SK: { short: 'AI', long: 'umelá inteligencia', generated: 'Vytvorené AI', modified: 'Upravené AI' },
|
|
3768
|
+
sl_SI: { short: 'UI', long: 'umetna inteligenca', generated: 'Ustvarjeno z UI', modified: 'Spremenjeno z UI' },
|
|
3769
|
+
sr_RS: { short: 'AI', long: 'veštačka inteligencija', generated: 'AI-generisano', modified: 'AI-modifikovano' },
|
|
3770
|
+
sv_SE: {
|
|
3771
|
+
short: 'AI',
|
|
3772
|
+
long: 'artificiell intelligens',
|
|
3773
|
+
generated: 'AI-genererad',
|
|
3774
|
+
modified: 'AI-modifierad',
|
|
3775
|
+
},
|
|
3776
|
+
tr_TR: {
|
|
3777
|
+
short: 'AI',
|
|
3778
|
+
long: 'yapay zeka',
|
|
3779
|
+
generated: 'Yapay zeka tarafından üretilmiş',
|
|
3780
|
+
modified: 'Yapay zeka tarafından değiştirilmiş',
|
|
3781
|
+
},
|
|
3782
|
+
uk_UA: {
|
|
3783
|
+
short: 'ШІ',
|
|
3784
|
+
long: 'штучний інтелект',
|
|
3785
|
+
generated: 'Згенеровано ШІ',
|
|
3786
|
+
modified: 'Змінено ШІ',
|
|
3787
|
+
},
|
|
3788
|
+
};
|
|
3789
|
+
const getAiTagTranslation = (locale) => {
|
|
3790
|
+
return AI_TAG_TRANSLATIONS[locale] ?? AI_TAG_TRANSLATIONS['en_US'];
|
|
3791
|
+
};
|
|
3636
3792
|
const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
|
|
3637
3793
|
return {
|
|
3638
3794
|
...parseAndGetAriaAttributes(aria),
|
|
@@ -3997,6 +4153,7 @@ const getTextTagType = (host, tag) => {
|
|
|
3997
4153
|
return tag;
|
|
3998
4154
|
};
|
|
3999
4155
|
|
|
4156
|
+
exports.AI_TAG_TRANSLATIONS = AI_TAG_TRANSLATIONS;
|
|
4000
4157
|
exports.DISPLAY_TAGS = DISPLAY_TAGS;
|
|
4001
4158
|
exports.HEADING_TAGS = HEADING_TAGS;
|
|
4002
4159
|
exports.HEADLINE_TAGS = HEADLINE_TAGS;
|
|
@@ -4016,6 +4173,7 @@ exports.createRange = createRange;
|
|
|
4016
4173
|
exports.crestSize = crestSize;
|
|
4017
4174
|
exports.descriptionId = descriptionId;
|
|
4018
4175
|
exports.displaySizeToTagMap = displaySizeToTagMap;
|
|
4176
|
+
exports.getAiTagTranslation = getAiTagTranslation;
|
|
4019
4177
|
exports.getButtonAriaAttributes = getButtonAriaAttributes;
|
|
4020
4178
|
exports.getButtonBaseAriaAttributes = getButtonBaseAriaAttributes;
|
|
4021
4179
|
exports.getButtonPureAriaAttributes = getButtonPureAriaAttributes;
|