@koobiq/components 17.0.0-rc.3 → 17.0.0-rc.5

package/schematics/ng-add/index.js

@@ -52,16 +52,16 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.3");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.3");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.5");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.5");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.0.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.0.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.2");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.2");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.4");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.6");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
-        addPackageToPackageJson(tree, 'marked', "^4.0.18");
+        addPackageToPackageJson(tree, 'marked', "^9.0.0");
         addPackageToPackageJson(tree, 'overlayscrollbars', "^2.7.3");
         addPackageToPackageJson(tree, 'ngx-highlightjs', "^10.0.0");
     };

package/select/select.component.d.ts

@@ -107,6 +107,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     panel: ElementRef;
     optionsContainer: ElementRef;
     overlayDir: CdkConnectedOverlay;
+    footer?: ElementRef;
     cdkVirtualForOf?: CdkVirtualForOf<any>;
     tags: QueryList<KbqTag>;
     /** User-supplied override of the trigger element. */
@@ -274,8 +275,11 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     onRemoveMatcherItem(option: KbqOptionBase, $event: any): void;
     calculateHiddenItems(): void;
     getItemHeight(): number;
+    handleClick($event: MouseEvent): void;
     private updateLocaleParams;
     private isVisible;
+    private currentOverlayPosition;
+    private modalOverlayPosition;
     private closingActions;
     private getHeightOfOptionsContainer;
     private updateScrollSize;
@@ -331,6 +335,6 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
 }
 export {};

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/table/_table-theme.scss

@@ -2,25 +2,27 @@
 @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(map.get($theme, states), background);
+    $line: map.get($theme, line);
 
     .kbq-table {
         & > thead {
-            color: map.get($foreground, text-less-contrast);
+            color: map.get($foreground, contrast-secondary);
 
             & > tr > th {
-                border-color: map.get($foreground, divider);
+                border-bottom-color: map.get($line, contrast-fade);
             }
         }
 
         & > tbody {
             & > tr {
-                &:hover {
-                    background-color: map.get($background, overlay-hover);
+                &:hover td {
+                    background-color: map.get($states-background, transparent-hover);
                 }
 
                 & > th,
@@ -34,7 +36,7 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: map.get($foreground, divider);
+                    border-bottom-color: map.get($line, contrast-fade);
                 }
             }
         }
@@ -42,15 +44,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-level-to-styles($config, getToken(table-font-header));
         }
 
         & > tbody {
@@ -58,7 +58,7 @@
                 font-weight: normal;
             }
 
