@rt-tools/ui-kit-v2 0.15.0 → 0.17.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 (119) hide show
  1. package/README.md +7 -0
  2. package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +96 -41
  3. package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
  4. package/fesm2022/rt-tools-ui-kit-v2.mjs +6824 -2700
  5. package/fesm2022/rt-tools-ui-kit-v2.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/rt-tools-ui-kit-v2-0.17.0.tgz +0 -0
  8. package/src/assets/icons/chat-error.svg +9 -0
  9. package/src/assets/icons/fork-spoon.svg +9 -0
  10. package/src/assets/icons/fullscreen.svg +9 -0
  11. package/src/assets/icons/home.svg +9 -0
  12. package/src/assets/icons/layers.svg +9 -0
  13. package/src/assets/icons/pin.svg +5 -0
  14. package/src/assets/icons/troubleshoot.svg +9 -0
  15. package/src/assets/icons-material/chart-bar.fill.svg +5 -0
  16. package/src/assets/icons-material/chart-bar.svg +5 -0
  17. package/src/assets/icons-material/chart-line.fill.svg +5 -0
  18. package/src/assets/icons-material/chart-line.svg +5 -0
  19. package/src/assets/icons-material/chat-error.fill.svg +5 -0
  20. package/src/assets/icons-material/chat-error.svg +5 -0
  21. package/src/assets/icons-material/comment.fill.svg +5 -0
  22. package/src/assets/icons-material/comment.svg +5 -0
  23. package/src/assets/icons-material/fork-spoon.fill.svg +5 -0
  24. package/src/assets/icons-material/fork-spoon.svg +5 -0
  25. package/src/assets/icons-material/fullscreen.fill.svg +5 -0
  26. package/src/assets/icons-material/fullscreen.svg +5 -0
  27. package/src/assets/icons-material/home.fill.svg +3 -0
  28. package/src/assets/icons-material/home.svg +5 -0
  29. package/src/assets/icons-material/ico-exit.fill.svg +5 -0
  30. package/src/assets/icons-material/ico-exit.svg +5 -0
  31. package/src/assets/icons-material/ico-sun.fill.svg +5 -0
  32. package/src/assets/icons-material/ico-sun.svg +5 -0
  33. package/src/assets/icons-material/ico-user.fill.svg +5 -0
  34. package/src/assets/icons-material/ico-user.svg +5 -0
  35. package/src/assets/icons-material/layers.fill.svg +3 -0
  36. package/src/assets/icons-material/layers.svg +5 -0
  37. package/src/assets/icons-material/minus.fill.svg +3 -0
  38. package/src/assets/icons-material/minus.svg +3 -0
  39. package/src/assets/icons-material/moon.fill.svg +5 -0
  40. package/src/assets/icons-material/moon.svg +5 -0
  41. package/src/assets/icons-material/pin.fill.svg +3 -0
  42. package/src/assets/icons-material/pin.svg +5 -0
  43. package/src/assets/icons-material/search-plus.fill.svg +5 -0
  44. package/src/assets/icons-material/search-plus.svg +5 -0
  45. package/src/assets/icons-material/th-large.fill.svg +3 -0
  46. package/src/assets/icons-material/th-large.svg +5 -0
  47. package/src/assets/icons-material/troubleshoot.fill.svg +5 -0
  48. package/src/assets/icons-material/troubleshoot.svg +5 -0
  49. package/src/lib/components/CONTEXT.md +1 -1
  50. package/src/lib/components/action-bar/CONTEXT.md +5 -0
  51. package/src/lib/components/action-bar/rt-action-bar.component.scss +30 -16
  52. package/src/lib/components/aside/CONTEXT.md +18 -1
  53. package/src/lib/components/aside/error-box/rt-aside-error-box.component.scss +37 -0
  54. package/src/lib/components/aside/footer/rt-aside-footer.component.scss +7 -8
  55. package/src/lib/components/aside/header/rt-aside-header.component.scss +16 -1
  56. package/src/lib/components/aside/rt-aside.component.scss +31 -3
  57. package/src/lib/components/button/CONTEXT.md +12 -11
  58. package/src/lib/components/button/rt-button.directive.scss +36 -0
  59. package/src/lib/components/data-list/settings/rt-data-list-settings-aside.component.scss +2 -2
  60. package/src/lib/components/data-table/cell/rt-data-table-cell.component.scss +1 -1
  61. package/src/lib/components/data-table/filter-cell/rt-data-table-filter-cell.component.scss +1 -1
  62. package/src/lib/components/data-table/rt-data-table.component.scss +1 -1
  63. package/src/lib/components/dialog/CONTEXT.md +9 -0
  64. package/src/lib/components/dialog/content/rt-dialog-content.component.scss +20 -0
  65. package/src/lib/components/dialog/footer/rt-dialog-footer.component.scss +18 -2
  66. package/src/lib/components/dialog/header/rt-dialog-header.component.scss +21 -3
  67. package/src/lib/components/dialog/rt-dialog.component.scss +9 -3
  68. package/src/lib/components/dynamic-selector/CONTEXT.md +50 -0
  69. package/src/lib/components/dynamic-selector/dynamic-input/rt-dynamic-input.component.scss +19 -0
  70. package/src/lib/components/dynamic-selector/list/rt-dynamic-selector-list.component.scss +108 -0
  71. package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss +170 -0
  72. package/src/lib/components/dynamic-selector/rt-dynamic-selector.component.scss +23 -0
  73. package/src/lib/components/dynamic-selector/stories/component/test-dynamic-selector-matrix.component.scss +8 -0
  74. package/src/lib/components/dynamic-selector/stories/component/test-dynamic-selector.component.scss +7 -0
  75. package/src/lib/components/empty-state/CONTEXT.md +3 -0
  76. package/src/lib/components/empty-state/rt-empty-state.component.scss +9 -0
  77. package/src/lib/components/expansion-panel/CONTEXT.md +45 -0
  78. package/src/lib/components/expansion-panel/rt-expansion-panel.component.scss +134 -0
  79. package/src/lib/components/expansion-panel/stories/component/test-expansion-panel-matrix.component.scss +31 -0
  80. package/src/lib/components/header/CONTEXT.md +2 -2
  81. package/src/lib/components/icon/CONTEXT.md +11 -7
  82. package/src/lib/components/icon/rt-icon.component.scss +47 -0
  83. package/src/lib/components/icon-button/CONTEXT.md +27 -20
  84. package/src/lib/components/icon-button/rt-icon-button.component.scss +51 -25
  85. package/src/lib/components/image-cropper/CONTEXT.md +54 -0
  86. package/src/lib/components/image-cropper/rt-image-cropper.component.scss +220 -0
  87. package/src/lib/components/image-upload/CONTEXT.md +70 -0
  88. package/src/lib/components/image-upload/rt-image-upload.component.scss +89 -0
  89. package/src/lib/components/menu/CONTEXT.md +27 -0
  90. package/src/lib/components/menu/rt-menu-item.component.scss +42 -0
  91. package/src/lib/components/pagination/rt-pagination.component.scss +1 -1
  92. package/src/lib/components/scroll-area/CONTEXT.md +2 -0
  93. package/src/lib/components/scroll-area/rt-scroll-area.component.scss +20 -3
  94. package/src/lib/components/side-menu/CONTEXT.md +43 -0
  95. package/src/lib/components/side-menu/favorites/rt-side-menu-favorites.component.scss +126 -0
  96. package/src/lib/components/side-menu/rt-side-menu.component.scss +303 -0
  97. package/src/lib/components/side-menu/stories/component/test-side-menu-cell.component.scss +27 -0
  98. package/src/lib/components/side-menu/stories/component/test-side-menu.component.scss +39 -0
  99. package/src/lib/components/side-menu/sub-item/rt-side-menu-sub-item.component.scss +203 -0
  100. package/src/lib/components/spinner/CONTEXT.md +15 -8
  101. package/src/lib/components/spinner/rt-spinner.component.scss +108 -9
  102. package/src/lib/components/table/CONTEXT.md +6 -0
  103. package/src/lib/components/table/rt-table.component.scss +4 -2
  104. package/src/lib/components/tag/rt-tag.component.scss +43 -23
  105. package/src/lib/components/toast/CONTEXT.md +8 -0
  106. package/src/lib/components/toast/rt-toast.component.scss +74 -15
  107. package/src/lib/components/toast/rt-toaster.component.scss +5 -1
  108. package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss +35 -37
  109. package/src/lib/components/toggle-switch/CONTEXT.md +11 -3
  110. package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss +53 -14
  111. package/src/lib/components/toolbar/rt-toolbar.component.scss +15 -4
  112. package/src/lib/components/tooltip/CONTEXT.md +7 -4
  113. package/src/rich-editor/lib/components/chat/CONTEXT.md +7 -2
  114. package/src/rich-editor/lib/components/chat/rt-chat.component.scss +25 -0
  115. package/src/styles/_color-scheme.scss +50 -0
  116. package/styles/tokens.css +35 -0
  117. package/types/rt-tools-ui-kit-v2-rich-editor.d.ts +16 -20
  118. package/types/rt-tools-ui-kit-v2.d.ts +1588 -58
  119. package/rt-tools-ui-kit-v2-0.15.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.15.0",
