@koobiq/components 17.0.0-rc.4 → 17.0.0-rc.6

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.4");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.4");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.6");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.6");
         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.4");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.4");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.8");
         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/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/tabs/tab-body.component.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  *
  * In the case of a new tab body that should immediately be centered with an animating transition,
  * then left-origin-center or right-origin-center can be used, which will use left or right as its
- * psuedo-prior state.
+ * pseudo-prior state.
  */
 export type KbqTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center';
 /**

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -38,7 +38,6 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-tab-group_vertical {
         flex-direction: column;
         flex-grow: 0;
-
         gap: var(
             --kbq-tabs-size-tab-stack-vertical-content-gap-vartical,
             map.get($tokens, tabs-size-tab-stack-vertical-content-gap-vertical)

package/tags/tag.component.d.ts

@@ -43,7 +43,7 @@ export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption,
     private _ngZone;
     /** Emits when the tag is focused. */
     readonly onFocus: Subject<KbqTagEvent>;
-    /** Emits when the tag is blured. */
+    /** Emits when the tag is blurred. */
     readonly onBlur: Subject<KbqTagEvent>;
     nativeElement: HTMLElement;
     /** Whether the tag has focus. */

package/textarea/textarea.scss

@@ -25,8 +25,8 @@ $tokens: meta.module-variables(tokens) !default;
         var(--kbq-textarea-size-padding-vertical, map.get($tokens, textarea-size-padding-vertical))
         var(--kbq-textarea-size-padding-horizontal, map.get($tokens, textarea-size-padding-horizontal));
 
-    -webkit-appearance: none; // Chrome textaria height sizing fix
-    vertical-align: bottom; // Chrome textaria height sizing fix
+    -webkit-appearance: none; // Chrome textarea height sizing fix
+    vertical-align: bottom; // Chrome textarea height sizing fix
 
     &:not(.kbq-textarea-resizable) {
         box-sizing: border-box;

package/timepicker/timepicker.directive.d.ts

@@ -119,7 +119,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private incrementTime;
     private decrementTime;
     /**
-     * @description Get params for arrow-keys (up/down) time valie edit.
+     * @description Get params for arrow-keys (up/down) time value edit.
      * @param cursorPosition Current cursor position in timeString
      */
     private getTimeEditMetrics;

package/tree/tree-base.d.ts

@@ -41,7 +41,7 @@ export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionVi
     /**
      * Provides a stream containing the latest data array to render. Influenced by the tree's
      * stream of view window (what dataNodes are currently on screen).
-     * Data source can be an observable of data array, or a dara array to render.
+     * Data source can be an observable of data array, or a data array to render.
      */
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);