@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/select/select.scss

@@ -3,11 +3,7 @@
 
 @use '../core/styles/common/select' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-select {
     @extend %kbq-select-base;
@@ -25,12 +21,8 @@ $tokens: meta.module-variables(tokens) !default;
     @extend %kbq-select-content;
 
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
-        min-height: calc(
-            var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
-        );
-        max-height: calc(
-            var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
-        );
+        min-height: kbq-css-variable(select-panel-size-max-height);
+        max-height: kbq-css-variable(select-panel-size-max-height);
 
         &.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
             max-width: 100%;

package/sidepanel/_sidepanel-theme.scss

@@ -2,36 +2,34 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-sidepanel-theme($theme) {
-    $sidepanel: map.get(map.get($theme, components), sidepanel);
+    $sidepanel: map.get($theme, components, sidepanel);
 
     .kbq-sidepanel-title {
-        color: map.get($sidepanel, header-text);
+        color: kbq-css-variable(sidepanel-header-text, map.get($sidepanel, header-text));
     }
 
     .kbq-sidepanel-content {
-        background-color: map.get($sidepanel, background);
-        color: map.get($sidepanel, content-text);
+        background-color: kbq-css-variable(sidepanel-background, map.get($sidepanel, background));
+        color: kbq-css-variable(sidepanel-content-text, map.get($sidepanel, content-text));
     }
 
     .kbq-sidepanel-container_shadowed {
         .kbq-sidepanel-content {
-            box-shadow: map.get($sidepanel, box-shadow);
+            box-shadow: kbq-css-variable(sidepanel-box-shadow, map.get($sidepanel, box-shadow));
         }
     }
 }
 
 @mixin kbq-sidepanel-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-sidepanel-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-header));
+        @include kbq-typography-css-variables(sidepanel, header);
     }
 
     .kbq-sidepanel-container,
     .kbq-sidepanel-footer {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-content));
+        @include kbq-typography-css-variables(sidepanel, content);
     }
 }

package/sidepanel/sidepanel.scss

@@ -3,8 +3,7 @@
 
 @use '../core/styles/common';
 
