@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
1 lines • 68 kB
Source Map (JSON)
{"version":3,"file":"mozaic-vue.umd.cjs","sources":["../src/components/badge/MBadge.vue","../src/components/link/MLink.vue","../src/components/breadcrumb/MBreadcrumb.vue","../src/components/loader/MLoader.vue","../src/components/button/MButton.vue","../src/components/checkbox/MCheckbox.vue","../src/components/checkboxgroup/MCheckboxGroup.vue","../src/components/field/MField.vue","../src/components/fieldgroup/MFieldGroup.vue","../src/components/iconbutton/MIconButton.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue","../src/components/passwordinput/MPasswordInput.vue","../node_modules/@mozaic-ds/icons-vue/src/components/More24/More24.vue","../node_modules/@mozaic-ds/icons-vue/src/components/Less24/Less24.vue","../src/components/quantityselector/MQuantitySelector.vue","../src/components/radio/MRadio.vue","../src/components/radiogroup/MRadioGroup.vue","../src/components/select/MSelect.vue","../src/components/statusdot/MStatusDot.vue","../src/components/statusbadge/MStatusBadge.vue","../node_modules/@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue","../node_modules/@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue","../node_modules/@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue","../src/components/statusnotification/MStatusNotification.vue","../src/components/textarea/MTextArea.vue","../src/components/textinput/MTextInput.vue","../src/components/toggle/MToggle.vue","../src/components/togglegroup/MToggleGroup.vue"],"sourcesContent":["<template>\n <span class=\"mc-badge\" :class=\"classObject\">\n {{ label }}\n </span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Content of the badge\n */\n label: number;\n /**\n * Allows to define the Badge style\n */\n appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n /**\n * Allows to define the Badge size\n */\n size?: 's' | 'm';\n }>(),\n {\n appearance: 'standard',\n size: 's',\n },\n);\n\nconst classObject = computed(() => {\n return {\n [`mc-badge--${props.appearance}`]:\n props.appearance && props.appearance != 'standard',\n [`mc-badge--${props.size}`]: props.size && props.size != 's',\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/badge';\n</style>\n","<template>\n <component\n :is=\"router ? 'router-link' : 'a'\"\n class=\"mc-link\"\n :class=\"classObject\"\n :href=\"href\"\n :target=\"target\"\n :to=\"router ? href : undefined\"\n >\n <span\n v-if=\"$slots.icon && iconPosition == 'left'\"\n class=\"mc-link__icon\"\n aria-hidden=\"true\"\n >\n <slot name=\"icon\" />\n </span>\n <span class=\"mc-link__label\">\n <slot />\n </span>\n <span\n v-if=\"$slots.icon && iconPosition == 'right'\"\n class=\"mc-link__icon\"\n aria-hidden=\"true\"\n >\n <slot name=\"icon\" />\n </span>\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Position of the icon relative to the text.\n */\n iconPosition?: 'left' | 'right';\n /**\n * Allows to define the link style\n */\n appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n /**\n * Allows to define the link size\n */\n size?: 's' | 'm';\n /**\n * URL for the link (for external links or the `to` prop for `router-link`).\n */\n href?: string;\n /**\n * Where to open the link\n */\n target?: string;\n /**\n * Specify wether the link is inline\n */\n inline?: boolean;\n /**\n * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).\n */\n router?: boolean;\n }>(),\n {\n href: undefined,\n target: undefined,\n appearance: 'standard',\n size: 's',\n iconPosition: 'left',\n },\n);\n\ndefineSlots<{\n /**\n * Use this slot to insert the textual content of the Link\n */\n default: string;\n /**\n * Use this slot to insert an icon for the Link\n */\n icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n return {\n [`mc-link--${props.appearance}`]:\n props.appearance && props.appearance != 'standard',\n [`mc-link--${props.size}`]: props.size && props.size != 's',\n 'mc-link--inline': props.inline,\n 'mc-link--stand-alone': !props.inline,\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/link';\n</style>\n","<template>\n <nav class=\"mc-breadcrumb\" :class=\"classObject\" aria-label=\"Breadcrumb\">\n <ul class=\"mc-breadcrumb__container\">\n <li\n class=\"mc-breadcrumb__item\"\n v-for=\"(link, index) in links\"\n :key=\"`breadcrumb-${index}`\"\n >\n <MLink\n :href=\"link.href\"\n :router=\"link.router\"\n :appearance=\"appearance\"\n inline\n :class=\"{\n 'mc-breadcrumb__current': isLastLink(index),\n }\"\n :aria-current=\"isLastLink(index) ? 'page' : undefined\"\n >\n {{ link.label }}\n </MLink>\n </li>\n </ul>\n </nav>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MLink from '../link/MLink.vue';\n/**\n * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.\n */\nconst props = defineProps<{\n /**\n * Allows to define the breadcrumb style\n */\n appearance?: 'standard' | 'inverse';\n /**\n * Links of the breadcrumb\n */\n links?: Array<{\n /**\n * The label displayed for the link.\n */\n label: string;\n /**\n * URL for the link (for external links or the `to` prop for `router-link`).\n */\n href: string;\n /**\n * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).\n */\n router?: boolean;\n }>;\n}>();\n\nconst classObject = computed(() => {\n return {\n [`mc-breadcrumb--${props.appearance}`]:\n props.appearance && props.appearance != 'standard',\n };\n});\n\nconst isLastLink = (index: number) => {\n return index === (props.links?.length ?? 0) - 1;\n};\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/breadcrumb';\n</style>\n","<template>\n <div class=\"mc-loader\" :class=\"classObject\">\n <span class=\"mc-loader__spinner\">\n <svg\n class=\"mc-loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n :viewBox=\"setViewBox\"\n aria-hidden=\"true\"\n >\n <circle\n class=\"mc-loader__path\"\n cx=\"50%\"\n cy=\"50%\"\n :r=\"setCircleRadius\"\n ></circle>\n </svg>\n </span>\n <p v-if=\"text\" class=\"mc-loader__text\" role=\"status\">{{ text }}</p>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Specifies the visual appearance of the loader.\n */\n appearance?: 'standard' | 'accent' | 'inverse';\n\n /**\n * Defines the size of the loader.\n */\n size?: 's' | 'm' | 'l';\n\n /**\n * Text to display alongside the loader when using the loader inside an `Overlay`.\n */\n text?: string;\n }>(),\n {\n appearance: 'standard',\n size: 'm',\n },\n);\n\nconst classObject = computed(() => {\n return {\n [`mc-loader--${props.size}`]: props.size && props.size !== 'm',\n [`mc-loader--${props.appearance}`]:\n props.appearance && props.appearance !== 'standard',\n };\n});\n\nconst setViewBox = computed(() => {\n let viewBox: string;\n\n switch (props.size) {\n case 's':\n viewBox = '0 0 24 24';\n break;\n case 'l':\n viewBox = '0 0 64 64';\n break;\n default:\n viewBox = '0 0 32 32';\n }\n return viewBox;\n});\n\nconst setCircleRadius = computed(() => {\n let circleRadius: number;\n\n switch (props.size) {\n case 's':\n circleRadius = 6;\n break;\n case 'l':\n circleRadius = 19;\n break;\n default:\n circleRadius = 9;\n }\n\n return circleRadius;\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/loader';\n</style>\n","<template>\n <button\n class=\"mc-button\"\n :class=\"classObject\"\n :disabled=\"disabled\"\n :type=\"type\"\n >\n <span\n v-if=\"$slots.icon && iconPosition == 'left' && !isLoading\"\n class=\"mc-button__icon\"\n >\n <slot name=\"icon\" />\n </span>\n <span\n v-if=\"isLoading\"\n class=\"mc-button__icon\"\n :style=\"{ position: 'absolute' }\"\n >\n <MLoader :style=\"{ color: 'currentColor' }\" size=\"s\" />\n </span>\n <span v-if=\"$slots.icon && iconPosition == 'only'\" class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n <span\n v-else\n class=\"mc-button__label\"\n :style=\"{ visibility: isLoading ? 'hidden' : 'visible' }\"\n >\n <slot>Button Label</slot>\n </span>\n <span\n v-if=\"$slots.icon && iconPosition == 'right' && !isLoading\"\n class=\"mc-button__icon\"\n >\n <slot name=\"icon\" />\n </span>\n </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\nimport MLoader from '../loader/MLoader.vue';\n/**\n * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Defines the visual style of the button.\n */\n appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n /**\n * Determines the size of the button.\n */\n size?: 's' | 'm' | 'l';\n /**\n * If `true`, disables the button, making it non-interactive.\n */\n disabled?: boolean;\n /**\n * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n */\n ghost?: boolean;\n /**\n * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n */\n outlined?: boolean;\n /**\n * Controls the positioning of an icon in the button.\n */\n iconPosition?: 'left' | 'right' | 'only';\n /**\n * Specifies the button's HTML `type` attribute.\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * If `true`, a loading state is displayed.\n */\n isLoading?: boolean;\n }>(),\n {\n appearance: 'standard',\n size: 'm',\n type: 'button',\n },\n);\n\ndefineSlots<{\n /**\n * The content displayed in the button.\n */\n default: string;\n /**\n * Use this slot to insert an icon for the Button\n */\n icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n return {\n [`mc-button--${props.appearance}`]:\n props.appearance && props.appearance != 'standard',\n [`mc-button--${props.size}`]: props.size && props.size != 'm',\n 'mc-button--ghost': props.ghost,\n 'mc-button--outlined': props.outlined,\n 'mc-button--icon-only': props.iconPosition == 'only',\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/button';\n</style>\n","<template>\n <div class=\"mc-checkbox\">\n <input\n :id=\"id\"\n type=\"checkbox\"\n class=\"mc-checkbox__input\"\n :class=\"classObject\"\n :name=\"name\"\n :checked=\"modelValue\"\n :indeterminate=\"indeterminate\"\n :disabled=\"disabled\"\n :aria-invalid=\"isInvalid\"\n v-bind=\"$attrs\"\n @change=\"\n emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n \"\n />\n <label v-if=\"label\" :for=\"id\" class=\"mc-checkbox__label\">\n {{ label }}\n </label>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.\n */\nconst props = defineProps<{\n /**\n * A unique identifier for the checkbox, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the checkbox element, typically used for form submission.\n */\n name?: string;\n /**\n * The text label displayed next to the checkbox.\n */\n label?: string;\n /**\n * The checkbox's checked state, bound via v-model.\n */\n modelValue?: boolean;\n /**\n * Sets the checkbox to an indeterminate state (partially selected).\n */\n indeterminate?: boolean;\n /**\n * If `true`, applies an invalid state to the checkbox.\n */\n isInvalid?: boolean;\n /**\n * If `true`, disables the checkbox, making it non-interactive.\n */\n disabled?: boolean;\n}>();\n\nconst classObject = computed(() => {\n return {\n 'is-invalid': props.isInvalid,\n };\n});\n\nconst emit = defineEmits<{\n /**\n * Emits when the checkbox value changes, updating the modelValue prop.\n */\n (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/checkbox';\n</style>\n","<template>\n <div class=\"mc-field__container\" :class=\"classObjectContainer\">\n <MCheckbox\n v-for=\"option in options\"\n :id=\"option.id\"\n :key=\"option.id\"\n :label=\"option.label\"\n :is-invalid=\"option.isInvalid\"\n :name=\"name\"\n class=\"mc-field__item\"\n :class=\"classObjectItem\"\n :model-value=\"modelValue ? modelValue.includes(option.value) : undefined\"\n :disabled=\"option.disabled\"\n @update:model-value=\"(v: boolean) => onChange(v, option.value)\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport MCheckbox from '../checkbox/MCheckbox.vue';\n\n/**\n * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.\n */\nconst props = defineProps<{\n /**\n * The name attribute for the checkbox element, typically used for form submission.\n */\n name: string;\n /**\n * Property used to manage the values checked by v-model\n * (Do not use directly)\n */\n modelValue?: Array<string>;\n /**\n * list of properties of each checkbox button of the checkbox group\n */\n options: Array<{\n id: string;\n label: string;\n value: string;\n disabled?: boolean;\n isInvalid?: boolean;\n }>;\n /**\n * If `true`, make the form element of the group inline.\n */\n inline?: boolean;\n}>();\n\nconst selectedValue = ref<string[]>([]);\n\nwatch(\n () => props.modelValue,\n (newValue) => {\n selectedValue.value = newValue || [];\n },\n { immediate: true },\n);\n\nconst onChange = (isChecked: boolean, value: string) => {\n let values = [...selectedValue.value];\n\n if (isChecked && !values.includes(value)) {\n values.push(value);\n } else {\n values = values.filter((val) => val !== value);\n }\n\n emit('update:modelValue', values);\n selectedValue.value = values;\n};\n\nconst classObjectContainer = computed(() => {\n return {\n 'mc-field__container--inline': props.inline,\n };\n});\n\nconst classObjectItem = computed(() => {\n return {\n 'mc-field__container--inline__item': props.inline,\n };\n});\n\nconst emit = defineEmits<{\n /**\n * Emits when the checkbox group value changes, updating the modelValue prop.\n */\n (on: 'update:modelValue', value: Array<string>): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n <div class=\"mc-field\">\n <label class=\"mc-field__label\" :for=\"id\">\n {{ label }}\n <span v-if=\"requirementText\" class=\"mc-field__requirement\"\n >({{ requirementText }})</span\n >\n </label>\n\n <span v-if=\"helpId && helpText\" :id=\"helpId\" class=\"mc-field__help\">{{\n helpText\n }}</span>\n\n <div class=\"mc-field__content\">\n <slot />\n </div>\n\n <span\n v-if=\"(isValid || isInvalid) && message\"\n class=\"mc-field__validation-message\"\n :id=\"messageId\"\n :class=\"classObjectValidation\"\n >\n {{ message }}\n </span>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * This component creates a structured form field with a label, optional help text, error and validation message handling.\n */\nconst props = defineProps<{\n /**\n * A unique identifier for the form field, used to associate the label with the form element.\n */\n id: string;\n /**\n * The text displayed as the label for the form field.\n */\n label: string;\n /**\n * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n */\n requirementText?: string;\n /**\n * Text shown below the form field to provide additional context or instructions for the user.\n */\n helpText?: string;\n /**\n * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n */\n helpId?: string;\n /**\n * If `true`, applies a valid state to the form field.\n */\n isValid?: boolean;\n /**\n * If `true`, applies an invalid state to the form field.\n */\n isInvalid?: boolean;\n /**\n * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n */\n messageId?: string;\n /**\n * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n */\n message?: string;\n}>();\n\ndefineSlots<{\n /**\n * Use this slot to insert the form element of your choice\n */\n default: VNode;\n}>();\n\nconst classObjectValidation = computed(() => {\n return {\n 'is-valid': props.isValid,\n 'is-invalid': props.isInvalid,\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n <fieldset class=\"mc-field--group\">\n <legend class=\"mc-field__legend\" :for=\"id\">\n {{ legend }}\n <span v-if=\"requirementText\" class=\"mc-field__requirement\"\n >({{ requirementText }})</span\n >\n </legend>\n\n <span v-if=\"helpText\" class=\"mc-field__help\">{{ helpText }}</span>\n\n <div class=\"mc-field__content\">\n <slot />\n </div>\n\n <span\n v-if=\"(isValid || isInvalid) && message\"\n class=\"mc-field__validation-message\"\n :class=\"classObjectValidation\"\n >\n {{ message }}\n </span>\n </fieldset>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * This component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group with a label, optional help text, error and validation message handling.\n */\nconst props = defineProps<{\n /**\n * A unique identifier for the form field, used to associate the label with the form element.\n */\n id: string;\n /**\n * The text displayed as the legend for the form fieldset.\n */\n legend: string;\n /**\n * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n */\n requirementText?: string;\n /**\n * Text shown below the form field to provide additional context or instructions for the user.\n */\n helpText?: string;\n /**\n * If `true`, applies a valid state to the form field.\n */\n isValid?: boolean;\n /**\n * If `true`, applies an invalid state to the form field.\n */\n isInvalid?: boolean;\n /**\n * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n */\n message?: string;\n}>();\n\ndefineSlots<{\n /**\n * Use this slot to insert the form element of your choice\n */\n default: VNode;\n}>();\n\nconst classObjectValidation = computed(() => {\n return {\n 'is-valid': props.isValid,\n 'is-invalid': props.isInvalid,\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n <button\n class=\"mc-button mc-button--icon-button\"\n :class=\"classObject\"\n :disabled=\"disabled\"\n :type=\"type\"\n >\n <span class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Defines the visual style of the icon button.\n */\n appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n /**\n * Determines the size of the icon button.\n */\n size?: 's' | 'm' | 'l';\n /**\n * If `true`, disables the icon button, making it non-interactive.\n */\n disabled?: boolean;\n /**\n * If `true`, applies a \"ghost\" style to the icon button.\n */\n ghost?: boolean;\n /**\n * If `true`, the icon button gets an outlined style.\n */\n outlined?: boolean;\n /**\n * Specifies the button's HTML `type` attribute.\n */\n type?: 'button' | 'reset' | 'submit';\n }>(),\n {\n appearance: 'standard',\n size: 'm',\n type: 'button',\n },\n);\n\ndefineSlots<{\n /**\n * Use this slot to insert the form element of your choice\n */\n icon: VNode;\n}>();\n\nconst classObject = computed(() => {\n return {\n [`mc-button--${props.appearance}`]:\n props.appearance && props.appearance != 'standard',\n [`mc-button--${props.size}`]: props.size && props.size != 'm',\n 'mc-button--ghost': props.ghost,\n 'mc-button--outlined': props.outlined,\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/button';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'CrossCircleFilled24',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template>\n <div class=\"mc-password-input mc-text-input\" :class=\"classObject\">\n <input\n class=\"mc-password-input__control mc-text-input__control\"\n v-model=\"modelValue\"\n :id=\"id\"\n :type=\"inputType\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-invalid=\"isInvalid\"\n :readonly=\"readonly\"\n v-bind=\"$attrs\"\n @input=\"\n emit('update:modelValue', ($event.target as HTMLInputElement).value)\n \"\n />\n <div v-if=\"isClearable && modelValue\" class=\"mc-controls-options\">\n <button\n class=\"mc-controls-options__button\"\n @click=\"clearValue\"\n >\n <CrossCircleFilled24\n class=\"mc-controls-options__icon\"\n aria-hidden=\"true\"\n />\n <span class=\"mc-controls-options__label\">{{ clearLabel }}</span>\n </button>\n </div>\n <MButton\n ref=\"button\"\n role=\"switch\"\n :aria-checked=\"ariaChecked\"\n :disabled=\"disabled\"\n @click=\"toggleVisibility\"\n size=\"s\" \n ghost\n >\n {{ isVisible ? buttonLabel.hide : buttonLabel.show }}\n </MButton>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';\nimport MButton from '../button/MButton.vue';\n\n/**\n * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * A unique identifier for the password input element, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the password input element, typically used for form submission.\n */\n name?: string;\n /**\n * The current value of the password input field.\n */\n modelValue?: string | number;\n /**\n * A placeholder text to show in the password input when it is empty.\n */\n placeholder?: string;\n /**\n * If `true`, applies an invalid state to the password input.\n */\n isInvalid?: boolean;\n /**\n * If `true`, disables the password input, making it non-interactive.\n */\n disabled?: boolean;\n /**\n * If `true`, the password input is read-only (cannot be edited).\n */\n readonly?: boolean;\n /**\n * If `true`, a clear button will appear when the password input has a value.\n */\n isClearable?: boolean;\n /**\n * The label text for the clear button\n */\n clearLabel?: string;\n /**\n * Labels of the button displayed when showing or hiding the password\n */\n buttonLabel?: {\n show: string;\n hide: string;\n };\n }>(),\n {\n clearLabel: 'Clear content',\n buttonLabel: () => ({ show: 'Show', hide: 'Hide' }),\n },\n);\n\nconst classObject = computed(() => ({\n 'is-invalid': props.isInvalid,\n}));\n\n// Local state management\nconst modelValue = ref(props.modelValue);\nconst isVisible = ref(false);\n\n/**\n * Clear the input value.\n */\nconst clearValue = () => {\n modelValue.value = '';\n emit('update:modelValue', '');\n};\n\n/**\n * Toggle the visibility of the password.\n */\nconst toggleVisibility = () => {\n isVisible.value = !isVisible.value;\n};\n\n/**\n * Compute the input type based on visibility state.\n */\nconst inputType = computed(() => (isVisible.value ? 'text' : 'password'));\n\n/**\n * Aria attributes for accessibility.\n */\nconst ariaChecked = computed(() => (isVisible.value ? 'true' : 'false'));\n\nconst emit = defineEmits<{\n /**\n * Emits when the input value changes, updating the `modelValue` prop.\n */\n (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/controls-options';\n@use '@mozaic-ds/styles/components/text-input';\n@use '@mozaic-ds/styles/components/password-input';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <g clip-path=\"url(#a)\">\n <path fill-rule=\"evenodd\" d=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z\"/>\n </g>\n <defs>\n <clipPath id=\"a\">\n <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n </clipPath>\n </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'More24',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <g clip-path=\"url(#a)\">\n <path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z\"/>\n </g>\n <defs>\n <clipPath id=\"a\">\n <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n </clipPath>\n </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'Less24',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template>\n <div class=\"mc-quantity-selector\" :class=\"classObject\">\n <input\n :id=\"id\"\n v-model=\"currentValue\"\n class=\"mc-quantity-selector__control\"\n type=\"number\"\n :name=\"name\"\n :disabled=\"disabled\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :readonly=\"readonly\"\n :aria-invalid=\"isInvalid\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-valuenow=\"currentValue\"\n v-bind=\"$attrs\"\n @change=\"onChange(Number(($event.target as HTMLInputElement).value))\"\n />\n <button\n v-if=\"!readonly\"\n type=\"button\"\n :aria-controls=\"id\"\n class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n tabindex=\"-1\"\n :disabled=\"disabled || currentValue === max\"\n @click=\"increment\"\n >\n <span class=\"mc-quantity-selector__icon\">\n <More24 />\n </span>\n <span class=\"mc-quantity-selector__label\">{{ incrementlabel }}</span>\n </button>\n <button\n v-if=\"!readonly\"\n type=\"button\"\n :aria-controls=\"id\"\n class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n tabindex=\"-1\"\n :disabled=\"disabled || currentValue === min\"\n @click=\"decrement\"\n >\n <span class=\"mc-quantity-selector__icon\">\n <Less24 />\n </span>\n <span class=\"mc-quantity-selector__label\">{{ decrementLabel }}</span>\n </button>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport More24 from '@mozaic-ds/icons-vue/src/components/More24/More24.vue';\nimport Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';\n\n/**\n * The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * A unique identifier for the quantity selector element, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the quantity selector element, typically used for form submission.\n */\n name?: string;\n /**\n * The current value of the quantity selector field.\n */\n modelValue?: number;\n /**\n * If `true`, applies an invalid state to the quantity selector.\n */\n isInvalid?: boolean;\n /**\n * If `true`, disables the quantity selector, making it non-interactive.\n */\n disabled?: boolean;\n /**\n * Determines the size of the quantity selector\n */\n size?: 's' | 'm';\n /**\n * Minimum acceptable value for the quantity selector.\n */\n min?: number;\n /**\n * Maximum acceptable value for the quantity selector.\n */\n max?: number;\n /**\n * Determines how much the value will change per click when the quantity is increased or decreased.\n */\n step?: number;\n /**\n * If `true`, the quantity selector is read-only (cannot be edited).\n */\n readonly?: boolean;\n /**\n * The label text for the increment button.\n */\n incrementlabel?: string;\n /**\n * The label text for the decrement button.\n */\n decrementLabel?: string;\n }>(),\n {\n modelValue: 1,\n min: 1,\n max: 100,\n step: 1,\n size: 'm',\n name: 'quantity-selector-input',\n incrementlabel: 'Increment',\n decrementLabel: 'Decrement',\n },\n);\n\nconst currentValue = ref(props.modelValue);\n\nwatch(currentValue, (newVal) => {\n if (newVal !== props.modelValue) {\n emit('update:modelValue', newVal);\n }\n});\n\nconst classObject = computed(() => {\n return {\n [`mc-quantity-selector--${props.size}`]: props.size && props.size != 'm',\n 'is-invalid': props.isInvalid,\n };\n});\n\nconst increment = () => {\n if (currentValue.value + props.step <= props.max) {\n currentValue.value += props.step;\n } else {\n currentValue.value = props.max;\n }\n};\n\nconst decrement = () => {\n if (currentValue.value - props.step > props.min) {\n currentValue.value -= props.step;\n } else {\n currentValue.value = props.min;\n }\n};\n\nconst onChange = (value: number) => {\n currentValue.value = value;\n\n if (currentValue.value > props.max) {\n currentValue.value = props.max;\n }\n if (currentValue.value <= props.min) {\n currentValue.value = props.min;\n }\n\n emit('update:modelValue', currentValue.value);\n};\n\nconst emit = defineEmits<{\n /**\n * Emits when the quantity selector value changes, updating the `modelValue` prop.\n */\n (on: 'update:modelValue', value: number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n","<template>\n <div class=\"mc-radio\">\n <input\n :id=\"id\"\n type=\"radio\"\n class=\"mc-radio__input\"\n :class=\"classObject\"\n :name=\"name\"\n :checked=\"modelValue\"\n :disabled=\"disabled\"\n :aria-invalid=\"isInvalid\"\n v-bind=\"$attrs\"\n @change=\"\n emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n \"\n />\n <label v-if=\"label\" :for=\"id\" class=\"mc-radio__label\">\n {{ label }}\n </label>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.\n */\nconst props = defineProps<{\n /**\n * A unique identifier for the radio, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the radio element, typically used for form submission.\n */\n name?: string;\n /**\n * The text label displayed next to the radio.\n */\n label?: string;\n /**\n * The radio's checked state, bound via v-model.\n */\n modelValue?: boolean;\n /**\n * If `true`, applies an invalid state to the radio.\n */\n isInvalid?: boolean;\n /**\n * If `true`, disables the radio, making it non-interactive.\n */\n disabled?: boolean;\n}>();\n\nconst classObject = computed(() => {\n return {\n 'is-invalid': props.isInvalid,\n };\n});\n\nconst emit = defineEmits<{\n /**\n * Emits when the radio value changes, updating the modelValue prop.\n */\n (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/radio';\n</style>\n","<template>\n <div class=\"mc-field__container\" :class=\"classObjectContainer\">\n <MRadio\n v-for=\"option in options\"\n :id=\"option.id\"\n :key=\"option.id\"\n :label=\"option.label\"\n :is-invalid=\"isInvalid\"\n :name=\"name\"\n class=\"mc-field__item\"\n :class=\"classObjectItem\"\n :model-value=\"modelValue === option.value\"\n :disabled=\"option.disabled\"\n @update:model-value=\"\n (v: boolean) => (v ? emit('update:modelValue', option.value) : null)\n \"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MRadio from '../radio/MRadio.vue';\n\n/**\n * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.\n */\nconst props = defineProps<{\n /**\n * The name attribute for the radio element, typically used for form submission.\n */\n name: string;\n /**\n * Property used to manage the values checked by v-model\n * (Do not use directly)\n */\n modelValue?: string;\n /**\n * list of properties of each radio button of the radio group\n */\n options: Array<{\n id: string;\n label: string;\n value: string;\n disabled?: boolean;\n }>;\n /**\n * If `true`, applies an invalid state to the radio group.\n */\n isInvalid?: boolean;\n /**\n * If `true`, make the form element of the group inline.\n */\n inline?: boolean;\n}>();\n\nconst classObjectContainer = computed(() => {\n return {\n 'mc-field__container--inline': props.inline,\n };\n});\n\nconst classObjectItem = computed(() => {\n return {\n 'mc-field__container--inline__item': props.inline,\n };\n});\n\nconst emit = defineEmits<{\n /**\n * Emits when the radio group value changes, updating the modelValue prop.\n */\n (on: 'update:modelValue', value: string): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n <select\n :id=\"id\"\n class=\"mc-select\"\n :name=\"name\"\n :value=\"modelValue\"\n :class=\"classObject\"\n :disabled=\"disabled\"\n v-bind=\"$attrs\"\n @change=\"\n emit('update:modelValue', ($event.target as HTMLSelectElement).value)\n \"\n >\n <option v-if=\"placeholder\" value=\"\" disabled>\n -- {{ placeholder }} --\n </option>\n <option\n v-for=\"(option, index) in options\"\n :key=\"index\"\n :value=\"option.value\"\n v-bind=\"option.attributes\"\n :disabled=\"option.disabled\"\n >\n {{ option.text }}\n </option>\n </select>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * A unique identifier for the select, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the select element, used for form submission.\n */\n name?: string;\n /**\n * Define the available choices for the select element.\n */\n options: Array<{\n id?: string;\n text: string;\n value: string | number;\n attributes?: Record<string, string | boolean | number>;\n disabled?: boolean;\n }>;\n /**\n * The current value of the select.\n */\n modelValue?: string | number;\n /**\n * Text displayed when the select has no selected value.\n */\n placeholder?: string;\n /**\n * If `true`, the select is marked as invalid.\n */\n isInvalid?: boolean;\n /**\n * If `true`, the select is disabled and non-interactive.\n */\n disabled?: boolean;\n /**\n * Determines the size of the select\n */\n size?: 's' | 'm';\n /**\n * If `true`, the select is read-only (cannot be edited).\n */\n readonly?: boolean;\n }>(),\n {\n size: 'm',\n },\n);\n\nconst classObject = computed(() => {\n return {\n [`mc-select--${props.size}`]: props.size && props.size != 'm',\n 'mc-select--readonly': props.readonly,\n 'is-invalid': props.isInvalid,\n };\n});\n\nconst emit = defineEmits<{\n /**\n * Emits when the select value changes, updating the modelValue prop.\n */\n (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/select';\n</style>\n","<template>\n <span class=\"mc-status-dot\" :class=\"classObject\"></span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Allows to define the Status Dot style\n */\n status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n /**\n * Determines the size of the Status Dot.\n */\n size?: 's' | 'm' | 'l';\n }>(),\n {\n status: 'info',\n },\n);\n\nconst classObject = computed(() => {\n return {\n [`mc-status-dot--${props.status}`]: props.status && props.status != 'info',\n [`mc-status-dot--${props.size}`]: props.size && props.size != 'm',\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-dot';\n</style>\n","<template>\n <div class=\"mc-status-badge\" :class=\"classObject\">\n <MStatusDot :status=\"status\" />\n <span class=\"mc-status-badge__label\">{{ label }}</span>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MStatusDot from '../statusdot/MStatusDot.vue';\n/**\n * A status badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Content of the Status Badge\n */\n label: string;\n /**\n * Allows to define the Status Badge style\n */\n status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n }>(),\n {\n status: 'info',\n },\n);\n\nconst classObject = computed(() => {\n return {\n [`mc-status-badge--${props.status}`]:\n props.status && props.status != 'info',\n };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-badge';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <g clip-path=\"url(#a)\">\n <path fill-rule=\"evenodd\" d=\"M16.364 4.697a.75.75 0 1 0-1.061-1.06L10 8.938 4.697 3.636a.75.75 0 0 0-1.06 1.06L8.938 10l-5.303 5.303a.75.75 0 0 0 1.061 1.06L10 11.06l5.303 5.303a.75.75 0 0 0 1.06-1.06L11.062 10l5.303-5.303Z\"/>\n </g>\n <defs>\n <clipPath id=\"a\">\n <rect width=\"20\" height=\"20\" fill=\"#fff\"/>\n </clipPath>\n </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'Cross20',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path fill-rule=\"evenodd\" d=\"M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1ZM16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'InfoCircle32',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path fill-rule=\"evenodd\" d=\"M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1Zm0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'WarningCircle32',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path fill-rule=\"evenodd\" d=\"M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586l-3.293-3.293Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'CrossCircle32',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path fill-rule=\"evenodd\" d=\"M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l7.333-7.333Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n name: 'CheckCircle32',\n props: {\n /**\n * Icon color\n */\n color: {\n type: String,\n default: 'currentColor',\n },\n },\n};\n</script>\n","<template>\n <section class=\"mc-status-notification\" role=\"status\" :class=\"classObject\">\n <component\n :is=\"iconComponent\"\n class=\"mc-status-notification__icon\"\n aria-hidden=\"true\"\n />\n <div class=\"mc-status-notification__content\">\n <h2 class=\"mc-status-notification__title\">{{ title }}</h2>\n\n <p class=\"mc-status-notification__message\">\n {{ description }}\n </p>\n\n <div v-if=\"$slots.footer\" class=\"mc-status-notification__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n\n <button\n v-if=\"closable\"\n class=\"mc-status-notification-closable__close\"\n @click=\"emit('close')\"\n >\n <Cross20\n class=\"mc-status-notification-closable__icon\"\n aria-hidden=\"true\"\n />\n <span class=\"mc-status-notification-closable__text\">Close</span>\n </button>\n </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\nimport Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';\nimport InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';\nimport WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';\nimport CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';\nimport CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';\n/**\n * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * Title of the Status Notification\n */\n title: string;\n /**\n * Description of the Status Notification\n */\n description: string;\n /**\n * Allows to define the Status Notification style\n */\n status?: 'info' | 'success' | 'warning' | 'error';\n /**\n * if `true`, display the close button.\n */\n closable?: boolean;\n }>(),\n {\n status: 'info',\n },\n);\n\ndefineSlots<{\n /**\n * Use this slot to insert a button or a link in the footer\n */\n footer?: VNode;\n}>();\n\nconst classObject = computed(() => {\n return {\n [`mc-status-notification--${props.status}`]:\n props.status && props.status != 'info',\n };\n});\n\nconst iconComponent = computed(() => {\n switch (props.status) {\n case 'success':\n return CheckCircle32;\n case 'warning':\n return WarningCircle32;\n case 'error':\n return CrossCircle32;\n case 'info':\n default:\n return InfoCircle32;\n }\n});\n\nconst emit = defineEmits<{\n /**\n * Emits when closing the notification.\n */\n (on: 'close'): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-notification';\n</style>\n","<template>\n <textarea\n :id=\"id\"\n class=\"mc-textarea\"\n :class=\"classObject\"\n :aria-invalid=\"isInvalid\"\n :value=\"modelValue\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :minlength=\"minLength\"\n :maxlength=\"maxLength\"\n :rows=\"rows\"\n :readonly=\"readonly\"\n v-bind=\"$attrs\"\n @input=\"\n emit('update:modelValue', ($event.target as HTMLInputElement).value)\n \"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * A unique identifier for the textarea, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the textarea element, used for form submission.\n */\n name?: string;\n /**\n * The current value of the textarea field.\n */\n modelValue?: string | number;\n /**\n * Text displayed when the textarea is empty.\