@propbinder/mobile-design 0.2.50 → 0.2.53

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 (221) hide show
  1. package/fesm2022/propbinder-mobile-design.mjs +26206 -0
  2. package/fesm2022/propbinder-mobile-design.mjs.map +1 -0
  3. package/index.d.ts +8193 -0
  4. package/package.json +39 -3
  5. package/ng-package.json +0 -24
  6. package/src/animations/page-transitions.ts +0 -165
  7. package/src/components/action-list-item/ds-mobile-action-list-item.ts +0 -102
  8. package/src/components/action-list-item/index.ts +0 -2
  9. package/src/components/app-icon/ds-app-icon.ts +0 -133
  10. package/src/components/app-icon/index.ts +0 -2
  11. package/src/components/attachment-preview/ds-mobile-attachment-preview.css +0 -139
  12. package/src/components/attachment-preview/ds-mobile-attachment-preview.ts +0 -164
  13. package/src/components/attachment-preview/index.ts +0 -1
  14. package/src/components/avatar-with-badge/ds-avatar-with-badge.ts +0 -142
  15. package/src/components/avatar-with-badge/index.ts +0 -2
  16. package/src/components/booking-modal/ds-mobile-booking-confirmation-wrapper.ts +0 -71
  17. package/src/components/booking-modal/ds-mobile-booking-modal.service.ts +0 -121
  18. package/src/components/booking-modal/ds-mobile-booking-modal.ts +0 -598
  19. package/src/components/booking-modal/ds-mobile-booking-summary.ts +0 -161
  20. package/src/components/booking-modal/index.ts +0 -4
  21. package/src/components/bottom-sheet/ds-mobile-actions-bottom-sheet.ts +0 -266
  22. package/src/components/bottom-sheet/ds-mobile-bottom-sheet-header.ts +0 -146
  23. package/src/components/bottom-sheet/ds-mobile-bottom-sheet-wrapper.ts +0 -156
  24. package/src/components/bottom-sheet/ds-mobile-bottom-sheet.css +0 -101
  25. package/src/components/bottom-sheet/ds-mobile-bottom-sheet.service.ts +0 -169
  26. package/src/components/bottom-sheet/ds-mobile-confirmation-sheet.ts +0 -211
  27. package/src/components/bottom-sheet/ds-mobile-post-create-bottom-sheet.ts +0 -578
  28. package/src/components/bottom-sheet/ds-mobile-profile-actions-sheet.ts +0 -614
  29. package/src/components/bottom-sheet/index.ts +0 -8
  30. package/src/components/bottom-sheet/modal-shadow-fix.ts +0 -42
  31. package/src/components/card-inline/ds-mobile-card-inline.ts +0 -301
  32. package/src/components/card-inline/index.ts +0 -2
  33. package/src/components/card-inline-banner/ds-mobile-card-inline-banner.ts +0 -118
  34. package/src/components/card-inline-banner/index.ts +0 -1
  35. package/src/components/card-inline-contact/ds-mobile-card-inline-contact.ts +0 -120
  36. package/src/components/card-inline-contact/index.ts +0 -1
  37. package/src/components/card-inline-file/ds-mobile-card-inline-file.ts +0 -141
  38. package/src/components/card-inline-file/index.ts +0 -1
  39. package/src/components/chat-modal/ds-mobile-chat-modal.css +0 -159
  40. package/src/components/chat-modal/ds-mobile-chat-modal.service.ts +0 -105
  41. package/src/components/chat-modal/ds-mobile-chat-modal.ts +0 -918
  42. package/src/components/chat-modal/index.ts +0 -8
  43. package/src/components/comment/ds-mobile-comment.ts +0 -568
  44. package/src/components/comment/index.ts +0 -2
  45. package/src/components/contact-list-item/ds-mobile-contact-list-item.ts +0 -182
  46. package/src/components/contact-list-item/index.ts +0 -2
  47. package/src/components/content/ds-mobile-content.ts +0 -139
  48. package/src/components/content/index.ts +0 -2
  49. package/src/components/dropdown/ds-mobile-dropdown.css +0 -199
  50. package/src/components/dropdown/ds-mobile-dropdown.ts +0 -340
  51. package/src/components/dropdown/index.ts +0 -2
  52. package/src/components/ds-mobile-tabs.css +0 -407
  53. package/src/components/ds-mobile-tabs.ts +0 -216
  54. package/src/components/empty-state/ds-mobile-empty-state.ts +0 -120
  55. package/src/components/empty-state/index.ts +0 -2
  56. package/src/components/fab/ds-mobile-fab.ts +0 -315
  57. package/src/components/fab/index.ts +0 -1
  58. package/src/components/facility-creation-modal/ds-mobile-facility-creation-confirmation-wrapper.ts +0 -121
  59. package/src/components/facility-creation-modal/ds-mobile-facility-creation-modal.css +0 -189
  60. package/src/components/facility-creation-modal/ds-mobile-facility-creation-modal.service.ts +0 -135
  61. package/src/components/facility-creation-modal/ds-mobile-facility-creation-modal.ts +0 -656
  62. package/src/components/facility-creation-modal/index.ts +0 -9
  63. package/src/components/facility-creation-modal/sheets/ds-mobile-access-sheet.ts +0 -105
  64. package/src/components/facility-creation-modal/sheets/ds-mobile-price-sheet.ts +0 -188
  65. package/src/components/facility-creation-modal/sheets/ds-mobile-when-can-book-sheet.ts +0 -460
  66. package/src/components/facility-creation-modal/sheets/ds-mobile-who-can-book-sheet.ts +0 -134
  67. package/src/components/facility-detail-modal/ds-mobile-facility-detail-modal.service.ts +0 -69
  68. package/src/components/facility-detail-modal/ds-mobile-facility-detail-modal.ts +0 -379
  69. package/src/components/facility-detail-modal/index.ts +0 -2
  70. package/src/components/file-attachment/ds-mobile-file-attachment.ts +0 -164
  71. package/src/components/file-attachment/index.ts +0 -2
  72. package/src/components/handbook-detail-modal/ds-mobile-handbook-detail-modal.css +0 -214
  73. package/src/components/handbook-detail-modal/ds-mobile-handbook-detail-modal.service.ts +0 -84
  74. package/src/components/handbook-detail-modal/ds-mobile-handbook-detail-modal.ts +0 -424
  75. package/src/components/handbook-detail-modal/index.ts +0 -3
  76. package/src/components/handbook-folder/ds-mobile-handbook-folder-mini.ts +0 -175
  77. package/src/components/handbook-folder/ds-mobile-handbook-folder.ts +0 -533
  78. package/src/components/handbook-folder/index.ts +0 -4
  79. package/src/components/header-content/ds-mobile-header-content.ts +0 -222
  80. package/src/components/header-content/index.ts +0 -2
  81. package/src/components/illustration/ds-mobile-illustration.ts +0 -124
  82. package/src/components/illustration/index.ts +0 -2
  83. package/src/components/index.ts +0 -124
  84. package/src/components/inline-photo/ds-mobile-inline-photo.ts +0 -361
  85. package/src/components/inline-photo/index.ts +0 -1
  86. package/src/components/inline-tabs/ds-mobile-inline-tabs.ts +0 -132
  87. package/src/components/inline-tabs/index.ts +0 -2
  88. package/src/components/interactive-list-item-booking/ds-mobile-interactive-list-item-booking.ts +0 -350
  89. package/src/components/interactive-list-item-booking/index.ts +0 -1
  90. package/src/components/interactive-list-item-inquiry/ds-mobile-interactive-list-item-inquiry.ts +0 -321
  91. package/src/components/interactive-list-item-inquiry/index.ts +0 -2
  92. package/src/components/interactive-list-item-message/ds-mobile-interactive-list-item-message.ts +0 -237
  93. package/src/components/interactive-list-item-message/index.ts +0 -2
  94. package/src/components/interactive-list-item-post/ds-mobile-interactive-list-item-post.ts +0 -549
  95. package/src/components/interactive-list-item-post/ds-mobile-post-pdf-attachment.ts +0 -124
  96. package/src/components/interactive-list-item-post/index.ts +0 -13
  97. package/src/components/lightbox/ds-mobile-lightbox-footer.ts +0 -315
  98. package/src/components/lightbox/ds-mobile-lightbox-header.ts +0 -202
  99. package/src/components/lightbox/ds-mobile-lightbox-image.ts +0 -484
  100. package/src/components/lightbox/ds-mobile-lightbox-pdf.css +0 -377
  101. package/src/components/lightbox/ds-mobile-lightbox-pdf.ts +0 -374
  102. package/src/components/lightbox/ds-mobile-lightbox.css +0 -587
  103. package/src/components/lightbox/ds-mobile-lightbox.service.ts +0 -296
  104. package/src/components/lightbox/ds-mobile-lightbox.ts +0 -529
  105. package/src/components/lightbox/index.ts +0 -22
  106. package/src/components/list-item/ds-mobile-list-item.ts +0 -603
  107. package/src/components/list-item/index.ts +0 -2
  108. package/src/components/list-item-static/ds-mobile-list-item-static.ts +0 -133
  109. package/src/components/list-item-static/index.ts +0 -2
  110. package/src/components/loader-overlay/ds-mobile-loader-overlay.css +0 -49
  111. package/src/components/loader-overlay/ds-mobile-loader-overlay.ts +0 -77
  112. package/src/components/loader-overlay/index.ts +0 -1
  113. package/src/components/logo/ds-logo.ts +0 -95
  114. package/src/components/logo/index.ts +0 -2
  115. package/src/components/message-bubble/ds-mobile-message-bubble.ts +0 -633
  116. package/src/components/message-bubble/index.ts +0 -7
  117. package/src/components/message-composer/ds-mobile-message-composer.ts +0 -1146
  118. package/src/components/message-composer/index.ts +0 -7
  119. package/src/components/modal/ds-mobile-modal.css +0 -163
  120. package/src/components/modal/ds-mobile-modal.service.ts +0 -329
  121. package/src/components/modal/index.ts +0 -8
  122. package/src/components/modal-base/ds-mobile-modal-base.css +0 -378
  123. package/src/components/modal-base/ds-mobile-modal-base.ts +0 -261
  124. package/src/components/modal-base/index.ts +0 -2
  125. package/src/components/new-inquiry-modal/ds-mobile-new-inquiry-modal.css +0 -112
  126. package/src/components/new-inquiry-modal/ds-mobile-new-inquiry-modal.service.ts +0 -93
  127. package/src/components/new-inquiry-modal/ds-mobile-new-inquiry-modal.ts +0 -442
  128. package/src/components/new-inquiry-modal/index.ts +0 -4
  129. package/src/components/offline-banner/ds-mobile-offline-banner.ts +0 -135
  130. package/src/components/offline-banner/index.ts +0 -1
  131. package/src/components/page-details/ds-mobile-page-details.css +0 -83
  132. package/src/components/page-details/ds-mobile-page-details.ts +0 -282
  133. package/src/components/page-details/index.ts +0 -2
  134. package/src/components/page-main/ds-mobile-page-main.css +0 -68
  135. package/src/components/page-main/ds-mobile-page-main.ts +0 -421
  136. package/src/components/page-main/index.ts +0 -2
  137. package/src/components/post-composer/ds-mobile-post-composer.ts +0 -140
  138. package/src/components/post-composer/index.ts +0 -2
  139. package/src/components/post-detail-modal/ds-mobile-post-detail-modal.css +0 -390
  140. package/src/components/post-detail-modal/ds-mobile-post-detail-modal.service.ts +0 -108
  141. package/src/components/post-detail-modal/ds-mobile-post-detail-modal.ts +0 -722
  142. package/src/components/post-detail-modal/index.ts +0 -9
  143. package/src/components/property-banner/ds-mobile-property-banner.ts +0 -95
  144. package/src/components/property-banner/index.ts +0 -2
  145. package/src/components/section/ds-mobile-section.ts +0 -263
  146. package/src/components/section/index.ts +0 -2
  147. package/src/components/shared/directives/index.ts +0 -2
  148. package/src/components/shared/directives/long-press.directive.ts +0 -212
  149. package/src/components/shared/index.ts +0 -3
  150. package/src/components/shared/mobile-modal-base.ts +0 -457
  151. package/src/components/shared/mobile-page-base.ts +0 -204
  152. package/src/components/swiper/ds-mobile-swiper-with-nav.ts +0 -160
  153. package/src/components/swiper/ds-mobile-swiper.ts +0 -327
  154. package/src/components/swiper/index.ts +0 -3
  155. package/src/components/system-message-banner/ds-mobile-system-message-banner.ts +0 -129
  156. package/src/components/system-message-banner/index.ts +0 -2
  157. package/src/components/tab-bar/ds-mobile-tab-bar.css +0 -533
  158. package/src/components/tab-bar/ds-mobile-tab-bar.ts +0 -735
  159. package/src/components/tab-bar/index.ts +0 -2
  160. package/src/components/tabs/ds-mobile-tabs.css +0 -25
  161. package/src/components/tabs/ds-mobile-tabs.ts +0 -89
  162. package/src/components/tabs/index.ts +0 -2
  163. package/src/components/text-input/ds-text-input.ts +0 -287
  164. package/src/components/text-input/index.ts +0 -2
  165. package/src/examples/booking.page.ts +0 -434
  166. package/src/examples/community.page.ts +0 -776
  167. package/src/examples/handbook.page.ts +0 -324
  168. package/src/examples/home.page.ts +0 -347
  169. package/src/examples/index.ts +0 -12
  170. package/src/examples/inquiries.example.ts +0 -273
  171. package/src/examples/inquiry-detail.example.css +0 -189
  172. package/src/examples/inquiry-detail.example.ts +0 -415
  173. package/src/examples/mobile-tabs-example.component.ts +0 -208
  174. package/src/examples/post-create.page.ts +0 -311
  175. package/src/examples/post-detail.page.ts +0 -296
  176. package/src/examples/sign-in.page.ts +0 -291
  177. package/src/examples/whitelabel-demo-modal.component.ts +0 -1094
  178. package/src/examples/whitelabel-demo-modal.service.ts +0 -77
  179. package/src/models/index.ts +0 -7
  180. package/src/models/post.model.ts +0 -41
  181. package/src/pages/community.page.ts +0 -769
  182. package/src/pages/handbook.page.ts +0 -388
  183. package/src/pages/home.page.ts +0 -303
  184. package/src/pages/index.ts +0 -11
  185. package/src/pages/inquiries.example.ts +0 -273
  186. package/src/pages/inquiry-detail.example.css +0 -189
  187. package/src/pages/inquiry-detail.example.ts +0 -415
  188. package/src/pages/mobile-tabs-example.component.ts +0 -179
  189. package/src/pages/post-create.page.ts +0 -311
  190. package/src/pages/post-detail.page.ts +0 -296
  191. package/src/pages/sign-in.page.ts +0 -291
  192. package/src/pages/whitelabel-demo-modal.component.ts +0 -1094
  193. package/src/pages/whitelabel-demo-modal.service.ts +0 -77
  194. package/src/public-api.ts +0 -6
  195. package/src/services/base-modal.service.ts +0 -101
  196. package/src/services/index.ts +0 -11
  197. package/src/services/posts.service.ts +0 -542
  198. package/src/services/tracking-permission.service.ts +0 -88
  199. package/src/services/user.service.ts +0 -60
  200. package/src/services/whitelabel.service.ts +0 -675
  201. package/tsconfig.lib.json +0 -17
  202. package/tsconfig.lib.prod.json +0 -9
  203. package/tsconfig.spec.json +0 -13
  204. /package/{src/assets → assets}/fonts/Brockmann-Bold.otf +0 -0
  205. /package/{src/assets → assets}/fonts/Brockmann-BoldItalic.otf +0 -0
  206. /package/{src/assets → assets}/fonts/Brockmann-Medium.otf +0 -0
  207. /package/{src/assets → assets}/fonts/Brockmann-MediumItalic.otf +0 -0
  208. /package/{src/assets → assets}/fonts/Brockmann-Regular.otf +0 -0
  209. /package/{src/assets → assets}/fonts/Brockmann-RegularItalic.otf +0 -0
  210. /package/{src/assets → assets}/fonts/Brockmann-SemiBold.otf +0 -0
  211. /package/{src/assets → assets}/fonts/Brockmann-SemiBoldItalic.otf +0 -0
  212. /package/{src/assets → assets}/fonts/Brockmann_desktop_license.pdf +0 -0
  213. /package/{src/assets → assets}/fonts/brockmann-medium-webfont.woff2 +0 -0
  214. /package/{src/assets → assets}/fonts/brockmann-mediumitalic-webfont.woff2 +0 -0
  215. /package/{src/assets → assets}/fonts/brockmann-regular-webfont.woff2 +0 -0
  216. /package/{src/assets → assets}/fonts/brockmann-regularitalic-webfont.woff2 +0 -0
  217. /package/{src/assets → assets}/fonts/brockmann-semibold-webfont.woff2 +0 -0
  218. /package/{src/assets → assets}/fonts/brockmann-semibolditalic-webfont.woff2 +0 -0
  219. /package/{src/styles → styles}/ionic.css +0 -0
  220. /package/{src/components/shared → styles}/mobile-common.css +0 -0
  221. /package/{src/components/shared → styles}/mobile-page-base.css +0 -0