3
+ "version": "0.17.0",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Yauheni Krumin",
6
6
  "type": "module",
package/rt-tools-ui-kit-v2-0.17.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/action-bar/CONTEXT.md CHANGED
@@ -38,6 +38,11 @@
38
38
  всегда, и признак значка стоит модификатором — условие в шаблоне было бы оформлением, уехавшим
39
39
  в код.
40
40
 
41
+ - **Меню действия со списком живёт в оверлее, вне полосы.** Свойства полосы до него не доходят,
42
+ поэтому `--rt-action-bar-menu-*` читаются с запасным значением и задаются на корне страницы. Без
43
+ них меню скруглено ступенью `md` и отбрасывает тень карточки.
44
+ - **Цвета, отступы и шрифт полосы — свойства блока** `--rt-action-bar-*` со значениями прежнего вида.
45
+
41
46
  ## Края
42
47
 
43
48
  - Ноль выбранного показан числом: счётчик, прячущийся на нуле, дёргал бы ширину полосы ровно в
package/src/lib/components/action-bar/rt-action-bar.component.scss CHANGED
@@ -7,12 +7,19 @@
7
7
  .rt-action-bar {
8
8
  --rt-action-bar-radius: var(--rt-radius-lg);
9
9
  --rt-action-bar-shadow: var(--rt-shadow-card);
10
+ --rt-action-bar-bg: var(--rt-color-bg-inverse);
11
+ --rt-action-bar-color: var(--rt-color-text-inverse);
12
+ --rt-action-bar-padding: var(--rt-space-2) var(--rt-space-4);
13
+ --rt-action-bar-gap: var(--rt-space-4);
14
+ --rt-action-bar-font-size: var(--rt-text-sm);
15
+ --rt-action-bar-counter-weight: var(--rt-font-weight-medium);
10
16
  --rt-action-bar-action-radius: var(--rt-radius-md);
11
- --rt-action-bar-action-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 16%, transparent);
17
+ --rt-action-bar-action-padding-block: var(--rt-space-1);
18
+ --rt-action-bar-action-padding-inline: var(--rt-space-2);
19
+ --rt-action-bar-action-weight: var(--rt-font-weight-medium);
20
+ --rt-action-bar-action-bg-hover: color-mix(in srgb, var(--rt-action-bar-color) 16%, transparent);
12
21
  --rt-action-bar-action-color-danger: var(--rt-color-action-danger-on-surface);
