@gomusdev/web-components 1.16.1 → 1.17.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.
Files changed (4) hide show
  1. package/dist-js/gomus-webcomponents.css +318 -299
  2. package/dist-js/gomus-webcomponents.iife.js +1 -0
  3. package/dist-js/gomus-webcomponents.js +1 -0
  4. package/package.json +1 -1
package/dist-js/gomus-webcomponents.css CHANGED
@@ -16,7 +16,7 @@
16
16
  display: inline-block;
17
17
  padding: 10px 20px;
18
18
  border: 2px solid #ccc;
19
- border-radius: 5px;
19
+ border-radius: 0;
20
20
  cursor: pointer;
21
21
  transition:
22
22
  background-color 0.3s, border-color 0.3s;
@@ -78,63 +78,23 @@
78
78
  outline: 2px solid #0052cc;
79
79
  }
80
80
 
81
- :global .innerZoomElementWrapper .events ul {
82
- list-style: none;
83
- display: grid;
84
- grid-template-columns: repeat(auto-fit, 10rem);
85
- grid-gap: 1rem;
86
- gap: 1rem;
87
- grid-template-rows: auto auto auto;
88
- }
89
-
90
- :global .innerZoomElementWrapper .events li {
91
- display: flex;
92
- flex-direction: column;
93
- justify-content: space-between;
94
- height: 100%;
95
- }
96
-
97
- :global .innerZoomElementWrapper .events go-event {
98
- background: #fff0dd; /* Soft light gray for a modern look */
99
- padding: 1.5rem;
100
- display: flex;
101
- flex-direction: column;
102
- border-radius: 1rem; /* Larger radius for a smoother, rounded appearance */
103
- height: 100%; /* Ensures cells stretch to fill the row height */
104
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
105
- transition: box-shadow 0.3s ease; /* Smooth shadow transition on hover */
106
- }
107
-
108
- :global .innerZoomElementWrapper .events go-event:hover {
109
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
110
- }
111
-
112
- :global .innerZoomElementWrapper .events go-event-title {
113
- font-weight: bold;
114
- }
115
-
116
- :global .innerZoomElementWrapper .events go-event-kind {
117
- font-size: 0.8rem;
118
- flex: 100;
119
- margin-bottom: 1rem;
120
- }
121
-
122
- :global .innerZoomElementWrapper .events go-event-date {
123
- }
124
-
125
81
  :host,
126
82
  :root {
127
83
  --black: #111;
128
84
  --red: red;
129
85
  --light-red: #fff0f0;
130
86
  --primary: #12826a;
87
+ --primary-hover: #19987e;
131
88
  --invalid-border: 4px solid var(--red);
132
- --color-contrast: #111;
89
+ --fg: #111;
90
+ --bg: white;
91
+ --border: 3px solid transparent;
92
+ --outline-hover: 3px solid var(--primary);
133
93
  }
134
94
 
135
95
  :host,
136
96
  :root {
137
- --color-contrast: #111;
97
+ --fg: #111;
138
98
  --black: #111;
139
99
  --red: red;
140
100
  --light-red: #fff0f0;
@@ -142,7 +102,7 @@
142
102
  }
143
103
 
144
104
  :host .is-invalid {
145
- --color-contrast: #ff0000;
105
+ --fg: #ff0000;
146
106
  background-color: #fff0f0;
147
107
  background-color: var(--light-red);
148
108
  border-left: 4px solid red;
@@ -150,7 +110,7 @@
150
110
  }
151
111
 
152
112
  :root .is-invalid {
153
- --color-contrast: #ff0000;
113
+ --fg: #ff0000;
154
114
  background-color: #fff0f0;
155
115
  background-color: var(--light-red);
156
116
  border-left: 4px solid red;
@@ -197,39 +157,39 @@
197
157
  font-weight: bold;
198
158
  margin-bottom: 0.25rem;
199
159
  color: #111;
200
- color: var(--color-contrast);
160
+ color: var(--fg);
201
161
  }
202
162
 