@@ -1,222 +0,0 @@
1
- import { Component, input } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
-
4
- /**
5
- * DsMobileHeaderContentComponent
6
- *
7
- * Container for header content tiles - displays tiles in a responsive grid.
8
- * Used within the expandable header section of mobile pages to show
9
- * summary information like property details, statistics, etc.
10
- *
11
- * @example
12
- * ```html
13
- * <ds-mobile-header-content header-content>
14
- * <ds-mobile-header-content-tile>
15
- * <tile-icon>
16
- * <ds-icon name="remixHome4Line" />
17
- * </tile-icon>
18
- * <tile-content>
19
- * <tile-label>Area</tile-label>
20
- * <tile-value>120 m²</tile-value>
21
- * </tile-content>
22
- * </ds-mobile-header-content-tile>
23
- * </ds-mobile-header-content>
24
- * ```
25
- */
26
- @Component({
27
- selector: 'ds-mobile-header-content',
28
- standalone: true,
29
- imports: [CommonModule],
30
- styles: [`
31
- :host {
32
- display: grid;
33
- grid-template-columns: repeat(2, 1fr);
34
- gap: 12px;
35
- }
36
-
37
- @media (min-width: 768px) {
38
- :host {
39
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
40
- }
41
- }
42
- `],
43
- template: `<ng-content select="ds-mobile-header-content-tile" />`
44
- })
45
- export class DsMobileHeaderContentComponent {}
46
-
47
- /**
48
- * DsMobileHeaderContentTileComponent
49
- *
50
- * Individual tile for displaying summary information in the header.
51
- * Styled with purple background to match the mobile header theme.
52
- *
53
- * Must contain:
54
- * - `<tile-icon>` - Icon container (optional)
55
- * - `<tile-content>` - Label and value container
56
- *
57
- * @example
58
- * ```html
59
- * <ds-mobile-header-content-tile>
60
- * <tile-icon>
61
- * <ds-icon name="remixHome4Line" size="20px" color="#DFE4FF" />
62
- * </tile-icon>
63
- * <tile-content>
64
- * <tile-label>Rooms</tile-label>
65
- * <tile-value>3 rooms</tile-value>
66
- * </tile-content>
67
- * </ds-mobile-header-content-tile>
68
- * ```
69
- */
70
- @Component({
71
- selector: 'ds-mobile-header-content-tile',
72
- standalone: true,
73
- imports: [CommonModule],
74
- styles: [`
75
- :host {
76
- background: rgba(var(--color-header-content-rgb, 255, 255, 255), 0.05);
77
- border: 1px solid rgba(var(--color-header-content-rgb, 255, 255, 255), 0.1);
78
- border-radius: 12px;
79
- padding: 12px;
80
- display: flex;
81
- flex-direction: column;
82
- gap: 16px;
83
- }
84
- `],
85
- template: `
86
- <ng-content select="tile-icon" />
87
- <ng-content select="tile-content" />
88
- `
89
- })
90
- export class DsMobileHeaderContentTileComponent {}
91
-
92
- /**
93
- * TileIconComponent
94
- *
95
- * Semantic slot for tile icon with dark purple background.
96
- * Use within `ds-mobile-header-content-tile`.
97
- */
98
- @Component({
99
- selector: 'tile-icon',
100
- standalone: true,
101
- styles: [`
102
- :host {
103
- background: var(--color-header-surface);
104
- border-radius: 8px;
105
- width: 32px;
106
- height: 32px;
107
- display: flex;
108
- align-items: center;
109
- justify-content: center;
110
- flex-shrink: 0;
111
- color: var(--color-header-content, #ffffff);
112
- }
113
-
114
- /* Apply color to ds-icon inside */
115
- :host ::ng-deep ds-icon {
116
- --icon-color: var(--color-header-content, #ffffff);
117
- color: var(--color-header-content, #ffffff);
118
- }
119
-
120
- :host ::ng-deep ds-icon svg {
121
- fill: var(--color-header-content, #ffffff);
122
- }
123
- `],
124
- template: `<ng-content />`
125
- })
126
- export class TileIconComponent {}
127
-
128
- /**
129
- * TileContentComponent
130
- *
131
- * Semantic slot for tile content containing label and value.
132
- * Use within `ds-mobile-header-content-tile`.
133
- *
134
- * Contains:
135
- * - `<tile-label>` - Small label text
136
- * - `<tile-value>` - Large value text
137
- */
138
- @Component({
139
- selector: 'tile-content',
140
- standalone: true,
141
- styles: [`
142
- :host {
143
- display: flex;
144
- flex-direction: column;
145
- gap: 0;
146
- }
147
-
148
- ::ng-deep tile-label {
149
- font-family: 'Brockmann', sans-serif;
150
- font-size: var(--font-size-sm);
151
- font-weight: 400;
152
- line-height: 20px;
153
- letter-spacing: -0.56px;
154
- color: rgba(var(--color-header-content-rgb, 255, 255, 255), 0.8);
155
- display: block;
156
- }
157
-
158
- ::ng-deep tile-value {
159
- font-family: 'Brockmann', sans-serif;
160
- font-size: var(--font-size-lg);
161
- font-weight: 600;
162
- line-height: 26px;
163
- letter-spacing: -0.72px;
164
- color: var(--color-header-content, #ffffff);
165
- display: block;
166
- }
167
- `],
168
- template: `
169
- <ng-content select="tile-label" />
170
- <ng-content select="tile-value" />
171
- `
172
- })
173
- export class TileContentComponent {}
174
-
175
- /**
176
- * TileLabelComponent
177
- *
178
- * Label text for tile content.
179
- * Use within `tile-content` inside `ds-mobile-header-content-tile`.
180
- */
181
- @Component({
182
- selector: 'tile-label',
183
- standalone: true,
184
- styles: [`
185
- :host {
186
- font-family: 'Brockmann', sans-serif;
187
- font-size: var(--font-size-sm);
188
- font-weight: 400;
189
- line-height: 20px;
190
- letter-spacing: -0.56px;
191
- color: rgba(var(--color-header-content-rgb, 255, 255, 255), 0.8);
192
- display: block;
193
- }
194
- `],
195
- template: `<ng-content />`
196
- })
197
- export class TileLabelComponent {}
198
-
199
- /**
200
- * TileValueComponent
201
- *
202
- * Value text for tile content.
203
- * Use within `tile-content` inside `ds-mobile-header-content-tile`.
204
- */
205
- @Component({
206
- selector: 'tile-value',
207
- standalone: true,
208
- styles: [`
209
- :host {
210
- font-family: 'Brockmann', sans-serif;
211
- font-size: var(--font-size-lg);
212
- font-weight: 600;
213
- line-height: 26px;
214
- letter-spacing: -0.72px;
215
- color: var(--color-header-content, #ffffff);
216
- display: block;
217
- }
218
- `],
219
- template: `<ng-content />`
220
- })
221
- export class TileValueComponent {}
222
-
@@ -1,2 +0,0 @@
1
- export * from './ds-mobile-header-content';
2
-
@@ -1,124 +0,0 @@
1
- import { Component, input, computed } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
- import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
4
-
5
- /**
6
- * DsMobileIllustrationComponent
7
- *
8
- * A component that displays illustrations with dynamic whitelabel color adaptation.
9
- * Inlines SVG and uses CSS variables to adapt colors to your theme.
10
- *
11
- * **Features:**
12
- * - Predefined variants (post, inquiry) for common empty states
13
- * - Automatic color adaptation using CSS variables
14
- * - Preserves all SVG details (textures, filters, gradients, shadows)
15
- * - White radial gradient overlay for depth effect
16
- * - Configurable size
17
- *
18
- * **Color Adaptation:**
19
- * The SVGs use the `--color-accent` CSS variable for the main page colors.
20
- * All texture details, shadows, and effects are preserved.
21
- *
22
- * @example
23
- * ```html
24
- * <!-- Using predefined variant -->
25
- * <ds-mobile-illustration variant="post" />
26
- *
27
- * <!-- Using predefined variant with custom size -->
28
- * <ds-mobile-illustration variant="inquiry" size="150px" />
29
- * ```
30
- */
31
- @Component({
32
- selector: 'ds-mobile-illustration',
33
- standalone: true,
34
- imports: [CommonModule],
35
- styles: [`
36
- :host {
37
- display: inline-block;
38
- position: relative;
39
- }
40
-
41
- .illustration-container {
42
- position: relative;
43
- width: var(--illustration-size);
44
- height: var(--illustration-size);
45
- display: flex;
46
- align-items: center;
47
- justify-content: center;
48
- }
49
-
50
- .illustration-svg {
51
- width: 100%;
52
- height: 100%;
53
- display: block;
54
- position: relative;
55
- z-index: 1;
56
- }
57
-
58
- .illustration-svg :deep(svg) {
59
- width: 100%;
60
- height: 100%;
61
- display: block;
62
- }
63
-
64
- .illustration-gradient-overlay {
65
- position: absolute;
66
- top: 0;
67
- left: 0;
68
- right: 0;
69
- bottom: 0;
70
- background: radial-gradient(125% 100% at center top, transparent 15%, white 80%);
71
- opacity: 1;
72
- pointer-events: none;
73
- z-index: 2;
74
- }
75
- `],
76
- template: `
77
- <div
78
- class="illustration-container"
79
- role="img"
80
- [attr.aria-label]="alt()"
81
- [style.--illustration-size]="size()">
82
- <div class="illustration-svg" [innerHTML]="svgContent()"></div>
83
- <div class="illustration-gradient-overlay"></div>
84
- </div>
85
- `
86
- })
87
- export class DsMobileIllustrationComponent {
88
- /**
89
- * Predefined illustration variant
90
- * Available variants: 'post', 'inquiry', 'confirmation'
91
- */
92
- variant = input<'post' | 'inquiry' | 'confirmation'>('post');
93
-
94
- /**
95
- * Illustration size (width and height)
96
- * @default '120px'
97
- */
98
- size = input<string>('120px');
99
-
100
- /**
101
- * Accessible description for the illustration
102
- */
103
- alt = input<string>('');
104
-
105
- constructor(private sanitizer: DomSanitizer) {}
106
-
107
- /**
108
- * Inline SVG content for each variant
109
- */
110
- private svgMap: Record<string, string> = {
111
- 'post': `<svg viewBox="0 0 344 300" fill="none" xmlns="http://www.w3.org/2000/svg"><style>.illustration-primary{fill:var(--color-accent,#6B5FF5);}</style><g filter="url(#filter0_n_3889_10866)"><g filter="url(#filter1_iiii_3889_10866)"><path d="M128.894 29.437C132.332 13.2359 148.247 2.89554 164.447 6.33719L314.615 38.2392C330.826 41.6832 341.182 57.6224 337.742 73.8344L333.497 93.8393L295.98 270.644C292.541 286.85 276.617 297.191 260.413 293.741L110.256 261.77C94.0517 258.32 83.7032 242.385 87.1425 226.178L128.894 29.437Z" class="illustration-primary"/><path d="M128.894 29.437C132.332 13.2359 148.247 2.89554 164.447 6.33719L314.615 38.2392C330.826 41.6832 341.182 57.6224 337.742 73.8344L333.497 93.8393L295.98 270.644C292.541 286.85 276.617 297.191 260.413 293.741L110.256 261.77C94.0517 258.32 83.7032 242.385 87.1425 226.178L128.894 29.437Z" fill="url(#paint0_linear_3889_10866)"/></g><rect width="23.9872" height="24" rx="11.9936" transform="matrix(0.978231 0.207519 -0.208206 0.978085 164.344 44.0215)" fill="black" fill-opacity="0.5"/><rect width="73.2211" height="12" rx="6" transform="matrix(0.978231 0.207519 -0.208206 0.978085 191.531 55.6562)" fill="black" fill-opacity="0.5"/><rect width="119.815" height="10.6931" rx="5.34656" transform="matrix(0.978231 0.207519 -0.208206 0.978085 157.594 79.082)" fill="black" fill-opacity="0.5"/><rect width="70.3126" height="10.6931" rx="5.34656" transform="matrix(0.978231 0.207519 -0.208206 0.978085 154.484 93.4844)" fill="black" fill-opacity="0.5"/><rect width="101.001" height="10.6931" rx="5.34656" transform="matrix(0.978231 0.207519 -0.208206 0.978085 151.344 108.045)" fill="black" fill-opacity="0.5"/><rect width="140.874" height="97.9525" rx="18" transform="matrix(0.978231 0.207519 -0.208206 0.978085 146.484 131.383)" fill="black" fill-opacity="0.5"/><g filter="url(#filter2_iiii_3889_10866)"><path d="M6.24706 73.9096C2.80889 57.7085 13.1487 41.7772 29.3457 38.3199L179.482 6.27234C195.69 2.81267 211.623 13.1535 215.064 29.3654L219.31 49.3702L256.834 226.173C260.273 242.38 249.926 258.315 233.722 261.766L83.5677 293.746C67.3633 297.198 51.4385 286.857 47.9991 270.65L6.24706 73.9096Z" class="illustration-primary"/></g><rect width="23.9872" height="24" rx="11.9936" transform="matrix(0.977991 -0.208645 0.207959 0.978137 41.4062 69.4883)" fill="black" fill-opacity="0.5"/><rect width="73.2211" height="12" rx="6" transform="matrix(0.977991 -0.208645 0.207959 0.978137 70.9688 69.0527)" fill="black" fill-opacity="0.5"/><rect width="119.815" height="10.6931" rx="5.34656" transform="matrix(0.977991 -0.208645 0.207959 0.978137 49.5156 104.264)" fill="black" fill-opacity="0.5"/><rect width="70.3126" height="10.6931" rx="5.34656" transform="matrix(0.977991 -0.208645 0.207959 0.978137 52.5312 118.684)" fill="black" fill-opacity="0.5"/><rect width="101.001" height="10.6931" rx="5.34656" transform="matrix(0.977991 -0.208645 0.207959 0.978137 55.5938 133.262)" fill="black" fill-opacity="0.5"/><rect width="140.874" height="97.9525" rx="18" transform="matrix(0.977991 -0.208645 0.207959 0.978137 60.6562 156.555)" fill="black" fill-opacity="0.5"/></g><defs><filter id="filter0_n_3889_10866" x="5.58594" y="5.60547" width="332.816" height="288.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence type="fractalNoise" baseFrequency="0.25 0.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="9191" /><feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /><feComponentTransfer in="alphaNoise" result="coloredNoise2"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise2" result="noise2Clipped" /><feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" /><feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /><feFlood flood-color="rgba(255, 255, 255, 0.25)" result="color2Flood" /><feComposite operator="in" in2="noise2Clipped" in="color2Flood" result="color2" /><feMerge result="effect1_noise_3889_10866"><feMergeNode in="shape" /><feMergeNode in="color1" /><feMergeNode in="color2" /></feMerge></filter><filter id="filter1_iiii_3889_10866" x="86.4844" y="-10.3237" width="251.918" height="344.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10866" result="effect2_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10866" result="effect3_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10866" result="effect4_innerShadow_3889_10866"/></filter><filter id="filter2_iiii_3889_10866" x="5.58594" y="-10.3945" width="251.906" height="344.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10866" result="effect2_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10866" result="effect3_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10866" result="effect4_innerShadow_3889_10866"/></filter><linearGradient id="paint0_linear_3889_10866" x1="111.488" y1="162.199" x2="335.745" y2="98.2353" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient></defs></svg>`,
112
- 'inquiry': `<svg viewBox="0 0 344 300" fill="none" xmlns="http://www.w3.org/2000/svg"><style>.illustration-primary{fill:var(--color-accent,#6B5FF5);}</style><g filter="url(#filter0_n_3889_10915)"><g filter="url(#filter1_iiii_3889_10915)"><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" class="illustration-primary"/><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" fill="url(#paint0_linear_3889_10915)"/></g><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 173.844 55.5391)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 158.188 52.2148)" fill="black" fill-opacity="0.5"/><rect width="130.785" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 168.297 81.6992)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 152.641 78.3652)" fill="black" fill-opacity="0.5"/><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 162.75 107.842)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 147.094 104.516)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 157.203 133.99)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 140.562 212.443)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 141.547 130.666)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 124.891 209.117)" fill="black" fill-opacity="0.5"/><rect width="125.447" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 151.656 160.141)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 135.984 156.816)" fill="black" fill-opacity="0.5"/><rect width="85.4104" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 146.109 186.293)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 130.438 182.967)" fill="black" fill-opacity="0.5"/><g filter="url(#filter2_iiii_3889_10915)"><path d="M6.24705 73.9095C2.80888 57.7085 13.1487 41.7772 29.3457 38.3199L179.482 6.27234C195.69 2.81268 211.623 13.1536 215.064 29.3654L219.31 49.3702L256.834 226.173C260.273 242.38 249.926 258.315 233.722 261.766L83.5677 293.746C67.3633 297.198 51.4385 286.857 47.9991 270.65L6.24705 73.9095Z" class="illustration-primary"/></g><rect width="112.101" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 57.8906 79.4453)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 42.2344 82.791)" fill="black" fill-opacity="0.5"/><rect width="130.785" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 63.4531 105.605)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 47.7812 108.941)" fill="black" fill-opacity="0.5"/><rect width="112.101" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 69 131.746)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 53.3281 135.092)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 74.5469 157.896)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 91.2031 236.348)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 58.8906 161.24)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 75.5312 239.693)" fill="black" fill-opacity="0.5"/><rect width="125.447" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 80.0938 184.047)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 64.4375 187.391)" fill="black" fill-opacity="0.5"/><rect width="85.4104" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 85.6406 210.197)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 69.9844 213.543)" fill="black" fill-opacity="0.5"/></g><defs><filter id="filter0_n_3889_10915" x="5.58594" y="5.60547" width="332.832" height="288.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence type="fractalNoise" baseFrequency="0.25 0.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="9191" /><feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /><feComponentTransfer in="alphaNoise" result="coloredNoise2"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise2" result="noise2Clipped" /><feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" /><feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /><feFlood flood-color="rgba(255, 255, 255, 0.25)" result="color2Flood" /><feComposite operator="in" in2="noise2Clipped" in="color2Flood" result="color2" /><feMerge result="effect1_noise_3889_10915"><feMergeNode in="shape" /><feMergeNode in="color1" /><feMergeNode in="color2" /></feMerge></filter><filter id="filter1_iiii_3889_10915" x="86.5" y="-10.3237" width="251.918" height="344.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10915" result="effect2_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10915" result="effect3_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10915" result="effect4_innerShadow_3889_10915"/></filter><filter id="filter2_iiii_3889_10915" x="5.58594" y="-10.3945" width="251.906" height="344.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10915" result="effect2_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10915" result="effect3_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10915" result="effect4_innerShadow_3889_10915"/></filter><linearGradient id="paint0_linear_3889_10915" x1="111.503" y1="162.199" x2="335.761" y2="98.2353" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient></defs></svg>`,
113
- 'confirmation': `<svg viewBox="0 0 344 300" fill="none" xmlns="http://www.w3.org/2000/svg"><style>.illustration-success{fill:var(--color-success,#2FB282);}</style><g clip-path="url(#clip0_conf)"><g filter="url(#filter0_n_conf)"><g filter="url(#filter1_iiii_conf)"><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" class="illustration-success"/><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" fill="url(#paint0_linear_conf)"/></g><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 173.848 55.5391)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 158.191 52.2148)" fill="black" fill-opacity="0.5"/><rect width="130.785" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 168.301 81.6992)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 152.645 78.3652)" fill="black" fill-opacity="0.5"/><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 162.754 107.842)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 147.098 104.516)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 157.207 133.99)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 140.566 212.443)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 141.551 130.666)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 124.895 209.117)" fill="black" fill-opacity="0.5"/><rect width="125.447" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 151.66 160.141)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 135.988 156.816)" fill="black" fill-opacity="0.5"/><rect width="85.4104" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 146.113 186.293)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 130.441 182.967)" fill="black" fill-opacity="0.5"/><g filter="url(#filter2_iiii_conf)"><path d="M6.24705 73.9095C2.80888 57.7085 13.1487 41.7772 29.3457 38.3199L179.482 6.27234C195.69 2.81268 211.623 13.1536 215.064 29.3654L219.31 49.3703L256.834 226.173C260.273 242.38 249.926 258.315 233.722 261.766L83.5677 293.746C67.3633 297.198 51.4385 286.857 47.9991 270.65L6.24705 73.9095Z" class="illustration-success"/></g><path d="M142.997 202.463C114.185 208.587 85.8652 190.196 79.741 161.384C73.6167 132.571 92.0079 104.251 120.82 98.1272C149.633 92.003 177.952 110.394 184.077 139.206C190.201 168.019 171.81 196.339 142.997 202.463ZM131.143 172.268L160.185 127.54L151.241 121.732L128.007 157.515L110.112 145.893L104.303 154.838L131.143 172.268Z" fill="black" fill-opacity="0.5"/></g></g><defs><filter id="filter0_n_conf" x="5.58594" y="5.60547" width="332.832" height="288.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence type="fractalNoise" baseFrequency="0.25 0.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="9191" /><feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /><feComponentTransfer in="alphaNoise" result="coloredNoise2"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise2" result="noise2Clipped" /><feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" /><feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /><feFlood flood-color="rgba(255, 255, 255, 0.25)" result="color2Flood" /><feComposite operator="in" in2="noise2Clipped" in="color2Flood" result="color2" /><feMerge result="effect1_noise_conf"><feMergeNode in="shape" /><feMergeNode in="color1" /><feMergeNode in="color2" /></feMerge></filter><filter id="filter1_iiii_conf" x="86.5" y="-10.3237" width="251.918" height="344.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_conf" result="effect2_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_conf" result="effect3_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_conf" result="effect4_innerShadow_conf"/></filter><filter id="filter2_iiii_conf" x="5.58594" y="-10.3945" width="251.906" height="344.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_conf" result="effect2_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_conf" result="effect3_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_conf" result="effect4_innerShadow_conf"/></filter><linearGradient id="paint0_linear_conf" x1="111.503" y1="162.199" x2="335.761" y2="98.2353" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient><clipPath id="clip0_conf"><rect width="344" height="300" fill="white"/></clipPath></defs></svg>`
114
- };
115
-
116
- /**
117
- * Computed SVG content - sanitized for security
118
- */
119
- svgContent = computed(() => {
120
- const variantKey = this.variant();
121
- const svg = this.svgMap[variantKey] || this.svgMap['post'];
122
- return this.sanitizer.bypassSecurityTrustHtml(svg);
123
- });
124
- }
@@ -1,2 +0,0 @@
1
- export * from './ds-mobile-illustration';
2
-
@@ -1,124 +0,0 @@
1
- // Mobile Page Components
2
- export * from './page-main';
3
- export * from './page-details';
4
-
5
- // Mobile Content Components
6
- export * from './content';
7
- export * from './section';
8
- export * from './header-content';
9
- export * from './logo';
10
- export * from './system-message-banner';
11
- export * from './file-attachment';
12
-
13
- // Mobile Community Components
14
- export * from './comment';
15
- export * from './post-composer';
16
- export * from './message-composer';
17
- export * from './message-bubble';
18
-
19
- // Mobile List Components
20
- export * from './list-item';
21
- export * from './list-item-static';
22
- export * from './action-list-item';
23
- export {
24
- DsMobileInteractiveListItemPostComponent,
25
- PostContentComponent,
26
- PostTextComponent,
27
- PostMediaComponent,
28
- PostAttachmentsComponent,
29
- PostActionsComponent,
30
- ActionLikeComponent,
31
- ActionCommentComponent,
32
- PostPdfAttachmentComponent,
33
- } from './interactive-list-item-post';
34
- export { DsMobileInteractiveListItemInquiryComponent } from './interactive-list-item-inquiry';
35
- export { DsMobileInteractiveListItemMessageComponent } from './interactive-list-item-message';
36
- export { DsMobileContactListItemComponent } from './contact-list-item';
37
- export * from './interactive-list-item-booking';
38
-
39
- // Mobile Layout Components
40
- export { DsMobileTabsComponent } from './tabs';
41
- export { DsMobileTabBarComponent, type TabConfig } from './tab-bar';
42
- export { DsMobileInlineTabsComponent, type InlineTabItem } from './inline-tabs';
43
- export * from './swiper';
44
-
45
- // Mobile Bottom Sheet Components
46
- export * from './bottom-sheet';
47
-
48
- // Mobile Lightbox Components
49
- export * from './lightbox';
50
-
51
- // Mobile Inline Photo Component
52
- export * from './inline-photo';
53
-
54
- // Mobile Attachment Preview Component
55
- export * from './attachment-preview';
56
-
57
- // Mobile Loader Overlay Component
58
- export * from './loader-overlay';
59
-
60
- // Mobile Modal Service
61
- export * from './modal';
62
-
63
- // Mobile Modal Base Component
64
- export * from './modal-base';
65
-
66
- // Mobile Post Detail Modal
67
- export * from './post-detail-modal';
68
-
69
- // Mobile Card Inline Component
70
- export * from './card-inline';
71
-
72
- // Mobile Card Inline Banner Content
73
- export * from './card-inline-banner';
74
-
75
- // Mobile Card Inline Contact
76
- export * from './card-inline-contact';
77
-
78
- // Mobile Card Inline File
79
- export * from './card-inline-file';
80
-
81
- // Mobile Chat Modal
82
- export * from './chat-modal';
83
-
84
- // Mobile New Inquiry Modal
85
- export * from './new-inquiry-modal';
86
-
87
- // Mobile Booking & Facility Modals
88
- export * from './booking-modal';
89
- export * from './facility-creation-modal';
90
- export * from './facility-detail-modal';
91
-
92
- // Mobile Handbook Components
93
- export * from './handbook-folder';
94
- export * from './handbook-detail-modal';
95
-
96
- // Text Input Component
97
- export * from './text-input';
98
-
99
- // FAB Component
100
- export * from './fab';
101
-
102
- // Mobile Avatar Component
103
- export * from './avatar-with-badge';
104
-
105
- // Mobile App Icon Component
106
- export * from './app-icon';
107
-
108
- // Mobile Empty State Component
109
- export * from './empty-state';
110
-
111
- // Mobile Offline Banner Component
112
- export * from './offline-banner';
113
-
114
- // Mobile Illustration Component
115
- export * from './illustration';
116
-
117
- // Mobile Property Banner Component
118
- export * from './property-banner';
119
-
120
- // Mobile Dropdown Component
121
- export * from './dropdown';
122
-
123
- // Shared directives
124
- export * from './shared';