@koobiq/components 18.3.0 → 18.4.1

package/form-field/validate.directive.d.ts

@@ -3,6 +3,26 @@ import { AbstractControl, FormGroupDirective, NgControl, NgForm, Validator, Vali
 import { KbqValidationOptions } from '@koobiq/components/core';
 import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
+/**
+ * @deprecated Will be removed in next major release (#DS-2838)
+ *
+ * Legacy mosaic validation
+ *
+ * ### How to disable?
+ *
+ * ```typescript
+ * import { KBQ_VALIDATION, KbqValidationOptions } from '@koobiq/components/core';
+ *
+ * @NgModule({
+ *      providers: [
+ *           {
+ *              provide: KBQ_VALIDATION,
+ *              useValue: { useValidation: false } satisfies KbqValidationOptions
+ *           }
+ *      ]
+ * })
+ * ```
+ */
 export declare class KbqValidateDirective implements AfterContentInit {
     private formFieldControl;
     rawValidators: Validator[];

package/icon/icon-button-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-icon-button {
     --kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);
     --kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);

package/icon/icon-item-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-icon-item {
     --kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);
     --kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);

package/icon/icon-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-icon-theme-color: var(--kbq-icon-theme);
     --kbq-icon-contrast-color: var(--kbq-icon-contrast);

