@muenchen/muc-patternlab-vue 1.7.1 → 1.8.0-beta.10

package/dist/assets/temporary/custom-icons.svg

@@ -0,0 +1,7 @@
+<!-- todo include in muc-patternlab-vue -->
+<svg style="display: none;">
+    <symbol viewBox="0 0 24 24" id="icon-pencil"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"/></symbol>
+    <symbol viewBox="0 0 24 24" id="icon-dots-vertical"><path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" /></symbol>
+    <symbol viewBox="0 0 24 24" id="icon-circle-off-outline"><path d="M22.11 21.46L2.39 1.73L1.11 3L4.06 5.95C2.78 7.63 2 9.72 2 12C2 17.5 6.5 22 12 22C14.28 22 16.37 21.23 18.05 19.94L20.84 22.73L22.11 21.46M12 20C7.58 20 4 16.42 4 12C4 10.27 4.56 8.68 5.5 7.38L16.62 18.5C15.32 19.45 13.73 20 12 20M8.17 4.97L6.72 3.5C8.25 2.56 10.06 2 12 2C17.5 2 22 6.5 22 12C22 13.94 21.44 15.75 20.5 17.28L19.03 15.83C19.65 14.69 20 13.39 20 12C20 7.58 16.42 4 12 4C10.61 4 9.31 4.35 8.17 4.97Z"/></symbol>
+    <symbol viewBox="0 0 24 24" id="icon-account"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/></symbol>
+</svg>

package/dist/assets/temporary/custom-style.css

@@ -2,7 +2,7 @@
  * We need this css to ensure the correct patternlab
  * behaviour inside of a webcomponent.
  */
