@zap-wunschlachen/wl-shared-components 1.0.25 → 1.0.26

package/src/components/Background/WunschlachenBackground.vue

@@ -0,0 +1,11 @@
+<template>
+    <svg v-if="siteColors['domain'] === 'domain-dental'" role="presentation" aria-hidden="true"  width="1243" height="1024" viewBox="0 0 1243 1024" fill="none" xmlns="http://www.w3.org/2000/svg">    <g opacity="0.6">
+        <path d="M209.5 -526C779.369 -526 1243 -62.3689 1243 507.5C1243 1077.37 779.369 1541 209.5 1541C-360.369 1541 -824 1077.37 -824 507.5C-824 -62.3689 -360.369 -526 209.5 -526ZM209.5 -372.856C-275.921 -372.856 -670.769 21.9911 -670.77 507.412C-670.77 992.833 -275.921 1387.68 209.5 1387.68C694.921 1387.68 1089.77 992.833 1089.77 507.412C1089.77 21.9911 694.921 -372.856 209.5 -372.856ZM749.803 745.638C637.533 936.323 430.494 1054.81 209.542 1054.81C-11.4101 1054.81 -218.361 936.323 -330.719 745.638L-198.673 667.841C-113.792 811.971 42.6685 901.494 209.542 901.494C376.416 901.494 532.876 811.971 617.757 667.841L749.803 745.638ZM206.036 120.541C238.326 120.541 264.053 129.642 285.142 147.669C306.23 165.784 321.719 193.35 331.607 230.279L400.212 497.975L481.854 135.33H625.189L532.258 531.841C526.307 556.869 516.42 577.434 502.594 593.623C488.768 609.813 472.404 621.802 453.678 629.678C434.864 637.554 416.226 641.579 397.85 641.579C368.885 641.579 343.333 632.478 321.281 614.363C299.23 596.249 283.567 569.033 274.291 532.804L206.911 261.434L138.832 532.804C129.644 569.033 114.155 596.249 92.3662 614.363C70.6649 632.478 44.9386 641.579 15.2744 641.579C-3.18929 641.579 -21.6535 637.554 -40.1172 629.678C-58.5809 621.802 -74.6819 609.813 -88.5078 593.623C-102.334 577.434 -112.221 556.869 -118.172 531.841L-206.203 135.33H-64.7939L13.9209 497.614L82.4785 228.267C91.7541 192.037 106.543 164.996 126.932 147.231C147.408 129.38 173.747 120.541 206.036 120.541Z" :fill="siteColors['bg_logo_fill_color']"/>
+    </g>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+import { siteColors } from '@/utils';
+</script>

package/src/components/Button/Button.vue