203
163
  :root .form-group label {
204
164
  font-weight: bold;
205
165
  margin-bottom: 0.25rem;
206
166
  color: #111;
207
- color: var(--color-contrast);
167
+ color: var(--fg);
208
168
  }
209
169
 
210
170
  :host .go-field label {
211
171
  font-weight: bold;
212
172
  margin-bottom: 0.25rem;
213
173
  color: #111;
214
- color: var(--color-contrast);
174
+ color: var(--fg);
215
175
  }
216
176
 
217
177
  :root .go-field label {
218
178
  font-weight: bold;
219
179
  margin-bottom: 0.25rem;
220
180
  color: #111;
221
- color: var(--color-contrast);
181
+ color: var(--fg);
222
182
  }
223
183
 
224
184
  :host .form-group input {
225
185
  padding: 0.5rem;
226
186
  font-size: 1rem;
227
187
  border: 1px solid #111;
228
- border: 1px solid var(--color-contrast);
229
- border-radius: 0.25rem;
188
+ border: 1px solid var(--fg);
189
+ border-radius: 0;
230
190
  background-color: #fff;
231
191
  color: #111;
232
- color: var(--color-contrast);
192
+ color: var(--fg);
233
193
  transition: border-color 0.3s ease;
234
194
  }
235
195
 
@@ -237,11 +197,11 @@
237
197
  padding: 0.5rem;
238
198
  font-size: 1rem;
239
199
  border: 1px solid #111;
240
- border: 1px solid var(--color-contrast);
241
- border-radius: 0.25rem;
200
+ border: 1px solid var(--fg);
201
+ border-radius: 0;
242
202
  background-color: #fff;
243
203
  color: #111;
244
- color: var(--color-contrast);
204
+ color: var(--fg);
245
205
  transition: border-color 0.3s ease;
246
206
  }
247
207
 
@@ -249,11 +209,11 @@
249
209
  padding: 0.5rem;
250
210
  font-size: 1rem;
251
211
  border: 1px solid #111;
252
- border: 1px solid var(--color-contrast);
253
- border-radius: 0.25rem;
212
+ border: 1px solid var(--fg);
213
+ border-radius: 0;
254
214
  background-color: #fff;
255
215
  color: #111;
256
- color: var(--color-contrast);
216
+ color: var(--fg);
257
217
  transition: border-color 0.3s ease;
258
218
  }
259
219
 
@@ -261,11 +221,11 @@
261
221
  padding: 0.5rem;
262
222
  font-size: 1rem;
263
223
  border: 1px solid #111;
264
- border: 1px solid var(--color-contrast);
265
- border-radius: 0.25rem;
224
+ border: 1px solid var(--fg);
225
+ border-radius: 0;
266
226
  background-color: #fff;
267
227
  color: #111;
268
- color: var(--color-contrast);
228
+ color: var(--fg);
269
229
  transition: border-color 0.3s ease;
270
230
  }
271
231
 
@@ -273,11 +233,11 @@
273
233
  padding: 0.5rem;
274
234
  font-size: 1rem;
275
235
  border: 1px solid #111;
276
- border: 1px solid var(--color-contrast);
277
- border-radius: 0.25rem;
236
+ border: 1px solid var(--fg);
237
+ border-radius: 0;
278
238
  background-color: #fff;
279
239
  color: #111;
280
- color: var(--color-contrast);
240
+ color: var(--fg);
281
241
  transition: border-color 0.3s ease;
282
242
  }
283
243
 
@@ -285,11 +245,11 @@
285
245
  padding: 0.5rem;
286
246
  font-size: 1rem;
287
247
  border: 1px solid #111;
288
- border: 1px solid var(--color-contrast);
289
- border-radius: 0.25rem;
248
+ border: 1px solid var(--fg);
249
+ border-radius: 0;
290
250
  background-color: #fff;
291
251
  color: #111;
292
- color: var(--color-contrast);
252
+ color: var(--fg);
293
253
  transition: border-color 0.3s ease;
294
254
  }
295
255
 
@@ -297,11 +257,11 @@
297
257
  padding: 0.5rem;
298
258
  font-size: 1rem;
