@rt-tools/ui-kit 0.0.4

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

@@ -0,0 +1,49 @@
+:host {
+    z-index: 10000;
+    position: absolute;
+
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .c-spinner {
+        &__container {
+            width: 100%;
+            height: 100%;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &--bgr-color {
+                background-color: rgba(#f5f6f8, 0.85);
+            }
+        }
+
+        &__wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            mat-spinner {
+                ::ng-deep circle {
+                    stroke: var(--clr-base-accent);
+                }
+            }
+
+            &--bgr-color {
+                width: 3rem;
+                height: 3rem;
+
+                background: var(--clr-white-100);
+                border-radius: 50%;
+                box-shadow:
+                    0 1px 3px rgba(0, 0, 0, 0.12),
+                    0 1px 2px rgba(0, 0, 0, 0.24);
+            }
+        }
+    }
+}

package/src/lib/ui-kit/table/components/clear-search-button/rtui-clear-button.component.scss

@@ -0,0 +1,50 @@
+@use '../../../../../styles/base/mixin' as mixins;
+
+$clear-button: (
+    host: (
+        margin: 0 0.5rem 0 0,
+        padding: 0.1rem,
+        background-color: var(--clr-black-20),
+    ),
+    icon: (
+        size: 1rem,
+        color: var(--clr-black-60),
+    ),
+    icon-hover: (
+        color: var(--clr-black-100),
+    ),
+);
+
+:host {
+    @each $element, $elements in $clear-button {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('clear-button', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .rtui-clear-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: none;
+        border-radius: 50%;
+        margin: var(--rt-clear-button-host-margin);
+        padding: var(--rt-clear-button-host-padding);
+        background-color: var(--rt-clear-button-host-background-color);
+
+        &--invisible {
+            @include mixins.visually-hidden();
+        }
+
+        &__icon {
+            width: var(--rt-clear-button-icon-size);
+            height: var(--rt-clear-button-icon-size);
+            font-size: var(--rt-clear-button-icon-size);
+            color: var(--rt-clear-button-icon-color);
+
+            &:hover {
+                color: var(--rt-clear-button-icon-hover-color);
+            }
+        }
+    }
+}

package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss

@@ -0,0 +1,191 @@
+@use '../../../../../styles/base/mixin' as mixins;
+@use '../../../../../styles/base/variables' as vars;
+
+$pagination: (
+    container: (
+        gap: 2rem,
+        margin: 0.5rem 0,
+        color: var(--clr-black-60),
+        font-size: 0.875rem,
+        font-weight: 400,
+        line-height: 1rem,
+    ),
+    container-mobile: (
+        gap: 1rem,
+    ),
+    paging: (
+        gap: 0.5rem,
+    ),
+    paging-mobile: (
+        margin: 0.5rem 0 0 0,
+    ),
+    paging-item: (
+        padding: 0.5rem,
+        border: 1px solid var(--clr-gray-15),
+        border-radius: 0.75rem,
+    ),
+    paging-item-hover: (
+        color: var(--clr-white-100),
+        background-color: var(--clr-black-60),
+    ),
+    paging-item-active: (
+        color: var(--clr-white-100),
+        background-color: var(--clr-black-60),
+    ),
+    paging-item-disabled-svg: (
+        opacity: 0.3,
+    ),
+    size-toggle: (
+        gap: 0.75rem,
+    ),
+    size-toggle-selector: (
+        min-width: 3rem,
+        height: 2rem,
+    ),
+    size-toggle-selector-mobile: (
+        margin: 0 0 0.5rem 0,
+    ),
+);
+
+:host {
+    width: fit-content;
+    height: 100%;
+    display: flex;
+
+    @each $element, $elements in $pagination {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('table-pagination', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .pagination-container {
+        position: relative;
+
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--rt-table-pagination-container-gap);
+
+        color: var(--rt-table-pagination-container-color);
+        font-size: var(--rt-table-pagination-container-font-size);
+        font-weight: var(--rt-table-pagination-container-font-weight);
+        line-height: var(--rt-table-pagination-container-line-height);
+
+        &--clipped {
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            gap: var(--rt-table-pagination-container-mobile-gap);
+        }
+
+        &--mobile {
+            width: 100%;
+            justify-content: space-between;
+        }
+
+        .paging {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: var(--rt-table-pagination-paging-gap);
+            margin: var(--rt-table-pagination-container-margin);
+
+            &--clipped {
+                margin: var(--rt-table-pagination-paging-mobile-margin);
+            }
+
+            &__item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                position: relative;
+
+                padding: var(--rt-table-pagination-paging-item-padding);
+                border: var(--rt-table-pagination-paging-item-border);
+                border-radius: var(--rt-table-pagination-paging-item-border-radius);
+
+                background-color: transparent;
+                cursor: default;
+                pointer-events: none;
+
+                &-label {
+                    min-width: 1rem;
+                    text-align: center;
+                }
+
+                svg {
+                    fill-opacity: var(--rt-table-pagination-paging-item-disabled-svg-opacity);
+                }
+
+                &:hover:not(.divider) {
+                    color: var(--rt-table-pagination-paging-item-hover-color);
+                    background-color: var(--rt-table-pagination-paging-item-hover-background-color);
+                }
+
+                &--active {
+                    color: var(--rt-table-pagination-paging-item-active-color);
+                    background-color: var(--rt-table-pagination-paging-item-active-background-color);
+                }
+
+                &--enabled {
+                    cursor: pointer;
+                    pointer-events: auto;
+
+                    svg {
+                        fill-opacity: 1;
+                    }
+                }
+
+                &--divider {
+                    cursor: default;
+                    pointer-events: none;
+                    border: none;
+                }
+            }
+        }
+
+        .page-size-toggle {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            gap: var(--rt-table-pagination-size-toggle-gap);
+            margin: var(--rt-table-pagination-container-margin);
+
+            &--clipped {
+                margin: var(--rt-table-pagination-size-toggle-selector-mobile-margin);
+            }
+
+            &__title {
+                white-space: nowrap;
+            }
+
+            &__selector {
+                width: auto;
+                min-width: var(--rt-table-pagination-size-toggle-selector-min-width);
+                height: var(--rt-table-pagination-size-toggle-selector-height);
+
+                border: var(--rt-table-pagination-paging-item-border);
+                border-radius: var(--rt-table-pagination-paging-item-border-radius);
+
+                background-color: transparent;
+                cursor: pointer;
+
+                color: var(--rt-table-pagination-container-color);
+                font-size: var(--rt-table-pagination-container-font-size);
+                font-weight: var(--rt-table-pagination-container-font-weight);
+                line-height: var(--rt-table-pagination-container-line-height);
+            }
+        }
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-xs) {
+        width: 100%;
+
+        .pagination-container {
+            width: 100%;
+            justify-content: space-between;
+        }
+    }
+}

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

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

package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss

@@ -0,0 +1,133 @@
+@use '../../../../../styles/base/mixin' as mixins;
+
+$base-cell: (
+    host: (
+        gap: 0.5rem,
+    ),
+    prefix: (
+        icon-size: 1.5rem,
+    ),
+    suffix: (
+        icon-size: 1.5rem,
+    ),
+    title: (
+        padding: 0.5rem 0.5rem 0.5rem 0,
+    ),
+    copy-button: (
+        position-right: 0.25rem,
+        position-left: 0.25rem,
+        padding: 0.25rem,
+        background-color: var(--mat-fab-small-container-color),
+        icon-size: 1rem,
+    ),
+    copy-button-complete: (
+        color: var(--clr-black-100),
+    ),
+);
+
+:host {
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    gap: var(--rt-table-base-cell-host-gap);
+
+    position: relative;
+
+    @each $element, $elements in $base-cell {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('table-base-cell', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .base-cell {
+        &__prefix {
+            width: var(--rt-table-base-cell-prefix-icon-size);
+            height: var(--rt-table-base-cell-prefix-icon-size);
+            font-size: var(--rt-table-base-cell-prefix-icon-size);
+        }
+
+        &__title {
+            width: 100%;
+            display: table;
+            table-layout: fixed;
+
+            &-text {
+                width: 100%;
+                padding: var(--rt-table-base-cell-title-padding);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            &--align {
+                &--left {
+                    text-align: left;
+                }
+
+                &--center {
+                    text-align: center;
+                }
+
+                &--right {
+                    text-align: right;
+                }
+            }
+        }
+
+        &__suffix {
+            width: var(--rt-table-base-cell-suffix-icon-size);
+            height: var(--rt-table-base-cell-suffix-icon-size);
+            font-size: var(--rt-table-base-cell-suffix-icon-size);
+        }
+
+        &__prefix,
+        &__suffix {
+            width: fit-content;
+            min-width: fit-content;
+        }
+
+        &__copy-button {
+            position: absolute;
+            visibility: hidden;
+            padding: var(--rt-table-base-cell-copy-button-padding);
+            background-color: var(--rt-table-base-cell-copy-button-background-color);
+
+            &--position {
+                &--left {
+                    left: var(--rt-table-base-cell-copy-button-position-left);
+                }
+                &--right {
+                    right: var(--rt-table-base-cell-copy-button-position-right);
+                }
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: var(--rt-table-base-cell-copy-button-background-color);
+            }
+
+            &--complete {
+                cursor: not-allowed;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    color: var(--rt-table-base-cell-copy-button-complete-color);
+                }
+            }
+
+            &--visible {
+                visibility: visible;
+            }
+        }
+
+        &__copy-icon {
+            width: var(--rt-table-base-cell-copy-button-icon-size);
+            height: var(--rt-table-base-cell-copy-button-icon-size);
+            font-size: var(--rt-table-base-cell-copy-button-icon-size);
+        }
+    }
+}

package/src/lib/ui-kit/table/components/table-config-aside/rt-table-config-aside.component.scss

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

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

@@ -0,0 +1,212 @@
+@use '../../../../../styles/base/variables' as vars;
+@use '../../../../../styles/base/mixin' as mixins;
+
+$table-container: (
+    selectors: (
+        margin: 0 0.65rem,
+    ),
+    selector-label: (
+        color: var(--clr-black-60),
+    ),
+    selector-label-hover: (
+        color: var(--clr-black-100),
+    ),
+    selector-counter: (
+        color: var(--clr-black-60),
+        font-size: 0.875rem,
+    ),
+    toolbar-mobile: (
+        gap: 1rem,
+    ),
+    toolbar-actions: (
+        gap: 1rem,
+    ),
+    toolbar-actions-last-child: (
+        margin-right: 1rem,
+    ),
+    toolbar-actions-divider: (
+        height: 2rem,
+        border-left: 1px solid var(--clr-gray-20),
+    ),
+    toolbar-search: (
+        width: 22rem,
+    ),
+    content: (
+        padding: 0,
+    ),
+    placeholder: (
+        width: 100%,
+        height: 100vh,
+        gap: 1rem,
+        icon-size: 3rem,
+        title-size: 2rem,
+    ),
+);
+
+:host {
+    width: 100%;
+    position: relative;
+    display: flex;
+    overflow: hidden;
+
+    // initial table container scrollbar styles
+    ::-webkit-scrollbar-track:hover {
+        border: 1px solid var(--clr-gray-10);
+    }
+    ::-webkit-scrollbar-thumb {
+        background: var(--clr-gray-20);
+        border: 3px solid transparent;
+        border-radius: 6px;
+        background-clip: content-box;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--clr-black-40);
+        border: 2px solid transparent;
+        background-clip: content-box;
+    }
+
+    // set rt-toolbar styles
+    rtui-toolbar {
+        --rt-toolbar-body-padding: 0;
+        --rt-toolbar-bars-border-bottom-width: 0;
+    }
+
+    rtui-scrollable {
+        --rt-scrollable-header-padding: 1rem 0 0 0;
+        --rt-scrollable-content-padding: 1rem 0 0 0;
+        --rt-scrollable-host-background-color: transparent;
+        --rt-scrollable-header-background-color: transparent;
+        --rt-scrollable-content-background-color: transparent;
+    }
+
+    // M3 redefined variables
+    --mat-fab-small-container-shape: 50%;
+    --mat-fab-small-hover-state-layer-opacity: 0;
+    --mat-fab-small-pressed-state-layer-opacity: 0;
+    --mat-fab-small-focus-state-layer-opacity: 0;
+
+    @each $element, $elements in $table-container {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('table-container', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .table-container {
+        &__selectors {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex-grow: 1;
+            width: 100%;
+            margin: var(--rt-table-container-selectors-margin);
+            gap: var(--rt-table-container-toolbar-actions-gap);
+
+            &-label {
+                color: var(--rt-table-container-selector-label-color);
+
+                &:hover {
+                    color: var(--rt-table-container-selector-label-hover-color);
+                }
+            }
+
+            &-counter {
+                font-size: var(--rt-table-container-selector-counter-font-size);
+                color: var(--rt-table-container-selector-counter-color);
+            }
+        }
+
+        &__toolbar {
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+
+            &-actions {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                gap: var(--rt-table-container-toolbar-actions-gap);
+
+                > :last-child {
+                    margin-right: var(--rt-table-container-toolbar-actions-last-child-margin-right);
+                }
+            }
+
+            &-actions-divider {
+                height: var(--rt-table-container-toolbar-actions-divider-height);
+                border-left: var(--rt-table-container-toolbar-actions-divider-border-left);
+            }
+
+            &-search {
+                width: var(--rt-table-container-toolbar-search-width);
+            }
+        }
+
+        &__content {
+            width: 100%;
+            flex-grow: 1;
+            overflow: auto;
+            padding: var(--rt-table-container-content-padding);
+
+            &::-webkit-scrollbar {
+                width: var(--rt-table-container-content-scrollbar-vertical-width);
+                height: var(--rt-table-container-content-scrollbar-horizontal-height);
+            }
+        }
+
+        &__placeholder {
+            width: var(--rt-table-container-placeholder-width);
+            height: var(--rt-table-container-placeholder-height);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: var(--rt-table-container-placeholder-gap);
+
+            &-icon {
+                width: var(--rt-table-container-placeholder-icon-size);
+                height: var(--rt-table-container-placeholder-icon-size);
+                font-size: var(--rt-table-container-placeholder-icon-size);
+            }
+
+            &-title {
+                font-size: var(--rt-table-container-placeholder-title-size);
+            }
+        }
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-sm) {
+        --rt-table-container-toolbar-actions-last-child-margin-right: 0;
+
+        rtui-toolbar {
+            --rt-toolbar-body-height: 6.5rem;
+            --rt-toolbar-body-mobile-height: 6.5rem;
+            --rt-toolbar-bars-center-width: 0;
+            --rt-toolbar-bars-right-width: 100%;
+        }
+
+        .table-container {
+            &__toolbar {
+                flex-direction: column-reverse;
+                gap: var(--rt-table-container-toolbar-mobile-gap);
+
+                &-actions {
+                    width: 100%;
+                    justify-content: center;
+
+                    &--end {
+                        --rt-table-container-toolbar-actions-last-child-margin-right: 1rem;
+
+                        justify-content: flex-end;
+                    }
+                }
+
+                &-search {
+                    width: 100%;
+                    grid-row: 1;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+}