@@ -1,119 +1,119 @@
-<template>
-  <v-btn
-    :color="color"
-    :disabled="disabled"
-    :prepend-icon="prependIcon"
-    :append-icon="appendIcon"
-    :loading="loading"
-    rounded="lg"
-    :density="density"
-    class="text-none wl-button"
-    :variant="variant"
-    :size="size"
-    :readonly="readonly"
-    data-testid="root"
-  >
-    {{ label }}
-  </v-btn>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-
-const props = defineProps({
-  /**
-   * The color of the button.
-   * Default is '#172774' (a dark blue color).
-   */
-  color: {
-    type: String,
-    default: '#172774',
-  },
-  /**
-   * Icon to display before the button label.
-   * Accepts the name of an icon (String).
-   */
-  prependIcon: {
-    type: String,
-  },
-  /**
-   * Icon to display after the button label.
-   * Can be any valid icon name or value (type not specified for flexibility).
-   */
-  appendIcon: {},
-
-  /**
-   * Boolean to set the loading state of the button.
-   * When true, it shows a loading spinner.
-   * Default is false.
-   */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Defines the density of the button.
-   * Accepts 'default', 'comfortable', or other Vuetify density options.
-   * Default is 'default'.
-   */
-  density: {
-    type: String,
-    default: 'default',
-  },
-
-  /**
-   * The visual style of the button.
-   * Accepts 'flat', 'outlined', 'contained', etc.
-   * Default is 'flat'.
-   */
-  variant: {
-    type: String,
-    default: 'flat',
-  },
-
-  /**
-   * Size of the button.
-   * Accepts 'small', 'medium', 'large', or 'default'.
-   * Default is 'default'.
-   */
-  size: {
-    type: String,
-    default: 'default',
-  },
-
-  /**
-   * The text label to display inside the button.
-   * Default is 'Button'.
-   */
-  label: {
-    type: String,
-    default: 'Button',
-  },
-
-  /**
-   * Boolean to disable the button.
-   * When true, the button is disabled and not clickable.
-   * Default is false.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Boolean to set the button to read-only state.
-   * When true, the button displays the readonly attribute.
-   * Default is false.
-   */
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
-<style>
-.wl-button .v-btn--variant-outlined {
-  border-width: 1.5px;
-}
-</style>
+<template>
+  <v-btn
+    :color="color"
+    :disabled="disabled"
+    :prepend-icon="prependIcon"
+    :append-icon="appendIcon"
+    :loading="loading"
+    rounded="lg"
+    :density="density"
+    class="text-none wl-button"
+    :variant="variant"
+    :size="size"
+    :readonly="readonly"
+    data-testid="root"
+  >
+    {{ label }}
+  </v-btn>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  /**
+   * The color of the button.
+   * Default is '#172774' (a dark blue color).
+   */
+  color: {
+    type: String,
+    default: '#172774',
+  },
+  /**
+   * Icon to display before the button label.
+   * Accepts the name of an icon (String).
+   */
+  prependIcon: {
+    type: String,
+  },
+  /**
+   * Icon to display after the button label.
+   * Can be any valid icon name or value (type not specified for flexibility).
+   */
+  appendIcon: {},
+
+  /**
+   * Boolean to set the loading state of the button.
+   * When true, it shows a loading spinner.
+   * Default is false.
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Defines the density of the button.
+   * Accepts 'default', 'comfortable', or other Vuetify density options.
+   * Default is 'default'.
+   */
+  density: {
+    type: String,
+    default: 'default',
+  },
+
+  /**
+   * The visual style of the button.
+   * Accepts 'flat', 'outlined', 'contained', etc.
+   * Default is 'flat'.
+   */
+  variant: {
+    type: String,
+    default: 'flat',
+  },
+
+  /**
+   * Size of the button.
+   * Accepts 'small', 'medium', 'large', or 'default'.
+   * Default is 'default'.
+   */
+  size: {
+    type: String,
+    default: 'default',
+  },
+
+  /**
+   * The text label to display inside the button.
+   * Default is 'Button'.
+   */
+  label: {
+    type: String,
+    default: 'Button',
+  },
+
+  /**
+   * Boolean to disable the button.
+   * When true, the button is disabled and not clickable.
+   * Default is false.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Boolean to set the button to read-only state.
+   * When true, the button displays the readonly attribute.
+   * Default is false.
+   */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style>
+.wl-button .v-btn--variant-outlined {
+  border-width: 1.5px;
+}
+</style>

package/src/components/CheckBox/CheckBox.css

@@ -1,185 +1,185 @@
-/* Normal State */
-
-/* Label */
-.label {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 0.875rem;
-  line-height: 15.6px;
-  letter-spacing: -0.13px;
-  color: var(--Dental-Blue-0);
-  cursor: pointer;
-}
-
-/* Checkbox Container */
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Checkbox (Normal) */
-.input-checkbox {
-  appearance: none;
-  background-color: white;
-  margin: 0;
-  padding: 0;
-  /* Width and height will be set by density classes */
-  border: 1px solid;
-  border-radius: 4px;
-  display: grid;
-  place-content: center;
-  transform: translateY(-0.075em);
-  border-color: var(--Soft-Concrete-2);
-  cursor: pointer;
-}
-
-.input-checkbox:hover {
-  border-width: 2px;
-  background-color: var(--Dental-Light-Blue--2);
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox::before {
-  content: '';
-  /* Width and height will be set by density classes */
-  transform: scale(0);
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--Dental-Blue-0);
-  background-color: var(--Dental-Blue-0);
-  border-radius: 2px;
-}
-
-.input-checkbox:checked::before {
-  transform: scale(1);
-  background-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox:checked {
-  border-width: 2px;
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox:hover::before {
-  border-color: var(--Dental-Blue-0);
-}
-
-/* Density Levels */
-
-/* Comfortable */
-.density-comfortable.input-checkbox {
-  width: 32px;
-  height: 32px;
-}
-
-.density-comfortable.input-checkbox::before {
-  width: 20px;
-  height: 20px;
-}
-
-/* Default */
-.density-default.input-checkbox {
-  width: 28px;
-  height: 28px;
-}
-
-.density-default.input-checkbox::before {
-  width: 16px;
-  height: 16px;
-}
-
-/* Compact */
-.density-compact.input-checkbox {
-  width: 24px;
-  height: 24px;
-}
-
-.density-compact.input-checkbox::before {
-  width: 12px;
-  height: 12px;
-}
-
-/* Success State */
-
-/* Success Label */
-.label-success {
-  color: var(--Success-Green-1);
-}
-
-/* Success Checkbox */
-.input-success {
-  border-color: var(--Success-Green-0);
-  color: var(--Success-Green-0);
-}
-
-.input-success:hover {
-  border-color: var(--Success-Green-0);
-  background-color: var(--Success-Green--1);
-}
-
-.input-success.input-checkbox:checked {
-  border-color: var(--Success-Green-0);
-}
-
-.input-success.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--Success-Green-0);
-  background-color: var(--Success-Green-0);
-}
-
-/* Error State */
-
-/* Error Label */
-.label-error {
-  color: var(--Error-Red-0);
-}
-
-/* Error Checkbox */
-.input-error {
-  border-color: var(--Error-Red-0);
-  color: var(--Error-Red-0);
-}
-
-.input-error:hover {
-  border-color: var(--Error-Red-0);
-  background-color: var(--Light-Gum--3);
-}
-
-.input-error.input-checkbox:checked {
-  border-color: var(--Error-Red-0);
-}
-
-.input-error.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--Error-Red-0);
-  background-color: var(--Error-Red-0);
-}
-
-/* Disabled State */
-
-/* Disabled Label */
-.label-disabled {
-  color: var(--Soft-Concrete-2);
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Disabled Checkbox */
-.input-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.input-checkbox:disabled::before {
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-disabled.input-checkbox:hover {
-  border-width: 0.5px;
-  background-color: white;
-  border-color: var(--Soft-Concrete-2);
-}
-
-/* Label Text */
-.label-text {
-  font-weight: 300;
-}
+/* Normal State */
+
+/* Label */
+.label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.875rem;
+  line-height: 15.6px;
+  letter-spacing: -0.13px;
+  color: var(--Dental-Blue-0);
+  cursor: pointer;
+}
+
+/* Checkbox Container */
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Checkbox (Normal) */
+.input-checkbox {
+  appearance: none;
+  background-color: white;
+  margin: 0;
+  padding: 0;
+  /* Width and height will be set by density classes */
+  border: 1px solid;
+  border-radius: 4px;
+  display: grid;
+  place-content: center;
+  transform: translateY(-0.075em);
+  border-color: var(--Soft-Concrete-2);
+  cursor: pointer;
+}
+
+.input-checkbox:hover {
+  border-width: 2px;
+  background-color: var(--Dental-Light-Blue--2);
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox::before {
+  content: '';
+  /* Width and height will be set by density classes */
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--Dental-Blue-0);
+  background-color: var(--Dental-Blue-0);
+  border-radius: 2px;
+}
+
+.input-checkbox:checked::before {
+  transform: scale(1);
+  background-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox:checked {
+  border-width: 2px;
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox:hover::before {
+  border-color: var(--Dental-Blue-0);
+}
+
+/* Density Levels */
+
+/* Comfortable */
+.density-comfortable.input-checkbox {
+  width: 32px;
+  height: 32px;
+}
+
+.density-comfortable.input-checkbox::before {
+  width: 20px;
+  height: 20px;
+}
+
+/* Default */
+.density-default.input-checkbox {
+  width: 28px;
+  height: 28px;
+}
+
+.density-default.input-checkbox::before {
+  width: 16px;
+  height: 16px;
+}
+
+/* Compact */
+.density-compact.input-checkbox {
+  width: 24px;
+  height: 24px;
+}
+
+.density-compact.input-checkbox::before {
+  width: 12px;
+  height: 12px;
+}
+
+/* Success State */
+
+/* Success Label */
+.label-success {
+  color: var(--Success-Green-1);
+}
+
+/* Success Checkbox */
+.input-success {
+  border-color: var(--Success-Green-0);
+  color: var(--Success-Green-0);
+}
+
+.input-success:hover {
+  border-color: var(--Success-Green-0);
+  background-color: var(--Success-Green--1);
+}
+
+.input-success.input-checkbox:checked {
+  border-color: var(--Success-Green-0);
+}
+
+.input-success.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--Success-Green-0);
+  background-color: var(--Success-Green-0);
+}
+
+/* Error State */
+
+/* Error Label */
+.label-error {
+  color: var(--Error-Red-0);
+}
+
+/* Error Checkbox */
+.input-error {
+  border-color: var(--Error-Red-0);
+  color: var(--Error-Red-0);
+}
+
+.input-error:hover {
+  border-color: var(--Error-Red-0);
+  background-color: var(--Light-Gum--3);
+}
+
+.input-error.input-checkbox:checked {
+  border-color: var(--Error-Red-0);
+}
+
+.input-error.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--Error-Red-0);
+  background-color: var(--Error-Red-0);
+}
+
+/* Disabled State */
+
+/* Disabled Label */
+.label-disabled {
+  color: var(--Soft-Concrete-2);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Disabled Checkbox */
+.input-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input-checkbox:disabled::before {
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-disabled.input-checkbox:hover {
+  border-width: 0.5px;
+  background-color: white;
+  border-color: var(--Soft-Concrete-2);
+}
+
+/* Label Text */
+.label-text {
+  font-weight: 300;
+}