@rt-tools/ui-kit-v2 0.1.0

package/src/lib/components/table/copy-cell/rt-copy-cell.component.scss

@@ -0,0 +1,40 @@
+/* rt-copy-cell — ячейка с копированием в буфер.
+   ViewEncapsulation.None: классы глобальны, токены --rt-* наследуются.
+   Кнопка скрыта по умолчанию и проявляется при наведении/фокусе — чтобы не
+   зашумлять плотные таблицы. */
+
+.rt-copy-cell {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--rt-space-xs);
+
+    &__content {
+        min-width: 0;
+    }
+
+    &__button {
+        flex: 0 0 auto;
+        opacity: 0;
+        transition: opacity var(--rt-duration-fast) ease;
+    }
+
+    /* Reveal при наведении/клавиатурном фокусе внутри самой ячейки — работает
+       и вне таблицы (карточки, асайды). */
+    &:hover &__button,
+    &:focus-within &__button {
+        opacity: 1;
+    }
+
+    /* revealOnHover=false — кнопка всегда видима (модалки/карточки без hover-строки). */
+    &--static &__button {
+        opacity: 1;
+    }
+}
+
+/* Reveal при наведении/фокусе на всю строку rt-table — привычное поведение
+   таблиц: кнопка появляется, как только курсор над строкой. */
+.rt-table tbody tr:hover .rt-copy-cell__button,
+.rt-table tbody tr:focus-within .rt-copy-cell__button {
+    opacity: 1;
+}

package/src/lib/components/table/rt-table.component.scss

