@rt-tools/ui-kit 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/ui-kit/action-bar/components/bar/rtui-action-bar.component.scss

@@ -2,15 +2,15 @@
 @use '../../../../../styles/base/variables' as vars;
 
 .rtui-action-bar {
-    width: var(--rt-action-bar-bar-width);
     display: flex;
+    width: var(--rt-action-bar-bar-width);
     align-items: center;
-    gap: var(--rt-action-bar-bar-gap);
     padding: var(--rt-action-bar-bar-padding);
     border-radius: var(--rt-action-bar-bar-border-radius);
-    color: var(--rt-action-bar-bar-color);
     background-color: var(--rt-action-bar-bar-background-color);
     box-shadow: var(--rt-action-bar-bar-box-shadow);
+    color: var(--rt-action-bar-bar-color);
+    gap: var(--rt-action-bar-bar-gap);
 
     &__counter {
         font-size: var(--rt-action-bar-counter-font-size);
@@ -24,14 +24,14 @@
 
     &__action {
         display: flex;
-        justify-content: center;
         align-items: center;
-        gap: var(--rt-action-bar-action-gap);
-        font-size: var(--rt-action-bar-action-font-size);
-        font-weight: var(--rt-action-bar-action-font-weight);
+        justify-content: center;
         padding: var(--rt-action-bar-action-padding);
         border-radius: var(--rt-action-bar-action-border-radius);
         cursor: pointer;
+        font-size: var(--rt-action-bar-action-font-size);
+        font-weight: var(--rt-action-bar-action-font-weight);
+        gap: var(--rt-action-bar-action-gap);
 
         &:hover {
             background-color: var(--rt-action-bar-action-hover-background-color);
@@ -39,8 +39,8 @@
     }
 
     &__close-button {
-        cursor: pointer;
         margin-left: auto;
+        cursor: pointer;
 
         svg {
             transition: transform 0.2s ease;
@@ -52,16 +52,16 @@
     }
 
     @include mixins.media-breakpoint-down(vars.$device-md) {
-        gap: var(--rt-action-bar-bar-mobile-gap);
         padding: var(--rt-action-bar-bar-mobile-padding);
+        gap: var(--rt-action-bar-bar-mobile-gap);
 
         &__actions {
             gap: var(--rt-action-bar-actions-mobile-gap);
         }
 
         &__action {
-            gap: var(--rt-action-bar-action-mobile-gap);
             padding: var(--rt-action-bar-action-mobile-padding);
+            gap: var(--rt-action-bar-action-mobile-gap);
         }
     }
 }
@@ -69,23 +69,23 @@
 .rtui-action-bar-action-menu {
     display: flex;
     flex-direction: column;
-    gap: var(--rt-action-bar-action-menu-gap);
     padding: var(--rt-action-bar-action-menu-padding);
     border-radius: var(--rt-action-bar-action-border-radius);
-    color: var(--rt-action-bar-action-menu-color);
     background-color: var(--rt-action-bar-action-menu-background-color);
     box-shadow: var(--rt-action-bar-action-menu-box-shadow);
+    color: var(--rt-action-bar-action-menu-color);
+    gap: var(--rt-action-bar-action-menu-gap);
 
     &__action {
         display: flex;
-        justify-content: center;
         align-items: center;
-        gap: var(--rt-action-bar-action-menu-action-gap);
+        justify-content: center;
         padding: var(--rt-action-bar-action-menu-action-padding);
-        font-size: var(--rt-action-bar-action-menu-action-font-size);
-        font-weight: var(--rt-action-bar-action-menu-action-font-weight);
         border-radius: var(--rt-action-bar-action-menu-action-border-radius);
         cursor: pointer;
+        font-size: var(--rt-action-bar-action-menu-action-font-size);
+        font-weight: var(--rt-action-bar-action-menu-action-font-weight);
+        gap: var(--rt-action-bar-action-menu-action-gap);
 
         &:hover {
             background-color: var(--rt-action-bar-action-menu-action-hover-background-color);
@@ -93,12 +93,12 @@
     }
 
     @include mixins.media-breakpoint-down(vars.$device-md) {
-        gap: var(--rt-action-bar-action-menu-action-mobile-gap);
         padding: var(--rt-action-bar-action-menu-action-mobile-padding);
+        gap: var(--rt-action-bar-action-menu-action-mobile-gap);
 
         &__action {
-            gap: var(--rt-action-bar-action-menu-action-mobile-gap);
             padding: var(--rt-action-bar-action-menu-action-mobile-padding);
+            gap: var(--rt-action-bar-action-menu-action-mobile-gap);
         }
     }
 }

package/src/lib/ui-kit/action-bar/components/container/rtui-action-bar-container.component.scss

@@ -1,12 +1,10 @@
 :host {
-    width: var(--rt-action-bar-container-width);
     position: fixed;
-    top: var(--rt-action-bar-container-top);
-    bottom: var(--rt-action-bar-container-bottom);
-    left: var(--rt-action-bar-container-left);
-    right: var(--rt-action-bar-container-right);
+    z-index: var(--rt-action-bar-container-z-index);
     display: flex;
-    justify-content: center;
+    width: var(--rt-action-bar-container-width);
     align-items: center;
-    z-index: var(--rt-action-bar-container-z-index);
+    justify-content: center;
+    inset: var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom)
+        var(--rt-action-bar-container-left);
 }

package/src/lib/ui-kit/aside/components/container/aside-container.component.scss

@@ -3,6 +3,7 @@
         --rt-scrollable-header-padding: 0;
         --rt-scrollable-content-padding: 0;
         --rt-scrollable-footer-padding: 0;
+
         // TODO: fix styles affect x-scroll
         --rt-scrollable-content-flex-direction: row;
 

package/src/lib/ui-kit/aside/components/error-notification/aside-error-box.component.scss

@@ -4,28 +4,28 @@
 
     .aside-error-box {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
         width: 100%;
         height: var(--rt-aside-error-box-height);
+        align-items: center;
+        justify-content: space-between;
         padding: var(--rt-aside-error-box-padding);
-        margin: var(--rt-aside-error-box-margin);
         border: var(--rt-aside-error-box-border);
         border-radius: var(--rt-aside-error-box-border-radius);
+        margin: var(--rt-aside-error-box-margin);
 
         &__title {
-            font-size: var(--rt-aside-error-box-title-font-size);
             color: var(--rt-aside-error-box-title-font-color);
+            font-size: var(--rt-aside-error-box-title-font-size);
         }
 
         .aside-error-box-button {
             &__icon {
-                margin-right: 0.5rem;
+                margin-right: var(--rt-spacing-8);
             }
 
             &__title {
-                font-size: var(--rt-aside-error-box-button-font-size);
                 color: var(--rt-aside-error-box-button-font-color);
+                font-size: var(--rt-aside-error-box-button-font-size);
             }
 
             &.--complete {

package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss

@@ -4,7 +4,7 @@
 $aside: (
     host: (
         width: 33.75rem,
-        box-shadow: 0 0 1rem 0 rgba(#000, 0.1),
+        box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10),
         background-color: var(--rt-bg-base-base),
     ),
     header: (
@@ -45,7 +45,7 @@ $aside: (
     ),
     footer: (
         padding: 2rem,
-        margin-left-betwen-buttons: 1rem,
+        margin-left-between-buttons: 1rem,
     ),
     footer-mobile: (
         padding: 1rem,
@@ -76,22 +76,19 @@ $aside: (
     ),
 );
 
+// NOTE: emitted at :root on purpose (ViewEncapsulation.None): consumers override
+// these vars from ancestor scopes (e.g. a consumer's `.dark-mode { --rt-aside-host-background-color: … }`).
+// Emitting at :host would set values on the element itself and silently win over
+// inherited overrides — do not "fix" this to :host.
 :root {
     @each $element, $elements in $aside {
         @each $style-token, $value in $elements {
             #{mixins.generateCssVar('aside', #{$element}, #{$style-token})}: #{$value};
         }
     }
-}
 
-.cdk-overlay-container,
-.cdk-overlay-pane {
-    z-index: 9999;
-}
-
-// TAB GROUP
-.mat-mdc-tab-group {
-    width: 100%;
+    // @deprecated — typo kept as alias for backward compatibility; use *-between-* instead.
+    --rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons);
 }
 
 // BADGE
@@ -100,8 +97,8 @@ $aside: (
 }
 
 .title-badge {
-    margin-left: 0.25rem;
     top: -0.5rem;
+    margin-left: var(--rt-spacing-4);
 }
 
 .icon-badge,
@@ -121,12 +118,11 @@ $aside: (
 // ASIDE
 .c-aside {
     position: relative;
+    width: var(--rt-aside-host-width);
     height: 100vh;
     max-height: 100vh;
-    width: var(--rt-aside-host-width);
-
-    box-shadow: var(--rt-aside-host-box-shadow);
     background-color: var(--rt-aside-host-background-color);
+    box-shadow: var(--rt-aside-host-box-shadow);
 
     // TAB GROUP
     .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
@@ -147,38 +143,38 @@ $aside: (
     }
 
     .c-aside-title {
-        height: 100%;
-        width: 100%;
         display: flex;
+        width: 100%;
+        height: 100%;
         flex-direction: column;
-        justify-content: center;
         align-items: flex-start;
+        justify-content: center;
 
         &__descr {
             margin-bottom: var(--rt-aside-header-description-margin-bottom);
-            font-size: var(--rt-aside-header-description-font-size);
             color: var(--rt-aside-header-description-color);
+            font-size: var(--rt-aside-header-description-font-size);
         }
 
         &__txt {
             font-size: var(--rt-aside-header-title-font-size);
-            line-height: var(--rt-aside-header-title-line-height);
             font-weight: var(--rt-aside-header-title-font-weight);
+            line-height: var(--rt-aside-header-title-line-height);
         }
 
         &__addition {
             margin-top: var(--rt-aside-header-addition-margin-top);
-            font-size: var(--rt-aside-header-addition-font-size);
             color: var(--rt-aside-header-addition-color);
+            font-size: var(--rt-aside-header-addition-font-size);
         }
 
         &__descr,
         &__txt,
         &__addition {
-            width: 100%;
-            white-space: nowrap;
             overflow: hidden;
+            width: 100%;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 
@@ -196,21 +192,19 @@ $aside: (
 } // c-aside-header
 
 .c-aside-content {
-    height: 100%;
-    width: 100%;
-
     display: flex;
+    width: 100%;
+    height: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-
     padding: var(--rt-aside-content-padding);
 
     // Change mat tab group styles
     .mat-mdc-tab-header {
-        top: 0;
-        z-index: 1000;
         position: sticky;
+        z-index: 1000;
+        top: 0;
         background: var(--rt-bg-base-base);
     }
 
@@ -222,9 +216,8 @@ $aside: (
 // ASIDE FOOTER
 .c-aside-footer {
     display: flex;
-    justify-content: flex-end;
     align-items: center;
-
+    justify-content: flex-end;
     padding: var(--rt-aside-footer-padding);
 
     .c-aside-footer-btn {
@@ -234,7 +227,7 @@ $aside: (
     }
 
     .c-aside-footer-btn + .c-aside-footer-btn {
-        margin-left: var(--rt-aside-footer-margin-left-betwen-buttons);
+        margin-left: var(--rt-aside-footer-margin-left-between-buttons);
     }
 
     @include mixins.media-breakpoint-down(vars.$device-xs) {

package/src/lib/ui-kit/aside/stories/aside-component/test-aside.component.scss

@@ -1,4 +1,4 @@
 :host {
-    height: 100%;
     width: 100%;
+    height: 100%;
 }

package/src/lib/ui-kit/buttons/icon-round/rtui-round-icon-button.component.scss

@@ -20,14 +20,14 @@ $round-icon-button: (
     }
 
     .round-icon-button {
+        z-index: var(--rt-round-icon-button-host-z-index);
         display: flex;
-        justify-content: center;
-        align-items: center;
         width: var(--rt-round-icon-button-host-size);
         height: var(--rt-round-icon-button-host-size);
+        align-items: center;
+        justify-content: center;
         padding: var(--rt-round-icon-button-host-padding);
-        z-index: var(--rt-round-icon-button-host-z-index);
-        border-radius: 50%;
+        border-radius: var(--rt-radius-full);
         cursor: pointer;
 
         &__icon {

package/src/lib/ui-kit/buttons/multi-button/rtui-multi-button.component.scss

@@ -48,24 +48,24 @@ $rtui-multibutton: (
     .rtui-multibutton-actions {
         display: var(--rt-rtui-multibutton-base-display);
         flex-flow: var(--rt-rtui-multibutton-base-flex-flow);
-        border-radius: var(--rt-rtui-multibutton-base-radius);
         padding: var(--rt-rtui-multibutton-base-padding);
+        border-radius: var(--rt-rtui-multibutton-base-radius);
         background-color: var(--rt-rtui-multibutton-base-background-color);
 
         &__action {
             padding: var(--rt-rtui-multibutton-action-base-padding);
-            border-radius: var(--rt-rtui-multibutton-action-base-radius);
             border: var(--rt-rtui-multibutton-action-base-border);
+            border-radius: var(--rt-rtui-multibutton-action-base-radius);
+            background-color: var(--rt-rtui-multibutton-action-base-background-color);
+            color: var(--rt-rtui-multibutton-action-base-color);
+            cursor: var(--rt-rtui-multibutton-action-base-cursor);
             font-size: var(--rt-rtui-multibutton-action-base-font-size);
             font-weight: var(--rt-rtui-multibutton-action-base-font-weight);
-            color: var(--rt-rtui-multibutton-action-base-color);
-            background-color: var(--rt-rtui-multibutton-action-base-background-color);
             transition: var(--rt-rtui-multibutton-action-base-transition);
-            cursor: var(--rt-rtui-multibutton-action-base-cursor);
 
             &--active {
-                color: var(--rt-rtui-multibutton-action-active-color);
                 background-color: var(--rt-rtui-multibutton-action-active-background-color);
+                color: var(--rt-rtui-multibutton-action-active-color);
                 cursor: var(--rt-rtui-multibutton-action-active-cursor);
             }
 
@@ -83,9 +83,9 @@ $rtui-multibutton: (
             }
 
             &:disabled {
-                pointer-events: var(--rt-rtui-multibutton-action-disabled-pointer-events);
                 cursor: var(--rt-rtui-multibutton-action-disabled-cursor);
                 opacity: var(--rt-rtui-multibutton-action-disabled-opacity);
+                pointer-events: var(--rt-rtui-multibutton-action-disabled-pointer-events);
             }
         }
     }

package/src/lib/ui-kit/checkbox/rtui-checkbox.component.scss

@@ -5,22 +5,22 @@
     gap: var(--rt-checkbox-container-gap);
 
     &__input {
-        @include mixins.visually-hidden();
+        @include mixins.visually-hidden;
     }
 
     &__box {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
         width: var(--rt-checkbox-box-width);
         height: var(--rt-checkbox-box-height);
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
         border: var(--rt-checkbox-box-border);
         border-radius: var(--rt-checkbox-box-border-radius);
-        color: var(--rt-checkbox-box-inactive-color);
         background-color: var(--rt-checkbox-box-background-color);
-        transition: border-color 0.15s linear;
+        color: var(--rt-checkbox-box-inactive-color);
         cursor: pointer;
+        transition: border-color 0.15s linear;
 
         svg {
             opacity: 0;
@@ -30,8 +30,8 @@
 
     &__input:checked + &__box,
     &__input:indeterminate + &__box {
-        color: var(--rt-checkbox-box-active-color);
         border-color: var(--rt-checkbox-box-active-color);
+        color: var(--rt-checkbox-box-active-color);
 
         svg {
             opacity: 1;
@@ -39,8 +39,8 @@
     }
 
     &__input:disabled + &__box {
-        color: var(--rt-text-base-disabled);
         border-color: var(--rt-border-neutral-strong);
+        color: var(--rt-text-base-disabled);
         cursor: default;
     }
 
@@ -54,15 +54,15 @@
     }
 
     &__label {
+        color: var(--rt-checkbox-label-color);
         font-size: var(--rt-checkbox-label-font-size);
         font-weight: var(--rt-checkbox-label-font-weight);
-        color: var(--rt-checkbox-label-color);
     }
 
     &__description {
         margin-top: var(--rt-checkbox-description-margin-top);
+        color: var(--rt-checkbox-description-color);
         font-size: var(--rt-checkbox-description-font-size);
         font-weight: var(--rt-checkbox-description-font-weight);
-        color: var(--rt-checkbox-description-color);
     }
 }

package/src/lib/ui-kit/checkbox/stories/component/test-checkbox.component.scss

@@ -1,9 +1,9 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     margin: -1rem;
 }

package/src/lib/ui-kit/dynamic-selectors/components/actions/rtui-dynamic-selector-list-actions.component.scss

@@ -29,14 +29,14 @@ $dynamic-selector-list-actions: (
 
     display: flex;
     align-items: center;
-    margin-left: auto;
     padding-right: var(--rt-dynamic-selector-list-actions-host-padding-right);
+    margin-left: auto;
 
     .rtui-dynamic-selector-list-actions {
         display: flex;
         align-items: center;
-        margin-left: auto;
         padding-right: var(--rt-dynamic-selector-list-actions-padding-right);
+        margin-left: auto;
 
         &__control {
             padding: var(--rt-dynamic-selector-list-actions-control-padding);

package/src/lib/ui-kit/dynamic-selectors/components/dynamic-selector/rtui-dynamic-selector.component.scss

@@ -1,7 +1,7 @@
 :host {
-    height: 100%;
-    width: 100%;
     display: flex;
-    flex-direction: column;
     overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
 }

package/src/lib/ui-kit/dynamic-selectors/components/multi-selector-popup/rtui-multi-selector-popup.component.scss

@@ -73,13 +73,13 @@ $multi-selector: (
     }
 
     display: flex;
-    flex-direction: column;
     width: var(--rt-multi-selector-host-width);
     height: var(--rt-multi-selector-host-height);
+    flex-direction: column;
     padding: var(--rt-multi-selector-host-padding);
-    box-shadow: var(--rt-multi-selector-host-box-shadow);
     border-radius: var(--rt-multi-selector-host-border-radius);
     background-color: var(--rt-multi-selector-host-background-color);
+    box-shadow: var(--rt-multi-selector-host-box-shadow);
 
     &::ng-deep {
         // radiobutton
@@ -141,8 +141,8 @@ $multi-selector: (
 
                 &-info {
                     margin-left: var(--rt-multi-selector-header-controls-item-info-margin-left);
-                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
                     color: var(--rt-multi-selector-header-controls-item-info-color);
+                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
                 }
             }
         }
@@ -150,19 +150,19 @@ $multi-selector: (
 
     .rtui-multi-selector-options {
         display: flex;
-        flex-direction: column;
-        flex: 1 1 100%;
-        height: 100%;
         width: 100%;
+        height: 100%;
+        flex: 1 1 100%;
+        flex-direction: column;
         overflow-y: auto;
 
         &__item {
             &-title {
+                overflow: hidden;
                 width: 100%;
                 max-width: var(--rt-multi-selector-options-item-title-max-width);
-                white-space: nowrap;
-                overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             &--separated {
@@ -172,38 +172,38 @@ $multi-selector: (
 
         &__loader {
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
         }
     }
 
     .rtui-multi-selector-placeholder {
         display: flex;
+        flex: 1 1 100%;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
-        flex: 1 1 100%;
-        gap: var(--rt-multi-selector-placeholder-gap);
+        justify-content: center;
         padding-right: var(--rt-multi-selector-placeholder-padding-right);
+        gap: var(--rt-multi-selector-placeholder-gap);
         overflow-y: auto;
 
         &__icon {
             width: var(--rt-multi-selector-placeholder-icon-size);
             height: var(--rt-multi-selector-placeholder-icon-size);
-            font-size: var(--rt-multi-selector-placeholder-icon-size);
             color: var(--rt-multi-selector-placeholder-icon-color);
+            font-size: var(--rt-multi-selector-placeholder-icon-size);
         }
 
         &__title {
-            font-size: var(--rt-multi-selector-placeholder-title-font-size);
             color: var(--rt-multi-selector-placeholder-title-color);
+            font-size: var(--rt-multi-selector-placeholder-title-font-size);
         }
     }
 
     .rtui-multi-selector-footer {
         display: flex;
-        justify-content: flex-end;
         align-items: center;
+        justify-content: flex-end;
         padding: var(--rt-multi-selector-footer-padding);
         gap: var(--rt-multi-selector-footer-gap);
 
@@ -212,9 +212,9 @@ $multi-selector: (
         }
 
         &__nav-action {
-            text-decoration: none;
-            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
             color: var(--rt-multi-selector-footer-nav-action-color);
+            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
+            text-decoration: none;
 
             &:hover {
                 color: var(--rt-multi-selector-footer-nav-action-hover-color);

package/src/lib/ui-kit/dynamic-selectors/components/placeholder/rtui-dynamic-selector-placeholder.component.scss

@@ -28,11 +28,10 @@ $dynamic-selector-placeholder: (
         }
     }
 
+    display: flex;
     width: var(--rt-dynamic-selector-placeholder-host-width);
     height: var(--rt-dynamic-selector-placeholder-host-height);
     min-height: var(--rt-dynamic-selector-placeholder-host-min-height);
-
-    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -42,8 +41,8 @@ $dynamic-selector-placeholder: (
         &__icon {
             width: var(--rt-dynamic-selector-placeholder-icon-size);
             height: var(--rt-dynamic-selector-placeholder-icon-size);
-            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
             color: var(--rt-dynamic-selector-placeholder-icon-color);
+            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
 
             &--warn {
                 color: var(--rt-dynamic-selector-placeholder-icon-warn-color);
@@ -51,9 +50,9 @@ $dynamic-selector-placeholder: (
         }
 
         &__description {
+            color: var(--rt-dynamic-selector-placeholder-description-color);
             font-size: var(--rt-dynamic-selector-placeholder-description-font-size);
             line-height: var(--rt-dynamic-selector-placeholder-description-line-height);
-            color: var(--rt-dynamic-selector-placeholder-description-color);
         }
     }
 }

package/src/lib/ui-kit/dynamic-selectors/components/selected-list/rtui-dynamic-selector-selected-list.component.scss

@@ -27,9 +27,9 @@
 }
 
 .cdk-drag-preview {
-    border: none;
     box-sizing: border-box;
+    border: none;
     border-radius: var(--rt-dynamic-selector-item-border-radius);
-    box-shadow: var(--rt-dynamic-selector-item-drag-preview-box-shadow);
     background: var(--mat-option-selected-state-layer-color);
+    box-shadow: var(--rt-dynamic-selector-item-drag-preview-box-shadow);
 }