@rt-tools/ui-kit-v2 0.1.0

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

@@ -0,0 +1,208 @@
+/* rt-aside — styled frame side-sheet (mirror rt-dialog с заменой токенов).
+   ViewEncapsulation.None — селекторы префиксованы `.rt-aside`.
+   Видимость / backdrop / slide-in анимацию обеспечивает CDK Overlay через RtAsideService. */
+
+:host {
+    display: contents;
+}
+
+/* Size tokens — sm/md/lg (aside уже модалки чем rt-dialog).
+   Backdrop / animation duration — component-local, переопределяемые через CSS-properties. */
+:root {
+    --rt-aside-width-sm: 400px;
+    --rt-aside-width-md: 540px;
+    --rt-aside-width-lg: 720px;
+    --rt-aside-animation-duration: 200ms;
+    --rt-aside-backdrop-bg: rgb(0 0 0 / 45%);
+    --rt-aside-backdrop-blur: 5px;
+
+    /* Инсет панели: шапка, содержимое и футер отбиты от края одним и тем же
+       значением, поэтому поля во всех панелях одной ширины. */
+    --rt-aside-inset: var(--rt-space-lg);
+
+    /* Ритм между корневыми блоками содержимого. */
+    --rt-aside-content-gap: var(--rt-space-md);
+}
+
+.rt-aside {
+    display: flex;
+    width: var(--rt-aside-width, var(--rt-aside-width-md));
+
+    /* rt-aside — flex-child cdk-overlay-pane. Default `min-width: auto` у flex-item
+       заставляет ширину расти до max-content вложенного контента (длинный
+       заголовок без переносов раздул бы panel за пределы viewport). 0 — let
+       cross-axis размера контейнера ограничивать, а ellipsis в title клипает текст. */
+    min-width: 0;
+    max-width: 100%;
+    height: 100%;
+    flex-direction: column;
+    padding: 0;
+    border: none;
+    background: var(--rt-color-bg-surface);
+    color: var(--rt-color-text-primary);
+
+    /* Header / footer всегда видны, контентная часть скроллится при overflow.
+       Селекторы по тегам — `<rt-aside-header>` / `<rt-aside-footer>` это
+       Angular host-элементы, у которых нет класса `.rt-aside-header`
+       (этот класс висит на вложенном `<header>` / `<footer>` внутри них).
+       `min-height: 0` обязателен — без него flex item не сможет shrink ниже
+       intrinsic content size и overflow-y не сработает. */
+    & > rt-aside-header,
+    & > rt-aside-footer {
+        /* min-width: 0 пробрасывается флекс-детям вниз — без него заголовок с
+           неразрывным длинным текстом раздувает header/footer шире
+           cross-axis-размера контейнера и выходит за viewport. */
+        min-width: 0;
+        flex-shrink: 0;
+    }
+
+    /* Единственная зона содержимого: она держит инсет панели и она же
+       прокручивается. Отступы живут здесь, а не в потребителях — иначе каждая
+       панель помнит про них сама, и поля получают разную ширину. */
+    &__content {
+        display: flex;
+        min-width: 0;
+        min-height: 0;
+        flex: 1 1 auto;
+        flex-direction: column;
+        padding: var(--rt-aside-inset);
+        gap: var(--rt-aside-content-gap);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    &--size--sm {
+        width: var(--rt-aside-width, var(--rt-aside-width-sm));
+    }
+
+    &--size--md {
+        width: var(--rt-aside-width, var(--rt-aside-width-md));
+    }
+
+    &--size--lg {
+        width: var(--rt-aside-width, var(--rt-aside-width-lg));
+    }
+
+    /* Контент — rt-tabs: скроллером становится контент активной вкладки, а не
+       контентная зона асайда, чтобы полоса вкладок оставалась прибитой. */
+    &--content--tabs {
+        /* Контентная зона больше не скроллер, но её горизонтальный инсет СОХРАНЯЕМ:
+           прямой контент вне rt-tabs (скелетоны загрузки, rt-message ошибки) должен
+           отступать от краёв как обычно. Снимаем только нижний отступ. */
+        .rt-aside__content {
+            overflow: hidden;
+            padding-block-end: 0;
+        }
+
+        /* rt-tabs растягивается на всю ширину панели (гасит инсет контентной зоны),
+           а инсет возвращается ВНУТРЬ полосы и скролл-контейнера. Так overflow
+           скролл-контейнера не режет focus-ring инпутов, прижатых к краю, а полоса
+           и контент остаются в коридоре --rt-aside-inset. */
+        rt-tabs {
+            min-height: 0;
+            flex: 1 1 auto;
+            margin-inline: calc(-1 * var(--rt-aside-inset));
+        }
+
+        .rt-tabs__header {
+            padding-inline: var(--rt-aside-inset);
+        }
+
+        .rt-tabs__content {
+            /* Нижний отступ внутри скроллера — последний элемент не докручивается
+               вплотную к футеру. */
+            padding-bottom: var(--rt-aside-inset);
+            padding-inline: var(--rt-aside-inset);
+        }
+    }
+}
+
+/* CDK Overlay backdrop + panel классы, выставляемые RtAsideService.
+   Live в global scope — overlay-container — sibling от <body>,
+   encapsulation не работает. */
+
+/* Двойной селектор `.cdk-overlay-backdrop.rt-aside-backdrop` нужен для specificity:
+   CDK Overlay добавляет `.cdk-overlay-backdrop-showing { opacity: 1 }` сразу при attach;
+   при persistent overlay (rt-container auto-attach) backdrop должен оставаться скрытым
+   пока aside не открыт. Два класса (.cdk-overlay-backdrop + .rt-aside-backdrop) — выше
+   specificity чем одиночный (.cdk-overlay-backdrop-showing), поэтому наш opacity:0
+   побеждает. */
+.cdk-overlay-backdrop.rt-aside-backdrop {
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
+    -webkit-backdrop-filter: blur(var(--rt-aside-backdrop-blur));
+    backdrop-filter: blur(var(--rt-aside-backdrop-blur));
+    background: var(--rt-aside-backdrop-bg);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--rt-aside-animation-duration) ease;
+
+    &.rt-aside-backdrop--visible {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+
+.rt-aside-overlay {
+    height: 100dvh;
+    transition: transform var(--rt-aside-animation-duration) ease;
+}
+
+/* Закрытая панель нажатий не ловит. На узком экране она шириной во весь вьюпорт,
+   и пока её сдвиг за край экрана не досчитан, она перекрывает страницу целиком:
+   выглядит это нормально, а нажатия уходят в пустоту. Селектор из двух классов —
+   чтобы правило не зависело от порядка, в котором браузер получил стили панели и
+   стили контейнера. */
+.rt-aside-overlay:not(.rt-aside-overlay--open) {
+    pointer-events: none;
+}
+
+/* Стартовое положение за краем экрана не анимируется: переход из него начинается,
+   как только вьюпорт задаёт панели ширину, и всю анимацию держит панель на месте. */
+.rt-aside-overlay.rt-aside-overlay--entering {
+    transition: none;
+}
+
+/* Slide-in / slide-out states — переключаются сервисом через Renderer2 на host.
+   --entering: initial off-screen position; --open: in place; --leaving: off-screen exit. */
+.rt-aside-overlay--position-right.rt-aside-overlay--entering {
+    transform: translateX(100%);
+}
+
+.rt-aside-overlay--position-left.rt-aside-overlay--entering {
+    transform: translateX(-100%);
+}
+
+.rt-aside-overlay--position-right.rt-aside-overlay--open,
+.rt-aside-overlay--position-left.rt-aside-overlay--open {
+    transform: translateX(0);
+}
+
+.rt-aside-overlay--position-right.rt-aside-overlay--leaving {
+    transform: translateX(100%);
+}
+
+.rt-aside-overlay--position-left.rt-aside-overlay--leaving {
+    transform: translateX(-100%);
+}
+
+@media (width <= 768px) {
+    .rt-aside-overlay {
+        overflow: hidden;
+        width: 100dvw;
+        max-width: 100dvw;
+    }
+
+    .rt-aside,
+    .rt-aside--size--sm,
+    .rt-aside--size--md,
+    .rt-aside--size--lg {
+        width: 100dvw;
+        max-width: 100dvw;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rt-aside-overlay {
+        transition: none;
+    }
+}

package/src/lib/components/aside/unsaved-dialog/rt-aside-unsaved-dialog.component.scss

@@ -0,0 +1,39 @@
+/* rt-aside-unsaved-dialog — окно о несохранённых правках при закрытии панели.
+   ViewEncapsulation.None — селекторы префиксованы `.rt-aside-unsaved-dialog`.
+   Рамку (фон/радиус/тень) даёт rt-dialog; здесь — только раскладка контента. */
+
+.rt-aside-unsaved-dialog {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    padding: var(--rt-space-xl);
+    gap: var(--rt-space-lg);
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-sm);
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-md);
+        font-weight: var(--rt-font-weight-bold);
+    }
+
+    &__message {
+        margin: 0;
+        color: var(--rt-color-text-secondary);
+        font-size: var(--rt-text-sm);
+    }
+
+    /* Три кнопки идут в одну строку, а когда она их не вмещает — переносятся и
+       выравниваются по правому краю, сохраняя порядок. */
+    &__footer {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: var(--rt-space-sm);
+    }
+}