@@ -0,0 +1,312 @@
+/* rt-table — common/ui таблица поверх cdk-table. ViewEncapsulation.None:
+   классы доступны без scope-attrs, токены --rt-* наследуются. */
+
+.rt-table {
+    position: relative;
+    display: table;
+    width: 100%;
+    background: var(--rt-color-bg-surface);
+    border-collapse: collapse;
+    color: var(--rt-color-text-primary);
+
+    .cdk-header-cell,
+    .cdk-cell,
+    &__skeleton-cell {
+        position: relative;
+        height: 50px;
+        padding: var(--rt-space-2) var(--rt-space-5);
+        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+
+        /* Single-owner границы: каждую линию сетки рисует РОВНО одна ячейка —
+           вертикаль только левой гранью, горизонталь только нижней. Внутренние
+           линии не удваиваются, правого периметра нет вовсе, а левый гасим у
+           первой колонки ниже. Таблица упирается в края контейнера — боковые
+           рамки не нужны. */
+        border-left: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-medium);
+        text-align: start;
+        vertical-align: middle;
+
+        &[data-align='right'] {
+            text-align: right;
+
+            input {
+                text-align: right;
+            }
+        }
+    }
+
+    /* Левый периметр не рисуем — первая колонка без левой грани. */
+    .cdk-header-cell:first-child,
+    .cdk-cell:first-child,
+    &__skeleton-cell:first-child {
+        border-left: none;
+    }
+
+    .cdk-header-cell {
+        /* Верхняя грань таблицы — только у шапки (низ даёт border-bottom строк). */
+        border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        background: var(--rt-color-bg-surface);
+        color: var(--rt-color-text-muted);
+    }
+
+    .cdk-cell {
+        color: var(--rt-color-text-primary);
+        overflow-wrap: anywhere;
+    }
+
+    /* «…»-действия строки ([showRowActions]) — НЕ отдельная видимая колонка.
+       Ячейка нулевой ширины, sticky к правому краю scroll-контейнера
+       (rtElem="table-scroll", overflow-x), без border/padding. Плавающая кнопка
+       не занимает места в раскладке — поэтому горизонтальный скролл не уводит её
+       из вьюпорта. Компаунд с .cdk-cell держит специфичность выше базовой ячейки. */
+    &__actions-header.cdk-header-cell {
+        width: 0;
+        padding: 0;
+        border: none;
+    }
+
+    &__actions-cell.cdk-cell {
+        position: sticky;
+        z-index: 1;
+        right: 0;
+        width: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+    }
+
+    &__actions-float {
+        position: absolute;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        padding: 0 var(--rt-space-2) 0 var(--rt-space-8);
+
+        /* Содержимое последней ячейки «утопает» под кнопкой; кнопка видна только
+           на hover строки, поэтому фон градиента — hover-цвет строки. */
+        background: linear-gradient(to right, transparent 0%, var(--rt-color-bg-hover) 45%);
+        inset: 0 0 0 auto;
+
+        /* Прозрачная зона пропускает клики на строку; интерактивна только кнопка. */
+        pointer-events: none;
+
+        .rt-menu {
+            pointer-events: auto;
+        }
+    }
+
+    /* Hover-reveal: по умолчанию кнопка скрыта, появляется при наведении/фокусе
+       строки или пока её меню открыто (:has(.rt-menu--open) — переживает уход
+       hover'а на overlay-панель). Скрытие — только на hover-устройствах: на тач
+       (hover: none) правило не применяется и кнопка видна всегда. */
+    @media (hover: hover) {
+        &__actions-cell.cdk-cell {
+            visibility: hidden;
+        }
+
+        .cdk-row:hover &__actions-cell.cdk-cell,
+        .cdk-row:focus-within &__actions-cell.cdk-cell,
+        &__actions-cell.cdk-cell:has(.rt-menu--open) {
+            visibility: visible;
+        }
+    }
+
+    .cdk-row {
+        &:hover {
+            background: var(--rt-color-bg-hover);
+        }
+
+        /* Опт-ин подсветка проблемной строки (просрочка и т.п.): потребитель
+           вешает класс `rt-table__row--danger` на строку. Составной селектор с
+           `.cdk-row` нужен, чтобы danger-фон держался и при :hover. */
+        &.rt-table__row--danger {
+            background: var(--rt-color-state-danger-bg);
+
+            &:hover {
+                background: var(--rt-color-state-danger-bg);
+            }
+        }
+    }
+
+    /* Строки-ссылки: курсор + focus-ring. Активацию (click/Enter/Space) и
+       table-семантику обеспечивает директива rtTableRow на самой строке. */
+    &--clickable {
+        .cdk-row {
+            cursor: pointer;
+
+            &:focus-visible {
+                outline: 2px solid var(--rt-color-action-primary);
+                outline-offset: -2px;
+            }
+        }
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    &--density--compact {
+        .cdk-header-cell,
+        .cdk-cell,
+        .rt-table__skeleton-cell {
+            height: 36px;
+            padding: var(--rt-space-xs) var(--rt-space-sm);
+        }
+    }
+
+    &__skeleton-bar {
+        display: block;
+        width: 80%;
+        height: 14px;
+    }
+
+    &__empty-row {
+        display: table-row;
+    }
+
+    &__empty {
+        padding: var(--rt-space-6) var(--rt-space-5);
+
+        /* Только нижняя грань — как у строк: верхнюю даёт border-bottom шапки
+           (иначе двойная линия), боковые не рисуем (нет периметра). */
+        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        background: var(--rt-color-bg-surface);
+        color: var(--rt-color-text-muted);
+        text-align: center;
+    }
+
+    &__empty-message {
+        margin: 0;
+        font-size: var(--rt-text-sm);
+    }
+
+    &__overlay {
+        position: absolute;
+        z-index: 1;
+        display: grid;
+        min-height: 100%;
+        inset: 0;
+        place-items: center;
+        pointer-events: none;
+    }
+
+    &__overlay-backdrop {
+        position: absolute;
+        background: var(--rt-color-bg-surface);
+        inset: 0;
+        opacity: 0.72;
+    }
+
+    &__overlay-spinner {
+        position: sticky;
+        z-index: 1;
+        top: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: translateY(-50%);
+    }
+
+    /* Мобильный card-режим (≤1080px, host-модификатор --cards): хост перестаёт
+       быть таблицей, CDK-строки скрываются, вместо них — вертикальный список
+       карточек. Карточки в DOM только при narrow (гейт @if в шаблоне). */
+    &__cards {
+        display: none;
+    }
+
+    &--cards {
+        display: block;
+
+        /* Потребители часто форсят ширину таблицы под горизонтальный скролл
+           (`min-width: max-content` на элементе таблицы). В card-режиме это увело
+           бы карточки за вьюпорт — перебиваем `!important`, т.к. consumer-правило
+           (Emulated, с [ngcontent]-атрибутом) выигрывает по специфичности. */
+        min-width: 0 !important;
+        max-width: 100%;
+
+        .cdk-header-row,
+        .cdk-row,
+        .rt-table__skeleton-row,
+        .rt-table__empty-row {
+            display: none;
+        }
+
+        .rt-table__cards {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+    }
+
+    &__card {
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-md);
+        border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        border-radius: var(--rt-radius-md);
+        background: var(--rt-color-bg-surface);
+        gap: var(--rt-space-xs);
+    }
+
+    &__card-field {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: var(--rt-space-md);
+    }
+
+    &__card-label {
+        flex: 0 0 auto;
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+    }
+
+    &__card-value {
+        min-width: 0;
+        overflow-wrap: anywhere;
+        text-align: right;
+
+        /* Cell-шаблон колонки — это `<td cdk-cell>` целиком; вне таблицы он тащит
+           табличные стили (height 50px, border, padding, inline min-width под
+           горизонтальный скролл). Гасим их, чтобы значение вело себя как inline-текст. */
+        .cdk-cell {
+            display: inline;
+            height: auto;
+            padding: 0;
+            border: none;
+            font: inherit;
+            min-inline-size: 0 !important;
+            text-align: inherit;
+        }
+    }
+
+    &__card-actions {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &__card-skeleton-bar {
+        display: block;
+        width: 60%;
+        height: 14px;
+
+        &:first-child {
+            width: 80%;
+        }
+    }
+}
+
+/* В тёмной теме таблица сливается с фоном контента (bg-page), а не поднимается
+   на bg-surface — иначе список выпирает более светлой плитой над страницей. */
+:root[data-theme='dark'] .rt-table,
+html.rt-theme-dark .rt-table {
+    background: var(--rt-color-bg-page);
+
+    .cdk-header-cell,
+    .rt-table__empty,
+    .rt-table__overlay-backdrop {
+        background: var(--rt-color-bg-page);
+    }
+}

package/src/lib/components/table/settings-aside/rt-table-settings-aside.component.scss

@@ -0,0 +1,5 @@
+/* rt-table-settings-aside — ViewEncapsulation.None (common/ui). Своей раскладки нет:
+   chrome даёт rt-aside, тело — rt-table-settings-panel. */
+:host {
+    display: contents;
+}

package/src/lib/components/table/settings-panel/rt-table-settings-panel.component.scss

@@ -0,0 +1,77 @@
+/* rt-table-settings-panel — ViewEncapsulation.None (common/ui): правила таргетируют
+   BEM-класс глобально, без :host-обёртки (как rt-icon / rt-dialog-footer). */
+.rt-table-settings-panel {
+    &__list {
+        display: flex;
+        min-width: 320px;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        gap: var(--rt-space-2xs);
+        list-style: none;
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+        padding: var(--rt-space-2xs) var(--rt-space-xs);
+        border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        border-radius: var(--rt-radius-md);
+        background-color: var(--rt-color-bg-surface);
+        gap: var(--rt-space-sm);
+
+        &--hidden {
+            color: var(--rt-color-text-muted);
+        }
+
+        &.cdk-drag-preview {
+            box-shadow: var(--rt-shadow-card);
+        }
+
+        &.cdk-drag-placeholder {
+            opacity: 0.4;
+        }
+
+        &.cdk-drag-animating {
+            transition: transform var(--rt-duration-base) cubic-bezier(0, 0, 0.2, 1);
+        }
+    }
+
+    &__handle {
+        display: inline-flex;
+        width: 24px;
+        height: 24px;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: none;
+        background: none;
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        &--placeholder {
+            cursor: default;
+        }
+    }
+
+    &__label {
+        overflow: hidden;
+        min-width: 0;
+        flex: 1;
+        font-size: var(--rt-text-sm);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__toggle {
+        margin-left: auto;
+    }
+}
+
+/* Плавающий клон строки во время перетаскивания (CDK монтирует его в body). */
+.cdk-drop-list-dragging .rt-table-settings-panel__row:not(.cdk-drag-placeholder) {
+    transition: transform var(--rt-duration-base) cubic-bezier(0, 0, 0.2, 1);
+}

package/src/lib/components/table/sort-header/rt-table-sort-header.component.scss

@@ -0,0 +1,39 @@
+/* rt-table-sort-header — заголовок сортируемой колонки внутри rt-table.
+   ViewEncapsulation.None: классы доступны без scope-attrs, токены --rt-* наследуются. */
+
+.rt-table-sort-header {
+    &__button {
+        display: inline-flex;
+        align-items: center;
+        padding: 0;
+        border: none;
+        background: none;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        gap: var(--rt-space-xs);
+        text-align: inherit;
+
+        &:hover {
+            color: var(--rt-color-text-primary);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--rt-color-action-primary);
+            outline-offset: 2px;
+        }
+    }
+
+    &__icon {
+        flex: 0 0 auto;
+        color: var(--rt-color-text-muted);
+    }
+
+    &__button--active {
+        color: var(--rt-color-text-primary);
+
+        .rt-table-sort-header__icon {
+            color: var(--rt-color-action-primary);
+        }
+    }
+}

package/src/lib/components/tabs/rt-tabs.component.scss

@@ -0,0 +1,219 @@
+.rt-tabs {
+    display: flex;
+    -webkit-tap-highlight-color: transparent;
+
+    &--direction--horizontal {
+        flex-direction: column;
+    }
+
+    &--direction--vertical {
+        flex-direction: row;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+    }
+
+    &__tab-list-wrapper {
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        flex: 1 1 auto;
+        align-items: center;
+    }
+
+    &__tab-list {
+        display: flex;
+        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        margin: 0;
+        -ms-overflow-style: none;
+        overflow-x: auto;
+        scrollbar-width: none;
+        white-space: nowrap;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        &--direction--horizontal {
+            width: 100%;
+            flex-direction: row;
+        }
+
+        &--direction--vertical {
+            flex-direction: column;
+            border-right: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+            border-bottom: 0;
+        }
+
+        &--stretch {
+            justify-content: space-between;
+        }
+    }
+
+    &__rest {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        width: var(--rt-control-height-lg);
+        align-items: center;
+        justify-content: center;
+        background-color: var(--rt-color-bg-surface);
+        color: var(--rt-color-text-muted);
+        cursor: pointer;
+        transition: color var(--rt-duration-fast) linear;
+        visibility: hidden;
+
+        &:hover {
+            color: var(--rt-color-text-primary);
+        }
+
+        &--before {
+            left: 0;
+            border-right: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        }
+
+        &--after {
+            right: 0;
+            border-left: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        }
+
+        &--visible {
+            visibility: visible;
+        }
+    }
+
+    &__controls {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+
+        &--before {
+            padding-right: var(--rt-space-md);
+        }
+
+        &--after {
+            padding-left: var(--rt-space-md);
+        }
+    }
+
+    &__content {
+        display: flex;
+        min-height: 0;
+        flex: 1 1 auto;
+        flex-direction: column;
+        padding-top: var(--rt-space-md);
+        gap: var(--rt-space-md);
+        line-height: var(--rt-leading-relaxed);
+
+        &--scrollable {
+            overflow: auto;
+        }
+    }
+}
+
+.rt-tab-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--rt-space-2) var(--rt-space-3);
+    border: 0;
+    margin: 0;
+    background-color: transparent;
+    color: var(--rt-color-text-muted);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--rt-text-sm);
+    font-weight: var(--rt-font-weight-semibold);
+    gap: var(--rt-space-sm);
+    line-height: var(--rt-leading-none);
+    transition:
+        color var(--rt-duration-fast) linear,
+        background-color var(--rt-duration-fast) linear;
+    white-space: nowrap;
+
+    /* Нижний индикатор активной вкладки — поверх border-bottom полосы. */
+    &:after {
+        position: absolute;
+        bottom: calc(-1 * var(--rt-border-width-thin));
+        height: 2px;
+        background-color: transparent;
+        content: '';
+        inset-inline: 0;
+        pointer-events: none;
+    }
+
+    &:hover:not(.rt-tab-item--disabled, .rt-tab-item--selected) {
+        background-color: var(--rt-color-bg-hover);
+        color: var(--rt-color-text-primary);
+    }
+
+    /* Inset-outline вместо box-shadow ring: полоса вкладок — scroll-контейнер
+       (overflow), который обрезал бы внешнее кольцо. Inset рисуется внутри
+       элемента, не клиппится и переживает forced-colors. */
+    &:focus-visible {
+        outline: 2px solid var(--rt-color-action-primary);
+        outline-offset: -3px;
+    }
+
+    &__title {
+        overflow: hidden;
+        max-width: 200px;
+        text-overflow: ellipsis;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+    }
+
+    &__badge {
+        display: inline-flex;
+        min-width: 18px;
+        height: 18px;
+        align-items: center;
+        justify-content: center;
+        padding: 0 var(--rt-space-1-5);
+        border-radius: var(--rt-radius-full);
+        background-color: var(--rt-color-bg-surface-subtle);
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-medium);
+        line-height: var(--rt-leading-none);
+    }
+
+    &--selected {
+        color: var(--rt-color-action-primary);
+        cursor: default;
+
+        &:after {
+            background-color: var(--rt-color-action-primary);
+        }
+
+        .rt-tab-item__badge {
+            background-color: var(--rt-color-action-primary-soft);
+            color: var(--rt-color-action-primary);
+        }
+    }
+
+    &--invalid {
+        color: var(--rt-color-state-danger);
+
+        &:after {
+            background-color: var(--rt-color-state-danger);
+        }
+    }
+
+    &--disabled {
+        color: var(--rt-color-text-disabled);
+        cursor: not-allowed;
+    }
+
+    &--stretch {
+        max-width: 100%;
+        flex: 1 1 auto;
+    }
+}