-:root {
+:host, :root {
     --color-brand-main-blue: #005A9F;
     --color-neutrals-blue: #BDD4EA;
     --color-neutrals-blue-xlight: #F2F6FA;

package/dist/assets/temporary/muc-icons.svg

@@ -1,4 +1,4 @@
-<svg width="0" height="0" display="none" class="hidden">
+<svg style="display: none;">
     <symbol viewBox="0 0 100 100" id="icon-accessibility"><path d="M54.167 8.333a8.333 8.333 0 000 16.666 8.333 8.333 0 000-16.666zm25 45.834v-8.333a22.851 22.851 0 01-16.64-8.022l-.026-.032v-.279a8.333 8.333 0 00-16.666 0v25a8.333 8.333 0 008.333 8.333h16.667v20.833h8.333V70.834a8.333 8.333 0 00-8.333-8.333h-8.333V48.822c4.631 3.333 10.414 5.334 16.664 5.346h.003z"></path><path d="M53.4 75c-1.762 4.88-6.344 8.31-11.731 8.333h-.003c-6.904 0-12.5-5.596-12.5-12.5s5.596-12.5 12.5-12.5V50c-11.5.014-20.819 9.333-20.833 20.832v.001c.014 11.5 9.333 20.819 20.832 20.833h.001c10.027-.013 18.397-7.096 20.393-16.53l.024-.136z"></path></symbol>
     <symbol viewBox="0 0 100 100" id="icon-accessibility-alt"><path d="M58.333 16.667a8.333 8.333 0 11-16.666 0 8.333 8.333 0 0116.666 0z"></path><path d="M84.375 26.471l-5.417-6.404c-8.235 5.454-18.281 8.81-29.092 9.098l-.075.002h-.896c-10.492-.11-20.185-3.444-28.158-9.056l.158.106-5.371 6.383c5.522 3.98 11.982 7.084 18.953 8.937l.41.093c.871.225 1.796.417 2.738.629a7.892 7.892 0 00-.125 1.232v54.177h8.333v-25h8.333v25h8.333V37.501a8.406 8.406 0 00-.167-1.608l.009.053c8.36-2.019 15.717-5.284 22.292-9.636l-.259.161z"></path></symbol>
     <symbol viewBox="0 0 100 100" id="icon-lock"><path d="M77.558 41.667h-6.725v-12.5c0-11.506-9.327-20.833-20.833-20.833-11.506 0-20.833 9.327-20.833 20.833v12.5h-6.726a5.75 5.75 0 00-4.082 1.692 5.753 5.753 0 00-1.692 4.082v38.452a5.75 5.75 0 001.692 4.082 5.753 5.753 0 004.082 1.692H77.56a5.75 5.75 0 004.082-1.692 5.753 5.753 0 001.692-4.082V47.441a5.75 5.75 0 00-1.692-4.082 5.753 5.753 0 00-4.082-1.692h-.001zM37.5 29.167c0-6.904 5.596-12.5 12.5-12.5s12.5 5.596 12.5 12.5v12.5h-25zM75 83.333H25V50h50z"></path><path d="M58.333 66.667a8.333 8.333 0 11-16.666 0 8.333 8.333 0 0116.666 0z"></path></symbol>

package/dist/components/BuisnessHours/BusinessHourType.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shorthand notation of all seven days in german.
+ *
+ * @typedef {"Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"} WeekDays
+ */
+type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So";
+/**
+ * @typedef {Object} OpeningHour
+ * @property {string} from - The start time of the opening period (in 'HH:mm' format).
+ * @property {string} to - The end time of the opening period (in 'HH:mm' format).
+ */
+type OpeningHour = {
+    from: string;
+    to: string;
+};
+/**
+ * @typedef {Object} BusinessHourType
+ * @property {WeekDays} weekDay - The day of the week for which the opening hours apply.
+ * @property {OpeningHour[]} openingHours - A list of opening hours for the specified day of the week.
+ */
+type BusinessHourType = {
+    weekDay: WeekDays;
+    openingHours: OpeningHour[];
+};
+export type { BusinessHourType, OpeningHour, WeekDays };

package/dist/components/BuisnessHours/BusinessHours.stories.d.ts

@@ -0,0 +1,116 @@
+declare const _default: {
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {
+            icon: string;
+            toggleable: boolean;
+        }, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, {}, {}, {}, {
+            icon: string;
+            toggleable: boolean;
+        }>;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        businessHours: {
+            type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+            required: true;
+        };
+        toggleable: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        icon: string;
+        toggleable: boolean;
+    }, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            hint(): any;
+        }> & {
+            hint(): any;
+        };
+    });
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        businessHours: {
+            weekDay: string;
+            openingHours: {
+                from: string;
+                to: string;
+            }[];
+        }[];
+        toggleable: boolean;
+    };
+};
+export declare const Fixed: {
+    args: {
+        toggleable: boolean;
+        businessHours: {
+            weekDay: string;
+            openingHours: {
+                from: string;
+                to: string;
+            }[];
+        }[];
+    };
+};

package/dist/components/Button/MucButton.stories.d.ts

@@ -12,6 +12,10 @@ declare const _default: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -28,11 +32,16 @@ declare const _default: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {
             variant: "primary" | "secondary" | "ghost";
             disabled: boolean;
+            iconAnimated: boolean;
         }, true, {}, {}, {
             P: {};
             B: {};
@@ -52,11 +61,16 @@ declare const _default: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {}, {}, {}, {}, {
             variant: "primary" | "secondary" | "ghost";
             disabled: boolean;
+            iconAnimated: boolean;
         }>;
         __isFragment?: undefined;
         __isTeleport?: undefined;
@@ -73,6 +87,10 @@ declare const _default: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        iconAnimated: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClick?: (() => any) | undefined;
     }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -80,6 +98,7 @@ declare const _default: {
     }, string, {
         variant: "primary" | "secondary" | "ghost";
         disabled: boolean;
+        iconAnimated: boolean;
     }, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: Readonly<{
             default(): any;
@@ -130,3 +149,10 @@ export declare const Icon: {
         icon: string;
     };
 };
+export declare const IconAnimated: {
+    args: {
+        default: string;
+        icon: string;
+        iconAnimated: boolean;
+    };
+};

package/dist/components/Button/MucButton.vue.d.ts

@@ -14,9 +14,16 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
      * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
      */
     icon?: string | undefined;
