@zap-wunschlachen/wl-shared-components 1.0.0

package/src/components/DateInput/DateInput.vue

@@ -0,0 +1,263 @@
+<template>
+  <Input
+    v-bind="$attrs" 
+    ref="inputRef"
+    id="date-input"
+    class="wl-date-input"
+    :class="{
+      'edit-layout': layout === 'edit-field'
+    }"
+    :variant="variant"   
+    :placeholder="placeholder" 
+    v-model="formattedDate"
+    :success="isDefaultLayout ? inputState === 'success' : false" 
+    :error="inputState === 'error'" 
+    @input="onDateInput" 
+    :hint="isDefaultLayout ? inputMessage : ''"
+    :hideDetails="isDefaultLayout ? inputState !== 'error' : true" 
+    type="tel" 
+    for="date-input"
+    data-testid="root">
+    <template #append>
+      <div class="date-wrapper" tabIndex="0" @keydown.enter.prevent="nativeDate?.showPicker()" >
+        <v-icon class="date-icon" icon="heroicons:calendar" />
+        <input 
+          ref="nativeDate" 
+          type="date"
+          tabIndex="-1"  
+          :min="nativeMin"
+          :max="nativeMax"
+          class="native-date"
+          :value="isoValue"
+          @input.stop="onNativeDateChange"
+        />
+      </div>
+    </template>
+  </Input>
+</template>
+
+<script setup lang="ts">
+import {
+  parse, parseISO, format, isValid, getHours,
+  getMinutes,
+  getSeconds,
+  getMilliseconds,
+  set,
+  startOfDay
+} from "date-fns";
+import { ref, watch, defineProps, defineEmits, computed, nextTick } from "vue";
+import Input from "../Input/Input.vue";
+import './DateInput.css';
+import { useI18n } from 'vue-i18n';
+
+// Define props to accept an initial date value
+const props = withDefaults(defineProps<{
+  modelValue?: string | null;
+  layout?: "default" | "edit-field";
+  minDate?: Date | null;
+  minDateErrorMessage?: string;
+  maxDate?: Date | null;
+  maxDateErrorMessage?: string;
+  variant?: string;
+  placeholder?: string;
+  invalidDateErrorMessage?: string;
+}>(), {
+  modelValue: null,
+  layout: 'default',
+  variant: 'outlined',
+});
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string | null): void;
+}>();
+
+const { t } = useI18n();
+
+const placeholder = computed(() => props.placeholder || t('wl.date_input.placeholder', 'TT.MM.JJJJ'));
+const invalidDateMessage = computed(() => props.invalidDateErrorMessage || t('wl.date_input.invalid_date', 'Bitte ein gültiges Datum eingeben'));
+const maxDateMessage = computed(() => {
+  if (props.maxDate && isValid(props.maxDate)) {
+    return props.maxDateErrorMessage || t('wl.date_input.max_date_error', { date: format(props.maxDate, 'dd.MM.yyyy') });
+  }
+  return '';
+});
+const minDateMessage = computed(() => {
+  if (props.minDate && isValid(props.minDate)) {
+    return props.minDateErrorMessage || t('wl.date_input.min_date_error', { date: format(props.minDate, 'dd.MM.yyyy') });
+  }
+  return '';
+});
+
+const ISO_FORMAT = "yyyy-MM-dd";
+const DISPLAY_FORMAT = "dd.MM.yyyy";
+
+// Local reactive state for the input
+const formattedDate = ref("");
+const inputState = ref<"idle" | "error" | "success">("idle");
+const inputMessage = ref("");
+const nativeDate = ref<HTMLInputElement | null>(null)
+const inputRef = ref(null)
+
+const isDefaultLayout = computed(() => props.layout === "default")
+
+const isoValue = computed(() => {
+  const parsed = parse(formattedDate.value, DISPLAY_FORMAT, new Date());
+  return isValid(parsed) ? format(parsed, ISO_FORMAT) : "";
+});
+
+watch(
+  () => props.modelValue,
+  (newDate) => {
+    const parsed = parseISO(newDate ?? '');
+    formattedDate.value = (parsed && isValid(parsed)) ? format(parsed, DISPLAY_FORMAT) : "";
+  },
+  { immediate: true }
+);
+
+const nativeMin = computed(() => {
+  if (props.minDate && isValid(props.minDate)) {
+    return format(props.minDate, ISO_FORMAT);
+  }
+  return "";
+});
+
+const nativeMax = computed(() => {
+  if (props.maxDate && isValid(props.maxDate)) {
+    return format(props.maxDate, ISO_FORMAT);
+  }
+  return "";
+});
+
+function onDateInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  let value = target.value.replace(/\D/g, ""); // Remove non-digits
+
+  // Insert dot after day (2 digits)
+  if (value.length > 2) {
+    value = value.slice(0, 2) + "." + value.slice(2);
+  }
+  // Insert dot after month (next 2 digits)
+  if (value.length > 5) {
+    value = value.slice(0, 5) + "." + value.slice(5);
+  }
+  // Limit to 10 characters (DD.MM.YYYY)
+  if (value.length > 10) {
+    value = value.slice(0, 10);
+  }
+
+  formattedDate.value = value;
+
+  // If incomplete date, reset state
+  if (value.length < 10) {
+    inputState.value = "idle";
+    inputMessage.value = "";
+    return;
+  }
+
+  // Parse the date using dots as separator
+  const parsed = parseDateWithCurrentTime(value);
+
+  if (!isValid(parsed)) {
+    inputState.value = "error";
+    inputMessage.value = invalidDateMessage.value;
+    return;
+  }
+
+  if (props.minDate && isValid(props.minDate)) {
+    if (startOfDay(parsed) < startOfDay(props.minDate)) {
+      inputState.value = "error";
+      inputMessage.value = minDateMessage.value;
+      return;
+    }
+  }
+
+  if(props.maxDate && isValid(props.maxDate)) {
+    if (startOfDay(parsed) > startOfDay(props.maxDate)) {
+      inputState.value = "error";
+      inputMessage.value = maxDateMessage.value;
+      return;
+    }
+  }
+
+  inputState.value = "success";
+  inputMessage.value = "";
+
+  emit("update:modelValue", parsed.toISOString());
+}
+
+/**
+ * Parse "dd.MM.yyyy" as a date, then apply the current local time (H:M:S.ms).
+ * Returns a new Date object.
+ */
+function parseDateWithCurrentTime(dateString: any) {
+  const now = new Date();
+
+  // 1) Parse date portion (defaults to midnight)
+  const parsedDate = parse(dateString, DISPLAY_FORMAT, now);
+
+  // 2) Overwrite the parsed date's time with the current local time
+  const result = set(parsedDate, {
+    hours: getHours(now),
+    minutes: getMinutes(now),
+    seconds: getSeconds(now),
+    milliseconds: getMilliseconds(now)
+  });
+
+  return result;
+}
+
+function onNativeDateChange(e: Event) {
+  if (!nativeDate.value) return;
+
+  const [year, month, day] = nativeDate.value.value.split("-");
+  const reformatted = `${day}.${month}.${year}`;
+  const fakeEvent = { target: { value: reformatted } } as unknown as Event;
+
+  onDateInput(fakeEvent);
+
+  if (props.layout === 'edit-field') {
+    // When DateInput is used in EditField, clicking events in the native picker removes focus from EditField.
+    // Since saving is based on blur in EditField, we need to restore focus and then blur to trigger save.
+    nextTick(() => {
+      inputRef.value?.focus?.();
+      inputRef.value?.blur?.();
+    });
+  }
+}
+
+defineExpose({
+  focus: () => inputRef.value?.focus?.(),
+  blur: () => inputRef.value?.blur?.(),
+  select: () => inputRef.value?.select?.()
+})
+</script>
+
+<style scoped>
+.native-date {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0 !important;
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.date-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.date-icon {
+  pointer-events: none;
+  cursor: pointer;
+  z-index: 1;
+}
+</style>

package/src/components/Dialog/Dialog.css

@@ -0,0 +1,6 @@
+.v-overlay__scrim {
+  fill: rgba(217, 217, 217, 0.55) !important;
+  backdrop-filter: blur(4px) !important;
+  opacity: 1 !important;
+  background: transparent !important;
+}

package/src/components/Dialog/Dialog.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="text-center pa-4" data-testid="root">
+    <!-- Scoped slot for the activator with click handler to open dialog -->
+    <slot name="activator" :openDialog="openDialog" />
+
+    <!-- Dialog component with direct binding to dialog.value -->
+    <v-dialog v-model="dialog" width="auto">
+      <slot :closeDialog="closeDialog" name="content"></slot>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import './Dialog.css';
+
+// Reactive dialog state
+const dialog = ref(false);
+
+// Methods to open and close the dialog
+const openDialog = () => {
+  console.log('entereed 1');
+  dialog.value = true;
+};
+const closeDialog = () => {
+  console.log('entereed 2');
+  dialog.value = false;
+};
+</script>

package/src/components/EditField/EditField.css

@@ -0,0 +1,20 @@
+.wl-edit-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.wl-edit-field .input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  width: 50%;
+  text-align: right;
+}
+
+.wl-edit-field .title-container {
+  display: flex;
+  align-items: center;
+}

