@rt-tools/ui-kit-v2 0.14.0 → 0.16.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 (83) hide show
  1. package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +49 -7
  2. package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
  3. package/fesm2022/rt-tools-ui-kit-v2.mjs +5885 -2414
  4. package/fesm2022/rt-tools-ui-kit-v2.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/rt-tools-ui-kit-v2-0.16.0.tgz +0 -0
  7. package/src/assets/icons/chat-error.svg +9 -0
  8. package/src/assets/icons/fork-spoon.svg +9 -0
  9. package/src/assets/icons/fullscreen.svg +9 -0
  10. package/src/assets/icons/home.svg +9 -0
  11. package/src/assets/icons/layers.svg +9 -0
  12. package/src/assets/icons/pin.svg +5 -0
  13. package/src/assets/icons/troubleshoot.svg +9 -0
  14. package/src/assets/icons-material/chart-bar.fill.svg +5 -0
  15. package/src/assets/icons-material/chart-bar.svg +5 -0
  16. package/src/assets/icons-material/chart-line.fill.svg +5 -0
  17. package/src/assets/icons-material/chart-line.svg +5 -0
  18. package/src/assets/icons-material/chat-error.fill.svg +5 -0
  19. package/src/assets/icons-material/chat-error.svg +5 -0
  20. package/src/assets/icons-material/comment.fill.svg +5 -0
  21. package/src/assets/icons-material/comment.svg +5 -0
  22. package/src/assets/icons-material/fork-spoon.fill.svg +5 -0
  23. package/src/assets/icons-material/fork-spoon.svg +5 -0
  24. package/src/assets/icons-material/fullscreen.fill.svg +5 -0
  25. package/src/assets/icons-material/fullscreen.svg +5 -0
  26. package/src/assets/icons-material/home.fill.svg +3 -0
  27. package/src/assets/icons-material/home.svg +5 -0
  28. package/src/assets/icons-material/ico-exit.fill.svg +5 -0
  29. package/src/assets/icons-material/ico-exit.svg +5 -0
  30. package/src/assets/icons-material/ico-sun.fill.svg +5 -0
  31. package/src/assets/icons-material/ico-sun.svg +5 -0
  32. package/src/assets/icons-material/ico-user.fill.svg +5 -0
  33. package/src/assets/icons-material/ico-user.svg +5 -0
  34. package/src/assets/icons-material/layers.fill.svg +3 -0
  35. package/src/assets/icons-material/layers.svg +5 -0
  36. package/src/assets/icons-material/minus.fill.svg +3 -0
  37. package/src/assets/icons-material/minus.svg +3 -0
  38. package/src/assets/icons-material/moon.fill.svg +5 -0
  39. package/src/assets/icons-material/moon.svg +5 -0
  40. package/src/assets/icons-material/pin.fill.svg +3 -0
  41. package/src/assets/icons-material/pin.svg +5 -0
  42. package/src/assets/icons-material/search-plus.fill.svg +5 -0
  43. package/src/assets/icons-material/search-plus.svg +5 -0
  44. package/src/assets/icons-material/th-large.fill.svg +3 -0
  45. package/src/assets/icons-material/th-large.svg +5 -0
  46. package/src/assets/icons-material/troubleshoot.fill.svg +5 -0
  47. package/src/assets/icons-material/troubleshoot.svg +5 -0
  48. package/src/lib/components/CONTEXT.md +1 -1
  49. package/src/lib/components/aside/CONTEXT.md +9 -0
  50. package/src/lib/components/aside/error-box/rt-aside-error-box.component.scss +37 -0
  51. package/src/lib/components/aside/rt-aside.component.scss +14 -2
  52. package/src/lib/components/dynamic-selector/CONTEXT.md +44 -0
  53. package/src/lib/components/dynamic-selector/dynamic-input/rt-dynamic-input.component.scss +19 -0
  54. package/src/lib/components/dynamic-selector/list/rt-dynamic-selector-list.component.scss +108 -0
  55. package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss +170 -0
  56. package/src/lib/components/dynamic-selector/rt-dynamic-selector.component.scss +23 -0
  57. package/src/lib/components/dynamic-selector/stories/component/test-dynamic-selector-matrix.component.scss +8 -0
  58. package/src/lib/components/dynamic-selector/stories/component/test-dynamic-selector.component.scss +7 -0
  59. package/src/lib/components/empty-state/CONTEXT.md +3 -0
  60. package/src/lib/components/empty-state/rt-empty-state.component.scss +9 -0
  61. package/src/lib/components/expansion-panel/CONTEXT.md +45 -0
  62. package/src/lib/components/expansion-panel/rt-expansion-panel.component.scss +134 -0
  63. package/src/lib/components/expansion-panel/stories/component/test-expansion-panel-matrix.component.scss +31 -0
  64. package/src/lib/components/image-cropper/CONTEXT.md +54 -0
  65. package/src/lib/components/image-cropper/rt-image-cropper.component.scss +220 -0
  66. package/src/lib/components/image-upload/CONTEXT.md +65 -0
  67. package/src/lib/components/image-upload/rt-image-upload.component.scss +77 -0
  68. package/src/lib/components/menu/CONTEXT.md +27 -0
  69. package/src/lib/components/menu/rt-menu-item.component.scss +42 -0
  70. package/src/lib/components/side-menu/CONTEXT.md +38 -0
  71. package/src/lib/components/side-menu/favorites/rt-side-menu-favorites.component.scss +126 -0
  72. package/src/lib/components/side-menu/rt-side-menu.component.scss +303 -0
  73. package/src/lib/components/side-menu/stories/component/test-side-menu-cell.component.scss +27 -0
  74. package/src/lib/components/side-menu/stories/component/test-side-menu.component.scss +39 -0
  75. package/src/lib/components/side-menu/sub-item/rt-side-menu-sub-item.component.scss +203 -0
  76. package/src/lib/components/table/CONTEXT.md +6 -0
  77. package/src/lib/components/table/rt-table.component.scss +4 -2
  78. package/src/lib/components/tooltip/CONTEXT.md +7 -4
  79. package/src/rich-editor/lib/components/message-composer/CONTEXT.md +15 -1
  80. package/src/styles/_color-scheme.scss +50 -0
  81. package/types/rt-tools-ui-kit-v2-rich-editor.d.ts +22 -2
  82. package/types/rt-tools-ui-kit-v2.d.ts +1236 -13
  83. package/rt-tools-ui-kit-v2-0.14.0.tgz +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rt-tools/ui-kit-v2",
