@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/components/NotificationBubble/NotificationBubble.vue

@@ -1,90 +1,90 @@
-<template>
-  <v-btn
-    class="notification-bubble"
-    elevation="0"
-    :flat="true"
-    :color="color"
-    :size="size"
-    rounded="xl"
-    :variant="variant"
-    :readonly="readonly"
-    data-testid="root"
-  >
-    <!-- Render either text or vIcon based on the props -->
-    <h4 v-if="text" :style="{ color: textColor }">
-      {{ text }}
-    </h4>
-    <v-icon v-else :size="iconSize" :color="textColor" :icon="icon"></v-icon>
-  </v-btn>
-</template>
-
-<script setup>
-import './NotificationBubble.css';
-
-// Define the component props
-defineProps({
-  /**
-   * The background color of the component.
-   * Can be any valid CSS color string (hex, rgb, etc.).
-   * Default is an empty string, which means no background color will be applied.
-   */
-  color: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * The size of the component.
-   * Can be a string or a number representing the size in pixels or other CSS units.
-   * Default is '30'.
-   */
-  size: {
-    type: [String, Number],
-    default: '30',
-  },
-
-  /**
-   * The text displayed within the component.
-   * If no text is provided, it will be empty by default.
-   */
-  text: {
-    type: String,
-  },
-
-  /**
-   * The color of the text.
-   * Accepts any valid CSS color string (hex, rgb, etc.).
-   * Default is 'var(--Dental-Blue-0)', a custom CSS variable for the text color.
-   */
-  textColor: {
-    type: String,
-    default: 'var(--Dental-Blue-0)',
-  },
-
-  /**
-   * The name or path of the icon to be displayed in the component.
-   * This can be an icon name if using an icon library.
-   */
-  icon: {
-    type: String,
-  },
-
-  /**
-   * The size of the icon.
-   * Can be any valid CSS size value, such as '20' (pixels) by default.
-   */
-  iconSize: {
-    type: String,
-    default: '20',
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-
-  variant: {
-    type: String,
-    default: 'flat',
-  },
-});
-</script>
+<template>
+  <v-btn
+    class="notification-bubble"
+    elevation="0"
+    :flat="true"
+    :color="color"
+    :size="size"
+    rounded="xl"
+    :variant="variant"
+    :readonly="readonly"
+    data-testid="root"
+  >
+    <!-- Render either text or vIcon based on the props -->
+    <h4 v-if="text" :style="{ color: textColor }">
+      {{ text }}
+    </h4>
+    <v-icon v-else :size="iconSize" :color="textColor" :icon="icon"></v-icon>
+  </v-btn>
+</template>
+
+<script setup>
+import './NotificationBubble.css';
+
+// Define the component props
+defineProps({
+  /**
+   * The background color of the component.
+   * Can be any valid CSS color string (hex, rgb, etc.).
+   * Default is an empty string, which means no background color will be applied.
+   */
+  color: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The size of the component.
+   * Can be a string or a number representing the size in pixels or other CSS units.
+   * Default is '30'.
+   */
+  size: {
+    type: [String, Number],
+    default: '30',
+  },
+
+  /**
+   * The text displayed within the component.
+   * If no text is provided, it will be empty by default.
+   */
+  text: {
+    type: String,
+  },
+
+  /**
+   * The color of the text.
+   * Accepts any valid CSS color string (hex, rgb, etc.).
+   * Default is 'var(--Dental-Blue-0)', a custom CSS variable for the text color.
+   */
+  textColor: {
+    type: String,
+    default: 'var(--Dental-Blue-0)',
+  },
+
+  /**
+   * The name or path of the icon to be displayed in the component.
+   * This can be an icon name if using an icon library.
+   */
+  icon: {
+    type: String,
+  },
+
+  /**
+   * The size of the icon.
+   * Can be any valid CSS size value, such as '20' (pixels) by default.
+   */
+  iconSize: {
+    type: String,
+    default: '20',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    default: 'flat',
+  },
+});
+</script>

package/src/components/OtpInput/OtpInput.css

@@ -1,43 +1,43 @@
-.wl-otp-input {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.wl-otp-input .phone-number {
-  text-decoration: underline;
-}
-
-.wl-otp-input .button-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 30px;
-  width: 80%;
-  padding-top: 43px;
-}
-
-.wl-otp-input .title-container {
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-  text-align: center;
-  gap: 10px;
-}
-
-.wl-otp-input .input-container {
-  padding-top: 60px;
-}
-
-.wl-otp-input .v-otp-input .v-field {
-  border-radius: 8px;
-}
-
-.wl-otp-input .message-container {
-  padding-top: 16px;
-}
+.wl-otp-input {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.wl-otp-input .phone-number {
+  text-decoration: underline;
+}
+
+.wl-otp-input .button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  width: 80%;
+  padding-top: 43px;
+}
+
+.wl-otp-input .title-container {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+}
+
+.wl-otp-input .input-container {
+  padding-top: 60px;
+}
+
+.wl-otp-input .v-otp-input .v-field {
+  border-radius: 8px;
+}
+
+.wl-otp-input .message-container {
+  padding-top: 16px;
+}

package/src/components/OtpInput/OtpInput.vue

@@ -1,182 +1,182 @@
-<template>
-  <form class="wl-otp-input" @submit.prevent="props.submitFn" aria-labelledby="page-heading"
-    :aria-describedby="error ? 'form-error' : undefined" data-testid="root">
-    <div class="title-container">
-      <h2 id="page-heading" ref="heading">{{ t('wl.otp_input.enter_sms_code') }}</h2>
-      <p>{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
-    </div>
-
-    <div class="input-container">
-      <v-otp-input
-        v-model="internalValue"
-        autofocus
-        rounded="lg"
-        :loading="loading"
-        :error="error"
-        :focus-all="error"
-        :focused="error"
-        color="white"
-        base-color="var(--Soft-Concrete-1)"
-        @update:model-value="onResetError"
-        type="number"
-      >
-        <template #loader>
-          <Loader
-            :size="40"
-            :inline="true"
-            :bg-color="siteColors['button_default_text']"
-            :text-color="siteColors['button_default_bg']"
-          />
-        </template>
-      </v-otp-input>
-    </div>
-
-    <div class="message-container">
-      <p
-        :id="error ? 'form-error' : 'form-success'"
-        :style="statusMessageStyle"
-        :role="error ? 'alert' : 'status'"
-        :aria-live="error ? 'assertive' : 'polite'"
-        aria-atomic="true"
-      >
-        {{ message }}
-      </p>
-    </div>
-
-    <div class="button-container">
-      <slot name="buttons">
-        <Button
-          :label="t('wl.otp_input.confirm')"
-          :disabled="disableSubmitBtn"
-          width="226"
-          @click="onSubmit"
-          type="submit"
-        />
-        <Button
-          :label="t('wl.otp_input.resend')"
-          variant='outlined'
-          :disabled="disableResendBtn"
-          width="226"
-          @click="onResend"
-        />
-      </slot>
-    </div>
-  </form>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, inject, type CSSProperties, PropType } from 'vue';
-import './OtpInput.css';
-import Button from '../Button/Button.vue';
-import Loader from '../Loader/Loader.vue';
-import { useI18n } from 'vue-i18n';
-import { siteColors as globalSiteColors } from "../../utils/index";
-
-const { t } = useI18n();
-
-// Use injected theme colors if available, otherwise fall back to global siteColors
-const injectedColors = inject<any>('themeColors', null);
-const siteColors = computed(() => {
-  if (injectedColors?.value) {
-    return injectedColors.value;
-  }
-  return globalSiteColors || {};
-});
-
-const props = defineProps({
-  phoneNumber: {
-    type: String,
-    required: true
-  },
-
-  message: {
-    type: String,
-    default: ''
-  },
-
-  otpState: {
-    type: String,
-    default: 'default'
-  },
-
-  submitFn: {
-    type: Function,
-    required: true
-  },
-
-  resendFn: {
-    type: Function,
-    required: true
-  },
-
-  loading: {
-    type: Boolean,
-    default: false
-  },
-
-  colors: {
-    type: Object as PropType<{
-      error?: string;
-      success?: string;
-    }>,
-    default: () => ({
-      error: 'var(--Error-Red-0)',
-      success: 'var(--Success-Green-0)'
-    })
-  },
-  disableSubmitBtn: {
-    type: Boolean,
-    default: false
-  },
-  disableResendBtn: {
-    type: Boolean,
-    default: false
-  }
-});
-
-enum ValidationState {
-  DEFAULT = "default",
-  ERROR = "error",
-  SUCCESS = "success",
-}
-
-const emit = defineEmits([
-  'update:modelValue'
-]);
-
-const state = computed(() => localOtpState.value as ValidationState);
-const error = computed(() => state.value === ValidationState.ERROR);
-const loading = computed(() => props.loading);
-const internalValue = ref('')
-const localOtpState = ref(props.otpState)
-
-const statusMessageStyle = computed<CSSProperties>(() => ({
-  visibility: state.value === ValidationState.DEFAULT ? 'hidden' : 'visible',
-  color: state.value === ValidationState.ERROR
-    ? `${props.colors.error} !important`
-    : `${props.colors.success} !important`,
-  minHeight: '1.5em'
-}));
-
-watch(() => props.otpState, (newVal) => {
-  localOtpState.value = newVal;
-});
-
-watch(internalValue, () => {
-  emit('update:modelValue', internalValue.value)
-}, { immediate: true })
-
-function onSubmit() {
-  props.submitFn();
-}
-
-function onResend() {
-  internalValue.value = '';
-  props.resendFn();
-}
-
-function onResetError(){
-  localOtpState.value = ValidationState.DEFAULT;
-}
-
+<template>
+  <form class="wl-otp-input" @submit.prevent="props.submitFn" aria-labelledby="page-heading"
+    :aria-describedby="error ? 'form-error' : undefined" data-testid="root">
+    <div class="title-container">
+      <h2 id="page-heading" ref="heading">{{ t('wl.otp_input.enter_sms_code') }}</h2>
+      <p>{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
+    </div>
+
+    <div class="input-container">
+      <v-otp-input
+        v-model="internalValue"
+        autofocus
+        rounded="lg"
+        :loading="loading"
+        :error="error"
+        :focus-all="error"
+        :focused="error"
+        color="white"
+        base-color="var(--Soft-Concrete-1)"
+        @update:model-value="onResetError"
+        type="number"
+      >
+        <template #loader>
+          <Loader
+            :size="40"
+            :inline="true"
+            :bg-color="siteColors['button_default_text']"
+            :text-color="siteColors['button_default_bg']"
+          />
+        </template>
+      </v-otp-input>
+    </div>
+
+    <div class="message-container">
+      <p
+        :id="error ? 'form-error' : 'form-success'"
+        :style="statusMessageStyle"
+        :role="error ? 'alert' : 'status'"
+        :aria-live="error ? 'assertive' : 'polite'"
+        aria-atomic="true"
+      >
+        {{ message }}
+      </p>
+    </div>
+
+    <div class="button-container">
+      <slot name="buttons">
+        <Button
+          :label="t('wl.otp_input.confirm')"
+          :disabled="disableSubmitBtn"
+          width="226"
+          @click="onSubmit"
+          type="submit"
+        />
+        <Button
+          :label="t('wl.otp_input.resend')"
+          variant='outlined'
+          :disabled="disableResendBtn"
+          width="226"
+          @click="onResend"
+        />
+      </slot>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, inject, type CSSProperties, PropType } from 'vue';
+import './OtpInput.css';
+import Button from '../Button/Button.vue';
+import Loader from '../Loader/Loader.vue';
+import { useI18n } from 'vue-i18n';
+import { siteColors as globalSiteColors } from "../../utils/index";
+
+const { t } = useI18n();
+
+// Use injected theme colors if available, otherwise fall back to global siteColors
+const injectedColors = inject<any>('themeColors', null);
+const siteColors = computed(() => {
+  if (injectedColors?.value) {
+    return injectedColors.value;
+  }
+  return globalSiteColors || {};
+});
+
+const props = defineProps({
+  phoneNumber: {
+    type: String,
+    required: true
+  },
+
+  message: {
+    type: String,
+    default: ''
+  },
+
+  otpState: {
+    type: String,
+    default: 'default'
+  },
+
+  submitFn: {
+    type: Function,
+    required: true
+  },
+
+  resendFn: {
+    type: Function,
+    required: true
+  },
+
+  loading: {
+    type: Boolean,
+    default: false
+  },
+
+  colors: {
+    type: Object as PropType<{
+      error?: string;
+      success?: string;
+    }>,
+    default: () => ({
+      error: 'var(--Error-Red-0)',
+      success: 'var(--Success-Green-0)'
+    })
+  },
+  disableSubmitBtn: {
+    type: Boolean,
+    default: false
+  },
+  disableResendBtn: {
+    type: Boolean,
+    default: false
+  }
+});
+
+enum ValidationState {
+  DEFAULT = "default",
+  ERROR = "error",
+  SUCCESS = "success",
+}
+
+const emit = defineEmits([
+  'update:modelValue'
+]);
+
+const state = computed(() => localOtpState.value as ValidationState);
+const error = computed(() => state.value === ValidationState.ERROR);
+const loading = computed(() => props.loading);
+const internalValue = ref('')
+const localOtpState = ref(props.otpState)
+
+const statusMessageStyle = computed<CSSProperties>(() => ({
+  visibility: state.value === ValidationState.DEFAULT ? 'hidden' : 'visible',
+  color: state.value === ValidationState.ERROR
+    ? `${props.colors.error} !important`
+    : `${props.colors.success} !important`,
+  minHeight: '1.5em'
+}));
+
+watch(() => props.otpState, (newVal) => {
+  localOtpState.value = newVal;
+});
+
+watch(internalValue, () => {
+  emit('update:modelValue', internalValue.value)
+}, { immediate: true })
+
+function onSubmit() {
+  props.submitFn();
+}
+
+function onResend() {
+  internalValue.value = '';
+  props.resendFn();
+}
+
+function onResetError(){
+  localOtpState.value = ValidationState.DEFAULT;
+}
+
 </script>