299
259
  border: 1px solid #111;
300
- border: 1px solid var(--color-contrast);
301
- border-radius: 0.25rem;
260
+ border: 1px solid var(--fg);
261
+ border-radius: 0;
302
262
  background-color: #fff;
303
263
  color: #111;
304
- color: var(--color-contrast);
264
+ color: var(--fg);
305
265
  transition: border-color 0.3s ease;
306
266
  }
307
267
 
@@ -309,11 +269,11 @@
309
269
  padding: 0.5rem;
310
270
  font-size: 1rem;
311
271
  border: 1px solid #111;
312
- border: 1px solid var(--color-contrast);
313
- border-radius: 0.25rem;
272
+ border: 1px solid var(--fg);
273
+ border-radius: 0;
314
274
  background-color: #fff;
315
275
  color: #111;
316
- color: var(--color-contrast);
276
+ color: var(--fg);
317
277
  transition: border-color 0.3s ease;
318
278
  }
319
279
 
@@ -321,11 +281,11 @@
321
281
  padding: 0.5rem;
322
282
  font-size: 1rem;
323
283
  border: 1px solid #111;
324
- border: 1px solid var(--color-contrast);
325
- border-radius: 0.25rem;
284
+ border: 1px solid var(--fg);
285
+ border-radius: 0;
326
286
  background-color: #fff;
327
287
  color: #111;
328
- color: var(--color-contrast);
288
+ color: var(--fg);
329
289
  transition: border-color 0.3s ease;
330
290
  }
331
291
 
@@ -333,11 +293,11 @@
333
293
  padding: 0.5rem;
334
294
  font-size: 1rem;
335
295
  border: 1px solid #111;
336
- border: 1px solid var(--color-contrast);
337
- border-radius: 0.25rem;
296
+ border: 1px solid var(--fg);
297
+ border-radius: 0;
338
298
  background-color: #fff;
339
299
  color: #111;
340
- color: var(--color-contrast);
300
+ color: var(--fg);
341
301
  transition: border-color 0.3s ease;
342
302
  }
343
303
 
@@ -345,11 +305,11 @@
345
305
  padding: 0.5rem;
346
306
  font-size: 1rem;
347
307
  border: 1px solid #111;
348
- border: 1px solid var(--color-contrast);
349
- border-radius: 0.25rem;
308
+ border: 1px solid var(--fg);
309
+ border-radius: 0;
350
310
  background-color: #fff;
351
311
  color: #111;
352
- color: var(--color-contrast);
312
+ color: var(--fg);
353
313
  transition: border-color 0.3s ease;
354
314
  }
355
315
 
@@ -357,84 +317,264 @@
357
317
  padding: 0.5rem;
358
318
  font-size: 1rem;
359
319
  border: 1px solid #111;
360
- border: 1px solid var(--color-contrast);
361
- border-radius: 0.25rem;
320
+ border: 1px solid var(--fg);
321
+ border-radius: 0;
362
322
  background-color: #fff;
363
323
  color: #111;
364
- color: var(--color-contrast);
324
+ color: var(--fg);
365
325
  transition: border-color 0.3s ease;
366
326
  }
367
327
 
368
328
  :host .form-group input:focus {
369
- outline: none;
370
- border-color: #111;
371
- border-color: var(--color-contrast);
329
+ border-color: #12826a;
330
+ border-color: var(--primary);
331
+ outline: 3px solid #12826a;
332
+ outline: var(--outline-hover);
372
333
  }
373
334
 
374
335
  :root .form-group input:focus {
375
- outline: none;
376
- border-color: #111;
377
- border-color: var(--color-contrast);
336
+ border-color: #12826a;
337
+ border-color: var(--primary);
338
+ outline: 3px solid #12826a;
339
+ outline: var(--outline-hover);
378
340
  }
379
341
 
380
342
  :host .go-field input:focus {
381
- outline: none;
382
- border-color: #111;
383
- border-color: var(--color-contrast);
343
+ border-color: #12826a;
344
+ border-color: var(--primary);
345
+ outline: 3px solid #12826a;
346
+ outline: var(--outline-hover);
384
347
  }
