survey-react 1.9.106 → 1.9.108

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/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.106
2
+ * surveyjs - Survey JavaScript library v1.9.108
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -391,6 +391,9 @@ button.sv-action-bar-item {
391
391
  overflow: hidden;
392
392
  visibility: hidden;
393
393
  }
394
+ .sv-action--hidden .sv-action__content {
395
+ min-width: fit-content;
396
+ }
394
397
 
395
398
  .sv-action__content {
396
399
  display: flex;
@@ -2050,6 +2053,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2050
2053
  outline: none;
2051
2054
  }
2052
2055
 
2056
+ input.sd-input:disabled:not(.sd-input--disabled),
2057
+ textarea.sd-input:disabled:not(.sd-input--disabled) {
2058
+ opacity: 1;
2059
+ }
2060
+
2053
2061
  .sd-input--disabled {
2054
2062
  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
2055
2063
  -webkit-user-select: none;
@@ -2066,8 +2074,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2066
2074
  user-select: none;
2067
2075
  }
2068
2076
 
2069
- .sd-input--disabled,
2070
- .sd-input--disabled::placeholder {
2077
+ .sd-input.sd-input--disabled,
2078
+ .sd-input.sd-input--disabled::placeholder {
2071
2079
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2072
2080
  opacity: 0.25;
2073
2081
  }
@@ -2108,6 +2116,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2108
2116
  display: flex;
2109
2117
  }
2110
2118
 
2119
+ .sd-input[type=time],
2120
+ .sd-input[type=date],
2121
+ .sd-input[type=datetime-local],
2122
+ .sd-input[type=week],
2123
+ .sd-input[type=month],
2124
+ .sd-input[type=tel],
2125
+ .sd-input[type=password],
2126
+ .sd-input[type=url],
2127
+ .sd-input[type=email],
2111
2128
  .sd-input[type=color],
2112
2129
  .sd-input[type=range] {
2113
2130
  box-sizing: content-box;
@@ -2414,39 +2431,39 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2414
2431
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2415
2432
  }
2416
2433
 
2417
- .sd-table--alternate-rows {
2434
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows {
2418
2435
  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2419
2436
  margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2420
2437
  width: calc(100% - 2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2421
2438
  }
2422
- .sd-table--alternate-rows .sd-table__cell:not(.sd-table__cell--header):first-of-type {
2439
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__cell:not(.sd-table__cell--header):first-of-type {
2423
2440
  padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2424
2441
  }
2425
- .sd-table--alternate-rows .sd-table__cell:last-of-type {
2442
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__cell:last-of-type {
2426
2443
  padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2427
2444
  }
2428
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td,
2429
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
2445
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td,
2446
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
2430
2447
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
2431
2448
  }
2432
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-matrix__text--checked,
2433
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type.sd-matrix__text--checked {
2449
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-matrix__text--checked,
2450
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type.sd-matrix__text--checked {
2434
2451
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
2435
2452
  }
2436
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-input,
2437
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
2453
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-input,
2454
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
2438
2455
  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2439
2456
  }
2440
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error) .sd-item__decorator,
2441
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error) .sd-item__decorator {
2457
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error) .sd-item__decorator,
2458
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error) .sd-item__decorator {
2442
2459
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2443
2460
  }
2444
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator,
2445
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
2461
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator,
2462
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
2446
2463
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2447
2464
  }
2448
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
2449
- .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
2465
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
2466
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
2450
2467
  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2451
2468
  }
2452
2469
 
@@ -3630,6 +3647,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3630
3647
  white-space: pre;
3631
3648
  }
3632
3649
 
3650
+ .sd-input--disabled .sv-string-viewer {
3651
+ max-width: 100%;
3652
+ overflow: hidden;
3653
+ text-overflow: ellipsis;
3654
+ }
3655
+
3633
3656
  .sv-popup.sv-popup--dropdown.sv-popup--dropdown .sd-list__item-body {
3634
3657
  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3635
3658
  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
@@ -4208,6 +4231,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4208
4231
  border: none;
4209
4232
  }
4210
4233
 
4234
+ .sd-paneldynamic__separator:only-child {
4235
+ display: none;
4236
+ }
4237
+
4211
4238
  .sd-paneldynamic__panel-wrapper {
4212
4239
  padding-bottom: calc(1 * var(--sd-base-padding));
4213
4240
  }
@@ -4412,16 +4439,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4412
4439
  }
4413
4440
 
