@xapp/form-widget 1.65.10 → 1.67.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 (10) hide show
  1. package/dist/components/Form/Form.stories.d.ts +3 -4
  2. package/dist/components/SearchResponseFormDisplay/model.d.ts +0 -0
  3. package/dist/config/theme.d.ts +0 -0
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.es.js +23 -23
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/utils/guards/isField.d.ts +0 -0
  8. package/dist/xapp-form-widget.css +105 -99
  9. package/dist/xapp-form-widget.js +3 -3
  10. package/package.json +2 -2
package/dist/utils/guards/isField.d.ts CHANGED
Binary file
package/dist/xapp-form-widget.css CHANGED
@@ -113,26 +113,26 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
113
113
  }
114
114
  }
115
115
  .SearchResponseBubble-module_xapp_search_response_bubble__UtmuK {
116
- --xapp-bubble-background: var(--xapp-form-widget-messages-others-bubble-background);
116
+ --xapp-bubble-background: #fff;
117
117
  }
118
118
  .Card-module_xapp_search_card__9iVCv {
119
- border: var(--xapp-form-widget-card-border-style, solid) var(--xapp-form-widget-card-border-width, 0) var(--xapp-form-widget-card-border-color, var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df)));
120
- border-radius: var(--xapp-form-widget-card-border-radius, 12px);
121
- margin-top: var(--xapp-form-widget-card-margin-top, 0);
122
- margin-right: var(--xapp-form-widget-card-margin-right, 0);
123
- margin-bottom: var(--xapp-form-widget-card-margin-bottom, 20px);
124
- margin-left: var(--xapp-form-widget-card-margin-left, 0);
125
- padding-top: var(--xapp-form-widget-card-padding-top, 0);
126
- padding-right: var(--xapp-form-widget-card-padding-right, 0);
127
- padding-bottom: var(--xapp-form-widget-card-padding-bottom, 0);
128
- padding-left: var(--xapp-form-widget-card-padding-left, 0);
119
+ border: solid 0 #d3d3df;
120
+ border-radius: 12px;
121
+ margin-top: 0;
122
+ margin-right: 0;
123
+ margin-bottom: 20px;
124
+ margin-left: 0;
125
+ padding-top: 0;
126
+ padding-right: 0;
127
+ padding-bottom: 0;
128
+ padding-left: 0;
129
129
  box-sizing: border-box;
130
130
  display: flex;
131
131
  flex-direction: row;
132
132
  flex-wrap: wrap;
133
133
  justify-items: stretch;
134
134
  overflow: hidden;
135
- background-color: var(--xapp-formwidget--card-background, #fff);
135
+ background-color: #fff;
136
136
  }