3
- "version": "0.14.0",
3
+ "version": "0.16.0",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Yauheni Krumin",
6
6
  "type": "module",
package/rt-tools-ui-kit-v2-0.16.0.tgz ADDED
Binary file
package/src/assets/icons/chat-error.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
2
+ <path
3
+ d="M4 3h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H8l-5 4V4a1 1 0 0 1 1-1ZM12 7v4.5M12 14.3h.01"
4
+ fill="none"
5
+ stroke="currentColor"
6
+ stroke-width="1.94"
7
+ stroke-linecap="round"
8
+ stroke-linejoin="round" />
9
+ </svg>
package/src/assets/icons/fork-spoon.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
2
+ <path
3
+ d="M6 3v5.5a2.5 2.5 0 0 0 5 0V3M8.5 3v18M16.5 11c1.4 0 2.5-1.8 2.5-4s-1.1-4-2.5-4S14 4.8 14 7s1.1 4 2.5 4Zm0 0v10"
4
+ fill="none"
5
+ stroke="currentColor"
6
+ stroke-width="1.94"
7
+ stroke-linecap="round"
8
+ stroke-linejoin="round" />
9
+ </svg>
package/src/assets/icons/fullscreen.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
2
+ <path
3
+ d="M3 8V4a1 1 0 0 1 1-1h4M16 3h4a1 1 0 0 1 1 1v4M21 16v4a1 1 0 0 1-1 1h-4M8 21H4a1 1 0 0 1-1-1v-4"
4
+ fill="none"
5
+ stroke="currentColor"
6
+ stroke-width="1.94"
7
+ stroke-linecap="round"
8
+ stroke-linejoin="round" />
9
+ </svg>
package/src/assets/icons/home.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
2
+ <path
3
+ d="M3 10.5 12 3l9 7.5M5.5 8.5V20a1 1 0 0 0 1 1H10v-6h4v6h3.5a1 1 0 0 0 1-1V8.5"
4
+ fill="none"
5
+ stroke="currentColor"
6
+ stroke-width="1.94"
7
+ stroke-linecap="round"
8
+ stroke-linejoin="round" />
9
+ </svg>
package/src/assets/icons/layers.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
2
+ <path
3
+ d="M12 3 3 8l9 5 9-5-9-5ZM3 12.5l9 5 9-5M3 16.5l9 5 9-5"
4
+ fill="none"
5
+ stroke="currentColor"
6
+ stroke-width="1.94"
7
+ stroke-linecap="round"
8
+ stroke-linejoin="round" />
9
+ </svg>
package/src/assets/icons/pin.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
2
+ <path
3
+ fill-rule="evenodd"
4
+ d="M7.5 2h9v1.7h-1.3v6.4l3.1 3.1V15h-5.45v6.1L12 22l-.85-.9V15H5.7v-1.8l3.1-3.1V3.7H7.5V2Zm3 1.7v7.1L8.3 13.3h7.4l-2.2-2.5V3.7h-3Z" />
5
+ </svg>
package/src/assets/icons/troubleshoot.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
2
+ <path
3
+ d="M10 16.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13ZM14.8 14.8 21 21M5.5 10.5h1.8L8.6 8l2 4.5 1.3-2h1.6"
4
+ fill="none"
5
+ stroke="currentColor"
6
+ stroke-width="1.94"
7
+ stroke-linecap="round"
8
+ stroke-linejoin="round" />
9
+ </svg>
package/src/assets/icons-material/chart-bar.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M289-277h60v-275h-60v275Zm161 0h60v-406h-60v406Zm162 0h60v-148h-60v148ZM189-95q-39.05 0-66.53-27.47Q95-149.95 95-189v-582q0-39.46 27.47-67.23Q149.95-866 189-866h582q39.46 0 67.23 27.77Q866-810.46 866-771v582q0 39.05-27.77 66.53Q810.46-95 771-95H189Z" />
5
+ </svg>
package/src/assets/icons-material/chart-bar.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M289-277h60v-275h-60v275Zm161 0h60v-406h-60v406Zm162 0h60v-148h-60v148ZM189-95q-39.05 0-66.53-27.47Q95-149.95 95-189v-582q0-39.46 27.47-67.23Q149.95-866 189-866h582q39.46 0 67.23 27.77Q866-810.46 866-771v582q0 39.05-27.77 66.53Q810.46-95 771-95H189Zm0-94h582v-582H189v582Zm0-582v582-582Z" />
5
+ </svg>
package/src/assets/icons-material/chart-line.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M103-103v-100l91-91v191h-91Zm166 0v-261l91-91v352h-91Zm166 0v-352l91 91v261h-91Zm166 0v-263l91-90v353h-91Zm166 0v-424l90-90v514h-90ZM103-320v-134l297-295 160 160 297-298v133L560-455 400-615 103-320Z" />
5
+ </svg>
package/src/assets/icons-material/chart-line.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M103-103v-100l91-91v191h-91Zm166 0v-261l91-91v352h-91Zm166 0v-352l91 91v261h-91Zm166 0v-263l91-90v353h-91Zm166 0v-424l90-90v514h-90ZM103-320v-134l297-295 160 160 297-298v133L560-455 400-615 103-320Z" />
5
+ </svg>
package/src/assets/icons-material/chat-error.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M55-55v-756q0-39 27.5-67t66.5-28h662q39 0 67 28t28 67v502q0 39-28 66.5T811-215H215L55-55Zm321-346 104-103 104 103 56-55-104-104 104-104-56-56-104 104-104-104-55 56 103 104-103 104 55 55Z" />
5
+ </svg>
package/src/assets/icons-material/chat-error.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="m376-401 104-103 104 103 56-55-104-104 104-104-56-56-104 104-104-104-55 56 103 104-103 104 55 55ZM55-55v-756q0-39.46 27.47-67.23Q109.95-906 149-906h662q39.46 0 67.23 27.77Q906-850.46 906-811v502q0 39.05-27.77 66.52Q850.46-215 811-215H215L55-55Zm134-254h622v-502H149v548l40-46Zm-40 0v-502 502Z" />
5
+ </svg>
package/src/assets/icons-material/comment.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M55-55v-756q0-39.46 27.47-67.23Q109.95-906 149-906h662q39.46 0 67.23 27.77Q906-850.46 906-811v502q0 39.05-27.77 66.52Q850.46-215 811-215H215L55-55Zm185-344h313v-60H240v60Zm0-130h480v-60H240v60Zm0-130h480v-60H240v60Z" />
5
+ </svg>
package/src/assets/icons-material/comment.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M240-399h313v-60H240v60Zm0-130h480v-60H240v60Zm0-130h480v-60H240v60ZM55-55v-756q0-39.46 27.47-67.23Q109.95-906 149-906h662q39.46 0 67.23 27.77Q906-850.46 906-811v502q0 39.05-27.77 66.52Q850.46-215 811-215H215L55-55Zm134-254h622v-502H149v548l40-46Zm-40 0v-502 502Z" />
5
+ </svg>
package/src/assets/icons-material/fork-spoon.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M211-55v-381.11Q142-452 103.5-497.85T65-606v-300h87v253h63v-253h87v253h64v-253h87v300q0 58.07-39.5 104.04Q374-456 305-437v382h-94Zm460 0v-403q-58-25-94.5-83.08T540-677q0-95.08 51.5-162.04T718-906q75 0 126.5 67T896-677q0 77.22-36.5 136.11Q823-482 766-457v402h-95Z" />
5
+ </svg>
package/src/assets/icons-material/fork-spoon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M211-55v-381.11Q142-452 103.5-497.85T65-606v-300h87v253h63v-253h87v253h64v-253h87v300q0 58.07-39.5 104.04Q374-456 305-437v382h-94Zm460 0v-403q-58-25-94.5-83.08T540-677q0-95.08 51.5-162.04T718-906q75 0 126.5 67T896-677q0 77.22-36.5 136.11Q823-482 766-457v402h-95Z" />
5
+ </svg>
package/src/assets/icons-material/fullscreen.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M95-95v-238h94v144h144v94H95Zm533 0v-94h143v-144h95v238H628ZM95-628v-238h238v95H189v143H95Zm676 0v-143H628v-95h238v238h-95Z" />
5
+ </svg>
package/src/assets/icons-material/fullscreen.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M95-95v-238h94v144h144v94H95Zm533 0v-94h143v-144h95v238H628ZM95-628v-238h238v95H189v143H95Zm676 0v-143H628v-95h238v238h-95Z" />
5
+ </svg>
package/src/assets/icons-material/home.fill.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path fill="currentColor" d="M135-95v-517.67L480-872l346 259v518H566v-311H394v311H135Z" />
3
+ </svg>
package/src/assets/icons-material/home.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M229-189h124v-258h254v258h124v-377L480-754 229-565.67V-189Zm-94 94v-518l345-259 346 259v518H524v-269h-88v269H135Zm345-377Z" />
5
+ </svg>
package/src/assets/icons-material/ico-exit.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M189-95q-39.05 0-66.53-27.47Q95-149.95 95-189v-582q0-39.46 27.47-67.23Q149.95-866 189-866h296v95H189v582h296v94H189Zm467-174-67-66 97-98H354v-94h330l-97-98 67-66 212 212-210 210Z" />
5
+ </svg>
package/src/assets/icons-material/ico-exit.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M189-95q-39.05 0-66.53-27.47Q95-149.95 95-189v-582q0-39.46 27.47-67.23Q149.95-866 189-866h296v95H189v582h296v94H189Zm467-174-67-66 97-98H354v-94h330l-97-98 67-66 212 212-210 210Z" />
5
+ </svg>
package/src/assets/icons-material/ico-sun.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM217-433H23v-94h194v94Zm720 0H743v-94h194v94ZM433-743v-194h94v194h-94Zm0 720v-194h94v194h-94ZM261-633 138-754l66-69 122 122-65 68Zm496 495L633-261l66-66 123 120-65 69ZM633-699l121-123 69 65-121 124-69-66ZM138-204l122-124 67 67-120 123-69-66Z" />
5
+ </svg>
package/src/assets/icons-material/ico-sun.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M480.12-375Q524-375 555-405.83q31-30.82 31-74.29Q586-524 554.88-555q-31.12-31-75-31-43.88 0-74.38 31.12-30.5 31.12-30.5 75 0 43.88 30.83 74.38 30.82 30.5 74.29 30.5Zm-.12 95q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM217-433H23v-94h194v94Zm720 0H743v-94h194v94ZM433-743v-194h94v194h-94Zm0 720v-194h94v194h-94ZM261-633 138-754l66-69 122 122-65 68Zm496 495L633-261l66-66 123 120-65 69ZM633-699l121-123 69 65-121 124-69-66ZM138-204l122-124 67 67-120 123-69-66Zm342-276Z" />
5
+ </svg>
package/src/assets/icons-material/ico-user.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" />
5
+ </svg>
package/src/assets/icons-material/ico-user.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M226-266q62-42 123-64.5T480.43-353q70.44 0 132.42 23.27Q674.84-306.46 735-266q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm.07 388Q393-55 315.61-88.29q-77.39-33.29-135.69-91.58-58.31-58.28-91.62-135.49Q55-392.57 55-480.35 55-567 88.5-644.5T180-780q58-58 135.26-92 77.25-34 165.09-34 86.65 0 164.15 34T780-780q58 58 92 135.62 34 77.61 34 164.5 0 86.88-34 164.38T780-180q-58 58-135.62 91.5Q566.77-55 479.88-55Zm.12-94q52 0 99.5-14t98.5-51q-52-35-99-51.5T480-282q-52 0-98.5 16.5T283-214q51 37 98 51t99 14Zm0-366q30.87 0 50.93-19.5Q551-554 551-585.5T530.93-637q-20.06-20-50.93-20t-50.93 20Q409-617 409-585.5t20.07 51Q449.13-515 480-515Zm0-71Zm1 371Z" />
5
+ </svg>
package/src/assets/icons-material/layers.fill.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path fill="currentColor" d="M479-63 78-376l78-58 323 252 325-252 78 58L479-63Zm0-195L78-570l401-313 402 313-402 312Z" />
3
+ </svg>
package/src/assets/icons-material/layers.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M479-63 78-376l78-58 323 252 325-252 78 58L479-63Zm0-195L78-570l401-313 402 313-402 312Zm0-333Zm0 213 247-192-247-192-247 192 247 192Z" />
5
+ </svg>
package/src/assets/icons-material/minus.fill.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path fill="currentColor" d="M175-433v-94h611v94H175Z" />
3
+ </svg>
package/src/assets/icons-material/minus.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path fill="currentColor" d="M175-433v-94h611v94H175Z" />
3
+ </svg>
package/src/assets/icons-material/moon.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M615-656 490-781l125-125 125 125-125 125Zm200 131-90-91 90-90 91 90-91 91ZM474-55q-87 0-163-32.5T178-177q-57-57-90-133.5T55-474q0-155 100.5-271.5T408-890q-12 101 14.5 198.5T522-522q71 71 168.5 97.5T889-404q-26 151-143 250T474-55Z" />
5
+ </svg>
package/src/assets/icons-material/moon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M615-656 490-781l125-125 125 125-125 125Zm200 131-90-91 90-90 91 90-91 91ZM473.7-55q-86.86 0-163-32.58-76.14-32.59-132.7-89.31-56.57-56.71-89.79-133.2Q55-386.58 55-474q0-155.23 100.5-271.62Q256-862 408-890q-12 101 14.5 198.63Q449-593.73 522-521.63q71 71.1 168.5 97.14Q788-398.45 889-404.47q-26 151.2-142.77 250.34Q629.45-55 473.7-55Zm.3-94q87 0 159.5-47T755-317q-84-12-162-45.5T455-456q-60-60-93.5-136.5T315-753q-72 49-118.5 121.16T150-474q0 136.25 94.08 230.63Q338.17-149 474-149Zm-19-307Z" />
5
+ </svg>
package/src/assets/icons-material/pin.fill.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path fill="currentColor" d="m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Z" />
3
+ </svg>
package/src/assets/icons-material/pin.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z" />
5
+ </svg>
package/src/assets/icons-material/search-plus.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406Zm-31.85-73v-77H263v-60h77v-77h60v77h77v60.5h-77v76.5h-60.5Z" />
5
+ </svg>
package/src/assets/icons-material/search-plus.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406Zm-31.85-73v-77H263v-60h77v-77h60v77h77v60.5h-77v76.5h-60.5Z" />
5
+ </svg>
package/src/assets/icons-material/th-large.fill.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path fill="currentColor" d="M504-581v-304h381v304H504ZM75-431v-454h381v454H75ZM504-77v-455h381v455H504ZM75-77v-305h381v305H75Z" />
3
+ </svg>
package/src/assets/icons-material/th-large.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M504-581v-304h381v304H504ZM75-431v-454h381v454H75ZM504-77v-455h381v455H504ZM75-77v-305h381v305H75Zm95-448h192v-266H170v266Zm429 353h192v-265H599v265Zm0-503h192v-116H599v116ZM170-172h192v-115H170v115Zm192-353Zm237-150Zm0 238ZM362-287Z" />
5
+ </svg>
package/src/assets/icons-material/troubleshoot.fill.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M832-87 620-300q-42.12 31.47-95.06 49.74Q472-232 417-232q-93.55 0-170.78-46.5Q169-325 125-400h118q33.37 34.22 78.18 54.11Q366-326 417-326q101.5 0 172.75-71.5T661-569.97q0-101.97-70.9-173Q519.19-814 416.98-814q-99.32 0-170.29 68.19T173.09-580H78q3.77-137.19 101.82-233.09Q277.88-909 416.85-909 557-909 656.5-810T756-570q0 54-18.76 107.44Q718.47-409.12 687-366l212 212-67 67ZM384-400l-63-208-52 148H67v-60h160l66-190h60l61 204 43-134h60l60 120h30v60h-67l-47-94-50 154h-59Z" />
5
+ </svg>
package/src/assets/icons-material/troubleshoot.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
2
+ <path
3
+ fill="currentColor"
4
+ d="M832-87 620-300q-42.12 31.47-95.06 49.74Q472-232 417-232q-93.55 0-170.78-46.5Q169-325 125-400h118q33.37 34.22 78.18 54.11Q366-326 417-326q101.5 0 172.75-71.5T661-569.97q0-101.97-70.9-173Q519.19-814 416.98-814q-99.32 0-170.29 68.19T173.09-580H78q3.77-137.19 101.82-233.09Q277.88-909 416.85-909 557-909 656.5-810T756-570q0 54-18.76 107.44Q718.47-409.12 687-366l212 212-67 67ZM384-400l-63-208-52 148H67v-60h160l66-190h60l61 204 43-134h60l60 120h30v60h-67l-47-94-50 154h-59Z" />
5
+ </svg>
package/src/lib/components/CONTEXT.md CHANGED
@@ -38,7 +38,7 @@ tag/
38
38
  | статус, счётчик, метка | `tag`, `live-badge`, `info-item`, `stat-tile`, `delta-view` |