4414
4441
  .sd-file {
4415
- min-height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
4416
4442
  position: relative;
4417
4443
  font-size: calc(1 * var(--sjs-font-size, 16px));
4418
4444
  line-height: calc(1.5 * var(--sjs-font-size, 16px));
4445
+ min-height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
4446
+ box-sizing: border-box;
4447
+ padding: 0 calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4419
4448
  }
4420
4449
  .sd-file .sv-action-bar {
4421
4450
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4422
4451
  justify-content: center;
4423
4452
  position: absolute;
4424
4453
  width: 100%;
4454
+ left: 0;
4425
4455
  bottom: 0;
4426
4456
  }
4427
4457
  .sd-file .sv-action-bar .sv-action-bar-item {
@@ -4431,6 +4461,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4431
4461
  }
4432
4462
  .sd-file .sv-action-bar #fileIndex .sv-action-bar-item {
4433
4463
  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4464
+ font-weight: 600;
4434
4465
  }
4435
4466
  .sd-file .sv-action-bar #fileIndex .sv-action-bar-item:hover {
4436
4467
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -4443,19 +4474,22 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4443
4474
  display: flex;
4444
4475
  flex-direction: column;
4445
4476
  position: absolute;
4477
+ position: absolute;
4478
+ left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
4446
4479
  width: 100%;
4447
4480
  height: 100%;
4448
4481
  box-sizing: border-box;
4449
- border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
4450
4482
  justify-content: center;
4451
4483
  align-items: center;
4484
+ padding: 0 calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4485
+ border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
4452
4486
  }
4453
4487
 
4454
4488
  .sd-file__decorator--drag {
4489
+ z-index: 1;
4455
4490
  border: 1px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
4456
- box-shadow: inset 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
4457
4491
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
4458
- z-index: 1;
4492
+ box-shadow: inset 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
4459
4493
  }
4460
4494
 
4461
4495
  .sd-file__no-file-chosen {
@@ -4463,7 +4497,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4463
4497
  }
4464
4498
 
4465
4499
  .sd-file__drag-area-placeholder {
4466
- padding: 0 calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4467
4500
  text-align: center;
4468
4501
  word-break: break-word;
4469
4502
  white-space: normal;
@@ -4472,6 +4505,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4472
4505
  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4473
4506
  }
4474
4507
 
4508
+ .sd-root-modern--mobile .sd-file__decorator {
4509
+ padding: 0 calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4510
+ }
4511
+
4475
4512
  .sd-file__choose-btn--text {
4476
4513
  display: block;
4477
4514
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4518,16 +4555,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4518
4555
  }
4519
4556
 
4520
4557
  .sd-file__list {
4521
- overflow: auto;
4522
4558
  display: flex;
4559
+ gap: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4523
4560
  box-sizing: content-box;
4524
4561
  flex-direction: row;
4525
4562
  align-items: stretch;
4526
- justify-content: space-between;
4563
+ justify-content: center;
4527
4564
  padding: calc(10.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4528
4565
  min-height: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
4529
4566
  max-height: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
4530
- position: absolute;
4531
4567
  width: 100%;
4532
4568
  }
4533
4569
 
@@ -4537,7 +4573,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4537
4573
  align-items: center;
4538
4574
  flex-direction: column;
4539
4575
  min-height: 100%;
4540
- margin: 0 auto;
4576
+ margin: 0;
4541
4577
  }
4542
4578
  .sd-file__preview .sd-file__default-image {
4543
4579
  width: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4613,6 +4649,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4613
4649
  margin: 0;
4614
4650
  }
4615
4651
  .sd-file--single-image .sd-file__list {
4652
+ position: absolute;
4653
+ left: 0;
4616
4654
  padding: 0;
4617
4655
  height: 100%;
4618
4656
  max-height: 100%;
@@ -4648,7 +4686,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4648
4686
  }
4649
4687
 
4650
4688
  .sd-file__drag-area {
4651
- position: absolute;
4689
+ position: static;
4652
4690
  width: 100%;
4653
4691
  height: 100%;
4654
4692
  }
@@ -5508,6 +5546,26 @@ svg.sd-action--icon {
5508
5546
  font-size: calc(0.75 * var(--sjs-font-size, 16px));
5509
5547
  }
5510
5548
 