-@use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -39,18 +38,18 @@ $tokens: meta.module-variables(tokens) !default;
         top: 0;
 
         &.kbq-sidepanel_small {
-            width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
-            max-width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
+            width: kbq-css-variable(sidepanel-size-small-width);
+            max-width: kbq-css-variable(sidepanel-size-small-width);
         }
 
         &.kbq-sidepanel_medium {
-            width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
-            max-width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
+            width: kbq-css-variable(sidepanel-size-medium-width);
+            max-width: kbq-css-variable(sidepanel-size-medium-width);
         }
 
         &.kbq-sidepanel_large {
-            width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
-            max-width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
+            width: kbq-css-variable(sidepanel-size-large-width);
+            max-width: kbq-css-variable(sidepanel-size-large-width);
         }
 
         .kbq-sidepanel-indent {
@@ -96,7 +95,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-/* stylelint-disable */
 .kbq-sidepanel-wrapper {
     display: flex;
     flex: 1;
@@ -108,7 +106,6 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex: 0 0 auto;
 }
-/* stylelint-enable */
 
 .kbq-sidepanel-content {
     display: flex;
@@ -127,16 +124,12 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    padding:
-        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
-        var(--kbq-sidepanel-size-header-padding-right, map.get($tokens, sidepanel-size-header-padding-right))
-        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
-        var(--kbq-sidepanel-size-header-padding-left, map.get($tokens, sidepanel-size-header-padding-left));
+    padding: kbq-css-variable(sidepanel-size-header-padding-vertical)
+        kbq-css-variable(sidepanel-size-header-padding-right) kbq-css-variable(sidepanel-size-header-padding-vertical)
+        kbq-css-variable(sidepanel-size-header-padding-left);
 
     .kbq-sidepanel-close {
-        margin-left: var(
-            --kbq-sidepanel-size-close-button-margin-left, map.get($tokens, sidepanel-size-close-button-margin-left)
-        );
+        margin-left: kbq-css-variable(sidepanel-size-close-button-margin-left);
     }
 }
 
@@ -153,17 +146,11 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     min-height: 0;
 
-    padding-right: var(
-        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
-    );
+    padding-right: kbq-css-variable(sidepanel-size-content-padding-horizontal);
 
-    padding-left: var(
-        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
-    );
+    padding-left: kbq-css-variable(sidepanel-size-content-padding-horizontal);
 
-    padding-bottom: var(
-        --kbq-sidepanel-size-content-padding-bottom, map.get($tokens, sidepanel-size-content-padding-bottom)
-    );
+    padding-bottom: kbq-css-variable(sidepanel-size-content-padding-bottom);
 }
 
 .kbq-sidepanel-footer {
@@ -174,10 +161,9 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    padding:
-        var(--kbq-sidepanel-size-footer-padding-top, map.get($tokens, sidepanel-size-footer-padding-top))
-        var(--kbq-sidepanel-size-footer-padding-horizontal, map.get($tokens, sidepanel-size-footer-padding-horizontal))
-        var(--kbq-sidepanel-size-footer-padding-bottom, map.get($tokens, sidepanel-size-footer-padding-bottom));
+    padding: kbq-css-variable(sidepanel-size-footer-padding-top)
+        kbq-css-variable(sidepanel-size-footer-padding-horizontal)
+        kbq-css-variable(sidepanel-size-footer-padding-bottom);
 
     .kbq-sidepanel-actions {
         display: flex;
@@ -185,17 +171,14 @@ $tokens: meta.module-variables(tokens) !default;
         flex-direction: row;
         flex: 1;
 
-        &[align="left"] {
+        &[align='left'] {
             justify-content: start;
         }
 
-        &[align="right"] {
+        &[align='right'] {
             justify-content: flex-end;
         }
 
-        gap: var(
-            --kbq-sidepanel-size-footer-content-gap-horizontal,
-            map.get($tokens, sidepanel-size-footer-content-gap-horizontal)
-        );
+        gap: kbq-css-variable(sidepanel-size-footer-content-gap-horizontal);
     }
 }

package/splitter/_splitter-theme.scss

@@ -1,17 +1,16 @@
 @use 'sass:map';
 
-@use '../core/styles/theming/theming' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-splitter-theme($theme) {
-    $background: map.get(map.get($theme, states), background);
+    $background: map.get($theme, states, background);
 
     .kbq-gutter {
         cursor: col-resize;
 
         &:hover,
         &.kbq-gutter_dragged {
-            background-color: map.get($background, ghost-hover);
+            background-color: rgba(106, 115, 150, 0.08);
         }
 
         &.kbq-gutter_vertical {
@@ -20,13 +19,13 @@
 
         // todo
         &[disabled] {
-            background-color: kbq-color($background, disabled);
+            background-color: kbq-css-variable(background-disabled, map.get($background, disabled));
 
             cursor: default;
         }
     }
 
     .kbq-gutter-ghost {
-        background: kbq-color($background, ghost-active);
+        background: rgba(106, 115, 150, 0.16);
     }
 }

package/splitter/splitter.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
 import * as i0 from "@angular/core";
 interface IArea {
     area: KbqSplitterAreaDirective;
@@ -64,13 +64,15 @@ export declare class KbqSplitterComponent implements OnInit {
     private ngZone;
     private renderer;
     gutterPositionChange: EventEmitter<void>;
-    readonly areas: IArea[];
+    areas: IArea[];
     gutters: QueryList<KbqGutterDirective>;
     ghost: KbqGutterGhostDirective;
+    areaRefs: QueryList<KbqSplitterAreaDirective>;
     get isDragging(): boolean;
     private _isDragging;
     private readonly areaPositionDivider;
     private readonly listeners;
+    private areasChangeSubscription;
     get hideGutters(): boolean;
     set hideGutters(value: boolean);
     private _hideGutters;
@@ -91,18 +93,21 @@ export declare class KbqSplitterComponent implements OnInit {
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
     addArea(area: KbqSplitterAreaDirective): void;
     ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     onMouseDown(event: MouseEvent, leftAreaIndex: number, rightAreaIndex: number): void;
     removeArea(area: KbqSplitterAreaDirective): void;
     isVertical(): boolean;
+    private mapAndOrderArea;
     private updateGutter;
     private onMouseMove;
     private resizeAreas;
     private onMouseUp;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["kbqSplitter"], { "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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["kbqSplitter"], { "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"; }, ["areaRefs"], ["*"], false, never>;
 }
-export declare class KbqSplitterAreaDirective implements OnInit, OnDestroy {
+export declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestroy {
     private elementRef;
     private renderer;
     private splitter;
@@ -110,7 +115,7 @@ export declare class KbqSplitterAreaDirective implements OnInit, OnDestroy {
     constructor(elementRef: ElementRef, renderer: Renderer2, splitter: KbqSplitterComponent);
     isResizing(): boolean;
     disableFlex(): void;
-    ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     setOrder(order: number): void;
     setSize(size: number): void;

package/splitter/splitter.scss

@@ -13,7 +13,6 @@
             pointer-events: none;
         }
     }
-
 }
 
 .kbq-gutter {

package/table/_table-theme.scss

@@ -2,30 +2,34 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-table-theme($theme) {
     $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+    $states-background: map.get($theme, states, background);
+    $line: map.get($theme, line);
 
     .kbq-table {
         & > thead {
-            color: map.get($foreground, text-less-contrast);
+            color: kbq-css-variable(foreground-contrast-secondary, map.get($foreground, contrast-secondary));
 
             & > tr > th {
-                border-color: map.get($foreground, divider);
+                border-bottom-color: kbq-css-variable(line-contrast-fade, map.get($line, contrast-fade));
             }
         }
 
         & > tbody {
             & > tr {
-                &:hover {
-                    background-color: map.get($background, overlay-hover);
-                }
-
                 & > th,
                 & > td {
-                    color: map.get($foreground, contrast);
+                    color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+                }
+
+                &:hover td {
+                    background-color: kbq-css-variable(
+                        states-background-transparent-hover,
+                        map.get($states-background, transparent-hover)
+                    );
                 }
             }
         }
@@ -34,7 +38,7 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: map.get($foreground, divider);
+                    border-bottom-color: kbq-css-variable(line-contrast-fade, map.get($line, contrast-fade));
                 }
             }
         }
@@ -42,15 +46,13 @@
 }
 
 @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));
+            @include kbq-typography-css-variables(table, header);
         }
 
         & > tbody {
@@ -58,8 +60,7 @@
                 font-weight: normal;
             }
 
-            @include kbq-typography-level-to-styles($config, map.get($tokens, table-font-body));
+            @include kbq-typography-css-variables(table, body);
         }
     }
 }