39
39
  | кнопки | `button` (директива), `icon-button`, `split-button`, `toggle-button-group` |
40
40
  | поля ввода | `input`, `textarea`, `input-number`, `counter`, `checkbox`, `toggle-switch`, `date-picker`, `date-range`, `file-input`, `rich-editor` |
41
- | списки выбора | `select`, `multiselect`, `autocomplete`, `filter-control` |
41
+ | списки выбора | `select`, `multiselect`, `autocomplete`, `filter-control`, `dynamic-selector` |
42
42
  | обёртка поля | `field`, `form-control` (основа) |
43
43
  | плавающие панели | `popover`, `tooltip`, `confirm-popover`, `menu`, `toast` |
44
44
  | окна и панели | `dialog`, `aside`, `aside-section`, `bottom-sheet`, `welcome-dialog`, `photo-viewer` |
package/src/lib/components/aside/CONTEXT.md CHANGED
@@ -24,6 +24,7 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
24
24
  | `contentLayout` | `'default' \| 'tabs'` | `'default'` |
25
25
  | `width` | `string \| null` | `null` |
26
26
  | `ariaLabel` | `string \| null` | `null` |
27
+ | `requestError` | `unknown` | `null` |
27
28
 
28
29
  | настройка `open()` | умолчание |
29
30
  | ---------------------------------------- | ----------------------------------------- |