385
348
 
386
349
  :root .go-field input:focus {
387
- outline: none;
388
- border-color: #111;
389
- border-color: var(--color-contrast);
350
+ border-color: #12826a;
351
+ border-color: var(--primary);
352
+ outline: 3px solid #12826a;
353
+ outline: var(--outline-hover);
390
354
  }
391
355
 
392
356
  :host .form-group select:focus {
393
- outline: none;
394
- border-color: #111;
395
- border-color: var(--color-contrast);
357
+ border-color: #12826a;
358
+ border-color: var(--primary);
359
+ outline: 3px solid #12826a;
360
+ outline: var(--outline-hover);
396
361
  }
397
362
 
398
363
  :root .form-group select:focus {
399
- outline: none;
400
- border-color: #111;
401
- border-color: var(--color-contrast);
364
+ border-color: #12826a;
365
+ border-color: var(--primary);
366
+ outline: 3px solid #12826a;
367
+ outline: var(--outline-hover);
402
368
  }
403
369
 
404
370
  :host .go-field select:focus {
405
- outline: none;
406
- border-color: #111;
407
- border-color: var(--color-contrast);
371
+ border-color: #12826a;
372
+ border-color: var(--primary);
373
+ outline: 3px solid #12826a;
374
+ outline: var(--outline-hover);
408
375
  }
409
376
 
410
377
  :root .go-field select:focus {
411
- outline: none;
412
- border-color: #111;
413
- border-color: var(--color-contrast);
378
+ border-color: #12826a;
379
+ border-color: var(--primary);
380
+ outline: 3px solid #12826a;
381
+ outline: var(--outline-hover);
414
382
  }
415
383
 
416
384
  :host .form-group textarea:focus {
417
- outline: none;
418
- border-color: #111;
419
- border-color: var(--color-contrast);
385
+ border-color: #12826a;
386
+ border-color: var(--primary);
387
+ outline: 3px solid #12826a;
388
+ outline: var(--outline-hover);
420
389
  }
421
390
 
422
391
  :root .form-group textarea:focus {
423
- outline: none;
424
- border-color: #111;
425
- border-color: var(--color-contrast);
392
+ border-color: #12826a;
393
+ border-color: var(--primary);
394
+ outline: 3px solid #12826a;
395
+ outline: var(--outline-hover);
426
396
  }
427
397
 
428
398
  :host .go-field textarea:focus {
429
- outline: none;
430
- border-color: #111;
431
- border-color: var(--color-contrast);
399
+ border-color: #12826a;
400
+ border-color: var(--primary);
401
+ outline: 3px solid #12826a;
402
+ outline: var(--outline-hover);
432
403
  }
433
404
 