13
22
  --rt-action-bar-action-focus-shadow: var(--rt-shadow-focus-ring);
14
- --rt-action-bar-menu-radius: var(--rt-radius-md);
15
- --rt-action-bar-menu-shadow: var(--rt-shadow-card);
16
23
 
17
24
  // Предел ширины стоит и на самом элементе. Содержащий блок полосы — этот элемент, и
18
25
  // без предела он растёт по содержимому: сто процентов считались бы тогда от выросшего,
@@ -22,16 +29,16 @@
22
29
  max-width: 100%;
23
30
  box-sizing: border-box;
24
31
  align-items: center;
25
- padding: var(--rt-space-2) var(--rt-space-4);
32
+ padding: var(--rt-action-bar-padding);
26
33
  border-radius: var(--rt-action-bar-radius);
27
- background: var(--rt-color-bg-inverse);
34
+ background: var(--rt-action-bar-bg);
28
35
  box-shadow: var(--rt-action-bar-shadow);
29
- color: var(--rt-color-text-inverse);
30
- font-size: var(--rt-text-sm);
31
- gap: var(--rt-space-4);
36
+ color: var(--rt-action-bar-color);
37
+ font-size: var(--rt-action-bar-font-size);
38
+ gap: var(--rt-action-bar-gap);
32
39
 
