@koobiq/components 16.0.0-beta.1

package/tabs/_tabs-common.scss

@@ -0,0 +1,197 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+%base-focus-frame {
+    display: block;
+    content: "";
+
+    position: absolute;
+
+    top: 0;
+    right: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+    bottom: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+    left: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+}
+
+%horizontal-focus {
+    &:after {
+        border: {
+            width: calc(var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
+            style: solid;
+            top: {
+                left-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+                right-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+            }
+        };
+
+        border-bottom-color: transparent;
+    }
+}
+
+
+@mixin tab-label {
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    height: var(--kbq-tabs-size-height, map.get($tokens, tabs-size-height));
+
+    text-align: center;
+    white-space: nowrap;
+
+    cursor: pointer;
+
+    padding: {
+        right: var(--kbq-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
+        left: var(--kbq-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
+    }
+
+    outline: none;
+
+    &.kbq-active {
+        cursor: default;
+
+        &:before {
+            display: block;
+            content: "";
+
+            position: absolute;
+        }
+    }
+
+    &.cdk-keyboard-focused {
+        z-index: 1;
+
+        &:after {
+            @extend %base-focus-frame;
+        }
+    }
+
+    &:first-child.cdk-keyboard-focused:after {
+        left: 0;
+    }
+
+    &:last-child.cdk-keyboard-focused:after {
+        right: 0;
+    }
+
+    &[disabled] {
+        pointer-events: none;
+    }
+
+    & .kbq-tab-label__content > .kbq-icon {
+        &.kbq-icon_left {
+            margin-right: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+
+        &.kbq-icon_right {
+            margin-left: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+    }
+
+    &.kbq-tab-label_horizontal {
+        border-bottom: {
+            width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+            style: solid;
+        }
+
+        &.kbq-active:before {
+            bottom: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+            left: 0;
+            right: 0;
+
+            height: var(--kbq-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height)});
+        }
+
+        &.cdk-keyboard-focused:after {
+            @extend %horizontal-focus;
+        }
+    }
+
+    &.kbq-tab-label_vertical {
+        justify-content: flex-start;
+
+        &.kbq-active:before {
+            top: 0;
+            bottom: 0;
+            left: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+
+            width: var(--kbq-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height) + 1px});
+        }
+
+        &.cdk-keyboard-focused:after {
+            right: 0;
+            left: 0;
+
+            border: {
+                width: calc(var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
+                style: solid;
+            }
+        }
+
+        & .kbq-tab-label__content {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
+@mixin tab-label-old {
+    border-bottom: {
+        width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        style: solid;
+    }
+
+    border: {
+        width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+        style: solid;
+
+        top: {
+            left-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+            right-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
+        }
+
+        left: none;
+        left-color: transparent;
+        right: none;
+        right-color: transparent;
+    }
+
+    &.kbq-active {
+        border: {
+            width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+            style: solid;
+        }
+
+        padding-right: calc(
+            var(--kbq-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
+            var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
+        );
+
+        padding-left: calc(
+            var(--kbq-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
+            var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
+        );
+
+        &.cdk-keyboard-focused:after {
+            right: calc(-2 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+            left: calc(-2 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
+        }
+    }
+
+    &.cdk-keyboard-focused:after {
+        @extend %horizontal-focus;
+
+        top: -1px
+    }
+}

package/tabs/_tabs-theme.scss

@@ -0,0 +1,240 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+//noinspection ALL
+@mixin kbq-tabs-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $states: map.get($theme, states);
+
+    $tabs: map.get(map.get($theme, components), tabs);
+    $vertical-tabs: map.get(map.get($theme, components), vertical-tabs);
+
+    .kbq-tab-group_vertical .kbq-tab-header__content {
+        border-right-color: map.get($foreground, divider);
+    }
+
+    .kbq-tab-header__pagination {
+        border-bottom-color: map.get($tabs, border);
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            & .kbq-icon {
+                color: map.get($foreground, text);
+            }
+        }
+
+        &:active {
+            background: map.get($foreground, divider);
+        }
+
+        &.kbq-tab-header__pagination_before {
+            border-right-color: map.get($foreground, divider);
+        }
+
+        &.kbq-tab-header__pagination_after {
+            border-left-color: map.get($foreground, divider);
+        }
+
+        &[disabled],
+        &.kbq-disabled {
+            pointer-events: none;
+
+            & .kbq-icon {
+                color: map.get($foreground, text-disabled);
+            }
+        }
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    .kbq-tab-label_old {
+        color: map.get($foreground, text);
+
+        border-top-color: transparent;
+        border-bottom-color: map.get($tabs, border);
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+            border-bottom-color: transparent;
+        }
+
+        &.kbq-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &.kbq-active {
+            border: {
+                color: map.get($tabs, border);
+                bottom-color: transparent;
+            }
+        }
+
+        &[disabled],
+        &.kbq-disabled {
+            cursor: default;
+
+            color: map.get($tabs, state-disabled-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+
+    .kbq-tab-link,
+    .kbq-tab-label_horizontal {
+        color: map.get($tabs, state-normal-text);
+
+        & .kbq-icon {
+            color: map.get($tabs, state-normal-icon);
+        }
+
+        border-bottom-color: map.get($tabs, border);
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+            border-bottom-color: transparent;
+        }
+
+        &.kbq-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &.kbq-active {
+            border-bottom-color: transparent;
+
+            color: map.get($tabs, state-normal-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-normal-icon);
+            }
+
+            &:before {
+                background-color: map.get($tabs, state-active-marker);
+            }
+        }
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &[disabled],
+        &.kbq-disabled {
+            cursor: default;
+
+            color: map.get($tabs, state-disabled-text);
+
+            &:before {
+                opacity: map.get($tabs, state-disabled-marker-opacity);
+            }
+
+            & .kbq-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+
+    .kbq-tab-label_vertical {
+        background: map.get($vertical-tabs, state-normal-background);
+        color: map.get($tabs, state-normal-text);
+
+        & .kbq-icon {
+            color: map.get($tabs, state-normal-icon);
+        }
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.kbq-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &:hover {
+            background: map.get($vertical-tabs, state-hover-background);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &.kbq-active {
+            color: map.get($tabs, state-normal-text);
+            background: map.get($states, selected-color);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-normal-icon);
+            }
+
+            &:before {
+                background-color: map.get($tabs, state-active-marker);
+            }
+
+            &:hover {
+                background: map.get($vertical-tabs, state-hover-selected-background);
+
+                & .kbq-icon {
+                    color: map.get($tabs, state-hover-icon);
+                }
+            }
+        }
+
+        &[disabled],
+        &.kbq-disabled {
+            cursor: default;
+            background: map.get($vertical-tabs, state-normal-background);
+
+            color: map.get($tabs, state-disabled-text);
+
+            & .kbq-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+    /* stylelint-enable no-descending-specificity */
+}
+
+@mixin kbq-tabs-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-tab-label,
+    .kbq-tab-label_old,
+    .kbq-tab-link {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tabs-font-default));
+    }
+}

package/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/tabs/paginated-tab-header.d.ts

@@ -0,0 +1,179 @@
+import { FocusableOption } from '@angular/cdk/a11y';
+import { Direction, Directionality } from '@angular/cdk/bidi';
+import { Platform } from '@angular/cdk/platform';
+import { ViewportRuler } from '@angular/cdk/scrolling';
+import { ChangeDetectorRef, ElementRef, NgZone, QueryList, EventEmitter, AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
+ * will scroll the header towards the end of the tabs list and 'before' will scroll towards the
+ * beginning of the list.
+ */
+export type ScrollDirection = 'after' | 'before';
+/** Item inside a paginated tab header. */
+export type KbqPaginatedTabHeaderItem = FocusableOption & {
+    elementRef: ElementRef;
+};
+/**
+ * Base class for a tab header that supported pagination.
+ * @docs-private
+ */
+export declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
+    protected elementRef: ElementRef<HTMLElement>;
+    protected changeDetectorRef: ChangeDetectorRef;
+    private viewportRuler;
+    private ngZone;
+    private platform;
+    private dir;
+    animationMode?: string | undefined;
+    /** The index of the active tab. */
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    private _selectedIndex;
+    /** Tracks which element has focus; used for keyboard navigation */
+    get focusIndex(): number;
+    /** When the focus index is set, we must manually send focus to the correct label */
+    set focusIndex(value: number);
+    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
+    get scrollDistance(): number;
+    set scrollDistance(v: number);
+    /** The distance in pixels that the tab labels should be translated to the left. */
+    private _scrollDistance;
+    abstract items: QueryList<KbqPaginatedTabHeaderItem>;
+    abstract tabListContainer: ElementRef<HTMLElement>;
+    abstract tabList: ElementRef<HTMLElement>;
+    abstract nextPaginator: ElementRef<HTMLElement>;
+    abstract previousPaginator: ElementRef<HTMLElement>;
+    /** Event emitted when the option is selected. */
+    readonly selectFocusedIndex: EventEmitter<number>;
+    /** Event emitted when a label is focused. */
+    readonly indexFocused: EventEmitter<number>;
+    /** Whether the controls for pagination should be displayed */
+    showPaginationControls: boolean;
+    /** Whether the tab list can be scrolled more towards the end of the tab label list. */
+    disableScrollAfter: boolean;
+    /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
+    disableScrollBefore: boolean;
+    /**
+     * Whether pagination should be disabled. This can be used to avoid unnecessary
+     * layout recalculations if it's known that pagination won't be required.
+     */
+    disablePagination: boolean;
+    /** Emits when the component is destroyed. */
+    protected readonly destroyed: Subject<void>;
+    protected vertical: boolean;
+    /**
+     * The number of tab labels that are displayed on the header. When this changes, the header
+     * should re-evaluate the scroll position.
+     */
+    private tabLabelCount;
+    /** Whether the scroll distance has changed and should be applied after the view is checked. */
+    private scrollDistanceChanged;
+    /** Used to manage focus between the tabs. */
+    private keyManager;
+    /** Cached text content of the header. */
+    private currentTextContent;
+    /** Stream that will stop the automated scrolling. */
+    private stopScrolling;
+    /** Whether the header should scroll to the selected index after the view has been checked. */
+    private selectedIndexChanged;
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string | undefined);
+    /** Called when the user has selected an item via the keyboard. */
+    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
+    ngOnDestroy(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Callback for when the MutationObserver detects that the content has changed.
+     */
+    onContentChanges(): void;
+    /**
+     * Updates the view whether pagination should be enabled or not.
+     *
+     * WARNING: Calling this method can be very costly in terms of performance. It should be called
+     * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
+     * page.
+     */
+    updatePagination(): void;
+    /**
+     * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
+     * providing a valid index and return true.
+     */
+    isValidIndex(index: number): boolean;
+    /**
+     * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
+     * scrolling is enabled.
+     */
+    setTabFocus(tabIndex: number): void;
+    /** The layout direction of the containing app. */
+    getLayoutDirection(): Direction;
+    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
+    updateTabScrollPosition(): void;
+    /**
+     * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
+     * the end of the list, respectively). The distance to scroll is computed to be a third of the
+     * length of the tab list view window.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    scrollHeader(direction: ScrollDirection): {
+        maxScrollDistance: number;
+        distance: number;
+    };
+    /** Handles click events on the pagination arrows. */
+    handlePaginatorClick(direction: ScrollDirection): void;
+    /**
+     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    scrollToLabel(labelIndex: number): void;
+    /**
+     * Evaluate whether the pagination controls should be displayed. If the scroll width of the
+     * tab list is wider than the size of the header container, then the pagination controls should
+     * be shown.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    checkPaginationEnabled(): void;
+    /**
+     * Evaluate whether the before and after controls should be enabled or disabled.
+     * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
+     * before button. If the header is at the end of the list (scroll distance is equal to the
+     * maximum distance we can scroll), then disable the after button.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    checkScrollingControls(): void;
+    /**
+     * Determines what is the maximum length in pixels that can be set for the scroll distance. This
+     * is equal to the difference in width between the tab list container and tab header container.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    getMaxScrollDistance(): number;
+    /** Stops the currently-running paginator interval.  */
+    stopInterval(): void;
+    /**
+     * Handles the user pressing down on one of the paginators.
+     * Starts scrolling the header after a certain amount of time.
+     * @param direction In which direction the paginator should be scrolled.
+     */
+    handlePaginatorPress(direction: ScrollDirection, mouseEvent?: MouseEvent): void;
+    protected abstract itemSelected(event: KeyboardEvent): void;
+    /**
+     * Scrolls the header to a given position.
+     * @param position Position to which to scroll.
+     * @returns Information on the current scroll distance and the maximum.
+     */
+    private scrollTo;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; }, {}, never, never, false, never>;
+}

package/tabs/public-api.d.ts

@@ -0,0 +1,10 @@
+export * from './tabs.module';
+export * from './tab-group.component';
+export { KbqTabBody, KbqTabBodyOriginState, KbqTabBodyPositionState, KbqTabBodyPortal } from './tab-body.component';
+export { KbqTabHeader, ScrollDirection } from './tab-header.component';
+export { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
+export { KbqTab } from './tab.component';
+export { KbqTabLabel } from './tab-label.directive';
+export { KbqTabNav, KbqTabLink } from './tab-nav-bar/index';
+export { KbqTabContent } from './tab-content.directive';
+export * from './tabs-animations';