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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (246) hide show
  1. package/.github/workflows/playwright.yml +205 -205
  2. package/.github/workflows/static.yml +61 -61
  3. package/.github/workflows/update-snapshots.yml +37 -37
  4. package/.prettierrc +5 -5
  5. package/.storybook/main.ts +18 -18
  6. package/.storybook/preview.ts +37 -37
  7. package/.storybook/storyWrapper.vue +18 -18
  8. package/.storybook/withVuetifyTheme.decorator.ts +21 -21
  9. package/App.vue +34 -176
  10. package/README.md +56 -56
  11. package/heroicons.ts +75 -75
  12. package/index.html +19 -19
  13. package/package.json +67 -67
  14. package/playwright.config.ts +48 -48
  15. package/public/background.svg +60 -60
  16. package/public/style.css +187 -187
  17. package/public/technologies.svg +22 -22
  18. package/src/assets/css/base.css +235 -235
  19. package/src/assets/css/variables.css +107 -96
  20. package/src/components/Accordion/Accordion.css +59 -59
  21. package/src/components/Accordion/AccordionGroup.vue +51 -51
  22. package/src/components/Accordion/AccordionItem.vue +66 -66
  23. package/src/components/Appointment/Card/Actions.css +54 -54
  24. package/src/components/Appointment/Card/Actions.vue +99 -99
  25. package/src/components/Appointment/Card/AnamneseNotification.css +15 -15
  26. package/src/components/Appointment/Card/AnamneseNotification.vue +23 -23
  27. package/src/components/Appointment/Card/Card.css +80 -80
  28. package/src/components/Appointment/Card/Card.vue +93 -93
  29. package/src/components/Appointment/Card/Details.css +50 -50
  30. package/src/components/Appointment/Card/Details.vue +43 -43
  31. package/src/components/Audio/Audio.vue +187 -187
  32. package/src/components/Audio/Waveform.vue +117 -117
  33. package/src/components/Background/Background.css +39 -0
  34. package/src/components/Background/Background.vue +19 -0
  35. package/src/components/Background/WhiteCocoonBackground.vue +9 -0
  36. package/src/components/Background/WunschlachenBackground.vue +11 -0
  37. package/src/components/Button/Button.vue +119 -119
  38. package/src/components/CheckBox/CheckBox.css +185 -185
  39. package/src/components/CheckBox/Checkbox.vue +130 -130
  40. package/src/components/DateInput/DateInput.css +2 -2
  41. package/src/components/DateInput/DateInput.vue +262 -262
  42. package/src/components/Dialog/Dialog.css +6 -6
  43. package/src/components/Dialog/Dialog.vue +29 -29
  44. package/src/components/EditField/EditField.css +19 -19
  45. package/src/components/EditField/EditField.vue +202 -202
  46. package/src/components/ErrorPage/ErrorPage.css +124 -0
  47. package/src/components/ErrorPage/ErrorPage.vue +45 -0
  48. package/src/components/ErrorPage/ErrorPageLogo.vue +26 -0
  49. package/src/components/IconBullet/IconBullet.vue +86 -86
  50. package/src/components/IconBullet/IconBulletList.vue +41 -41
  51. package/src/components/Icons/AdvanceAppointments.vue +153 -153
  52. package/src/components/Icons/Audio/CloudFailed.vue +20 -20
  53. package/src/components/Icons/Audio/CloudSaved.vue +21 -21
  54. package/src/components/Icons/Audio/Delete.vue +15 -15
  55. package/src/components/Icons/Audio/Pause.vue +18 -18
  56. package/src/components/Icons/Audio/Play.vue +15 -15
  57. package/src/components/Icons/CalendarNotification.vue +126 -126
  58. package/src/components/Icons/Chair.vue +32 -32
  59. package/src/components/Icons/ChairNotification.vue +35 -35
  60. package/src/components/Icons/Circle.vue +66 -66
  61. package/src/components/Icons/FavIcon.vue +22 -22
  62. package/src/components/Icons/FilledCircle.vue +11 -11
  63. package/src/components/Icons/Group3.vue +46 -46
  64. package/src/components/Icons/Logo.vue +108 -0
  65. package/src/components/Icons/RingNotification.vue +54 -54
  66. package/src/components/Icons/SolidArrowRight.vue +14 -14
  67. package/src/components/Icons/calendar.vue +17 -17
  68. package/src/components/Icons/checkbox.vue +19 -19
  69. package/src/components/Icons/outlineChecked.vue +27 -27
  70. package/src/components/Icons/play.vue +5 -5
  71. package/src/components/Input/Input.css +187 -187
  72. package/src/components/Input/Input.vue +247 -247
  73. package/src/components/Laboratory/AppointmentCard/AppointmentCard.css +7 -7
  74. package/src/components/Laboratory/AppointmentCard/AppointmentCard.vue +116 -116
  75. package/src/components/Laboratory/ChatBoxImage/ChatBoxImage.vue +81 -81
  76. package/src/components/Laboratory/ChatMessage/ChatMessage.vue +113 -113
  77. package/src/components/Laboratory/ChatMessage/ChatMessageBadge.css +4 -4
  78. package/src/components/Laboratory/ChatMessage/ChatMessageBadge.vue +99 -99
  79. package/src/components/Laboratory/ChatNotification/ChatNotification.vue +130 -130
  80. package/src/components/Laboratory/DocumentCard/DocumentCard.css +3 -3
  81. package/src/components/Laboratory/DocumentCard/DocumentCard.vue +50 -50
  82. package/src/components/Laboratory/DocumentCard/DocumentCardItem.vue +53 -53
  83. package/src/components/Laboratory/InfoCard/InfoCard.vue +162 -162
  84. package/src/components/Laboratory/MainColumnsBar/MainColumnsBar.vue +102 -102
  85. package/src/components/Laboratory/ProgressCircle/ProgressCircle.vue +152 -152
  86. package/src/components/Laboratory/ProgressLinear/ProgressLinear.css +33 -33
  87. package/src/components/Laboratory/ProgressLinear/ProgressLinear.vue +75 -75
  88. package/src/components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue +92 -92
  89. package/src/components/Laboratory/StatusNotification/StatusNotification.vue +49 -49
  90. package/src/components/Laboratory/TagLabel/TagLabel.vue +126 -126
  91. package/src/components/Laboratory/TagLabelGroup/TagLabelGroup.vue +97 -97
  92. package/src/components/Laboratory/TicketCard/TicketCard.css +3 -3
  93. package/src/components/Laboratory/TicketCard/TicketCard.vue +143 -143
  94. package/src/components/Laboratory/TimeLine/TimeLineEvent.css +18 -18
  95. package/src/components/Laboratory/TimeLine/TimeLineEvent.vue +119 -119
  96. package/src/components/Laboratory/TimeLine/Timeline.css +4 -4
  97. package/src/components/Laboratory/TimeLine/Timeline.vue +30 -30
  98. package/src/components/Loader/Loader.css +51 -51
  99. package/src/components/MaintenanceBanner/MaintenanceBanner.css +289 -0
  100. package/src/components/MaintenanceBanner/MaintenanceBanner.vue +127 -0
  101. package/src/components/MaintenanceBanner/MaintenanceIllustration.vue +54 -0
  102. package/src/components/Modal/Modal.css +5 -5
  103. package/src/components/Modal/Modal.vue +22 -22
  104. package/src/components/NotificationBubble/NotificationBubble.css +4 -4
  105. package/src/components/NotificationBubble/NotificationBubble.vue +90 -90
  106. package/src/components/OtpInput/OtpInput.css +39 -39
  107. package/src/components/OtpInput/OtpInput.vue +143 -143
  108. package/src/components/PhoneInput/PhoneInput.css +31 -31
  109. package/src/components/PhoneInput/PhoneInput.vue +113 -113
  110. package/src/components/Select/Select.css +150 -150
  111. package/src/components/Select/Select.vue +315 -315
  112. package/src/components/TextArea/TextArea.css +3 -3
  113. package/src/components/TextArea/TextArea.vue +126 -126
  114. package/src/components/TickBox/TickBox.css +49 -49
  115. package/src/components/TickBox/TickBox.vue +126 -126
  116. package/src/components/index.ts +26 -24
  117. package/src/constants/iconEnums.ts +3 -3
  118. package/src/i18n/i18n.ts +15 -15
  119. package/src/i18n/locales/de.json +30 -30
  120. package/src/i18n/locales/en.json +30 -30
  121. package/src/index.ts +34 -34
  122. package/src/main.ts +11 -11
  123. package/src/plugins/vuetify.ts +139 -131
  124. package/src/shims-vue.d.ts +10 -10
  125. package/src/stories/Accordion.stories.ts +650 -650
  126. package/src/stories/Audio.stories.ts +28 -28
  127. package/src/stories/Button.stories.ts +263 -263
  128. package/src/stories/CheckBox.stories.ts +348 -348
  129. package/src/stories/DateInput.stories.ts +53 -53
  130. package/src/stories/Dialog.stories.ts +147 -147
  131. package/src/stories/EditField.stories.ts +78 -78
  132. package/src/stories/IconBullet/IconBullet.stories.ts +201 -201
  133. package/src/stories/IconBullet/IconBulletList.stories.ts +275 -275
  134. package/src/stories/Input.stories.ts +351 -351
  135. package/src/stories/Laboratory/Cards/AppointmentCard/AppointmentCard.stories.ts +260 -260
  136. package/src/stories/Laboratory/Cards/DocumentCard/DocumentCard.stories.ts +176 -176
  137. package/src/stories/Laboratory/Cards/DocumentCard/DocumentCardItem.stories.ts +119 -119
  138. package/src/stories/Laboratory/Cards/InfoCard/InfoCard.stories.ts +320 -320
  139. package/src/stories/Laboratory/Cards/TicketCard/TicketCard.stories.ts +335 -335
  140. package/src/stories/Laboratory/Chat/ChatBoxImage.stories.ts +82 -82
  141. package/src/stories/Laboratory/Chat/ChatMessage.stories.ts +198 -198
  142. package/src/stories/Laboratory/Chat/ChatMessageBadge.stories.ts +204 -204
  143. package/src/stories/Laboratory/Chat/ChatNotification.stories.ts +144 -144
  144. package/src/stories/Laboratory/Chat/ProgressLinear.stories.ts +186 -186
  145. package/src/stories/Laboratory/Chat/StatusNotification.stories.ts +111 -111
  146. package/src/stories/Laboratory/MainColumnsBar.stories.ts +48 -48
  147. package/src/stories/Laboratory/ProgressCircle.stories.ts +261 -261
  148. package/src/stories/Laboratory/SelectionColumnBar.stories.ts +234 -234
  149. package/src/stories/Laboratory/TagLabel.stories.ts +418 -418
  150. package/src/stories/Laboratory/TagLabelGroup.stories.ts +234 -234
  151. package/src/stories/Laboratory/Timeline.stories.ts +403 -403
  152. package/src/stories/NotificationBubble.stories.ts +194 -194
  153. package/src/stories/OtpInput.stories.ts +100 -100
  154. package/src/stories/PhoneInput.stories.ts +52 -52
  155. package/src/stories/Select.stories.ts +419 -419
  156. package/src/stories/TextArea.stories.ts +112 -112
  157. package/src/stories/TickBox.stories.ts +294 -294
  158. package/src/stories/v-icon.stories.ts +91 -91
  159. package/src/utils/index.ts +106 -100
  160. package/src/vite-env.d.ts +1 -1
  161. package/tests/e2e/README.md +220 -220
  162. package/tests/e2e/accessibility.spec.ts +638 -638
  163. package/tests/e2e/accordion.spec.ts +42 -42
  164. package/tests/e2e/additional-components.spec.ts +437 -437
  165. package/tests/e2e/all-components.spec.ts +135 -135
  166. package/tests/e2e/appointment-card.spec.ts +816 -816
  167. package/tests/e2e/button-fixed.spec.ts +58 -58
  168. package/tests/e2e/button.spec.ts +76 -76
  169. package/tests/e2e/checkbox.spec.ts +50 -50
  170. package/tests/e2e/date-input.spec.ts +46 -46
  171. package/tests/e2e/debug.spec.ts +51 -51
  172. package/tests/e2e/dialog.spec.ts +58 -58
  173. package/tests/e2e/input.spec.ts +55 -55
  174. package/tests/e2e/laboratory-components.spec.ts +320 -320
  175. package/tests/e2e/otp-input.spec.ts +50 -50
  176. package/tests/e2e/select.spec.ts +52 -52
  177. package/tests/e2e/storybook-utils.ts +59 -59
  178. package/tests/e2e/test-basic.spec.ts +33 -33
  179. package/tests/e2e/visual-regression.spec.ts +350 -350
  180. package/tests/unit/components/Accordion/AccordionGroup.spec.ts.skip +342 -342
  181. package/tests/unit/components/Accordion/AccordionItem.spec.ts.skip +383 -383
  182. package/tests/unit/components/Appointment/Card/Actions.spec.ts +407 -407
  183. package/tests/unit/components/Appointment/Card/Card.spec.ts +485 -485
  184. package/tests/unit/components/Appointment/Card/Details.spec.ts +397 -397
  185. package/tests/unit/components/Audio/Audio.spec.ts +403 -403
  186. package/tests/unit/components/Audio/Waveform.spec.ts +483 -483
  187. package/tests/unit/components/Core/Button.spec.ts +336 -336
  188. package/tests/unit/components/Core/Checkbox.spec.ts +544 -544
  189. package/tests/unit/components/Core/DateInput.spec.ts +690 -690
  190. package/tests/unit/components/Core/Dialog.spec.ts +485 -485
  191. package/tests/unit/components/Core/EditField.spec.ts +782 -782
  192. package/tests/unit/components/Core/Input.spec.ts +512 -512
  193. package/tests/unit/components/Core/Modal.spec.ts +518 -518
  194. package/tests/unit/components/Core/NotificationBubble.spec.ts +606 -606
  195. package/tests/unit/components/Core/OtpInput.spec.ts +708 -708
  196. package/tests/unit/components/Core/PhoneInput.spec.ts +619 -619
  197. package/tests/unit/components/Core/Select.spec.ts +712 -712
  198. package/tests/unit/components/Core/TextArea.spec.ts +565 -565
  199. package/tests/unit/components/Core/TickBox.spec.ts +779 -779
  200. package/tests/unit/components/IconBullet/IconBullet.spec.ts +356 -356
  201. package/tests/unit/components/IconBullet/IconBulletList.spec.ts +371 -371
  202. package/tests/unit/components/Icons/Audio/CloudFailed.spec.ts +108 -108
  203. package/tests/unit/components/Icons/Audio/CloudSaved.spec.ts +149 -149
  204. package/tests/unit/components/Icons/Audio/Delete.spec.ts +158 -158
  205. package/tests/unit/components/Icons/Audio/Pause.spec.ts +208 -208
  206. package/tests/unit/components/Icons/Audio/Play.spec.ts +217 -217
  207. package/tests/unit/components/Icons/CalendarNotification.spec.ts +186 -186
  208. package/tests/unit/components/Icons/Chair.spec.ts +234 -234
  209. package/tests/unit/components/Icons/ChairNotification.spec.ts +311 -311
  210. package/tests/unit/components/Icons/Circle.spec.ts +255 -255
  211. package/tests/unit/components/Icons/FavIcon.spec.ts +251 -251
  212. package/tests/unit/components/Icons/FilledCircle.spec.ts +274 -274
  213. package/tests/unit/components/Icons/Group3.spec.ts +355 -355
  214. package/tests/unit/components/Icons/RingNotification.spec.ts +393 -393
  215. package/tests/unit/components/Icons/calendar.spec.ts +286 -286
  216. package/tests/unit/components/Icons/checkbox.spec.ts +315 -315
  217. package/tests/unit/components/Icons/outlineChecked.spec.ts +434 -434
  218. package/tests/unit/components/Icons/play.spec.ts +308 -308
  219. package/tests/unit/components/Laboratory/AppointmentCard.spec.ts +167 -167
  220. package/tests/unit/components/Laboratory/ChatBoxImage.spec.ts +179 -179
  221. package/tests/unit/components/Laboratory/ChatMessage.spec.ts +263 -263
  222. package/tests/unit/components/Laboratory/ChatMessageBadge.spec.ts +282 -282
  223. package/tests/unit/components/Laboratory/ChatNotification.spec.ts +256 -256
  224. package/tests/unit/components/Laboratory/DocumentCard.spec.ts +228 -228
  225. package/tests/unit/components/Laboratory/DocumentCardItem.spec.ts +236 -236
  226. package/tests/unit/components/Laboratory/InfoCard.spec.ts +308 -308
  227. package/tests/unit/components/Laboratory/MainColumnsBar.spec.ts +251 -251
  228. package/tests/unit/components/Laboratory/ProgressCircle.spec.ts +290 -290
  229. package/tests/unit/components/Laboratory/ProgressLinear.spec.ts +275 -275
  230. package/tests/unit/components/Laboratory/SelectionColumnBar.spec.ts +288 -288
  231. package/tests/unit/components/Laboratory/StatusNotification.spec.ts +296 -296
  232. package/tests/unit/components/Laboratory/TagLabel.spec.ts +353 -353
  233. package/tests/unit/components/Laboratory/TagLabelGroup.spec.ts +377 -377
  234. package/tests/unit/components/Laboratory/TicketCard.spec.ts +351 -351
  235. package/tests/unit/components/Laboratory/TimeLineEvent.spec.ts +381 -381
  236. package/tests/unit/components/Laboratory/Timeline.spec.ts +419 -419
  237. package/tests/unit/constants/iconEnums.spec.ts +39 -39
  238. package/tests/unit/i18n/i18n.spec.ts +88 -88
  239. package/tests/unit/plugins/vuetify.spec.ts +220 -220
  240. package/tests/unit/setup.ts +189 -189
  241. package/tests/unit/src/components/index.spec.ts.skip +192 -192
  242. package/tests/unit/src/index.spec.ts.skip +182 -182
  243. package/tests/unit/src/main.spec.ts +151 -151
  244. package/tsconfig.json +26 -26
  245. package/vite.config.ts +29 -29
  246. package/vitest.config.ts +83 -83
