@dynamic-framework/ui-react 1.24.0 → 1.26.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 (32) hide show
  1. package/dist/css/dynamic-ui-non-root.css +46 -31
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +1 -1
  4. package/dist/css/dynamic-ui-root.min.css +1 -1
  5. package/dist/css/dynamic-ui.css +46 -31
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +157 -27
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +151 -19
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DInputCheck/DInputCheck.d.ts +2 -2
  12. package/dist/types/components/DInputPin/DInputPin.d.ts +2 -2
  13. package/dist/types/components/DInputRange/DInputRange.d.ts +8 -0
  14. package/dist/types/components/DInputRange/index.d.ts +2 -0
  15. package/dist/types/components/DInputSelect/DInputSelect.d.ts +5 -3
  16. package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +2 -2
  17. package/dist/types/components/DQuickActionCheck/DQuickActionCheck.d.ts +2 -2
  18. package/dist/types/components/DQuickActionSelect/DQuickActionSelect.d.ts +2 -2
  19. package/dist/types/components/DQuickActionSwitch/DQuickActionSwitch.d.ts +2 -2
  20. package/dist/types/components/DTabs/DTabs.d.ts +2 -1
  21. package/dist/types/components/DToast/DToast.d.ts +11 -0
  22. package/dist/types/components/DToast/components/DToastBody.d.ts +5 -0
  23. package/dist/types/components/DToast/components/DToastHeader.d.ts +5 -0
  24. package/dist/types/components/DToast/index.d.ts +4 -0
  25. package/dist/types/components/index.d.ts +2 -0
  26. package/package.json +2 -3
  27. package/src/style/abstracts/variables/_+import.scss +2 -1
  28. package/src/style/abstracts/variables/_forms.scss +5 -1
  29. package/src/style/base/_+import.scss +1 -0
  30. package/src/style/base/_form-range.scss +52 -0
  31. package/src/style/base/_input-group.scss +1 -1
  32. package/src/style/components/_d-select.scss +2 -0
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 1.24.0
2
+ * dynamic-framework 1.26.0
3
3
  * bootstrap ^5.3.3
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 1.24.0
2
+ * dynamic-framework 1.26.0
3
3
  * bootstrap ^5.3.3
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 1.24.0
2
+ * dynamic-framework 1.26.0
3
3
  * bootstrap ^5.3.3
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
@@ -3441,8 +3441,8 @@ textarea.form-control-lg {
3441
3441
  box-shadow: none;
3442
3442
  }
3443
3443
  .form-check-input:checked {
3444
- background-color: var(--bs-focus-ring-color);
3445
- border-color: var(--bs-focus-ring-color);
3444
+ background-color: var(--bs-primary);
3445
+ border-color: var(--bs-primary);
3446
3446
  }
3447
3447
  .form-check-input:checked[type=checkbox] {
3448
3448
  --bs-form-check-bg-image: url("data:image/svg+xml, %3csvg viewBox='-4 -6 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.294 0.594229C14.3863 0.498719 14.4966 0.422536 14.6186 0.370127C14.7406 0.317718 14.8719 0.290132 15.0046 0.288978C15.1374 0.287824 15.2691 0.313126 15.392 0.363407C15.5149 0.413688 15.6265 0.487941 15.7204 0.581833C15.8143 0.675726 15.8886 0.787378 15.9389 0.910275C15.9891 1.03317 16.0144 1.16485 16.0133 1.29763C16.0121 1.43041 15.9846 1.56163 15.9321 1.68363C15.8797 1.80564 15.8036 1.91598 15.708 2.00823L6.70804 11.0082C6.52051 11.1957 6.26621 11.301 6.00104 11.301C5.73588 11.301 5.48157 11.1957 5.29404 11.0082L0.293041 6.00723C0.110883 5.81863 0.0100885 5.56602 0.0123669 5.30383C0.0146453 5.04163 0.119815 4.79082 0.305223 4.60541C0.490631 4.42 0.741443 4.31483 1.00364 4.31255C1.26584 4.31028 1.51844 4.41107 1.70704 4.59323L6.00104 8.88723L14.294 0.594229V0.594229Z' fill='%23fff'/%3e%3c/svg%3e");
@@ -3451,8 +3451,8 @@ textarea.form-control-lg {
3451
3451
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
3452
3452
  }
3453
3453
  .form-check-input[type=checkbox]:indeterminate {
3454
- background-color: var(--bs-focus-ring-color);
3455
- border-color: var(--bs-focus-ring-color);
3454
+ background-color: var(--bs-primary);
3455
+ border-color: var(--bs-primary);
3456
3456
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
3457
3457
  }
3458
3458
  .form-check-input:disabled {
@@ -3527,10 +3527,10 @@ textarea.form-control-lg {
3527
3527
  outline: 0;
3528
3528
  }
3529
3529
  .form-range:focus::-webkit-slider-thumb {
3530
- box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 1px rgba(var(--bs-secondary-rgb));
3530
+ box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.4);
3531
3531
  }
3532
3532
  .form-range:focus::-moz-range-thumb {
3533
- box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 1px rgba(var(--bs-secondary-rgb));
3533
+ box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.4);
3534
3534
  }