+    /**
+     * Wether the Icon should be animated on hover (slide-right) or not.
+     *
+     * Default is `false`
+     */
+    iconAnimated?: boolean | undefined;
 }>, {
     variant: string;
     disabled: boolean;
+    iconAnimated: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -34,14 +41,22 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
      * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
      */
     icon?: string | undefined;
+    /**
+     * Wether the Icon should be animated on hover (slide-right) or not.
+     *
+     * Default is `false`
+     */
+    iconAnimated?: boolean | undefined;
 }>, {
     variant: string;
     disabled: boolean;
+    iconAnimated: boolean;
 }>>> & {
     onClick?: (() => any) | undefined;
 }, {
     variant: buttonType;
     disabled: boolean;
+    iconAnimated: boolean;
 }, {}>, Readonly<{
     /**
      * Display content inside the button.

package/dist/components/Comment/MucCommentText.stories.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    component: import('vue').DefineComponent<{
+        text: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        variant: {
+            type: import('vue').PropType<import('./CommentType').default>;
+            default: string;
+        };
+        rating: {
+            type: import('vue').PropType<number>;
+            required: true;
+        };
+        date: {
+            type: import('vue').PropType<string>;
+        };
+        initials: {
+            type: import('vue').PropType<string>;
+        };
+        author: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        datePrefix: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        headline: {
+            type: import('vue').PropType<string>;
+        };
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        text: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        variant: {
+            type: import('vue').PropType<import('./CommentType').default>;
+            default: string;
+        };
+        rating: {
+            type: import('vue').PropType<number>;
+            required: true;
+        };
+        date: {
+            type: import('vue').PropType<string>;
+        };
+        initials: {
+            type: import('vue').PropType<string>;
+        };
+        author: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        datePrefix: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        headline: {
+            type: import('vue').PropType<string>;
+        };
+    }>>, {
+        variant: import('./CommentType').default;
+        datePrefix: string;
+    }, {}>;
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        rating: number;
+        author: string;
+        headline: string;
+        text: string;
+    };
+};
+export declare const Slider: {
+    args: {
+        rating: number;
+        author: string;
+        headline: string;
+        variant: string;
+        text: string;
+    };
+};

package/dist/components/Comment/MucCommentText.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     headline?: string | undefined;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType | undefined;
 }>, {
     datePrefix: string;
     variant: string;
@@ -20,7 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     headline?: string | undefined;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType | undefined;
 }>, {
     datePrefix: string;
     variant: string;

package/dist/components/Icon/MucIcon.stories.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    component: import('vue').DefineComponent<{
+        icon: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+        };
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+        };
+    }>>, {}, {}>;
+    title: string;
+    tags: string[];
+    args: {
+        onClick: import('@vitest/spy').Mock<any, any>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Weather: {
+    args: {
+        icon: string;
+    };
+};
+export declare const Youtube: {
+    args: {
+        icon: string;
+        color: string;
+    };
+};

package/dist/components/Icon/MucIcon.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * String of the icon to be displayed.
+     */
+    icon: string;
+    /**
+     * Optional css-color for the icon.
+     */
+    color?: string | undefined;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * String of the icon to be displayed.
+     */
+    icon: string;
+    /**
+     * Optional css-color for the icon.
+     */
+    color?: string | undefined;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MucIcon } from './MucIcon.vue';
+
+export { MucIcon };

package/dist/components/Intro/MucIntro.vue.d.ts

@@ -26,12 +26,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     divider: boolean;
 }>>>, {}, {}>, Readonly<{
     /**
-     * Text-content of the Intro.
+     * Body of the Intro.
      */
     default(): any;
 }> & {
     /**
-     * Text-content of the Intro.
+     * Body of the Intro.
      */
     default(): any;
 }>;

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ import { MucButton } from './Button';
 import { MucCallout } from './Callout';
 import { MucCard, MucCardContainer } from './Card';
 import { MucComment, MucCommentText } from './Comment/';
+import { MucIcon } from './Icon';
 import { MucIntro } from './Intro';
 
-export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, };
+export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, MucIcon, };