434
405
  :root .go-field textarea:focus {
435
- outline: none;
436
- border-color: #111;
437
- border-color: var(--color-contrast);
406
+ border-color: #12826a;
407
+ border-color: var(--primary);
408
+ outline: 3px solid #12826a;
409
+ outline: var(--outline-hover);
410
+ }
411
+
412
+ :host .form-group input:hover {
413
+ border-color: #12826a;
414
+ border-color: var(--primary);
415
+ outline: 3px solid #12826a;
416
+ outline: var(--outline-hover);
417
+ }
418
+
419
+ :root .form-group input:hover {
420
+ border-color: #12826a;
421
+ border-color: var(--primary);
422
+ outline: 3px solid #12826a;
423
+ outline: var(--outline-hover);
424
+ }
425
+
426
+ :host .go-field input:hover {
427
+ border-color: #12826a;
428
+ border-color: var(--primary);
429
+ outline: 3px solid #12826a;
430
+ outline: var(--outline-hover);
431
+ }
432
+
433
+ :root .go-field input:hover {
434
+ border-color: #12826a;
435
+ border-color: var(--primary);
436
+ outline: 3px solid #12826a;
437
+ outline: var(--outline-hover);
438
+ }
439
+
440
+ :host .form-group select:hover {
441
+ border-color: #12826a;
442
+ border-color: var(--primary);
443
+ outline: 3px solid #12826a;
444
+ outline: var(--outline-hover);
445
+ }
446
+
447
+ :root .form-group select:hover {
448
+ border-color: #12826a;
449
+ border-color: var(--primary);
450
+ outline: 3px solid #12826a;
451
+ outline: var(--outline-hover);
452
+ }
453
+
454
+ :host .go-field select:hover {
455
+ border-color: #12826a;
456
+ border-color: var(--primary);
457
+ outline: 3px solid #12826a;
458
+ outline: var(--outline-hover);
459
+ }
460
+
461
+ :root .go-field select:hover {
462
+ border-color: #12826a;
463
+ border-color: var(--primary);
464
+ outline: 3px solid #12826a;
465
+ outline: var(--outline-hover);
466
+ }
467
+
468
+ :host .form-group textarea:hover {
469
+ border-color: #12826a;
470
+ border-color: var(--primary);
471
+ outline: 3px solid #12826a;
472
+ outline: var(--outline-hover);
473
+ }
474
+
475
+ :root .form-group textarea:hover {
476
+ border-color: #12826a;
477
+ border-color: var(--primary);
478
+ outline: 3px solid #12826a;
479
+ outline: var(--outline-hover);
480
+ }
481
+
482
+ :host .go-field textarea:hover {
483
+ border-color: #12826a;
484
+ border-color: var(--primary);
485
+ outline: 3px solid #12826a;
486
+ outline: var(--outline-hover);
487
+ }
488
+
489
+ :root .go-field textarea:hover {
490
+ border-color: #12826a;
491
+ border-color: var(--primary);
492
+ outline: 3px solid #12826a;
493
+ outline: var(--outline-hover);
494
+ }
495
+
496
+ :host .form-group input:active {
497
+ border-color: #12826a;
498
+ border-color: var(--primary);
499
+ outline: 3px solid #12826a;
500
+ outline: var(--outline-hover);
501
+ }
502
+
503
+ :root .form-group input:active {
504
+ border-color: #12826a;
505
+ border-color: var(--primary);
506
+ outline: 3px solid #12826a;
507
+ outline: var(--outline-hover);
508
+ }
509
+
510
+ :host .go-field input:active {
511
+ border-color: #12826a;
512
+ border-color: var(--primary);
513
+ outline: 3px solid #12826a;
514
+ outline: var(--outline-hover);
515
+ }
516
+
517
+ :root .go-field input:active {
518
+ border-color: #12826a;
519
+ border-color: var(--primary);
520
+ outline: 3px solid #12826a;
521
+ outline: var(--outline-hover);
522
+ }
523
+
524
+ :host .form-group select:active {
525
+ border-color: #12826a;
526
+ border-color: var(--primary);
527
+ outline: 3px solid #12826a;
528
+ outline: var(--outline-hover);
529
+ }
530
+
531
+ :root .form-group select:active {
532
+ border-color: #12826a;
533
+ border-color: var(--primary);
534
+ outline: 3px solid #12826a;
535
+ outline: var(--outline-hover);
536
+ }
537
+
538
+ :host .go-field select:active {
539
+ border-color: #12826a;
540
+ border-color: var(--primary);
541
+ outline: 3px solid #12826a;
542
+ outline: var(--outline-hover);
543
+ }
544
+
545
+ :root .go-field select:active {
546
+ border-color: #12826a;
547
+ border-color: var(--primary);
548
+ outline: 3px solid #12826a;
549
+ outline: var(--outline-hover);
550
+ }
551
+
552
+ :host .form-group textarea:active {
553
+ border-color: #12826a;
554
+ border-color: var(--primary);
555
+ outline: 3px solid #12826a;
556
+ outline: var(--outline-hover);
557
+ }
558
+
559
+ :root .form-group textarea:active {
560
+ border-color: #12826a;
561
+ border-color: var(--primary);
562
+ outline: 3px solid #12826a;
563
+ outline: var(--outline-hover);
564
+ }
565
+
566
+ :host .go-field textarea:active {
567
+ border-color: #12826a;
568
+ border-color: var(--primary);
569
+ outline: 3px solid #12826a;
570
+ outline: var(--outline-hover);
571
+ }
572
+
573
+ :root .go-field textarea:active {
574
+ border-color: #12826a;
575
+ border-color: var(--primary);
576
+ outline: 3px solid #12826a;
577
+ outline: var(--outline-hover);
438
578
  }