-

package/table/table.component.d.ts

@@ -1,5 +1,12 @@
+import { KbqButton } from '@koobiq/components/button';
 import * as i0 from "@angular/core";
 export declare class KbqTable {
+    border: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+export declare class KbqTableCellContent {
+    button: KbqButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTableCellContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTableCellContent, "kbq-table td", never, {}, {}, ["button"], never, false, never>;
 }

package/table/table.module.d.ts

@@ -5,6 +5,6 @@ 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 ɵmod: i0.ɵɵNgModuleDeclaration<KbqTableModule, [typeof i1.KbqTable, typeof i1.KbqTableCellContent], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqTable, typeof i1.KbqTableCellContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTableModule>;
 }

package/table/table.scss

@@ -1,8 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -16,61 +15,61 @@ $tokens: meta.module-variables(tokens) !default;
             & > 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))
-                };
+                    top: kbq-css-variable(table-size-row-padding-vertical);
+                    right: kbq-css-variable(table-size-row-padding-horizontal);
+                    bottom: kbq-css-variable(table-size-row-padding-vertical);
+                    left: kbq-css-variable(table-size-row-padding-horizontal);
+                }
 
                 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;
+            border-bottom-width: kbq-css-variable(table-size-border-width);
+            border-bottom-style: solid;
         }
     }
 
+    .kbq-table-cell_has-button {
+        padding-top: kbq-css-variable(size-xxs);
+        padding-bottom: kbq-css-variable(size-xxs);
+    }
+}
+
+.kbq-table.kbq-table_bordered {
     & > tbody > tr {
         & th,
         & td {
-            border-bottom:
-                var(--kbq-table-size-border-width, map.get($tokens, table-size-border-width)) solid transparent;
+            border-bottom-width: kbq-css-variable(table-size-border-width);
+            border-bottom-style: solid;
+        }
+    }
+}
+
+.kbq-table:not(.kbq-table_bordered) {
+    & > tbody > tr {
+        & > td:first-child {
+            border-top-left-radius: kbq-css-variable(size-m);
+            border-bottom-left-radius: kbq-css-variable(size-m);
+        }
+
+        & > td:last-child {
+            border-top-right-radius: kbq-css-variable(size-m);
+            border-bottom-right-radius: kbq-css-variable(size-m);
+        }
+
+        &:first-child {
+            & > td:first-child {
+                border-top-left-radius: 0;
+            }
+
+            & > td:last-child {
+                border-top-right-radius: 0;
+            }
         }
     }
-    /* stylelint-enable no-descending-specificity */
 }

package/tabs/_tabs-common.scss

@@ -2,11 +2,10 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 @mixin tab-label {
     position: relative;
 
@@ -25,23 +24,24 @@ $tokens: meta.module-variables(tokens) !default;
     $padding-horizontal: map.get($tokens, tabs-size-tab-item-padding-horizontal);
     $border-width: map.get($tokens, tabs-size-tab-item-focus-outline-width);
 
-    padding:
-        calc(
-            var(--kbq-tabs-size-tab-item-padding-vertical, $padding-vertical) -
-            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+    padding: calc(
+            var(--kbq-tabs-size-tab-item-padding-vertical, $padding-vertical) - var(
+                    --kbq-tabs-size-tab-item-focus-outline-width,
+                    $border-width
+                )
         )
         calc(
-            var(--kbq-tabs-size-tab-item-padding-horizontal, $padding-horizontal) -
-            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+            var(--kbq-tabs-size-tab-item-padding-horizontal, $padding-horizontal) - var(
+                    --kbq-tabs-size-tab-item-focus-outline-width,
+                    $border-width
+                )
         );
 
     border: {
-        width: var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width);
+        width: kbq-css-variable(tabs-size-tab-item-focus-outline-width);
         style: solid;
         color: transparent;
-        radius: var(
-            --kbq-tabs-size-tab-item-border-radius, map.get($tokens, tabs-size-tab-item-border-radius)
-        );
+        radius: kbq-css-variable(tabs-size-tab-item-border-radius);
     }
 
     outline: none;
@@ -61,9 +61,7 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-tab-label__content {
         display: flex;
 
-        gap: var(
-            --kbq-tabs-size-tab-item-content-gap-horizontal, map.get($tokens, tabs-size-tab-item-content-gap-horizontal)
-        );
+        gap: kbq-css-variable(tabs-size-tab-item-content-gap-horizontal);
     }
 
     &.kbq-tab-label_vertical {