33
40
  &__counter {
34
- font-weight: var(--rt-font-weight-medium);
41
+ font-weight: var(--rt-action-bar-counter-weight);
35
42
  white-space: nowrap;
36
43
  }
37
44
 
@@ -47,7 +54,7 @@
47
54
  &__action {
48
55
  display: flex;
49
56
  align-items: center;
50
- padding: var(--rt-space-1) var(--rt-space-2);
57
+ padding: var(--rt-action-bar-action-padding-block) var(--rt-action-bar-action-padding-inline);
51
58
  border: 0;
52
59
  border-radius: var(--rt-action-bar-action-radius);
53
60
  background: transparent;
@@ -58,7 +65,7 @@
58
65
 
59
66
  // Нажатие в этом ките набрано средним начертанием — так набрана кнопка кита, и
60
67
  // действие полосы такое же нажатие. Первый кит ставил здесь шестьсот.
61
- font-weight: var(--rt-font-weight-medium);
68
+ font-weight: var(--rt-action-bar-action-weight);
62
69
  gap: var(--rt-space-2);
63
70
 
64
71
  &:hover {
@@ -94,21 +101,28 @@
94
101
  // белому, и крестика не было видно ни в одном кадре. Своё свойство блока перебивают —
95
102
  // так делает просмотр фотографии, где кнопка стоит на снимке.
96
103
  &__close {
97
- --rt-icon-button-color: var(--rt-color-text-inverse);
104
+ --rt-icon-button-color: var(--rt-action-bar-color);
98
105
  --rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover);
99
106
 
100
107
  flex: none;
101
108
  margin-left: auto;
102
109
  }
103
110
 
111
+ // Меню рисуется в оверлее, вне полосы: объявление на полосе до него не доходит, и раньше
112
+ // меню выходило без скругления и тени. Свои свойства меню читает с запасным значением —
113
+ // объявленное на самом меню перебило бы правило приложения на корне страницы, а только
114
+ // оттуда свойство до оверлея и доходит.
104
115
  &__menu {
116
+ --rt-action-bar-menu-radius-default: var(--rt-radius-md);
117
+ --rt-action-bar-menu-shadow-default: var(--rt-shadow-card);
118
+
105
119
  display: flex;
106
120
  flex-direction: column;
107
121
  padding: var(--rt-space-2);
108
- border-radius: var(--rt-action-bar-menu-radius);
109
- background: var(--rt-color-bg-surface);
110
- box-shadow: var(--rt-action-bar-menu-shadow);
111
- color: var(--rt-color-text-primary);
122
+ border-radius: var(--rt-action-bar-menu-radius, var(--rt-action-bar-menu-radius-default));
123
+ background: var(--rt-action-bar-menu-bg, var(--rt-color-bg-surface));
124
+ box-shadow: var(--rt-action-bar-menu-shadow, var(--rt-action-bar-menu-shadow-default));
125
+ color: var(--rt-action-bar-menu-color, var(--rt-color-text-primary));
112
126
  }
113
127
 
114
128
  // Полоса живёт на нижней кромке, и пальцу нужно место, которое занимают подписи. Решает
package/src/lib/components/aside/CONTEXT.md CHANGED
@@ -24,6 +24,9 @@ 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` |
28
+ | `trapFocus` | `boolean` | `false` |
29
+ | `pending` | `boolean` | `false` |
27
30
 
28
31
  | настройка `open()` | умолчание |
29
32
  | ---------------------------------------- | ----------------------------------------- |
@@ -31,6 +34,7 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
31
34
  | `position` | `'right'` |
32
35
  | `closeOnBackdropClick` / `closeOnEscape` | `true`; второе — из настроек кита |
33
36
  | `backdropClass` / `panelClass` | `rt-aside-backdrop` / `rt-aside-overlay` |
37
+ | `injector` | корневой — уничтожение хозяина закрывает |
34
38
 
35
39
  ## Главное, что нужно знать
36
40
 
@@ -53,7 +57,20 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
53
57
  переопределяет своими правилами. Стережёт это `rt-aside-overlay.styles.spec.ts`.
54
58
 
55
59
  **`disableClose`** на `RtAsideRef` держит панель под кликом по подложке и под Escape — ставится
56
- самим содержимым, когда в форме есть несохранённое.
60
+ самим содержимым, когда в форме есть несохранённое. Отказанный жест — под `disableClose` или
61
+ выключенный настройкой — приходит в `closeRequests()`: `'escape'` или `'backdrop'`.
62
+
63
+ **Снятый без `close()` слой завершает `afterClosed()` значением `undefined`.** Переход по адресу
64
+ (`disposeOnNavigation`) и уничтожение хозяина больше не оставляют подписчика ждать. То же у
65
+ `RtDialogRef`.
66
+
67
+ **Ошибку запроса показывает сама панель.** Вход `requestError` ставит между шапкой и содержимым
68
+ блок `rt-aside-error-box` с кнопкой копирования ошибки; `null` и `undefined` его убирают. Своя
69
+ разметка ошибки в содержимом панели не пишется.
70
+
71
+ **На экране до 768 точек панель во всё окно.** Ширину держит `--rt-aside-narrow-width`, по
72
+ умолчанию `100dvw`; размер и `width` там не действуют. Коробка, в которую панель поставлена
73
+ разметкой, задаёт свойству `100%`.
57
74
 
58
75
  **Форму внутри панели размечает словарь кита, а не правила потребителя.** Блок `rt-form`
59
76
  объявляется ровно один раз на панель и стоит над полосой вкладок; внутри него идут раздел
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/footer/rt-aside-footer.component.scss CHANGED
@@ -4,19 +4,18 @@
4
4
  .rt-aside-footer {
5
5
  --rt-aside-footer-border-width: var(--rt-border-width-thin);
6
6
 
7
- padding-top: var(--rt-aside-inset);
8
-
9
- /* Верхний разделитель не на всю ширину панели: margin отбивает футер по
10
- горизонтали на тот же инсет, что и контентная зона, поэтому
11
- border-block-start совпадает по краям с контентом. */
12
- margin: var(--rt-aside-inset);
7
+ /* Отступ и поля футера — ручки приложения; без них отступ только сверху, а поля — инсет
8
+ панели. Верхний разделитель не на всю ширину: поля отбивают футер по горизонтали на тот
9
+ же инсет, что и контентная зона, и border-block-start совпадает по краям с контентом. */
10
+ padding: var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);
11
+ margin: var(--rt-aside-footer-margin, var(--rt-aside-inset));
13
12
  border-block-start: var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle);
14
13
 
15
14
  &__content {
16
15
  display: flex;
17
16
  flex-wrap: wrap;
18
- justify-content: space-between;
19
- gap: var(--rt-space-sm);
17
+ justify-content: var(--rt-aside-footer-justify, space-between);
18
+ gap: var(--rt-aside-footer-gap, var(--rt-space-sm));
20
19
  }
21
20
 
22
21
  &:empty {
package/src/lib/components/aside/header/rt-aside-header.component.scss CHANGED
@@ -9,7 +9,8 @@
9
9
  --rt-aside-header-gap: var(--rt-space-sm);
10
10
  --rt-aside-header-min-height: auto;
11
11
 
12
- padding: var(--rt-aside-inset);
12
+ /* Отступ шапки — ручка приложения; без неё общий инсет панели. */
13
+ padding: var(--rt-aside-header-inset, var(--rt-aside-inset));
13
14
 
14
15
  &__content {
15
16
  display: flex;
@@ -51,6 +52,9 @@
51
52
  font-size: var(--rt-aside-header-title-size);
52
53
  font-weight: var(--rt-aside-header-title-weight);
53
54
 
55
+ /* Высота строки — ручка приложения; без неё наследуется, как было. */
56
+ line-height: var(--rt-aside-header-title-leading, inherit);
57
+
54
58
  /* Ellipsis для длинного заголовка: skeleton-wrapper рендерит `{{ title }}`
55
59
  как ng-content внутри inline-flex; чтобы `text-overflow: ellipsis`
56
60
  cработал, нужен block-level контейнер с overflow: hidden над текстом. */
@@ -90,6 +94,17 @@
90
94
  }
91
95
  }
92
96
 
97
+ /* Строка под заголовком на всю ширину шапки — слот `[asideHeaderContent]`. Пустая места
98
+ не занимает. */
99
+ &__row {
100
+ min-width: 0;
101
+ margin-top: var(--rt-aside-header-gap);
102
+
103
+ &:empty {
104
+ display: none;
105
+ }
106
+ }
107
+
93
108
  /* Ряд action-иконок справа от title (отклонить / на доработку / снять с
94
109
  публикации и т.п.). Пустой при отсутствии проекции — нулевой ширины. */
95
110
  &__actions {