439
579
 
440
580
  :host .form-group .error {
@@ -619,7 +759,7 @@
619
759
  font-size: 1.2rem;
620
760
  padding: 20px 60px;
621
761
  border: none;
622
- border-radius: 5px;
762
+ border-radius: 0;
623
763
  cursor: pointer;
624
764
  transition: background-color 0.3s ease;
625
765
  }
@@ -632,7 +772,7 @@
632
772
  font-size: 1.2rem;
633
773
  padding: 20px 60px;
634
774
  border: none;
635
- border-radius: 5px;
775
+ border-radius: 0;
636
776
  cursor: pointer;
637
777
  transition: background-color 0.3s ease;
638
778
  }
@@ -645,167 +785,11 @@
645
785
  background-color: #125948;
646
786
  }
647
787
 
648
- :host go-events {
649
- /* Ensure CSS variables are defined */
650
- --primary: #12826a;
651
- }
652
-
653
- :root go-events {
654
- /* Ensure CSS variables are defined */
655
- --primary: #12826a;
656
- }
657
-
658
- :host go-events ul {
659
- display: grid;
660
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
661
- grid-gap: 1rem;
662
- gap: 1rem;
663
- padding: 0;
664
- list-style: none;
665
- }
666
-
667
- :root go-events ul {
668
- display: grid;
669
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
670
- grid-gap: 1rem;
671
- gap: 1rem;
672
- padding: 0;
673
- list-style: none;
674
- }
675
-
676
- :host go-events ul li {
677
- background-color: #fff;
678
- border-radius: 10px;
679
- overflow: hidden;
680
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
681
- transition:
682
- transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
683
- display: flex;
684
- flex-direction: column;
685
- cursor: pointer;
686
- border: 1px solid transparent;
687
- }
688
-
689
- :root go-events ul li {
690
- background-color: #fff;
691
- border-radius: 10px;
692
- overflow: hidden;
693
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
694
- transition:
695
- transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
696
- display: flex;
697
- flex-direction: column;
698
- cursor: pointer;
699
- border: 1px solid transparent;
700
- }
701
-
702
- :host go-events ul li:hover {
703
- transform: translateY(-4px);
704
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
705
- border: 1px solid #12826a;
706
- border: 1px solid var(--primary);
707
- }
708
-
709
- :root go-events ul li:hover {
710
- transform: translateY(-4px);
711
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
712
- border: 1px solid #12826a;
713
- border: 1px solid var(--primary);
714
- }
715
-
716
- :host go-events ul li go-event {
717
- display: flex;
718
- flex-direction: column;
719
- height: 100%;
720
-
721
- /* Image container */
722
- }
723
-
724
- :root go-events ul li go-event {
725
- display: flex;
726
- flex-direction: column;
727
- height: 100%;
728
-
729
- /* Image container */
730
- }
731
-
732
- :host go-events ul li go-event go-event-image {
733
- display: block;
734
- width: 100%;
735
- aspect-ratio: 3 / 2;
736
- -o-object-fit: cover;
737
- object-fit: cover;
738
- height: 200px;
739
- overflow: hidden;
740
- }
741
-
742
- :root go-events ul li go-event go-event-image {
743
- display: block;
744
- width: 100%;
745
- aspect-ratio: 3 / 2;
746
- -o-object-fit: cover;
747
- object-fit: cover;
748
- height: 200px;
749
- overflow: hidden;
750
- }
751
-
752
- :host go-events ul li go-event img {
753
- max-width: 100%;
754
- max-height: 100%;
755
- }
756
-
757
- :root go-events ul li go-event img {
758
- max-width: 100%;
759
- max-height: 100%;
760
- }
761
-
762
- /* Title container */
763
-
764
- :host go-events ul li go-event go-event-title {
765
- padding: 0.75rem 1rem;
766
- font-size: 1rem;
767
- font-weight: 600;
768
- color: #12826a;
769
- color: var(--primary);
770
- }
771
-
772
- :root go-events ul li go-event go-event-title {
773
- padding: 0.75rem 1rem;
774
- font-size: 1rem;
775
- font-weight: 600;
776
- color: #12826a;
777
- color: var(--primary);
778
- }
779
-
780
- :host go-events ul li go-event go-event-title * {
781
- margin: 0;
782
- }
783
-
784
- :root go-events ul li go-event go-event-title * {
785
- margin: 0;
786
- }
787
-
788
788
  :host img {
789
789
  max-width: 100%;
790
790
  max-height: 100%;
791
791
  }