137
137
  .Card-module_xapp_search_card__featured__CX-L0 {
138
138
  flex: 1 1 240px;
@@ -180,20 +180,20 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
180
180
  overflow: hidden;
181
181
  text-overflow: ellipsis;
182
182
  white-space: nowrap;
183
- line-height: var(--xapp-form-widget-link-line-height, 1.5em);
184
- font-family: var(--xapp-form-widget-link-font-family, RobotoRegular, serif);
185
- font-weight: var(--xapp-form-widget-link-font-weight, normal);
186
- font-size: var(--xapp-form-widget-link-font-size, 16px);
187
- font-style: var(--xapp-form-widget-link-font-style, normal);
188
- color: var(--xapp-form-widget-link-text-color, #006621);
189
- margin-top: var(--xapp-form-widget-link-margin-top, 0);
190
- margin-right: var(--xapp-form-widget-link-margin-right, 0);
191
- margin-bottom: var(--xapp-form-widget-link-margin-bottom, 0);
192
- margin-left: var(--xapp-form-widget-link-margin-left, 0);
193
- padding-top: var(--xapp-form-widget-link-padding-top, 0);
194
- padding-right: var(--xapp-form-widget-link-padding-right, 0);
195
- padding-bottom: var(--xapp-form-widget-link-padding-bottom, 0);
196
- padding-left: var(--xapp-form-widget-link-padding-left, 0);
183
+ line-height: 1.5em;
184
+ font-family: RobotoRegular, serif;
185
+ font-weight: normal;
186
+ font-size: 16px;
187
+ font-style: normal;
188
+ color: #006621;
189
+ margin-top: 0;
190
+ margin-right: 0;
191
+ margin-bottom: 0;
192
+ margin-left: 0;
193
+ padding-top: 0;
194
+ padding-right: 0;
195
+ padding-bottom: 0;
196
+ padding-left: 0;
197
197
  }
198
198
  .Card-module_xapp_search_card__btn__DHrQp {
199
199
  flex: 1 1 auto;
@@ -204,49 +204,49 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
204
204
  text-decoration: none;
205
205
  text-overflow: ellipsis;
206
206
  white-space: nowrap;
207
- line-height: var(--xapp-form-widget-card-title-line-height, 1.25em);
208
- font-family: var(--xapp-form-widget-card-title-font-family, RobotoRegular, serif);
209
- font-weight: var(--xapp-form-widget-card-title-font-weight, normal);
210
- font-size: var(--xapp-form-widget-card-title-font-size, 20px);
211
- font-style: var(--xapp-form-widget-card-title-font-style, normal);
212
- color: var(--xapp-form-widget-card-title-text-color, #1a0dab);
213
- margin-top: var(--xapp-form-widget-title-margin-top, 0);
214
- margin-right: var(--xapp-form-widget-title-margin-right, 0);
215
- margin-bottom: var(--xapp-form-widget-title-margin-bottom, 0);
216
- margin-left: var(--xapp-form-widget-title-margin-left, 0);
217
- padding-top: var(--xapp-form-widget-title-padding-top, 0);
218
- padding-right: var(--xapp-form-widget-title-padding-right, 0);
219
- padding-bottom: var(--xapp-form-widget-title-padding-bottom, 0);
220
- padding-left: var(--xapp-form-widget-title-padding-left, 0);
207
+ line-height: 1.25em;
208
+ font-family: RobotoRegular, serif;
209
+ font-weight: normal;
210
+ font-size: 20px;
211
+ font-style: normal;
212
+ color: #1a0dab;
213
+ margin-top: 0;
214
+ margin-right: 0;
215
+ margin-bottom: 0;
216
+ margin-left: 0;
217
+ padding-top: 0;
218
+ padding-right: 0;
219
+ padding-bottom: 0;
220
+ padding-left: 0;
221
221
  }
222
222
  .Card-module_xapp_search_card__title__ddR3K:hover {
223
223
  text-decoration: underline;
224
224
  }
225
225
  .Card-module_xapp_search_card__description__MruSU {
226
- line-height: var(--xapp-form-widget-description-line-height, 1.25em);
227
- font-family: var(--xapp-form-widget-description-font-family, RobotoRegular, serif);
228
- font-weight: var(--xapp-form-widget-description-font-weight, normal);
229
- font-size: var(--xapp-form-widget-description-font-size, 16px);
230
- font-style: var(--xapp-form-widget-description-font-style, normal);
231
- color: var(--xapp-form-widget-description-text-color, #666);
232
- margin-top: var(--xapp-form-widget-description-margin-top, 6px);
233
- margin-right: var(--xapp-form-widget-description-margin-right, 0);
234
- margin-bottom: var(--xapp-form-widget-description-margin-bottom, 0);
235
- margin-left: var(--xapp-form-widget-description-margin-left, 0);
236
- padding-top: var(--xapp-form-widget-description-padding-top, 0);
237
- padding-right: var(--xapp-form-widget-description-padding-right, 0);
238
- padding-bottom: var(--xapp-form-widget-description-padding-bottom, 0);
239
- padding-left: var(--xapp-form-widget-description-padding-left, 0);
226
+ line-height: 1.25em;
227
+ font-family: RobotoRegular, serif;
228
+ font-weight: normal;
229
+ font-size: 16px;
230
+ font-style: normal;
231
+ color: #666;
232
+ margin-top: 6px;
233
+ margin-right: 0;
234
+ margin-bottom: 0;
235
+ margin-left: 0;
236
+ padding-top: 0;
237
+ padding-right: 0;
238
+ padding-bottom: 0;
239
+ padding-left: 0;
240
240
  overflow: hidden;
241
- max-height: calc(5 * var(--xapp-form-widget-description-line-height, 1.25em));
241
+ max-height: 6.25em;
242
242
  position: relative;
243
243
  }
244
244
  .Card-module_xapp_search_card__description__MruSU:after {
245
- background: linear-gradient(to bottom, rgba(var(--xapp-formwidget--card-background, #fff), 0) 0%, rgba(var(--xapp-formwidget--card-background, #fff), 0) 12.5%, rgba(var(--xapp-formwidget--card-background, #fff), 1) 100%);
245
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 12.5%, white 100%);
246
246
  content: "";
247
- height: var(--xapp-form-widget-description-line-height, 1.25em);
247
+ height: 1.25em;
248
248
  position: absolute;
249
- top: calc(4 * var(--xapp-form-widget-description-line-height, 1.25em));
249
+ top: 5em;
250
250
  left: 0;
251
251
  right: 0;
252
252
  pointer-events: none;
@@ -311,12 +311,13 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
311
311
 
312
312
  .FormFieldChips-module_xapp_checkbox_chip__8DRkb {
313
313
  margin: 6px !important;
314
- font-size: 0.875em !important;
314
+ font-size: var(--xapp-form-widget-chips-font-size, 0.875em) !important;
315
315
  padding: 8px 16px !important;
316
316
  height: 32px !important;
317
317
  border-radius: 16px !important;
318
318
  min-width: 130px !important;
319
- background-color: var(--xapp-form-chip-bg-color, #c4dced) !important;
319
+ background-color: var(--xapp-form-widget-chips-background-color, #c4dced) !important;
320
+ color: var(--xapp-form-widget-chips-color, #000000) !important;
320
321
  transition: background-color 0.3s ease;
321
322
  }
322
323
  @media (max-width: 640px) {
@@ -330,7 +331,8 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
330
331
  }
331
332
 
332
333
  .FormFieldChips-module_xapp_chip_clicked__S8xmo {
333
- background-color: #6e7ae1 !important;
334
+ background-color: var(--xapp-form-widget-chips-background-color-selected, var(--xapp-form-widget-chips-background-color-dark, #6e7ae1)) !important;
335
+ color: var(--xapp-form-widget-chips-color-selected, #ffffff) !important;
334
336
  }
335
337
 
336
338
  .FormFieldChips-module_xapp_chips_container__ZITF5 {
@@ -367,18 +369,21 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
367
369
  .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input {
368
370
  padding: 21px 12px 4px 12px !important;
369
371
  border: 0 !important;
372
+ background-color: var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06)) !important;
373
+ color: #061739 !important;
374
+ font-size: var(--xapp-form-widget-text-font-size, 1rem) !important;
370
375
  }
371
- .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-root-MuiFilledInput-root {
372
- background-color: rgba(0, 0, 0, 0.06) !important;
376
+ .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input:hover {
377
+ background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
373
378
  }
374
- .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-root-MuiFilledInput-root:hover {
375
- background-color: rgba(0, 0, 0, 0.09) !important;
379
+ .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input:focus {
380
+ background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
376
381
  }
377
- .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-root-MuiFilledInput-root:focus {
378
- background-color: rgba(0, 0, 0, 0.09) !important;
382
+ .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiTextField-root .MuiInputLabel-root.MuiInputLabel-multiline {
383
+ top: 8px;
379
384
  }
380
385
  .FormFieldDate-module_xapp_date_picker_container__d8LYB {
381
- max-height: 250px;
386
+ max-height: 260px;
382
387
  }
383
388
 
384
389
  .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-weekDayLabel {
@@ -445,6 +450,15 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
445
450
  .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input {
446
451
  padding: 21px 12px 4px 12px !important;
447
452
  border: 0 !important;
453
+ background-color: var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06)) !important;
454
+ color: #061739 !important;
455
+ font-size: var(--xapp-form-widget-text-font-size, 1rem) !important;
456
+ }
457
+ .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input:hover {
458
+ background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
459
+ }
460
+ .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input:focus {
461
+ background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
448
462
  }
449
463
  .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root {
450
464
  padding-top: 0 !important;
@@ -454,15 +468,6 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
454
468
  padding-top: 0 !important;
455
469
  padding-left: 0 !important;
456
470
  }
457
- .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-root-MuiFilledInput-root {
458
- background-color: rgba(0, 0, 0, 0.06) !important;
459
- }
460
- .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-root-MuiFilledInput-root:hover {
461
- background-color: rgba(0, 0, 0, 0.09) !important;
462
- }
463
- .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-root-MuiFilledInput-root:focus {
464
- background-color: rgba(0, 0, 0, 0.09) !important;
465
- }
466
471
  .FormStepDisplay-module_xapp_formfield__hRmVx {
467
472
  display: none;
468
473
  font-family: inherit !important;
@@ -537,6 +542,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
537
542
  }
538
543
  .SearchResponseFormDisplay-module_xapp_formstep__2WhYK.SearchResponseFormDisplay-module_active__x-n-n {
539
544
  display: block;
545
+ background-color: var(--xapp-form-widget-background-color, #f3f8fb) !important;
540
546
  }
541
547
  .SearchResponseFormDisplay-module_xapp_formstep__2WhYK.SearchResponseFormDisplay-module_title__okRK- p {
542
548
  margin: 10px 0 0 0;
@@ -557,7 +563,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
557
563
  height: 42px;
558
564
  }
559
565
  .SearchResponseFormDisplay-module_xapp_header_container__ayUqb .MuiTypography-root {
560
- color: var(--xapp-form-widget-header-color, #b7c5d1) !important;
566
+ color: var(--xapp-form-widget-header-text-color, #b7c5d1) !important;
561
567
  }
562
568
 
563
569
  .SearchResponseFormDisplay-module_xapp_header_container_showcase__-VUjy {
@@ -573,7 +579,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
573
579
  height: 42px;
574
580
  }
575
581
  .SearchResponseFormDisplay-module_xapp_header_container_showcase__-VUjy .MuiTypography-root {
576
- color: var(--xapp-form-widget-header-color, #b7c5d1) !important;
582
+ color: var(--xapp-form-widget-header-text-color, #b7c5d1) !important;
577
583
  }
578
584
  .SimpleNavigationHeader-module_xapp_navigation_header__YhCD1 {
579
585
  background-color: inherit !important;
@@ -584,11 +590,11 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
584
590
  padding: 0px !important;
585
591
  }
586
592
  .SearchResponseOutputSpeech-module_xapp_search_response_output_speech__DCf8F {
587
- font-family: var(--xapp-form-widget-messages-others-font-family, RobotoRegular, serif);
588
- font-weight: var(--xapp-form-widget-messages-others-font-weight, normal);
589
- font-size: var(--xapp-form-widget-messages-others-font-size, 16px);
590
- font-style: var(--xapp-form-widget-messages-others-font-style, normal);
591
- color: var(--xapp-form-widget-messages-others-text-color, #000);
593
+ font-family: RobotoRegular, serif;
594
+ font-weight: normal;
595
+ font-size: 16px;
596
+ font-style: normal;
597
+ color: #000;
592
598
  }
593
599
  .SearchResponseOutputSpeech-module_xapp_search_response_output_speech__DCf8F p {
594
600
  margin: 0 0 1em 0;
@@ -608,7 +614,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
608
614
  .Button-module_xapp_search_btn__cQf3T {
609
615
  display: inline-block;
610
616
  border-radius: 12px;
611
- border: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
617
+ border: solid 1px #d3d3df;
612
618
  background: white;
613
619
  padding: 4px 24px;
614
620
  color: black;
@@ -674,7 +680,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
674
680
  }
675
681
  .SearchResult-module_xapp_search_result__preview__vQRcO {
676
682
  flex: 0 0 40%;
677
- border-left: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
683
+ border-left: solid 1px #d3d3df;
678
684
  padding-left: 12px;
679
685
  padding-right: 12px;
680
686
  }
@@ -691,9 +697,9 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
691
697
  .FormWidget-module_xapp_form_widget__V-G-H {
692
698
  display: flex;
693
699
  flex-direction: column;
694
- border: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
695
- background: var(--xapp-form-widget-background-color, #f4f8fd);
696
- border-radius: var(--xapp-form-widget-border-radius, 17.5px);
700
+ border: solid 1px #d3d3df;
701
+ background: var(--xapp-form-widget-background-color, #f3f8fb);
702
+ border-radius: 17.5px;
697
703
  overflow: hidden;
698
704
  max-width: 100%;
699
705
  max-height: 100%;
@@ -703,7 +709,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
703
709
  .FormWidget-module_xapp_form_widget__content__a9NXC {
704
710
  display: flex;
705
711
  flex-direction: column;
706
- border-top: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
712
+ border-top: solid 1px #d3d3df;
707
713
  max-height: 100%;
708
714
  min-height: 128px;
709
715
  overflow: hidden;
@@ -749,25 +755,25 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
749
755
  top: 74px;
750
756
  left: 0;
751
757
  width: 100%;
752
- background-color: var(--xapp-form-widget-background-color, #f4f8fd);
753
- border: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
754
- border-radius: 0 0 var(--xapp-form-widget-border-radius, 17.5px) var(--xapp-form-widget-border-radius, 17.5px);
758
+ background-color: var(--xapp-form-widget-background-color, #f3f8fb);
759
+ border: solid 1px #d3d3df;
760
+ border-radius: 0 0 17.5px 17.5px;
755
761
  }
756
762
  .ChatButton-module_xapp_chat_button__HH7eW {
757
763
  position: fixed;
758
764
  top: 25px;
759
765
  left: 220px;
760
766
  cursor: pointer;
761
- margin-top: var(--xapp-form-widget-margin-top, 16px);
762
- margin-right: var(--xapp-form-widget-margin-right, 16px);
763
- margin-bottom: var(--xapp-form-widget-margin-bottom, 16px);
764
- margin-left: var(--xapp-form-widget-margin-left, 16px);
767
+ margin-top: 16px;
768
+ margin-right: 16px;
769
+ margin-bottom: 16px;
770
+ margin-left: 16px;
765
771
  display: block;
766
772
  opacity: 1;
767
773
  animation: ChatButton-module_widget-show-grow__z65qQ 0.5s backwards;
768
774
  width: 75px;
769
775
  height: 75px;
770
- z-index: var(--xapp-form-widget-z-index, 1000);
776
+ z-index: 1000;
771
777
  background-color: transparent !important;
772
778
  padding: 0;
773
779
  border-width: 0px;
@@ -785,7 +791,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
785
791
  height: 70px;
786
792
  border-radius: 35px;
787
793
  border: 2px solid rgb(255, 255, 255);
788
- background-color: var(--xapp-form-widget-chat-button-background, #2f7ddd);
794
+ background-color: #2f7ddd;
789
795
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
790
796
  left: 50% !important;
791
797
  top: 50% !important;