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

package/src/components/PhoneInput/PhoneInput.css

@@ -1,126 +1,151 @@
-.wl-phone-input {
-  width: 100%;
-}
-
-/* -------- Default State -------- */
-.wl-phone-input .v-field__outline {
-  opacity: 1;
-  --v-field-border-opacity: 1;
-  color: var(--input-default-border);
-}
-
-.wl-phone-input .v-field--variant-outlined {
-  background: var(--input-default-bg);
-}
-
-.wl-phone-input .v-field .v-icon {
-  color: var(--input-default-icon-color);
-}
-
-.wl-phone-input .v-field__input {
-  color: var(--input-default-text) !important;
-}
-
-.wl-phone-input .v-field__input::placeholder {
-  color: var(--input-default-text);
-  opacity: 1 !important;
-}
-
-/* -------- Active State -------- */
-.wl-phone-input .v-field--active .v-field__outline {
-  color: var(--input-active-border);
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-.wl-phone-input .v-field--active.v-field--variant-outlined {
-  background: var(--input-active-bg);
-}
-
-.wl-phone-input .v-field--active .v-icon {
-  color: var(--input-active-icon-color);
-}
-
-.wl-phone-input .v-field--active .v-field__input {
-  color: var(--input-active-text) !important;
-}
-
-.wl-phone-input .v-field--active .v-field__input::placeholder {
-  color: var(--input-active-text);
-}
-
-/* -------- Focused State -------- */
-.wl-phone-input .v-field--focused .v-field__outline {
-  color: var(--input-focused-border);
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-.wl-phone-input .v-field--focused.v-field--variant-outlined {
-  background: var(--input-focused-bg);
-}
-
-.wl-phone-input .v-field--focused .v-icon {
-  color: var(--input-focused-icon-color);
-}
-
-.wl-phone-input .v-field--focused .v-field__input {
-  color: var(--input-focused-text) !important;
-}
-
-.wl-phone-input .v-field--focused .v-field__input::placeholder {
-  color: var(--input-focused-text);
-}
-
-/* -------- Disabled State -------- */
-.wl-phone-input .v-field--disabled .v-field__outline {
-  color: var(--input-disabled-border) !important;
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-.wl-phone-input .v-field--disabled.v-field--variant-outlined {
-  background: var(--input-disabled-bg) !important;
-}
-
-.wl-phone-input .v-field--disabled .v-icon {
-  color: var(--input-disabled-icon-color) !important;
-}
-
-.wl-phone-input .v-field--disabled .v-field__input {
-  color: var(--input-disabled-text) !important;
-}
-
-.wl-phone-input .v-field--disabled .v-field__input::placeholder {
-  color: var(--input-disabled-text);
-}
-
-/* -------- Border-on-hover variant -------- */
-.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%;
+}
+
+/* -------- Default State -------- */
+.wl-phone-input .v-field__outline {
+  opacity: 1;
+  --v-field-border-opacity: 1;
+  color: var(--input-default-border);
+}
+
+.wl-phone-input .v-field--variant-outlined {
+  background: var(--input-default-bg);
+}
+
+.wl-phone-input .v-field .v-icon {
+  color: var(--input-default-icon-color);
+}
+
+.wl-phone-input .v-field__input {
+  color: var(--input-default-text) !important;
+}
+
+.wl-phone-input .v-field__input::placeholder {
+  color: var(--input-default-text);
+  opacity: 1 !important;
+}
+
+/* -------- Active State -------- */
+.wl-phone-input .v-field--active .v-field__outline {
+  color: var(--input-active-border);
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+.wl-phone-input .v-field--active.v-field--variant-outlined {
+  background: var(--input-active-bg);
+}
+
+.wl-phone-input .v-field--active .v-icon {
+  color: var(--input-active-icon-color);
+}
+
+.wl-phone-input .v-field--active .v-field__input {
+  color: var(--input-active-text) !important;
+}
+
+.wl-phone-input .v-field--active .v-field__input::placeholder {
+  color: var(--input-active-text);
+}
+
+/* -------- Focused State -------- */
+.wl-phone-input .v-field--focused .v-field__outline {
+  color: var(--input-focused-border);
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+.wl-phone-input .v-field--focused.v-field--variant-outlined {
+  background: var(--input-focused-bg);
+}
+
+.wl-phone-input .v-field--focused .v-icon {
+  color: var(--input-focused-icon-color);
+}
+
+.wl-phone-input .v-field--focused .v-field__input {
+  color: var(--input-focused-text) !important;
+}
+
+.wl-phone-input .v-field--focused .v-field__input::placeholder {
+  color: var(--input-focused-text);
+}
+
+/* -------- Disabled State -------- */
+.wl-phone-input .v-field--disabled .v-field__outline {
+  color: var(--input-disabled-border) !important;
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+.wl-phone-input .v-field--disabled.v-field--variant-outlined {
+  background: var(--input-disabled-bg) !important;
+}
+
+.wl-phone-input .v-field--disabled .v-icon {
+  color: var(--input-disabled-icon-color) !important;
+}
+
+.wl-phone-input .v-field--disabled .v-field__input {
+  color: var(--input-disabled-text) !important;
+}
+
+.wl-phone-input .v-field--disabled .v-field__input::placeholder {
+  color: var(--input-disabled-text);
+}
+
+/* -------- Error State -------- */
+.wl-phone-input.is-error .v-field__outline,
+.wl-phone-input.is-error .v-field__outline__start,
+.wl-phone-input.is-error .v-field__outline__end {
+  border-color: var(--input-error-border) !important;
+  opacity: 1;
+}
+
+.wl-phone-input.is-error .v-field--variant-outlined {
+  background: var(--input-error-bg);
+}
+
+.wl-phone-input.is-error .v-field__input {
+  color: var(--input-error-text) !important;
+}
+
+.wl-phone-input.is-error .v-field__input::placeholder {
+  color: var(--input-error-text);
+}
+
+.wl-phone-input.is-error .v-icon {
+  color: var(--input-error-icon-color);
+  opacity: 1;
+}
+
+/* -------- Border-on-hover variant -------- */
+.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;
+}

package/src/components/PhoneInput/PhoneInput.vue

@@ -1,140 +1,231 @@
-<template>
-  <VPhoneInput
-    v-bind="$attrs"
-    ref="inputRef"
-    id="phone"
-    class="wl-phone-input"
-    :class="{
-      'border-on-hover': borderOnHover
-    }"
-    :style="{ color: colors['primary-color'] }"
-    :include-countries="countriesCodes"
-    :aria-label="placeholder"
-    :variant="variant"
-    label=""
-    :appendInnerIcon="appendInnerIcon"
-    :placeHolder="placeholder"
-    display-format="international"
-    :default-country="defaultCountryCode"
-    hide-details
-    :aria-invalid="state === ValidationState.ERROR"
-    :countryIconMode="'svg'"
-    @update:model-value="onPhoneUpdate"
-    data-testid="root"
-  />
-</template>
-
-<script setup lang="ts">
-import { PropType, ref, nextTick, computed, inject } from 'vue';
-import { VPhoneInput } from 'v-phone-input';
-import './PhoneInput.css'
-import { siteColors } from "../../utils/index";
-
-import "flag-icons/css/flag-icons.min.css";
-import "v-phone-input/dist/v-phone-input.css";
-
-// Inject theme colors from ThemeProvider, fallback to global siteColors
-const injectedThemeColors = inject('themeColors', null);
-const colors = computed(() => {
-  if (injectedThemeColors) {
-    return (injectedThemeColors as any).value;
-  }
-  return siteColors;
-});
-
-enum ValidationState {
-  DEFAULT = "default",
-  ERROR = "error",
-  SUCCESS = "success",
-}
-
-const props = defineProps({
-  state: {
-    type: String as PropType<ValidationState>,
-    default: ValidationState.DEFAULT
-  },
-
-  placeholder: {
-    type: String,
-    default: ''
-  },
-
-  countriesCodes: {
-    type: Array as PropType<string[]>,
-    default: []
-  },
-
-  defaultCountryCode: {
-    type: String,
-    default: 'DE'
-  },
-
-  appendInnerIcon: {
-    type: String,
-    default: 'heroicons:phone'
-  },
-
-  variant: {
-    type: String,
-    default: 'outlined'
-  },
-
-  borderOnHover: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits<{
-  (e: 'update:phone', value: string): void
-  (e: 'update:valid', isValid: boolean): void
-}>();
-
-const inputRef = ref(null)
-
-// Handle phone input updates
-const onPhoneUpdate = (value: string) => {
-  emit('update:phone', value);
-  // Check validity after the VPhoneInput has processed the value
-  nextTick(() => {
-    const valid = inputRef.value?.isValid ?? false;
-    emit('update:valid', valid);
-  });
-};
-
-const getNativeInput = () => {
-  return inputRef.value?.phoneInputRef?.$el?.querySelector('input');
-}
-
-const blur = () => {
- nextTick(() => {
-    getNativeInput()?.blur();
-  });
-};
-
-const select = () => {
-  nextTick(() => {
-    getNativeInput()?.select();
-  });
-};
-
-const focus = () => {
-  nextTick(() => {
-    getNativeInput()?.focus();
-  });
-};
-
-// Computed property to expose isValid from VPhoneInput
-const isValid = computed(() => inputRef.value?.isValid ?? false);
-
-defineExpose({
-  blur,
-  select,
-  focus,
-  isValid
-});
-
-</script>
-
-<style scoped>
+<template>
+  <div class="wl-phone-input-wrapper">
+    <VPhoneInput
+      v-bind="$attrs"
+      ref="inputRef"
+      id="phone"
+      class="wl-phone-input"
+      :class="{
+        'border-on-hover': borderOnHover,
+        'is-error': error
+      }"
+      :style="{ color: colors['primary-color'] }"
+      :include-countries="countriesCodes"
+      :aria-label="placeholder"
+      :variant="variant"
+      label=""
+      :appendInnerIcon="appendInnerIcon"
+      :placeHolder="placeholder"
+      display-format="international"
+      :default-country="defaultCountryCode"
+      hide-details
+      :error="error"
+      :aria-invalid="error || state === ValidationState.ERROR || undefined"
+      :aria-describedby="hint ? phoneHintId : undefined"
+      :countryIconMode="'svg'"
+      @update:model-value="onPhoneUpdate"
+      data-testid="root"
+    />
+    <div v-if="hint" class="wl-phone-hint" :id="phoneHintId" role="alert" aria-hidden="true">
+      <v-icon :style="{ color: hintColor }" icon="heroicons:exclamation-circle" aria-hidden="true" size="16"></v-icon>
+      <span :style="{ color: hintColor }">{{ hint }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, nextTick, computed, inject, onMounted, onBeforeUnmount } from 'vue';
+import { VPhoneInput } from 'v-phone-input';
+import './PhoneInput.css'
+import { siteColors } from "../../utils/index";
+
+import "flag-icons/css/flag-icons.min.css";
+import "v-phone-input/dist/v-phone-input.css";
+
+// Inject theme colors from ThemeProvider, fallback to global siteColors
+const injectedThemeColors = inject('themeColors', null);
+const colors = computed(() => {
+  if (injectedThemeColors) {
+    return (injectedThemeColors as any).value;
+  }
+  return siteColors;
+});
+
+enum ValidationState {
+  DEFAULT = "default",
+  ERROR = "error",
+  SUCCESS = "success",
+}
+
+// Generate unique ID for accessibility - connects input to hint/error message
+const phoneHintId = `phone-hint-${Math.random().toString(36).slice(2, 11)}`;
+
+const props = defineProps({
+  state: {
+    type: String as PropType<ValidationState>,
+    default: ValidationState.DEFAULT
+  },
+
+  /**
+   * Indicates if the input is in an error state.
+   * When true, the error style will be applied.
+   */
+  error: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * Hint text to display below the input (typically an error message).
+   */
+  hint: {
+    type: String,
+    default: ''
+  },
+
+  placeholder: {
+    type: String,
+    default: ''
+  },
+
+  countriesCodes: {
+    type: Array as PropType<string[]>,
+    default: []
+  },
+
+  defaultCountryCode: {
+    type: String,
+    default: 'DE'
+  },
+
+  appendInnerIcon: {
+    type: String,
+    default: 'heroicons:phone'
+  },
+
+  variant: {
+    type: String,
+    default: 'outlined'
+  },
+
+  borderOnHover: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Compute the hint color based on state
+const hintColor = computed(() => {
+  if (props.error) {
+    return colors.value['input_error_icon_color'];
+  }
+  return colors.value['primary-color'];
+});
+
+const emit = defineEmits<{
+  (e: 'update:phone', value: string): void
+  (e: 'update:valid', isValid: boolean): void
+}>();
+
+const inputRef = ref(null)
+
+// Handle phone input updates
+const onPhoneUpdate = (value: string) => {
+  emit('update:phone', value);
+  // Check validity after the VPhoneInput has processed the value
+  nextTick(() => {
+    const valid = inputRef.value?.isValid ?? false;
+    emit('update:valid', valid);
+  });
+};
+
+const getNativeInput = () => {
+  return inputRef.value?.phoneInputRef?.$el?.querySelector('input');
+}
+
+// Filter input to only allow + and digits
+const handleBeforeInput = (e: InputEvent) => {
+  if (!e.data) return; // Allow non-character inputs (backspace, delete, etc.)
+  // Only allow digits and + (plus only at the start)
+  const filtered = e.data.replace(/[^\d+]/g, '');
+  if (filtered !== e.data) {
+    e.preventDefault();
+    if (filtered) {
+      document.execCommand('insertText', false, filtered);
+    }
+  }
+};
+
+const handlePaste = (e: ClipboardEvent) => {
+  const pasted = e.clipboardData?.getData('text') ?? '';
+  const cleaned = pasted.replace(/[^\d+]/g, '');
+  if (cleaned !== pasted) {
+    e.preventDefault();
+    if (cleaned) {
+      document.execCommand('insertText', false, cleaned);
+    }
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    const input = getNativeInput();
+    if (input) {
+      input.addEventListener('beforeinput', handleBeforeInput);
+      input.addEventListener('paste', handlePaste);
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  const input = getNativeInput();
+  if (input) {
+    input.removeEventListener('beforeinput', handleBeforeInput);
+    input.removeEventListener('paste', handlePaste);
+  }
+});
+
+const blur = () => {
+ nextTick(() => {
+    getNativeInput()?.blur();
+  });
+};
+
+const select = () => {
+  nextTick(() => {
+    getNativeInput()?.select();
+  });
+};
+
+const focus = () => {
+  nextTick(() => {
+    getNativeInput()?.focus();
+  });
+};
+
+// Computed property to expose isValid from VPhoneInput
+const isValid = computed(() => inputRef.value?.isValid ?? false);
+
+defineExpose({
+  blur,
+  select,
+  focus,
+  isValid
+});
+
+</script>
+
+<style scoped>
+.wl-phone-input-wrapper {
+  width: 100%;
+}
+
+.wl-phone-hint {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 16px 0;
+  font-size: 12px;
+}
 </style>