-            @include kbq-typography-level-to-styles($config, map.get($tokens, table-font-body));
+            @include kbq-typography-level-to-styles($config, getToken(table-font-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,7 +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 +16,60 @@ $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: cssVar(table-size-row-padding-vertical);
+                    right: cssVar(table-size-row-padding-horizontal);
+                    bottom: cssVar(table-size-row-padding-vertical);
+                    left: cssVar(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: cssVar(table-size-border-width);
+            border-bottom-style: solid;
         }
     }
 
+    .kbq-table-cell_has-button {
+        padding-top: cssVar(size-xxs);
+        padding-bottom: cssVar(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: cssVar(table-size-border-width);
+            border-bottom-style: solid;
+        }
+    }
+}
+
+.kbq-table:not(.kbq-table_bordered) {
+    & > tbody > tr {
+        & > td:first-child {
+            border-top-left-radius: cssVar(size-m);
+            border-bottom-left-radius: cssVar(size-m);
+        }
+
+        & > td:last-child {
+            border-top-right-radius: cssVar(size-m);
+            border-bottom-right-radius: cssVar(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/toast/_toast-theme.scss

@@ -22,16 +22,21 @@
 @mixin kbq-toast-theme($theme) {
     $toast: map.get(map.get($theme, components), toast);
 
-    $contrast: map.get($toast, contrast);
-    $error: map.get($toast, error);
-
     .kbq-toast {
         &.kbq-toast_contrast {
-            @include kbq-toast($contrast);
+            @include kbq-toast(map.get($toast, contrast));
+        }
+
+        &.kbq-toast_success {
+            @include kbq-toast(map.get($toast, success));
+        }
+
+        &.kbq-toast_warning {
+            @include kbq-toast(map.get($toast, success));
         }
 
         &.kbq-toast_error {
-            @include kbq-toast($error);
+            @include kbq-toast(map.get($toast, error));
         }
     }
 }

package/toast/toast-container.component.scss

@@ -12,5 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     align-items: flex-end;
 
-    gap: map.get($tokens, size-m);
+    margin-top: var(--kbq-toast-stack-size-margin-top, map.get($tokens, toast-stack-size-margin-top));
+    margin-right: var(--kbq-toast-stack-size-margin-right, map.get($tokens, toast-stack-size-margin-right));
+
+    gap: var(--kbq-toast-stack-size-gap, map.get($tokens, toast-stack-size-gap));
 }

package/toast/toast.component.scss

@@ -10,21 +10,27 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     box-sizing: border-box;
 
-    min-width: var(--kbq-toast-size-container-min-width, map.get($tokens, toast-size-container-min-width));
-    max-width: 480px;
+    width: var(--kbq-toast-size-container-width, map.get($tokens, toast-size-container-width));
 
     height: auto;
 
     border-radius: var(--kbq-toast-size-container-border-radius, map.get($tokens, toast-size-container-border-radius));
 
-    padding:
-        var(--kbq-toast-size-container-padding-vertical, map.get($tokens, toast-size-container-padding-vertical))
-        var(--kbq-toast-size-container-padding-horizontal, map.get($tokens, toast-size-container-padding-horizontal));
+    padding-left: var(--kbq-toast-size-container-padding-left, map.get($tokens, toast-size-container-padding-left));
+    padding-right: var(--kbq-toast-size-container-padding-right, map.get($tokens, toast-size-container-padding-right));
+}
 
-    gap: var(
-        --kbq-toast-size-container-content-gap-horizontal,
-        map.get($tokens, toast-size-container-content-gap-horizontal)
-    );
+.kbq-toast__icon-container {
+    width: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
+    max-width: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
+    height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
+    max-height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
+
+    border-radius: var(--kbq-toast-size-border-raius, map.get($tokens, toast-size-border-raius));
+
+    margin-right: var(--kbq-toast-size-icon-margin-right, map.get($tokens, toast-size-icon-margin-right));
+
+    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
 }
 
 .kbq-toast__container {
@@ -33,10 +39,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     flex: 1;
 
-    gap: var(
-        --kbq-toast-size-container-content-gap-vertical,
-        map.get($tokens, toast-size-container-content-gap-vertical)
-    )
+    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
+    padding-right: map.get($tokens, size-s);
+    padding-bottom: var(--kbq-toast-size-content-padding-bottom, map.get($tokens, toast-size-content-padding-bottom));
 }
 
 .kbq-toast__title {
@@ -45,6 +50,10 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+.kbq-toast__title_with-content {
+    padding-bottom: var(--kbq-toast-size-caption-padding-bottom, map.get($tokens, toast-size-caption-padding-bottom));
+}
+
 .kbq-toast__text {
     display: flex;
     flex: 1;
@@ -65,10 +74,6 @@ $tokens: meta.module-variables(tokens) !default;
         --kbq-toast-size-button-stack-content-gap-horizontal,
         map.get($tokens, toast-size-button-stack-content-gap-horizontal)
     );
-
-    & * + .kbq-link {
-        margin-left: 12px;
-    }
 }
 
 .kbq-toast__close-button {

package/toast/toast.type.d.ts

@@ -1,6 +1,8 @@
 import { TemplateRef, InjectionToken } from '@angular/core';
 export declare enum KbqToastStyle {
     Contrast = "contrast",
+    Success = "success",
+    Warning = "warning",
     Error = "error"
 }
 export declare enum KbqToastPosition {