@koobiq/components 16.0.0-beta.1

package/sidepanel/sidepanel.scss

@@ -0,0 +1,203 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-sidepanel-container_top,
+.kbq-sidepanel-container_bottom {
+    flex-direction: column;
+    height: 33%;
+    min-height: 400px;
+    width: 100%;
+    left: 0;
+
+    .kbq-sidepanel-indent {
+        height: 16px;
+        width: 100%;
+    }
+}
+
+.kbq-sidepanel-container {
+    outline: none;
+    display: flex;
+    flex: 1;
+    position: fixed;
+    min-height: 0;
+
+    .flex {
+        min-height: 0;
+    }
+
+    &.kbq-sidepanel-container_left,
+    &.kbq-sidepanel-container_right {
+        height: 100%;
+        top: 0;
+
+        &.kbq-sidepanel_small {
+            width: var(--kbq-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
+            max-width: var(--kbq-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
+        }
+
+        &.kbq-sidepanel_medium {
+            width: var(--kbq-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
+            max-width: var(--kbq-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
+        }
+
+        &.kbq-sidepanel_large {
+            width: var(--kbq-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
+            max-width: var(--kbq-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
+        }
+
+        .kbq-sidepanel-indent {
+            width: 16px;
+            height: 100%;
+        }
+    }
+}
+
+.kbq-sidepanel-container_right {
+    right: 0;
+    transform: translateX(100%);
+
+    .kbq-sidepanel-wrapper {
+        flex-direction: row;
+    }
+}
+
+.kbq-sidepanel-container_left {
+    left: 0;
+    transform: translateX(-100%);
+
+    .kbq-sidepanel-wrapper {
+        flex-direction: row-reverse;
+    }
+}
+
+.kbq-sidepanel-container_top {
+    top: 0;
+    transform: translateY(-100%);
+
+    .kbq-sidepanel-wrapper {
+        flex-direction: column-reverse;
+    }
+}
+
+.kbq-sidepanel-container_bottom {
+    bottom: 0;
+    transform: translateY(100%);
+
+    .kbq-sidepanel-wrapper {
+        flex-direction: column;
+    }
+}
+
+/* stylelint-disable */
+.kbq-sidepanel-wrapper {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+}
+
+.kbq-sidepanel-indent {
+    display: flex;
+    flex: 0 0 auto;
+
+    .kbq-sidepanel-close {
+        width: 100%;
+        height: 100%;
+
+        @include common.kbq-button-reset();
+        background: transparent;
+        padding: 0;
+    }
+}
+/* stylelint-enable */
+
+.kbq-sidepanel-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    width: 100%;
+}
+
+.kbq-sidepanel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    flex-flow: row nowrap;
+    flex: 0 0 auto;
+
+    height: var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height));
+
+    .kbq-sidepanel-close {
+        @include common.kbq-button-reset();
+
+        margin-right: 2px;
+
+        height: calc(
+            var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
+            (var(--kbq-size-border-width, map.get($tokens, size-border-width) * 2))
+        );
+        width: calc(
+            var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
+            (var(--kbq-size-border-width, map.get($tokens, size-border-width) * 2))
+        );
+    }
+}
+
+.kbq-sidepanel-title {
+    flex: 1;
+
+    @include common.kbq-truncate-line();
+
+    padding: var(--kbq-sidepanel-header-size-padding, map.get($tokens, sidepanel-header-size-padding));
+}
+
+.kbq-sidepanel-body {
+    overflow-y: auto;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.kbq-sidepanel-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    flex-flow: row nowrap;
+    flex: 0 0 auto;
+
+    height: var(--kbq-sidepanel-footer-size-height, map.get($tokens, sidepanel-footer-size-height));
+
+    padding: var(--kbq-sidepanel-footer-size-padding, map.get($tokens, sidepanel-footer-size-padding));
+
+    .kbq-sidepanel-actions {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        flex: 1;
+
+        &[align="left"] {
+            justify-content: start;
+        }
+
+        &[align="right"] {
+            justify-content: flex-end;
+        }
+    }
+
+    button + button {
+        margin-left: 16px;
+    }
+}

package/sidepanel/sidepanel.service.d.ts

@@ -0,0 +1,57 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentType } from '@angular/cdk/portal';
+import { InjectionToken, Injector, OnDestroy, TemplateRef } from '@angular/core';
+import { KbqSidepanelConfig } from './sidepanel-config';
+import { KbqSidepanelRef } from './sidepanel-ref';
+import * as i0 from "@angular/core";
+/** Injection token that can be used to specify default sidepanel options. */
+export declare const KBQ_SIDEPANEL_DEFAULT_OPTIONS: InjectionToken<KbqSidepanelConfig<any>>;
+export declare class KbqSidepanelService implements OnDestroy {
+    private overlay;
+    private injector;
+    private defaultOptions;
+    private parentSidepanelService;
+    private openedSidepanelsAtThisLevel;
+    /** Keeps track of the currently-open sidepanels. */
+    get openedSidepanels(): KbqSidepanelRef[];
+    constructor(overlay: Overlay, injector: Injector, defaultOptions: KbqSidepanelConfig, parentSidepanelService: KbqSidepanelService);
+    ngOnDestroy(): void;
+    open<T, D = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config?: KbqSidepanelConfig<D>): KbqSidepanelRef<T>;
+    /**
+     * Closes all of the currently-open sidepanels.
+     */
+    closeAll(): void;
+    /**
+     * Finds an open sidepanel by its id.
+     * @param id ID to use when looking up the sidepanel.
+     */
+    getSidepanelById(id: string): KbqSidepanelRef | undefined;
+    /**
+     * Attaches the sidepanel container component to the overlay.
+     */
+    private attachContainer;
+    /**
+     * Creates a custom injector to be used inside the sidepanel. This allows a component loaded inside
+     * of a sidepanel to close itself and, optionally, to return a value.
+     * @param config Config object that is used to construct the sidepanel.
+     * @param sidepanelRef Reference to the sidepanel.
+     * @param sidepanelContainer Sidepanel container element that wraps all of the contents.
+     * @returns The custom injector that can be used inside the sidepanel.
+     */
+    private createInjector;
+    /**
+     * Creates a new overlay and places it in the correct location.
+     * @param config The user-specified sidepanel config.
+     */
+    private createOverlay;
+    private closeSidepanels;
+    private getBackdropClass;
+    private getOpenedSidepanelsWithSamePosition;
+    /**
+     * Removes a sidepanel from the array of open sidepanels.
+     * @param sidepanelRef Sidepanel to be removed.
+     */
+    private removeOpenSidepanel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelService, [null, null, { optional: true; }, { optional: true; skipSelf: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqSidepanelService>;
+}

package/splitter/_splitter-theme.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+
+
+@mixin kbq-splitter-theme($theme) {
+    $background: map.get($theme, background);
+
+    .kbq-gutter {
+        cursor: col-resize;
+
+        &:hover,
+        &.kbq-gutter_dragged {
+            background-color: map.get($background, background-disabled);
+        }
+
+        &.kbq-gutter_vertical {
+            cursor: row-resize;
+        }
+
+        &[disabled] {
+            background-color: kbq-color($background, overlay-disabled);
+
+            cursor: default;
+        }
+    }
+
+    .kbq-gutter-ghost {
+        background: kbq-color($background, overlay-disabled);
+    }
+}

package/splitter/index.d.ts

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

package/splitter/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './splitter.module';
+export * from './splitter.component';

package/splitter/splitter.component.d.ts

@@ -0,0 +1,130 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+interface IArea {
+    area: KbqSplitterAreaDirective;
+    index: number;
+    order: number;
+    initialSize: number;
+}
+interface IPoint {
+    x: number;
+    y: number;
+}
+export declare enum Direction {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export declare class KbqGutterDirective implements OnInit {
+    private elementRef;
+    private renderer;
+    get direction(): Direction;
+    set direction(direction: Direction);
+    private _direction;
+    get order(): number;
+    set order(order: number);
+    private _order;
+    get size(): number;
+    set size(size: number);
+    private _size;
+    get isVertical(): boolean;
+    dragged: boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    getPosition(): IPoint;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqGutterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqGutterDirective, "kbq-gutter", never, { "direction": { "alias": "direction"; "required": false; }; "order": { "alias": "order"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare class KbqGutterGhostDirective {
+    private elementRef;
+    private renderer;
+    visible: boolean;
+    get x(): number;
+    set x(x: number);
+    private _x;
+    get y(): number;
+    set y(y: number);
+    private _y;
+    get direction(): Direction;
+    set direction(direction: Direction);
+    private _direction;
+    get size(): number;
+    set size(size: number);
+    private _size;
+    get isVertical(): boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    private updateDimensions;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqGutterGhostDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqGutterGhostDirective, "kbq-gutter-ghost", never, { "visible": { "alias": "visible"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare class KbqSplitterComponent implements OnInit {
+    elementRef: ElementRef;
+    changeDetectorRef: ChangeDetectorRef;
+    private ngZone;
+    private renderer;
+    gutterPositionChange: EventEmitter<void>;
+    readonly areas: IArea[];
+    gutters: QueryList<KbqGutterDirective>;
+    ghost: KbqGutterGhostDirective;
+    get isDragging(): boolean;
+    private _isDragging;
+    private readonly areaPositionDivider;
+    private readonly listeners;
+    get hideGutters(): boolean;
+    set hideGutters(value: boolean);
+    private _hideGutters;
+    get direction(): Direction;
+    set direction(direction: Direction);
+    private _direction;
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    private _disabled;
+    get useGhost(): boolean;
+    set useGhost(useGhost: boolean);
+    private _useGhost;
+    get gutterSize(): number;
+    set gutterSize(gutterSize: number);
+    private _gutterSize;
+    get resizing(): boolean;
+    private _resizing;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
+    addArea(area: KbqSplitterAreaDirective): void;
+    ngOnInit(): void;
+    onMouseDown(event: MouseEvent, leftAreaIndex: number, rightAreaIndex: number): void;
+    removeArea(area: KbqSplitterAreaDirective): void;
+    isVertical(): boolean;
+    private updateGutter;
+    private onMouseMove;
+    private resizeAreas;
+    private onMouseUp;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["mcSplitter"], { "hideGutters": { "alias": "hideGutters"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useGhost": { "alias": "useGhost"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; }, { "gutterPositionChange": "gutterPositionChange"; }, never, ["*"], false, never>;
+}
+export declare class KbqSplitterAreaDirective implements OnInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    private splitter;
+    sizeChange: EventEmitter<number>;
+    constructor(elementRef: ElementRef, renderer: Renderer2, splitter: KbqSplitterComponent);
+    isResizing(): boolean;
+    disableFlex(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    setOrder(order: number): void;
+    setSize(size: number): void;
+    getSize(): number;
+    getPosition(): IPoint;
+    getMinSize(): number;
+    private isVertical;
+    private getMinSizeProperty;
+    private getOffsetSizeProperty;
+    private getSizeProperty;
+    private setStyle;
+    private removeStyle;
+    private emitSizeChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterAreaDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSplitterAreaDirective, "[kbq-splitter-area]", never, {}, { "sizeChange": "sizeChange"; }, never, never, false, never>;
+}
+export {};

package/splitter/splitter.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./splitter.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@koobiq/components/icon";
+export declare class KbqSplitterModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSplitterModule, [typeof i1.KbqGutterDirective, typeof i1.KbqGutterGhostDirective, typeof i1.KbqSplitterAreaDirective, typeof i1.KbqSplitterComponent], [typeof i2.CommonModule, typeof i3.KbqIconModule], [typeof i1.KbqGutterDirective, typeof i1.KbqSplitterAreaDirective, typeof i1.KbqSplitterComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSplitterModule>;
+}

package/splitter/splitter.scss

@@ -0,0 +1,48 @@
+.kbq-splitter {
+    display: flex;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
+
+    overflow: hidden;
+
+    .kbq-splitter-area {
+        overflow: hidden;
+
+        &_resizing {
+            pointer-events: none;
+        }
+    }
+
+}
+
+.kbq-gutter {
+    display: flex;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    justify-content: center;
+    align-items: center;
+
+    overflow: hidden;
+
+    &.kbq-gutter_vertical > .kbq-icon {
+        transform: rotate(90deg);
+    }
+}
+
+.kbq-gutter-ghost {
+    position: absolute;
+    z-index: 999;
+    display: none;
+    overflow: hidden;
+
+    &.kbq-gutter-ghost_vertical > .kbq-icon {
+        transform: rotate(90deg);
+    }
+
+    &.kbq-gutter-ghost_visible {
+        display: block;
+    }
+}

package/table/_table-theme.scss

@@ -0,0 +1,65 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-table-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    .kbq-table {
+        & > thead {
+            color: map.get($foreground, text-less-contrast);
+
+            & > tr > th {
+                border-color: map.get($foreground, divider);
+            }
+        }
+
+        & > tbody {
+            & > tr {
+                &:hover {
+                    background-color: map.get($background, overlay-hover);
+                }
+
+                & > th,
+                & > td {
+                    color: map.get($foreground, text);
+                }
+            }
+        }
+
+        &.kbq-table_bordered {
+            & > tbody > tr {
+                & th,
+                & td {
+                    border-bottom-color: map.get($foreground, divider);
+                }
+            }
+        }
+    }
+}
+
+@mixin kbq-table-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-table {
+        & > thead {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include kbq-typography-level-to-styles($config, map.get($tokens, table-font-header));
+        }
+
+        & > tbody {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include kbq-typography-level-to-styles($config, map.get($tokens, table-font-body));
+        }
+    }
+}
+

package/table/index.d.ts

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

package/table/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './table.module';
+export * from './table.component';

package/table/table.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class KbqTable {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTable, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["mcTable"], {}, {}, never, ["*"], false, never>;
+}

package/table/table.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./table.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class KbqTableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTableModule, [typeof i1.KbqTable], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqTable]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTableModule>;
+}

package/table/table.scss

@@ -0,0 +1,76 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-table {
+    border-spacing: 0;
+
+    & > thead,
+    & > tbody,
+    & > tfoot {
+        & > tr {
+            & > th,
+            & > td {
+                padding: {
+                    top: var(--kbq-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical));
+                    right: calc((var(
+                        --kbq-table-size-row-padding-horizontal,
+                        map.get($tokens, table-size-row-padding-horizontal)
+                    ) / 2));
+                    bottom: calc(
+                        var(--kbq-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical)) -
+                        var(--kbq-table-size-border-width, map.get($tokens, table-size-border-width))
+                    );
+                    left: calc((var(
+                        --kbq-table-size-row-padding-horizontal,
+                        map.get($tokens, table-size-row-padding-horizontal)
+                    ) / 2))
+                };
+
+                vertical-align: baseline;
+                text-align: left;
+            }
+
+            & > th:first-child,
+            & > td:first-child {
+                padding-left:
+                    var(--kbq-table-size-row-padding-horizontal, map.get($tokens, table-size-row-padding-horizontal));
+            }
+
+            & > th:last-child,
+            & > td:last-child {
+                padding-right:
+                    var(--kbq-table-size-row-padding-horizontal, map.get($tokens, table-size-row-padding-horizontal));
+            }
+        }
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    & > thead {
+        & > tr > th {
+            padding: {
+                top: var(--kbq-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical));
+                bottom: (
+                    calc(var(--kbq-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical)) -
+                    var(--kbq-table-size-border-width, map.get($tokens, table-size-border-width)))
+                );
+            }
+
+            border-bottom:
+                var(--kbq-table-size-border-width, map.get($tokens, table-size-border-width)) solid transparent;
+        }
+    }
+
+    & > tbody > tr {
+        & th,
+        & td {
+            border-bottom:
+                var(--kbq-table-size-border-width, map.get($tokens, table-size-border-width)) solid transparent;
+        }
+    }
+    /* stylelint-enable no-descending-specificity */
+}