@@ -55,6 +56,14 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
55
56
  **`disableClose`** на `RtAsideRef` держит панель под кликом по подложке и под Escape — ставится
56
57
  самим содержимым, когда в форме есть несохранённое.
57
58
 
59
+ **Ошибку запроса показывает сама панель.** Вход `requestError` ставит между шапкой и содержимым
60
+ блок `rt-aside-error-box` с кнопкой копирования ошибки; `null` и `undefined` его убирают. Своя
61
+ разметка ошибки в содержимом панели не пишется.
62
+
63
+ **На экране до 768 точек панель во всё окно.** Ширину держит `--rt-aside-narrow-width`, по
64
+ умолчанию `100dvw`; размер и `width` там не действуют. Коробка, в которую панель поставлена
65
+ разметкой, задаёт свойству `100%`.
66
+
58
67
  **Форму внутри панели размечает словарь кита, а не правила потребителя.** Блок `rt-form`
59
68
  объявляется ровно один раз на панель и стоит над полосой вкладок; внутри него идут раздел
60
69
  `rt-form__item`, колонка контролов `rt-form__controls` с заголовком `rt-form__title` и
package/src/lib/components/aside/error-box/rt-aside-error-box.component.scss ADDED
@@ -0,0 +1,37 @@
1
+ @layer rt-kit.components {
2
+ /* rt-aside-error-box — строка ошибки запроса под шапкой панели. ViewEncapsulation.None.
3
+ Вид первого кита: тонкая рамка цвета опасности, надпись слева, текстовая кнопка справа. */
4
+
5
+ .rt-aside-error-box {
6
+ --rt-aside-error-box-min-height: 2rem;
7
+ --rt-aside-error-box-border-width: 1px;
8
+ --rt-aside-error-box-radius: var(--rt-radius-md);
9
+
10
+ display: block;
11
+ min-width: 0;
12
+
13
+ &__frame {
14
+ display: flex;
15
+ min-width: 0;
16
+ min-height: var(--rt-aside-error-box-min-height);
17
+ align-items: center;
18
+ justify-content: space-between;
19
+ padding: var(--rt-space-2);
20
+ border: var(--rt-aside-error-box-border-width) solid var(--rt-color-state-danger);
21
+ border-radius: var(--rt-aside-error-box-radius);
22
+ gap: var(--rt-space-2);
23
+ }
24
+
25
+ /* Надпись переносится, а не режется: кнопка держит ширину, текст переводов бывает длиннее. */
26
+ &__title {
27
+ min-width: 0;
28
+ color: var(--rt-color-state-danger);
29
+ font-size: var(--rt-text-md);
30
+ overflow-wrap: anywhere;
31
+ }
32
+
33
+ &__copy {
34
+ flex-shrink: 0;
35
+ }
36
+ }
37
+ }
package/src/lib/components/aside/rt-aside.component.scss CHANGED
@@ -20,6 +20,10 @@
20
20
 