package/src/components/EditField/EditField.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="wl-edit-field" data-testid="root">
+    <div class="title-container" tabIndex="-1">
+      <v-icon v-if="props.icon !== ''" :icon="props.icon" size="16" class="mr-2" />
+      <p>{{ props.title }}</p>
+    </div>
+
+    <div ref="inputWrapperRef" class="input-wrapper">
+      <slot name="input" :is-input-focused="isInputFocused">
+        <template v-if="props.type === 'select'">
+          <Select
+            v-bind="props.inputProps"
+            reverse
+            ref="inputElementRef"
+            label=""
+            :return-object="false"
+            :modelValue="internalValue"
+            :items="items"
+            :border-on-hover="true"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+            @update:model-value="(value) => { internalValue = value }"
+          />
+        </template>
+
+        <template v-else-if="props.type === 'date'">
+          <DateInput
+            v-bind="props.inputProps"
+            ref="inputElementRef"
+            reverse
+            :layout="'edit-field'"
+            :border-on-hover="true"
+            v-model="internalValue"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+          />
+        </template>
+
+        <template v-else-if="props.type === 'phone'">
+          <PhoneInput
+            v-bind="props.inputProps"
+            ref="inputElementRef"
+            style="width: 100%;" 
+            density="compact"
+            hideDetails
+            reverse
+            :border-on-hover="true"
+            append-inner-icon=""
+            v-model="internalValue"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+            @update:phone="(value) => internalValue = value"
+          />
+        </template>
+
+        <template v-else-if="props.type === 'text'">
+          <Input
+            v-bind="props.inputProps"
+            ref="inputElementRef" 
+            reverse
+            :border-on-hover="true"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+            v-model="internalValue" 
+            @update:modelValue="(value) => internalValue = value"
+          />
+        </template>
+      </slot>
+
+      <template v-if="computedAppendIcon">
+        <v-icon :icon="computedAppendIcon" class="ml-1" size="16" color="var(--Dental-Blue-0)" @click="onStartEditing"/>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import Input from '../Input/Input.vue';
+import Select from '../Select/Select.vue';
+import DateInput from '../DateInput/DateInput.vue';
+import PhoneInput from '../PhoneInput/PhoneInput.vue';
+import { VIcon } from 'vuetify/components';
+import './EditField.css'
+
+const props = defineProps({
+  title: { type: String, required: true },
+  value: { required: true },
+  icon: { type: String, required: false },
+  type: { type: String, required: false },
+  items: { type: Array, required: false },
+  selectOnFocus: { type: Boolean, default: false },
+  appendIcon: { type: String, required: false },
+  inputProps: { type: Object, default: () => ({}) }
+})
+const emit = defineEmits(['update:value'])
+
+const internalValue = ref(props.value)
+const isInputFocused = ref(false)
+const skipSave = ref(false)
+
+const inputWrapperRef = ref(null);
+const inputElementRef = ref(null);
+
+const computedAppendIcon = computed(() => 
+  props.appendIcon === undefined
+    ? 'heroicons:pencil'
+    : props.appendIcon
+)
+
+const itemsLookup = ref<Record<string, string>>({});
+
+if (props.items && Array.isArray(props.items)) {
+  itemsLookup.value = (props.items as Array<{ value: string; title: string }>).reduce((acc, item) => {
+    acc[item.value] = item.title;
+    return acc;
+  }, {} as Record<string, string>);
+}
+
+watch(() => props.value, v => (internalValue.value = v))
+
+async function onStartEditing() {
+  inputElementRef.value?.focus?.();
+}
+
+function save() {
+  if (internalValue.value !== props.value) {
+    emit('update:value', internalValue.value)
+  }
+}
+
+function handleBlur(){
+  if(skipSave.value){
+    skipSave.value = false;
+    return;
+  }
+
+  save();
+}
+
+function onEnter(){
+  inputElementRef.value?.blur?.();
+}
+
+function onEsc() {
+  internalValue.value = props.value;
+  skipSave.value = true;
+  inputElementRef.value?.blur?.();
+}
+
+function onFocus() {
+  if(props.selectOnFocus && inputElementRef.value) {
+    inputElementRef.value?.select?.();
+  }
+}
+
+</script>
+
+<style scoped>
+
+.editable-display.placeholder {
+  color: #aaa;
+}
+
+.editable-display {
+  cursor: text;
+  width: 100%;
+  border: 1.5px solid transparent;
+  padding: 8px;
+  min-height: calc(1.2em + 16px);
+}
+
+.editable-display:hover {
+  border-radius: 8px;
+  border: 1px solid var(--soft-concrete-1, #DDDDDF);
+  background: var(--White, #FFF);
+}
+
+.editable-display.edited {
+  border-radius: 8px;
+  border: 1px solid var(--soft-concrete-1, #DDDDDF);
+  background: var(--White, #FFF);;
+}
+
+.editable-input {
+  border-radius: 8px;
+  border: 1.5px solid var(--Dental-Blue-0, #172774);
+  background: var(--White, #FFF);
+  width: 100%;
+  outline: none;
+  text-align: right;
+  padding: 8px;
+}
+</style>

package/src/components/IconBullet/IconBullet.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="container d-flex align-center" data-testid="root">
+    <div class="icon-container d-flex align-start">
+      <!-- Check if the icon slot is used; otherwise, display the icon from the prop -->
+      <slot name="icon" v-if="$slots.icon"></slot>
+      <v-icon v-else-if="icon" :size="iconSize" :icon="icon"></v-icon>
+    </div>
+
+    <div class="text-container d-flex flex-column">
+      <!-- Display content if provided, otherwise display header and subheader -->
+      <div v-if="content" v-html="content"></div>
+      <div class="d-flex flex-column text-container" v-else>
+        <h3 v-if="header">{{ header }}</h3>
+        <p class="p-large" v-if="subHeader">{{ subHeader }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  /**
+   * HTML content to display in the main content area.
+   * If provided, this will override header and subheader.
+   */
+  content: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Header text displayed above the subheader.
+   * Only displayed if content is not provided.
+   */
+  header: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Subheader text displayed below the header.
+   * Only displayed if content is not provided.
+   */
+  subHeader: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Icon to display next to the text.
+   * If an icon slot is provided, this prop will be ignored.
+   */
+  icon: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Size of the icon displayed next to the text.
+   * Accepts SVG-compatible size values as a string, such as '23', '28', etc.
+   * Ignored if an icon slot is provided.
+   */
+  iconSize: {
+    type: String,
+    default: '38',
+    required: false,
+  },
+});
+</script>
+
+<style scoped>
+.container {
+  width: 400px;
+  min-width: 300px;
+  max-width: 400px;
+  gap: 24px;
+  padding-left: 50px;
+  padding-right: 40px;
+}
+
+.text-container {
+  gap: 11px;
+}
+
+.v-icon {
+  color: var(--Dental-Blue-0);
+}
+</style>

package/src/components/IconBullet/IconBulletList.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="outer-container d-flex flex-column align-center mx-auto" data-testid="root">
+    <!-- Conditional rendering of header slot or header prop -->
+    <div class="text-center">
+      <slot name="header">
+        <h2 v-if="header">{{ header }}</h2>
+      </slot>
+    </div>
+
+    <div class="slot-container d-flex justify-center align-start flex-wrap">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  /**
+   * Header text displayed if the header slot is not provided.
+   */
+  header: {
+    type: String,
+    required: false,
+  },
+});
+</script>
+
+<style scoped>
+.outer-container {
+  max-width: 850px;
+  row-gap: 27px;
+}
+
+.slot-container {
+  align-content: center;
+  row-gap: 27px;
+  width: 100%;
+}
+</style>

package/src/components/Icons/Audio/CloudFailed.vue

@@ -0,0 +1,21 @@
+<template>
+    <svg 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path 
+            d="M2.25 15C2.25 17.4853 4.26472 19.5 6.75 19.5H18C20.0711 19.5 21.75 17.8211 21.75 15.75C21.75 14.1479 20.7453 12.7805 19.3316 12.2433C19.4407 11.9324 19.5 11.5981 19.5 11.25C19.5 9.59315 18.1569 8.25 16.5 8.25C16.1767 8.25 15.8654 8.30113 15.5737 8.39575C14.9765 6.1526 12.9312 4.5 10.5 4.5C7.6005 4.5 5.25 6.85051 5.25 9.75C5.25 10.0832 5.28105 10.4092 5.3404 10.7252C3.54555 11.3167 2.25 13.0071 2.25 15Z" 
+            stroke="#172774" 
+            stroke-linecap="round" 
+            stroke-linejoin="round"
+        />
+        <path 
+            d="M3.5 4L20 22.5" 
+            stroke="#172774" 
+            stroke-linecap="round"
+        />
+    </svg>
+</template>

package/src/components/Icons/Audio/CloudSaved.vue

@@ -0,0 +1,22 @@
+<template>
+    <svg 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path 
+            d="M2.25 15C2.25 17.4853 4.26472 19.5 6.75 19.5H18C20.0711 19.5 21.75 17.8211 21.75 15.75C21.75 14.1479 20.7453 12.7805 19.3316 12.2433C19.4407 11.9324 19.5 11.5981 19.5 11.25C19.5 9.59315 18.1569 8.25 16.5 8.25C16.1767 8.25 15.8654 8.30113 15.5737 8.39575C14.9765 6.1526 12.9312 4.5 10.5 4.5C7.6005 4.5 5.25 6.85051 5.25 9.75C5.25 10.0832 5.28105 10.4092 5.3404 10.7252C3.54555 11.3167 2.25 13.0071 2.25 15Z" 
+            stroke="#172774" 
+            stroke-linecap="round" 
+            stroke-linejoin="round"
+        />
+
+        <path d="M8.6499 13L10.8999 15.25L14 11" 
+            stroke="#172774" 
+            stroke-linecap="round" 
+            stroke-linejoin="round"
+        />
+    </svg>
+</template>