@zap-wunschlachen/wl-shared-components 1.0.34 → 1.0.37

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,39 +1,39 @@
-.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 .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 .message-container {
+  padding-top: 16px;
+}

package/src/components/OtpInput/OtpInput.vue

@@ -1,152 +1,152 @@
-<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" :style="{ color: siteColors['font_color_title_code'] }">{{ t('wl.otp_input.enter_sms_code') }}</h2>
-      <p :style="{ color: siteColors['font_color_code'] }">{{ 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="siteColors['font_color_title_code']"
-        @update:model-value="onResetError"
-        type="number"
-      >
-        <template #loader>
-          <Loader :size="40" />
-        </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, 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 } from "../../utils/index";
-
-const { t } = useI18n();
-
-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" :style="{ color: siteColors['font_color_title_code'] }">{{ t('wl.otp_input.enter_sms_code') }}</h2>
+      <p :style="{ color: siteColors['font_color_code'] }">{{ 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="siteColors['font_color_title_code']"
+        @update:model-value="onResetError"
+        type="number"
+      >
+        <template #loader>
+          <Loader :size="40"/>
+        </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, 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 } from "../../utils/index";
+
+const { t } = useI18n();
+
+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>

package/src/components/PhoneInput/PhoneInput.css

@@ -1,32 +1,32 @@
-.wl-phone-input {
-  width: 100%;
-}
-
-.wl-phone-input.border-on-hover .v-phone-input__country__input .v-field__outline__end {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  border-top-left-radius: 8px !important;
-  border-bottom-left-radius: 8px !important;
-}
-
-.wl-phone-input.border-on-hover .v-phone-input__phone__input .v-field__outline__start {
-  border-top-right-radius: 8px !important;
-  border-bottom-right-radius: 8px !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-.wl-phone-input.border-on-hover :deep(.v-field__outline) {
-  opacity: 0;
-  --v-field-border-opacity: 0;
-}
-
-.wl-phone-input.border-on-hover:hover :deep(.v-field__outline) {
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-.wl-phone-input.border-on-hover.v-field--focused :deep(.v-field__outline) {
-  opacity: 1;
-  --v-field-border-opacity: 1;
+.wl-phone-input {
+  width: 100%;
+}
+
+.wl-phone-input.border-on-hover .v-phone-input__country__input .v-field__outline__end {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-top-left-radius: 8px !important;
+  border-bottom-left-radius: 8px !important;
+}
+
+.wl-phone-input.border-on-hover .v-phone-input__phone__input .v-field__outline__start {
+  border-top-right-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.wl-phone-input.border-on-hover :deep(.v-field__outline) {
+  opacity: 0;
+  --v-field-border-opacity: 0;
+}
+
+.wl-phone-input.border-on-hover:hover :deep(.v-field__outline) {
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+.wl-phone-input.border-on-hover.v-field--focused :deep(.v-field__outline) {
+  opacity: 1;
+  --v-field-border-opacity: 1;
 }