21
21
  /* Ритм между корневыми блоками содержимого. */
22
22
  --rt-aside-content-gap: var(--rt-space-md);
23
+
24
+ /* Ширина на узком экране: во всё окно. Свойство, а не число в правиле, — чтобы коробка,
25
+ в которую панель поставлена разметкой, могла сдержать её своей шириной. */
26
+ --rt-aside-narrow-width: 100dvw;
23
27
  }
24
28
 
25
29
  /* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-aside`
@@ -66,6 +70,14 @@
66
70
  flex-shrink: 0;
67
71
  }
68
72
 
73
+ /* Блок ошибки запроса стоит между шапкой и содержимым и не уезжает с прокруткой. Поля
74
+ по бокам — тот же инсет панели; сверху и снизу его отбивают шапка и зона содержимого. */
75
+ &__error {
76
+ min-width: 0;
77
+ flex-shrink: 0;
78
+ padding-inline: var(--rt-aside-inset);
79
+ }
80
+
69
81
  /* Единственная зона содержимого: она держит инсет панели и она же
70
82
  прокручивается. Отступы живут здесь, а не в потребителях — иначе каждая
71
83
  панель помнит про них сама, и поля получают разную ширину. */
@@ -132,8 +144,8 @@
132
144
  rt-aside .rt-aside--size--sm,