@@ -1,202 +1,202 @@
1
- <template>
2
- <div class="wl-edit-field" data-testid="root">
3
- <div class="title-container" tabIndex="-1">
4
- <v-icon v-if="props.icon !== ''" :icon="props.icon" size="16" class="mr-2" />
5
- <p>{{ props.title }}</p>
6
- </div>
7
-
8
- <div ref="inputWrapperRef" class="input-wrapper">
9
- <slot name="input" :is-input-focused="isInputFocused">
10
- <template v-if="props.type === 'select'">
11
- <Select
12
- v-bind="props.inputProps"
13
- reverse
14
- ref="inputElementRef"
15
- label=""
16
- :return-object="false"
17
- :modelValue="internalValue"
18
- :items="items"
19
- :border-on-hover="true"
20
- @blur="handleBlur"
21
- @keyup.enter="onEnter"
22
- @keyup.esc="onEsc"
23
- @focus="onFocus"
24
- @update:model-value="(value) => { internalValue = value }"
25
- />
26
- </template>
27
-
28
- <template v-else-if="props.type === 'date'">
29
- <DateInput
30
- v-bind="props.inputProps"
31
- ref="inputElementRef"
32
- reverse
33
- :layout="'edit-field'"
34
- :border-on-hover="true"
35
- v-model="internalValue"
36
- @blur="handleBlur"
37
- @keyup.enter="onEnter"
38
- @keyup.esc="onEsc"
39
- @focus="onFocus"
40
- />
41
- </template>
42
-
43
- <template v-else-if="props.type === 'phone'">
44
- <PhoneInput
45
- v-bind="props.inputProps"
46
- ref="inputElementRef"
47
- style="width: 100%;"
48
- density="compact"
49
- hideDetails
50
- reverse
51
- :border-on-hover="true"
52
- append-inner-icon=""
53
- v-model="internalValue"
54
- @blur="handleBlur"
55
- @keyup.enter="onEnter"
56
- @keyup.esc="onEsc"
57
- @focus="onFocus"
58
- @update:phone="(value) => internalValue = value"
59
- />
60
- </template>
61
-
62
- <template v-else-if="props.type === 'text'">
63
- <Input
64
- v-bind="props.inputProps"
65
- ref="inputElementRef"
66
- reverse
67
- :border-on-hover="true"
68
- @blur="handleBlur"
69
- @keyup.enter="onEnter"
70
- @keyup.esc="onEsc"
71
- @focus="onFocus"
72
- v-model="internalValue"
73
- @update:modelValue="(value) => internalValue = value"
74
- />
75
- </template>
76
- </slot>
77
-
78
- <template v-if="computedAppendIcon">
79
- <v-icon :icon="computedAppendIcon" class="ml-1" size="16" color="var(--Dental-Blue-0)" @click="onStartEditing"/>
80
- </template>
81
- </div>
82
- </div>
83
- </template>
84
-
85
- <script setup lang="ts">
86
- import { ref, watch, computed } from 'vue';
87
- import Input from '../Input/Input.vue';
88
- import Select from '../Select/Select.vue';
89
- import DateInput from '../DateInput/DateInput.vue';
90
- import PhoneInput from '../PhoneInput/PhoneInput.vue';
91
- import { VIcon } from 'vuetify/components';
92
- import './EditField.css'
93
-
94
- const props = defineProps({
95
- title: { type: String, required: true },
96
- value: { required: true },
97
- icon: { type: String, required: false },
98
- type: { type: String, required: false },
99
- items: { type: Array, required: false },
100
- selectOnFocus: { type: Boolean, default: false },
101
- appendIcon: { type: String, required: false },
102
- inputProps: { type: Object, default: () => ({}) }
103
- })
104
- const emit = defineEmits(['update:value'])
105
-
106
- const internalValue = ref(props.value)
107
- const isInputFocused = ref(false)
108
- const skipSave = ref(false)
109
-
110
- const inputWrapperRef = ref(null);
111
- const inputElementRef = ref(null);
112
-
113
- const computedAppendIcon = computed(() =>
114
- props.appendIcon === undefined
115
- ? 'heroicons:pencil'
116
- : props.appendIcon
117
- )
118
-
119
- const itemsLookup = ref<Record<string, string>>({});
120
-
121
- if (props.items && Array.isArray(props.items)) {
122
- itemsLookup.value = (props.items as Array<{ value: string; title: string }>).reduce((acc, item) => {
123
- acc[item.value] = item.title;
124
- return acc;
125
- }, {} as Record<string, string>);
126
- }
127
-
128
- watch(() => props.value, v => (internalValue.value = v))
129
-
130
- async function onStartEditing() {
131
- inputElementRef.value?.focus?.();
132
- }
133
-
134
- function save() {
135
- if (internalValue.value !== props.value) {
136
- emit('update:value', internalValue.value)
137
- }
138
- }
139
-
140
- function handleBlur(){
141
- if(skipSave.value){
142
- skipSave.value = false;
143
- return;
144
- }
145
-
146
- save();
147
- }
148
-
149
- function onEnter(){
150
- inputElementRef.value?.blur?.();
151
- }
152
-
153
- function onEsc() {
154
- internalValue.value = props.value;
155
- skipSave.value = true;
156
- inputElementRef.value?.blur?.();
157
- }
158
-
159
- function onFocus() {
160
- if(props.selectOnFocus && inputElementRef.value) {
161
- inputElementRef.value?.select?.();
162
- }
163
- }
164
-
165
- </script>
166
-
167
- <style scoped>
168
-
169
- .editable-display.placeholder {
170
- color: #aaa;
171
- }
172
-
173
- .editable-display {
174
- cursor: text;
175
- width: 100%;
176
- border: 1.5px solid transparent;
177
- padding: 8px;
178
- min-height: calc(1.2em + 16px);
179
- }
180
-
181
- .editable-display:hover {
182
- border-radius: 8px;
183
- border: 1px solid var(--soft-concrete-1, #DDDDDF);
184
- background: var(--White, #FFF);
185
- }
186
-
187
- .editable-display.edited {
188
- border-radius: 8px;
189
- border: 1px solid var(--soft-concrete-1, #DDDDDF);
190
- background: var(--White, #FFF);;
191
- }
192
-
193
- .editable-input {
194
- border-radius: 8px;
195
- border: 1.5px solid var(--Dental-Blue-0, #172774);
196
- background: var(--White, #FFF);
197
- width: 100%;
198
- outline: none;
199
- text-align: right;
200
- padding: 8px;
201
- }
202
- </style>
1
+ <template>
2
+ <div class="wl-edit-field" data-testid="root">
3
+ <div class="title-container" tabIndex="-1">
4
+ <v-icon v-if="props.icon !== ''" :icon="props.icon" size="16" class="mr-2" />
5
+ <p>{{ props.title }}</p>
6
+ </div>
7
+
8
+ <div ref="inputWrapperRef" class="input-wrapper">
9
+ <slot name="input" :is-input-focused="isInputFocused">
10
+ <template v-if="props.type === 'select'">
11
+ <Select
12
+ v-bind="props.inputProps"
13
+ reverse
14
+ ref="inputElementRef"
15
+ label=""
16
+ :return-object="false"
17
+ :modelValue="internalValue"
18
+ :items="items"
19
+ :border-on-hover="true"
20
+ @blur="handleBlur"
21
+ @keyup.enter="onEnter"
22
+ @keyup.esc="onEsc"
23
+ @focus="onFocus"
24
+ @update:model-value="(value) => { internalValue = value }"
25
+ />
26
+ </template>
27
+
28
+ <template v-else-if="props.type === 'date'">
29
+ <DateInput
30
+ v-bind="props.inputProps"
31
+ ref="inputElementRef"
32
+ reverse
33
+ :layout="'edit-field'"
34
+ :border-on-hover="true"
35
+ v-model="internalValue"
36
+ @blur="handleBlur"
37
+ @keyup.enter="onEnter"
38
+ @keyup.esc="onEsc"
39
+ @focus="onFocus"
40
+ />
41
+ </template>
42
+
43
+ <template v-else-if="props.type === 'phone'">
44
+ <PhoneInput
45
+ v-bind="props.inputProps"
46
+ ref="inputElementRef"
47
+ style="width: 100%;"
48
+ density="compact"
49
+ hideDetails
50
+ reverse
51
+ :border-on-hover="true"
52
+ append-inner-icon=""
53
+ v-model="internalValue"
54
+ @blur="handleBlur"
55
+ @keyup.enter="onEnter"
56
+ @keyup.esc="onEsc"
57
+ @focus="onFocus"
58
+ @update:phone="(value) => internalValue = value"
59
+ />
60
+ </template>
61
+
62
+ <template v-else-if="props.type === 'text'">
63
+ <Input
64
+ v-bind="props.inputProps"
65
+ ref="inputElementRef"
66
+ reverse
67
+ :border-on-hover="true"
68
+ @blur="handleBlur"
69
+ @keyup.enter="onEnter"
70
+ @keyup.esc="onEsc"
71
+ @focus="onFocus"
72
+ v-model="internalValue"
73
+ @update:modelValue="(value) => internalValue = value"
74
+ />
75
+ </template>
76
+ </slot>
77
+
78
+ <template v-if="computedAppendIcon">
79
+ <v-icon :icon="computedAppendIcon" class="ml-1" size="16" color="var(--Dental-Blue-0)" @click="onStartEditing"/>
80
+ </template>
81
+ </div>
82
+ </div>
83
+ </template>
84
+
85
+ <script setup lang="ts">
86
+ import { ref, watch, computed } from 'vue';
87
+ import Input from '../Input/Input.vue';
88
+ import Select from '../Select/Select.vue';
89
+ import DateInput from '../DateInput/DateInput.vue';
90
+ import PhoneInput from '../PhoneInput/PhoneInput.vue';
91
+ import { VIcon } from 'vuetify/components';
92
+ import './EditField.css'
93
+
94
+ const props = defineProps({
95
+ title: { type: String, required: true },
96
+ value: { required: true },
97
+ icon: { type: String, required: false },
98
+ type: { type: String, required: false },
99
+ items: { type: Array, required: false },
100
+ selectOnFocus: { type: Boolean, default: false },
101
+ appendIcon: { type: String, required: false },
102
+ inputProps: { type: Object, default: () => ({}) }
103
+ })
104
+ const emit = defineEmits(['update:value'])
105
+
106
+ const internalValue = ref(props.value)
107
+ const isInputFocused = ref(false)
108
+ const skipSave = ref(false)
109
+
110
+ const inputWrapperRef = ref(null);
111
+ const inputElementRef = ref(null);
112
+
113
+ const computedAppendIcon = computed(() =>
114
+ props.appendIcon === undefined
115
+ ? 'heroicons:pencil'
116
+ : props.appendIcon
117
+ )
118
+
119
+ const itemsLookup = ref<Record<string, string>>({});
120
+
121
+ if (props.items && Array.isArray(props.items)) {
122
+ itemsLookup.value = (props.items as Array<{ value: string; title: string }>).reduce((acc, item) => {
123
+ acc[item.value] = item.title;
124
+ return acc;
125
+ }, {} as Record<string, string>);
126
+ }
127
+
128
+ watch(() => props.value, v => (internalValue.value = v))
129
+
130
+ async function onStartEditing() {
131
+ inputElementRef.value?.focus?.();
132
+ }
133
+
134
+ function save() {
135
+ if (internalValue.value !== props.value) {
136
+ emit('update:value', internalValue.value)
137
+ }
138
+ }
139
+
140
+ function handleBlur(){
141
+ if(skipSave.value){
142
+ skipSave.value = false;
143
+ return;
144
+ }
145
+
146
+ save();
147
+ }
148
+
149
+ function onEnter(){
150
+ inputElementRef.value?.blur?.();
151
+ }
152
+
153
+ function onEsc() {
154
+ internalValue.value = props.value;
155
+ skipSave.value = true;
156
+ inputElementRef.value?.blur?.();
157
+ }
158
+
159
+ function onFocus() {
160
+ if(props.selectOnFocus && inputElementRef.value) {
161
+ inputElementRef.value?.select?.();
162
+ }
163
+ }
164
+
165
+ </script>
166
+
167
+ <style scoped>
168
+
169
+ .editable-display.placeholder {
170
+ color: #aaa;
171
+ }
172
+
173
+ .editable-display {
174
+ cursor: text;
175
+ width: 100%;
176
+ border: 1.5px solid transparent;
177
+ padding: 8px;
178
+ min-height: calc(1.2em + 16px);
179
+ }
180
+
181
+ .editable-display:hover {
182
+ border-radius: 8px;
183
+ border: 1px solid var(--soft-concrete-1, #DDDDDF);
184
+ background: var(--White, #FFF);
185
+ }
186
+
187
+ .editable-display.edited {
188
+ border-radius: 8px;
189
+ border: 1px solid var(--soft-concrete-1, #DDDDDF);
190
+ background: var(--White, #FFF);;
191
+ }
192
+
193
+ .editable-input {
194
+ border-radius: 8px;
195
+ border: 1.5px solid var(--Dental-Blue-0, #172774);
196
+ background: var(--White, #FFF);
197
+ width: 100%;
198
+ outline: none;
199
+ text-align: right;
200
+ padding: 8px;
201
+ }
202
+ </style>
@@ -0,0 +1,124 @@
1
+ .error-page {
2
+ min-height: 100vh;
3
+ display: flex;
4
+ justify-content: center;
5
+ background-image: url('../Background/wunschlachen-background.svg');
6
+ background-repeat: no-repeat;
7
+ background-position: center;
8
+ background-size: auto;
9
+ }
10
+
11
+ .error-page__main {
12
+ display: grid;
13
+ place-items: center;
14
+ padding: 1rem;
15
+ }
16
+
17
+ .error-page__grid {
18
+ display: grid;
19
+ gap: 1.5rem;
20
+ max-width: 56rem;
21
+ grid-template-columns: 1fr;
22
+ }
23
+
24
+ @media (min-width: 768px) {
25
+ .error-page__grid {
26
+ grid-template-columns: repeat(2, 1fr);
27
+ align-items: center;
28
+ }
29
+
30
+ .error-page__grid--no-icon {
31
+ grid-template-columns: 1fr;
32
+ }
33
+ }
34
+
35
+ .error-page__content {
36
+ padding: 1.5rem;
37
+ }
38
+
39
+ @media (min-width: 768px) {
40
+ .error-page__content {
41
+ order: 2;
42
+ }
43
+ }
44
+
45
+ .error-page__header {
46
+ display: flex;
47
+ flex-direction: column;
48
+ align-items: center;
49
+ gap: 1rem;
50
+ margin-bottom: 1.25rem;
51
+ }
52
+
53
+ .error-page__logo-container {
54
+ border-right: none;
55
+ }
56
+
57
+ .error-page__status-code {
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ gap: 0.75rem;
62
+ width: 100%;
63
+ }
64
+
65
+ @media (min-width: 768px) {
66
+ .error-page__status-code {
67
+ justify-content: flex-start;
68
+ }
69
+ }
70
+
71
+ .error-page__status-code p {
72
+ margin: 0;
73
+ font-size: 1.25rem;
74
+ font-weight: 600;
75
+ }
76
+
77
+ .error-page__divider {
78
+ width: 2px;
79
+ height: 24px;
80
+ }
81
+
82
+ @media (min-width: 768px) {
83
+ .error-page__header {
84
+ flex-direction: row;
85
+ align-items: center;
86
+ }
87
+
88
+ .error-page__logo-container {
89
+ flex: 1;
90
+ }
91
+ }
92
+
93
+ .error-page__description {
94
+ margin-top: 1.25rem;
95
+ margin-bottom: 1.25rem;
96
+ }
97
+
98
+ .error-page__link {
99
+ display: block;
100
+ text-align: center;
101
+ }
102
+
103
+ .error-page__icon-container {
104
+ display: flex;
105
+ justify-content: center;
106
+ align-self: center;
107
+ }
108
+
109
+ .error-page__icon {
110
+ width: 150px;
111
+ height: 204px;
112
+ justify-self: center;
113
+ }
114
+
115
+ @media (min-width: 768px) {
116
+ .error-page__icon-container {
117
+ order: 1;
118
+ }
119
+
120
+ .error-page__icon {
121
+ width: 250px;
122
+ height: 340px;
123
+ }
124
+ }
@@ -0,0 +1,45 @@
1
+ <template>
2
+ <Background>
3
+ <main class="error-page__main">
4
+ <div class="error-page__grid" :class="{ 'error-page__grid--no-icon': siteColors['domain'] === 'domain-cocoon' }">
5
+ <ErrorPageLogo v-if="siteColors['domain'] !== 'domain-cocoon'" class="error-page__icon" />
6
+ <div class="error-page__content">
7
+ <div class="error-page__header">
8
+ <div class="error-page__status-code">
9
+ <Logo height="78" width="78"/>
10
+ <span class="error-page__divider" :style="{ backgroundColor: siteColors['font_color_code'] }"></span>
11
+ <p :style="{ color: siteColors['font_color_code'] }">{{ statusCode }}</p>
12
+ </div>
13
+ </div>
14
+
15
+ <h1 :style="{ color: siteColors['font_color_title_code'] }">{{ errorTitle }}</h1>
16
+ <p :style="{ color: siteColors['font_color_code'] }" class="error-page__description" v-html="errorMessage" />
17
+
18
+ <Button variant="outlined" :color="siteColors['font_color_code']" label="Zurück zur Startseite" @click="handleRedirect" class="error-page__link" />
19
+ </div>
20
+ </div>
21
+ </main>
22
+ </Background>
23
+ </template>
24
+
25
+ <script setup lang="ts">
26
+ import { siteColors } from "../../utils/index";
27
+ import "./ErrorPage.css";
28
+ import ErrorPageLogo from "./ErrorPageLogo.vue";
29
+ import Logo from "../Icons/Logo.vue";
30
+ import Button from '../Button/Button.vue';
31
+ import { computed } from 'vue';
32
+ import Background from "../Background/Background.vue";
33
+
34
+ const props = defineProps<{
35
+ statusCode: number;
36
+ redirectTo?: string;
37
+ }>();
38
+
39
+ const handleRedirect = () => {
40
+ window.location.href = props.redirectTo ?? '/';
41
+ };
42
+
43
+ const errorTitle = computed(() => siteColors['domain'] === 'domain-cocoon' ? 'Das hat leider nicht geklappt' : 'Huch hier ist eine Lücke...');
44
+ const errorMessage = computed(() => `Leider ist etwas schiefgelaufen. Unser Team kümmert sich sofort darum, eine Lösung zu finden.<br />Bitte versuchen Sie es gleich noch einmal.`);
45
+ </script>
@@ -0,0 +1,26 @@
1
+ <template>
2
+ <svg v-if="siteColors['domain'] === 'domain-dental'" :width="width" :height="height" viewBox="0 0 250 340" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg">
3
+ <path d="M146.652 126.332C138.207 126.689 129.828 125.566 121.776 122.998C119.195 122.175 118.092 126.229 120.66 127.047C129.036 129.717 137.868 130.902 146.652 130.531C149.343 130.418 149.358 126.217 146.652 126.332Z" :fill="siteColors['font_color_code']" :stroke="siteColors['font_color_code']" stroke-width="1.5"/>
4
+ <path d="M247.747 128.041C246.75 122.899 245.342 117.311 241.959 113.19C238.188 108.596 231.986 106.085 226.086 106.572C223.937 106.751 221.849 107.275 219.825 107.994C217.46 105.566 215.095 103.137 212.73 100.709C219.519 91.4108 222.061 79.7454 221.772 68.3245C221.727 66.5142 221.607 64.7064 221.435 62.9032C221.424 62.7903 221.405 62.6775 221.381 62.5694C221.257 61.0812 221.087 59.5954 220.885 58.112C219.729 49.5568 216.444 41.2298 210.539 34.8305C210.452 34.7364 210.362 34.6448 210.275 34.5507C210.264 34.4896 210.25 34.4308 210.233 34.3674C208.907 29.7148 206.354 25.3162 203.549 21.4113C199.593 15.903 194.74 11.0318 189.016 7.36433C182.457 3.16553 174.811 0.807529 167.013 0.751107C156.728 0.675876 146.781 4.44445 138.064 9.67532C134.883 11.5843 131.836 13.7095 128.897 15.9712C126.024 18.1834 123.311 20.6002 120.342 22.6855C114.721 26.6374 108.331 29.3669 101.448 27.2205C101.384 27.2017 101.323 27.1875 101.262 27.1734C97.7636 25.8216 94.4064 24.1595 90.9129 22.8007C83.0231 19.735 74.0754 18.8934 65.699 19.8573C55.9213 20.9834 46.4282 24.6673 39.2601 31.5674C30.3289 40.1671 26.5744 52.4321 25.9679 64.5489C24.9452 84.9598 31.6384 105.025 38.4961 123.943C39.5046 126.724 40.5414 129.496 41.6134 132.254C38.9099 132.748 36.2227 133.338 33.5614 134.059C24.3669 136.556 15.0265 140.579 8.36864 147.608C4.99033 151.174 2.05399 155.695 1.09245 160.573C0.196735 165.125 1.08775 169.681 3.42224 173.673C7.75975 181.093 15.5202 185.935 22.7094 190.235C26.344 192.41 29.9057 194.681 33.6249 196.71C38.5031 199.371 43.4683 201.866 48.4477 204.332C43.7622 205.098 39.4271 207.092 36.4296 211.196C34.5089 213.827 33.4321 217.243 34.1327 220.483C34.8592 223.849 37.6756 226.254 40.8729 227.221C48.3372 229.475 56.3375 224.247 61.3497 219.143C63.5854 216.867 65.6848 214.076 67.0695 211.032C68.2685 214.274 69.7614 217.391 71.7268 220.292C74.9264 225.018 79.358 228.852 84.5983 231.097C86.0676 253.676 87.5369 276.254 89.0039 298.833C89.4624 305.897 89.9232 312.962 90.3816 320.024C88.4773 321.825 86.7987 323.878 85.4281 326.113C84.0575 328.349 82.3061 331.339 82.5623 334.052C82.8468 337.078 85.5692 338.291 88.261 338.493C91.3126 338.724 94.4346 338.578 97.4956 338.606C100.723 338.637 103.954 338.667 107.181 338.696C108.797 338.71 110.409 338.726 112.024 338.74C113.35 338.752 114.763 338.804 116.033 338.348C122.011 336.201 119.049 328.756 116.355 325.185C113.031 320.779 108.204 317.913 102.785 317.093C101.974 291.843 101.163 266.597 100.352 241.347C100.251 238.185 100.15 235.021 100.046 231.859C109.711 230.467 113.407 219.425 116.063 211.192C116.933 208.498 117.756 205.789 118.64 203.1C119.098 201.71 119.571 200.323 120.076 198.95C120.316 198.297 120.563 197.648 120.817 196.999C120.932 196.708 121.05 196.416 121.167 196.125C121.221 195.993 121.275 195.864 121.33 195.732C121.36 195.659 121.454 195.438 121.464 195.415C122.519 192.993 123.711 190.626 125.176 188.425C128.349 188.145 131.523 188.529 134.45 189.85C137.511 191.23 140.135 193.346 142.434 195.77C144.931 198.405 146.934 201.379 148.887 204.426C151.09 207.863 153.448 211.225 156.14 214.3C158.808 217.347 161.905 220.165 165.523 222.044C165.285 238.684 165.222 255.326 165.132 271.969C165.076 282.153 165.017 292.335 164.907 302.519C164.855 307.303 164.794 312.088 164.714 316.872C164.679 318.992 164.265 321.522 164.897 323.579C165.772 326.419 168.443 326.647 170.979 326.849C183.656 327.858 196.381 328.13 209.091 327.695C210.381 327.651 211.568 326.379 211.115 325.039C210.231 322.422 208.047 321.031 205.552 320.132C202.654 319.089 199.588 318.405 196.623 317.57C190.621 315.88 184.617 314.192 178.615 312.501C178.016 286.756 178.406 260.997 180.353 235.313C180.665 231.182 181.02 227.056 181.406 222.932C186.068 221.51 189.528 217.441 192.02 213.428C195.692 207.515 198.029 200.746 199.929 194.089C202.407 185.404 204.179 176.487 205.456 167.502C210.137 172.321 216.362 175.89 222.811 177.404C226.683 178.314 230.879 178.497 234.699 177.242C238.83 175.883 242.168 172.998 244.348 169.256C247.67 163.547 248.542 156.424 249.007 149.959C249.529 142.664 249.137 135.223 247.745 128.041H247.747ZM239.063 116.239C241.797 119.723 242.834 124.74 243.668 128.991C244.242 131.906 244.618 134.868 244.827 137.844C244.131 137.134 243.374 136.471 242.681 135.809C241.503 134.685 240.302 133.582 239.093 132.491C240.631 130.488 237.772 127.695 236.007 129.668C232.845 133.201 228.22 136.102 223.288 135.529C219.425 135.08 215.455 131.899 215.701 127.754C215.763 126.706 214.686 125.537 213.602 125.655C211.637 125.866 208.47 126.141 207.057 124.364C205.27 122.117 208.188 119.314 209.838 118.104C212.377 116.244 215.154 114.615 217.994 113.268C220.497 112.08 223.297 110.999 226.086 110.769C230.994 110.362 235.988 112.323 239.06 116.237L239.063 116.239ZM228.752 148.17C228.752 149.594 228.655 150.547 228.387 151.748C228.258 152.331 228.098 152.909 227.903 153.474C227.651 154.202 227.689 154.122 227.327 154.816C227.089 155.27 226.821 155.702 226.532 156.123C226.511 156.156 226.492 156.18 226.478 156.203C226.398 156.304 226.318 156.403 226.231 156.497C226.05 156.699 225.865 156.899 225.667 157.087C225.597 157.155 225.291 157.416 225.206 157.494C225.119 157.55 224.825 157.755 224.762 157.795C224.536 157.936 224.304 158.058 224.068 158.18C224.047 158.192 224.01 158.208 223.974 158.225C223.845 158.274 223.713 158.324 223.582 158.368C223.351 158.443 223.119 158.505 222.884 158.559C222.782 158.58 222.402 158.632 222.38 158.641C221.84 158.686 221.299 158.681 220.761 158.627C220.335 158.585 220.605 158.606 220.697 158.62C220.556 158.599 220.413 158.573 220.274 158.542C219.945 158.472 219.618 158.392 219.296 158.298C218.602 158.093 218.099 157.898 217.502 157.607C213.499 155.655 210.29 152.34 207.457 148.96C207.515 148.193 207.574 147.425 207.628 146.658C208.028 140.995 208.343 135.27 208.15 129.583C208.468 129.663 208.787 129.729 209.109 129.778C209.953 129.905 210.793 129.964 211.634 129.962C212.509 134.892 217.197 138.766 222.068 139.568C223.173 139.749 224.273 139.8 225.359 139.739C226.173 140.473 226.979 141.211 227.785 141.949C228.42 143.999 228.754 146.038 228.752 148.17ZM231.133 138.858C231.074 138.712 231.004 138.571 230.924 138.439C232.76 137.682 234.49 136.636 236.056 135.39C238.101 137.221 240.13 139.083 242.039 141.051C242.923 141.961 243.269 142.607 242.472 143.705C241.832 144.582 240.692 146 239.601 146.331C238.708 146.604 237.885 145.492 237.29 144.951C236.265 144.023 235.247 143.089 234.227 142.156C233.287 141.293 232.346 140.43 231.403 139.57C231.316 139.333 231.227 139.095 231.133 138.86V138.858ZM187.262 111.533C187.262 111.533 187.257 111.533 187.255 111.533C187.234 111.535 187.213 111.537 187.184 111.54C187.032 111.556 186.881 111.575 186.728 111.591C185.663 111.707 184.596 111.772 183.524 111.789C182.421 111.805 181.319 111.768 180.221 111.678C179.732 111.638 179.243 111.587 178.756 111.526C178.744 111.526 178.735 111.523 178.726 111.521C178.712 111.521 178.697 111.516 178.676 111.514C178.554 111.495 178.432 111.479 178.312 111.46C178.009 111.41 177.705 111.361 177.402 111.305C175.265 110.912 173.166 110.317 171.139 109.53C170.911 109.44 170.683 109.349 170.455 109.255C170.382 109.222 170.069 109.085 169.987 109.05C169.468 108.817 168.953 108.57 168.445 108.312C167.418 107.788 166.416 107.214 165.443 106.591C161.782 104.247 158.218 100.765 155.712 97.1894C152.47 92.5651 150.378 87.6705 148.972 82.2492C147.639 77.1076 147.305 71.9238 147.844 66.7258C148.347 76.44 150.952 86.5044 156.455 94.5964C160.983 101.257 167.455 106.457 175.199 108.843C182.184 110.997 189.909 110.714 196.739 108.124C197.134 107.973 197.526 107.816 197.914 107.651C198.018 107.764 198.126 107.877 198.229 107.99C195.516 109.473 192.801 110.444 189.524 111.135C189.013 111.243 188.501 111.337 187.988 111.422C187.746 111.462 187.504 111.497 187.262 111.533ZM201.838 105.707C201.873 105.686 201.911 105.667 201.946 105.646C201.913 105.669 201.878 105.693 201.845 105.716C201.843 105.714 201.84 105.712 201.835 105.707H201.838ZM210.059 103.984C211.928 105.904 213.799 107.825 215.668 109.744C213.67 110.696 211.709 111.791 209.843 113.009C208.11 111.648 206.443 110.204 204.84 108.693C206.718 107.299 208.465 105.723 210.057 103.984H210.059ZM215.546 52.7565C216.122 54.8817 216.541 57.047 216.837 59.2287C217.519 64.208 217.617 69.3142 217.004 74.3053C216.527 78.1914 215.288 82.844 213.738 86.2904C212.142 89.8451 210.08 93.0588 207.659 95.7225C206.45 97.0531 205.139 98.292 203.737 99.4205C203.281 99.7873 203.512 99.6109 202.997 99.9894C202.604 100.279 202.207 100.558 201.803 100.829C201.083 101.313 200.343 101.767 199.588 102.195C198.84 102.615 198.074 103.008 197.296 103.37C197.096 103.464 196.894 103.553 196.692 103.645C196.64 103.669 196.52 103.718 196.445 103.751C196.055 103.911 195.662 104.066 195.265 104.209C193.652 104.799 191.992 105.263 190.306 105.589C189.909 105.667 189.512 105.73 189.115 105.796C189.042 105.808 188.908 105.827 188.835 105.839C188.623 105.867 188.412 105.89 188.198 105.914C187.365 106.003 186.531 106.057 185.696 106.081C184.862 106.102 184.025 106.093 183.19 106.048C182.758 106.024 182.325 105.991 181.892 105.951C181.707 105.933 181.523 105.911 181.338 105.893C181.246 105.883 181.152 105.872 181.06 105.86C181.039 105.857 181.025 105.855 181.013 105.855C180.999 105.855 180.987 105.85 180.971 105.848C179.302 105.601 177.651 105.227 176.043 104.715C174.16 104.115 173.243 103.727 171.529 102.827C168.156 101.052 165.718 99.1313 163.139 96.3361C157.24 89.9415 154.052 81.2477 152.651 72.4763C151.915 67.8778 151.739 63.1571 152.233 58.5234C152.421 56.7484 152.813 54.5973 153.335 52.6225C153.587 51.6727 153.871 50.73 154.191 49.8013C154.342 49.3641 154.501 48.9291 154.668 48.4989C154.878 47.9558 154.974 47.7278 155.099 47.4457C155.853 45.7412 156.728 44.0909 157.736 42.5228C158.794 40.8748 159.448 40.0167 160.71 38.6085C161.867 37.3178 163.125 36.1165 164.467 35.0186C164.611 34.901 164.759 34.7835 164.904 34.6683C164.975 34.6118 165.015 34.5789 165.038 34.5601C165.043 34.5578 165.069 34.539 165.144 34.4849C165.492 34.2263 165.842 33.9724 166.197 33.7255C166.882 33.253 167.582 32.8063 168.297 32.3831C169.009 31.9647 169.736 31.5721 170.476 31.2053C170.831 31.029 171.188 30.8597 171.551 30.6975C171.706 30.627 171.861 30.5588 172.016 30.493C172.063 30.4742 172.404 30.3308 172.477 30.3026C173.996 29.6984 175.557 29.2 177.143 28.8144C177.936 28.6216 178.733 28.4594 179.534 28.3231C179.741 28.2878 179.95 28.2572 180.16 28.222C180.221 28.2126 180.313 28.1985 180.383 28.1891C180.78 28.1373 181.178 28.0927 181.575 28.0574C183.221 27.9046 184.878 27.8693 186.531 27.954C187.342 27.9963 188.151 28.0715 188.957 28.1655C189.013 28.1726 189.046 28.1749 189.065 28.1773C189.096 28.182 189.14 28.1891 189.204 28.2008C189.383 28.229 189.561 28.2549 189.74 28.2831C190.156 28.3513 190.57 28.4265 190.984 28.5111C192.613 28.8403 194.216 29.2916 195.777 29.8629C196.149 29.9993 196.515 30.1427 196.882 30.2885C196.957 30.319 197.004 30.3378 197.035 30.3496C197.049 30.3566 197.08 30.3707 197.138 30.3966C197.333 30.4836 197.529 30.5682 197.721 30.6576C198.474 31.0031 199.212 31.3769 199.934 31.779C200.691 32.1998 201.429 32.6512 202.148 33.1307C202.484 33.3564 202.818 33.5868 203.147 33.8243C203.3 33.9348 203.451 34.0453 203.601 34.1581C203.712 34.2404 203.752 34.2686 203.763 34.278C203.773 34.2874 203.81 34.318 203.921 34.4073C209.855 39.1727 213.576 45.485 215.553 52.7635L215.546 52.7565ZM23.1397 165.651C23.0997 165.553 23.0597 165.452 23.0292 165.351C22.9728 165.174 22.914 165 22.8646 164.822C22.8011 164.591 22.7541 164.358 22.7047 164.123C22.7047 164.123 22.7047 164.116 22.7047 164.114C22.6977 164.029 22.6789 163.827 22.6789 163.822C22.6718 163.451 22.6718 163.084 22.7024 162.715C22.7094 162.661 22.7212 162.595 22.7353 162.539C22.7941 162.292 22.8482 162.047 22.9234 161.805C22.9704 161.655 23.0245 161.509 23.0785 161.363C23.1091 161.293 23.1867 161.112 23.2267 161.032C23.4312 160.632 23.6545 160.247 23.9061 159.873C23.9484 159.809 24.1318 159.558 24.1858 159.48C24.247 159.407 24.4374 159.175 24.5009 159.102C24.8277 158.723 25.1756 158.364 25.5376 158.02C26.3487 157.247 26.9365 156.786 27.7193 156.236C31.763 153.403 36.3967 151.558 41.0798 150.098C43.5506 149.326 46.1108 148.652 48.671 148.106C48.5652 148.459 48.5582 148.83 48.6969 149.185C53.3776 161.164 57.7292 173.294 60.8536 185.783C61.4085 188 61.8975 190.257 62.3724 192.532C59.5489 190.463 56.2058 188.909 53.246 187.341C46.2354 183.627 39.2037 179.87 32.788 175.173C29.9551 173.099 27.0352 170.838 24.7454 168.16C24.1858 167.506 23.6334 166.672 23.1843 165.741C23.1679 165.706 23.1538 165.677 23.142 165.651H23.1397ZM22.693 162.76C22.6836 162.861 22.6836 162.835 22.693 162.76ZM196.889 189.269C195.96 192.878 194.91 196.456 193.659 199.966C192.526 203.147 191.463 205.745 189.864 208.751C189.112 210.167 188.292 211.549 187.375 212.863C187.154 213.183 186.923 213.496 186.691 213.806C186.681 213.82 186.672 213.83 186.665 213.839C186.658 213.848 186.651 213.855 186.644 213.865C186.5 214.043 186.357 214.222 186.211 214.398C185.786 214.906 185.341 215.398 184.873 215.868C184.398 216.343 183.9 216.787 183.381 217.21C183.378 217.21 183.376 217.213 183.373 217.215C183.232 217.316 183.094 217.419 182.953 217.516C182.713 217.68 182.468 217.838 182.219 217.988C182.104 218.057 181.986 218.125 181.869 218.188C182.057 216.305 182.254 214.422 182.457 212.541C182.579 211.413 181.406 210.442 180.357 210.442C179.121 210.442 178.38 211.408 178.258 212.541C175.441 238.681 174.115 264.942 174.146 291.232C174.155 298.856 174.268 306.478 174.459 314.1C174.482 315.031 175.096 315.87 176.001 316.124C181.906 317.786 187.814 319.448 193.72 321.11C196.635 321.931 199.553 322.749 202.468 323.572C202.553 323.595 202.644 323.621 202.736 323.645C193.927 323.784 185.113 323.584 176.321 323.026C175.006 322.944 173.69 322.853 172.376 322.754C171.757 322.707 171.139 322.66 170.521 322.608C170.168 322.58 169.334 322.66 168.979 322.455C169.04 322.479 168.885 322.262 168.859 322.077C168.802 321.635 168.84 321.169 168.847 320.725C168.868 319.505 168.892 318.282 168.913 317.062C168.99 312.417 169.051 307.771 169.103 303.126C169.319 283.42 169.355 263.712 169.501 244.004C169.578 233.396 169.686 222.791 169.888 212.184C169.94 209.48 165.741 209.48 165.69 212.184C165.657 213.86 165.631 215.534 165.603 217.21C159.913 213.482 155.792 207.456 152.216 201.826C148.328 195.701 143.579 189.537 136.862 186.352C134.279 185.127 131.533 184.391 128.721 184.191C128.789 184.125 128.855 184.059 128.925 183.994C129.177 183.761 129.436 183.535 129.699 183.314C129.786 183.241 129.875 183.168 129.965 183.096C130.023 183.046 130.084 182.999 130.146 182.952C130.164 182.938 130.188 182.919 130.218 182.898C131.396 182.035 132.64 181.302 133.968 180.695C134.011 180.676 134.041 180.662 134.067 180.651C134.086 180.643 134.102 180.636 134.128 180.627C134.351 180.538 134.577 180.451 134.805 180.368C135.151 180.241 135.501 180.126 135.854 180.018C136.646 179.778 137.455 179.586 138.268 179.435C138.43 179.405 138.593 179.379 138.755 179.353C138.811 179.343 139.154 179.296 139.22 179.287C139.589 179.245 139.958 179.207 140.328 179.181C141.27 179.113 142.218 179.094 143.163 179.12C145.335 179.179 147.155 179.428 149.235 179.851C151.873 180.385 153.002 176.339 150.352 175.803C143.725 174.46 136.674 174.423 130.578 177.693C125.618 180.357 122.023 184.943 119.465 189.864C116.766 195.057 114.984 200.674 113.233 206.238C112.396 208.895 111.571 211.556 110.633 214.177C110.419 214.779 110.198 215.376 109.967 215.974C109.866 216.239 109.76 216.503 109.657 216.768C109.594 216.926 109.53 217.081 109.467 217.238C109.431 217.328 109.408 217.382 109.394 217.419C109.387 217.434 109.377 217.459 109.356 217.506C108.881 218.607 108.376 219.693 107.802 220.746C107.504 221.296 107.186 221.839 106.85 222.368C106.667 222.655 106.479 222.937 106.283 223.212C106.215 223.311 105.945 223.664 105.896 223.732C105.562 224.143 105.216 224.545 104.845 224.926C104.657 225.116 104.464 225.302 104.266 225.481C104.189 225.551 103.897 225.796 103.777 225.899C103.655 225.986 103.335 226.219 103.248 226.278C103.032 226.421 102.811 226.558 102.585 226.685C102.322 226.833 102.049 226.962 101.779 227.096C101.664 227.143 101.546 227.188 101.429 227.23C100.933 227.406 100.427 227.533 99.9147 227.644C99.8254 224.853 99.736 222.065 99.6467 219.274C99.5597 216.58 95.3609 216.568 95.4479 219.274C96.2919 245.565 97.1382 271.858 97.9822 298.149C98.2197 305.505 98.4548 312.859 98.6922 320.215C98.7651 322.493 101.779 322.855 102.656 321.273C106.041 321.83 109.213 323.581 111.599 326.026C112.915 327.376 114.013 328.953 114.77 330.686C115.156 331.57 116.014 333.796 114.733 334.367C114.02 334.685 113.017 334.541 112.262 334.534C110.877 334.523 109.495 334.509 108.11 334.497C105.496 334.473 102.882 334.447 100.27 334.424C97.733 334.4 95.1963 334.377 92.6597 334.353C91.4043 334.342 90.1488 334.353 88.8934 334.316C88.3034 334.299 87.4523 334.306 86.9445 333.97C86.4132 333.622 87.015 332.28 87.323 331.556C87.7861 330.463 88.3504 329.407 88.9616 328.391C90.2593 326.238 91.865 324.341 93.7176 322.643C93.7223 322.639 93.727 322.632 93.734 322.627C94.303 322.319 94.7003 321.733 94.6439 320.864C92.9347 294.601 91.2279 268.339 89.5188 242.076C89.0415 234.729 88.562 227.383 88.0847 220.034C87.9107 217.351 83.7096 217.332 83.8859 220.034C84.0223 222.133 84.1586 224.235 84.295 226.334C75.6999 221.759 71.4282 212.177 69.0444 203.006C67.5586 197.291 66.5665 191.463 65.1653 185.729C63.6865 179.668 61.9139 173.682 59.9462 167.765C57.741 161.126 55.2866 154.571 52.7429 148.057C52.6488 147.82 52.5242 147.599 52.3761 147.401C53.6033 147.204 54.8211 147.041 56.0177 146.917C57.1109 146.804 58.2065 146.722 59.302 146.675C61.9938 146.557 62.008 142.358 59.302 142.476C49.4727 142.904 39.2484 145.44 30.4182 149.79C26.5838 151.677 22.7094 154.141 20.2762 157.743C18.0546 161.032 17.9629 165.033 19.8813 168.48C21.2307 170.906 23.3372 172.82 25.4083 174.618C28.34 177.162 31.4785 179.47 34.7252 181.593C41.0281 185.717 47.7377 189.201 54.4073 192.687C57.1344 194.112 59.9861 195.558 62.1114 197.836C64.0227 199.886 64.8267 202.613 64.4318 205.383C63.5173 211.808 58.1242 217.29 52.8651 220.603C50.0369 222.385 46.5504 224.016 43.1157 223.436C40.5861 223.008 38.1646 221.369 38.1035 218.59C38.0424 215.781 39.8267 213.143 41.8932 211.387C44.4957 209.177 48.1021 208.335 51.4357 208.15C53.2671 208.049 55.1009 208.124 56.9252 208.27C58.9799 208.434 59.8169 205.26 57.9855 204.358C47.6084 199.242 37.2383 194.176 27.369 188.127C20.8592 184.137 14.1097 180.448 9.14916 174.538C6.7794 171.715 5.01148 168.195 4.9151 164.577C4.7999 160.27 6.86639 156.06 9.53001 152.644C15.0712 145.539 23.6404 141.43 32.0733 138.848C39.9795 136.429 47.6601 135.359 55.5828 134.546C56.7113 134.431 57.6822 133.664 57.6822 132.447C57.6822 131.4 56.7183 130.23 55.5828 130.347C52.3173 130.683 49.0566 131.062 45.8146 131.546C45.8122 131.539 45.8099 131.532 45.8075 131.525C41.4089 120.233 37.2618 108.714 34.1985 96.9802C31.8993 88.1759 30.2654 79.1436 30.082 70.0266C29.941 63.0607 30.5757 56.5627 32.7433 49.9471C33.6649 47.1377 34.5206 45.1418 36.037 42.4899C36.6788 41.3685 37.3747 40.28 38.1246 39.2291C38.3127 38.9658 38.5031 38.7072 38.6959 38.4486C38.7947 38.3146 38.8346 38.2629 38.8464 38.2441C38.8581 38.23 38.8981 38.1829 39.0086 38.0489C39.4083 37.5599 39.8103 37.0733 40.2287 36.6008C41.0492 35.6745 41.9191 34.7905 42.8289 33.9536C43.2756 33.5422 43.734 33.1401 44.2018 32.7522C44.4134 32.5759 44.6274 32.4043 44.8413 32.2327C44.8742 32.2068 45.0035 32.1057 45.0693 32.054C45.154 31.9882 45.241 31.9247 45.3256 31.8589C47.2275 30.4413 49.2634 29.2047 51.3911 28.1561C51.8942 27.9093 52.402 27.6718 52.9121 27.4438C53.0344 27.3897 53.1566 27.338 53.2789 27.2839C53.3047 27.2722 53.3259 27.2628 53.3447 27.2534C53.3517 27.251 53.3564 27.2487 53.3635 27.2463C53.6574 27.1241 53.9536 27.0042 54.2498 26.889C55.336 26.4658 56.4386 26.0873 57.5529 25.7511C59.7393 25.0905 61.975 24.5921 64.232 24.2442C64.4506 24.2112 64.6669 24.1807 64.8855 24.1478C64.9702 24.1384 65.3604 24.0866 65.4521 24.0749C66.0187 24.0067 66.5853 23.9479 67.1518 23.8986C68.2756 23.7998 69.4041 23.7364 70.5325 23.7081C72.733 23.6517 74.9382 23.7246 77.1316 23.9291C77.6394 23.9761 78.1496 24.0302 78.655 24.0913C78.7585 24.1031 79.1887 24.1619 79.2592 24.1689C79.4661 24.1971 79.673 24.2277 79.8799 24.2583C80.8955 24.4134 81.9088 24.5992 82.915 24.8154C84.7863 25.2151 86.6365 25.7206 88.4444 26.3483C88.8558 26.4917 89.2625 26.6398 89.6669 26.7949C89.855 26.8678 90.0454 26.943 90.2335 27.0183C90.3275 27.0559 90.4216 27.0959 90.5156 27.1335C92.6362 28.0715 94.7403 29.0448 96.8843 29.9358C101.885 32.0117 107.066 33.7726 112.417 34.68C122.063 36.3163 131.568 34.7576 139.916 29.5479C142.178 28.1373 144.305 26.5152 146.341 24.7966C147.209 24.0655 147.096 22.582 146.341 21.8274C145.483 20.9693 144.242 21.0939 143.372 21.8274C139.594 25.02 135.341 27.7847 130.642 29.4092C126.306 30.9068 121.779 31.4099 117.211 31.076C116.211 31.0031 115.217 30.8903 114.225 30.7422C115.607 30.2438 116.961 29.6302 118.278 28.9155C123.944 25.8381 128.573 21.2655 133.773 17.5181C142.258 11.4009 152.111 6.1865 162.647 5.14268C170.258 4.38803 177.679 5.85267 184.236 9.41671C189.994 12.5458 194.707 16.8152 198.836 22.0813C198.859 22.1095 198.871 22.1283 198.88 22.1401C198.89 22.1542 198.899 22.1636 198.911 22.18C199.061 22.3775 199.212 22.5773 199.36 22.7772C199.616 23.1204 199.868 23.4683 200.115 23.8186C200.559 24.4463 200.992 25.0858 201.41 25.7323C202.08 26.7667 202.712 27.8247 203.307 28.9014C199.757 26.715 195.815 25.161 191.717 24.3758C184.735 23.0381 177.407 23.7199 170.829 26.4423C166.066 28.4147 161.796 31.344 158.284 35.0421C158.216 35.0891 158.15 35.1385 158.084 35.1902C152.056 40.146 148.325 47.6314 146.024 54.9499C143.671 62.4283 142.594 70.6026 143.845 78.3865C145.643 89.5841 150.989 100.704 160.005 107.835C167.519 113.775 177.132 116.825 186.707 115.783C191.856 115.224 196.802 113.59 201.229 111.041C202.865 112.609 204.57 114.107 206.333 115.539C203.808 117.694 201.89 120.621 202.477 124.105C202.67 125.243 203.152 126.217 203.831 127.023C203.824 127.124 203.82 127.23 203.827 127.34C204.146 132.769 203.921 138.239 203.601 143.663C203.164 151.078 202.414 158.606 201.389 165.868C200.277 173.732 198.85 181.565 196.87 189.262L196.889 189.269ZM243.652 158.552C243.146 161.046 242.54 163.561 241.411 165.858C239.841 169.056 237.697 171.479 234.464 172.874C234.415 172.89 234.088 173.019 234.081 173.022C233.884 173.09 233.689 173.16 233.489 173.226C233.157 173.332 232.821 173.428 232.482 173.511C232.076 173.612 231.664 173.692 231.251 173.767C231.239 173.767 230.961 173.807 230.867 173.821C230.621 173.849 230.376 173.873 230.129 173.892C229.342 173.948 228.552 173.953 227.762 173.915C227.325 173.894 226.887 173.856 226.452 173.812C225.98 173.765 226.041 173.769 225.472 173.671C221.395 172.968 217.925 171.482 214.455 169.326C212.648 168.202 211.324 167.224 209.786 165.84C209.091 165.214 208.421 164.558 207.783 163.872C207.454 163.517 207.132 163.152 206.822 162.779C206.693 162.621 206.563 162.464 206.436 162.304C206.283 162.109 206.269 162.092 206.396 162.252C206.323 162.156 206.253 162.059 206.18 161.96C206.469 159.546 206.725 157.129 206.954 154.713C211.446 159.461 217.467 164.046 223.993 162.602C229.809 161.314 232.45 155.169 232.88 149.785C232.964 148.739 232.967 147.683 232.901 146.63C234.152 147.777 235.424 149.19 236.926 149.985C238.682 150.916 240.69 150.659 242.321 149.606C243.236 149.016 244.16 148.245 244.95 147.359C244.943 147.549 244.935 147.742 244.926 147.932C244.762 151.501 244.357 155.049 243.645 158.549L243.652 158.552Z" :fill="siteColors['font_color_code']" :stroke="siteColors['font_color_code']" stroke-width="1.5"/>
5
+ <path d="M199.854 79.5339C197.963 79.3458 196.064 79.2635 194.167 79.2847C195.168 74.3077 195.486 69.1897 195.037 64.1328C194.78 61.2435 194.315 58.3636 193.605 55.5495C192.951 52.9658 192.199 50.2128 190.774 47.9324C189.491 45.8777 187.598 44.2108 185.106 43.9663C182.515 43.7124 180.122 45.2241 178.679 47.2906C177.031 49.6486 176.671 52.6531 176.368 55.439C176.064 58.2084 176.006 61.0084 176.187 63.7896C176.579 69.8456 178.037 75.7277 180.463 81.2712C179.043 81.6756 177.64 82.1387 176.257 82.6653C175.197 83.0673 174.47 84.0806 174.79 85.2467C175.07 86.2623 176.307 87.118 177.372 86.7137C184.563 83.9795 192.194 82.971 199.849 83.7374C200.98 83.8502 201.948 82.6912 201.948 81.638C201.948 80.4084 200.982 79.6514 199.849 79.5386L199.854 79.5339ZM180.663 66.7C180.063 62.0522 179.995 57.0071 181.051 52.4156C181.429 50.7747 182.191 48.6894 184.022 48.2051C185.666 47.7702 186.799 49.3735 187.485 50.6266C188.501 52.4815 189.042 54.6279 189.556 56.6662C190.158 59.0477 190.593 61.4715 190.819 63.9188C191.303 69.1474 190.979 74.397 189.832 79.5127C188.075 79.6796 186.329 79.9312 184.598 80.2744C182.609 75.998 181.265 71.3761 180.66 66.6977L180.663 66.7Z" :fill="siteColors['font_color_code']" :stroke="siteColors['font_color_code']" stroke-width="1.5"/>
6
+ <path d="M99.7454 89.255C108.225 87.4753 116.708 85.5969 125.129 83.5539C127.059 83.0861 128.578 81.652 128.451 79.5385C128.312 77.2581 126.469 75.958 124.348 75.7558C119.797 75.3256 115.172 75.3115 110.609 75.4925C104.626 75.73 98.6734 76.4211 92.7584 77.3263C91.637 77.4979 91.0164 78.9061 91.2914 79.9076C91.6206 81.1066 92.749 81.5462 93.8728 81.3746C102.482 80.0581 111.188 79.3387 119.898 79.689C120.786 79.7242 121.675 79.7712 122.564 79.8277C122.216 79.9123 121.934 79.9805 121.837 80.0016C117.634 80.9632 113.428 81.92 109.22 82.8675C105.693 83.6621 102.167 84.4614 98.6287 85.2043C95.9863 85.7591 97.1053 89.8075 99.7454 89.2526V89.255ZM124.325 79.9452C124.405 79.9899 124.571 79.9593 124.325 79.9452V79.9452Z" :fill="siteColors['font_color_code']" :stroke="siteColors['font_color_code']" stroke-width="1.5"/>
7
+ <path d="M128.364 86.335C118.095 87.0991 108.122 90.153 99.2235 95.3462C96.8914 96.7074 99.0025 100.337 101.342 98.9714C109.582 94.1637 118.842 91.2415 128.361 90.5338C131.039 90.334 131.06 86.1352 128.361 86.335H128.364Z" :fill="siteColors['font_color_code']" :stroke="siteColors['font_color_code']" stroke-width="1.5"/>
8
+ </svg>
9
+
10
+ </template>
11
+
12
+ <script setup lang="ts">
13
+ import { siteColors } from '@/utils';
14
+
15
+ // You can pass props if you need to customize it
16
+ defineProps({
17
+ width: {
18
+ type: String,
19
+ default: "120",
20
+ },
21
+ height: {
22
+ type: String,
23
+ default: "30",
24
+ }
25
+ });
26
+ </script>