@rt-tools/ui-kit 0.0.4

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@rt-tools/ui-kit",
+  "version": "0.0.4",
+  "license": "Apache-2.0",
+  "author": "Yauheni Krumin",
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.8.0",
+    "@rt-tools/core": "^0.0.1",
+    "@rt-tools/store": "^0.0.1",
+    "@rt-tools/utils": "^0.0.1"
+  },
+  "peerDependencies": {
+    "@rt-tools/core": "^0.0.1",
+    "@rt-tools/store": "^0.0.1",
+    "@rt-tools/utils": "^0.0.1",
+    "@angular/animations": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "rxjs": "^7.8.2",
+    "zone.js": "^0.16.0",
+    "typescript": "^5.9.3"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/rt-tools-ui-kit.mjs",
+  "typings": "types/rt-tools-ui-kit.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/rt-tools-ui-kit.d.ts",
+      "default": "./fesm2022/rt-tools-ui-kit.mjs"
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+@use '../../../../../styles/base/mixin' as mixins;
+@use '../../../../../styles/base/variables' as vars;
+
+.rtui-action-bar {
+    width: var(--rt-action-bar-bar-width);
+    display: flex;
+    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);
+
+    &__counter {
+        font-size: var(--rt-action-bar-counter-font-size);
+        font-weight: var(--rt-action-bar-counter-font-weight);
+    }
+
+    &__actions {
+        display: flex;
+        gap: var(--rt-action-bar-actions-gap);
+    }
+
+    &__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);
+        padding: var(--rt-action-bar-action-padding);
+        border-radius: var(--rt-action-bar-action-border-radius);
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--rt-action-bar-action-hover-background-color);
+        }
+    }
+
+    &__close-button {
+        cursor: pointer;
+        margin-left: auto;
+
+        svg {
+            transition: transform 0.2s ease;
+
+            &:hover {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-md) {
+        gap: var(--rt-action-bar-bar-mobile-gap);
+        padding: var(--rt-action-bar-bar-mobile-padding);
+
+        &__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);
+        }
+    }
+}
+
+.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);
+
+    &__action {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--rt-action-bar-action-menu-action-gap);
+        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;
+
+        &:hover {
+            background-color: var(--rt-action-bar-action-menu-action-hover-background-color);
+        }
+    }
+
+    @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);
+
+        &__action {
+            gap: var(--rt-action-bar-action-menu-action-mobile-gap);
+            padding: var(--rt-action-bar-action-menu-action-mobile-padding);
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+: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);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--rt-action-bar-container-z-index);
+}

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

@@ -0,0 +1,20 @@
+:host {
+    rtui-scrollable {
+        --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;
+
+        @supports (height: 100dvh) {
+            --rt-scrollable-host-height: 100dvh;
+        }
+    }
+
+    rtui-toolbar {
+        --rt-toolbar-body-height: 6rem;
+        --rt-toolbar-body-mobile-height: 6rem;
+        --rt-toolbar-body-padding: 0;
+        --rt-toolbar-bars-border-bottom-width: 0;
+    }
+}

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

