@zap-wunschlachen/wl-shared-components 1.0.38 → 1.0.40

package/src/components/accessibility.css

@@ -1,218 +1,218 @@
-/**
- * Global Accessibility Styles
- *
- * These styles ensure WCAG 2.1 AA compliance for all components.
- * Required for German accessibility requirements (BITV 2.0).
- */
-
-/* =====================================================
-   FOCUS INDICATORS
-   WCAG 2.4.7: Focus Visible (Level AA)
-   ===================================================== */
-
-/* Universal focus-visible style for all interactive elements */
-.wl-button:focus-visible,
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex="0"]:focus-visible {
-  outline: 2px solid var(--Dental-Blue-0, #172774);
-  outline-offset: 2px;
-}
-
-/* High contrast focus for dark backgrounds */
-.wl-button.v-btn--variant-flat:focus-visible {
-  outline-color: white;
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
-}
-
-/* Checkbox focus indicator */
-.input-checkbox:focus-visible {
-  outline: 2px solid var(--Dental-Blue-0, #172774);
-  outline-offset: 2px;
-}
-
-/* Button focus styles */
-.wl-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-.wl-button.v-btn--variant-outlined:focus-visible {
-  outline: 2px solid var(--Dental-Blue-0, #172774);
-  outline-offset: 2px;
-}
-
-/* Input focus styles */
-.v-text-field input:focus-visible,
-.v-textarea textarea:focus-visible {
-  outline: none; /* Vuetify handles this via border */
-}
-
-.v-text-field:focus-within {
-  border-color: var(--Dental-Blue-0, #172774) !important;
-}
-
-/* Select/Combobox focus */
-.wl-select .v-field:focus-within {
-  border-color: var(--Dental-Blue-0, #172774) !important;
-}
-
-/* =====================================================
-   REDUCED MOTION
-   WCAG 2.3.3: Animation from Interactions (Level AAA)
-   ===================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-/* =====================================================
-   HIGH CONTRAST MODE
-   Windows High Contrast Mode Support
-   ===================================================== */
-
-@media (forced-colors: active) {
-  .wl-button {
-    border: 2px solid currentColor;
-  }
-
-  .input-checkbox {
-    border: 2px solid currentColor;
-  }
-
-  .input-checkbox:checked::before {
-    background-color: currentColor;
-  }
-}
-
-/* =====================================================
-   DISABLED STATES
-   Ensure disabled elements maintain contrast
-   WCAG 1.4.3: Contrast (Minimum) - Note: Disabled elements are exempt
-   but we still aim for visibility
-   ===================================================== */
-
-.wl-button:disabled,
-.wl-button[aria-disabled="true"] {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.input-checkbox:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* =====================================================
-   SKIP LINKS
-   WCAG 2.4.1: Bypass Blocks (Level A)
-   ===================================================== */
-
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--Dental-Blue-0, #172774);
-  color: white;
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
-/* =====================================================
-   SCREEN READER ONLY
-   Visually hidden but accessible to screen readers
-   ===================================================== */
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* =====================================================
-   ICON BUTTONS
-   Ensure icon-only buttons are accessible
-   ===================================================== */
-
-.icon-button {
-  position: relative;
-}
-
-/* Show in development environments */
-body.dev-mode .icon-button:not([aria-label]):not([aria-labelledby])::after {
-  content: "Warning: Missing accessible name";
-  position: absolute;
-  background: red;
-  color: white;
-  font-size: 10px;
-  padding: 2px;
-  display: block;
-}
-
-/* =====================================================
-   LOADING STATES
-   WCAG 4.1.3: Status Messages (Level AA)
-   ===================================================== */
-
-.loading-indicator {
-  /* Announce loading state to screen readers */
-}
-
-[aria-busy="true"] {
-  cursor: wait;
-}
-
-/* =====================================================
-   ERROR STATES
-   Ensure error messages are visible and announced
-   ===================================================== */
-
-.error-message {
-  color: var(--Error-Red-0, #d32f2f);
-  font-weight: 500;
-}
-
-[aria-invalid="true"] {
-  border-color: var(--Error-Red-0, #d32f2f) !important;
-}
-
-/* =====================================================
-   MINIMUM TOUCH TARGET SIZE
-   WCAG 2.5.5: Target Size (Level AAA) - 44x44px minimum
-   ===================================================== */
-
-.touch-target-min {
-  min-width: 44px;
-  min-height: 44px;
-}
-
-/* =====================================================
-   TEXT SPACING
-   WCAG 1.4.12: Text Spacing (Level AA)
-   Content should support user adjustments
-   ===================================================== */
-
-/* These rules ensure content adapts when users adjust text spacing */
-
+/**
+ * Global Accessibility Styles
+ *
+ * These styles ensure WCAG 2.1 AA compliance for all components.
+ * Required for German accessibility requirements (BITV 2.0).
+ */
+
+/* =====================================================
+   FOCUS INDICATORS
+   WCAG 2.4.7: Focus Visible (Level AA)
+   ===================================================== */
+
+/* Universal focus-visible style for all interactive elements */
+.wl-button:focus-visible,
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex="0"]:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* High contrast focus for dark backgrounds */
+.wl-button.v-btn--variant-flat:focus-visible {
+  outline-color: white;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+/* Checkbox focus indicator */
+.input-checkbox:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* Button focus styles */
+.wl-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.wl-button.v-btn--variant-outlined:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* Input focus styles */
+.v-text-field input:focus-visible,
+.v-textarea textarea:focus-visible {
+  outline: none; /* Vuetify handles this via border */
+}
+
+.v-text-field:focus-within {
+  border-color: var(--Dental-Blue-0, #172774) !important;
+}
+
+/* Select/Combobox focus */
+.wl-select .v-field:focus-within {
+  border-color: var(--Dental-Blue-0, #172774) !important;
+}
+
+/* =====================================================
+   REDUCED MOTION
+   WCAG 2.3.3: Animation from Interactions (Level AAA)
+   ===================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* =====================================================
+   HIGH CONTRAST MODE
+   Windows High Contrast Mode Support
+   ===================================================== */
+
+@media (forced-colors: active) {
+  .wl-button {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox:checked::before {
+    background-color: currentColor;
+  }
+}
+
+/* =====================================================
+   DISABLED STATES
+   Ensure disabled elements maintain contrast
+   WCAG 1.4.3: Contrast (Minimum) - Note: Disabled elements are exempt
+   but we still aim for visibility
+   ===================================================== */
+
+.wl-button:disabled,
+.wl-button[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.input-checkbox:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* =====================================================
+   SKIP LINKS
+   WCAG 2.4.1: Bypass Blocks (Level A)
+   ===================================================== */
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--Dental-Blue-0, #172774);
+  color: white;
+  padding: 8px 16px;
+  z-index: 10000;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* =====================================================
+   SCREEN READER ONLY
+   Visually hidden but accessible to screen readers
+   ===================================================== */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* =====================================================
+   ICON BUTTONS
+   Ensure icon-only buttons are accessible
+   ===================================================== */
+
+.icon-button {
+  position: relative;
+}
+
+/* Show in development environments */
+body.dev-mode .icon-button:not([aria-label]):not([aria-labelledby])::after {
+  content: "Warning: Missing accessible name";
+  position: absolute;
+  background: red;
+  color: white;
+  font-size: 10px;
+  padding: 2px;
+  display: block;
+}
+
+/* =====================================================
+   LOADING STATES
+   WCAG 4.1.3: Status Messages (Level AA)
+   ===================================================== */
+
+.loading-indicator {
+  /* Announce loading state to screen readers */
+}
+
+[aria-busy="true"] {
+  cursor: wait;
+}
+
+/* =====================================================
+   ERROR STATES
+   Ensure error messages are visible and announced
+   ===================================================== */
+
+.error-message {
+  color: var(--Error-Red-0, #d32f2f);
+  font-weight: 500;
+}
+
+[aria-invalid="true"] {
+  border-color: var(--Error-Red-0, #d32f2f) !important;
+}
+
+/* =====================================================
+   MINIMUM TOUCH TARGET SIZE
+   WCAG 2.5.5: Target Size (Level AAA) - 44x44px minimum
+   ===================================================== */
+
+.touch-target-min {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+/* =====================================================
+   TEXT SPACING
+   WCAG 1.4.12: Text Spacing (Level AA)
+   Content should support user adjustments
+   ===================================================== */
+
+/* These rules ensure content adapts when users adjust text spacing */
+

package/src/components/index.ts

@@ -1,29 +1,29 @@
-// Components index file
-
-export { default as AccordionItem } from './Accordion/AccordionItem.vue';
-export { default as AccordionGroup } from './Accordion/AccordionGroup.vue';
-export { default as Audio } from './Audio/Audio.vue';
-export { default as Button } from './Button/Button.vue';
-export { default as Checkbox } from './CheckBox/Checkbox.vue';
-export { default as DateInput } from './DateInput/DateInput.vue';
-export { default as Dialog } from './Dialog/Dialog.vue';
-export { default as IconBulletList } from './IconBullet/IconBulletList.vue';
-export { default as IconBullet } from './IconBullet/IconBullet.vue';
-export { default as Input } from './Input/Input.vue';
-export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
-export { default as Select } from './Select/Select.vue';
-export { default as TickBox } from './TickBox/TickBox.vue';
-export { default as TextArea } from './TextArea/TextArea.vue';
-export { default as OtpInput } from './OtpInput/OtpInput.vue';
-export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
-export { default as EditField } from './EditField/EditField.vue';
-export { default as Modal } from './Modal/Modal.vue';
-export { default as AppointmentCard } from './Appointment/Card/Card.vue';
-export { default as AdvanceAppointmentIcons } from './Icons/AdvanceAppointments.vue';
-export { default as Loader } from './Loader/Loader.vue';
-export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';
-export { default as ErrorPage } from './ErrorPage/ErrorPage.vue';
-export { default as MaintenanceBanner } from './MaintenanceBanner/MaintenanceBanner.vue';
-export { default as StagingBanner } from './StagingBanner/StagingBanner.vue';
-export { default as Logo } from './Icons/Logo.vue';
-export { default as MiniLogo } from './Icons/MiniLogo.vue';
+// Components index file
+
+export { default as AccordionItem } from './Accordion/AccordionItem.vue';
+export { default as AccordionGroup } from './Accordion/AccordionGroup.vue';
+export { default as Audio } from './Audio/Audio.vue';
+export { default as Button } from './Button/Button.vue';
+export { default as Checkbox } from './CheckBox/Checkbox.vue';
+export { default as DateInput } from './DateInput/DateInput.vue';
+export { default as Dialog } from './Dialog/Dialog.vue';
+export { default as IconBulletList } from './IconBullet/IconBulletList.vue';
+export { default as IconBullet } from './IconBullet/IconBullet.vue';
+export { default as Input } from './Input/Input.vue';
+export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
+export { default as Select } from './Select/Select.vue';
+export { default as TickBox } from './TickBox/TickBox.vue';
+export { default as TextArea } from './TextArea/TextArea.vue';
+export { default as OtpInput } from './OtpInput/OtpInput.vue';
+export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
+export { default as EditField } from './EditField/EditField.vue';
+export { default as Modal } from './Modal/Modal.vue';
+export { default as AppointmentCard } from './Appointment/Card/Card.vue';
+export { default as AdvanceAppointmentIcons } from './Icons/AdvanceAppointments.vue';
+export { default as Loader } from './Loader/Loader.vue';
+export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';
+export { default as ErrorPage } from './ErrorPage/ErrorPage.vue';
+export { default as MaintenanceBanner } from './MaintenanceBanner/MaintenanceBanner.vue';
+export { default as StagingBanner } from './StagingBanner/StagingBanner.vue';
+export { default as Logo } from './Icons/Logo.vue';
+export { default as MiniLogo } from './Icons/MiniLogo.vue';

package/src/constants/iconEnums.ts

@@ -1,4 +1,4 @@
-export enum IconEnum {
-    CALENDAR = 'calendar',
-    PLAY = 'play',
+export enum IconEnum {
+    CALENDAR = 'calendar',
+    PLAY = 'play',
 }

package/src/i18n/i18n.ts

@@ -1,16 +1,16 @@
-import { createI18n } from 'vue-i18n';
-import enMessages from './locales/en.json';
-import deMessages from './locales/de.json';
-
-const libraryMessages = {
-  en: enMessages,
-  de: deMessages,
-};
-
-export const createInternalI18n = () => {
-  return createI18n({
-    locale: 'de',
-    fallbackLocale: 'de',
-    messages: libraryMessages,
-  });
+import { createI18n } from 'vue-i18n';
+import enMessages from './locales/en.json';
+import deMessages from './locales/de.json';
+
+const libraryMessages = {
+  en: enMessages,
+  de: deMessages,
+};
+
+export const createInternalI18n = () => {
+  return createI18n({
+    locale: 'de',
+    fallbackLocale: 'de',
+    messages: libraryMessages,
+  });
 };

package/src/i18n/locales/de.json

@@ -1,31 +1,31 @@
-{
-  "wl": {
-    "date_input": {
-      "placeholder": "TT.MM.JJJJ",
-      "invalid_date": "Bitte ein gültiges Datum eingeben",
-      "min_date_error": "Das Datum darf nicht vor {date} liegen",
-      "max_date_error": "Das Datum darf nicht nach {date} liegen"
-    },
-    "input": {
-      "placeholder": "Geben Sie Ihren Text ein"
-    },
-    "otp_input": {
-      "enter_sms_code": "Bitte den per SMS gesendeten Code eingeben",
-      "code_was_sent": "Code an Nummer {phoneNumber} gesendet",
-      "confirm": "Bestätigen",
-      "resend": "Code erneut senden"
-    },
-    "appointment_card": {
-      "uhr": "Uhr",
-      "unknown_patient": "Unbekannter Patient",
-      "confirm": "Termin bestätigen",
-      "cancel": "Termin stornieren",
-      "reschedule": "Termin verschieben",
-      "reschedule_after_cancellation": "Diesen Termin nochmal buchen",
-      "cancelled": "Termin storniert",
-      "fill_form_title": "Anamnesebogen benötigt!",
-      "fill_form_description": "Bitte füllen Sie diesen vor ihren Termin aus",
-      "anamnese_form": "Anamnesebogen"
-    }
-  }
+{
+  "wl": {
+    "date_input": {
+      "placeholder": "TT.MM.JJJJ",
+      "invalid_date": "Bitte ein gültiges Datum eingeben",
+      "min_date_error": "Das Datum darf nicht vor {date} liegen",
+      "max_date_error": "Das Datum darf nicht nach {date} liegen"
+    },
+    "input": {
+      "placeholder": "Geben Sie Ihren Text ein"
+    },
+    "otp_input": {
+      "enter_sms_code": "Bitte den per SMS gesendeten Code eingeben",
+      "code_was_sent": "Code an Nummer {phoneNumber} gesendet",
+      "confirm": "Bestätigen",
+      "resend": "Code erneut senden"
+    },
+    "appointment_card": {
+      "uhr": "Uhr",
+      "unknown_patient": "Unbekannter Patient",
+      "confirm": "Termin bestätigen",
+      "cancel": "Termin stornieren",
+      "reschedule": "Termin verschieben",
+      "reschedule_after_cancellation": "Diesen Termin nochmal buchen",
+      "cancelled": "Termin storniert",
+      "fill_form_title": "Anamnesebogen benötigt!",
+      "fill_form_description": "Bitte füllen Sie diesen vor ihren Termin aus",
+      "anamnese_form": "Anamnesebogen"
+    }
+  }
 }

package/src/i18n/locales/en.json

@@ -1,31 +1,31 @@
-{
-  "wl": {
-    "date_input": {
-      "placeholder": "DD.MM.YYYY",
-      "invalid_date": "Please enter a valid date",
-      "min_date_error": "The date must not be before {date}",
-      "max_date_error": "The date must not be after {date}"
-    },
-    "input": {
-      "placeholder": "Enter your text"
-    },
-    "otp_input": {
-      "enter_sms_code": "Please enter the code sent via SMS",
-      "code_was_sent": "Code sent to number {phoneNumber}",
-      "confirm": "Confirm",
-      "resend": "Resend code"
-    },
-    "appointment_card": {
-      "uhr": "o'clock",
-      "unknown_patient": "Unknown patient",
-      "confirm": "Confirm appointment",
-      "cancel": "Cancel appointment",
-      "reschedule": "Reschedule appointment",
-      "reschedule_after_cancellation": "Book this appointment again",
-      "cancelled": "Appointment cancelled",
-      "fill_form_title": "Medical history form required!",
-      "fill_form_description": "Please fill this out before your appointment",
-      "anamnese_form": "Medical history form"
-    }
-  }
+{
+  "wl": {
+    "date_input": {
+      "placeholder": "DD.MM.YYYY",
+      "invalid_date": "Please enter a valid date",
+      "min_date_error": "The date must not be before {date}",
+      "max_date_error": "The date must not be after {date}"
+    },
+    "input": {
+      "placeholder": "Enter your text"
+    },
+    "otp_input": {
+      "enter_sms_code": "Please enter the code sent via SMS",
+      "code_was_sent": "Code sent to number {phoneNumber}",
+      "confirm": "Confirm",
+      "resend": "Resend code"
+    },
+    "appointment_card": {
+      "uhr": "o'clock",
+      "unknown_patient": "Unknown patient",
+      "confirm": "Confirm appointment",
+      "cancel": "Cancel appointment",
+      "reschedule": "Reschedule appointment",
+      "reschedule_after_cancellation": "Book this appointment again",
+      "cancelled": "Appointment cancelled",
+      "fill_form_title": "Medical history form required!",
+      "fill_form_description": "Please fill this out before your appointment",
+      "anamnese_form": "Medical history form"
+    }
+  }
 }