5549
+ @keyframes rotationAnimation {
5550
+ from {
5551
+ rotate: 0deg;
5552
+ }
5553
+ to {
5554
+ rotate: 360deg;
5555
+ }
5556
+ }
5557
+ .sd-loading-indicator {
5558
+ height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5559
+ }
5560
+ .sd-loading-indicator .sv-svg-icon {
5561
+ height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5562
+ width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5563
+ animation-name: rotationAnimation;
5564
+ animation-timing-function: linear;
5565
+ animation-iteration-count: infinite;
5566
+ animation-duration: 1s;
5567
+ }
5568
+
5511
5569
  sv-components-container,
5512
5570
  .sd-components-container {
5513
5571
  display: flex;
@@ -5598,47 +5656,6 @@ sv-components-container,
5598
5656
  .sd-root-modern.sd-root-modern--mobile .sd-header__text {
5599
5657
  min-width: 100%;
5600
5658
  }
5601
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell {
5602
- display: block;
5603
- }
5604
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell:not(:first-of-type) {
5605
- padding-left: 0;
5606
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5607
- }
5608
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell :not(:last-of-type) {
5609
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5610
- }
5611
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-container {
5612
- flex-direction: column;
5613
- }
5614
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title {
5615
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5616
- padding-right: 0;
5617
- border-right: none;
5618
- margin-bottom: 0;
5619
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5620
- width: 100%;
5621
- max-width: none;
5622
- }
5623
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title span {
5624
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
5625
- line-height: calc(1 * var(--sjs-font-size, 16px));
5626
- }
5627
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item {
5628
- width: 100%;
5629
- }
5630
- .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item .sd-input {
5631
- padding-right: 0;
5632
- padding-left: 0;
5633
- margin-top: 0;
5634
- margin-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5635
- }
5636
- .sd-root-modern.sd-root-modern--mobile .sd-selectbase--multi-column {
5637
- flex-direction: column;
5638
- }
5639
- .sd-root-modern.sd-root-modern--mobile .sd-selectbase--multi-column .sd-selectbase__column:not(:last-child) {
5640
- padding-right: 0;
5641
- }
5642
5659
  .sd-root-modern.sd-root-modern--mobile .sd-question.sd-question--table > .sd-question__content {
5643
5660
  padding-top: 0;
5644
5661
  }
@@ -5765,6 +5782,60 @@ sv-components-container,
5765
5782
  margin-right: 0;
5766
5783
  }
5767
5784
 
5785
+ .sd-multipletext--mobile .sd-multipletext__cell {
5786
+ display: block;
5787
+ }
5788
+ .sd-multipletext--mobile .sd-multipletext__cell:not(:first-of-type) {
5789
+ padding-left: 0;
5790
+ padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5791
+ }
5792
+ .sd-multipletext--mobile .sd-multipletext__cell :not(:last-of-type) {
5793
+ padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5794
+ }
5795
+ .sd-multipletext--mobile .sd-multipletext__item-container {
5796
+ padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5797
+ padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5798
+ }
5799
+ .sd-multipletext--mobile .sd-multipletext__item-title {
5800
+ max-width: none;
5801
+ border-right: none;
5802
+ width: 100%;
5803
+ padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
5804
+ margin: 0;
5805
+ }
5806
+ .sd-multipletext--mobile .sd-multipletext__item {
5807
+ flex-basis: 0;
5808
+ }
5809
+ .sd-multipletext--mobile .sd-multipletext__item .sd-input {
5810
+ padding: 0;
5811
+ margin: 0;
5812
+ }
5813
+ .sd-multipletext--mobile .sd-multipletext__item-container--answered,
5814
+ .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within {
5815
+ flex-direction: column;
5816
+ }
5817
+ .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item-title,
5818
+ .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item-title {
5819
+ padding: 0;
5820
+ }
5821
+ .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item-title span,
5822
+ .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item-title span {
5823
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
5824
+ line-height: calc(1 * var(--sjs-font-size, 16px));
5825
+ }
5826
+ .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item,
5827
+ .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item {
5828
+ flex-basis: auto;
5829
+ width: 100%;
5830
+ }
5831
+
5832
+ .sd-selectbase--mobile .sd-selectbase--multi-column {
5833
+ flex-direction: column;
5834
+ }
5835
+ .sd-selectbase--mobile .sd-selectbase--multi-column .sd-selectbase__column:not(:last-child) {
5836
+ padding-right: 0;
5837
+ }
5838
+
5768
5839
  body {
5769
5840
  --sv-defaultV2-mark: true;
5770
5841
  }