@3ddv/software-division-components 2.0.14 → 2.1.0
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.
- package/README.md +2 -0
- package/backoffice/datepicker/datepicker.component.css +262 -0
- package/fesm2022/3ddv-software-division-components-dvm-cart.mjs +18 -6
- package/fesm2022/3ddv-software-division-components-dvm-cart.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-dvm-loader.mjs +18 -4
- package/fesm2022/3ddv-software-division-components-dvm-loader.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-dvm-map-loader.mjs +26 -9
- package/fesm2022/3ddv-software-division-components-dvm-map-loader.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-dvm-neighbors.mjs +41 -42
- package/fesm2022/3ddv-software-division-components-dvm-neighbors.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-dvm-popover.mjs +2 -1
- package/fesm2022/3ddv-software-division-components-dvm-popover.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-button.mjs +3 -2
- package/fesm2022/3ddv-software-division-components-generic-button.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-dialog.mjs +173 -19
- package/fesm2022/3ddv-software-division-components-generic-dialog.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-icon.mjs +45 -19
- package/fesm2022/3ddv-software-division-components-generic-icon.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-select.mjs +67 -23
- package/fesm2022/3ddv-software-division-components-generic-select.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-tooltip.mjs +136 -0
- package/fesm2022/3ddv-software-division-components-generic-tooltip.mjs.map +1 -0
- package/fesm2022/3ddv-software-division-components.mjs +14 -8
- package/fesm2022/3ddv-software-division-components.mjs.map +1 -1
- package/generic/braintree/braintree.component.css +7 -0
- package/host-tailwind-layer.css +7 -0
- package/package.json +81 -6
- package/shared/themes/sdc.css +68 -0
- package/styles.css +1 -1
- package/types/3ddv-software-division-components-dvm-cart.d.ts +20 -3
- package/types/3ddv-software-division-components-dvm-loader.d.ts +12 -5
- package/types/3ddv-software-division-components-dvm-map-loader.d.ts +3 -3
- package/types/3ddv-software-division-components-dvm-neighbors.d.ts +12 -6
- package/types/3ddv-software-division-components-generic-button.d.ts +2 -1
- package/types/3ddv-software-division-components-generic-dialog.d.ts +121 -49
- package/types/3ddv-software-division-components-generic-icon.d.ts +8 -2
- package/types/3ddv-software-division-components-generic-select.d.ts +12 -5
- package/types/3ddv-software-division-components-generic-tooltip.d.ts +25 -0
- package/types/3ddv-software-division-components.d.ts +10 -0
package/README.md
CHANGED
|
@@ -15,6 +15,8 @@ The v2 introduces multiple entrypoints to ensure tree-shaking and other optimiza
|
|
|
15
15
|
|
|
16
16
|
[Refer to the dedicated docs page](./docs/installation.md)
|
|
17
17
|
|
|
18
|
+
**Host global CSS:** The app must own **one** Tailwind v4 pipeline in its root stylesheet. Import **`@angular/cdk/overlay-prebuilt.css`**, **`@spartan-ng/brain/hlm-tailwind-preset.css`**, and add **`@source`** paths that cover both your app and **`@3ddv/software-division-components`** (published builds often need `fesm2022/**/*.mjs` in addition to HTML/TS). The library’s `styles.css` does **not** `@import 'tailwindcss'` on purpose; duplicating Tailwind there breaks Spartan utilities and theming. A worked example lives in Group Sales `src/styles.css`; full steps are in the installation guide.
|
|
19
|
+
|
|
18
20
|
## **Development**
|
|
19
21
|
|
|
20
22
|
### Conventions
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* This dialog in rendered at the root of the DOM.
|
|
3
|
+
* For the styles to apply to the dialog, we need to apply the theme-sdc class
|
|
4
|
+
* to the dialog container located here:
|
|
5
|
+
* /src/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.ts
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
.sdc-datepicker {
|
|
9
|
+
--sdc-datepicker-label-color: var(--color-neutral-700);
|
|
10
|
+
--sdc-datepicker-label-size: var(--text-base);
|
|
11
|
+
--sdc-datepicker-label-weight: var(--font-semibold);
|
|
12
|
+
--sdc-datepicker-label-gap: var(--space-6);
|
|
13
|
+
--sdc-datepicker-label-width: auto;
|
|
14
|
+
--sdc-datepicker-input-width: 100%;
|
|
15
|
+
--sdc-datepicker-input-background: var(--color-pure-white);
|
|
16
|
+
--sdc-datepicker-input-border-color: var(--color-neutral-300);
|
|
17
|
+
--sdc-datepicker-input-border-width: var(--border-default);
|
|
18
|
+
--sdc-datepicker-input-border-radius: var(--radius-full);
|
|
19
|
+
--sdc-datepicker-input-padding-vertical: var(--space-2);
|
|
20
|
+
--sdc-datepicker-input-padding-horizontal: var(--space-3);
|
|
21
|
+
--sdc-datepicker-input-text-color: var(--color-neutral-900);
|
|
22
|
+
--sdc-datepicker-input-text-size: var(--text-base);
|
|
23
|
+
--sdc-datepicker-input-text-weight: var(--font-medium);
|
|
24
|
+
--sdc-datepicker-input-border-hover: var(--color-neutral-500);
|
|
25
|
+
--sdc-datepicker-input-focus-ring-width: var(--border-default);
|
|
26
|
+
--sdc-datepicker-input-focus-ring-color: var(--color-primary);
|
|
27
|
+
--sdc-datepicker-input-focus-ring-offset: var(--border-2);
|
|
28
|
+
--sdc-datepicker-placeholder-color: var(--color-neutral-500);
|
|
29
|
+
--sdc-datepicker-placeholder-size: var(--text-sm);
|
|
30
|
+
--sdc-datepicker-placeholder-weight: var(--font-medium);
|
|
31
|
+
--sdc-datepicker-hint-color: var(--color-neutral-600);
|
|
32
|
+
--sdc-datepicker-hint-size: var(--text-xs);
|
|
33
|
+
--sdc-datepicker-error-color: var(--color-danger);
|
|
34
|
+
--sdc-datepicker-error-size: var(--text-xs);
|
|
35
|
+
--sdc-datepicker-calendar-background: var(--color-pure-white);
|
|
36
|
+
--sdc-datepicker-calendar-border-color: var(--color-neutral-200);
|
|
37
|
+
--sdc-datepicker-calendar-border-width: var(--border-default);
|
|
38
|
+
--sdc-datepicker-calendar-border-radius: var(--radius-lg);
|
|
39
|
+
--sdc-datepicker-calendar-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
40
|
+
--sdc-datepicker-calendar-padding: var(--space-4);
|
|
41
|
+
--sdc-datepicker-month-year-text-color: var(--color-neutral-900);
|
|
42
|
+
--sdc-datepicker-month-year-text-size: var(--text-base);
|
|
43
|
+
--sdc-datepicker-month-year-text-weight: var(--font-semibold);
|
|
44
|
+
--sdc-datepicker-month-year-hover-text-color: var(--color-neutral-900);
|
|
45
|
+
--sdc-datepicker-month-year-padding: var(--space-2);
|
|
46
|
+
--sdc-datepicker-month-year-button-background: var(--color-pure-white);
|
|
47
|
+
--sdc-datepicker-month-year-button-text-color-hover: var(--color-pure-white);
|
|
48
|
+
--sdc-datepicker-month-year-button-background-hover: var(--color-neutral-900);
|
|
49
|
+
--sdc-datepicker-day-button-disabled-background: transparent;
|
|
50
|
+
--sdc-datepicker-day-button-disabled-text-color: var(--color-neutral-300);
|
|
51
|
+
--sdc-datepicker-day-button-background: transparent;
|
|
52
|
+
--sdc-datepicker-day-button-text-color: var(--color-neutral-900);
|
|
53
|
+
--sdc-datepicker-day-button-text-size: var(--text-sm);
|
|
54
|
+
--sdc-datepicker-day-button-text-weight: var(--font-semibold);
|
|
55
|
+
--sdc-datepicker-day-button-border-radius: var(--radius-md);
|
|
56
|
+
--sdc-datepicker-day-button-padding: var(--space-2);
|
|
57
|
+
--sdc-datepicker-day-button-hover-background: var(--color-secondary);
|
|
58
|
+
--sdc-datepicker-day-button-hover-text-color: var(--color-pure-white);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.component-container {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: var(--sdc-datepicker-label-gap);
|
|
65
|
+
width: var(--sdc-datepicker-input-width);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.component-container hlm-date-picker {
|
|
69
|
+
width: var(--sdc-datepicker-input-width);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Label styles */
|
|
73
|
+
.sdc-datepicker-label {
|
|
74
|
+
font-weight: var(--sdc-datepicker-label-weight);
|
|
75
|
+
font-size: var(--sdc-datepicker-label-size);
|
|
76
|
+
color: hsl(var(--sdc-datepicker-label-color));
|
|
77
|
+
width: var(--sdc-datepicker-label-width);
|
|
78
|
+
padding-left: var(--sdc-datepicker-input-padding-horizontal);
|
|
79
|
+
line-height: 1.25rem;
|
|
80
|
+
display: block;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.component-container:has(.sdc-datepicker-label.left) {
|
|
84
|
+
padding-left: 0;
|
|
85
|
+
flex-direction: row;
|
|
86
|
+
align-items: center;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Date picker input styles */
|
|
90
|
+
.sdc-datepicker button[brnpopovertrigger] {
|
|
91
|
+
width: var(--sdc-datepicker-input-width);
|
|
92
|
+
background: var(--sdc-datepicker-input-background);
|
|
93
|
+
border: var(--sdc-datepicker-input-border-width) solid hsl(var(--sdc-datepicker-input-border-color));
|
|
94
|
+
border-radius: var(--sdc-datepicker-input-border-radius);
|
|
95
|
+
padding: var(--sdc-datepicker-input-padding-vertical) var(--sdc-datepicker-input-padding-horizontal);
|
|
96
|
+
color: hsl(var(--sdc-datepicker-input-text-color));
|
|
97
|
+
font-size: var(--sdc-datepicker-input-text-size);
|
|
98
|
+
font-weight: var(--sdc-datepicker-input-text-weight);
|
|
99
|
+
cursor: pointer;
|
|
100
|
+
outline: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.sdc-datepicker-placeholder {
|
|
104
|
+
color: hsl(var(--sdc-datepicker-placeholder-color));
|
|
105
|
+
font-size: var(--sdc-datepicker-placeholder-size);
|
|
106
|
+
font-weight: var(--sdc-datepicker-placeholder-weight);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Focus and hover state */
|
|
110
|
+
.sdc-datepicker button[brnpopovertrigger]:hover:not(:disabled) {
|
|
111
|
+
border-color: hsl(var(--sdc-datepicker-input-border-hover));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.sdc-datepicker button[brnpopovertrigger][data-state='open'] {
|
|
115
|
+
outline: var(--sdc-datepicker-input-focus-ring-width) solid hsl(var(--sdc-datepicker-input-focus-ring-color));
|
|
116
|
+
outline-offset: var(--sdc-datepicker-input-focus-ring-offset);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Disabled state */
|
|
120
|
+
.sdc-datepicker button[brnpopovertrigger]:disabled {
|
|
121
|
+
opacity: 0.6;
|
|
122
|
+
cursor: not-allowed;
|
|
123
|
+
background: hsl(var(--color-neutral-100));
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Error state */
|
|
127
|
+
.sdc-datepicker-error {
|
|
128
|
+
color: hsl(var(--sdc-datepicker-error-color));
|
|
129
|
+
font-size: var(--sdc-datepicker-error-size);
|
|
130
|
+
line-height: 1rem;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Hint message styles */
|
|
134
|
+
.sdc-datepicker-hint {
|
|
135
|
+
color: hsl(var(--sdc-datepicker-hint-color));
|
|
136
|
+
font-size: var(--sdc-datepicker-hint-size);
|
|
137
|
+
line-height: 1rem;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* Calendar styles */
|
|
141
|
+
.sdc-datepicker div[brncalendar] {
|
|
142
|
+
background: hsl(var(--sdc-datepicker-calendar-background));
|
|
143
|
+
border: var(--sdc-datepicker-calendar-border-width) solid hsl(var(--sdc-datepicker-calendar-border-color));
|
|
144
|
+
border-radius: var(--sdc-datepicker-calendar-border-radius);
|
|
145
|
+
box-shadow: var(--sdc-datepicker-calendar-shadow);
|
|
146
|
+
padding: var(--sdc-datepicker-calendar-padding);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* Month/Year selector styles */
|
|
150
|
+
.sdc-datepicker div[brncalendarheader] {
|
|
151
|
+
color: hsl(var(--sdc-datepicker-month-year-text-color));
|
|
152
|
+
font-size: var(--sdc-datepicker-month-year-text-size);
|
|
153
|
+
font-weight: var(--sdc-datepicker-month-year-text-weight);
|
|
154
|
+
padding: var(--sdc-datepicker-month-year-padding);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.sdc-datepicker button[brncalendarpreviousbutton],
|
|
158
|
+
.sdc-datepicker button[brncalendarnextbutton] {
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
color: hsl(var(--sdc-datepicker-month-year-text-color));
|
|
161
|
+
background: hsl(var(--sdc-datepicker-month-year-button-background));
|
|
162
|
+
transition: all 0.2s ease;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.sdc-datepicker button[brncalendarpreviousbutton]:disabled,
|
|
166
|
+
.sdc-datepicker button[brncalendarnextbutton]:disabled {
|
|
167
|
+
opacity: 0.6;
|
|
168
|
+
cursor: not-allowed;
|
|
169
|
+
color: hsl(var(--color-neutral-100));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.sdc-datepicker button[brncalendarpreviousbutton]:hover:not(:disabled),
|
|
173
|
+
.sdc-datepicker button[brncalendarnextbutton]:hover:not(:disabled) {
|
|
174
|
+
color: hsl(var(--sdc-datepicker-month-year-button-text-color-hover));
|
|
175
|
+
background: hsl(var(--sdc-datepicker-month-year-button-background-hover));
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Day button styles */
|
|
179
|
+
.sdc-datepicker button[brncalendarcellbutton] {
|
|
180
|
+
background: hsl(var(--sdc-datepicker-day-button-background));
|
|
181
|
+
color: hsl(var(--sdc-datepicker-day-button-text-color));
|
|
182
|
+
font-size: var(--sdc-datepicker-day-button-text-size);
|
|
183
|
+
font-weight: var(--sdc-datepicker-day-button-text-weight);
|
|
184
|
+
border-radius: var(--sdc-datepicker-day-button-border-radius);
|
|
185
|
+
padding: var(--sdc-datepicker-day-button-padding);
|
|
186
|
+
transition: all 0.2s ease;
|
|
187
|
+
cursor: pointer;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.sdc-datepicker button[brncalendarcellbutton]:hover:not(:disabled) {
|
|
191
|
+
background-color: hsl(var(--sdc-datepicker-day-button-hover-background));
|
|
192
|
+
color: hsl(var(--sdc-datepicker-day-button-hover-text-color));
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* .sdc-datepicker button[brncalendarcellbutton][data-selected] {
|
|
196
|
+
background-color: hsl(var(--sdc-datepicker-day-button-selected-background));
|
|
197
|
+
color: hsl(var(--sdc-datepicker-day-button-selected-text-color));
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.sdc-datepicker button[brncalendarcellbutton][data-today] {
|
|
201
|
+
background-color: hsl(var(--sdc-datepicker-day-button-today-background));
|
|
202
|
+
color: hsl(var(--sdc-datepicker-day-button-today-text-color));
|
|
203
|
+
border: var(--sdc-datepicker-day-button-today-border-width) solid
|
|
204
|
+
hsl(var(--sdc-datepicker-day-button-today-border-color));
|
|
205
|
+
} */
|
|
206
|
+
|
|
207
|
+
.sdc-datepicker button[brncalendarcellbutton]:disabled {
|
|
208
|
+
background-color: hsl(var(--sdc-datepicker-day-button-disabled-background));
|
|
209
|
+
color: hsl(var(--sdc-datepicker-day-button-disabled-text-color));
|
|
210
|
+
cursor: not-allowed;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* Variant styles */
|
|
214
|
+
.variant-primary.sdc-datepicker {
|
|
215
|
+
--sdc-datepicker-day-button-hover-background: var(--color-primary);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.variant-secondary.sdc-datepicker {
|
|
219
|
+
--sdc-datepicker-day-button-hover-background: var(--color-secondary);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.variant-alternative.sdc-datepicker {
|
|
223
|
+
--sdc-datepicker-day-button-hover-background: var(--color-alternative);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.variant-success.sdc-datepicker {
|
|
227
|
+
--sdc-datepicker-day-button-hover-background: var(--color-success);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.variant-warning.sdc-datepicker {
|
|
231
|
+
--sdc-datepicker-day-button-hover-background: var(--color-warning);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.variant-danger.sdc-datepicker {
|
|
235
|
+
--sdc-datepicker-day-button-hover-background: var(--color-danger);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* Radius variations */
|
|
239
|
+
.radius-default.sdc-datepicker {
|
|
240
|
+
--sdc-datepicker-input-border-radius: var(--radius-default);
|
|
241
|
+
--sdc-datepicker-day-button-border-radius: var(--radius-default);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.radius-sm.sdc-datepicker {
|
|
245
|
+
--sdc-datepicker-input-border-radius: var(--radius-sm);
|
|
246
|
+
--sdc-datepicker-day-button-border-radius: var(--radius-sm);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.radius-md.sdc-datepicker {
|
|
250
|
+
--sdc-datepicker-input-border-radius: var(--radius-md);
|
|
251
|
+
--sdc-datepicker-day-button-border-radius: var(--radius-md);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.radius-lg.sdc-datepicker {
|
|
255
|
+
--sdc-datepicker-input-border-radius: var(--radius-lg);
|
|
256
|
+
--sdc-datepicker-day-button-border-radius: var(--radius-lg);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.radius-xl.sdc-datepicker {
|
|
260
|
+
--sdc-datepicker-input-border-radius: var(--radius-xl);
|
|
261
|
+
--sdc-datepicker-day-button-border-radius: var(--radius-xl);
|
|
262
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
3
|
import { input, output, computed, ViewEncapsulation, Component } from '@angular/core';
|
|
3
4
|
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
@@ -6,6 +7,8 @@ import { lucideChevronUp, lucideChevronDown, lucideEye, lucideMapPin } from '@ng
|
|
|
6
7
|
class SeatListComponent {
|
|
7
8
|
seats = input([], ...(ngDevMode ? [{ debugName: "seats" }] : []));
|
|
8
9
|
groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : []));
|
|
10
|
+
/** When set, replaces each group's default header + ticket list with projected markup; context: `{ $implicit: SeatGroup }`. */
|
|
11
|
+
groupTemplate = input(null, ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
|
|
9
12
|
actionButtonText = input('Relocate', ...(ngDevMode ? [{ debugName: "actionButtonText" }] : []));
|
|
10
13
|
indicatorColor = input('#f97316', ...(ngDevMode ? [{ debugName: "indicatorColor" }] : []));
|
|
11
14
|
mapPinClick = output();
|
|
@@ -44,19 +47,28 @@ class SeatListComponent {
|
|
|
44
47
|
return `(${group.seats.length})`;
|
|
45
48
|
}
|
|
46
49
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SeatListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SeatListComponent, isStandalone: true, selector: "sdc-seat-list", inputs: { seats: { classPropertyName: "seats", publicName: "seats", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, actionButtonText: { classPropertyName: "actionButtonText", publicName: "actionButtonText", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mapPinClick: "mapPinClick", eyeClick: "eyeClick", actionClick: "actionClick", groupToggle: "groupToggle", removeClick: "removeClick" }, providers: [provideIcons({ lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp })], ngImport: i0, template: "<div class=\"sdc-seat-list\">\n @if (isGroupedMode()) {\n <div class=\"seat-list seat-list--grouped\">\n @for (group of groups(); track group.id) {\n <div class=\"seat-group\">\n <button class=\"seat-group__header\" (click)=\"toggleGroup(group)\">\n <div class=\"seat-group__header-content\">\n <span class=\"seat-group__title\">{{ group.title }}</span>\n <span class=\"seat-group__count\">{{ getGroupSeatCount(group) }}</span>\n </div>\n <ng-icon\n [name]=\"isGroupExpanded(group) ? 'lucideChevronUp' : 'lucideChevronDown'\"\n size=\"16\"\n class=\"seat-group__chevron\" />\n </button>\n <div class=\"seat-group__content\" [class.expanded]=\"isGroupExpanded(group)\">\n @for (item of group.seats; track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"getGroupIndicatorColor(group)\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onRemoveClick(item)\">\n {{ getGroupActionButtonText(group) }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"seat-list seat-list--simple\">\n @for (item of seats(); track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"indicatorColor()\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onActionClick(item)\">\n {{ actionButtonText() }}\n </button>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".sdc-seat-list{--sdc-seat-list-primary-bg: #2a2d3a;--sdc-seat-list-card-bg: #ffffff;--sdc-seat-list-text-primary: #ffffff;--sdc-seat-list-text-secondary: #6b7280;--sdc-seat-list-text-dark: #1f2937;--sdc-seat-list-accent-orange: #f97316;--sdc-seat-list-accent-green: #10b981;--sdc-seat-list-accent-blue: #2563eb;--sdc-seat-list-accent-blue-hover: #1d4ed8;--sdc-seat-list-border-color: #e5e7eb;--sdc-seat-list-icon-bg: #f5f5f5;--sdc-seat-list-ticket-bg: #f9fafb;--sdc-seat-list-ticket-bg-hover: #f3f4f6;--sdc-seat-list-group-header-bg: #e4eaef;--sdc-seat-list-group-header-hover: #f9fafb;--sdc-seat-list-spacing-xs: .25rem;--sdc-seat-list-spacing-sm: .5rem;--sdc-seat-list-spacing-md: 1rem;--sdc-seat-list-spacing-lg: 1.5rem;--sdc-seat-list-spacing-xl: 2rem;--sdc-seat-list-border-radius-sm: .375rem;--sdc-seat-list-border-radius-md: .5rem;--sdc-seat-list-border-radius-lg: .75rem;--sdc-seat-list-border-radius-xl: 1.5rem;--sdc-seat-list-font-size-sm: .875rem;--sdc-seat-list-font-size-base: 1rem;--sdc-seat-list-font-size-lg: 1.125rem;--sdc-seat-list-font-size-xl: 1.25rem;--card-bg: var(--sdc-seat-list-card-bg);--text-primary: var(--sdc-seat-list-text-primary);--text-secondary: var(--sdc-seat-list-text-secondary);--text-dark: var(--sdc-seat-list-text-dark);--accent-orange: var(--sdc-seat-list-accent-orange);--accent-green: var(--sdc-seat-list-accent-green);--accent-blue: var(--sdc-seat-list-accent-blue);--accent-blue-hover: var(--sdc-seat-list-accent-blue-hover);--icon-bg: var(--sdc-seat-list-icon-bg);--spacing-xs: var(--sdc-seat-list-spacing-xs);--spacing-sm: var(--sdc-seat-list-spacing-sm);--spacing-md: var(--sdc-seat-list-spacing-md);--spacing-lg: var(--sdc-seat-list-spacing-lg);--spacing-xl: var(--sdc-seat-list-spacing-xl);--border-radius-sm: var(--sdc-seat-list-border-radius-sm);--border-radius-md: var(--sdc-seat-list-border-radius-md);--border-radius-lg: var(--sdc-seat-list-border-radius-lg);--border-radius-xl: var(--sdc-seat-list-border-radius-xl);--font-size-sm: var(--sdc-seat-list-font-size-sm);--font-size-base: var(--sdc-seat-list-font-size-base);--font-size-lg: var(--sdc-seat-list-font-size-lg);--font-size-xl: var(--sdc-seat-list-font-size-xl)}.seat-list{width:100%}.seat-list--simple{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-list--simple .ticket{margin-bottom:var(--spacing-sm)}.seat-list--simple .ticket:last-child{margin-bottom:0}.seat-list--grouped{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-group{border-radius:var(--border-radius-md);overflow:hidden;background-color:var(--card-bg);margin-bottom:var(--spacing-sm)}.seat-group:last-child{margin-bottom:0}.seat-group__header{width:100%;background-color:var(--sdc-seat-list-group-header-bg, transparent);border:none;padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background-color .2s ease}.seat-group__header-content{display:flex;align-items:center;gap:var(--spacing-sm)}.seat-group__title{font-size:var(--font-size-base);font-weight:600;color:var(--text-dark)}.seat-group__count{font-size:var(--font-size-sm);color:var(--text-secondary)}.seat-group__chevron{width:16px;height:16px;color:var(--text-secondary);transition:transform .3s ease;flex-shrink:0;display:inline-block}.seat-group__content{max-height:0;overflow:hidden;padding:0 var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:max-height .2s ease-out,padding .2s ease-out}.seat-group__content.expanded{max-height:5000px;padding:var(--spacing-md);opacity:1;transition:max-height .2s ease-in,padding .2s ease-in}.seat-group__content .ticket{margin-bottom:0}.ticket{display:flex;align-items:center;padding:var(--spacing-md);background-color:var(--sdc-seat-list-ticket-bg, #f9fafb);border-radius:var(--border-radius-md);transition:all .2s ease}.ticket:hover{background-color:var(--sdc-seat-list-ticket-bg-hover, #f3f4f6);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.ticket__indicator{width:8px;height:8px;border-radius:50%;margin-right:var(--spacing-md);flex-shrink:0}.ticket__info{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm);color:var(--text-secondary);font-size:var(--font-size-sm)}.ticket__section{font-weight:600;color:var(--text-dark)}.ticket__price{color:var(--accent-blue);font-weight:600;font-size:var(--font-size-base);margin:0 var(--spacing-md)}.ticket__actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm)}.ticket__actions-left{display:flex;align-items:center;gap:var(--spacing-sm)}.ticket__icon-box{display:flex;align-items:center;justify-content:center;background-color:var(--icon-bg);border-radius:var(--border-radius-lg);padding:var(--spacing-xs)}.ticket__icon-box .ticket__icon{width:16px;height:16px;color:var(--accent-blue);cursor:pointer;transition:color .2s ease}.ticket__icon-box .ticket__icon:hover{color:var(--accent-blue-hover)}.ticket__action-btn{background-color:var(--accent-blue);color:var(--text-primary);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.ticket__action-btn:hover{background-color:var(--accent-blue-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb4d}@media(max-width:640px){.ticket{padding:var(--spacing-sm)}.ticket__info{font-size:.75rem;gap:var(--spacing-xs)}.ticket__price{font-size:var(--font-size-sm);margin:0 var(--spacing-sm)}.seat-group__header{padding:var(--spacing-sm) var(--spacing-md)}.seat-group__content{padding:var(--spacing-sm)}}\n"], dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SeatListComponent, isStandalone: true, selector: "sdc-seat-list", inputs: { seats: { classPropertyName: "seats", publicName: "seats", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, groupTemplate: { classPropertyName: "groupTemplate", publicName: "groupTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionButtonText: { classPropertyName: "actionButtonText", publicName: "actionButtonText", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mapPinClick: "mapPinClick", eyeClick: "eyeClick", actionClick: "actionClick", groupToggle: "groupToggle", removeClick: "removeClick" }, providers: [provideIcons({ lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp })], ngImport: i0, template: "<div class=\"sdc-seat-list\">\n @if (isGroupedMode()) {\n <div class=\"seat-list seat-list--grouped\">\n @for (group of groups(); track group.id) {\n @if (groupTemplate(); as tpl) {\n <div class=\"seat-group seat-group--projected\">\n <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: group }\" />\n </div>\n } @else {\n <div class=\"seat-group\">\n <button class=\"seat-group__header\" type=\"button\" (click)=\"toggleGroup(group)\">\n <div class=\"seat-group__header-content\">\n <span class=\"seat-group__title\">{{ group.title }}</span>\n <span class=\"seat-group__count\">{{ getGroupSeatCount(group) }}</span>\n </div>\n <ng-icon\n [name]=\"isGroupExpanded(group) ? 'lucideChevronUp' : 'lucideChevronDown'\"\n size=\"16\"\n class=\"seat-group__chevron\" />\n </button>\n <div class=\"seat-group__content\" [class.expanded]=\"isGroupExpanded(group)\">\n @for (item of group.seats; track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"getGroupIndicatorColor(group)\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button type=\"button\" class=\"ticket__action-btn\" (click)=\"onRemoveClick(item)\">\n {{ getGroupActionButtonText(group) }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"seat-list seat-list--simple\">\n @for (item of seats(); track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"indicatorColor()\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onActionClick(item)\">\n {{ actionButtonText() }}\n </button>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".sdc-seat-list{--sdc-seat-list-primary-bg: #2a2d3a;--sdc-seat-list-card-bg: #ffffff;--sdc-seat-list-text-primary: #ffffff;--sdc-seat-list-text-secondary: #6b7280;--sdc-seat-list-text-dark: #1f2937;--sdc-seat-list-accent-orange: #f97316;--sdc-seat-list-accent-green: #10b981;--sdc-seat-list-accent-blue: #2563eb;--sdc-seat-list-accent-blue-hover: #1d4ed8;--sdc-seat-list-border-color: #e5e7eb;--sdc-seat-list-icon-bg: #f5f5f5;--sdc-seat-list-ticket-bg: #f9fafb;--sdc-seat-list-ticket-bg-hover: #f3f4f6;--sdc-seat-list-group-header-bg: #e4eaef;--sdc-seat-list-group-header-hover: #f9fafb;--sdc-seat-list-spacing-xs: .25rem;--sdc-seat-list-spacing-sm: .5rem;--sdc-seat-list-spacing-md: 1rem;--sdc-seat-list-spacing-lg: 1.5rem;--sdc-seat-list-spacing-xl: 2rem;--sdc-seat-list-border-radius-sm: .375rem;--sdc-seat-list-border-radius-md: .5rem;--sdc-seat-list-border-radius-lg: .75rem;--sdc-seat-list-border-radius-xl: 1.5rem;--sdc-seat-list-font-size-sm: .875rem;--sdc-seat-list-font-size-base: 1rem;--sdc-seat-list-font-size-lg: 1.125rem;--sdc-seat-list-font-size-xl: 1.25rem;--card-bg: var(--sdc-seat-list-card-bg);--text-primary: var(--sdc-seat-list-text-primary);--text-secondary: var(--sdc-seat-list-text-secondary);--text-dark: var(--sdc-seat-list-text-dark);--accent-orange: var(--sdc-seat-list-accent-orange);--accent-green: var(--sdc-seat-list-accent-green);--accent-blue: var(--sdc-seat-list-accent-blue);--accent-blue-hover: var(--sdc-seat-list-accent-blue-hover);--icon-bg: var(--sdc-seat-list-icon-bg);--spacing-xs: var(--sdc-seat-list-spacing-xs);--spacing-sm: var(--sdc-seat-list-spacing-sm);--spacing-md: var(--sdc-seat-list-spacing-md);--spacing-lg: var(--sdc-seat-list-spacing-lg);--spacing-xl: var(--sdc-seat-list-spacing-xl);--border-radius-sm: var(--sdc-seat-list-border-radius-sm);--border-radius-md: var(--sdc-seat-list-border-radius-md);--border-radius-lg: var(--sdc-seat-list-border-radius-lg);--border-radius-xl: var(--sdc-seat-list-border-radius-xl);--font-size-sm: var(--sdc-seat-list-font-size-sm);--font-size-base: var(--sdc-seat-list-font-size-base);--font-size-lg: var(--sdc-seat-list-font-size-lg);--font-size-xl: var(--sdc-seat-list-font-size-xl)}.seat-list{width:100%}.seat-list--simple{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-list--simple .ticket{margin-bottom:var(--spacing-sm)}.seat-list--simple .ticket:last-child{margin-bottom:0}.seat-list--grouped{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-group{border-radius:var(--border-radius-md);overflow:hidden;background-color:var(--card-bg);margin-bottom:var(--spacing-sm)}.seat-group:last-child{margin-bottom:0}.seat-group--projected{background-color:transparent;border-radius:0;overflow:visible}.seat-group__header{width:100%;background-color:var(--sdc-seat-list-group-header-bg, transparent);border:none;padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background-color .2s ease}.seat-group__header-content{display:flex;align-items:center;gap:var(--spacing-sm)}.seat-group__title{font-size:var(--font-size-base);font-weight:600;color:var(--text-dark)}.seat-group__count{font-size:var(--font-size-sm);color:var(--text-secondary)}.seat-group__chevron{width:16px;height:16px;color:var(--text-secondary);transition:transform .3s ease;flex-shrink:0;display:inline-block}.seat-group__content{max-height:0;overflow:hidden;padding:0 var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:max-height .2s ease-out,padding .2s ease-out}.seat-group__content.expanded{max-height:5000px;padding:var(--spacing-md);opacity:1;transition:max-height .2s ease-in,padding .2s ease-in}.seat-group__content .ticket{margin-bottom:0}.ticket{display:flex;align-items:center;padding:var(--spacing-md);background-color:var(--sdc-seat-list-ticket-bg, #f9fafb);border-radius:var(--border-radius-md);transition:all .2s ease}.ticket:hover{background-color:var(--sdc-seat-list-ticket-bg-hover, #f3f4f6);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.ticket__indicator{width:8px;height:8px;border-radius:50%;margin-right:var(--spacing-md);flex-shrink:0}.ticket__info{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm);color:var(--text-secondary);font-size:var(--font-size-sm)}.ticket__section{font-weight:600;color:var(--text-dark)}.ticket__price{color:var(--accent-blue);font-weight:600;font-size:var(--font-size-base);margin:0 var(--spacing-md)}.ticket__actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm)}.ticket__actions-left{display:flex;align-items:center;gap:var(--spacing-sm)}.ticket__icon-box{display:flex;align-items:center;justify-content:center;background-color:var(--icon-bg);border-radius:var(--border-radius-lg);padding:var(--spacing-xs)}.ticket__icon-box .ticket__icon{width:16px;height:16px;color:var(--accent-blue);cursor:pointer;transition:color .2s ease}.ticket__icon-box .ticket__icon:hover{color:var(--accent-blue-hover)}.ticket__action-btn{background-color:var(--accent-blue);color:var(--text-primary);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.ticket__action-btn:hover{background-color:var(--accent-blue-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb4d}@media(max-width:640px){.ticket{padding:var(--spacing-sm)}.ticket__info{font-size:.75rem;gap:var(--spacing-xs)}.ticket__price{font-size:var(--font-size-sm);margin:0 var(--spacing-sm)}.seat-group__header{padding:var(--spacing-sm) var(--spacing-md)}.seat-group__content{padding:var(--spacing-sm)}}\n"], dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
48
51
|
}
|
|
49
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SeatListComponent, decorators: [{
|
|
50
53
|
type: Component,
|
|
51
|
-
args: [{ imports: [NgIcon], providers: [provideIcons({ lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp })], selector: 'sdc-seat-list', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"sdc-seat-list\">\n @if (isGroupedMode()) {\n <div class=\"seat-list seat-list--grouped\">\n @for (group of groups(); track group.id) {\n <div class=\"seat-group\">\n <button class=\"seat-group__header\" (click)=\"toggleGroup(group)\">\n <div class=\"seat-group__header-content\">\n <span class=\"seat-group__title\">{{ group.title }}</span>\n <span class=\"seat-group__count\">{{ getGroupSeatCount(group) }}</span>\n </div>\n <ng-icon\n [name]=\"isGroupExpanded(group) ? 'lucideChevronUp' : 'lucideChevronDown'\"\n size=\"16\"\n class=\"seat-group__chevron\" />\n </button>\n <div class=\"seat-group__content\" [class.expanded]=\"isGroupExpanded(group)\">\n @for (item of group.seats; track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"getGroupIndicatorColor(group)\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onRemoveClick(item)\">\n {{ getGroupActionButtonText(group) }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"seat-list seat-list--simple\">\n @for (item of seats(); track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"indicatorColor()\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onActionClick(item)\">\n {{ actionButtonText() }}\n </button>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".sdc-seat-list{--sdc-seat-list-primary-bg: #2a2d3a;--sdc-seat-list-card-bg: #ffffff;--sdc-seat-list-text-primary: #ffffff;--sdc-seat-list-text-secondary: #6b7280;--sdc-seat-list-text-dark: #1f2937;--sdc-seat-list-accent-orange: #f97316;--sdc-seat-list-accent-green: #10b981;--sdc-seat-list-accent-blue: #2563eb;--sdc-seat-list-accent-blue-hover: #1d4ed8;--sdc-seat-list-border-color: #e5e7eb;--sdc-seat-list-icon-bg: #f5f5f5;--sdc-seat-list-ticket-bg: #f9fafb;--sdc-seat-list-ticket-bg-hover: #f3f4f6;--sdc-seat-list-group-header-bg: #e4eaef;--sdc-seat-list-group-header-hover: #f9fafb;--sdc-seat-list-spacing-xs: .25rem;--sdc-seat-list-spacing-sm: .5rem;--sdc-seat-list-spacing-md: 1rem;--sdc-seat-list-spacing-lg: 1.5rem;--sdc-seat-list-spacing-xl: 2rem;--sdc-seat-list-border-radius-sm: .375rem;--sdc-seat-list-border-radius-md: .5rem;--sdc-seat-list-border-radius-lg: .75rem;--sdc-seat-list-border-radius-xl: 1.5rem;--sdc-seat-list-font-size-sm: .875rem;--sdc-seat-list-font-size-base: 1rem;--sdc-seat-list-font-size-lg: 1.125rem;--sdc-seat-list-font-size-xl: 1.25rem;--card-bg: var(--sdc-seat-list-card-bg);--text-primary: var(--sdc-seat-list-text-primary);--text-secondary: var(--sdc-seat-list-text-secondary);--text-dark: var(--sdc-seat-list-text-dark);--accent-orange: var(--sdc-seat-list-accent-orange);--accent-green: var(--sdc-seat-list-accent-green);--accent-blue: var(--sdc-seat-list-accent-blue);--accent-blue-hover: var(--sdc-seat-list-accent-blue-hover);--icon-bg: var(--sdc-seat-list-icon-bg);--spacing-xs: var(--sdc-seat-list-spacing-xs);--spacing-sm: var(--sdc-seat-list-spacing-sm);--spacing-md: var(--sdc-seat-list-spacing-md);--spacing-lg: var(--sdc-seat-list-spacing-lg);--spacing-xl: var(--sdc-seat-list-spacing-xl);--border-radius-sm: var(--sdc-seat-list-border-radius-sm);--border-radius-md: var(--sdc-seat-list-border-radius-md);--border-radius-lg: var(--sdc-seat-list-border-radius-lg);--border-radius-xl: var(--sdc-seat-list-border-radius-xl);--font-size-sm: var(--sdc-seat-list-font-size-sm);--font-size-base: var(--sdc-seat-list-font-size-base);--font-size-lg: var(--sdc-seat-list-font-size-lg);--font-size-xl: var(--sdc-seat-list-font-size-xl)}.seat-list{width:100%}.seat-list--simple{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-list--simple .ticket{margin-bottom:var(--spacing-sm)}.seat-list--simple .ticket:last-child{margin-bottom:0}.seat-list--grouped{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-group{border-radius:var(--border-radius-md);overflow:hidden;background-color:var(--card-bg);margin-bottom:var(--spacing-sm)}.seat-group:last-child{margin-bottom:0}.seat-group__header{width:100%;background-color:var(--sdc-seat-list-group-header-bg, transparent);border:none;padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background-color .2s ease}.seat-group__header-content{display:flex;align-items:center;gap:var(--spacing-sm)}.seat-group__title{font-size:var(--font-size-base);font-weight:600;color:var(--text-dark)}.seat-group__count{font-size:var(--font-size-sm);color:var(--text-secondary)}.seat-group__chevron{width:16px;height:16px;color:var(--text-secondary);transition:transform .3s ease;flex-shrink:0;display:inline-block}.seat-group__content{max-height:0;overflow:hidden;padding:0 var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:max-height .2s ease-out,padding .2s ease-out}.seat-group__content.expanded{max-height:5000px;padding:var(--spacing-md);opacity:1;transition:max-height .2s ease-in,padding .2s ease-in}.seat-group__content .ticket{margin-bottom:0}.ticket{display:flex;align-items:center;padding:var(--spacing-md);background-color:var(--sdc-seat-list-ticket-bg, #f9fafb);border-radius:var(--border-radius-md);transition:all .2s ease}.ticket:hover{background-color:var(--sdc-seat-list-ticket-bg-hover, #f3f4f6);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.ticket__indicator{width:8px;height:8px;border-radius:50%;margin-right:var(--spacing-md);flex-shrink:0}.ticket__info{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm);color:var(--text-secondary);font-size:var(--font-size-sm)}.ticket__section{font-weight:600;color:var(--text-dark)}.ticket__price{color:var(--accent-blue);font-weight:600;font-size:var(--font-size-base);margin:0 var(--spacing-md)}.ticket__actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm)}.ticket__actions-left{display:flex;align-items:center;gap:var(--spacing-sm)}.ticket__icon-box{display:flex;align-items:center;justify-content:center;background-color:var(--icon-bg);border-radius:var(--border-radius-lg);padding:var(--spacing-xs)}.ticket__icon-box .ticket__icon{width:16px;height:16px;color:var(--accent-blue);cursor:pointer;transition:color .2s ease}.ticket__icon-box .ticket__icon:hover{color:var(--accent-blue-hover)}.ticket__action-btn{background-color:var(--accent-blue);color:var(--text-primary);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.ticket__action-btn:hover{background-color:var(--accent-blue-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb4d}@media(max-width:640px){.ticket{padding:var(--spacing-sm)}.ticket__info{font-size:.75rem;gap:var(--spacing-xs)}.ticket__price{font-size:var(--font-size-sm);margin:0 var(--spacing-sm)}.seat-group__header{padding:var(--spacing-sm) var(--spacing-md)}.seat-group__content{padding:var(--spacing-sm)}}\n"] }]
|
|
52
|
-
}], propDecorators: { seats: [{ type: i0.Input, args: [{ isSignal: true, alias: "seats", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], actionButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtonText", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], mapPinClick: [{ type: i0.Output, args: ["mapPinClick"] }], eyeClick: [{ type: i0.Output, args: ["eyeClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], removeClick: [{ type: i0.Output, args: ["removeClick"] }] } });
|
|
54
|
+
args: [{ imports: [NgIcon, NgTemplateOutlet], providers: [provideIcons({ lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp })], selector: 'sdc-seat-list', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"sdc-seat-list\">\n @if (isGroupedMode()) {\n <div class=\"seat-list seat-list--grouped\">\n @for (group of groups(); track group.id) {\n @if (groupTemplate(); as tpl) {\n <div class=\"seat-group seat-group--projected\">\n <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: group }\" />\n </div>\n } @else {\n <div class=\"seat-group\">\n <button class=\"seat-group__header\" type=\"button\" (click)=\"toggleGroup(group)\">\n <div class=\"seat-group__header-content\">\n <span class=\"seat-group__title\">{{ group.title }}</span>\n <span class=\"seat-group__count\">{{ getGroupSeatCount(group) }}</span>\n </div>\n <ng-icon\n [name]=\"isGroupExpanded(group) ? 'lucideChevronUp' : 'lucideChevronDown'\"\n size=\"16\"\n class=\"seat-group__chevron\" />\n </button>\n <div class=\"seat-group__content\" [class.expanded]=\"isGroupExpanded(group)\">\n @for (item of group.seats; track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"getGroupIndicatorColor(group)\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button type=\"button\" class=\"ticket__action-btn\" (click)=\"onRemoveClick(item)\">\n {{ getGroupActionButtonText(group) }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"seat-list seat-list--simple\">\n @for (item of seats(); track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"indicatorColor()\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onActionClick(item)\">\n {{ actionButtonText() }}\n </button>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".sdc-seat-list{--sdc-seat-list-primary-bg: #2a2d3a;--sdc-seat-list-card-bg: #ffffff;--sdc-seat-list-text-primary: #ffffff;--sdc-seat-list-text-secondary: #6b7280;--sdc-seat-list-text-dark: #1f2937;--sdc-seat-list-accent-orange: #f97316;--sdc-seat-list-accent-green: #10b981;--sdc-seat-list-accent-blue: #2563eb;--sdc-seat-list-accent-blue-hover: #1d4ed8;--sdc-seat-list-border-color: #e5e7eb;--sdc-seat-list-icon-bg: #f5f5f5;--sdc-seat-list-ticket-bg: #f9fafb;--sdc-seat-list-ticket-bg-hover: #f3f4f6;--sdc-seat-list-group-header-bg: #e4eaef;--sdc-seat-list-group-header-hover: #f9fafb;--sdc-seat-list-spacing-xs: .25rem;--sdc-seat-list-spacing-sm: .5rem;--sdc-seat-list-spacing-md: 1rem;--sdc-seat-list-spacing-lg: 1.5rem;--sdc-seat-list-spacing-xl: 2rem;--sdc-seat-list-border-radius-sm: .375rem;--sdc-seat-list-border-radius-md: .5rem;--sdc-seat-list-border-radius-lg: .75rem;--sdc-seat-list-border-radius-xl: 1.5rem;--sdc-seat-list-font-size-sm: .875rem;--sdc-seat-list-font-size-base: 1rem;--sdc-seat-list-font-size-lg: 1.125rem;--sdc-seat-list-font-size-xl: 1.25rem;--card-bg: var(--sdc-seat-list-card-bg);--text-primary: var(--sdc-seat-list-text-primary);--text-secondary: var(--sdc-seat-list-text-secondary);--text-dark: var(--sdc-seat-list-text-dark);--accent-orange: var(--sdc-seat-list-accent-orange);--accent-green: var(--sdc-seat-list-accent-green);--accent-blue: var(--sdc-seat-list-accent-blue);--accent-blue-hover: var(--sdc-seat-list-accent-blue-hover);--icon-bg: var(--sdc-seat-list-icon-bg);--spacing-xs: var(--sdc-seat-list-spacing-xs);--spacing-sm: var(--sdc-seat-list-spacing-sm);--spacing-md: var(--sdc-seat-list-spacing-md);--spacing-lg: var(--sdc-seat-list-spacing-lg);--spacing-xl: var(--sdc-seat-list-spacing-xl);--border-radius-sm: var(--sdc-seat-list-border-radius-sm);--border-radius-md: var(--sdc-seat-list-border-radius-md);--border-radius-lg: var(--sdc-seat-list-border-radius-lg);--border-radius-xl: var(--sdc-seat-list-border-radius-xl);--font-size-sm: var(--sdc-seat-list-font-size-sm);--font-size-base: var(--sdc-seat-list-font-size-base);--font-size-lg: var(--sdc-seat-list-font-size-lg);--font-size-xl: var(--sdc-seat-list-font-size-xl)}.seat-list{width:100%}.seat-list--simple{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-list--simple .ticket{margin-bottom:var(--spacing-sm)}.seat-list--simple .ticket:last-child{margin-bottom:0}.seat-list--grouped{display:flex;flex-direction:column;gap:var(--spacing-sm)}.seat-group{border-radius:var(--border-radius-md);overflow:hidden;background-color:var(--card-bg);margin-bottom:var(--spacing-sm)}.seat-group:last-child{margin-bottom:0}.seat-group--projected{background-color:transparent;border-radius:0;overflow:visible}.seat-group__header{width:100%;background-color:var(--sdc-seat-list-group-header-bg, transparent);border:none;padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background-color .2s ease}.seat-group__header-content{display:flex;align-items:center;gap:var(--spacing-sm)}.seat-group__title{font-size:var(--font-size-base);font-weight:600;color:var(--text-dark)}.seat-group__count{font-size:var(--font-size-sm);color:var(--text-secondary)}.seat-group__chevron{width:16px;height:16px;color:var(--text-secondary);transition:transform .3s ease;flex-shrink:0;display:inline-block}.seat-group__content{max-height:0;overflow:hidden;padding:0 var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:max-height .2s ease-out,padding .2s ease-out}.seat-group__content.expanded{max-height:5000px;padding:var(--spacing-md);opacity:1;transition:max-height .2s ease-in,padding .2s ease-in}.seat-group__content .ticket{margin-bottom:0}.ticket{display:flex;align-items:center;padding:var(--spacing-md);background-color:var(--sdc-seat-list-ticket-bg, #f9fafb);border-radius:var(--border-radius-md);transition:all .2s ease}.ticket:hover{background-color:var(--sdc-seat-list-ticket-bg-hover, #f3f4f6);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.ticket__indicator{width:8px;height:8px;border-radius:50%;margin-right:var(--spacing-md);flex-shrink:0}.ticket__info{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm);color:var(--text-secondary);font-size:var(--font-size-sm)}.ticket__section{font-weight:600;color:var(--text-dark)}.ticket__price{color:var(--accent-blue);font-weight:600;font-size:var(--font-size-base);margin:0 var(--spacing-md)}.ticket__actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm)}.ticket__actions-left{display:flex;align-items:center;gap:var(--spacing-sm)}.ticket__icon-box{display:flex;align-items:center;justify-content:center;background-color:var(--icon-bg);border-radius:var(--border-radius-lg);padding:var(--spacing-xs)}.ticket__icon-box .ticket__icon{width:16px;height:16px;color:var(--accent-blue);cursor:pointer;transition:color .2s ease}.ticket__icon-box .ticket__icon:hover{color:var(--accent-blue-hover)}.ticket__action-btn{background-color:var(--accent-blue);color:var(--text-primary);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.ticket__action-btn:hover{background-color:var(--accent-blue-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb4d}@media(max-width:640px){.ticket{padding:var(--spacing-sm)}.ticket__info{font-size:.75rem;gap:var(--spacing-xs)}.ticket__price{font-size:var(--font-size-sm);margin:0 var(--spacing-sm)}.seat-group__header{padding:var(--spacing-sm) var(--spacing-md)}.seat-group__content{padding:var(--spacing-sm)}}\n"] }]
|
|
55
|
+
}], propDecorators: { seats: [{ type: i0.Input, args: [{ isSignal: true, alias: "seats", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplate", required: false }] }], actionButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtonText", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], mapPinClick: [{ type: i0.Output, args: ["mapPinClick"] }], eyeClick: [{ type: i0.Output, args: ["eyeClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], removeClick: [{ type: i0.Output, args: ["removeClick"] }] } });
|
|
53
56
|
|
|
54
57
|
class CartComponent {
|
|
58
|
+
/**
|
|
59
|
+
* Strips outer card chrome (max-width, shadow, padding) so the cart can sit inside an existing shell.
|
|
60
|
+
*/
|
|
55
61
|
headerTitle = input('Your Current Tickets', ...(ngDevMode ? [{ debugName: "headerTitle" }] : []));
|
|
56
62
|
selectAllText = input('Select All', ...(ngDevMode ? [{ debugName: "selectAllText" }] : []));
|
|
57
63
|
relocateButtonText = input('Relocate', ...(ngDevMode ? [{ debugName: "relocateButtonText" }] : []));
|
|
58
64
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
59
65
|
groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : []));
|
|
66
|
+
/** Compact layout for embedding inside host sidebars (e.g. Group Sales). */
|
|
67
|
+
embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
|
|
68
|
+
/** When false, hides title + “select all” header row. */
|
|
69
|
+
showCartHeader = input(true, ...(ngDevMode ? [{ debugName: "showCartHeader" }] : []));
|
|
70
|
+
/** Optional per-group body; `$implicit` is {@link SeatGroup}. */
|
|
71
|
+
groupTemplate = input(null, ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
|
|
60
72
|
selectAll = output();
|
|
61
73
|
mapPinClick = output();
|
|
62
74
|
eyeClick = output();
|
|
@@ -82,12 +94,12 @@ class CartComponent {
|
|
|
82
94
|
this.groupToggle.emit(event);
|
|
83
95
|
}
|
|
84
96
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
85
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CartComponent, isStandalone: true, selector: "sdc-cart", inputs: { headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, relocateButtonText: { classPropertyName: "relocateButtonText", publicName: "relocateButtonText", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAll: "selectAll", mapPinClick: "mapPinClick", eyeClick: "eyeClick", relocateClick: "relocateClick", removeClick: "removeClick", groupToggle: "groupToggle" }, ngImport: i0, template: "<div class=\"sdc-cart\">\n <div class=\"cart\">\n <div class=\"cart__container\">\n <div class=\"cart__header\">\n
|
|
97
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CartComponent, isStandalone: true, selector: "sdc-cart", inputs: { headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, relocateButtonText: { classPropertyName: "relocateButtonText", publicName: "relocateButtonText", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, showCartHeader: { classPropertyName: "showCartHeader", publicName: "showCartHeader", isSignal: true, isRequired: false, transformFunction: null }, groupTemplate: { classPropertyName: "groupTemplate", publicName: "groupTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAll: "selectAll", mapPinClick: "mapPinClick", eyeClick: "eyeClick", relocateClick: "relocateClick", removeClick: "removeClick", groupToggle: "groupToggle" }, ngImport: i0, template: "<div class=\"sdc-cart\" [class.sdc-cart--embedded]=\"embedded()\">\n <div class=\"cart\">\n <div class=\"cart__container\">\n @if (showCartHeader()) {\n <div class=\"cart__header\">\n <h2 class=\"cart__header-title\">{{ headerTitle() }}</h2>\n <button type=\"button\" class=\"cart__select-all\" (click)=\"onSelectAll()\">\n {{ selectAllText() }}\n </button>\n </div>\n }\n\n <div class=\"cart__tickets\">\n @if (groups().length > 0) {\n @if (groupTemplate(); as tpl) {\n @for (group of groups(); track group.id) {\n <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: group }\" />\n }\n } @else {\n <sdc-seat-list\n [groups]=\"groups()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (removeClick)=\"onRemoveClick($event)\"\n (groupToggle)=\"onGroupToggle($event)\" />\n }\n } @else {\n <sdc-seat-list\n [seats]=\"items()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (actionClick)=\"onRelocateClick($event)\" />\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".sdc-cart{--primary-bg: #2a2d3a;--card-bg: #ffffff;--card-header-bg: #9ca3af;--text-primary: #ffffff;--text-secondary: #6b7280;--text-dark: #1f2937;--accent-orange: #f97316;--accent-blue: #2563eb;--accent-blue-hover: #1d4ed8;--border-color: #e5e7eb;--icon-bg: #f5f5f5;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--border-radius-sm: .375rem;--border-radius-md: .5rem;--border-radius-lg: 1rem;--border-radius-xl: 1.5rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem}.cart{max-width:500px;margin:0 auto}.sdc-cart--embedded .cart__container{border-radius:0;box-shadow:none}.cart__title{color:var(--text-primary);font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-lg);text-align:left}.cart__container{background-color:var(--card-bg);border-radius:var(--border-radius-xl);overflow:hidden;box-shadow:0 10px 25px #0000001a}.cart__header{background-color:var(--card-header-bg);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center}.cart__header-title{color:var(--text-primary);font-size:var(--font-size-lg);font-weight:600}.cart__select-all{background-color:var(--text-primary);color:var(--text-secondary);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .2s ease}.cart__select-all:hover{background-color:#f3f4f6;transform:translateY(-1px)}.cart__tickets{padding:var(--spacing-md)}.sdc-cart--embedded .cart{max-width:none;margin:0}.sdc-cart--embedded .cart__container{background-color:transparent;border-radius:0;box-shadow:none;overflow:visible}.sdc-cart--embedded .cart__tickets{padding:0}@media(max-width:640px){body{padding:var(--spacing-md)}.cart__title{font-size:var(--font-size-xl)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeatListComponent, selector: "sdc-seat-list", inputs: ["seats", "groups", "groupTemplate", "actionButtonText", "indicatorColor"], outputs: ["mapPinClick", "eyeClick", "actionClick", "groupToggle", "removeClick"] }] });
|
|
86
98
|
}
|
|
87
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CartComponent, decorators: [{
|
|
88
100
|
type: Component,
|
|
89
|
-
args: [{ imports: [SeatListComponent], selector: 'sdc-cart', standalone: true, template: "<div class=\"sdc-cart\">\n <div class=\"cart\">\n <div class=\"cart__container\">\n <div class=\"cart__header\">\n
|
|
90
|
-
}], propDecorators: { headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], relocateButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "relocateButtonText", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], selectAll: [{ type: i0.Output, args: ["selectAll"] }], mapPinClick: [{ type: i0.Output, args: ["mapPinClick"] }], eyeClick: [{ type: i0.Output, args: ["eyeClick"] }], relocateClick: [{ type: i0.Output, args: ["relocateClick"] }], removeClick: [{ type: i0.Output, args: ["removeClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }] } });
|
|
101
|
+
args: [{ imports: [NgTemplateOutlet, SeatListComponent], selector: 'sdc-cart', standalone: true, template: "<div class=\"sdc-cart\" [class.sdc-cart--embedded]=\"embedded()\">\n <div class=\"cart\">\n <div class=\"cart__container\">\n @if (showCartHeader()) {\n <div class=\"cart__header\">\n <h2 class=\"cart__header-title\">{{ headerTitle() }}</h2>\n <button type=\"button\" class=\"cart__select-all\" (click)=\"onSelectAll()\">\n {{ selectAllText() }}\n </button>\n </div>\n }\n\n <div class=\"cart__tickets\">\n @if (groups().length > 0) {\n @if (groupTemplate(); as tpl) {\n @for (group of groups(); track group.id) {\n <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: group }\" />\n }\n } @else {\n <sdc-seat-list\n [groups]=\"groups()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (removeClick)=\"onRemoveClick($event)\"\n (groupToggle)=\"onGroupToggle($event)\" />\n }\n } @else {\n <sdc-seat-list\n [seats]=\"items()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (actionClick)=\"onRelocateClick($event)\" />\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".sdc-cart{--primary-bg: #2a2d3a;--card-bg: #ffffff;--card-header-bg: #9ca3af;--text-primary: #ffffff;--text-secondary: #6b7280;--text-dark: #1f2937;--accent-orange: #f97316;--accent-blue: #2563eb;--accent-blue-hover: #1d4ed8;--border-color: #e5e7eb;--icon-bg: #f5f5f5;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--border-radius-sm: .375rem;--border-radius-md: .5rem;--border-radius-lg: 1rem;--border-radius-xl: 1.5rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem}.cart{max-width:500px;margin:0 auto}.sdc-cart--embedded .cart__container{border-radius:0;box-shadow:none}.cart__title{color:var(--text-primary);font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-lg);text-align:left}.cart__container{background-color:var(--card-bg);border-radius:var(--border-radius-xl);overflow:hidden;box-shadow:0 10px 25px #0000001a}.cart__header{background-color:var(--card-header-bg);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center}.cart__header-title{color:var(--text-primary);font-size:var(--font-size-lg);font-weight:600}.cart__select-all{background-color:var(--text-primary);color:var(--text-secondary);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .2s ease}.cart__select-all:hover{background-color:#f3f4f6;transform:translateY(-1px)}.cart__tickets{padding:var(--spacing-md)}.sdc-cart--embedded .cart{max-width:none;margin:0}.sdc-cart--embedded .cart__container{background-color:transparent;border-radius:0;box-shadow:none;overflow:visible}.sdc-cart--embedded .cart__tickets{padding:0}@media(max-width:640px){body{padding:var(--spacing-md)}.cart__title{font-size:var(--font-size-xl)}}\n"] }]
|
|
102
|
+
}], propDecorators: { headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], relocateButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "relocateButtonText", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], showCartHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCartHeader", required: false }] }], groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplate", required: false }] }], selectAll: [{ type: i0.Output, args: ["selectAll"] }], mapPinClick: [{ type: i0.Output, args: ["mapPinClick"] }], eyeClick: [{ type: i0.Output, args: ["eyeClick"] }], relocateClick: [{ type: i0.Output, args: ["relocateClick"] }], removeClick: [{ type: i0.Output, args: ["removeClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }] } });
|
|
91
103
|
|
|
92
104
|
/*
|
|
93
105
|
* Public API Surface of software-division-components
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"3ddv-software-division-components-dvm-cart.mjs","sources":["../../dvm/cart/seat-list.component.ts","../../dvm/cart/seat-list.component.html","../../dvm/cart/cart.component.ts","../../dvm/cart/cart.component.html","../../dvm/cart/public-api.ts","../../dvm/cart/3ddv-software-division-components-dvm-cart.ts"],"sourcesContent":["import { Component, input, output, computed, ViewEncapsulation } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';\nimport { CartItem } from './cart.types';\n\nexport interface SeatGroup {\n id: string | number;\n title: string;\n count?: string;\n seats: CartItem[];\n expanded?: boolean;\n indicatorColor?: string;\n actionButtonText?: string;\n}\n\n@Component({\n imports: [NgIcon],\n providers: [provideIcons({ lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp })],\n selector: 'sdc-seat-list',\n standalone: true,\n templateUrl: './seat-list.component.html',\n styleUrls: ['./seat-list.component.css'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class SeatListComponent {\n seats = input<CartItem[]>([]);\n groups = input<SeatGroup[]>([]);\n actionButtonText = input<string>('Relocate');\n indicatorColor = input<string>('#f97316');\n\n mapPinClick = output<CartItem>();\n eyeClick = output<CartItem>();\n actionClick = output<CartItem>();\n groupToggle = output<{ groupId: string | number; expanded: boolean }>();\n removeClick = output<CartItem>();\n\n isGroupedMode = computed(() => this.groups().length > 0);\n\n onMapPinClick(item: CartItem): void {\n this.mapPinClick.emit(item);\n }\n\n onEyeClick(item: CartItem): void {\n this.eyeClick.emit(item);\n }\n\n onActionClick(item: CartItem): void {\n this.actionClick.emit(item);\n }\n\n onRemoveClick(item: CartItem): void {\n this.removeClick.emit(item);\n }\n\n isGroupExpanded(group: SeatGroup): boolean {\n return group.expanded !== false;\n }\n\n toggleGroup(group: SeatGroup): void {\n const expanded = !this.isGroupExpanded(group);\n group.expanded = expanded;\n this.groupToggle.emit({ groupId: group.id, expanded });\n }\n\n getGroupIndicatorColor(group: SeatGroup): string {\n return group.indicatorColor || this.indicatorColor();\n }\n\n getGroupActionButtonText(group: SeatGroup): string {\n return group.actionButtonText || this.actionButtonText();\n }\n\n getGroupSeatCount(group: SeatGroup): string {\n return `(${group.seats.length})`;\n }\n}\n","<div class=\"sdc-seat-list\">\n @if (isGroupedMode()) {\n <div class=\"seat-list seat-list--grouped\">\n @for (group of groups(); track group.id) {\n <div class=\"seat-group\">\n <button class=\"seat-group__header\" (click)=\"toggleGroup(group)\">\n <div class=\"seat-group__header-content\">\n <span class=\"seat-group__title\">{{ group.title }}</span>\n <span class=\"seat-group__count\">{{ getGroupSeatCount(group) }}</span>\n </div>\n <ng-icon\n [name]=\"isGroupExpanded(group) ? 'lucideChevronUp' : 'lucideChevronDown'\"\n size=\"16\"\n class=\"seat-group__chevron\" />\n </button>\n <div class=\"seat-group__content\" [class.expanded]=\"isGroupExpanded(group)\">\n @for (item of group.seats; track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"getGroupIndicatorColor(group)\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onRemoveClick(item)\">\n {{ getGroupActionButtonText(group) }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"seat-list seat-list--simple\">\n @for (item of seats(); track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"indicatorColor()\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onActionClick(item)\">\n {{ actionButtonText() }}\n </button>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","import { Component, input, output } from '@angular/core';\nimport { SeatListComponent, SeatGroup } from './seat-list.component';\nimport { CartItem } from './cart.types';\n\n@Component({\n imports: [SeatListComponent],\n selector: 'sdc-cart',\n standalone: true,\n templateUrl: './cart.component.html',\n styleUrls: ['./cart.component.css'],\n})\nexport class CartComponent {\n headerTitle = input<string>('Your Current Tickets');\n selectAllText = input<string>('Select All');\n relocateButtonText = input<string>('Relocate');\n items = input<CartItem[]>([]);\n groups = input<SeatGroup[]>([]);\n\n selectAll = output<void>();\n mapPinClick = output<CartItem>();\n eyeClick = output<CartItem>();\n relocateClick = output<CartItem>();\n removeClick = output<CartItem>();\n groupToggle = output<{ groupId: string | number; expanded: boolean }>();\n\n onSelectAll(): void {\n this.selectAll.emit();\n }\n\n onMapPinClick(item: CartItem): void {\n this.mapPinClick.emit(item);\n }\n\n onEyeClick(item: CartItem): void {\n this.eyeClick.emit(item);\n }\n\n onRelocateClick(item: CartItem): void {\n this.relocateClick.emit(item);\n }\n\n onRemoveClick(item: CartItem): void {\n this.removeClick.emit(item);\n }\n\n onGroupToggle(event: { groupId: string | number; expanded: boolean }): void {\n this.groupToggle.emit(event);\n }\n}\n","<div class=\"sdc-cart\">\n <div class=\"cart\">\n <div class=\"cart__container\">\n <div class=\"cart__header\">\n <h2 class=\"cart__header-title\">{{ headerTitle() }}</h2>\n <button class=\"cart__select-all\" (click)=\"onSelectAll()\">{{ selectAllText() }}</button>\n </div>\n\n <div class=\"cart__tickets\">\n @if (groups().length > 0) {\n <sdc-seat-list\n [groups]=\"groups()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (removeClick)=\"onRemoveClick($event)\"\n (groupToggle)=\"onGroupToggle($event)\">\n </sdc-seat-list>\n } @else {\n <sdc-seat-list\n [seats]=\"items()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (actionClick)=\"onRelocateClick($event)\">\n </sdc-seat-list>\n }\n </div>\n </div>\n </div>\n</div>\n","/*\n * Public API Surface of software-division-components\n */\n\nexport * from './cart.component';\nexport * from './seat-list.component';\nexport * from './cart.types';\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"3ddv-software-division-components-dvm-cart.mjs","sources":["../../dvm/cart/seat-list.component.ts","../../dvm/cart/seat-list.component.html","../../dvm/cart/cart.component.ts","../../dvm/cart/cart.component.html","../../dvm/cart/public-api.ts","../../dvm/cart/3ddv-software-division-components-dvm-cart.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, input, output, computed, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';\nimport { CartItem, SeatGroup } from './cart.types';\n\nexport type { SeatGroup } from './cart.types';\n\n@Component({\n imports: [NgIcon, NgTemplateOutlet],\n providers: [provideIcons({ lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp })],\n selector: 'sdc-seat-list',\n standalone: true,\n templateUrl: './seat-list.component.html',\n styleUrls: ['./seat-list.component.css'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class SeatListComponent {\n seats = input<CartItem[]>([]);\n groups = input<SeatGroup[]>([]);\n /** When set, replaces each group's default header + ticket list with projected markup; context: `{ $implicit: SeatGroup }`. */\n groupTemplate = input<TemplateRef<{ $implicit: SeatGroup }> | null>(null);\n actionButtonText = input<string>('Relocate');\n indicatorColor = input<string>('#f97316');\n\n mapPinClick = output<CartItem>();\n eyeClick = output<CartItem>();\n actionClick = output<CartItem>();\n groupToggle = output<{ groupId: string | number; expanded: boolean }>();\n removeClick = output<CartItem>();\n\n isGroupedMode = computed(() => this.groups().length > 0);\n\n onMapPinClick(item: CartItem): void {\n this.mapPinClick.emit(item);\n }\n\n onEyeClick(item: CartItem): void {\n this.eyeClick.emit(item);\n }\n\n onActionClick(item: CartItem): void {\n this.actionClick.emit(item);\n }\n\n onRemoveClick(item: CartItem): void {\n this.removeClick.emit(item);\n }\n\n isGroupExpanded(group: SeatGroup): boolean {\n return group.expanded !== false;\n }\n\n toggleGroup(group: SeatGroup): void {\n const expanded = !this.isGroupExpanded(group);\n group.expanded = expanded;\n this.groupToggle.emit({ groupId: group.id, expanded });\n }\n\n getGroupIndicatorColor(group: SeatGroup): string {\n return group.indicatorColor || this.indicatorColor();\n }\n\n getGroupActionButtonText(group: SeatGroup): string {\n return group.actionButtonText || this.actionButtonText();\n }\n\n getGroupSeatCount(group: SeatGroup): string {\n return `(${group.seats.length})`;\n }\n}\n","<div class=\"sdc-seat-list\">\n @if (isGroupedMode()) {\n <div class=\"seat-list seat-list--grouped\">\n @for (group of groups(); track group.id) {\n @if (groupTemplate(); as tpl) {\n <div class=\"seat-group seat-group--projected\">\n <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: group }\" />\n </div>\n } @else {\n <div class=\"seat-group\">\n <button class=\"seat-group__header\" type=\"button\" (click)=\"toggleGroup(group)\">\n <div class=\"seat-group__header-content\">\n <span class=\"seat-group__title\">{{ group.title }}</span>\n <span class=\"seat-group__count\">{{ getGroupSeatCount(group) }}</span>\n </div>\n <ng-icon\n [name]=\"isGroupExpanded(group) ? 'lucideChevronUp' : 'lucideChevronDown'\"\n size=\"16\"\n class=\"seat-group__chevron\" />\n </button>\n <div class=\"seat-group__content\" [class.expanded]=\"isGroupExpanded(group)\">\n @for (item of group.seats; track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"getGroupIndicatorColor(group)\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button type=\"button\" class=\"ticket__action-btn\" (click)=\"onRemoveClick(item)\">\n {{ getGroupActionButtonText(group) }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"seat-list seat-list--simple\">\n @for (item of seats(); track item.id) {\n <div class=\"ticket\">\n <div class=\"ticket__indicator\" [style.background-color]=\"indicatorColor()\"></div>\n <div class=\"ticket__info\">\n <span\n >Section <span class=\"ticket__section\">{{ item.section }}</span></span\n >\n <span\n >Row <span class=\"ticket__section\">{{ item.row }}</span></span\n >\n <span\n >Seat <span class=\"ticket__section\">{{ item.seat }}</span></span\n >\n </div>\n <div class=\"ticket__actions\">\n <div class=\"ticket__actions-left\">\n <div class=\"ticket__price\">${{ item.price }}</div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideMapPin\" size=\"base\" class=\"ticket__icon\" (click)=\"onMapPinClick(item)\" />\n </div>\n <div class=\"ticket__icon-box\">\n <ng-icon hlm name=\"lucideEye\" size=\"base\" class=\"ticket__icon\" (click)=\"onEyeClick(item)\" />\n </div>\n </div>\n <button class=\"ticket__action-btn\" (click)=\"onActionClick(item)\">\n {{ actionButtonText() }}\n </button>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","import { NgTemplateOutlet } from '@angular/common';\nimport { Component, input, output, TemplateRef } from '@angular/core';\nimport { CartItem } from './cart.types';\nimport { SeatGroup, SeatListComponent } from './seat-list.component';\n\n@Component({\n imports: [NgTemplateOutlet, SeatListComponent],\n selector: 'sdc-cart',\n standalone: true,\n templateUrl: './cart.component.html',\n styleUrls: ['./cart.component.css'],\n})\nexport class CartComponent {\n /**\n * Strips outer card chrome (max-width, shadow, padding) so the cart can sit inside an existing shell.\n */\n headerTitle = input<string>('Your Current Tickets');\n selectAllText = input<string>('Select All');\n relocateButtonText = input<string>('Relocate');\n items = input<CartItem[]>([]);\n groups = input<SeatGroup[]>([]);\n /** Compact layout for embedding inside host sidebars (e.g. Group Sales). */\n embedded = input(false);\n /** When false, hides title + “select all” header row. */\n showCartHeader = input(true);\n /** Optional per-group body; `$implicit` is {@link SeatGroup}. */\n groupTemplate = input<TemplateRef<{ $implicit: SeatGroup }> | null>(null);\n\n selectAll = output<void>();\n mapPinClick = output<CartItem>();\n eyeClick = output<CartItem>();\n relocateClick = output<CartItem>();\n removeClick = output<CartItem>();\n groupToggle = output<{ groupId: string | number; expanded: boolean }>();\n\n onSelectAll(): void {\n this.selectAll.emit();\n }\n\n onMapPinClick(item: CartItem): void {\n this.mapPinClick.emit(item);\n }\n\n onEyeClick(item: CartItem): void {\n this.eyeClick.emit(item);\n }\n\n onRelocateClick(item: CartItem): void {\n this.relocateClick.emit(item);\n }\n\n onRemoveClick(item: CartItem): void {\n this.removeClick.emit(item);\n }\n\n onGroupToggle(event: { groupId: string | number; expanded: boolean }): void {\n this.groupToggle.emit(event);\n }\n}\n","<div class=\"sdc-cart\" [class.sdc-cart--embedded]=\"embedded()\">\n <div class=\"cart\">\n <div class=\"cart__container\">\n @if (showCartHeader()) {\n <div class=\"cart__header\">\n <h2 class=\"cart__header-title\">{{ headerTitle() }}</h2>\n <button type=\"button\" class=\"cart__select-all\" (click)=\"onSelectAll()\">\n {{ selectAllText() }}\n </button>\n </div>\n }\n\n <div class=\"cart__tickets\">\n @if (groups().length > 0) {\n @if (groupTemplate(); as tpl) {\n @for (group of groups(); track group.id) {\n <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: group }\" />\n }\n } @else {\n <sdc-seat-list\n [groups]=\"groups()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (removeClick)=\"onRemoveClick($event)\"\n (groupToggle)=\"onGroupToggle($event)\" />\n }\n } @else {\n <sdc-seat-list\n [seats]=\"items()\"\n [actionButtonText]=\"relocateButtonText()\"\n (mapPinClick)=\"onMapPinClick($event)\"\n (eyeClick)=\"onEyeClick($event)\"\n (actionClick)=\"onRelocateClick($event)\" />\n }\n </div>\n </div>\n </div>\n</div>\n","/*\n * Public API Surface of software-division-components\n */\n\nexport * from './cart.component';\nexport * from './seat-list.component';\nexport * from './cart.types';\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,28 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable } from '@angular/core';
|
|
3
|
+
import { input, computed, Component, Injectable } from '@angular/core';
|
|
3
4
|
|
|
4
5
|
class LoaderComponent {
|
|
6
|
+
/** Visible message under the spinner. */
|
|
7
|
+
text = input('Loading...', ...(ngDevMode ? [{ debugName: "text" }] : []));
|
|
8
|
+
/** When false, the overlay scrim is transparent (e.g. loading inside a white panel). */
|
|
9
|
+
showBackground = input(true, ...(ngDevMode ? [{ debugName: "showBackground" }] : []));
|
|
10
|
+
/** Host attribute hook for CSS: `md` (default) or `sm` spinner. */
|
|
11
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
12
|
+
surfaceClass = computed(() => {
|
|
13
|
+
const classes = ['sdc-loader__surface'];
|
|
14
|
+
if (!this.showBackground()) {
|
|
15
|
+
classes.push('sdc-loader__surface--plain');
|
|
16
|
+
}
|
|
17
|
+
return classes.join(' ');
|
|
18
|
+
}, ...(ngDevMode ? [{ debugName: "surfaceClass" }] : []));
|
|
5
19
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: LoaderComponent, isStandalone: true, selector: "sdc-loader", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sdc-loader-inner\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n <span class=\"sdc-loader-spinner\" aria-hidden=\"true\"></span>\n <span class=\"sdc-loader-label\">Loading...</span>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;min-height:100%;background-color:#0009}.sdc-loader-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sdc-loader-inner-gap, var(--space-4, 1rem));padding:0;border-radius:0;background-color:transparent}.sdc-loader-spinner{box-sizing:border-box;flex-shrink:0;width:var(--sdc-loader-spinner-size, 2.5rem);height:var(--sdc-loader-spinner-size, 2.5rem);border-radius:var(--radius-full, 9999px);border-style:solid;border-width:var(--sdc-loader-spinner-border-width, var(--border-3, 3px));border-color:color-mix(in srgb,var(--sdc-loader-accent, var(--color-primary, hsl(29 100% 53%))) 28%,transparent);border-top-color:var(--sdc-loader-accent, var(--color-primary, hsl(29 100% 53%)));animation:sdc-loader-spin .85s linear infinite}.sdc-loader-label{flex-shrink:0;font-family:var(--font-primary, inherit);font-size:var(--sdc-loader-label-font-size, var(--text-base, 1rem));font-weight:var(--font-semibold, 600);line-height:var(--leading-normal, 1.5);color:var(--color-pure-white, #ffffff);white-space:nowrap}@keyframes sdc-loader-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
7
21
|
}
|
|
8
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
9
23
|
type: Component,
|
|
10
|
-
args: [{ selector: 'sdc-loader', standalone: true, template: "<div
|
|
11
|
-
}] });
|
|
24
|
+
args: [{ selector: 'sdc-loader', standalone: true, imports: [CommonModule], template: "<div class=\"sdc-loader-inner\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n <span class=\"sdc-loader-spinner\" aria-hidden=\"true\"></span>\n <span class=\"sdc-loader-label\">Loading...</span>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;min-height:100%;background-color:#0009}.sdc-loader-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sdc-loader-inner-gap, var(--space-4, 1rem));padding:0;border-radius:0;background-color:transparent}.sdc-loader-spinner{box-sizing:border-box;flex-shrink:0;width:var(--sdc-loader-spinner-size, 2.5rem);height:var(--sdc-loader-spinner-size, 2.5rem);border-radius:var(--radius-full, 9999px);border-style:solid;border-width:var(--sdc-loader-spinner-border-width, var(--border-3, 3px));border-color:color-mix(in srgb,var(--sdc-loader-accent, var(--color-primary, hsl(29 100% 53%))) 28%,transparent);border-top-color:var(--sdc-loader-accent, var(--color-primary, hsl(29 100% 53%)));animation:sdc-loader-spin .85s linear infinite}.sdc-loader-label{flex-shrink:0;font-family:var(--font-primary, inherit);font-size:var(--sdc-loader-label-font-size, var(--text-base, 1rem));font-weight:var(--font-semibold, 600);line-height:var(--leading-normal, 1.5);color:var(--color-pure-white, #ffffff);white-space:nowrap}@keyframes sdc-loader-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
25
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], showBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackground", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
12
26
|
|
|
13
27
|
class LoaderService {
|
|
14
28
|
constructor() { }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"3ddv-software-division-components-dvm-loader.mjs","sources":["../../dvm/loader/loader.component.ts","../../dvm/loader/loader.component.html","../../dvm/loader/loader.service.ts","../../dvm/loader/public-api.ts","../../dvm/loader/3ddv-software-division-components-dvm-loader.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'sdc-loader',\n standalone: true,\n templateUrl: './loader.component.html',\n})\nexport class LoaderComponent {}\n","<div
|
|
1
|
+
{"version":3,"file":"3ddv-software-division-components-dvm-loader.mjs","sources":["../../dvm/loader/loader.component.ts","../../dvm/loader/loader.component.html","../../dvm/loader/loader.service.ts","../../dvm/loader/public-api.ts","../../dvm/loader/3ddv-software-division-components-dvm-loader.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'sdc-loader',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './loader.component.html',\n styleUrl: './loader.component.css',\n})\nexport class LoaderComponent {\n /** Visible message under the spinner. */\n public readonly text = input('Loading...');\n\n /** When false, the overlay scrim is transparent (e.g. loading inside a white panel). */\n public readonly showBackground = input(true);\n\n /** Host attribute hook for CSS: `md` (default) or `sm` spinner. */\n public readonly size = input<'md' | 'sm'>('md');\n\n protected readonly surfaceClass = computed(() => {\n const classes = ['sdc-loader__surface'];\n if (!this.showBackground()) {\n classes.push('sdc-loader__surface--plain');\n }\n return classes.join(' ');\n });\n}\n","<div class=\"sdc-loader-inner\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n <span class=\"sdc-loader-spinner\" aria-hidden=\"true\"></span>\n <span class=\"sdc-loader-label\">Loading...</span>\n</div>\n","import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class LoaderService {\n constructor() {}\n}\n","/*\n * Public API Surface of software-division-components\n */\n\nexport * from './loader.component';\nexport * from './loader.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAUa,eAAe,CAAA;;AAEV,IAAA,IAAI,GAAG,KAAK,CAAC,YAAY,gDAAC;;AAG1B,IAAA,cAAc,GAAG,KAAK,CAAC,IAAI,0DAAC;;AAG5B,IAAA,IAAI,GAAG,KAAK,CAAc,IAAI,gDAAC;AAE5B,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC9C,QAAA,MAAM,OAAO,GAAG,CAAC,qBAAqB,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE;AAC1B,YAAA,OAAO,CAAC,IAAI,CAAC,4BAA4B,CAAC;QAC5C;AACA,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1B,IAAA,CAAC,wDAAC;uGAhBS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV5B,6NAIA,EAAA,MAAA,EAAA,CAAA,4tCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEY,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,6NAAA,EAAA,MAAA,EAAA,CAAA,4tCAAA,CAAA,EAAA;;;MEDZ,aAAa,CAAA;AACxB,IAAA,WAAA,GAAA,EAAe;uGADJ,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAb,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cAFZ,MAAM,EAAA,CAAA;;2FAEP,aAAa,EAAA,UAAA,EAAA,CAAA;kBAHzB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACJD;;AAEG;;ACFH;;AAEG;;;;"}
|