792
792
 
793
- :global go-ticket-selection go-cal {
794
- display: none;
795
- }
796
-
797
- :global go-ticket-selection.is-date-selected go-cal {
798
- display: block;
799
- }
800
-
801
- :global .azin {
802
- outline: 20px solid green;
803
- }
804
-
805
- .azin {
806
- border: 20px solid green !important;
807
- }
808
-
809
793
  /*CALENDARUI CSS*/
810
794
 
811
795
  [data-calendar-wrapper] {
@@ -821,6 +805,18 @@
821
805
  margin-top: 0px !important;
822
806
  }
823
807
 
808
+ [data-calendar-wrapper] [data-calendar-cell] {
809
+ margin: auto;
810
+ border: 1px solid transparent;
811
+ }
812
+
813
+ [data-calendar-wrapper] [data-calendar-cell]:hover {
814
+ border: 1px solid #12826a;
815
+ border: 1px solid var(--primary);
816
+ outline: 3px solid #12826a;
817
+ outline: var(--outline-hover);
818
+ }
819
+
824
820
  [data-calendar-wrapper] [data-calendar-cell] {
825
821
  text-align: -webkit-center;
826
822
  text-align: -moz-center;
@@ -836,7 +832,7 @@
836
832
  user-select: none;
837
833
  align-items: center;
838
834
  justify-content: center;
839
- border-radius: 0.5rem;
835
+ border-radius: 0;
840
836
  padding: 1rem;
841
837
  }
842
838
 
@@ -871,17 +867,18 @@
871
867
  display: flex;
872
868
  justify-content: center;
873
869
  align-items: center;
874
- font-size: 0.875rem;
870
+ font-size: 1rem;
875
871
  font-weight: 500;
876
- border-radius: 100%;
872
+ border-radius: 0;
877
873
  width: 28px;
878
874
  height: 28px;
879
875
  }
880
876
 
881
877
  [data-calendar-wrapper] [data-calendar-root] {
882
878
  padding: 1.25rem;
883
- border: 1px solid #274779;
884
- border-radius: 0.25rem;
879
+ border: 1px solid #12826a;
880
+ border: 1px solid var(--primary);
881
+ border-radius: 0rem;
885
882
  }
886
883
 