@@ -0,0 +1,37 @@
+:host {
+    display: flex;
+    width: 100%;
+
+    .aside-error-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: var(--rt-aside-error-box-height);
+        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);
+
+        &__title {
+            font-size: var(--rt-aside-error-box-title-font-size);
+            color: var(--rt-aside-error-box-title-font-color);
+        }
+
+        .aside-error-box-button {
+            &__icon {
+                margin-right: 0.5rem;
+            }
+
+            &__title {
+                font-size: var(--rt-aside-error-box-button-font-size);
+                color: var(--rt-aside-error-box-button-font-color);
+            }
+
+            &.--complete {
+                background-color: transparent;
+                cursor: not-allowed;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,243 @@
+@use '../../../../../styles/base/mixin' as mixins;
+@use '../../../../../styles/base/variables' as vars;
+
+$aside: (
+    host: (
+        width: 33.75rem,
+        box-shadow: 0 0 1rem 0 rgba(#000, 0.1),
+        background-color: var(--clr-white-100),
+    ),
+    header: (
+        padding: 2rem,
+    ),
+    header-mobile: (
+        padding: 1rem,
+    ),
+    header-back-button: (
+        margin-right: 1rem,
+    ),
+    header-title: (
+        font-size: 1.5rem,
+        line-height: 1.1,
+        font-weight: 600,
+    ),
+    header-description: (
+        font-size: 1rem,
+        margin-bottom: 0.25rem,
+        color: var(--clr-black-60),
+    ),
+    header-addition: (
+        font-size: 1rem,
+        margin-top: 0.25rem,
+        color: var(--clr-black-60),
+    ),
+    header-actions: (
+        margin-left: 1rem,
+    ),
+    header-action-button: (
+        margin-left: 0.75rem,
+    ),
+    content: (
+        padding: 0 2rem,
+    ),
+    content-mobile: (
+        padding: 0 1rem,
+    ),
+    footer: (
+        padding: 2rem,
+        margin-left-betwen-buttons: 1rem,
+    ),
+    footer-mobile: (
+        padding: 1rem,
+    ),
+    error-box: (
+        height: 2rem,
+        padding: 0.5rem,
+        margin: 2rem 0 2rem 0,
+        border: 1px solid var(--clr-red-60),
+        border-radius: 0.375rem,
+    ),
+    error-box-title: (
+        font-size: 1rem,
+        font-color: var(--clr-red-60),
+    ),
+    error-box-button: (
+        font-size: 1rem,
+        font-color: var(--clr-black-100),
+    ),
+    tab-indicator: (
+        width: 6rem,
+    ),
+    tab-badge: (
+        color: var(--mdc-filled-button-container-color),
+    ),
+    tab-badge-incorrect: (
+        color: var(--clr-red-100),
+    ),
+);
+
+: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%;
+}
+
+// BADGE
+.icon-badge {
+    position: absolute !important;
+}
+
+.title-badge {
+    margin-left: 0.25rem;
+    top: -0.5rem;
+}
+
+.icon-badge,
+.title-badge {
+    .mat-badge-content {
+        background-color: var(--rt-aside-tab-badge-color);
+    }
+}
+
+.icon-badge.--incorrect,
+.title-badge.--incorrect {
+    .mat-badge-content {
+        background-color: var(--rt-aside-tab-badge-incorrect-color);
+    }
+}
+
+// ASIDE
+.c-aside {
+    position: relative;
+    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);
+
+    // TAB GROUP
+    .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
+        width: var(--rt-aside-tab-indicator-width);
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-xs) {
+        width: 100vw;
+    }
+} // c-aside
+
+// ASIDE HEADER
+.c-aside-header {
+    padding: var(--rt-aside-header-padding);
+
+    .back-button {
+        margin-right: var(--rt-aside-header-back-button-margin-right);
+    }
+
+    .c-aside-title {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+
+        &__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);
+        }
+
+        &__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);
+        }
+
+        &__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);
+        }
+
+        &__descr,
+        &__txt,
+        &__addition {
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .c-aside-actions {
+        margin-left: var(--rt-aside-header-actions-margin-left);
+
+        &__action {
+            margin-left: var(--rt-aside-header-action-button-margin-left);
+        }
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-xs) {
+        padding: var(--rt-aside-header-mobile-padding);
+    }
+} // c-aside-header
+
+.c-aside-content {
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    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;
+        background: var(--clr-white-100);
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-xs) {
+        padding: var(--rt-aside-content-mobile-padding);
+    }
+} // c-aside-content
+
+// ASIDE FOOTER
+.c-aside-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    padding: var(--rt-aside-footer-padding);
+
+    .c-aside-footer-btn {
+        &__title {
+            text-transform: uppercase;
+        }
+    }
+
+    .c-aside-footer-btn + .c-aside-footer-btn {
+        margin-left: var(--rt-aside-footer-margin-left-betwen-buttons);
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-xs) {
+        padding: var(--rt-aside-footer-mobile-padding);
+    }
+} // c-aside-footer

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

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

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

