@koobiq/components 18.36.0 → 18.38.0

package/core/locales/pt-BR.d.ts

@@ -97,6 +97,12 @@ export declare const ptBRLocaleData: {
             collapseButton: string;
         };
     };
+    navbar: {
+        toggle: {
+            expand: string;
+            collapse: string;
+        };
+    };
     searchExpandable: {
         tooltip: string;
         placeholder: string;

package/core/locales/ru-RU.d.ts

@@ -98,6 +98,12 @@ export declare const ruRULocaleData: {
             collapseButton: string;
         };
     };
+    navbar: {
+        toggle: {
+            expand: string;
+            collapse: string;
+        };
+    };
     searchExpandable: {
         tooltip: string;
         placeholder: string;

package/core/locales/tk-TM.d.ts

@@ -98,6 +98,12 @@ export declare const tkTMLocaleData: {
             collapseButton: string;
         };
     };
+    navbar: {
+        toggle: {
+            expand: string;
+            collapse: string;
+        };
+    };
     searchExpandable: {
         tooltip: string;
         placeholder: string;

package/core/option/option.d.ts

@@ -57,7 +57,7 @@ export declare class KbqVirtualOption extends KbqOptionBase {
  * Single option inside of a `<kbq-select>` element.
  */
 export declare class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDestroy, KbqTitleTextRef {
-    private readonly element;
+    private readonly elementRef;
     private readonly changeDetectorRef;
     private readonly parent;
     readonly group: KbqOptgroup;
@@ -98,9 +98,10 @@ export declare class KbqOption extends KbqOptionBase implements AfterViewChecked
     get active(): boolean;
     private _active;
     private mostRecentViewValue;
-    constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: KbqOptionParentComponent, group: KbqOptgroup);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: KbqOptionParentComponent, group: KbqOptgroup);
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
+    /** @docs-private */
     getHeight(): number;
     select(emitEvent?: boolean): void;
     deselect(emitEvent?: boolean): void;

package/core/pop-up/pop-up-trigger.d.ts

@@ -23,6 +23,9 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     enterDelay: number;
     leaveDelay: number;
     triggerName: string;
+    overlayRef: OverlayRef | null;
+    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
+    container: HTMLElement;
     abstract disabled: boolean;
     abstract arrow: boolean;
     abstract trigger: string;
@@ -38,7 +41,6 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected _content: string | TemplateRef<any>;
     protected _disabled: boolean;
     protected _customClass: string;
-    protected overlayRef: OverlayRef | null;
     protected portal: ComponentPortal<T>;
     protected instance: any | null;
     protected listeners: Map<string, EventListener>;

package/core/pop-up/pop-up.d.ts

@@ -51,6 +51,7 @@ export declare abstract class KbqPopUp implements OnDestroy {
     animationDone({ toState }: AnimationEvent): void;
     handleBodyInteraction(): void;
     protected addEventListenerForHide(): void;
+    protected setStickPosition(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopUp, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopUp, never, never, {}, {}, never, never, false, never>;
 }

package/core/select/common.d.ts

@@ -7,8 +7,10 @@ export declare class KbqSelectTrigger {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, true, never>;
 }
 export declare class KbqSelectMatcher {
+    useDefaultHandlers: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, { "useDefaultHandlers": { "alias": "useDefaultHandlers"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_useDefaultHandlers: unknown;
 }
 export declare class KbqSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;

package/core/styles/common/_select.scss

@@ -227,3 +227,23 @@
 
     padding: var(--kbq-size-xxs) var(--kbq-size-l);
 }
+
+@mixin item-active-area($outline) {
+    position: relative;
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: '';
+        width: var(--kbq-size-xxs);
+        height: calc(100% + $outline * 2); // outline size * 2
+    }
+
+    &:before {
+        right: calc(100% + $outline); // outline size
+    }
+
+    &:after {
+        left: calc(100% + $outline); // outline size
+    }
+}

package/core/styles/typography/_typography.scss

@@ -1,9 +1,5 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use 'sass:map';
-
 @use 'typography-utils' as *;
-
 @use '../common/tokens' as *;
 
 // TODO: REMOVE
@@ -298,105 +294,50 @@
     .kbq-italic-compact-strong {
         @include kbq-typography-level-to-styles-css-variables(typography, italic-compact-strong);
     }
-
-    [lang='zh-CN'] {
-        .kbq-text-normal-strong {
-            font-weight: var(--kbq-zh-cn-text-normal-strong-font-weight);
-        }
-
-        .kbq-mono-normal-strong {
-            font-weight: var(--kbq-zh-cn-mono-normal-strong-font-weight);
-        }
-
-        .kbq-text-compact-strong {
-            font-weight: var(--kbq-zh-cn-text-compact-strong-font-weight);
-        }
-
-        .kbq-mono-compact-strong {
-            font-weight: var(--kbq-zh-cn-mono-compact-strong-font-weight);
-        }
-    }
-
-    [lang='fa-IR'] {
-        .kbq-display-big {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-display-normal {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-display-compact {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-title {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-subheading {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-normal {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-tabular-normal {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-normal-strong {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-caps-normal {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-compact {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-tabular-compact {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-compact-strong {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-caps-compact {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-    }
 }
 
 @mixin kbq-markdown-base-typography() {
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
-        .md-h#{$i} {
+        // DEPRECATED: .md-h# class is deprecated, use .kbq-md-h# instead
+        .md-h#{$i},
+        .kbq-md-h#{$i} {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
         }
     }
 
-    .md-body {
+    // DEPRECATED: .md-body class is deprecated, use .kbq-md-body instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body,
+    .kbq-md-body {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
     }
 
-    .md-body-mono {
+    // DEPRECATED: .md-body-mono class is deprecated, use .kbq-md-body-mono instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body-mono,
+    .kbq-md-body-mono {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
     }
 
-    .md-caption {
+    // DEPRECATED: .md-caption class is deprecated, use .kbq-md-caption instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-caption,
+    .kbq-md-caption {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
     }
 
-    .md-table-cell {
+    // DEPRECATED: .md-table-cell class is deprecated, use .kbq-md-table-cell instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-cell,
+    .kbq-md-table-cell {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
     }
 
-    .md-table-header {
+    // DEPRECATED: .md-table-header class is deprecated, use .kbq-md-table-header instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-header,
+    .kbq-md-table-header {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
     }
 }

package/datepicker/datepicker-module.d.ts

@@ -13,8 +13,9 @@ import * as i11 from "@angular/cdk/portal";
 import * as i12 from "@koobiq/components/select";
 import * as i13 from "@koobiq/components/icon";
 import * as i14 from "@angular/common";
+import * as i15 from "@koobiq/components/form-field";
 export declare class KbqDatepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDatepickerModule, [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader], [typeof i8.KbqButtonModule, typeof i9.OverlayModule, typeof i10.A11yModule, typeof i11.PortalModule, typeof i12.KbqSelectModule, typeof i13.KbqIconModule, typeof i5.KbqDatepickerToggleIconComponent, typeof i14.NgClass, typeof i14.TitleCasePipe], [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i5.KbqDatepickerToggleIconComponent, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDatepickerModule, [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader], [typeof i8.KbqButtonModule, typeof i9.OverlayModule, typeof i10.A11yModule, typeof i11.PortalModule, typeof i12.KbqSelectModule, typeof i13.KbqIconModule, typeof i5.KbqDatepickerToggleIconComponent, typeof i14.NgClass, typeof i14.TitleCasePipe], [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i5.KbqDatepickerToggleIconComponent, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader, typeof i15.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqDatepickerModule>;
 }

package/dropdown/dropdown-item.scss

@@ -1,11 +1,12 @@
-@use '../core/styles/common';
+@use '../core/styles/common/list';
+@use '../core/styles/common/vendor-prefixes';
 
 .kbq-dropdown-item {
     width: 100%;
     border-radius: var(--kbq-dropdown-item-border-radius);
 
-    @include common.user-select(none);
-    @include common.kbq-list-item-base();
+    @include vendor-prefixes.user-select(none);
+    @include list.kbq-list-item-base();
 
     &:not(.kbq-disabled) {
         cursor: pointer;
@@ -29,7 +30,7 @@
 }
 
 .kbq-dropdown-item__text {
-    @include common.kbq-list-text();
+    @include list.kbq-list-text();
 }
 
 .kbq-dropdown-item-overlay {
@@ -44,11 +45,11 @@
 }
 
 .kbq-dropdown__group-header {
-    @include common.user-select(none);
-    @include common.kbq-list-header-base();
+    @include vendor-prefixes.user-select(none);
+    @include list.kbq-list-header-base();
 
     // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
     &.kbq-dropdown__group-header_small {
-        @include common.kbq-list-subheading-base();
+        @include list.kbq-list-subheading-base();
     }
 }

package/dropdown/dropdown.scss

@@ -1,4 +1,5 @@
 @use './dropdown-theme' as theme;
+@use '../core/styles/common/select';
 
 .kbq-dropdown-trigger {
     &.kbq-button {
@@ -50,23 +51,13 @@
         pointer-events: none;
     }
 
-    .kbq-option {
-        position: relative;
+    .kbq-dropdown-item {
+        @include select.item-active-area(var(--kbq-size-3xs));
 
         &:before,
         &:after {
-            position: absolute;
-            content: '';
-            width: var(--kbq-size-xxs);
-            height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
-        }
-
-        &:before {
-            right: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
-
-        &:after {
-            left: calc(100% + var(--kbq-size-3xs)); // outline size
+            top: calc(-1 * var(--kbq-size-3xs));
+            bottom: calc(-1 * var(--kbq-size-3xs));
         }
     }