133
145
  rt-aside .rt-aside--size--md,
134
146
  rt-aside .rt-aside--size--lg {
135
- width: 100dvw;
136
- max-width: 100dvw;
147
+ width: var(--rt-aside-narrow-width);
148
+ max-width: var(--rt-aside-narrow-width);
137
149
  }
138
150
  }
139
151
  }
package/src/lib/components/dynamic-selector/CONTEXT.md ADDED
@@ -0,0 +1,44 @@
1
+ # `rt-dynamic-selector` + `rt-dynamic-input`
2
+
3
+ Поле формы со списком выбранных записей и поле, в котором строки набирают вручную.
4
+
5
+ ```html
6
+ <rt-dynamic-selector keyExp="id" displayExp="name" draggable [entities]="people()" [formControl]="team" />
7
+ <rt-dynamic-input editable [formControl]="emails" />
8
+ ```
9
+
10
+ Значение селектора — массив ключей в порядке списка, значение поля строк — массив строк.
11
+
12
+ ## Главное, что нужно знать
13
+
14
+ **Записанное формой — это и список, и значение для сброса.** Сброс возвращает последнюю запись
15
+ формы и гаснет, пока список с ней совпадает в том же порядке. Пустой массив от формы опустошает
16
+ список.
17
+
18
+ **Очистка оставляет строки только для чтения.** У такой строки корзина выключена, и очистка гаснет,
19
+ когда в списке остались только они.
20
+
21
+ **Ключ, которого нет среди записей, остаётся в значении и строки не рисует.** Форма не теряет то,
22
+ чего не показала.
23
+
24
+ **Отметки всплывающего окна уходят только по «Применить».** «Отмена», `Escape` и щелчок мимо
25
+ снимают их, значение остаётся прежним.
26
+
27
+ **Поле строк срезает пробелы по краям и не добавляет пустое и повторное.** Повтор сравнивается
28
+ точно, с учётом регистра.
29
+
30
+ ## Как этим пользоваться
31
+
32
+ - Серверный поиск: `[localSearch]="false"`, запрос приходит выходом `searchChange` через 500 мс
33
+ после последней клавиши; найденное вызывающий кладёт в `entities`.
34
+ - Догрузка: `lazyLoad`, выход `loadMore`; пока идёт загрузка страницы, `fetching` держит запрос.
35
+ - Свои кнопки у строки — `<ng-template rtDynamicSelectorRowControls let-item>`, своё название —
36
+ `<ng-template rtDynamicSelectorRowTitle let-item>`. Корзина и ручка перетаскивания остаются китовыми.
37
+ - Приглашение (`invitation`) встаёт вместо полосы кнопок; его кнопка открывает тот же выбор.
38
+
39
+ ## Рядом
40
+
41
+ - [`rt-multiselect`](../multiselect/CONTEXT.md) — выбор нескольких значений фишками в одной строке,
42
+ без списка, сброса и перетаскивания.
43
+ - [`rt-empty-state`](../empty-state/CONTEXT.md) — на нём нарисованы приглашение и «нечего выбрать».
44
+ - [`[rtPopover]`](../popover/CONTEXT.md) — на нём держится всплывающий выбор.
package/src/lib/components/dynamic-selector/dynamic-input/rt-dynamic-input.component.scss ADDED
@@ -0,0 +1,19 @@
1
+ @layer rt-kit.components {
2
+ /* rt-dynamic-input — поле списка строк. ViewEncapsulation.None.
3
+ Строки и полосу рисует список семьи; здесь — поле набора и приглашение под ним. */
4
+
5
+ .rt-dynamic-input {
6
+ display: flex;
7
+ width: 100%;
8
+ flex-direction: column;
9
+ gap: var(--rt-space-sm);
10
+
11
+ &__field {
12
+ display: block;
13
+ }
14
+
15
+ &__invitation {
16
+ display: block;
17
+ }
18
+ }
19
+ }
package/src/lib/components/dynamic-selector/list/rt-dynamic-selector-list.component.scss ADDED
@@ -0,0 +1,108 @@
1
+ @layer rt-kit.components {
2
+ /* rt-dynamic-selector-list — строки выбранного и полоса действий. ViewEncapsulation.None.
3
+ Вид снят с кадров первого кита: строки — тонированные плашки со скруглением, у ручки
4
+ перетаскивания разделитель справа, корзина строки красная, пока её можно нажать. */
5
+
6
+ .rt-dynamic-selector-list {
7
+ --rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);
8
+ --rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);
9
+ --rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);
10
+ --rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);
11
+ --rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);
12
+
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: var(--rt-space-2xs);
16
+
17
+ &__rows {
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--rt-space-sm);
21
+ }
22
+
23
+ &__row {
24
+ display: flex;
25
+ min-height: var(--rt-control-height-lg);
26
+ box-sizing: border-box;
27
+ align-items: center;
28
+ padding: var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);
29
+ border-radius: var(--rt-dynamic-selector-list-row-radius);
30
+ background: var(--rt-dynamic-selector-list-row-bg);
31
+ color: var(--rt-color-text-primary);
32
+ gap: var(--rt-space-sm);
33
+ }
34
+
35
+ &__handle {
36
+ border-right: var(--rt-dynamic-selector-list-divider-width) solid var(--rt-color-border-default);
37
+ cursor: grab;
38
+ padding-inline-end: var(--rt-space-2xs);
39
+ }
40
+
41
+ // Длинная подпись переносится: обрезка спрятала бы, какая запись выбрана.
42
+ &__title {
43
+ min-width: 0;
44
+ flex: 1 1 auto;
45
+ font-size: var(--rt-text-md);
46
+ overflow-wrap: anywhere;
47
+ }
48
+
49
+ &__field {
50
+ min-width: 0;
51
+ flex: 1 1 auto;
52
+ }
53
+
54
+ &__controls {
55
+ display: flex;
56
+ flex: 0 0 auto;
57
+ align-items: center;
58
+ gap: var(--rt-space-2xs);
59
+ }
60
+
61
+ &__actions {
62
+ display: flex;
63
+ align-items: center;
64
+ gap: var(--rt-space-2xs);
65
+ }
66
+
67
+ &__add {
68
+ display: flex;
69
+ min-width: 0;
70
+ flex: 1 1 auto;
71
+ align-items: center;
72
+ }
73
+
74
+ // Строка в полёте живёт у конца страницы, вне блока: свойства объявлены на ней самой.
75
+ &__row.cdk-drag-preview {
76
+ --rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);
77
+ --rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);
78
+ --rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);
79
+ --rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);
80
+
81
+ box-shadow: var(--rt-dynamic-selector-list-drag-shadow);
82
+ }
83
+
84
+ &__row.cdk-drag-placeholder {
85
+ opacity: 0;
86
+ }
87
+
88
+ &__row.cdk-drag-animating,
89
+ &__rows.cdk-drop-list-dragging &__row:not(.cdk-drag-placeholder) {
90
+ transition: transform var(--rt-dynamic-selector-list-drag-duration) ease-out;
91
+ }
92
+ }
93
+ }
94
+
95
+ /* rt-layer-outside: фон, цвет и поля строки в руке.
96
+
97
+ CDK кладёт строку в руке в конец страницы и в момент перетаскивания подключает свой слой
98
+ `cdk-resets` с `.cdk-drag-preview { background: none; color: inherit; padding: 0 }`. Слой
99
+ появляется на странице позже слоя кита и потому сильнее его: оставленные в слое, три свойства
100
+ ниже проигрывают, и строка едет прозрачной, без полей. Тонировка строки полупрозрачна, поэтому
101
+ под ней лежит поверхность — в покое ту же роль играет поле, в котором стоит список. Скругление и
102
+ тень остаются в слое — их CDK не трогает. */
103
+ .rt-dynamic-selector-list__row.cdk-drag-preview {
104
+ padding: var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);
105
+ background-color: var(--rt-color-bg-surface);
106
+ background-image: linear-gradient(var(--rt-dynamic-selector-list-row-bg), var(--rt-dynamic-selector-list-row-bg));
107
+ color: var(--rt-color-text-primary);
108
+ }