@@ -0,0 +1,44 @@
+@use '../../../../styles/base/mixin' as mixins;
+
+$round-icon-button: (
+    host: (
+        size: 1.5rem,
+        padding: 0.25rem,
+        z-index: 1,
+        background-color: var(--mat-list-active-indicator-color),
+    ),
+    icon: (
+        size: 1.25rem,
+    ),
+);
+
+:host {
+    @each $element, $elements in $round-icon-button {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('round-icon-button', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .round-icon-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: var(--rt-round-icon-button-host-size);
+        height: var(--rt-round-icon-button-host-size);
+        padding: var(--rt-round-icon-button-host-padding);
+        z-index: var(--rt-round-icon-button-host-z-index);
+        border-radius: 50%;
+        cursor: pointer;
+
+        &__icon {
+            width: var(--rt-round-icon-button-icon-size);
+            height: var(--rt-round-icon-button-icon-size);
+            font-size: var(--rt-round-icon-button-icon-size);
+        }
+
+        &:hover {
+            background-color: var(--rt-round-icon-button-host-background-color);
+            box-shadow: var(--rt-button-box-shadow);
+        }
+    }
+}

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

@@ -0,0 +1,92 @@
+@use '../../../../styles/base/mixin' as mixins;
+
+$rtui-multibutton: (
+    base: (
+        display: inline-flex,
+        flex-flow: row wrap,
+        radius: 8px,
+        padding: 4px,
+        background-color: var(--clr-black-10),
+    ),
+    action-base: (
+        padding: 4px 8px,
+        radius: 8px,
+        border: 0,
+        font-size: 12px,
+        font-weight: 600,
+        color: var(--clr-black-60),
+        background-color: transparent,
+        transition: 'background-color 0.15s, color 0.15s',
+        cursor: pointer,
+    ),
+    action-hover: (
+        color: var(--clr-black-80),
+    ),
+    action-active: (
+        color: var(--clr-black-80),
+        background-color: var(--clr-black-20),
+        cursor: default,
+    ),
+    action-focus-visible: (
+        outline: 2px dashed var(--clr-blue-40),
+        outline-offset: -2px,
+    ),
+    action-disabled: (
+        pointer-events: none,
+        cursor: default,
+        opacity: 0.75,
+    ),
+);
+
+:host {
+    @each $element, $elements in $rtui-multibutton {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('rtui-multibutton', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .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);
+        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);
+            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);
+                cursor: var(--rt-rtui-multibutton-action-active-cursor);
+            }
+
+            &:not(&--active):hover {
+                color: var(--rt-rtui-multibutton-action-hover-color);
+            }
+
+            &:focus {
+                outline: none;
+            }
+
+            &:focus-visible {
+                outline: var(--rt-rtui-multibutton-action-focus-visible-outline);
+                outline-offset: var(--rt-rtui-multibutton-action-focus-visible-outline-offset);
+            }
+
+            &: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);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,68 @@
+@use '../../../styles/base/mixin' as mixins;
+
+.rtui-checkbox {
+    display: flex;
+    gap: var(--rt-checkbox-container-gap);
+
+    &__input {
+        @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);
+        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;
+        cursor: pointer;
+
+        svg {
+            opacity: 0;
+            transition: opacity 0.15s linear;
+        }
+    }
+
+    &__input:checked + &__box,
+    &__input:indeterminate + &__box {
+        color: var(--rt-checkbox-box-active-color);
+        border-color: var(--rt-checkbox-box-active-color);
+
+        svg {
+            opacity: 1;
+        }
+    }
+
+    &__input:disabled + &__box {
+        color: var(--clr-black-40);
+        border-color: var(--clr-black-40);
+        cursor: default;
+    }
+
+    &__input:focus {
+        outline: none;
+    }
+
+    &:focus-within {
+        outline: 2px dashed var(--rt-checkbox-box-active-color);
+        outline-offset: 2px;
+    }
+
+    &__label {
+        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);
+        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

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