@rolster/react-components 18.21.46 → 18.22.1

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 (45) hide show
  1. package/dist/cjs/assets/{index-CaA_sxmM.css → index-B9-Brjbd.css} +197 -1
  2. package/dist/cjs/index.js +444 -5
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/es/assets/{index-CaA_sxmM.css → index-B9-Brjbd.css} +197 -1
  5. package/dist/es/index.js +440 -6
  6. package/dist/es/index.js.map +1 -1
  7. package/dist/esm/components/molecules/Slider/Slider.css +60 -0
  8. package/dist/esm/components/molecules/Slider/Slider.css.map +1 -0
  9. package/dist/esm/components/molecules/Slider/Slider.d.ts +14 -0
  10. package/dist/esm/components/molecules/Slider/Slider.js +60 -0
  11. package/dist/esm/components/molecules/Slider/Slider.js.map +1 -0
  12. package/dist/esm/components/molecules/index.d.ts +1 -0
  13. package/dist/esm/components/molecules/index.js +1 -0
  14. package/dist/esm/components/molecules/index.js.map +1 -1
  15. package/dist/esm/components/organisms/ImageChooser/ImageChooser.css +36 -0
  16. package/dist/esm/components/organisms/ImageChooser/ImageChooser.css.map +1 -0
  17. package/dist/esm/components/organisms/ImageChooser/ImageChooser.d.ts +12 -0
  18. package/dist/esm/components/organisms/ImageChooser/ImageChooser.js +62 -0
  19. package/dist/esm/components/organisms/ImageChooser/ImageChooser.js.map +1 -0
  20. package/dist/esm/components/organisms/ImageEditor/ImageEditor.css +97 -0
  21. package/dist/esm/components/organisms/ImageEditor/ImageEditor.css.map +1 -0
  22. package/dist/esm/components/organisms/ImageEditor/ImageEditor.d.ts +21 -0
  23. package/dist/esm/components/organisms/ImageEditor/ImageEditor.js +207 -0
  24. package/dist/esm/components/organisms/ImageEditor/ImageEditor.js.map +1 -0
  25. package/dist/esm/components/organisms/Modal/Modal.css +1 -1
  26. package/dist/esm/components/organisms/Modal/Modal.css.map +1 -1
  27. package/dist/esm/components/organisms/Modal/Modal.d.ts +2 -1
  28. package/dist/esm/components/organisms/Modal/Modal.js +5 -5
  29. package/dist/esm/components/organisms/Modal/Modal.js.map +1 -1
  30. package/dist/esm/components/organisms/index.d.ts +2 -0
  31. package/dist/esm/components/organisms/index.js +2 -0
  32. package/dist/esm/components/organisms/index.js.map +1 -1
  33. package/dist/esm/controllers/RelocationOnComponentController.d.ts +8 -0
  34. package/dist/esm/controllers/RelocationOnComponentController.js +93 -0
  35. package/dist/esm/controllers/RelocationOnComponentController.js.map +1 -0
  36. package/dist/esm/controllers/ResizeController.d.ts +15 -0
  37. package/dist/esm/controllers/ResizeController.js +29 -0
  38. package/dist/esm/controllers/ResizeController.js.map +1 -0
  39. package/dist/esm/controllers/index.d.ts +2 -0
  40. package/dist/esm/controllers/index.js +2 -0
  41. package/dist/esm/controllers/index.js.map +1 -1
  42. package/dist/esm/i18n.d.ts +3 -0
  43. package/dist/esm/i18n.js +6 -0
  44. package/dist/esm/i18n.js.map +1 -1
  45. package/package.json +1 -1
@@ -1767,6 +1767,67 @@
1767
1767
  letter-spacing: 0.325rem;
1768
1768
  } /*# sourceMappingURL=PickerYear.css.map */
1769
1769
 
