@rt-tools/ui-kit 0.0.4

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

@@ -0,0 +1,11 @@
+.block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &__container {
+        border: 1px grey dashed;
+        max-width: 200px;
+        padding: 5px;
+    }
+}

package/src/lib/ui-kit/modal/modal.component.scss

@@ -0,0 +1,115 @@
+@use '../../../styles/base/variables' as vars;
+@use '../../../styles/base/mixin' as mixins;
+
+$modal: (
+    title: (
+        font-size: 1.25rem,
+        color: var(--clr-txt),
+        font-weight: 400,
+    ),
+    content: (
+        padding: 1rem 1.5rem,
+        color: var(--clr-black-80),
+        font-size: 0.8rem,
+        text-align: center,
+        word-wrap: break-word,
+    ),
+    input: (
+        margin-top: 1.5rem,
+        font-weight: 600,
+        text-align: left,
+    ),
+    textarea: (
+        margin-top: 1.5rem,
+    ),
+    select: (
+        margin-top: 1.5rem,
+    ),
+    text-highlited: (
+        font-weight: 600,
+        color: var(--clr-black-100),
+    ),
+    text-warn: (
+        display: inline,
+        font-size: 1rem,
+        font-weight: 600,
+        color: var(--clr-red-100),
+    ),
+);
+
+:host {
+    @each $element, $elements in $modal {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('modal', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    ::ng-deep {
+        .--highlighted {
+            display: inline;
+            font-weight: var(--rt-modal-text-highlited-font-weight);
+            color: var(--rt-modal-text-highlited-color);
+        }
+
+        .--warn {
+            display: inline;
+            font-size: var(--rt-modal-text-warn-font-size);
+            font-weight: var(--rt-modal-text-warn-font-weight);
+            color: var(--rt-modal-text-warn-color);
+        }
+    }
+
+    .rtui-modal {
+        &__title {
+            h1 {
+                font-size: var(--rt-modal-title-font-size);
+                color: var(--rt-modal-title-color);
+                font-weight: var(--rt-modal-title-font-weight);
+            }
+
+            h1,
+            h2 {
+                text-align: center;
+            }
+        }
+
+        &__input {
+            margin-top: var(--rt-modal-input-margin-top);
+            font-weight: var(--rt-modal-input-font-weight);
+            text-align: var(--rt-modal-input-text-align);
+        }
+
+        &__textarea {
+            margin-top: var(--rt-modal-textarea-margin-top);
+        }
+
+        &__select {
+            margin-top: var(--rt-modal-select-margin-top);
+        }
+    }
+
+    .mat-icon {
+        width: auto;
+        height: auto;
+    }
+
+    .mdc-dialog__title::before {
+        height: 100%;
+    }
+
+    mat-dialog-content {
+        padding: var(--rt-modal-content-padding);
+        color: var(--rt-modal-content-color);
+        font-size: var(--rt-modal-content-font-size);
+        text-align: var(--rt-modal-content-text-align);
+        word-wrap: var(--rt-modal-content-word-wrap);
+
+        mat-form-field {
+            width: 100%;
+
+            textarea {
+                resize: none;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}

package/src/lib/ui-kit/popover/rtui-popover-container.component.scss

@@ -0,0 +1,13 @@
+:host {
+    position: absolute;
+    width: fit-content;
+    display: block;
+
+    /* Hack to show properly popover on mouse hover */
+    padding-top: 20px;
+    text-align: left;
+
+    transition:
+        transform 0.1s,
+        opacity 0.5s;
+}

package/src/lib/ui-kit/scrollable/scrollable-container.component.scss

@@ -0,0 +1,64 @@
+@use '../../../styles/base/variables' as vars;
+@use '../../../styles/base/mixin' as mixins;
+
+$scrollable: (
+    host: (
+        height: 100%,
+        width: 100%,
+        display: flex,
+        flex-direction: column,
+        background-color: var(--clr-white-100),
+    ),
+    header: (
+        padding: 0.5rem 1rem,
+        background-color: var(--clr-white-100),
+    ),
+    content: (
+        display: flex,
+        flex-direction: column,
+        flex-grow: 1,
+        padding: 1rem,
+        background-color: var(--clr-white-100),
+    ),
+    footer: (
+        padding: 1rem,
+        background-color: var(--clr-white-100),
+    ),
+);
+
+:host {
+    height: var(--rt-scrollable-host-height);
+    width: var(--rt-scrollable-host-width);
+
+    display: var(--rt-scrollable-host-display);
+    flex-direction: var(--rt-scrollable-host-flex-direction);
+
+    background-color: var(--rt-scrollable-host-background-color);
+
+    @each $element, $elements in $scrollable {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('scrollable', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .rtui-scrollable {
+        &__header {
+            padding: var(--rt-scrollable-header-padding);
+            background-color: var(--rt-scrollable-header-background-color);
+        }
+
+        &__content {
+            display: var(--rt-scrollable-content-display);
+            flex-direction: var(--rt-scrollable-content-flex-direction);
+            flex-grow: var(--rt-scrollable-content-flex-grow);
+            padding: var(--rt-scrollable-content-padding);
+            background-color: var(--rt-scrollable-content-background-color);
+            overflow: auto;
+        }
+
+        &__footer {
+            padding: var(--rt-scrollable-footer-padding);
+            background-color: var(--rt-scrollable-footer-background-color);
+        }
+    }
+}

package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss

@@ -0,0 +1,185 @@
+@use '../../../../styles/base/mixin' as mixins;
+
+$side-menu: (
+    base: (
+        width: 5.5rem,
+        margin-top-between-items: 0.75rem,
+    ),
+    item: (
+        width: 3.5rem,
+        height: 2rem,
+        font-size: 0.75rem,
+        text-align: center,
+        line-height: 1.1,
+    ),
+    mobile-item: (
+        icon-size: 1.5rem,
+        title-font-size: 0.75rem,
+        additional-icon-size: 1rem,
+    ),
+    sub-menu: (
+        width: 15rem,
+    ),
+    sub-menu-item: (
+        width: 13.75rem,
+        title-font-size: 0.85rem,
+    ),
+);
+
+:host {
+    @each $element, $elements in $side-menu {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('side-menu', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    // Hide drawer mask
+    --mat-sidenav-scrim-color: transparent;
+
+    .rtui-mobile-side-menu {
+        width: var(--rt-side-menu-sub-menu-width);
+
+        .rtui-mobile-side-menu-list {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+
+            &--scrollable {
+                width: fit-content;
+            }
+
+            &__sub {
+                opacity: 0;
+                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;
+            }
+
+            .rtui-mobile-side-menu-list-main {
+                opacity: 0;
+                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;
+
+                .rtui-mobile-side-menu-item {
+                    &__icon {
+                        width: var(--rt-side-menu-mobile-item-icon-size);
+                        height: var(--rt-side-menu-mobile-item-icon-size);
+                        font-size: var(--rt-side-menu-mobile-item-icon-size);
+                    }
+
+                    .rtui-mobile-side-menu-item-title {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        &__text {
+                            font-size: 0.75rem;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            overflow: hidden;
+                        }
+
+                        .rtui-mobile-side-menu-item-title-button {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            margin-left: 0.5rem;
+                            border-radius: 50%;
+
+                            &__icon {
+                                width: var(--rt-side-menu-mobile-item-additional-icon-size);
+                                height: var(--rt-side-menu-mobile-item-additional-icon-size);
+                                font-size: var(--rt-side-menu-mobile-item-additional-icon-size);
+                            }
+                        }
+                    }
+                }
+
+                .rtui-mobile-side-menu-item + .rtui-mobile-side-menu-item {
+                    margin-top: 0.5rem;
+                }
+            }
+        }
+    }
+
+    .rtui-side-menu {
+        width: var(--rt-side-menu-base-width);
+
+        &__list {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+
+            .rtui-side-menu-item {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                width: 100%;
+
+                .rtui-side-menu-item-button {
+                    padding: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: var(--rt-side-menu-item-height);
+                    width: var(--rt-side-menu-item-width);
+
+                    &__icon {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+
+                &__title {
+                    font-size: var(--rt-side-menu-item-font-size);
+                    text-align: var(--rt-side-menu-item-text-align);
+                    line-height: var(--rt-side-menu-item-line-height);
+                }
+            }
+
+            .rtui-side-menu-item + .rtui-side-menu-item {
+                margin-top: var(--rt-side-menu-base-margin-top-between-items);
+            }
+        }
+    }
+
+    .rtui-sub-side-menu {
+        position: fixed;
+        top: 0;
+        left: var(--rt-side-menu-base-width);
+        width: 0;
+        height: 100%;
+        background-color: transparent;
+
+        &--opened {
+            width: 100%;
+        }
+
+        .rtui-sub-side-menu-content {
+            width: var(--rt-side-menu-sub-menu-width);
+            height: 100%;
+            border-left: 1px solid var(--clr-black-20);
+            box-shadow:
+                14px 0 28px rgba(0, 0, 0, 0.25),
+                10px 0 10px rgba(0, 0, 0, 0.22);
+
+            &__list {
+                width: 100%;
+
+                opacity: 0;
+                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;
+
+                &--scrollable {
+                    min-width: fit-content;
+                }
+            }
+        }
+    }
+}
+
+@keyframes fadeInAnimation {
+    to {
+        opacity: 1;
+    }
+}

package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss

@@ -0,0 +1,97 @@
+:host {
+    &::ng-deep {
+        // Set expansion panel header padding
+        .mat-expansion-indicator {
+            padding: 0 1.5rem 0 1.5rem;
+        }
+
+        // Set expansion panel body padding
+        .mat-expansion-panel-body {
+            padding: 0 0 0 1rem;
+        }
+
+        // Set expansion panel transparent container
+        --mat-expansion-container-background-color: transparent;
+
+        // Set permanent expansion header height
+        --mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height);
+    }
+
+    .rtui-side-menu-sub-item {
+        max-width: var(--rt-side-menu-sub-menu-item-width);
+
+        &--fixed {
+            min-width: var(--rt-side-menu-sub-menu-item-width);
+        }
+
+        .rtui-side-menu-sub-item-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &__text {
+                font-size: var(--rt-side-menu-sub-menu-item-title-font-size);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+
+            .rtui-side-menu-sub-item-title-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 0.1rem;
+                margin-left: 0.5rem;
+                border-radius: 50%;
+                cursor: pointer;
+                border: 1.5px solid transparent;
+
+                &__icon {
+                    width: 1.25rem;
+                    height: 1.25rem;
+                    font-size: 1.25rem;
+                }
+
+                &:hover {
+                    border-color: var(--clr-black-60);
+                }
+            }
+        }
+    }
+
+    .rtui-side-menu-expand-sub-item {
+        padding: 0;
+        box-shadow: none;
+        // Set expand sub item header border like menu item border
+        border-radius: 1.35rem;
+
+        &--fixed {
+            min-width: var(--rt-side-menu-sub-menu-item-width);
+        }
+
+        .rtui-side-menu-expand-sub-item-header {
+            max-width: var(--rt-side-menu-sub-menu-item-width);
+            padding: 0;
+
+            &--activated {
+                background-color: var(--mat-list-active-indicator-color);
+            }
+
+            &__icon {
+                margin-inline-start: var(--mat-list-list-item-leading-icon-start-space);
+                margin-inline-end: var(--mat-list-list-item-leading-icon-end-space);
+                color: var(--mdc-list-list-item-leading-icon-color);
+            }
+
+            &__title {
+                font-size: var(--rt-side-menu-sub-menu-item-title-font-size);
+            }
+
+            &:hover {
+                .rtui-side-menu-expand-sub-item-header__icon {
+                    color: var(--mdc-list-list-item-hover-leading-icon-color);
+                }
+            }
+        }
+    }
+}

package/src/lib/ui-kit/side-menu/stories/component/test-side-menu-wrapper.component.scss

@@ -0,0 +1,48 @@
+:host {
+    &::ng-deep {
+        // Set menu paddings
+        rtui-scrollable {
+            --rt-scrollable-header-padding: 1rem;
+            --rt-scrollable-content-padding: 0.5rem;
+            --rt-scrollable-footer-padding: 1rem;
+        }
+    }
+
+    display: flex;
+    width: fit-content;
+    height: 100vh;
+    margin: -1rem;
+    box-shadow:
+        0 14px 28px rgba(0, 0, 0, 0.25),
+        0 10px 10px rgba(0, 0, 0, 0.22);
+
+    .side-menu-wrapper {
+        &__header {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            padding: 0.5rem 0 1rem 0;
+            cursor: pointer;
+            border-bottom: 1px solid var(--clr-black-20);
+        }
+
+        .footer {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            gap: 0.5rem;
+            padding-top: 0.5rem;
+            border-top: 1px solid var(--clr-black-20);
+
+            &__icon {
+                height: 2rem;
+                width: 2rem;
+                font-size: 2rem;
+                cursor: pointer;
+            }
+        }
+    }
+}

package/src/lib/ui-kit/snack-bar/snack-bar.component.scss

@@ -0,0 +1,100 @@
+@use '../../../styles/base/mixin' as mixins;
+
+$snack-bar: (
+    content: (
+        gap: 1rem,
+    ),
+    icon: (
+        size: 2rem,
+        color: var(--clr-white-100),
+    ),
+    message: (
+        line-clamp: 5,
+    ),
+    action: (
+        padding: 0.5rem,
+        margin: 0 0.25rem,
+        color: var(--clr-blue-80),
+        background-color: var(--clr-blue-100),
+    ),
+    progress: (
+        height: 0.5rem,
+    ),
+    close-button: (
+        color: var(--clr-white-100),
+    ),
+);
+
+:host {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @each $element, $elements in $snack-bar {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('snack-bar', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .rt-snack-bar {
+        &__content {
+            height: 100%;
+            width: 100%;
+            position: relative;
+            display: flex;
+            align-items: center;
+            gap: var(--rt-snack-bar-content-gap);
+
+            &-icon-wrapper {
+                margin-bottom: auto;
+                line-height: 0.5;
+            }
+
+            &-icon {
+                width: var(--rt-snack-bar-icon-size);
+                min-width: var(--rt-snack-bar-icon-size);
+                height: var(--rt-snack-bar-icon-size);
+                font-size: var(--rt-snack-bar-icon-size);
+                color: var(--rt-snack-bar-icon-color);
+            }
+
+            &-message {
+                display: -webkit-box;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                -webkit-line-clamp: var(--rt-snack-bar-message-line-clamp);
+                -webkit-box-orient: vertical;
+            }
+        }
+
+        &__action-button {
+            position: relative;
+            height: 100%;
+            padding: var(--rt-snack-bar-action-padding);
+            margin: var(--rt-snack-bar-action-margin);
+            color: var(--rt-snack-bar-action-color);
+        }
+
+        &__close-button {
+            margin-bottom: auto;
+
+            &-icon {
+                color: var(--rt-snack-bar-close-button-color);
+            }
+        }
+
+        &__progress {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: var(--rt-snack-bar-progress-height);
+            width: 100%;
+            background-color: var(--mat-button-filled-container-color);
+            border-bottom-left-radius: var(--mat-snack-bar-container-shape);
+            border-bottom-right-radius: var(--mat-snack-bar-container-shape);
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: -1rem;
+
+    rtui-toolbar {
+        --rt-toolbar-body-height: 3.25rem;
+    }
+
+    .content {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+    }
+
+    .action {
+        margin-left: 1rem;
+
+        button {
+            width: 8rem;
+        }
+
+        button + button {
+            margin-left: 1rem;
+        }
+    }
+}