Initial setup for dev component

Dominik Grenz · Dominik Grenz · commit ab72fb9e66a2 · 2025-06-26T08:59:52.000+02:00
diff --git a/personalization-webcomponents/index-checklist-domi.html b/personalization-webcomponents/index-checklist-domi.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta
+            name="robots"
+            content="noindex"
+    />
+    <link
+            href="/favicon.ico"
+            rel="icon"
+    />
+    <meta
+            content="width=device-width, initial-scale=1.0"
+            name="viewport"
+    />
+    <title>personalization-webcomponent</title>
+
+    <!-- Muenchen.de Fontfaces -->
+    <link
+            href="https://assets.muenchen.de/mde/1.0.10/css/fonts.css"
+            rel="stylesheet"
+    />
+
+    <!-- built files will be auto injected -->
+    <script src="src/checklist-domi-webcomponent.ts" type="module"></script>
+</head>
+<body>
+<noscript>
+    <strong>
+        In order for the development page to work correctly, JavaScript needs to
+        be activated.
+    </strong>
+</noscript>
+<div>
+    <checklist-domi first-name="Domi"/>
+</div>
+</body>
+</html>
diff --git a/personalization-webcomponents/index.html b/personalization-webcomponents/index.html
@@ -42,6 +42,9 @@ <h1>The following webcomponents are available:</h1>
             <li>
                 <a href="index-my-checklists.html">my-checklists webcomp</a>
             </li>
+            <li>
+                <a href="index-checklist-domi.html">checklist domi webcomp</a>
+            </li>
         </ul>
     </div>
   </body>
diff --git a/personalization-webcomponents/src/checklist-domi-webcomponent.ts b/personalization-webcomponents/src/checklist-domi-webcomponent.ts
@@ -0,0 +1,14 @@
+import { defineCustomElement } from "vue";
+
+import ChecklistDomiVueComponent from "@/checklist-domi.vue";
+
+// convert into custom element constructor
+const ChecklistDetailWebcomponent = defineCustomElement(
+    ChecklistDomiVueComponent
+);
+
+// register
+customElements.define(
+    "checklist-domi",
+    ChecklistDetailWebcomponent
+);
diff --git a/personalization-webcomponents/src/checklist-domi.vue b/personalization-webcomponents/src/checklist-domi.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-html="mucIconsSprite" />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-html="customIconsSprite" />
+    <muc-callout>
+      <template #header>
+        <p>checklist-domi Webcomponent</p>
+      </template>
+      <template #content>
+        <p>{{ calloutContent }}</p>
+      </template>
+    </muc-callout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MucCallout } from "@muenchen/muc-patternlab-vue";
+import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
+import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
+import { computed } from "vue";
+
+import { FIRSTNAME_DEFAULT } from "@/util/constants";
+
+const { firstName = FIRSTNAME_DEFAULT } = defineProps<{
+  firstName?: string;
+}>();
+
+const calloutContent = computed(() => {
+  return `Hello ${firstName}`;
+});
+</script>
+
+<style>
+@import url("https://assets.muenchen.de/mde/1.0.10/css/style.css");
+@import "@muenchen/muc-patternlab-vue/assets/css/custom-style.css";
+@import "@muenchen/muc-patternlab-vue/style.css";
+</style>