1770
+ .rls-slider {
1771
+ --pvt-track-height: var(--rls-sizing-x3);
1772
+ --pvt-thumb-background: var(--rls-theme-color-600);
1773
+ --pvt-thumb-color: var(--rls-theme-color-050);
1774
+ }
1775
+ .rls-slider--empty {
1776
+ --pvt-thumb-background: var(--rls-app-color-300);
1777
+ --pvt-thumb-color: var(--rls-app-color-900);
1778
+ }
1779
+ .rls-slider__component {
1780
+ position: relative;
1781
+ width: calc(100% - var(--rls-sizing-x10));
1782
+ margin: 0rem 5rem;
1783
+ padding: var(--rls-sizing-x4) 0rem;
1784
+ box-sizing: border-box;
1785
+ }
1786
+ .rls-slider__body {
1787
+ display: flex;
1788
+ column-gap: var(--rls-sizing-x4);
1789
+ align-items: center;
1790
+ }
1791
+ .rls-slider__body .rls-icon {
1792
+ padding: var(--rls-sizing-x4);
1793
+ border-radius: 50%;
1794
+ background: var(--rls-app-color-300);
1795
+ }
1796
+ .rls-slider__track {
1797
+ position: relative;
1798
+ width: 100%;
1799
+ height: var(--pvt-track-height);
1800
+ cursor: pointer;
1801
+ background: var(--rls-app-color-300);
1802
+ }
1803
+ .rls-slider__track__on {
1804
+ position: absolute;
1805
+ width: 0%;
1806
+ height: var(--pvt-track-height);
1807
+ overflow: hidden;
1808
+ z-index: var(--rls-z-index-4);
1809
+ transition: width 200ms 0ms var(--rls-standard-curve);
1810
+ background: var(--rls-theme-color-600);
1811
+ }
1812
+ .rls-slider__thumb {
1813
+ position: absolute;
1814
+ top: 0.5rem;
1815
+ left: 0rem;
1816
+ cursor: pointer;
1817
+ width: var(--rls-sizing-x10);
1818
+ height: var(--rls-sizing-x10);
1819
+ line-height: var(--rls-sizing-x10);
1820
+ text-align: center;
1821
+ font-size: 3.5rem;
1822
+ font-weight: var(--rls-font-weight-medium);
1823
+ color: var(--pvt-thumb-color);
1824
+ z-index: var(--rls-z-index-4);
1825
+ border-radius: 50%;
1826
+ background: var(--pvt-thumb-background);
1827
+ transform: translateX(-50%);
1828
+ transition: left 200ms 0ms var(--rls-standard-curve);
1829
+ } /*# sourceMappingURL=Slider.css.map */
1830
+
1770
1831
  .rls-toolbar {
1771
1832
  display: flex;
1772
1833
  justify-content: space-between;
@@ -2080,7 +2141,7 @@
2080
2141
  .rls-modal__component {
2081
2142
  position: absolute;
2082
2143
  width: auto;
2083
- max-width: calc(100% - var(--rls-sizing-x8));
2144
+ max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
2084
2145
  height: var(--pvt-component-height);
2085
2146
  opacity: var(--pvt-component-opacity);
2086
2147
  visibility: var(--pvt-component-visibility);
@@ -2424,6 +2485,141 @@
2424
2485
  float: right;
2425
2486
  } /*# sourceMappingURL=FormNavigation.css.map */
2426
2487
 
2488
+ .rls-image-editor {
2489
+ --pvt-overlay-background: var(--rls-theme-backdrop-900);
2490
+ --pvt-sliders-padding: 0rem var(--rls-sizing-x8);
2491
+ --pvt-actions-direction: row;
2492
+ --pvt-actions-row-gap: 0rem;
2493
+ --pvt-actions-column-gap: var(--rls-sizing-x8);
2494
+ position: relative;
2495
+ display: flex;
2496
+ height: 100%;
2497
+ flex-direction: column;
2498
+ row-gap: var(--rls-sizing-x12);
2499
+ }
2500
+ .rls-image-editor__body {
2501
+ position: relative;
2502
+ display: flex;
2503
+ height: 100%;
2504
+ justify-content: center;
2505
+ background: var(--rls-app-color-900);
2506
+ }
2507
+ .rls-image-editor__body__image {
2508
+ overflow: hidden;
2509
+ }
2510
+ .rls-image-editor__body__selection {
2511
+ position: absolute;
2512
+ cursor: move;
2513
+ box-sizing: border-box;
2514
+ z-index: var(--rls-z-index-4);
2515
+ border: var(
2516
+ --rlc-image-editor-selection-border,
2517
+ 2px dashed var(--rls-app-color-050)
2518
+ );
2519
+ user-select: none;
2520
+ }
2521
+ .rls-image-editor__body__overlay--top {
2522
+ position: absolute;
2523
+ top: 0rem;
2524
+ z-index: var(--rls-z-index-2);
2525
+ background: var(--pvt-overlay-background);
2526
+ }
2527
+ .rls-image-editor__body__overlay--right {
2528
+ position: absolute;
2529
+ right: 0rem;
2530
+ height: 100%;
2531
+ z-index: var(--rls-z-index-2);
2532
+ background: var(--pvt-overlay-background);
2533
+ }
2534
+ .rls-image-editor__body__overlay--bottom {
2535
+ position: absolute;
2536
+ bottom: 0rem;
2537
+ z-index: var(--rls-z-index-2);
2538
+ background: var(--pvt-overlay-background);
2539
+ }
2540
+ .rls-image-editor__body__overlay--left {
2541
+ position: absolute;
2542
+ right: 0rem;
2543
+ height: 100%;
2544
+ z-index: var(--rls-z-index-2);
2545
+ background: var(--pvt-overlay-background);
2546
+ }
2547
+ .rls-image-editor__footer {
2548
+ display: flex;
2549
+ flex-direction: column;
2550
+ row-gap: var(--rls-sizing-x12);
2551
+ padding: var(--rlc-image-editor-footer-padding, 0rem);
2552
+ box-sizing: border-box;
2553
+ }
2554
+ .rls-image-editor__sliders {
2555
+ display: flex;
2556
+ flex-direction: column;
2557
+ row-gap: var(--rls-sizing-x6);
2558
+ padding: var(--pvt-sliders-padding);
2559
+ box-sizing: border-box;
2560
+ }
2561
+ .rls-image-editor__actions {
2562
+ display: flex;
2563
+ flex-direction: var(--pvt-actions-direction);
2564
+ justify-content: center;
2565
+ row-gap: var(--pvt-actions-row-gap);
2566
+ column-gap: var(--pvt-actions-column-gap);
2567
+ }
2568
+ .rls-image-editor > canvas {
2569
+ position: absolute;
2570
+ top: 0rem;
2571
+ left: 0rem;
2572
+ z-index: -1;
2573
+ visibility: hidden;
2574
+ pointer-events: none;
2575
+ }
2576
+ @media only screen and (max-width: 420px) {
2577
+ .rls-image-editor {
2578
+ --pvt-sliders-padding: 0rem;
2579
+ --pvt-actions-direction: column;
2580
+ --pvt-actions-row-gap: var(--rls-sizing-x6);
2581
+ --pvt-actions-column-gap: 0rem;
2582
+ row-gap: var(--rls-sizing-x8);
2583
+ }
2584
+ } /*# sourceMappingURL=ImageEditor.css.map */
2585
+
2586
+ .rls-image-chooser {
2587
+ position: relative;
2588
+ width: var(--rlc-image-chooser-width, 48rem);
2589
+ height: var(--rlc-image-chooser-height, 48rem);
2590
+ border-radius: var(--rlc-image-chooser-radius, 50%);
2591
+ overflow: hidden;
2592
+ }
2593
+ .rls-image-chooser__avatar {
2594
+ display: flex;
2595
+ width: 100%;
2596
+ height: 100%;
2597
+ justify-content: center;
2598
+ align-items: center;
2599
+ background: var(--rls-theme-color-600);
2600
+ }
2601
+ .rls-image-chooser__avatar img {
2602
+ width: 100%;
2603
+ }
2604
+ .rls-image-chooser > input[type='file'] {
2605
+ position: absolute;
2606
+ z-index: -1;
2607
+ visibility: hidden;
2608
+ }
2609
+ .rls-image-chooser__modal {
2610
+ --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
2611
+ var(--rls-sizing-x12) var(--rls-sizing-x12);
2612
+ --rlc-modal-max-width: calc(100% - var(--rls-sizing-x16));
2613
+ width: 100%;
2614
+ }
2615
+ @media only screen and (max-width: 420px) {
2616
+ .rls-image-chooser__modal {
2617
+ --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
2618
+ var(--rls-sizing-x8) var(--rls-sizing-x8);
2619
+ --rlc-modal-max-width: 160rem;
2620
+ }
2621
+ } /*# sourceMappingURL=ImageChooser.css.map */
2622
+
2427
2623
  .rls-snackbar {
2428
2624
  position: fixed;
2429
2625
  display: flex;