package/input/input-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-input {
     --kbq-input-size-padding-horizontal: var(--kbq-size-m);
     --kbq-input-size-padding-vertical: var(--kbq-size-xs);

package/link/link-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-link {
     --kbq-link-size-state-focused-outline-offset: 0px;
     --kbq-link-size-state-focused-outline-width: 2px;

package/list/list-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-list,
 .kbq-list-selection {
     --kbq-list-size-container-padding-left: var(--kbq-size-m);

package/loader-overlay/loader-overlay-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-loader-overlay {
     --kbq-loader-overlay-size-big-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-big-loader-margin-bottom: var(--kbq-size-xxl);

package/markdown/markdown-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-markdown {
     --kbq-markdown-h1-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-h1-size-margin-top: 0;

package/markdown/markdown.values.d.ts

@@ -1,3 +1,6 @@
 export declare const MARKDOWN_TAGS_TO_CLASS_ALIAS: string[];
+/**
+ * separating `th` and `p` to prevent it's conflict with `thead` and `pre`
+ */
 export declare const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS: string[];
 export declare const CLASS_PREFIX: string;

package/modal/_modal-theme.scss

@@ -5,7 +5,7 @@
 @mixin kbq-modal-theme() {
     .kbq-modal {
         background: var(--kbq-modal-container-background);
-        box-shadow: var(--kbq-modal-container-box-shadow);
+        box-shadow: var(--kbq-modal-container-shadow);
 
         .kbq-modal-header {
             & .kbq-modal-title {

package/modal/modal-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-modal {
     --kbq-modal-size-small-width: 400px;
     --kbq-modal-size-medium-width: 640px;
@@ -36,7 +34,7 @@
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-modal-overlay-background: var(--kbq-background-overlay);
     --kbq-modal-container-background: var(--kbq-background-card);
-    --kbq-modal-container-box-shadow: var(--kbq-shadow-overlay);
+    --kbq-modal-container-shadow: var(--kbq-shadow-overlay);
     --kbq-modal-close-button-color: var(--kbq-icon-contrast);
     --kbq-modal-header-text-color: var(--kbq-foreground-contrast);
     --kbq-modal-content-text-color: var(--kbq-foreground-contrast);
@@ -45,7 +43,7 @@
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-modal-overlay-background: var(--kbq-background-overlay);
     --kbq-modal-container-background: var(--kbq-background-card);
-    --kbq-modal-container-box-shadow: var(--kbq-shadow-overlay);
+    --kbq-modal-container-shadow: var(--kbq-shadow-overlay);
     --kbq-modal-close-button-color: var(--kbq-icon-contrast);
     --kbq-modal-header-text-color: var(--kbq-foreground-contrast);
     --kbq-modal-content-text-color: var(--kbq-foreground-contrast);

package/navbar/_navbar-theme.scss

@@ -101,7 +101,7 @@ button {
 
     .kbq-navbar-brand {
         .kbq-navbar-title {
-            @include kbq-typography-css-variables(navbar, title);
+            @include kbq-typography-level-to-styles_css-variables(typography, navbar-title);
         }
     }
 }

package/navbar/navbar-tokens.scss

@@ -1,13 +1,5 @@
-/* stylelint-disable no-unknown-custom-properties */
-
-.kbq-navbar {
-    --kbq-navbar-font-title-font-size: var(--kbq-typography-navbar-title-font-size);
-    --kbq-navbar-font-title-line-height: var(--kbq-typography-navbar-title-line-height);
-    --kbq-navbar-font-title-letter-spacing: var(--kbq-typography-navbar-title-letter-spacing);
-    --kbq-navbar-font-title-font-weight: var(--kbq-typography-navbar-title-font-weight);
-    --kbq-navbar-font-title-font-family: var(--kbq-typography-navbar-title-font-family);
-    --kbq-navbar-font-title-text-transform: var(--kbq-typography-navbar-title-text-transform);
-    --kbq-navbar-font-title-font-feature-settings: var(--kbq-typography-navbar-title-font-feature-settings);
+.kbq-navbar,
+.kbq-vertical-navbar {
     --kbq-navbar-item-size-content-border-radius: var(--kbq-button-size-border-radius);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.3.0",
+    "version": "18.4.1",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.3.0",
-        "@koobiq/angular-moment-adapter": "18.3.0",
-        "@koobiq/angular-luxon-adapter": "18.3.0",
+        "@koobiq/cdk": "18.4.1",
+        "@koobiq/angular-moment-adapter": "18.4.1",
+        "@koobiq/angular-luxon-adapter": "18.4.1",
         "@koobiq/date-formatter": "^3.1.3",
         "@koobiq/icons": "^9.0.0",
         "@koobiq/tokens-builder": "3.7.3",

package/popover/_popover-theme.scss

@@ -2,7 +2,7 @@
 
 @mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: var(--kbq-popover-container-box-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
     }
 
     .kbq-popover__container {
@@ -10,7 +10,7 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: var(--kbq-popover-container-box-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
         background: var(--kbq-popover-container-background);
     }
 

package/popover/popover-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-popover {
     --kbq-button-size-border-radius: var(--kbq-size-s);
     --kbq-popover-size-container-width-small: 200px;
@@ -38,7 +36,7 @@
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-popover-container-background: var(--kbq-background-card);
-    --kbq-popover-container-box-shadow: var(--kbq-shadow-popup);
+    --kbq-popover-container-shadow: var(--kbq-shadow-popup);
     --kbq-popover-header-text-color: var(--kbq-foreground-contrast);
     --kbq-popover-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-popover-content-text-color: var(--kbq-foreground-contrast);
@@ -47,7 +45,7 @@
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-popover-container-background: var(--kbq-background-card);
-    --kbq-popover-container-box-shadow: var(--kbq-shadow-popup);
+    --kbq-popover-container-shadow: var(--kbq-shadow-popup);
     --kbq-popover-header-text-color: var(--kbq-foreground-contrast);
     --kbq-popover-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-popover-content-text-color: var(--kbq-foreground-contrast);

package/popover/popover.scss

@@ -92,7 +92,7 @@ $trigger-margin: 9px;
 }
 
 .kbq-popover__header_top-overflow {
-    box-shadow: 0 9px 8px -12px rgba(138, 143, 168, 1);
+    box-shadow: var(--kbq-shadow-overflow-normal-bottom);
 }
 
 .kbq-popover__header_with-close-button {
@@ -104,7 +104,7 @@ $trigger-margin: 9px;
 }
 
 .kbq-popover__footer_bottom-overflow {
-    box-shadow: 0 -9px 8px -12px rgba(138, 143, 168, 1);
+    box-shadow: var(--kbq-shadow-overflow-normal-top);
 }
 
 .kbq-popover__arrow {

package/progress-bar/progress-bar-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-progress-bar {
     --kbq-progress-bar-size-container-content-gap: var(--kbq-size-s);
     --kbq-progress-bar-size-container-border-radius: var(--kbq-size-3xs);

package/progress-spinner/progress-spinner-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-progress-spinner {
     --kbq-progress-spinner-size-compact-size: var(--kbq-size-l);
     --kbq-progress-spinner-size-compact-stroke-width: 2px;

package/radio/radio-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-radio-button {
     --kbq-radio-size-normal-outer-size: var(--kbq-size-l);
     --kbq-radio-size-normal-inner-size: var(--kbq-size-xs);

package/risk-level/risk-level-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-risk-level {
     --kbq-risk-level-size-padding-vertical: var(--kbq-size-3xs);
     --kbq-risk-level-size-padding-horizontal: var(--kbq-size-s);

package/schematics/ng-add/index.js

@@ -42,8 +42,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.3.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.3.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.4.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.4.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.1.0");

package/scrollbar/scrollbar-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-scrollbar-component {
     --kbq-scrollbar-size-track-dimension: var(--kbq-size-l);
     --kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);

package/select/select-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-select,
 .kbq-select__panel {
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);

package/select/select.component.d.ts

@@ -41,7 +41,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private readonly _dir;
     private readonly parentFormField;
     private readonly scrollStrategyFactory;
-    private localeService?;
+    protected localeService?: KbqLocaleService | undefined;
     /** A name for this control that can be used by `kbq-form-field`. */
     controlType: string;
     hiddenItems: number;

package/sidepanel/_sidepanel-theme.scss

@@ -12,7 +12,7 @@
 
     .kbq-sidepanel-container_shadowed {
         .kbq-sidepanel-content {
-            box-shadow: var(--kbq-sidepanel-container-box-shadow);
+            box-shadow: var(--kbq-sidepanel-container-shadow);
         }
     }
 }

package/sidepanel/sidepanel-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-sidepanel-container {
     --kbq-sidepanel-size-small-width: 400px;
     --kbq-sidepanel-size-medium-width: 640px;
@@ -33,7 +31,7 @@
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
     --kbq-sidepanel-container-background: var(--kbq-background-card);
-    --kbq-sidepanel-container-box-shadow: var(--kbq-shadow-overlay);
+    --kbq-sidepanel-container-shadow: var(--kbq-shadow-overlay);
     --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
     --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
 }
@@ -41,7 +39,7 @@
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
     --kbq-sidepanel-container-background: var(--kbq-background-card);
-    --kbq-sidepanel-container-box-shadow: var(--kbq-shadow-overlay);
+    --kbq-sidepanel-container-shadow: var(--kbq-shadow-overlay);
     --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
     --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
 }

package/table/table-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-table {
     --kbq-table-size-border-width: var(--kbq-size-border-width);
     --kbq-table-size-row-padding-vertical: 10px;

package/tabs/tabs-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-tab-group,
 .kbq-tab-nav-bar {
     --kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);

package/tags/tag-input-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-form-field-type-tag-list {
     --kbq-tag-input-size-padding-left: var(--kbq-size-xxs);
     --kbq-tag-input-size-padding-right: var(--kbq-size-m);

package/tags/tag-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-tag,
 .kbq-tag-list,
 .kbq-tag-input {

package/textarea/textarea-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-textarea {
     --kbq-textarea-size-min-height: 64px;
     --kbq-textarea-size-max-height: 96px;

package/timezone/timezone-option-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-timezone-select__panel {
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);
     --kbq-option-size-height: var(--kbq-size-3xl);

package/timezone/timezone-select.component.d.ts

@@ -1,15 +1,14 @@
-import { KbqSelectSearch } from '@koobiq/components/core';
-import { KbqCleaner } from '@koobiq/components/form-field';
+import { AfterContentInit } from '@angular/core';
 import { KbqSelect } from '@koobiq/components/select';
 import * as i0 from "@angular/core";
 export declare class KbqTimezoneSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelectTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimezoneSelectTrigger, "kbq-timezone-select-trigger", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqTimezoneSelect extends KbqSelect {
+export declare class KbqTimezoneSelect extends KbqSelect implements AfterContentInit {
     customTrigger: KbqTimezoneSelectTrigger;
-    cleaner: KbqCleaner;
-    search: KbqSelectSearch;
+    ngAfterContentInit(): void;
+    private updateLocaleParamsForSearch;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneSelect, "kbq-timezone-select", ["kbqTimezoneSelect"], {}, {}, ["customTrigger", "cleaner", "search"], ["kbq-timezone-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneSelect, "kbq-timezone-select", ["kbqTimezoneSelect"], {}, {}, ["customTrigger"], ["kbq-timezone-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*"], false, never>;
 }

package/toast/toast-tokens.scss

@@ -1,6 +1,7 @@
-/* stylelint-disable no-unknown-custom-properties */
-
-.kbq-toast {
+.kbq-toast-container {
+    --kbq-toast-stack-size-margin-top: var(--kbq-size-m);
+    --kbq-toast-stack-size-margin-right: var(--kbq-size-m);
+    --kbq-toast-stack-size-gap: var(--kbq-size-s);
     --kbq-toast-size-container-width: 360px;
     --kbq-toast-size-container-border-radius: var(--kbq-size-s);
     --kbq-toast-size-container-padding-left: var(--kbq-size-m);

package/toggle/toggle-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-toggle {
     --kbq-toggle-size-normal-height: var(--kbq-size-l);
     --kbq-toggle-size-normal-width: 28px;

package/tooltip/tooltip-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-tooltip {
     --kbq-tooltip-size-max-width: 300px;
     --kbq-tooltip-size-border-radius: var(--kbq-size-s);

package/tooltip/tooltip.component.d.ts

@@ -80,6 +80,15 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     constructor();
     ngOnDestroy(): void;
     show(delay?: number): void;
+    /**
+     * method allows to show the tooltip relative to the element
+     * Use this approach when it is not possible to define a trigger in the template.
+     *
+     * For example:
+     * const tooltip = new KbqTooltipTrigger();
+     * tooltip.showForElement(element);
+     */
+    showForElement(element: HTMLElement): void;
     updateData(): void;
     closingActions(): import("rxjs").Observable<void | MouseEvent>;
     getOverlayHandleComponentType(): Type<KbqTooltipComponent>;

package/tree/tree-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-tree,
 .kbq-tree-selection {
     --kbq-tree-size-indent-level: var(--kbq-size-xxl);

package/tree-select/tree-select-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-tree-select {
     --kbq-select-panel-size-border-radius: var(--kbq-size-s);
     --kbq-select-panel-size-max-height: 256px;

package/splitter/splitter-tokens.scss

@@ -1 +0,0 @@
-/* stylelint-disable no-unknown-custom-properties */