docs: generate components with complex children for patternhub copy-code

output/vue/README.md

@@ -36,7 +36,6 @@ Import the styles in scss or css. Based on your technology the file names could
 ```ts
 // main.ts
 import "./style.scss";
-import "@db-ui/v-components/dist/style.css";
 ```
 
 </details>
@@ -46,7 +45,6 @@ import "@db-ui/v-components/dist/style.css";
 ```ts
 // main.ts
 import "@db-ui/components/build/styles/db-ui-42-rollup.css";
-import "@db-ui/v-components/dist/style.css";
 ```
 
 </details>

packages/components/src/components/popover/docs/React.md

@@ -9,7 +9,7 @@ For general installation and configuration take a look at the [react-components]
 import { DBPopover, DBButton } from "@db-ui/react-components";
 
 const App = () => (
-	<DBPopover slotTrigger={<DBButton>Hover on me to open Popover</DBButton>}>
+	<DBPopover trigger={<DBButton>Hover on me to open Popover</DBButton>}>
 		Use any html code here like e.g. a <code>button</code>:
 		<button type="button">Test</button>
 	</DBPopover>

packages/components/src/components/tabs/tabs.lite.tsx

@@ -108,8 +108,8 @@ export default function DBTabs(props: DBTabsProps) {
 										!props.initialSelectedMode ||
 										props.initialSelectedMode === 'auto';
 									const shouldAutoSelect =
-										(props.initialSelectedIndex ===
-											undefined &&
+										(props.initialSelectedIndex ==
+											null &&
 											index === 0) ||
 										props.initialSelectedIndex === index;
 									if (autoSelect && shouldAutoSelect) {

showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html

@@ -11,9 +11,9 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-accordion-item
-			[headlinePlain]="exampleProps.headlinePlain"
-			[disabled]="exampleProps.disabled"
-			[defaultOpen]="exampleProps.open"
+			[headlinePlain]="exampleProps?.headlinePlain"
+			[disabled]="exampleProps?.disabled"
+			[defaultOpen]="exampleProps?.open"
 		>
 			{{ exampleName }}
 		</db-accordion-item>

showcases/angular-showcase/src/app/components/accordion/accordion.component.html

@@ -14,8 +14,8 @@
 				{{ exampleName }}
 			</db-infotext>
 			<db-accordion
-				[behaviour]="exampleProps.behaviour"
-				[variant]="exampleProps.variant"
+				[behaviour]="exampleProps?.behaviour"
+				[variant]="exampleProps?.variant"
 			>
 				<db-accordion-item
 					headlinePlain="Item 1"

showcases/angular-showcase/src/app/components/badge/badge.component.html

@@ -10,31 +10,31 @@
 		let-exampleIndex="exampleIndex"
 		let-variantIndex="variantIndex"
 	>
-		@if (!exampleProps.placement && !exampleProps.example) {
+		@if (!exampleProps?.placement && !exampleProps?.example) {
 			<db-badge
-				[semantic]="exampleProps.semantic"
-				[emphasis]="exampleProps.emphasis"
-				[size]="exampleProps.size"
-				>{{ exampleProps.noContent ? "" : exampleName }}</db-badge
+				[semantic]="exampleProps?.semantic"
+				[emphasis]="exampleProps?.emphasis"
+				[size]="exampleProps?.size"
+				>{{ exampleProps?.noContent ? "" : exampleName }}</db-badge
 			>
-			@if (exampleProps.noContent) {
+			@if (exampleProps?.noContent) {
 				<db-infotext semantic="informational" size="small" icon="none">
 					{{ exampleName }}
 				</db-infotext>
 			}
 		}
 
 		@if (
-			exampleProps.placement &&
-			exampleProps.placement !== "inline" &&
-			!exampleProps.example
+			exampleProps?.placement &&
+			exampleProps?.placement !== "inline" &&
+			!exampleProps?.example
 		) {
 			<db-button icon="user" variant="outlined" [noText]="true">
 				<db-badge
 					emphasis="strong"
 					semantic="critical"
 					size="small"
-					[placement]="exampleProps.placement"
+					[placement]="exampleProps?.placement"
 				></db-badge>
 				{{ exampleName }}
 			</db-button>
@@ -43,7 +43,7 @@
 			</db-infotext>
 		}
 
-		@if (exampleProps.placement === "inline") {
+		@if (exampleProps?.placement === "inline") {
 			<div class="badge-inline-container">
 				<db-icon icon="user"></db-icon>
 				<span>{{ exampleName }}</span>
@@ -54,11 +54,11 @@
 			</div>
 		}
 
-		@if (exampleProps.example === "icon") {
+		@if (exampleProps?.example === "icon") {
 			<db-badge
 				semantic="critical"
 				emphasis="strong"
-				[size]="exampleProps.size"
+				[size]="exampleProps?.size"
 			>
 				<db-icon icon="user">{{ exampleName }}</db-icon>
 			</db-badge>
@@ -67,7 +67,7 @@
 			</db-infotext>
 		}
 
-		@if (exampleProps.example === "number") {
+		@if (exampleProps?.example === "number") {
 			<db-badge semantic="successful">9</db-badge>
 			<db-badge semantic="informational">12</db-badge>
 			<db-badge semantic="warning">123</db-badge>

showcases/angular-showcase/src/app/components/brand/brand.component.html

@@ -10,8 +10,8 @@
 		let-exampleIndex="exampleIndex"
 		let-variantIndex="variantIndex"
 	>
-		<db-brand [hideLogo]="exampleProps.hideLogo">
-			@if (exampleProps.customLogo) {
+		<db-brand [hideLogo]="exampleProps?.hideLogo">
+			@if (exampleProps?.customLogo) {
 				<img src="./assets/images/placeholder.jpg" alt="logo" />
 			}
 			{{ exampleName }}

showcases/angular-showcase/src/app/components/button/button.component.html

@@ -11,12 +11,12 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-button
-			[variant]="exampleProps.variant"
-			[size]="exampleProps.size"
-			[icon]="exampleProps.icon"
-			[noText]="exampleProps.noText"
-			[disabled]="exampleProps.disabled"
-			[width]="exampleProps.width"
+			[variant]="exampleProps?.variant"
+			[size]="exampleProps?.size"
+			[icon]="exampleProps?.icon"
+			[noText]="exampleProps?.noText"
+			[disabled]="exampleProps?.disabled"
+			[width]="exampleProps?.width"
 			(click)="showAlert(exampleName)"
 		>
 			{{ exampleName }}

showcases/angular-showcase/src/app/components/card/card.component.html

@@ -11,9 +11,9 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-card
-			[behaviour]="exampleProps.behaviour"
-			[elevationLevel]="exampleProps.elevationLevel"
-			[spacing]="exampleProps.spacing"
+			[behaviour]="exampleProps?.behaviour"
+			[elevationLevel]="exampleProps?.elevationLevel"
+			[spacing]="exampleProps?.spacing"
 		>
 			<strong>{{ exampleName }}</strong>
 		</db-card>

showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html

@@ -11,14 +11,14 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-checkbox
-			[label]="exampleProps.label"
-			[disabled]="exampleProps.disabled"
-			[checked]="exampleProps.checked"
-			[value]="exampleProps.value"
-			[required]="exampleProps.required"
-			[indeterminate]="exampleProps.indeterminate"
-			[variant]="exampleProps.variant"
-			[size]="exampleProps.size"
+			[label]="exampleProps?.label"
+			[disabled]="exampleProps?.disabled"
+			[checked]="exampleProps?.checked"
+			[value]="exampleProps?.value"
+			[required]="exampleProps?.required"
+			[indeterminate]="exampleProps?.indeterminate"
+			[variant]="exampleProps?.variant"
+			[size]="exampleProps?.size"
 			>{{ exampleName }}</db-checkbox
 		>
 	</ng-template>

showcases/angular-showcase/src/app/components/default.component.html

@@ -12,7 +12,7 @@
 						*ngTemplateOutlet="
 							exampleTemplate;
 							context: {
-								exampleProps: example.props,
+								exampleProps: example.props ?? {},
 								exampleName: example.name,
 								exampleIndex: exampleIndex,
 								variantIndex: variantRefIndex

showcases/angular-showcase/src/app/components/divider/divider.component.html

@@ -14,8 +14,8 @@
 			{{ exampleName }}</db-infotext
 		>
 		<db-divider
-			[variant]="exampleProps.variant"
-			[emphasis]="exampleProps.emphasis"
+			[variant]="exampleProps?.variant"
+			[emphasis]="exampleProps?.emphasis"
 		>
 		</db-divider>
 	</ng-template>

showcases/angular-showcase/src/app/components/drawer/drawer.component.html

@@ -11,12 +11,12 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-drawer
-			[backdrop]="exampleProps.backdrop"
-			[withCloseButton]="exampleProps.withCloseButton"
-			[rounded]="exampleProps.rounded"
-			[width]="exampleProps.width"
-			[spacing]="exampleProps.spacing"
-			[direction]="exampleProps.direction"
+			[backdrop]="exampleProps?.backdrop"
+			[withCloseButton]="exampleProps?.withCloseButton"
+			[rounded]="exampleProps?.rounded"
+			[width]="exampleProps?.width"
+			[spacing]="exampleProps?.spacing"
+			[direction]="exampleProps?.direction"
 			[open]="openDrawer === exampleName"
 			(onClose)="toggleDrawer(undefined)"
 		>

showcases/angular-showcase/src/app/components/header/header.component.html

@@ -12,15 +12,15 @@
 	>
 		<db-header
 			[width]="exampleProps?.width"
-			[forceMobile]="exampleProps.forceMobile"
+			[forceMobile]="exampleProps?.forceMobile"
 		>
 			<db-brand brand>
-				@if (!exampleProps.example || exampleProps.withName) {
+				@if (!exampleProps?.example || exampleProps?.withName) {
 					DBHeader
 				}
 			</db-brand>
 			<ng-container *dbNavigation>
-				@if (!exampleProps.example || exampleProps.withNavigation) {
+				@if (!exampleProps?.example || exampleProps?.withNavigation) {
 					<db-navigation [attr.aria-label]="exampleName">
 						<db-navigation-item icon="user">
 							<a href="#" *dbNavigationContent
@@ -36,13 +36,13 @@
 				}
 			</ng-container>
 			<ng-container *dbMetaNavigation>
-				@if (!exampleProps.example) {
+				@if (!exampleProps?.example) {
 					<db-link href="#">Imprint</db-link>
 					<db-link href="#">Help</db-link>
 				}
 			</ng-container>
 			<ng-container primary-action>
-				@if (!exampleProps.example) {
+				@if (!exampleProps?.example) {
 					<DBButton
 						icon="magnifying_glass"
 						variant="ghost"
@@ -52,7 +52,7 @@
 				}
 			</ng-container>
 			<ng-container *dbSecondaryAction>
-				@if (!exampleProps.example) {
+				@if (!exampleProps?.example) {
 					<DBButton icon="user" variant="ghost" [noText]="true">
 						Profile
 					</DBButton>

showcases/angular-showcase/src/app/components/infotext/infotext.component.html

@@ -11,9 +11,9 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-infotext
-			[size]="exampleProps.size"
-			[semantic]="exampleProps.semantic"
-			[icon]="exampleProps.icon"
+			[size]="exampleProps?.size"
+			[semantic]="exampleProps?.semantic"
+			[icon]="exampleProps?.icon"
 		>
 			{{ exampleName }}
 		</db-infotext>

showcases/angular-showcase/src/app/components/input/input.component.html

@@ -11,17 +11,17 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-input
-			[variant]="exampleProps.variant"
-			[label]="exampleProps.label"
-			[message]="exampleProps.message"
+			[variant]="exampleProps?.variant"
+			[label]="exampleProps?.label"
+			[message]="exampleProps?.message"
 			[placeholder]="exampleName"
-			[minLength]="exampleProps.minLength"
-			[required]="exampleProps.required"
-			[type]="exampleProps.type"
-			[disabled]="exampleProps.disabled"
-			[value]="exampleProps.value"
-			[icon]="exampleProps.icon"
-			[iconAfter]="exampleProps.iconAfter"
+			[minLength]="exampleProps?.minLength"
+			[required]="exampleProps?.required"
+			[type]="exampleProps?.type"
+			[disabled]="exampleProps?.disabled"
+			[value]="exampleProps?.value"
+			[icon]="exampleProps?.icon"
+			[iconAfter]="exampleProps?.iconAfter"
 		></db-input>
 	</ng-template>
 </app-default-component>

showcases/angular-showcase/src/app/components/link/link.component.html

@@ -11,11 +11,11 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-link
-			[variant]="exampleProps.variant"
-			[href]="exampleProps.href"
-			[disabled]="exampleProps.disabled"
-			[size]="exampleProps.size"
-			[content]="exampleProps.content"
+			[variant]="exampleProps?.variant"
+			[href]="exampleProps?.href"
+			[disabled]="exampleProps?.disabled"
+			[size]="exampleProps?.size"
+			[content]="exampleProps?.content"
 			>{{ exampleName }}</db-link
 		>
 	</ng-template>

showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html

@@ -12,22 +12,22 @@
 	>
 		<ul>
 			<db-navigation-item
-				[icon]="exampleProps.icon"
-				[width]="exampleProps.width"
-				[disabled]="exampleProps.disabled"
-				[active]="exampleProps.active"
+				[icon]="exampleProps?.icon"
+				[width]="exampleProps?.width"
+				[disabled]="exampleProps?.disabled"
+				[active]="exampleProps?.active"
 				(click)="showAlert(exampleName)"
 			>
 				<ng-container *dbNavigationContent>
-					@if (exampleProps.areaPopup) {
+					@if (exampleProps?.areaPopup) {
 						{{ exampleName }}
 					}
-					@if (!exampleProps.areaPopup) {
+					@if (!exampleProps?.areaPopup) {
 						<a href="#">{{ exampleName }}</a>
 					}
 				</ng-container>
 
-				@if (exampleProps.areaPopup) {
+				@if (exampleProps?.areaPopup) {
 					<ng-container sub-navigation>
 						<ul>
 							<db-navigation-item>

showcases/angular-showcase/src/app/components/notification/notification.component.html

@@ -11,19 +11,19 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-notification
-			[semantic]="exampleProps.semantic"
-			[headline]="exampleProps.headline"
-			[linkVariant]="exampleProps.linkVariant"
-			[icon]="exampleProps.icon"
-			[behaviour]="exampleProps.behaviour"
-			[variant]="exampleProps.variant"
-			[timestamp]="exampleProps.timestamp"
+			[semantic]="exampleProps?.semantic"
+			[headline]="exampleProps?.headline"
+			[linkVariant]="exampleProps?.linkVariant"
+			[icon]="exampleProps?.icon"
+			[behaviour]="exampleProps?.behaviour"
+			[variant]="exampleProps?.variant"
+			[timestamp]="exampleProps?.timestamp"
 			(onClose)="showNotification(exampleName)"
 		>
-			@if (exampleProps.link) {
+			@if (exampleProps?.link) {
 				<db-link link href="#">Textlink</db-link>
 			}
-			@if (exampleProps.img) {
+			@if (exampleProps?.img) {
 				<img
 					image
 					src="./assets/images/placeholder.jpg"