@koobiq/components 17.0.0-rc.10 → 17.0.0-rc.11

package/file-upload/multiple-file-upload.component.d.ts

@@ -1,9 +1,9 @@
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
+import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
 import { Subscription } from 'rxjs';
 import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
-import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     captionTextWhenSelected: string;

package/file-upload/public-api.d.ts

@@ -1,5 +1,5 @@
+export * from './file-drop';
 export * from './file-upload';
 export * from './file-upload.module';
 export * from './multiple-file-upload.component';
 export * from './single-file-upload.component';
-export * from './file-drop';

package/file-upload/single-file-upload.component.d.ts

@@ -1,8 +1,8 @@
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
-import { Subscription } from 'rxjs';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;

package/form-field/public-api.d.ts

@@ -1,12 +1,12 @@
-export * from './form-field.module';
+export * from './cleaner';
 export * from './form-field';
 export * from './form-field-control';
 export * from './form-field-errors';
+export * from './form-field.module';
 export * from './hint';
 export * from './password-hint';
 export * from './password-toggle';
-export * from './suffix';
 export * from './prefix';
-export * from './cleaner';
 export * from './stepper';
+export * from './suffix';
 export * from './validate.directive';

package/icon/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './icon.module';
-export * from './icon.component';
 export * from './icon-button.component';
 export * from './icon-item.component';
+export * from './icon.component';
+export * from './icon.module';

package/input/public-api.d.ts

@@ -1,6 +1,6 @@
-export * from './input.module';
 export * from './input';
 export * from './input-number';
+export * from './input-number-validators';
 export * from './input-password';
 export * from './input-value-accessor';
-export * from './input-number-validators';
+export * from './input.module';

package/link/_link-theme.scss

@@ -156,6 +156,8 @@
         & .kbq-icon {
             line-height: inherit;
             vertical-align: text-bottom;
+            display: inline-flex;
+            align-items: center;
         }
     }
 

package/link/link.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";

package/link/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './link.module';
 export * from './link.component';
+export * from './link.module';

package/list/list-selection.component.d.ts

@@ -1,9 +1,9 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, OnDestroy, OnInit, NgZone } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager, IFocusableOption } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, HasTabIndexCtor, HasTabIndex, MultipleMode, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Observable, Subject } from 'rxjs';

package/list/list.scss

@@ -21,7 +21,7 @@
 
     & .kbq-option-action {
         display: none;
-        height: 20px;
+        height: kbq-css-variable(size-xl);
         align-items: center;
     }
 

package/list/public-api.d.ts

@@ -1,3 +1,3 @@
-export * from './list.module';
-export * from './list.component';
 export * from './list-selection.component';
+export * from './list.component';
+export * from './list.module';

package/loader-overlay/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './loader-overlay.module';
 export * from './loader-overlay.component';
+export * from './loader-overlay.module';

package/modal/README.md