887
884
  [data-calendar-wrapper] [data-calendar-cell][data-unavailable] {
@@ -896,12 +893,17 @@
896
893
 
897
894
  [data-calendar-wrapper] [data-calendar-cell][data-selected] {
898
895
  color: #ffffff;
899
- background-color: #274779;
896
+ background-color: #12826a;
897
+ background-color: var(--primary);
898
+ outline: 3px solid #12826a;
899
+ outline: var(--outline-hover);
900
900
  }
901
901
 
902
902
  [data-calendar-wrapper] [data-calendar-cell][data-today] {
903
- border: 1px solid #274779;
904
- border-width: 1px;
903
+ border: 1px solid #12826a;
904
+ border: 1px solid var(--primary);
905
+ outline: 3px solid #12826a;
906
+ outline: var(--outline-hover);
905
907
  }
906
908
  /*END CALENDARUI CSS*/
907
909
 
@@ -910,22 +912,26 @@ ul[data-go-timeslots] {
910
912
  list-style: none;
911
913
  padding: 0;
912
914
  margin: 0;
913
- display: flex;
914
- flex-wrap: wrap;
915
+ display: grid;
916
+ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
915
917
  }
916
918
 
917
919
  ul[data-go-timeslots] li {
918
920
  margin: 5px;
921
+ display: flex;
919
922
  }
920
923
 
921
924
  ul[data-go-timeslots] label {
922
925
  display: inline-block;
923
926
  padding: 10px 20px;
924
- border: 2px solid #ccc;
925
- border-radius: 5px;
927
+ border: 1px solid #ddd;
928
+ border-radius: 0px;
926
929
  cursor: pointer;
927
930
  transition:
928
931
  background-color 0.3s, border-color 0.3s;
932
+
933
+ flex: 1 0 auto;
934
+ text-align: center;
929
935
  }
930
936
 
931
937
  /* Available timeslot */
@@ -974,8 +980,9 @@ ul[data-go-timeslots] input:disabled + label {
974
980
  }
975
981
 
976
982
  ul[data-go-timeslots] label:hover {
977
- background-color: #f0f0f0;
978
- border-color: #aaa;
983
+ /*background-color: #f0f0f0;*/
984
+ border-color: #12826a;
985
+ border-color: var(--primary);
979
986
  }
980
987
 
981
988
  /* Focus state for better accessibility */
@@ -1176,9 +1183,11 @@ go-cart {
1176
1183
  padding: 0.25rem 0.5rem;
1177
1184
  margin: 0;
1178
1185
  background-color: white;
1179
- color: black;
1186
+ background-color: var(--bg);
1187
+ color: #111;
1188
+ color: var(--fg);
1180
1189
  border: none;
1181
- border-radius: 4px;
1190
+ border-radius: 0px;
1182
1191
  cursor: pointer;
1183
1192
  }
1184
1193
  [data-go-cart-item] article > ul [data-go-cart-item-sum] {
@@ -1230,6 +1239,7 @@ go-cart {
1230
1239
  h2 {
1231
1240
  margin-top: 3rlh;
1232
1241
  }
1242
+
1233
1243
  .sum-container {
1234
1244
  display: flex;
1235
1245
  flex-direction: row;
@@ -1247,9 +1257,18 @@ h2 {
1247
1257
 
1248
1258
  margin: 2rem auto;
1249
1259
  }
1260
+
1250
1261
  go-cart,
1251
1262
  go-ticket-selection,
1252
1263
  go-if {
1253
1264
  width: 100%;
1254
1265
  display: block;
1255
1266
  }
1267
+
1268
+ go-cart-empty {
1269
+ display: contents;
1270
+ }
1271
+
1272
+ .go-cart-checkout-button {
1273
+ display: none;
1274
+ }
package/dist-js/gomus-webcomponents.iife.js CHANGED
@@ -30366,6 +30366,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
30366
30366
  const func = new Function("data", `return ${expression};`);
30367
30367
  return func(data);
30368
30368
  } catch (error) {
30369
+ console.log(`Error while evaluating when (${expression}) in go-if: ${error.message}`);
30369
30370
  }
30370
30371
  }
30371
30372
  const validTicketSelectionFilters = ["timeslot", "day", "annual"];
package/dist-js/gomus-webcomponents.js CHANGED
@@ -30366,6 +30366,7 @@ function evaluateExpression(expression, data) {
30366
30366
  const func = new Function("data", `return ${expression};`);
30367
30367
  return func(data);
30368
30368
  } catch (error) {
30369
+ console.log(`Error while evaluating when (${expression}) in go-if: ${error.message}`);
30369
30370
  }
30370
30371
  }
30371
30372
  const validTicketSelectionFilters = ["timeslot", "day", "annual"];
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "name": "Giantmonkey GmbH"
5
5
  },
6
6
  "license": "MIT",
7
- "version": "1.16.1",
7
+ "version": "1.17.0",
8
8
  "type": "module",
9
9
  "main": "./dist-js/gomus-webcomponents.iife.js",
10
10
  "module": "./dist-js/gomus-webcomponents.iife.js",