- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
- eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
- voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
- clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
- amet.
-
-
+ Modal with size {{ modal.data }}
diff --git a/packages/documentation/docs/controls/modal.md b/packages/documentation/docs/controls/modal.md
index 9b553af2cc..11256776bd 100644
--- a/packages/documentation/docs/controls/modal.md
+++ b/packages/documentation/docs/controls/modal.md
@@ -38,18 +38,35 @@ Select the appropriate section below for the respective usage information.
### Angular
+#### By template
+
+
+
+
+#### By instance
+
+angular: [
+"modal-by-instance.ts",
+"modal-by-instance-content.ts",
+],
+}}>
`@siemens/ix-angular` provides an injectable service that allows to open modal dialogs based on a `ng-template` reference or by component type.
diff --git a/packages/documentation/src/components/PlaygroundV3/index.tsx b/packages/documentation/src/components/PlaygroundV3/index.tsx
index dea53c6a34..bcf5ed020d 100644
--- a/packages/documentation/src/components/PlaygroundV3/index.tsx
+++ b/packages/documentation/src/components/PlaygroundV3/index.tsx
@@ -204,6 +204,7 @@ function SnippetPreview(props: { snippets: Record }) {
function ToolbarButtons(props: {
name: string;
+ deviantRootFileName: string;
activeFramework: TargetFramework;
noMargin: boolean;
snippets: Record;
@@ -235,7 +236,7 @@ function ToolbarButtons(props: {
baseUrl: baseUrl,
framework: props.activeFramework,
snippets: props.snippets,
- name: props.name,
+ name: props.deviantRootFileName ? props.deviantRootFileName : props.name,
version: 'latest',
})
}
@@ -272,6 +273,7 @@ export type PlaygroundV3Props = {
frameworks?: TargetFramework[];
preventDefaultExample?: boolean;
additionalFiles?: Record;
+ deviantRootFileName?: string;
} & DemoProps;
export default function PlaygroundV3(props: PlaygroundV3Props) {
@@ -332,6 +334,7 @@ export default function PlaygroundV3(props: PlaygroundV3Props) {
,
+ rootFileName: string
+) {
+ const componentRegex = /@Component\(/;
+
+ return Object.keys(snippets)
+ .filter((key) => {
+ return (
+ key.endsWith('.ts') &&
+ key !== `${rootFileName}.ts` &&
+ componentRegex.test(snippets[key])
+ );
+ })
+ .map((key) => key.replace('.ts', ''));
+}
+
async function createAngularProjectFiles(
baseUrl: string,
snippets: Record,
@@ -138,14 +155,34 @@ async function createAngularProjectFiles(
project[`src/${key.replace('./', '')}`] = snippets[key];
});
+ const additionalAngularComponents = getAdditionalAngularComponents(
+ snippets,
+ name
+ );
+
+ const importsString = additionalAngularComponents
+ .map(
+ (file) => `import ${fromKebabCaseToCamelCase(file)} from './../${file}';`
+ )
+ .join('\n');
+
project['src/app/app.module.ts'] = project['src/app/app.module.ts'].replace(
"import ExampleComponent from './example.component';",
- `import ${fromKebabCaseToCamelCase(name)} from './../${name}';`
+ [
+ `import ${fromKebabCaseToCamelCase(name)} from './../${name}';`,
+ importsString,
+ ].join('\n')
);
+ const importComponent = additionalAngularComponents
+ .map((file) => fromKebabCaseToCamelCase(file))
+ .join(', ');
+
project['src/app/app.module.ts'] = project['src/app/app.module.ts'].replace(
'declarations: [AppComponent, ExampleComponent],',
- `declarations: [AppComponent, ${fromKebabCaseToCamelCase(name)}],`
+ `declarations: [AppComponent, ${fromKebabCaseToCamelCase(
+ name
+ )}, ${importComponent}],`
);
return project;