@@ -17,7 +17,7 @@ showConfirm() {
 
 ```ts
 let dialogRef = modalService.open({
-    kbqComponent: CustomComponent,
+    kbqComponent: CustomComponent
 });
 ```
 

package/modal/modal.directive.d.ts

@@ -1,15 +1,15 @@
 import * as i0 from "@angular/core";
 export declare class KbqModalTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [mcModalTitle]", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", never, {}, {}, never, ["*"], false, never>;
 }
 export declare class KbqModalBody {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalBody, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [mcModalBody]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqModalFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalFooter, "[kbq-modal-footer], kbq-modal-footer, [mcModalFooter]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalFooter, "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqModalMainAction {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalMainAction, never>;

package/modal/modal.type.d.ts

@@ -1,6 +1,6 @@
 import { OverlayRef } from '@angular/cdk/overlay';
 import { EventEmitter, TemplateRef, Type } from '@angular/core';
-export type OnClickCallback<T> = ((instance: T) => (false | void | {}) | Promise<false | void | {}>);
+export type OnClickCallback<T> = (instance: T) => (false | void | {}) | Promise<false | void | {}>;
 export type ModalType = 'default' | 'confirm' | 'custom';
 export type ConfirmType = 'confirm' | 'success' | 'warn';
 export declare enum ModalSize {
@@ -55,5 +55,5 @@ export interface IModalButtonOptions<T = any> {
     disabled?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
     autoFocus?: boolean;
     kbqModalMainAction?: boolean;
-    onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<(void | {})>;
+    onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<void | {}>;
 }

package/modal/public-api.d.ts

@@ -1,6 +1,6 @@
-export { KbqModalComponent } from './modal.component';
 export { KbqModalRef } from './modal-ref.class';
+export { KbqModalComponent } from './modal.component';
+export * from './modal.directive';
 export { KbqModalModule } from './modal.module';
 export { KbqModalService } from './modal.service';
-export * from './modal.directive';
 export * from './modal.type';

package/navbar/_navbar-item_horizontal.scss

@@ -15,18 +15,25 @@
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
-    min-height: kbq-css-variable(size-5xl);
-    min-width: kbq-css-variable(size-5xl);
+    min-height: kbq-css-variable(size-3xl);
+    min-width: kbq-css-variable(size-3xl);
 
-    padding: kbq-css-variable(size-s);
+    margin: kbq-css-variable(size-s);
 
     justify-content: center;
 
+    &:before {
+        top: calc(-1 * #{kbq-css-variable(size-s)});
+        left: calc(-1 * #{kbq-css-variable(size-s)});
+        right: calc(-1 * #{kbq-css-variable(size-s)});
+        bottom: calc(-1 * #{kbq-css-variable(size-s)});
+    }
+
     &:after {
-        top: kbq-css-variable(size-s);
-        right: kbq-css-variable(size-s);
-        bottom: kbq-css-variable(size-s);
-        left: kbq-css-variable(size-s);
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
     }
 
     & .kbq-navbar-item__title {
@@ -39,14 +46,14 @@
     }
 
     &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
+        margin-left: 0;
+        margin-right: 0;
         padding-right: kbq-css-variable(size-m);
         padding-left: kbq-css-variable(size-m);
-        // (total height 48 - grey hover 32) / 2
-        &:after {
-            top: kbq-css-variable(size-s);
-            right: 0;
-            bottom: kbq-css-variable(size-s);
+
+        &:before {
             left: 0;
+            right: 0;
         }
 
         & > .kbq-icon {
@@ -57,17 +64,12 @@
     }
 
     &.kbq-navbar-bento {
-        min-width: 44px;
-
         justify-content: center;
 
-        padding-right: kbq-css-variable(size-xxs);
+        margin-right: kbq-css-variable(size-xxs);
 
-        &:after {
-            top: kbq-css-variable(size-s);
-            right: kbq-css-variable(size-xxs);
-            bottom: kbq-css-variable(size-s);
-            left: kbq-css-variable(size-s);
+        &:before {
+            right: calc(-1 * #{kbq-css-variable(size-xxs)});
         }
     }
 
@@ -86,11 +88,17 @@
 
         z-index: 1;
 
-        top: kbq-css-variable(size-xs);
-        right: kbq-css-variable(size-xs);
+        top: -2px;
+        right: -2px;
     }
 
     &.kbq-navbar-item_has-nested {
-        padding: 0 kbq-css-variable(size-m);
+        margin-left: kbq-css-variable(size-m);
+        margin-right: kbq-css-variable(size-m);
+
+        &:before {
+            left: calc(-1 * #{kbq-css-variable(size-m)});
+            right: calc(-1 * #{kbq-css-variable(size-m)});
+        }
     }
 }

package/navbar/_navbar-item_vertical.scss

@@ -5,8 +5,6 @@
 @use '../core/styles/common/tokens' as *;
 
 .kbq-navbar-item.kbq-vertical {
-    align-items: flex-start;
-
     & .kbq-navbar-item__container {
         gap: kbq-css-variable(size-m);
     }

package/navbar/navbar-item.scss

@@ -25,10 +25,17 @@
 
     & .kbq-button-icon {
         position: absolute;
+        padding-left: kbq-css-variable(size-xs);
+        padding-right: kbq-css-variable(size-xs);
         top: 50%;
         transform: translateY(-50%);
     }
 
+    &:before {
+        position: absolute;
+        content: '';
+    }
+
     &:after {
         position: absolute;
         content: '';

package/navbar/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './navbar.module';
-export * from './navbar.component';
 export * from './navbar-item.component';
+export * from './navbar.component';
+export * from './navbar.module';
 export * from './vertical-navbar.component';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.0-rc.10",
+    "version": "17.0.0-rc.11",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,9 +19,9 @@
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.0.0-rc.10",
-        "@koobiq/angular-moment-adapter": "17.0.0-rc.10",
-        "@koobiq/angular-luxon-adapter": "17.0.0-rc.10",
+        "@koobiq/cdk": "17.0.0-rc.11",
+        "@koobiq/angular-moment-adapter": "17.0.0-rc.11",
+        "@koobiq/angular-luxon-adapter": "17.0.0-rc.11",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
         "@koobiq/tokens-builder": "3.0.0-rc.12",

package/popover/popover.component.d.ts

@@ -1,5 +1,5 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher, ScrollStrategy, OverlayConfig } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";

package/popover/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './popover.module';
-export * from './popover.component';
 export * from './popover-animations';
 export * from './popover-confirm.component';
+export * from './popover.component';
+export * from './popover.module';