package/src/lib/components/aside-section/rt-aside-section.component.scss

@@ -0,0 +1,30 @@
+/* rt-aside-section — смысловая секция асайда (ViewEncapsulation.None).
+   Селектор bare `.rt-aside-section` (класс на host) — :host в None light-DOM не матчит.
+   Соседние секции разделяются верхней границей через adjacent-sibling правило. */
+
+.rt-aside-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rt-space-md);
+
+    /* Разделитель отбит от соседей одинаково: сверху его отбивает зазор зоны
+       содержимого, снизу — тот же токен. */
+    & + & {
+        padding-top: var(--rt-aside-content-gap);
+        border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+    }
+
+    &__heading {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-md);
+        font-weight: var(--rt-font-weight-semibold);
+        line-height: var(--rt-leading-snug);
+    }
+
+    &__body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-md);
+    }
+}

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

@@ -0,0 +1,143 @@
+.rt-autocomplete {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    /* Поле-контейнер: рамка/фон/паддинги/flex — как у rt-input, чтобы префикс-
+       иконка и крестик были flex-child'ами с одинаковыми (через gap) отступами. */
+    &__field {
+        display: inline-flex;
+        width: 100%;
+        min-height: var(--rt-input-height);
+        box-sizing: border-box;
+        align-items: center;
+        padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
+        border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+        border-radius: var(--rt-input-radius);
+        background-color: var(--rt-input-color-bg);
+        color: var(--rt-input-color-text);
+        cursor: text;
+        font-size: var(--rt-input-font-size);
+        gap: var(--rt-space-sm);
+        line-height: var(--rt-input-line-height);
+        transition: var(--rt-input-transition);
+
+        &:focus-within {
+            border-color: var(--rt-input-color-border-focus);
+            box-shadow: var(--rt-input-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: var(--rt-input-focus-outline-offset);
+        }
+    }
+
+    /* bordered=false: снимаем только resting-рамку; --open/--invalid ниже по
+       source-order перекрывают её своей рамкой. */
+    &--borderless &__field {
+        border-color: transparent;
+    }
+
+    &--open &__field {
+        border-color: var(--rt-input-color-border-focus);
+    }
+
+    &--invalid &__field {
+        border-color: var(--rt-input-color-border-error);
+
+        &:focus-within {
+            box-shadow: var(--rt-input-focus-shadow-error);
+        }
+    }
+
+    &--disabled &__field {
+        cursor: not-allowed;
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    &--size--sm &__field {
+        min-height: var(--rt-input-height-sm);
+    }
+
+    &--size--lg &__field {
+        min-height: var(--rt-input-height-lg);
+    }
+
+    /* Read-only: поле-контейнер скрыт (остаётся в DOM ради viewChild.required
+       popover'а), значение показывает плоский текст __readonly. */
+    &--readonly &__field {
+        display: none;
+    }
+
+    &__readonly {
+        display: inline-flex;
+        min-height: var(--rt-input-height);
+        align-items: center;
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+
+    &__input {
+        min-width: 0;
+        flex: 1 1 auto;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+
+        /* Наследуем шрифт от __field, иначе нативный <input> берёт UA-шрифт. */
+        font: inherit;
+        outline: none;
+
+        &::placeholder {
+            color: var(--rt-input-color-text-placeholder);
+            opacity: 1;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__icon-left,
+    &__clear {
+        flex-shrink: 0;
+    }
+
+    /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK.
+       width:100% — заполнить overlay-pane (CDK ставит pane = ширине trigger'а
+       через rtPopoverWidth="trigger"; flex-pane сам не растягивает контент). */
+    &__panel {
+        width: 100%;
+        max-height: var(--rt-input-panel-max-height);
+        box-sizing: border-box;
+        padding: var(--rt-space-2xs) 0;
+        border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-input-radius);
+        margin: 0;
+        background-color: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-shadow-md);
+        list-style: none;
+        overflow-y: auto;
+    }
+
+    &__option {
+        padding: var(--rt-space-sm) var(--rt-space-md);
+        color: var(--rt-color-text-primary);
+        cursor: pointer;
+        font-size: var(--rt-input-font-size);
+
+        &:hover,
+        &--active {
+            background-color: var(--rt-color-bg-hover);
+        }
+    }
+
+    &__empty {
+        padding: var(--rt-space-sm) var(--rt-space-md);
+        color: var(--rt-input-color-text-placeholder);
+        font-style: italic;
+    }
+}

package/src/lib/components/bar-list/rt-bar-list.component.scss

@@ -0,0 +1,95 @@
+/* rt-bar-list — топ-N со шкалой доли в common/ui (Emulated encapsulation; :host обязательно). */
+
+:host {
+    display: block;
+
+    .rt-bar-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-2);
+
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__rows {
+            display: flex;
+            flex-direction: column;
+            padding: 0;
+            margin: 0;
+            gap: var(--rt-space-5);
+            list-style: none;
+        }
+
+        &__row {
+            display: flex;
+            min-width: 0;
+            flex-direction: column;
+            gap: var(--rt-space-1-5);
+        }
+
+        &__row-head {
+            display: flex;
+            align-items: baseline;
+            justify-content: space-between;
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            gap: var(--rt-space-3);
+            line-height: var(--rt-leading-tight);
+        }
+
+        &__row-title {
+            overflow: hidden;
+            color: var(--rt-color-text-primary);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__row-value {
+            flex: 0 0 auto;
+            color: var(--rt-color-text-primary);
+        }
+
+        &__row-meta {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-none);
+        }
+
+        &__track {
+            display: block;
+            height: 6px;
+            border-radius: var(--rt-radius-sm);
+            background: var(--rt-color-bg-surface-subtle);
+        }
+
+        &__fill {
+            display: block;
+            min-width: 2px;
+            height: 100%;
+            border-radius: var(--rt-radius-sm);
+            background: var(--rt-color-action-primary);
+        }
+
+        /* Пустое состояние центрируется в свободном месте панели: список
+           короче панели, и текст, прижатый к заголовку, читался бы как сбой. */
+        &__empty {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-lg) 0;
+            gap: var(--rt-space-2-5);
+        }
+
+        &__empty-text {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+    }
+}

package/src/lib/components/bottom-sheet/rt-bottom-sheet.component.scss

@@ -0,0 +1,71 @@
+:host {
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+    pointer-events: none;
+
+    .rt-bottom-sheet {
+        &__backdrop {
+            position: absolute;
+            padding: 0;
+            border: none;
+            background: var(--rt-overlay-black-50);
+            cursor: pointer;
+            inset: 0;
+            opacity: 0;
+            transition: opacity var(--rt-duration-base) ease;
+        }
+
+        &__panel {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            max-height: 80vh;
+            flex-direction: column;
+            border-radius: var(--rt-radius-2xl) var(--rt-radius-2xl) 0 0;
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-shadow-card-soft);
+            transform: translateY(100%);
+            transition: transform var(--rt-duration-base) ease;
+
+            &--dragging {
+                transition: none;
+            }
+        }
+
+        &__handle {
+            width: 40px;
+            height: 4px;
+            align-self: center;
+            border-radius: var(--rt-radius-xs);
+            margin: var(--rt-space-3) 0;
+            background: var(--rt-color-border-default);
+            cursor: grab;
+            touch-action: none;
+        }
+
+        &__header {
+            display: flex;
+            justify-content: center;
+            padding: 0 var(--rt-space-5) var(--rt-space-3);
+            color: var(--rt-color-text-primary);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+    }
+
+    &.rt-bottom-sheet--open {
+        pointer-events: auto;
+
+        .rt-bottom-sheet {
+            &__backdrop {
+                opacity: 1;
+            }
+
+            &__panel {
+                transform: translateY(0);
+            }
+        }
+    }
+}