3535
3535
  .form-range::-moz-focus-outer {
3536
3536
  border: 0;
@@ -3538,10 +3538,10 @@ textarea.form-control-lg {
3538
3538
  .form-range::-webkit-slider-thumb {
3539
3539
  width: 1rem;
3540
3540
  height: 1rem;
3541
- margin-top: -0.25rem;
3541
+ margin-top: -0.375rem;
3542
3542
  -webkit-appearance: none;
3543
3543
  appearance: none;
3544
- background-color: var(--bs-focus-ring-color);
3544
+ background-color: var(--bs-primary);
3545
3545
  border: 0;
3546
3546
  border-radius: 1rem;
3547
3547
  box-shadow: 0 0.1rem 0.25rem rgba(var(--bs-black-rgb), 0.1);
@@ -3555,24 +3555,24 @@ textarea.form-control-lg {
3555
3555
  }
3556
3556
  }
3557
3557
  .form-range::-webkit-slider-thumb:active {
3558
- background-color: var(--bs-focus-ring-color);
3558
+ background-color: var(--bs-primary);
3559
3559
  }
3560
3560
  .form-range::-webkit-slider-runnable-track {
3561
3561
  width: 100%;
3562
- height: 0.5rem;
3562
+ height: 0.25rem;
3563
3563
  color: transparent;
3564
3564
  cursor: pointer;
3565
3565
  background-color: var(--bs-gray-300);
3566
3566
  border-color: transparent;
3567
- border-radius: 1rem;
3568
- box-shadow: var(--bs-box-shadow-inset);
3567
+ border-radius: var(--bs-ref-spacer-6);
3568
+ box-shadow: none;
3569
3569
  }
3570
3570
  .form-range::-moz-range-thumb {
3571
3571
  width: 1rem;
3572
3572
  height: 1rem;
3573
3573
  -moz-appearance: none;
3574
3574
  appearance: none;
3575
- background-color: var(--bs-focus-ring-color);
3575
+ background-color: var(--bs-primary);
3576
3576
  border: 0;
3577
3577
  border-radius: 1rem;
3578
3578
  box-shadow: 0 0.1rem 0.25rem rgba(var(--bs-black-rgb), 0.1);
@@ -3586,17 +3586,17 @@ textarea.form-control-lg {
3586
3586
  }
3587
3587
  }
3588
3588
  .form-range::-moz-range-thumb:active {
3589
- background-color: var(--bs-focus-ring-color);
3589
+ background-color: var(--bs-primary);
3590
3590
  }
3591
3591
  .form-range::-moz-range-track {
3592
3592
  width: 100%;
3593
- height: 0.5rem;
3593
+ height: 0.25rem;
3594
3594
  color: transparent;
3595
3595
  cursor: pointer;
3596
3596
  background-color: var(--bs-gray-300);
3597
3597
  border-color: transparent;
3598
- border-radius: 1rem;
3599
- box-shadow: var(--bs-box-shadow-inset);
3598
+ border-radius: var(--bs-ref-spacer-6);
3599
+ box-shadow: none;
3600
3600
  }
3601
3601
  .form-range:disabled {
3602
3602
  pointer-events: none;
@@ -3994,7 +3994,7 @@ textarea.form-control-lg {
3994
3994
  --bs-dropdown-link-hover-color: rgb(var(--bs-gray-500-rgb));
3995
3995
  --bs-dropdown-link-hover-bg: rgb(var(--bs-gray-100-rgb));
3996
3996
  --bs-dropdown-link-active-color: var(--bs-white);
3997
- --bs-dropdown-link-active-bg: var(--bs-focus-ring-color);
3997
+ --bs-dropdown-link-active-bg: var(--bs-primary);
3998
3998
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
3999
3999
  --bs-dropdown-item-padding-x: var(--bs-ref-spacer-4);
4000
4000
  --bs-dropdown-item-padding-y: var(--bs-ref-spacer-2);
@@ -4261,7 +4261,7 @@ textarea.form-control-lg {
4261
4261
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
4262
4262
  --bs-dropdown-link-hover-bg: rgba(var(--bs-white-rgb), 0.15);
4263
4263
  --bs-dropdown-link-active-color: var(--bs-white);
4264
- --bs-dropdown-link-active-bg: var(--bs-focus-ring-color);
4264
+ --bs-dropdown-link-active-bg: var(--bs-primary);
4265
4265
  --bs-dropdown-link-disabled-color: var(--bs-gray-500);
4266
4266
  --bs-dropdown-header-color: var(--bs-gray-500);
4267
4267
  }
@@ -5311,8 +5311,8 @@ textarea.form-control-lg {
5311
5311
  --bs-pagination-focus-bg: var(--bs-secondary-100);
5312
5312
  --bs-pagination-focus-box-shadow: 0;
5313
5313
  --bs-pagination-active-color: var(--bs-white);
5314
- --bs-pagination-active-bg: var(--bs-focus-ring-color);
5315
- --bs-pagination-active-border-color: var(--bs-focus-ring-color);
5314
+ --bs-pagination-active-bg: var(--bs-primary);
5315
+ --bs-pagination-active-border-color: var(--bs-primary);
5316
5316
  --bs-pagination-disabled-color: var(--bs-gray-400);
5317
5317
  --bs-pagination-disabled-bg: var(--bs-transparent);
5318
5318
  --bs-pagination-disabled-border-color: var(--bs-border-color);
@@ -5563,8 +5563,8 @@ textarea.form-control-lg {
5563
5563
  --bs-list-group-disabled-color: var(--bs-gray-600);
5564
5564
  --bs-list-group-disabled-bg: transparent;
5565
5565
  --bs-list-group-active-color: var(--bs-white);
5566
- --bs-list-group-active-bg: var(--bs-focus-ring-color);
5567
- --bs-list-group-active-border-color: var(--bs-focus-ring-color);
5566
+ --bs-list-group-active-bg: var(--bs-primary);
5567
+ --bs-list-group-active-border-color: var(--bs-primary);
5568
5568
  display: flex;
5569
5569
  flex-direction: column;
5570
5570
  padding-left: 0;
@@ -7516,7 +7516,7 @@ body {
7516
7516
  outline-offset: 2px;
7517
7517
  }
7518
7518
  .form-check-input:checked {
7519
- border-color: var(--bs-focus-ring-color);
7519
+ border-color: var(--bs-primary);
7520
7520
  }
7521
7521
  .form-check-input:disabled:not(:checked, :indeterminate) {
7522
7522
  background-color: var(--bs-gray-100);
@@ -7534,6 +7534,19 @@ body {
7534
7534
  appearance: none;
7535
7535
  }
7536
7536
 
7537
+ .form-range.form-range-value-indicator::-webkit-slider-runnable-track {
7538
+ background: linear-gradient(to right, var(--bs-primary) 0%, var(--bs-primary) var(--bs-form-range-component-value), var(--bs-gray-300) var(--bs-form-range-component-value), var(--bs-gray-300) 100%);
7539
+ }
7540
+ .form-range.form-range-value-indicator::-moz-range-track {
7541
+ background: linear-gradient(to right, var(--bs-primary) 0%, var(--bs-primary) var(--bs-form-range-component-value), var(--bs-gray-300) var(--bs-form-range-component-value), var(--bs-gray-300) 100%);
7542
+ }
7543
+ .form-range:disabled.form-range-value-indicator::-webkit-slider-runnable-track {
7544
+ background: linear-gradient(to right, var(--bs-gray-500) 0%, var(--bs-gray-500) var(--bs-form-range-component-value), var(--bs-gray-300) var(--bs-form-range-component-value), var(--bs-gray-300) 100%);
7545
+ }
7546
+ .form-range:disabled.form-range-value-indicator::-moz-range-track {
7547
+ background: linear-gradient(to right, var(--bs-gray-500) 0%, var(--bs-gray-500) var(--bs-form-range-component-value), var(--bs-gray-300) var(--bs-form-range-component-value), var(--bs-gray-300) 100%);
7548
+ }
7549
+
7537
7550
  .form-text {
7538
7551
  --bs-form-text-padding: 0 0.5rem;
7539
7552
  --bs-form-text-gap: var(--bs-ref-spacer-1);
@@ -7609,24 +7622,24 @@ body {
7609
7622
  border-color: var(--bs-input-focus-border-color);
7610
7623
  box-shadow: var(--bs-input-focus-box-shadow);
7611
7624
  }
7612
- .input-group:has(.form-control.is-valid) {
7625
+ .input-group:has(.form-control.is-valid, .form-select.is-valid) {
7613
7626
  border-color: var(--bs-form-valid-border-color);
7614
7627
  box-shadow: 0 0 0 1px rgba(var(--bs-success-rgb), 1);
7615
7628
  }
7616
- .input-group:has(.form-control.is-valid) ~ .form-text {
7629
+ .input-group:has(.form-control.is-valid, .form-select.is-valid) ~ .form-text {
7617
7630
  color: var(--bs-form-valid-border-color);
7618
7631
  }
7619
- .input-group:has(.form-control.is-valid) .input-group-validation-icon {
7632
+ .input-group:has(.form-control.is-valid, .form-select.is-valid) .input-group-validation-icon {
7620
7633
  --bs-icon-color: var(--bs-success);
7621
7634
  }
7622
- .input-group:has(.form-control.is-invalid) {
7635
+ .input-group:has(.form-control.is-invalid, .form-select.is-invalid) {
7623
7636
  border-color: var(--bs-form-invalid-border-color);
7624
7637
  box-shadow: 0 0 0 1px rgba(var(--bs-danger-rgb), 1);
7625
7638
  }
7626
- .input-group:has(.form-control.is-invalid) ~ .form-text {
7639
+ .input-group:has(.form-control.is-invalid, .form-select.is-invalid) ~ .form-text {
7627
7640
  color: var(--bs-form-invalid-border-color);
7628
7641
  }
7629
- .input-group:has(.form-control.is-invalid) .input-group-validation-icon {
7642
+ .input-group:has(.form-control.is-invalid, .form-select.is-invalid) .input-group-validation-icon {
7630
7643
  --bs-icon-color: var(--bs-danger);
7631
7644
  }
7632
7645
  .input-group:has(.form-select:disabled), .input-group:has(.form-control:disabled) {
@@ -11731,6 +11744,7 @@ label .d-icon {
11731
11744
  .d-select {
11732
11745
  --bs-select-gap: 0.5rem;
11733
11746
  --bs-select-menu-shadow: 0 8px 12px 0 rgba(35, 36, 38, 0.05);
11747
+ --bs-select-menu-z-index: 1000;
11734
11748
  --bs-select-option-focus-bg: var(--bs-gray-100);
11735
11749
  --bs-select-option-selected-color: var(--bs-secondary);
11736
11750
  --bs-select-option-selected-bg: var(--bs-gray-100);
@@ -11814,6 +11828,7 @@ label .d-icon {
11814
11828
  }
11815
11829
  .d-select .d-select__menu-list {
11816
11830
  top: calc(var(--bs-input-border-width) * 2);
11831
+ z-index: var(--bs-select-menu-z-index);
11817
11832
  margin: calc(var(--bs-input-border-width) * -1);
11818
11833
  background: var(--bs-white);
11819
11834
  border-radius: var(--bs-input-border-radius);